@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/build/esm/ThemeExplorer/makeColorScheme.js

@@ -1,5 +1,4 @@
-import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
-
+import { hexFromArgb } from '@material/material-color-utilities';
 export function makeColorScheme(opts) {
   function c(palette, tone) {
     return hexFromArgb(palette.tone(tone));
@@ -14,10 +13,19 @@ export function makeColorScheme(opts) {
     'secondary-container': c(opts.secondary, 90),
     'tertiary-container': c(opts.tertiary, 90),
     'error-container': c(opts.error, 90),
-    background: c(opts.neutral, 99),
-    surface: c(opts.neutral, 99),
+    background: c(opts.neutral, 98),
     'surface-variant': c(opts.neutralVariant, 90),
     outline: c(opts.neutralVariant, 50),
+    'outline-variant': c(opts.neutralVariant, 80),
+    // https://material.io/blog/tone-based-surface-color-m3
+    'surface-dim': c(opts.neutral, 87),
+    surface: c(opts.neutral, 98),
+    'surface-bright': c(opts.neutral, 98),
+    'surface-container-lowest': c(opts.neutral, 100),
+    'surface-container-low': c(opts.neutral, 96),
+    'surface-container': c(opts.neutral, 94),
+    'surface-container-high': c(opts.neutral, 92),
+    'surface-container-highest': c(opts.neutral, 90),
     on: {
       primary: c(opts.primary, 100),
       secondary: c(opts.secondary, 100),
@@ -28,9 +36,18 @@ export function makeColorScheme(opts) {
       'tertiary-container': c(opts.tertiary, 10),
       'error-container': c(opts.error, 10),
       background: c(opts.neutral, 10),
-      surface: c(opts.neutral, 10),
       'surface-variant': c(opts.neutralVariant, 30),
-      outline: c(opts.neutralVariant, 95)
+      outline: c(opts.neutralVariant, 95),
+      'outline-variant': c(opts.neutralVariant, 10),
+      // https://material.io/blog/tone-based-surface-color-m3
+      'surface-dim': c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-bright': c(opts.neutral, 10),
+      'surface-container-lowest': c(opts.neutral, 10),
+      'surface-container-low': c(opts.neutral, 10),
+      'surface-container': c(opts.neutral, 10),
+      'surface-container-high': c(opts.neutral, 10),
+      'surface-container-highest': c(opts.neutral, 10)
     },
     modes: {
       dark: {
@@ -42,10 +59,20 @@ export function makeColorScheme(opts) {
         'secondary-container': c(opts.secondary, 30),
         'tertiary-container': c(opts.tertiary, 30),
         'error-container': c(opts.error, 30),
-        background: c(opts.neutral, 10),
-        surface: c(opts.neutral, 10),
+        background: c(opts.neutral, 6),
         'surface-variant': c(opts.neutralVariant, 30),
         outline: c(opts.neutralVariant, 60),
+        'outline-variant': c(opts.neutralVariant, 30),
+        // https://material.io/blog/tone-based-surface-color-m3
+        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
+        'surface-dim': c(opts.neutral, 6),
+        surface: c(opts.neutral, 6),
+        'surface-bright': c(opts.neutral, 24),
+        'surface-container-lowest': c(opts.neutral, 4),
+        'surface-container-low': c(opts.neutral, 10),
+        'surface-container': c(opts.neutral, 12),
+        'surface-container-high': c(opts.neutral, 17),
+        'surface-container-highest': c(opts.neutral, 22),
         on: {
           primary: c(opts.primary, 20),
           secondary: c(opts.secondary, 20),
@@ -56,9 +83,18 @@ export function makeColorScheme(opts) {
           'tertiary-container': c(opts.tertiary, 90),
           'error-container': c(opts.error, 90),
           background: c(opts.neutral, 90),
-          surface: c(opts.neutral, 90),
           'surface-variant': c(opts.neutralVariant, 80),
-          outline: c(opts.neutralVariant, 10)
+          outline: c(opts.neutralVariant, 10),
+          'outline-variant': c(opts.neutralVariant, 90),
+          // https://material.io/blog/tone-based-surface-color-m3
+          'surface-dim': c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-bright': c(opts.neutral, 90),
+          'surface-container-lowest': c(opts.neutral, 90),
+          'surface-container-low': c(opts.neutral, 90),
+          'surface-container': c(opts.neutral, 90),
+          'surface-container-high': c(opts.neutral, 90),
+          'surface-container-highest': c(opts.neutral, 90)
         }
       }
     }

package/build/esm/ThemeExplorer/makeColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","surface","neutralVariant","outline","on","modes","dark"],"mappings":"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","sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\nimport { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved\n\nexport function makeColorScheme(opts: {\n  primary: TonalPalette;\n  secondary: TonalPalette;\n  tertiary: TonalPalette;\n  error: TonalPalette;\n  neutral: TonalPalette;\n  neutralVariant: TonalPalette;\n}) {\n  function c(palette: TonalPalette, tone: number) {\n    return hexFromArgb(palette.tone(tone));\n  }\n\n  return {\n    primary: c(opts.primary, 40),\n    secondary: c(opts.secondary, 40),\n    tertiary: c(opts.tertiary, 40),\n    error: c(opts.error, 40),\n    'primary-container': c(opts.primary, 90),\n    'secondary-container': c(opts.secondary, 90),\n    'tertiary-container': c(opts.tertiary, 90),\n    'error-container': c(opts.error, 90),\n    background: c(opts.neutral, 99),\n    surface: c(opts.neutral, 99),\n    'surface-variant': c(opts.neutralVariant, 90),\n    outline: c(opts.neutralVariant, 50),\n    on: {\n      primary: c(opts.primary, 100),\n      secondary: c(opts.secondary, 100),\n      tertiary: c(opts.tertiary, 100),\n      error: c(opts.error, 100),\n      'primary-container': c(opts.primary, 10),\n      'secondary-container': c(opts.secondary, 10),\n      'tertiary-container': c(opts.tertiary, 10),\n      'error-container': c(opts.error, 10),\n      background: c(opts.neutral, 10),\n      surface: c(opts.neutral, 10),\n      'surface-variant': c(opts.neutralVariant, 30),\n      outline: c(opts.neutralVariant, 95),\n    },\n    modes: {\n      dark: {\n        primary: c(opts.primary, 80),\n        secondary: c(opts.secondary, 80),\n        tertiary: c(opts.tertiary, 80),\n        error: c(opts.error, 80),\n        'primary-container': c(opts.primary, 30),\n        'secondary-container': c(opts.secondary, 30),\n        'tertiary-container': c(opts.tertiary, 30),\n        'error-container': c(opts.error, 30),\n        background: c(opts.neutral, 10),\n        surface: c(opts.neutral, 10),\n        'surface-variant': c(opts.neutralVariant, 30),\n        outline: c(opts.neutralVariant, 60),\n        on: {\n          primary: c(opts.primary, 20),\n          secondary: c(opts.secondary, 20),\n          tertiary: c(opts.tertiary, 20),\n          error: c(opts.error, 20),\n          'primary-container': c(opts.primary, 90),\n          'secondary-container': c(opts.secondary, 90),\n          'tertiary-container': c(opts.tertiary, 90),\n          'error-container': c(opts.error, 90),\n          background: c(opts.neutral, 90),\n          surface: c(opts.neutral, 90),\n          'surface-variant': c(opts.neutralVariant, 80),\n          outline: c(opts.neutralVariant, 10),\n        },\n      },\n    },\n  };\n}\n"],"file":"makeColorScheme.js"}
+{"version":3,"file":"makeColorScheme.js","names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","neutralVariant","outline","surface","on","modes","dark"],"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\r\nimport { hexFromArgb } from '@material/material-color-utilities';\r\n\r\nexport function makeColorScheme(opts: {\r\n  primary: TonalPalette;\r\n  secondary: TonalPalette;\r\n  tertiary: TonalPalette;\r\n  error: TonalPalette;\r\n  neutral: TonalPalette;\r\n  neutralVariant: TonalPalette;\r\n}) {\r\n  function c(palette: TonalPalette, tone: number) {\r\n    return hexFromArgb(palette.tone(tone));\r\n  }\r\n\r\n  return {\r\n    primary: c(opts.primary, 40),\r\n    secondary: c(opts.secondary, 40),\r\n    tertiary: c(opts.tertiary, 40),\r\n    error: c(opts.error, 40),\r\n    'primary-container': c(opts.primary, 90),\r\n    'secondary-container': c(opts.secondary, 90),\r\n    'tertiary-container': c(opts.tertiary, 90),\r\n    'error-container': c(opts.error, 90),\r\n    background: c(opts.neutral, 98),\r\n    'surface-variant': c(opts.neutralVariant, 90),\r\n    outline: c(opts.neutralVariant, 50),\r\n    'outline-variant': c(opts.neutralVariant, 80),\r\n    // https://material.io/blog/tone-based-surface-color-m3\r\n    'surface-dim': c(opts.neutral, 87),\r\n    surface: c(opts.neutral, 98),\r\n    'surface-bright': c(opts.neutral, 98),\r\n    'surface-container-lowest': c(opts.neutral, 100),\r\n    'surface-container-low': c(opts.neutral, 96),\r\n    'surface-container': c(opts.neutral, 94),\r\n    'surface-container-high': c(opts.neutral, 92),\r\n    'surface-container-highest': c(opts.neutral, 90),\r\n    on: {\r\n      primary: c(opts.primary, 100),\r\n      secondary: c(opts.secondary, 100),\r\n      tertiary: c(opts.tertiary, 100),\r\n      error: c(opts.error, 100),\r\n      'primary-container': c(opts.primary, 10),\r\n      'secondary-container': c(opts.secondary, 10),\r\n      'tertiary-container': c(opts.tertiary, 10),\r\n      'error-container': c(opts.error, 10),\r\n      background: c(opts.neutral, 10),\r\n      'surface-variant': c(opts.neutralVariant, 30),\r\n      outline: c(opts.neutralVariant, 95),\r\n      'outline-variant': c(opts.neutralVariant, 10),\r\n      // https://material.io/blog/tone-based-surface-color-m3\r\n      'surface-dim': c(opts.neutral, 10),\r\n      surface: c(opts.neutral, 10),\r\n      'surface-bright': c(opts.neutral, 10),\r\n      'surface-container-lowest': c(opts.neutral, 10),\r\n      'surface-container-low': c(opts.neutral, 10),\r\n      'surface-container': c(opts.neutral, 10),\r\n      'surface-container-high': c(opts.neutral, 10),\r\n      'surface-container-highest': c(opts.neutral, 10),\r\n    },\r\n    modes: {\r\n      dark: {\r\n        primary: c(opts.primary, 80),\r\n        secondary: c(opts.secondary, 80),\r\n        tertiary: c(opts.tertiary, 80),\r\n        error: c(opts.error, 80),\r\n        'primary-container': c(opts.primary, 30),\r\n        'secondary-container': c(opts.secondary, 30),\r\n        'tertiary-container': c(opts.tertiary, 30),\r\n        'error-container': c(opts.error, 30),\r\n        background: c(opts.neutral, 6),\r\n        'surface-variant': c(opts.neutralVariant, 30),\r\n        outline: c(opts.neutralVariant, 60),\r\n        'outline-variant': c(opts.neutralVariant, 30),\r\n        // https://material.io/blog/tone-based-surface-color-m3\r\n        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156\r\n        'surface-dim': c(opts.neutral, 6),\r\n        surface: c(opts.neutral, 6),\r\n        'surface-bright': c(opts.neutral, 24),\r\n        'surface-container-lowest': c(opts.neutral, 4),\r\n        'surface-container-low': c(opts.neutral, 10),\r\n        'surface-container': c(opts.neutral, 12),\r\n        'surface-container-high': c(opts.neutral, 17),\r\n        'surface-container-highest': c(opts.neutral, 22),\r\n        on: {\r\n          primary: c(opts.primary, 20),\r\n          secondary: c(opts.secondary, 20),\r\n          tertiary: c(opts.tertiary, 20),\r\n          error: c(opts.error, 20),\r\n          'primary-container': c(opts.primary, 90),\r\n          'secondary-container': c(opts.secondary, 90),\r\n          'tertiary-container': c(opts.tertiary, 90),\r\n          'error-container': c(opts.error, 90),\r\n          background: c(opts.neutral, 90),\r\n          'surface-variant': c(opts.neutralVariant, 80),\r\n          outline: c(opts.neutralVariant, 10),\r\n          'outline-variant': c(opts.neutralVariant, 90),\r\n          // https://material.io/blog/tone-based-surface-color-m3\r\n          'surface-dim': c(opts.neutral, 90),\r\n          surface: c(opts.neutral, 90),\r\n          'surface-bright': c(opts.neutral, 90),\r\n          'surface-container-lowest': c(opts.neutral, 90),\r\n          'surface-container-low': c(opts.neutral, 90),\r\n          'surface-container': c(opts.neutral, 90),\r\n          'surface-container-high': c(opts.neutral, 90),\r\n          'surface-container-highest': c(opts.neutral, 90),\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n"],"mappings":"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"}

package/build/esm/ThemeExplorer/makeTailwindTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../theme/theme';
+export declare function makeTailwindThemeCSS(theme: Theme): string;

package/build/esm/ThemeExplorer/makeTailwindTheme.js

@@ -0,0 +1,30 @@
+import { DARK_SCHEME_CLASS, LIGHT_SCHEME_CLASS, transformTheme } from '@basic-ui/dynamic-theme';
+export function makeTailwindThemeCSS(theme) {
+  var transformedTheme = transformTheme(theme, []);
+  var _transformedTheme$col = transformedTheme.colorModes,
+      light = _transformedTheme$col.light,
+      dark = _transformedTheme$col.dark;
+
+  var parseColorMode = function parseColorMode(colors) {
+    var keys = Object.keys(colors);
+    var cssLines = []; // let css = '';
+
+    for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+      var key = _keys[_i];
+
+      if (!key.endsWith('--rgb')) {
+        continue;
+      }
+
+      cssLines.push("  " + key + ': ' + colors[key]);
+    }
+
+    return cssLines.join(';\n') + ';';
+  };
+
+  var bodySelector = "body";
+  var lightThemeSelector = ['' + bodySelector, '' + bodySelector + '.' + LIGHT_SCHEME_CLASS, '' + bodySelector + ' .' + LIGHT_SCHEME_CLASS].join(',\n');
+  var darkThemeSelector = ['' + bodySelector + '.' + DARK_SCHEME_CLASS, '' + bodySelector + ' .' + DARK_SCHEME_CLASS].join(',\n');
+  return "".concat(lightThemeSelector, " {\n").concat(parseColorMode(light), "\n}\n").concat(darkThemeSelector, " {\n").concat(parseColorMode(dark), "\n}");
+}
+//# sourceMappingURL=makeTailwindTheme.js.map

package/build/esm/ThemeExplorer/makeTailwindTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeTailwindTheme.js","names":["DARK_SCHEME_CLASS","LIGHT_SCHEME_CLASS","transformTheme","makeTailwindThemeCSS","theme","transformedTheme","colorModes","light","dark","parseColorMode","colors","keys","Object","cssLines","key","endsWith","push","join","bodySelector","lightThemeSelector","darkThemeSelector"],"sources":["../../../src/ThemeExplorer/makeTailwindTheme.ts"],"sourcesContent":["import {\r\n  DARK_SCHEME_CLASS,\r\n  LIGHT_SCHEME_CLASS,\r\n  transformTheme,\r\n} from '@basic-ui/dynamic-theme';\r\n\r\nimport type { Theme } from '../theme/theme';\r\n\r\nexport function makeTailwindThemeCSS(theme: Theme) {\r\n  const transformedTheme = transformTheme(theme, []);\r\n  const { light, dark } = transformedTheme.colorModes;\r\n\r\n  const parseColorMode = (colors: Record<string, string>) => {\r\n    const keys = Object.keys(colors);\r\n    const cssLines: string[] = [];\r\n    // let css = '';\r\n    for (const key of keys) {\r\n      if (!key.endsWith('--rgb')) {\r\n        continue;\r\n      }\r\n\r\n      cssLines.push(`  ` + key + ': ' + colors[key]);\r\n    }\r\n    return cssLines.join(';\\n') + ';';\r\n  };\r\n\r\n  const bodySelector = `body`;\r\n  const lightThemeSelector = [\r\n    '' + bodySelector,\r\n    '' + bodySelector + '.' + LIGHT_SCHEME_CLASS,\r\n    '' + bodySelector + ' .' + LIGHT_SCHEME_CLASS,\r\n  ].join(',\\n');\r\n  const darkThemeSelector = [\r\n    '' + bodySelector + '.' + DARK_SCHEME_CLASS,\r\n    '' + bodySelector + ' .' + DARK_SCHEME_CLASS,\r\n  ].join(',\\n');\r\n\r\n  return `${lightThemeSelector} {\r\n${parseColorMode(light)}\r\n}\r\n${darkThemeSelector} {\r\n${parseColorMode(dark)}\r\n}`;\r\n}\r\n"],"mappings":"AAAA,SACEA,iBADF,EAEEC,kBAFF,EAGEC,cAHF,QAIO,yBAJP;AAQA,OAAO,SAASC,oBAAT,CAA8BC,KAA9B,EAA4C;EACjD,IAAMC,gBAAgB,GAAGH,cAAc,CAACE,KAAD,EAAQ,EAAR,CAAvC;EACA,4BAAwBC,gBAAgB,CAACC,UAAzC;EAAA,IAAQC,KAAR,yBAAQA,KAAR;EAAA,IAAeC,IAAf,yBAAeA,IAAf;;EAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,MAAD,EAAoC;IACzD,IAAMC,IAAI,GAAGC,MAAM,CAACD,IAAP,CAAYD,MAAZ,CAAb;IACA,IAAMG,QAAkB,GAAG,EAA3B,CAFyD,CAGzD;;IACA,yBAAkBF,IAAlB,2BAAwB;MAAnB,IAAMG,GAAG,YAAT;;MACH,IAAI,CAACA,GAAG,CAACC,QAAJ,CAAa,OAAb,CAAL,EAA4B;QAC1B;MACD;;MAEDF,QAAQ,CAACG,IAAT,CAAc,OAAOF,GAAP,GAAa,IAAb,GAAoBJ,MAAM,CAACI,GAAD,CAAxC;IACD;;IACD,OAAOD,QAAQ,CAACI,IAAT,CAAc,KAAd,IAAuB,GAA9B;EACD,CAZD;;EAcA,IAAMC,YAAY,SAAlB;EACA,IAAMC,kBAAkB,GAAG,CACzB,KAAKD,YADoB,EAEzB,KAAKA,YAAL,GAAoB,GAApB,GAA0BjB,kBAFD,EAGzB,KAAKiB,YAAL,GAAoB,IAApB,GAA2BjB,kBAHF,EAIzBgB,IAJyB,CAIpB,KAJoB,CAA3B;EAKA,IAAMG,iBAAiB,GAAG,CACxB,KAAKF,YAAL,GAAoB,GAApB,GAA0BlB,iBADF,EAExB,KAAKkB,YAAL,GAAoB,IAApB,GAA2BlB,iBAFH,EAGxBiB,IAHwB,CAGnB,KAHmB,CAA1B;EAKA,iBAAUE,kBAAV,iBACAV,cAAc,CAACF,KAAD,CADd,kBAGAa,iBAHA,iBAIAX,cAAc,CAACD,IAAD,CAJd;AAMD"}

package/build/esm/ThemeExplorer/updateGoogleFonts.js

@@ -0,0 +1,70 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+var _require = require('fs'),
+    writeFileSync = _require.writeFileSync; // This file auto generates our googleFonts.ts file
+// You can generate an API key from here
+// https://developers.google.com/fonts/docs/developer_api#APIKey
+
+
+var API_KEY = process.env.GOOGLE_FONTS_API_KEY;
+
+function main() {
+  return _main.apply(this, arguments);
+}
+
+function _main() {
+  _main = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var res, json, fonts, str;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetch("https://content-webfonts.googleapis.com/v1/webfonts?sort=POPULARITY&key=".concat(API_KEY));
+
+          case 2:
+            res = _context.sent;
+            _context.next = 5;
+            return res.json();
+
+          case 5:
+            json = _context.sent;
+
+            if (!json.error) {
+              _context.next = 9;
+              break;
+            }
+
+            console.error(json.error);
+            return _context.abrupt("return");
+
+          case 9:
+            fonts = json.items.map(function (item) {
+              return item.family;
+            });
+            str = '';
+            str += "// THIS FILE WAS AUTOGENERATED BY updateGoogleFonts.js\n";
+            str += "// TO UPDATE IT RUN THE FOLLOWING WITH Node.js v18+\n";
+            str += "// GOOGLE_FONTS_API_KEY=\"<SECRET>\" node updateGoogleFonts.js";
+            str += "\n\n/* eslint-disable prettier/prettier */\n";
+            str += "export const googleFonts = [\n";
+            str += fonts.map(function (f) {
+              return '  ' + JSON.stringify(f);
+            }).join(',\n');
+            str += '\n];\n';
+            writeFileSync('./googleFonts.ts', str, 'utf-8');
+
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _main.apply(this, arguments);
+}
+
+main();
+//# sourceMappingURL=updateGoogleFonts.js.map

package/build/esm/ThemeExplorer/updateGoogleFonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateGoogleFonts.js","names":["require","writeFileSync","API_KEY","process","env","GOOGLE_FONTS_API_KEY","main","fetch","res","json","error","console","fonts","items","map","item","family","str","f","JSON","stringify","join"],"sources":["../../../src/ThemeExplorer/updateGoogleFonts.js"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-var-requires\r\nconst { writeFileSync } = require('fs');\r\n\r\n// This file auto generates our googleFonts.ts file\r\n\r\n// You can generate an API key from here\r\n// https://developers.google.com/fonts/docs/developer_api#APIKey\r\nconst API_KEY = process.env.GOOGLE_FONTS_API_KEY;\r\n\r\nasync function main() {\r\n  const res = await fetch(\r\n    `https://content-webfonts.googleapis.com/v1/webfonts?sort=POPULARITY&key=${API_KEY}`\r\n  );\r\n\r\n  const json = await res.json();\r\n  if (json.error) {\r\n    console.error(json.error);\r\n    return;\r\n  }\r\n  const fonts = json.items.map((item) => item.family);\r\n  let str = '';\r\n  str += `// THIS FILE WAS AUTOGENERATED BY updateGoogleFonts.js\\n`;\r\n  str += `// TO UPDATE IT RUN THE FOLLOWING WITH Node.js v18+\\n`;\r\n  str += `// GOOGLE_FONTS_API_KEY=\"<SECRET>\" node updateGoogleFonts.js`;\r\n  str += `\\n\\n/* eslint-disable prettier/prettier */\\n`;\r\n  str += `export const googleFonts = [\\n`;\r\n  str += fonts.map((f) => '  ' + JSON.stringify(f)).join(',\\n');\r\n  str += '\\n];\\n';\r\n\r\n  writeFileSync('./googleFonts.ts', str, 'utf-8');\r\n}\r\n\r\nmain();\r\n"],"mappings":";;;AAAA;AACA,eAA0BA,OAAO,CAAC,IAAD,CAAjC;AAAA,IAAQC,aAAR,YAAQA,aAAR,C,CAEA;AAEA;AACA;;;AACA,IAAMC,OAAO,GAAGC,OAAO,CAACC,GAAR,CAAYC,oBAA5B;;SAEeC,I;;;;;mEAAf;IAAA;IAAA;MAAA;QAAA;UAAA;YAAA;YAAA,OACoBC,KAAK,mFACsDL,OADtD,EADzB;;UAAA;YACQM,GADR;YAAA;YAAA,OAKqBA,GAAG,CAACC,IAAJ,EALrB;;UAAA;YAKQA,IALR;;YAAA,KAMMA,IAAI,CAACC,KANX;cAAA;cAAA;YAAA;;YAOIC,OAAO,CAACD,KAAR,CAAcD,IAAI,CAACC,KAAnB;YAPJ;;UAAA;YAUQE,KAVR,GAUgBH,IAAI,CAACI,KAAL,CAAWC,GAAX,CAAe,UAACC,IAAD;cAAA,OAAUA,IAAI,CAACC,MAAf;YAAA,CAAf,CAVhB;YAWMC,GAXN,GAWY,EAXZ;YAYEA,GAAG,8DAAH;YACAA,GAAG,2DAAH;YACAA,GAAG,oEAAH;YACAA,GAAG,kDAAH;YACAA,GAAG,oCAAH;YACAA,GAAG,IAAIL,KAAK,CAACE,GAAN,CAAU,UAACI,CAAD;cAAA,OAAO,OAAOC,IAAI,CAACC,SAAL,CAAeF,CAAf,CAAd;YAAA,CAAV,EAA2CG,IAA3C,CAAgD,KAAhD,CAAP;YACAJ,GAAG,IAAI,QAAP;YAEAhB,aAAa,CAAC,kBAAD,EAAqBgB,GAArB,EAA0B,OAA1B,CAAb;;UApBF;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,C;;;;AAuBAX,IAAI"}

package/build/esm/ThemeExplorer/useDeferredColor.d.ts

@@ -1,3 +1,3 @@
-import { TonalPalette } from '@material/material-color-utilities';
-import type { Color } from '@basic-ui/color-picker';
-export declare function useDeferredColor(key: string, fallbackValue: TonalPalette): [Color | null, TonalPalette, (c: Color | null) => void];
+import { TonalPalette } from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+export declare function useDeferredColor(key: string, fallbackValue: TonalPalette): [Color | null, TonalPalette, (c: Color | null) => void];

package/build/esm/ThemeExplorer/useDeferredColor.js

@@ -1,19 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
-
-import { useLocalStorageCachedState } from './useLocalStorageCachedState'; // import './styles.css';
-
+import { useMemo } from 'react';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
 export function useDeferredColor(key, fallbackValue) {
-  var _useLocalStorageCache = useLocalStorageCachedState('theme-builder.' + key, null),
+  var _useLocalStorageCache = useLocalStorageCachedState(null, 'theme-builder.' + key),
       _useLocalStorageCache2 = _slicedToArray(_useLocalStorageCache, 2),
       color = _useLocalStorageCache2[0],
       setColor = _useLocalStorageCache2[1];
 
-  var deferredColor = useDeferredValue(color);
   var colorTonal = useMemo(function () {
-    return deferredColor != null && deferredColor.hex ? TonalPalette.fromInt(argbFromHex(deferredColor.hex)) : fallbackValue;
-  }, [deferredColor == null ? void 0 : deferredColor.hex, fallbackValue]);
+    return color !== null && color !== void 0 && color.hex ? TonalPalette.fromInt(argbFromHex(color.hex)) : fallbackValue;
+  }, [color === null || color === void 0 ? void 0 : color.hex, fallbackValue]);
   return [color, colorTonal, setColor];
 }
 //# sourceMappingURL=useDeferredColor.js.map

package/build/esm/ThemeExplorer/useDeferredColor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/useDeferredColor.tsx"],"names":["useMemo","useDeferredValue","TonalPalette","argbFromHex","useLocalStorageCachedState","useDeferredColor","key","fallbackValue","color","setColor","deferredColor","colorTonal","hex","fromInt"],"mappings":";AAAA,SAASA,OAAT,EAAkBC,gBAAlB,QAA0C,OAA1C;AACA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,oCAA1C,C,CAAgF;;AAGhF,SAASC,0BAAT,QAA2C,8BAA3C,C,CAEA;;AACA,OAAO,SAASC,gBAAT,CACLC,GADK,EAELC,aAFK,EAGoD;AAAA,8BAC/BH,0BAA0B,CAClD,mBAAmBE,GAD+B,EAElD,IAFkD,CADK;AAAA;AAAA,MAClDE,KADkD;AAAA,MAC3CC,QAD2C;;AAKzD,MAAMC,aAAa,GAAGT,gBAAgB,CAACO,KAAD,CAAtC;AACA,MAAMG,UAAU,GAAGX,OAAO,CACxB;AAAA,WACEU,aAAa,QAAb,IAAAA,aAAa,CAAEE,GAAf,GACIV,YAAY,CAACW,OAAb,CAAqBV,WAAW,CAACO,aAAa,CAACE,GAAf,CAAhC,CADJ,GAEIL,aAHN;AAAA,GADwB,EAKxB,CAACG,aAAD,oBAACA,aAAa,CAAEE,GAAhB,EAAqBL,aAArB,CALwB,CAA1B;AAOA,SAAO,CAACC,KAAD,EAAQG,UAAR,EAAoBF,QAApB,CAAP;AACD","sourcesContent":["import { useMemo, useDeferredValue } from 'react';\nimport { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved\nimport type { Color } from '@basic-ui/color-picker';\n\nimport { useLocalStorageCachedState } from './useLocalStorageCachedState';\n\n// import './styles.css';\nexport function useDeferredColor(\n  key: string,\n  fallbackValue: TonalPalette\n): [Color | null, TonalPalette, (c: Color | null) => void] {\n  const [color, setColor] = useLocalStorageCachedState<Color | null>(\n    'theme-builder.' + key,\n    null\n  );\n  const deferredColor = useDeferredValue(color);\n  const colorTonal = useMemo(\n    () =>\n      deferredColor?.hex\n        ? TonalPalette.fromInt(argbFromHex(deferredColor.hex))\n        : fallbackValue,\n    [deferredColor?.hex, fallbackValue]\n  );\n  return [color, colorTonal, setColor];\n}\n"],"file":"useDeferredColor.js"}
+{"version":3,"file":"useDeferredColor.js","names":["useMemo","TonalPalette","argbFromHex","useLocalStorageCachedState","useDeferredColor","key","fallbackValue","color","setColor","colorTonal","hex","fromInt"],"sources":["../../../src/ThemeExplorer/useDeferredColor.tsx"],"sourcesContent":["import { useMemo } from 'react';\r\nimport { TonalPalette, argbFromHex } from '@material/material-color-utilities';\r\nimport type { Color } from '@basic-ui/color-picker';\r\n\r\nimport { useLocalStorageCachedState } from './useLocalStorageCachedState';\r\n\r\nexport function useDeferredColor(\r\n  key: string,\r\n  fallbackValue: TonalPalette\r\n): [Color | null, TonalPalette, (c: Color | null) => void] {\r\n  const [color, setColor] = useLocalStorageCachedState<Color | null>(\r\n    null,\r\n    'theme-builder.' + key\r\n  );\r\n  const colorTonal = useMemo(\r\n    () =>\r\n      color?.hex ? TonalPalette.fromInt(argbFromHex(color.hex)) : fallbackValue,\r\n    [color?.hex, fallbackValue]\r\n  );\r\n  return [color, colorTonal, setColor];\r\n}\r\n"],"mappings":";AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,oCAA1C;AAGA,SAASC,0BAAT,QAA2C,8BAA3C;AAEA,OAAO,SAASC,gBAAT,CACLC,GADK,EAELC,aAFK,EAGoD;EACzD,4BAA0BH,0BAA0B,CAClD,IADkD,EAElD,mBAAmBE,GAF+B,CAApD;EAAA;EAAA,IAAOE,KAAP;EAAA,IAAcC,QAAd;;EAIA,IAAMC,UAAU,GAAGT,OAAO,CACxB;IAAA,OACEO,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEG,GAAP,GAAaT,YAAY,CAACU,OAAb,CAAqBT,WAAW,CAACK,KAAK,CAACG,GAAP,CAAhC,CAAb,GAA4DJ,aAD9D;EAAA,CADwB,EAGxB,CAACC,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEG,GAAR,EAAaJ,aAAb,CAHwB,CAA1B;EAKA,OAAO,CAACC,KAAD,EAAQE,UAAR,EAAoBD,QAApB,CAAP;AACD"}

package/build/esm/ThemeExplorer/useLocalStorageCachedState.d.ts

@@ -1 +1 @@
-export declare function useLocalStorageCachedState<T>(key: string, initialValue: T): [T, (c: T) => void];
+export declare function useLocalStorageCachedState<T>(initialValue: T, key: string): [T, (c: T) => void];

package/build/esm/ThemeExplorer/useLocalStorageCachedState.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useState } from 'react';
-export function useLocalStorageCachedState(key, initialValue) {
+export function useLocalStorageCachedState(initialValue, key) {
   var _useState = useState(function () {
     return JSON.parse(localStorage.getItem(key) || 'null') || initialValue;
   }),

package/build/esm/ThemeExplorer/useLocalStorageCachedState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/useLocalStorageCachedState.ts"],"names":["useCallback","useState","useLocalStorageCachedState","key","initialValue","JSON","parse","localStorage","getItem","state","_setState","setState","c","setItem","stringify"],"mappings":";AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AAEA,OAAO,SAASC,0BAAT,CACLC,GADK,EAELC,YAFK,EAGgB;AAAA,kBACMH,QAAQ,CACjC;AAAA,WAAMI,IAAI,CAACC,KAAL,CAAWC,YAAY,CAACC,OAAb,CAAqBL,GAArB,KAA6B,MAAxC,KAAmDC,YAAzD;AAAA,GADiC,CADd;AAAA;AAAA,MACdK,KADc;AAAA,MACPC,SADO;;AAIrB,MAAMC,QAAQ,GAAGX,WAAW,CAC1B,UAACY,CAAD,EAAgB;AACdF,IAAAA,SAAS,CAACE,CAAD,CAAT;;AACAL,IAAAA,YAAY,CAACM,OAAb,CAAqBV,GAArB,EAA0BE,IAAI,CAACS,SAAL,CAAeF,CAAf,CAA1B;AACD,GAJyB,EAK1B,CAACT,GAAD,CAL0B,CAA5B;AAOA,SAAO,CAACM,KAAD,EAAQE,QAAR,CAAP;AACD","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport function useLocalStorageCachedState<T>(\n  key: string,\n  initialValue: T\n): [T, (c: T) => void] {\n  const [state, _setState] = useState<T>(\n    () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue\n  );\n  const setState = useCallback(\n    (c: T): void => {\n      _setState(c);\n      localStorage.setItem(key, JSON.stringify(c));\n    },\n    [key]\n  );\n  return [state, setState];\n}\n"],"file":"useLocalStorageCachedState.js"}
+{"version":3,"file":"useLocalStorageCachedState.js","names":["useCallback","useState","useLocalStorageCachedState","initialValue","key","JSON","parse","localStorage","getItem","state","_setState","setState","c","setItem","stringify"],"sources":["../../../src/ThemeExplorer/useLocalStorageCachedState.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\r\n\r\nexport function useLocalStorageCachedState<T>(\r\n  initialValue: T,\r\n  key: string\r\n): [T, (c: T) => void] {\r\n  const [state, _setState] = useState<T>(\r\n    () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue\r\n  );\r\n  const setState = useCallback(\r\n    (c: T): void => {\r\n      _setState(c);\r\n      localStorage.setItem(key, JSON.stringify(c));\r\n    },\r\n    [key]\r\n  );\r\n  return [state, setState];\r\n}\r\n"],"mappings":";AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AAEA,OAAO,SAASC,0BAAT,CACLC,YADK,EAELC,GAFK,EAGgB;EACrB,gBAA2BH,QAAQ,CACjC;IAAA,OAAMI,IAAI,CAACC,KAAL,CAAWC,YAAY,CAACC,OAAb,CAAqBJ,GAArB,KAA6B,MAAxC,KAAmDD,YAAzD;EAAA,CADiC,CAAnC;EAAA;EAAA,IAAOM,KAAP;EAAA,IAAcC,SAAd;;EAGA,IAAMC,QAAQ,GAAGX,WAAW,CAC1B,UAACY,CAAD,EAAgB;IACdF,SAAS,CAACE,CAAD,CAAT;;IACAL,YAAY,CAACM,OAAb,CAAqBT,GAArB,EAA0BC,IAAI,CAACS,SAAL,CAAeF,CAAf,CAA1B;EACD,CAJyB,EAK1B,CAACR,GAAD,CAL0B,CAA5B;EAOA,OAAO,CAACK,KAAD,EAAQE,QAAR,CAAP;AACD"}

package/build/esm/Tooltip/Tooltip.d.ts

@@ -1,8 +1,8 @@
-import type { PopperProps } from '@basic-ui/core';
-import React from 'react';
-import type { BoxProps } from '../Box';
-export interface TooltipProps extends BoxProps, Omit<PopperProps, 'color' | 'anchorEl'> {
-    label: React.ReactNode;
-    disabled?: boolean;
-}
-export declare const Tooltip: React.ForwardRefExoticComponent<Pick<TooltipProps, "children" | "label" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "innerAs" | "disabled" | "placement" | "strategy" | "modifiers" | "usePortal" | "portalSelector" | "skidding" | "distance" | "offsetFn" | "arrowPadding"> & React.RefAttributes<HTMLDivElement>>;
+import type { PopperProps } from '@basic-ui/core';
+import type { ReactNode } from 'react';
+import type { BoxProps } from '../Box';
+export interface TooltipProps extends BoxProps, Omit<PopperProps, 'color' | 'anchorEl'> {
+    label: ReactNode;
+    disabled?: boolean;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "label" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "innerAs" | "placement" | "strategy" | "modifiers" | "usePortal" | "portalSelector" | "skidding" | "distance" | "offsetFn" | "arrowPadding"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Tooltip/Tooltip.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["placement", "children", "label", "__css"];
 import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,27 +10,40 @@ var BaseTooltip = _BaseTooltip;
 export var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, forwardedRef) {
   var _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      children = props.children,
+      label = props.label,
       __css = props.__css,
-      otherProps = _objectWithoutProperties(props, ["placement", "__css"]);
+      otherProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/_jsx(BaseTooltip, _extends({
+  var cssStyle = _extends({
+    variant: ['text.body-medium', 'text.body-small'],
+    bg: alpha('#616161', 0.9),
+    color: '#fff',
+    px: 2,
+    py: 1,
+    borderRadius: 'extra-small',
+    zIndex: 'tooltip'
+  }, __css);
+
+  if (!children) {
+    return /*#__PURE__*/_jsx(Box, _extends(_extends({
+      ref: forwardedRef,
+      __css: cssStyle
+    }, otherProps), {}, {
+      children: label
+    }));
+  }
+
+  return /*#__PURE__*/_jsx(BaseTooltip, _extends(_extends({
     as: Popper,
     innerAs: Box,
     ref: forwardedRef,
     placement: placement,
     distance: 8,
-    __css: _extends({
-      bg: alpha('#616161', 0.9),
-      color: '#fff',
-      fontSize: [2, 2, 1],
-      fontFamily: 'body',
-      fontWeight: 'regular',
-      lineHeight: [1.2, 1.2, 1.33],
-      px: [3, 3, 2],
-      py: [2, 2, 1],
-      borderRadius: '4px',
-      zIndex: 'tooltip'
-    }, __css)
-  }, otherProps));
+    label: label,
+    __css: cssStyle
+  }, otherProps), {}, {
+    children: children
+  }));
 });
 //# sourceMappingURL=Tooltip.js.map

package/build/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/Tooltip.tsx"],"names":["Tooltip","_BaseTooltip","Popper","React","forwardRef","Box","alpha","BaseTooltip","props","forwardedRef","placement","__css","otherProps","bg","color","fontSize","fontFamily","fontWeight","lineHeight","px","py","borderRadius","zIndex"],"mappings":";;AACA,SAASA,OAAO,IAAIC,YAApB,EAAkCC,MAAlC,QAAgD,gBAAhD;AAEA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;;AASA,IAAMC,WAIL,GAAGN,YAJJ;AAKA,OAAO,IAAMD,OAAO,gBAAGI,UAAU,CAC/B,SAASJ,OAAT,CAAiBQ,KAAjB,EAAwBC,YAAxB,EAAsC;AAAA,yBACmBD,KADnB,CAC5BE,SAD4B;AAAA,MAC5BA,SAD4B,iCAChB,QADgB;AAAA,MACNC,KADM,GACmBH,KADnB,CACNG,KADM;AAAA,MACIC,UADJ,4BACmBJ,KADnB;;AAGpC,sBACE,KAAC,WAAD;AACE,IAAA,EAAE,EAAEN,MADN;AAEE,IAAA,OAAO,EAAEG,GAFX;AAGE,IAAA,GAAG,EAAEI,YAHP;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,QAAQ,EAAE,CALZ;AAME,IAAA,KAAK;AACHG,MAAAA,EAAE,EAAEP,KAAK,CAAC,SAAD,EAAY,GAAZ,CADN;AAEHQ,MAAAA,KAAK,EAAE,MAFJ;AAGHC,MAAAA,QAAQ,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAHP;AAIHC,MAAAA,UAAU,EAAE,MAJT;AAKHC,MAAAA,UAAU,EAAE,SALT;AAMHC,MAAAA,UAAU,EAAE,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CANT;AAOHC,MAAAA,EAAE,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAPD;AAQHC,MAAAA,EAAE,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CARD;AASHC,MAAAA,YAAY,EAAE,KATX;AAUHC,MAAAA,MAAM,EAAE;AAVL,OAWAX,KAXA;AANP,KAmBMC,UAnBN,EADF;AAuBD,CA3B8B,CAA1B","sourcesContent":["import type { PopperProps } from '@basic-ui/core';\nimport { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';\nimport type { FC } from 'react';\nimport React, { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { alpha } from '../color';\n\nexport interface TooltipProps\n  extends BoxProps,\n    Omit<PopperProps, 'color' | 'anchorEl'> {\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst BaseTooltip: FC<\n  BoxProps & {\n    innerAs?: React.ElementType<any>;\n  } & Omit<PopperProps, 'color' | 'anchorEl'>\n> = _BaseTooltip as any;\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, forwardedRef) {\n    const { placement = 'bottom', __css, ...otherProps } = props;\n\n    return (\n      <BaseTooltip\n        as={Popper}\n        innerAs={Box}\n        ref={forwardedRef}\n        placement={placement}\n        distance={8}\n        __css={{\n          bg: alpha('#616161', 0.9),\n          color: '#fff',\n          fontSize: [2, 2, 1],\n          fontFamily: 'body',\n          fontWeight: 'regular',\n          lineHeight: [1.2, 1.2, 1.33],\n          px: [3, 3, 2],\n          py: [2, 2, 1],\n          borderRadius: '4px',\n          zIndex: 'tooltip',\n          ...__css,\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"Tooltip.js"}
+{"version":3,"file":"Tooltip.js","names":["Tooltip","_BaseTooltip","Popper","forwardRef","Box","alpha","BaseTooltip","props","forwardedRef","placement","children","label","__css","otherProps","cssStyle","variant","bg","color","px","py","borderRadius","zIndex"],"sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { PopperProps } from '@basic-ui/core';\r\nimport { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';\r\nimport type { ElementType, FC, ReactNode } from 'react';\r\nimport { forwardRef } from 'react';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { alpha } from '../color';\r\n\r\nexport interface TooltipProps\r\n  extends BoxProps,\r\n    Omit<PopperProps, 'color' | 'anchorEl'> {\r\n  label: ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nconst BaseTooltip: FC<\r\n  BoxProps & {\r\n    innerAs?: ElementType<any>;\r\n    label: ReactNode;\r\n  } & Omit<PopperProps, 'color' | 'anchorEl'>\r\n> = _BaseTooltip as any;\r\n\r\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\r\n  function Tooltip(props, forwardedRef) {\r\n    const {\r\n      placement = 'bottom',\r\n      children,\r\n      label,\r\n      __css,\r\n      ...otherProps\r\n    } = props;\r\n    const cssStyle = {\r\n      variant: ['text.body-medium', 'text.body-small'],\r\n      bg: alpha('#616161', 0.9),\r\n      color: '#fff',\r\n      px: 2,\r\n      py: 1,\r\n      borderRadius: 'extra-small',\r\n      zIndex: 'tooltip',\r\n      ...__css,\r\n    };\r\n\r\n    if (!children) {\r\n      return (\r\n        <Box ref={forwardedRef} __css={cssStyle} {...otherProps}>\r\n          {label}\r\n        </Box>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <BaseTooltip\r\n        as={Popper}\r\n        innerAs={Box}\r\n        ref={forwardedRef}\r\n        placement={placement}\r\n        distance={8}\r\n        label={label}\r\n        __css={cssStyle}\r\n        {...otherProps}\r\n      >\r\n        {children}\r\n      </BaseTooltip>\r\n    );\r\n  }\r\n);\r\n"],"mappings":";;;AACA,SAASA,OAAO,IAAIC,YAApB,EAAkCC,MAAlC,QAAgD,gBAAhD;AAEA,SAASC,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;;AASA,IAAMC,WAKL,GAAGL,YALJ;AAOA,OAAO,IAAMD,OAAO,gBAAGG,UAAU,CAC/B,SAASH,OAAT,CAAiBO,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,uBAMID,KANJ,CACEE,SADF;EAAA,IACEA,SADF,iCACc,QADd;EAAA,IAEEC,QAFF,GAMIH,KANJ,CAEEG,QAFF;EAAA,IAGEC,KAHF,GAMIJ,KANJ,CAGEI,KAHF;EAAA,IAIEC,KAJF,GAMIL,KANJ,CAIEK,KAJF;EAAA,IAKKC,UALL,4BAMIN,KANJ;;EAOA,IAAMO,QAAQ;IACZC,OAAO,EAAE,CAAC,kBAAD,EAAqB,iBAArB,CADG;IAEZC,EAAE,EAAEX,KAAK,CAAC,SAAD,EAAY,GAAZ,CAFG;IAGZY,KAAK,EAAE,MAHK;IAIZC,EAAE,EAAE,CAJQ;IAKZC,EAAE,EAAE,CALQ;IAMZC,YAAY,EAAE,aANF;IAOZC,MAAM,EAAE;EAPI,GAQTT,KARS,CAAd;;EAWA,IAAI,CAACF,QAAL,EAAe;IACb,oBACE,KAAC,GAAD;MAAK,GAAG,EAAEF,YAAV;MAAwB,KAAK,EAAEM;IAA/B,GAA6CD,UAA7C;MAAA,UACGF;IADH,GADF;EAKD;;EAED,oBACE,KAAC,WAAD;IACE,EAAE,EAAET,MADN;IAEE,OAAO,EAAEE,GAFX;IAGE,GAAG,EAAEI,YAHP;IAIE,SAAS,EAAEC,SAJb;IAKE,QAAQ,EAAE,CALZ;IAME,KAAK,EAAEE,KANT;IAOE,KAAK,EAAEG;EAPT,GAQMD,UARN;IAAA,UAUGH;EAVH,GADF;AAcD,CA1C8B,CAA1B"}

package/build/esm/Tooltip/index.d.ts

@@ -1 +1 @@
-export * from './Tooltip';
+export * from './Tooltip';

package/build/esm/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAd","sourcesContent":["export * from './Tooltip';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Tooltip/index.ts"],"sourcesContent":["export * from './Tooltip';\r\n"],"mappings":"AAAA,cAAc,WAAd"}

package/build/esm/color.d.ts

@@ -1,6 +1,8 @@
-import type { SystemStyleObject } from '@styled-system/css';
-import type { Theme } from './theme';
-export declare const alpha: (colorString: string, alphaValue: number) => (theme: any) => string;
-export declare function getColorOverlay(theme: Theme, baseColor: string, overlayColor: string, overlayOpacity: number): SystemStyleObject;
-export declare function getBackgroundOverlay(theme: Theme, backgroundOverlay: number | string, overlayColor?: string): SystemStyleObject;
-export declare function getDarkThemeBackgroundOverlay(theme: Theme, backgroundOverlay: number | string, overlayColor?: string): SystemStyleObject;
+import type { SystemStyleObject } from '@styled-system/css';
+import type { Theme } from './theme';
+export declare const alpha: (colorString: string, alphaValue: number) => (theme: any) => any;
+export declare function mixColor(baseColor: string, overlayColor: string): (theme: any) => string;
+export declare function mixColor(baseColor: string, overlayColor: string, overlayOpacity: number): (theme: any) => string;
+export declare function getColorOverlay(theme: Theme, baseColor: string, overlayColor: string, overlayOpacity: number): SystemStyleObject;
+export declare function getBackgroundOverlay(theme: Theme, backgroundOverlay: number | string, overlayColor?: string): SystemStyleObject;
+export declare function getDarkThemeBackgroundOverlay(theme: Theme, backgroundOverlay: number | string, overlayColor?: string): SystemStyleObject;

package/build/esm/color.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
-import { DARK_THEME_CLASS } from './ColorMode';
+import { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';
 export var alpha = function alpha(colorString, alphaValue) {
   return function (theme) {
     var color = get(theme, 'colors.' + colorString, colorString);
@@ -13,15 +13,24 @@ export var alpha = function alpha(colorString, alphaValue) {
       return "rgba(".concat(_color, ",").concat(alphaValue, ")");
     }
 
+    if (color.startsWith('rgba(')) {
+      return color;
+    }
+
     var rgb = parseToRgb(color);
     return "rgba(".concat(rgb.red, ",").concat(rgb.green, ",").concat(rgb.blue, ",").concat(alphaValue, ")");
   };
 };
+export function mixColor(baseColor, overlayColor, overlayOpacity) {
+  return function (theme) {
+    baseColor = get(theme, "colors.".concat(baseColor), baseColor);
+    overlayColor = overlayOpacity ? alpha(overlayColor, overlayOpacity)(theme) : get(theme, "colors.".concat(overlayColor), overlayColor);
+    return "linear-gradient(".concat(overlayColor, ", ").concat(overlayColor, "), ").concat(baseColor);
+  };
+}
 export function getColorOverlay(theme, baseColor, overlayColor, overlayOpacity) {
-  baseColor = get(theme, "colors.".concat(baseColor)) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
   return {
-    background: "linear-gradient(".concat(overlayColor, ", ").concat(overlayColor, "), ").concat(baseColor)
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme)
   };
 }
 export function getBackgroundOverlay(theme, backgroundOverlay) {
@@ -41,6 +50,6 @@ export function getDarkThemeBackgroundOverlay(theme, backgroundOverlay) {
     return {};
   }
 
-  return _defineProperty({}, ".".concat(DARK_THEME_CLASS, " &, &.").concat(DARK_THEME_CLASS), _extends({}, getBackgroundOverlay(theme, backgroundOverlay, overlayColor)));
+  return _defineProperty({}, ".".concat(DARK_SCHEME_CLASS, " &, &.").concat(DARK_SCHEME_CLASS), _extends({}, getBackgroundOverlay(theme, backgroundOverlay, overlayColor)));
 }
 //# sourceMappingURL=color.js.map

package/build/esm/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/color.ts"],"names":["get","parseToRgb","DARK_THEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","getColorOverlay","baseColor","overlayColor","overlayOpacity","background","getBackgroundOverlay","backgroundOverlay","Number","overlay","getDarkThemeBackgroundOverlay"],"mappings":";;AACA,SAASA,GAAT,QAAoB,oBAApB;AACA,SAASC,UAAT,QAA2B,UAA3B;AAEA,SAASC,gBAAT,QAAiC,aAAjC;AAGA,OAAO,IAAMC,KAAK,GAChB,SADWA,KACX,CAACC,WAAD,EAAsBC,UAAtB;AAAA,SAA6C,UAACC,KAAD,EAAgB;AAC3D,QAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;AACA,QAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;AAC3B,UAAMD,MAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;;AACA,4BAAeG,MAAf,cAAwBF,UAAxB;AACD;;AAED,QAAMI,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;AACA,0BAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;AACD,GATD;AAAA,CADK;AAYP,OAAO,SAASQ,eAAT,CACLP,KADK,EAELQ,SAFK,EAGLC,YAHK,EAILC,cAJK,EAKc;AACnBF,EAAAA,SAAS,GAAGd,GAAG,CAACM,KAAD,mBAAkBQ,SAAlB,EAAH,IAAqCA,SAAjD;AACAC,EAAAA,YAAY,GAAGZ,KAAK,CAACY,YAAD,EAAeC,cAAf,CAAL,CAAoCV,KAApC,CAAf;AAEA,SAAO;AACLW,IAAAA,UAAU,4BAAqBF,YAArB,eAAsCA,YAAtC,gBAAwDD,SAAxD;AADL,GAAP;AAGD;AAED,OAAO,SAASI,oBAAT,CACLZ,KADK,EAELa,iBAFK,EAIc;AAAA,MADnBJ,YACmB,uEADJ,YACI;;AACnB,MAAIK,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AACD,MAAME,OAAO,GAAGrB,GAAG,CAACM,KAAD,2BAA0Ba,iBAA1B,EAAH,IAAqD,CAArE;AACA,SAAON,eAAe,CAACP,KAAD,EAAQ,SAAR,EAAmBS,YAAnB,EAAiCM,OAAjC,CAAtB;AACD;AAED,OAAO,SAASC,6BAAT,CACLhB,KADK,EAELa,iBAFK,EAIc;AAAA,MADnBJ,YACmB,uEADJ,YACI;;AACnB,MAAIK,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,wCACOjB,gBADP,mBACgCA,gBADhC,gBAEOgB,oBAAoB,CAACZ,KAAD,EAAQa,iBAAR,EAA2BJ,YAA3B,CAF3B;AAKD","sourcesContent":["import type { SystemStyleObject } from '@styled-system/css';\nimport { get } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\n\nimport { DARK_THEME_CLASS } from './ColorMode';\nimport type { Theme } from './theme';\n\nexport const alpha =\n  (colorString: string, alphaValue: number) => (theme: any) => {\n    const color = get(theme, 'colors.' + colorString, colorString);\n    if (color.startsWith('var')) {\n      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n      return `rgba(${color},${alphaValue})`;\n    }\n\n    const rgb = parseToRgb(color);\n    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n  };\n\nexport function getColorOverlay(\n  theme: Theme,\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): SystemStyleObject {\n  baseColor = get(theme, `colors.${baseColor}`) || baseColor;\n  overlayColor = alpha(overlayColor, overlayOpacity)(theme);\n\n  return {\n    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,\n  };\n}\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;\n  return getColorOverlay(theme, 'surface', overlayColor, overlay);\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),\n    },\n  };\n}\n"],"file":"color.js"}
+{"version":3,"file":"color.js","names":["get","parseToRgb","DARK_SCHEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","mixColor","baseColor","overlayColor","overlayOpacity","getColorOverlay","background","getBackgroundOverlay","backgroundOverlay","Number","overlay","getDarkThemeBackgroundOverlay"],"sources":["../../src/color.ts"],"sourcesContent":["import type { SystemStyleObject } from '@styled-system/css';\nimport { get } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\nimport { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';\n\nimport type { Theme } from './theme';\n\nexport const alpha =\n  (colorString: string, alphaValue: number) => (theme: any) => {\n    const color = get(theme, 'colors.' + colorString, colorString);\n    if (color.startsWith('var')) {\n      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n      return `rgba(${color},${alphaValue})`;\n    }\n    if (color.startsWith('rgba(')) {\n      return color;\n    }\n\n    const rgb = parseToRgb(color);\n    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n  };\n\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string\n): (theme: any) => string;\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): (theme: any) => string;\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity?: number\n): (theme: any) => string {\n  return (theme) => {\n    baseColor = get(theme, `colors.${baseColor}`, baseColor);\n    overlayColor = overlayOpacity\n      ? alpha(overlayColor, overlayOpacity)(theme)\n      : get(theme, `colors.${overlayColor}`, overlayColor);\n\n    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;\n  };\n}\n\nexport function getColorOverlay(\n  theme: Theme,\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): SystemStyleObject {\n  return {\n    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),\n  };\n}\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;\n  return getColorOverlay(theme, 'surface', overlayColor, overlay);\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_SCHEME_CLASS} &, &.${DARK_SCHEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),\n    },\n  };\n}\n"],"mappings":";;AACA,SAASA,GAAT,QAAoB,oBAApB;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,iBAAT,QAAkC,yBAAlC;AAIA,OAAO,IAAMC,KAAK,GAChB,SADWA,KACX,CAACC,WAAD,EAAsBC,UAAtB;EAAA,OAA6C,UAACC,KAAD,EAAgB;IAC3D,IAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;IACA,IAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;MAC3B,IAAMD,MAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;;MACA,sBAAeG,MAAf,cAAwBF,UAAxB;IACD;;IACD,IAAIE,KAAK,CAACC,UAAN,CAAiB,OAAjB,CAAJ,EAA+B;MAC7B,OAAOD,KAAP;IACD;;IAED,IAAME,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;IACA,sBAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;EACD,CAZD;AAAA,CADK;AAwBP,OAAO,SAASQ,QAAT,CACLC,SADK,EAELC,YAFK,EAGLC,cAHK,EAImB;EACxB,OAAO,UAACV,KAAD,EAAW;IAChBQ,SAAS,GAAGd,GAAG,CAACM,KAAD,mBAAkBQ,SAAlB,GAA+BA,SAA/B,CAAf;IACAC,YAAY,GAAGC,cAAc,GACzBb,KAAK,CAACY,YAAD,EAAeC,cAAf,CAAL,CAAoCV,KAApC,CADyB,GAEzBN,GAAG,CAACM,KAAD,mBAAkBS,YAAlB,GAAkCA,YAAlC,CAFP;IAIA,iCAA0BA,YAA1B,eAA2CA,YAA3C,gBAA6DD,SAA7D;EACD,CAPD;AAQD;AAED,OAAO,SAASG,eAAT,CACLX,KADK,EAELQ,SAFK,EAGLC,YAHK,EAILC,cAJK,EAKc;EACnB,OAAO;IACLE,UAAU,EAAEL,QAAQ,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,cAA1B,CAAR,CAAkDV,KAAlD;EADP,CAAP;AAGD;AAED,OAAO,SAASa,oBAAT,CACLb,KADK,EAELc,iBAFK,EAIc;EAAA,IADnBL,YACmB,uEADJ,YACI;;EACnB,IAAIM,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;IAClC,OAAO,EAAP;EACD;;EACD,IAAME,OAAO,GAAGtB,GAAG,CAACM,KAAD,2BAA0Bc,iBAA1B,EAAH,IAAqD,CAArE;EACA,OAAOH,eAAe,CAACX,KAAD,EAAQ,SAAR,EAAmBS,YAAnB,EAAiCO,OAAjC,CAAtB;AACD;AAED,OAAO,SAASC,6BAAT,CACLjB,KADK,EAELc,iBAFK,EAIc;EAAA,IADnBL,YACmB,uEADJ,YACI;;EACnB,IAAIM,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;IAClC,OAAO,EAAP;EACD;;EAED,sCACOlB,iBADP,mBACiCA,iBADjC,gBAEOiB,oBAAoB,CAACb,KAAD,EAAQc,iBAAR,EAA2BL,YAA3B,CAF3B;AAKD"}

package/build/esm/css.d.ts

@@ -1 +1 @@
-export * from '@styled-system/css';
+export * from '@styled-system/css';

package/build/esm/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/css.ts"],"names":[],"mappings":"AAAA;AACA,cAAc,oBAAd","sourcesContent":["// eslint-disable-next-line prettier/prettier\nexport * from '@styled-system/css';\n"],"file":"css.js"}
+{"version":3,"file":"css.js","names":[],"sources":["../../src/css.ts"],"sourcesContent":["// eslint-disable-next-line prettier/prettier\r\nexport * from '@styled-system/css';\r\n"],"mappings":"AAAA;AACA,cAAc,oBAAd"}