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

package/build/esm/ThemeExplorer/ThemeColors.js

@@ -1,31 +1,31 @@
 import { memo } from 'react';
 import { Box } from '..';
 import { ColorRow } from './components';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ThemeColors = /*#__PURE__*/memo(function (_ref) {
-  var scheme = _ref.scheme;
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ThemeColors = /*#__PURE__*/memo(_ref => {
+  let {
+    scheme
+  } = _ref;
+  const colors = scheme;
   function makeColorArrayForToken(token) {
     return [{
-      token: "".concat(token),
-      bg: scheme[token],
-      color: scheme.on[token]
+      token: `${token}`,
+      bg: colors[token],
+      color: colors.on[token]
     }, {
-      token: "on.".concat(token),
-      bg: scheme.on[token],
-      color: scheme[token]
+      token: `on.${token}`,
+      bg: colors.on[token],
+      color: colors[token]
     }, {
-      token: "".concat(token, "-container"),
-      bg: scheme["".concat(token, "-container")],
-      color: scheme.on["".concat(token, "-container")]
+      token: `${token}-container`,
+      bg: colors[`${token}-container`],
+      color: colors.on[`${token}-container`]
     }, {
-      token: "on.".concat(token, "-container"),
-      bg: scheme.on["".concat(token, "-container")],
-      color: scheme["".concat(token, "-container")]
+      token: `on.${token}-container`,
+      bg: colors.on[`${token}-container`],
+      color: colors[`${token}-container`]
     }];
   }
-
   return /*#__PURE__*/_jsxs(Box, {
     width: "600",
     display: "flex",
@@ -44,57 +44,57 @@ export var ThemeColors = /*#__PURE__*/memo(function (_ref) {
       colors: makeColorArrayForToken('error')
     }), /*#__PURE__*/_jsx(ColorRow, {
       colors: [{
-        token: "surface-dim",
-        bg: scheme['surface-dim'],
-        color: scheme.on['surface']
+        token: `surface-dim`,
+        bg: colors['surface-dim'],
+        color: colors.on['surface']
       }, {
-        token: "surface",
-        bg: scheme['surface'],
-        color: scheme.on['surface']
+        token: `surface`,
+        bg: colors['surface'],
+        color: colors.on['surface']
       }, {
-        token: "surface-bright",
-        bg: scheme['surface-bright'],
-        color: scheme.on['surface']
+        token: `surface-bright`,
+        bg: colors['surface-bright'],
+        color: colors.on['surface']
       }]
     }), /*#__PURE__*/_jsx(ColorRow, {
       colors: [{
-        token: "surface-container-lowest",
-        bg: scheme['surface-container-lowest'],
-        color: scheme.on['surface']
+        token: `surface-container-lowest`,
+        bg: colors['surface-container-lowest'],
+        color: colors.on['surface']
       }, {
-        token: "surface-container-low",
-        bg: scheme['surface-container-low'],
-        color: scheme.on['surface']
+        token: `surface-container-low`,
+        bg: colors['surface-container-low'],
+        color: colors.on['surface']
       }, {
-        token: "surface-container",
-        bg: scheme['surface-container'],
-        color: scheme.on['surface']
+        token: `surface-container`,
+        bg: colors['surface-container'],
+        color: colors.on['surface']
       }, {
-        token: "surface-container-high",
-        bg: scheme['surface-container-high'],
-        color: scheme.on['surface']
+        token: `surface-container-high`,
+        bg: colors['surface-container-high'],
+        color: colors.on['surface']
       }, {
-        token: "surface-container-highest",
-        bg: scheme['surface-container-highest'],
-        color: scheme.on['surface']
+        token: `surface-container-highest`,
+        bg: colors['surface-container-highest'],
+        color: colors.on['surface']
       }]
     }), /*#__PURE__*/_jsx(ColorRow, {
       colors: [{
-        token: "on.surface",
-        bg: scheme.on['surface'],
-        color: scheme['surface']
+        token: `on.surface`,
+        bg: colors.on['surface'],
+        color: colors['surface']
       }, {
-        token: "on.surface-variant",
-        bg: scheme.on['surface-variant'],
-        color: scheme['surface-variant']
+        token: `on.surface-variant`,
+        bg: colors.on['surface-variant'],
+        color: colors['surface-variant']
       }, {
-        token: "outline",
-        bg: scheme.outline,
-        color: scheme.on.outline
+        token: `outline`,
+        bg: colors.outline,
+        color: colors.on.outline
       }, {
-        token: "outline-variant",
-        bg: scheme['outline-variant'],
-        color: scheme.on['outline-variant']
+        token: `outline-variant`,
+        bg: colors['outline-variant'],
+        color: colors.on['outline-variant']
       }]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeColors.js","names":["memo","Box","ColorRow","ThemeColors","scheme","makeColorArrayForToken","token","bg","color","on","gap","outline"],"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"sourcesContent":["import { memo } from 'react';\r\n\r\nimport { Box } from '..';\r\nimport { ColorRow } from './components';\r\nimport type { makeColorScheme } from './makeColorScheme';\r\n\r\nexport const ThemeColors = memo(\r\n  ({\r\n    scheme,\r\n  }: {\r\n    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;\r\n  }) => {\r\n    function makeColorArrayForToken(token: string) {\r\n      return [\r\n        {\r\n          token: `${token}`,\r\n          bg: scheme[token],\r\n          color: scheme.on[token],\r\n        },\r\n        {\r\n          token: `on.${token}`,\r\n          bg: scheme.on[token],\r\n          color: scheme[token],\r\n        },\r\n        {\r\n          token: `${token}-container`,\r\n          bg: scheme[`${token}-container`],\r\n          color: scheme.on[`${token}-container`],\r\n        },\r\n        {\r\n          token: `on.${token}-container`,\r\n          bg: scheme.on[`${token}-container`],\r\n          color: scheme[`${token}-container`],\r\n        },\r\n      ];\r\n    }\r\n    return (\r\n      <Box width=\"600\" display=\"flex\" flexDirection=\"column\" sx={{ gap: 2 }}>\r\n        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />\r\n        <ColorRow colors={makeColorArrayForToken('secondary')} />\r\n        <ColorRow colors={makeColorArrayForToken('tertiary')} />\r\n        <ColorRow colors={makeColorArrayForToken('error')} />\r\n        <ColorRow\r\n          colors={[\r\n            {\r\n              token: `surface-dim`,\r\n              bg: scheme['surface-dim'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface`,\r\n              bg: scheme['surface'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface-bright`,\r\n              bg: scheme['surface-bright'],\r\n              color: scheme.on['surface'],\r\n            },\r\n          ]}\r\n        />\r\n        <ColorRow\r\n          colors={[\r\n            {\r\n              token: `surface-container-lowest`,\r\n              bg: scheme['surface-container-lowest'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface-container-low`,\r\n              bg: scheme['surface-container-low'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface-container`,\r\n              bg: scheme['surface-container'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface-container-high`,\r\n              bg: scheme['surface-container-high'],\r\n              color: scheme.on['surface'],\r\n            },\r\n            {\r\n              token: `surface-container-highest`,\r\n              bg: scheme['surface-container-highest'],\r\n              color: scheme.on['surface'],\r\n            },\r\n          ]}\r\n        />\r\n        <ColorRow\r\n          colors={[\r\n            {\r\n              token: `on.surface`,\r\n              bg: scheme.on['surface'],\r\n              color: scheme['surface'],\r\n            },\r\n            {\r\n              token: `on.surface-variant`,\r\n              bg: scheme.on['surface-variant'],\r\n              color: scheme['surface-variant'],\r\n            },\r\n            {\r\n              token: `outline`,\r\n              bg: scheme.outline,\r\n              color: scheme.on.outline,\r\n            },\r\n            {\r\n              token: `outline-variant`,\r\n              bg: scheme['outline-variant'],\r\n              color: scheme.on['outline-variant'],\r\n            },\r\n          ]}\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n);\r\n"],"mappings":"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"}
+{"version":3,"file":"ThemeColors.js","names":["memo","Box","ColorRow","jsx","_jsx","jsxs","_jsxs","ThemeColors","_ref","scheme","colors","makeColorArrayForToken","token","bg","color","on","width","display","flexDirection","sx","gap","children","height","outline"],"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { Box } from '..';\nimport { ColorRow } from './components';\nimport type { makeColorScheme } from './makeColorScheme';\n\nexport const ThemeColors = memo(\n  ({\n    scheme,\n  }: {\n    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;\n  }) => {\n    const colors = scheme as unknown as Record<string, string> & {\n      on: Record<string, string>;\n    };\n\n    function makeColorArrayForToken(token: string) {\n      return [\n        {\n          token: `${token}`,\n          bg: colors[token],\n          color: colors.on[token],\n        },\n        {\n          token: `on.${token}`,\n          bg: colors.on[token],\n          color: colors[token],\n        },\n        {\n          token: `${token}-container`,\n          bg: colors[`${token}-container`],\n          color: colors.on[`${token}-container`],\n        },\n        {\n          token: `on.${token}-container`,\n          bg: colors.on[`${token}-container`],\n          color: colors[`${token}-container`],\n        },\n      ];\n    }\n    return (\n      <Box width=\"600\" display=\"flex\" flexDirection=\"column\" sx={{ gap: 2 }}>\n        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />\n        <ColorRow colors={makeColorArrayForToken('secondary')} />\n        <ColorRow colors={makeColorArrayForToken('tertiary')} />\n        <ColorRow colors={makeColorArrayForToken('error')} />\n        <ColorRow\n          colors={[\n            {\n              token: `surface-dim`,\n              bg: colors['surface-dim'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface`,\n              bg: colors['surface'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface-bright`,\n              bg: colors['surface-bright'],\n              color: colors.on['surface'],\n            },\n          ]}\n        />\n        <ColorRow\n          colors={[\n            {\n              token: `surface-container-lowest`,\n              bg: colors['surface-container-lowest'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface-container-low`,\n              bg: colors['surface-container-low'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface-container`,\n              bg: colors['surface-container'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface-container-high`,\n              bg: colors['surface-container-high'],\n              color: colors.on['surface'],\n            },\n            {\n              token: `surface-container-highest`,\n              bg: colors['surface-container-highest'],\n              color: colors.on['surface'],\n            },\n          ]}\n        />\n        <ColorRow\n          colors={[\n            {\n              token: `on.surface`,\n              bg: colors.on['surface'],\n              color: colors['surface'],\n            },\n            {\n              token: `on.surface-variant`,\n              bg: colors.on['surface-variant'],\n              color: colors['surface-variant'],\n            },\n            {\n              token: `outline`,\n              bg: colors.outline,\n              color: colors.on.outline,\n            },\n            {\n              token: `outline-variant`,\n              bg: colors['outline-variant'],\n              color: colors.on['outline-variant'],\n            },\n          ]}\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,31 +1,31 @@
-import type { CSSProperties } from 'react';
-import { TonalPalette } from '@material/material-color-utilities';
-export declare const ColorItem: import("react").MemoExoticComponent<(props: {
-    token: string;
-    style: CSSProperties;
-    height?: number;
-    flex: number;
-}) => JSX.Element>;
-export declare const ColorRow: import("react").MemoExoticComponent<(props: {
-    colors: {
-        token: string;
-        bg: string;
-        color: string;
-    }[];
-    height?: number;
-}) => JSX.Element>;
-export declare const TonalColorItem: import("react").MemoExoticComponent<(props: {
-    color: string;
-    level: number;
-}) => JSX.Element>;
-export declare const TonalColorsFromToken: import("react").MemoExoticComponent<(props: {
-    token: string;
-}) => JSX.Element>;
-export declare const TonalColors: import("react").MemoExoticComponent<(props: {
-    palette: TonalPalette;
-}) => JSX.Element>;
-export declare function makeColorArrayForToken(token: string): {
-    token: string;
-    bg: string;
-    color: string;
-}[];
+import type { CSSProperties } from 'react';
+import { TonalPalette } from '@material/material-color-utilities';
+export declare const ColorItem: import("react").MemoExoticComponent<(props: {
+    token: string;
+    style: CSSProperties;
+    height?: number;
+    flex: number;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const ColorRow: import("react").MemoExoticComponent<(props: {
+    colors: {
+        token: string;
+        bg: string;
+        color: string;
+    }[];
+    height?: number;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const TonalColorItem: import("react").MemoExoticComponent<(props: {
+    color: string;
+    level: number;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const TonalColorsFromToken: import("react").MemoExoticComponent<(props: {
+    token: string;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const TonalColors: import("react").MemoExoticComponent<(props: {
+    palette: TonalPalette;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare function makeColorArrayForToken(token: string): {
+    token: string;
+    bg: string;
+    color: string;
+}[];

package/build/esm/ThemeExplorer/components.js

@@ -1,29 +1,22 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 import { Box, Tooltip, Text } from '../';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export var ColorItem = /*#__PURE__*/memo(function (props) {
-  var token = props.token,
-      style = props.style,
-      flex = props.flex,
-      _props$height = props.height,
-      height = _props$height === void 0 ? '100%' : _props$height;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      computedColor = _useState2[0],
-      setComputedColor = _useState2[1];
-
-  var hslColor = computedColor ? parseToHsl(computedColor) : {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const ColorItem = /*#__PURE__*/memo(props => {
+  const {
+    token,
+    style,
+    flex,
+    height = '100%'
+  } = props;
+  const [computedColor, setComputedColor] = useState();
+  const hslColor = computedColor ? parseToHsl(computedColor) : {
     hue: 0,
     saturation: 0,
     lightness: 0
   };
-  var rgbColor = computedColor ? parseToRgb(computedColor) : {
+  const rgbColor = computedColor ? parseToRgb(computedColor) : {
     red: 0,
     green: 0,
     blue: 0
@@ -46,14 +39,14 @@ export var ColorItem = /*#__PURE__*/memo(function (props) {
       as: "div",
       variant: "body-medium",
       style: style,
-      ref: function ref(_ref) {
-        if (_ref) {
-          setComputedColor(window.getComputedStyle(_ref).backgroundColor);
+      ref: ref => {
+        if (ref) {
+          setComputedColor(window.getComputedStyle(ref).backgroundColor);
         }
       },
       sx: {
-        flex: flex,
-        height: height,
+        flex,
+        height,
         px: '12px',
         py: '12px',
         textOverflow: 'ellipsis',
@@ -63,10 +56,11 @@ export var ColorItem = /*#__PURE__*/memo(function (props) {
     })
   });
 });
-export var ColorRow = /*#__PURE__*/memo(function (props) {
-  var colors = props.colors,
-      _props$height2 = props.height,
-      height = _props$height2 === void 0 ? 50 : _props$height2;
+export const ColorRow = /*#__PURE__*/memo(props => {
+  const {
+    colors,
+    height = 50
+  } = props;
   return /*#__PURE__*/_jsx(Box, {
     width: "100%",
     display: "flex",
@@ -81,12 +75,14 @@ export var ColorRow = /*#__PURE__*/memo(function (props) {
         borderBottomRightRadius: 'large',
         overflow: 'hidden'
       },
-      height: height
+      height
     },
-    children: colors.map(function (_ref2) {
-      var token = _ref2.token,
-          bg = _ref2.bg,
-          color = _ref2.color;
+    children: colors.map(_ref => {
+      let {
+        token,
+        bg,
+        color
+      } = _ref;
       return /*#__PURE__*/_jsx(ColorItem, {
         flex: 1,
         token: token,
@@ -98,11 +94,13 @@ export var ColorRow = /*#__PURE__*/memo(function (props) {
     })
   });
 });
-export var TonalColorItem = /*#__PURE__*/memo(function (props) {
-  var level = props.level,
-      color = props.color;
-  var hslColor = parseToHsl(color);
-  var rgbColor = parseToRgb(color);
+export const TonalColorItem = /*#__PURE__*/memo(props => {
+  const {
+    level,
+    color
+  } = props;
+  const hslColor = parseToHsl(color);
+  const rgbColor = parseToRgb(color);
   return /*#__PURE__*/_jsx(Tooltip, {
     label: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs("p", {
@@ -130,17 +128,13 @@ export var TonalColorItem = /*#__PURE__*/memo(function (props) {
     }, level)
   });
 });
-export var TonalColorsFromToken = /*#__PURE__*/memo(function (props) {
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      computedColor = _useState4[0],
-      setComputedColor = _useState4[1];
-
+export const TonalColorsFromToken = /*#__PURE__*/memo(props => {
+  const [computedColor, setComputedColor] = useState();
   if (!computedColor) {
     return /*#__PURE__*/_jsx(Box, {
-      ref: function ref(_ref3) {
-        if (_ref3) {
-          setComputedColor(window.getComputedStyle(_ref3).backgroundColor);
+      ref: ref => {
+        if (ref) {
+          setComputedColor(window.getComputedStyle(ref).backgroundColor);
         }
       },
       bg: props.token,
@@ -151,42 +145,39 @@ export var TonalColorsFromToken = /*#__PURE__*/memo(function (props) {
       }
     });
   }
-
-  var colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);
-  var tonal = TonalPalette.fromInt(colorInt);
+  const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);
+  const tonal = TonalPalette.fromInt(colorInt);
   return /*#__PURE__*/_jsx(TonalColors, {
     palette: tonal
   });
 });
-export var TonalColors = /*#__PURE__*/memo(function (props) {
-  var luminanceLevels = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
+export const TonalColors = /*#__PURE__*/memo(props => {
+  const luminanceLevels = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
   return /*#__PURE__*/_jsx(Box, {
     display: "flex",
     height: "72px",
     width: "100%",
-    children: luminanceLevels.map(function (level) {
-      return /*#__PURE__*/_jsx(TonalColorItem, {
-        level: level,
-        color: hexFromArgb(props.palette.tone(level))
-      }, level);
-    })
+    children: luminanceLevels.map(level => /*#__PURE__*/_jsx(TonalColorItem, {
+      level: level,
+      color: hexFromArgb(props.palette.tone(level))
+    }, level))
   });
 });
 export function makeColorArrayForToken(token) {
   return [{
-    token: token,
+    token,
     bg: token,
     color: 'on.' + token
   }, {
-    token: token,
+    token,
     bg: 'on.' + token,
     color: token
   }, {
-    token: token,
+    token,
     bg: token + '-container',
     color: 'on.' + token + '-container'
   }, {
-    token: token,
+    token,
     bg: 'on.' + token + '-container',
     color: token + '-container'
   }];

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

@@ -1 +1 @@
-{"version":3,"file":"components.js","names":["memo","useState","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","Box","Tooltip","Text","ColorItem","props","token","style","flex","height","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","Math","round","ref","window","getComputedStyle","backgroundColor","px","py","textOverflow","overflow","ColorRow","colors","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","map","bg","color","TonalColorItem","level","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","luminanceLevels","palette","tone","makeColorArrayForToken"],"sources":["../../../src/ThemeExplorer/components.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\r\nimport { memo, useState } from 'react';\r\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\r\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\r\n\r\nimport { Box, Tooltip, Text } from '../';\r\n\r\nexport const ColorItem = memo(\r\n  (props: {\r\n    token: string;\r\n    style: CSSProperties;\r\n    height?: number;\r\n    flex: number;\r\n  }) => {\r\n    const { token, style, flex, height = '100%' } = props;\r\n    const [computedColor, setComputedColor] = useState<string>();\r\n    const hslColor = computedColor\r\n      ? parseToHsl(computedColor)\r\n      : { hue: 0, saturation: 0, lightness: 0 };\r\n    const rgbColor = computedColor\r\n      ? parseToRgb(computedColor)\r\n      : { red: 0, green: 0, blue: 0 };\r\n    return (\r\n      <Tooltip\r\n        label={\r\n          computedColor ? (\r\n            <>\r\n              <p>{token}</p>\r\n              <p>{rgb(rgbColor)}</p>\r\n              <p>\r\n                rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\r\n              </p>\r\n              <p>\r\n                hsl({Math.round(hslColor.hue)},{' '}\r\n                {Math.round(hslColor.saturation * 100)}%,{' '}\r\n                {Math.round(hslColor.lightness * 100)}%)\r\n              </p>\r\n            </>\r\n          ) : (\r\n            <p>{token}</p>\r\n          )\r\n        }\r\n      >\r\n        <Text\r\n          as=\"div\"\r\n          variant=\"body-medium\"\r\n          style={style}\r\n          ref={(ref: HTMLDivElement | null) => {\r\n            if (ref) {\r\n              setComputedColor(window.getComputedStyle(ref).backgroundColor);\r\n            }\r\n          }}\r\n          sx={{\r\n            flex,\r\n            height,\r\n            px: '12px',\r\n            py: '12px',\r\n            textOverflow: 'ellipsis',\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {token}\r\n        </Text>\r\n      </Tooltip>\r\n    );\r\n  }\r\n);\r\n\r\nexport const ColorRow = memo(\r\n  (props: {\r\n    colors: { token: string; bg: string; color: string }[];\r\n    height?: number;\r\n  }) => {\r\n    const { colors, height = 50 } = props;\r\n    return (\r\n      <Box\r\n        width=\"100%\"\r\n        display=\"flex\"\r\n        sx={{\r\n          ':first-of-type': {\r\n            borderTopLeftRadius: 'large',\r\n            borderTopRightRadius: 'large',\r\n            overflow: 'hidden',\r\n          },\r\n          ':last-of-type': {\r\n            borderBottomLeftRadius: 'large',\r\n            borderBottomRightRadius: 'large',\r\n            overflow: 'hidden',\r\n          },\r\n          height,\r\n        }}\r\n      >\r\n        {colors.map(({ token, bg, color }) => (\r\n          <ColorItem\r\n            flex={1}\r\n            key={token}\r\n            token={token}\r\n            style={{ backgroundColor: bg, color: color }}\r\n          />\r\n        ))}\r\n      </Box>\r\n    );\r\n  }\r\n);\r\n\r\nexport const TonalColorItem = memo(\r\n  (props: { color: string; level: number }) => {\r\n    const { level, color } = props;\r\n    const hslColor = parseToHsl(color);\r\n    const rgbColor = parseToRgb(color);\r\n    return (\r\n      <Tooltip\r\n        label={\r\n          <>\r\n            <p>Luminance: {level}</p>\r\n            <p>{rgb(rgbColor)}</p>\r\n            <p>\r\n              rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\r\n            </p>\r\n            <p>\r\n              hsl({Math.round(hslColor.hue)},{' '}\r\n              {Math.round(hslColor.saturation * 100)}%,{' '}\r\n              {Math.round(hslColor.lightness * 100)}%)\r\n            </p>\r\n          </>\r\n        }\r\n      >\r\n        <Text\r\n          key={level}\r\n          as=\"div\"\r\n          variant=\"body-small\"\r\n          flex={1}\r\n          display=\"flex\"\r\n          alignItems=\"center\"\r\n          justifyContent=\"center\"\r\n          style={{\r\n            backgroundColor: color,\r\n            color: level <= 50 ? '#fff' : '#000',\r\n          }}\r\n        >\r\n          {level}\r\n        </Text>\r\n      </Tooltip>\r\n    );\r\n  }\r\n);\r\n\r\nexport const TonalColorsFromToken = memo((props: { token: string }) => {\r\n  const [computedColor, setComputedColor] = useState<string>();\r\n  if (!computedColor) {\r\n    return (\r\n      <Box\r\n        ref={(ref: HTMLDivElement | null) => {\r\n          if (ref) {\r\n            setComputedColor(window.getComputedStyle(ref).backgroundColor);\r\n          }\r\n        }}\r\n        bg={props.token}\r\n        style={{ position: 'fixed', left: -5000, top: -5000 }}\r\n      />\r\n    );\r\n  }\r\n  const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);\r\n  const tonal = TonalPalette.fromInt(colorInt);\r\n\r\n  return <TonalColors palette={tonal} />;\r\n});\r\n\r\nexport const TonalColors = memo((props: { palette: TonalPalette }) => {\r\n  const luminanceLevels = [\r\n    0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,\r\n  ];\r\n  return (\r\n    <Box display=\"flex\" height=\"72px\" width=\"100%\">\r\n      {luminanceLevels.map((level) => (\r\n        <TonalColorItem\r\n          key={level}\r\n          level={level}\r\n          color={hexFromArgb(props.palette.tone(level))}\r\n        />\r\n      ))}\r\n    </Box>\r\n  );\r\n});\r\n\r\nexport function makeColorArrayForToken(\r\n  token: string\r\n): { token: string; bg: string; color: string }[] {\r\n  return [\r\n    { token, bg: token, color: 'on.' + token },\r\n    { token, bg: 'on.' + token, color: token },\r\n    { token, bg: token + '-container', color: 'on.' + token + '-container' },\r\n    { token, bg: 'on.' + token + '-container', color: token + '-container' },\r\n  ];\r\n}\r\n"],"mappings":";AACA,SAASA,IAAT,EAAeC,QAAf,QAA+B,OAA/B;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,UAA1B,QAA4C,UAA5C;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,oCAA1C;AAEA,SAASC,GAAT,EAAcC,OAAd,EAAuBC,IAAvB,QAAmC,KAAnC;;;;AAEA,OAAO,IAAMC,SAAS,gBAAGV,IAAI,CAC3B,UAACW,KAAD,EAKM;EACJ,IAAQC,KAAR,GAAgDD,KAAhD,CAAQC,KAAR;EAAA,IAAeC,KAAf,GAAgDF,KAAhD,CAAeE,KAAf;EAAA,IAAsBC,IAAtB,GAAgDH,KAAhD,CAAsBG,IAAtB;EAAA,oBAAgDH,KAAhD,CAA4BI,MAA5B;EAAA,IAA4BA,MAA5B,8BAAqC,MAArC;;EACA,gBAA0Cd,QAAQ,EAAlD;EAAA;EAAA,IAAOe,aAAP;EAAA,IAAsBC,gBAAtB;;EACA,IAAMC,QAAQ,GAAGF,aAAa,GAC1Bb,UAAU,CAACa,aAAD,CADgB,GAE1B;IAAEG,GAAG,EAAE,CAAP;IAAUC,UAAU,EAAE,CAAtB;IAAyBC,SAAS,EAAE;EAApC,CAFJ;EAGA,IAAMC,QAAQ,GAAGN,aAAa,GAC1BZ,UAAU,CAACY,aAAD,CADgB,GAE1B;IAAEO,GAAG,EAAE,CAAP;IAAUC,KAAK,EAAE,CAAjB;IAAoBC,IAAI,EAAE;EAA1B,CAFJ;EAGA,oBACE,KAAC,OAAD;IACE,KAAK,EACHT,aAAa,gBACX;MAAA,wBACE;QAAA,UAAIJ;MAAJ,EADF,eAEE;QAAA,UAAIV,GAAG,CAACoB,QAAD;MAAP,EAFF,eAGE;QAAA,mBACOA,QAAQ,CAACC,GADhB,QACuBD,QAAQ,CAACE,KADhC,QACyCF,QAAQ,CAACG,IADlD;MAAA,EAHF,eAME;QAAA,mBACOC,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACC,GAApB,CADP,OACkC,GADlC,EAEGO,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACE,UAAT,GAAsB,GAAjC,CAFH,QAE4C,GAF5C,EAGGM,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACG,SAAT,GAAqB,GAAhC,CAHH;MAAA,EANF;IAAA,EADW,gBAcX;MAAA,UAAIT;IAAJ,EAhBN;IAAA,uBAoBE,KAAC,IAAD;MACE,EAAE,EAAC,KADL;MAEE,OAAO,EAAC,aAFV;MAGE,KAAK,EAAEC,KAHT;MAIE,GAAG,EAAE,aAACe,IAAD,EAAgC;QACnC,IAAIA,IAAJ,EAAS;UACPX,gBAAgB,CAACY,MAAM,CAACC,gBAAP,CAAwBF,IAAxB,EAA6BG,eAA9B,CAAhB;QACD;MACF,CARH;MASE,EAAE,EAAE;QACFjB,IAAI,EAAJA,IADE;QAEFC,MAAM,EAANA,MAFE;QAGFiB,EAAE,EAAE,MAHF;QAIFC,EAAE,EAAE,MAJF;QAKFC,YAAY,EAAE,UALZ;QAMFC,QAAQ,EAAE;MANR,CATN;MAAA,UAkBGvB;IAlBH;EApBF,EADF;AA2CD,CA1D0B,CAAtB;AA6DP,OAAO,IAAMwB,QAAQ,gBAAGpC,IAAI,CAC1B,UAACW,KAAD,EAGM;EACJ,IAAQ0B,MAAR,GAAgC1B,KAAhC,CAAQ0B,MAAR;EAAA,qBAAgC1B,KAAhC,CAAgBI,MAAhB;EAAA,IAAgBA,MAAhB,+BAAyB,EAAzB;EACA,oBACE,KAAC,GAAD;IACE,KAAK,EAAC,MADR;IAEE,OAAO,EAAC,MAFV;IAGE,EAAE,EAAE;MACF,kBAAkB;QAChBuB,mBAAmB,EAAE,OADL;QAEhBC,oBAAoB,EAAE,OAFN;QAGhBJ,QAAQ,EAAE;MAHM,CADhB;MAMF,iBAAiB;QACfK,sBAAsB,EAAE,OADT;QAEfC,uBAAuB,EAAE,OAFV;QAGfN,QAAQ,EAAE;MAHK,CANf;MAWFpB,MAAM,EAANA;IAXE,CAHN;IAAA,UAiBGsB,MAAM,CAACK,GAAP,CAAW;MAAA,IAAG9B,KAAH,SAAGA,KAAH;MAAA,IAAU+B,EAAV,SAAUA,EAAV;MAAA,IAAcC,KAAd,SAAcA,KAAd;MAAA,oBACV,KAAC,SAAD;QACE,IAAI,EAAE,CADR;QAGE,KAAK,EAAEhC,KAHT;QAIE,KAAK,EAAE;UAAEmB,eAAe,EAAEY,EAAnB;UAAuBC,KAAK,EAAEA;QAA9B;MAJT,GAEOhC,KAFP,CADU;IAAA,CAAX;EAjBH,EADF;AA4BD,CAlCyB,CAArB;AAqCP,OAAO,IAAMiC,cAAc,gBAAG7C,IAAI,CAChC,UAACW,KAAD,EAA6C;EAC3C,IAAQmC,KAAR,GAAyBnC,KAAzB,CAAQmC,KAAR;EAAA,IAAeF,KAAf,GAAyBjC,KAAzB,CAAeiC,KAAf;EACA,IAAM1B,QAAQ,GAAGf,UAAU,CAACyC,KAAD,CAA3B;EACA,IAAMtB,QAAQ,GAAGlB,UAAU,CAACwC,KAAD,CAA3B;EACA,oBACE,KAAC,OAAD;IACE,KAAK,eACH;MAAA,wBACE;QAAA,0BAAeE,KAAf;MAAA,EADF,eAEE;QAAA,UAAI5C,GAAG,CAACoB,QAAD;MAAP,EAFF,eAGE;QAAA,mBACOA,QAAQ,CAACC,GADhB,QACuBD,QAAQ,CAACE,KADhC,QACyCF,QAAQ,CAACG,IADlD;MAAA,EAHF,eAME;QAAA,mBACOC,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACC,GAApB,CADP,OACkC,GADlC,EAEGO,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACE,UAAT,GAAsB,GAAjC,CAFH,QAE4C,GAF5C,EAGGM,IAAI,CAACC,KAAL,CAAWT,QAAQ,CAACG,SAAT,GAAqB,GAAhC,CAHH;MAAA,EANF;IAAA,EAFJ;IAAA,uBAgBE,KAAC,IAAD;MAEE,EAAE,EAAC,KAFL;MAGE,OAAO,EAAC,YAHV;MAIE,IAAI,EAAE,CAJR;MAKE,OAAO,EAAC,MALV;MAME,UAAU,EAAC,QANb;MAOE,cAAc,EAAC,QAPjB;MAQE,KAAK,EAAE;QACLU,eAAe,EAAEa,KADZ;QAELA,KAAK,EAAEE,KAAK,IAAI,EAAT,GAAc,MAAd,GAAuB;MAFzB,CART;MAAA,UAaGA;IAbH,GACOA,KADP;EAhBF,EADF;AAkCD,CAvC+B,CAA3B;AA0CP,OAAO,IAAMC,oBAAoB,gBAAG/C,IAAI,CAAC,UAACW,KAAD,EAA8B;EACrE,iBAA0CV,QAAQ,EAAlD;EAAA;EAAA,IAAOe,aAAP;EAAA,IAAsBC,gBAAtB;;EACA,IAAI,CAACD,aAAL,EAAoB;IAClB,oBACE,KAAC,GAAD;MACE,GAAG,EAAE,aAACY,KAAD,EAAgC;QACnC,IAAIA,KAAJ,EAAS;UACPX,gBAAgB,CAACY,MAAM,CAACC,gBAAP,CAAwBF,KAAxB,EAA6BG,eAA9B,CAAhB;QACD;MACF,CALH;MAME,EAAE,EAAEpB,KAAK,CAACC,KANZ;MAOE,KAAK,EAAE;QAAEoC,QAAQ,EAAE,OAAZ;QAAqBC,IAAI,EAAE,CAAC,IAA5B;QAAkCC,GAAG,EAAE,CAAC;MAAxC;IAPT,EADF;EAWD;;EACD,IAAMC,QAAQ,GAAGC,QAAQ,CAAClD,GAAG,CAACE,UAAU,CAACY,aAAD,CAAX,CAAH,CAA+BqC,KAA/B,CAAqC,CAArC,CAAD,EAA0C,EAA1C,CAAzB;EACA,IAAMC,KAAK,GAAGhD,YAAY,CAACiD,OAAb,CAAqBJ,QAArB,CAAd;EAEA,oBAAO,KAAC,WAAD;IAAa,OAAO,EAAEG;EAAtB,EAAP;AACD,CAnBuC,CAAjC;AAqBP,OAAO,IAAME,WAAW,gBAAGxD,IAAI,CAAC,UAACW,KAAD,EAAsC;EACpE,IAAM8C,eAAe,GAAG,CACtB,CADsB,EACnB,EADmB,EACf,EADe,EACX,EADW,EACP,EADO,EACH,EADG,EACC,EADD,EACK,EADL,EACS,EADT,EACa,EADb,EACiB,EADjB,EACqB,EADrB,EACyB,EADzB,EAC6B,EAD7B,EACiC,EADjC,EACqC,GADrC,CAAxB;EAGA,oBACE,KAAC,GAAD;IAAK,OAAO,EAAC,MAAb;IAAoB,MAAM,EAAC,MAA3B;IAAkC,KAAK,EAAC,MAAxC;IAAA,UACGA,eAAe,CAACf,GAAhB,CAAoB,UAACI,KAAD;MAAA,oBACnB,KAAC,cAAD;QAEE,KAAK,EAAEA,KAFT;QAGE,KAAK,EAAEzC,WAAW,CAACM,KAAK,CAAC+C,OAAN,CAAcC,IAAd,CAAmBb,KAAnB,CAAD;MAHpB,GACOA,KADP,CADmB;IAAA,CAApB;EADH,EADF;AAWD,CAf8B,CAAxB;AAiBP,OAAO,SAASc,sBAAT,CACLhD,KADK,EAE2C;EAChD,OAAO,CACL;IAAEA,KAAK,EAALA,KAAF;IAAS+B,EAAE,EAAE/B,KAAb;IAAoBgC,KAAK,EAAE,QAAQhC;EAAnC,CADK,EAEL;IAAEA,KAAK,EAALA,KAAF;IAAS+B,EAAE,EAAE,QAAQ/B,KAArB;IAA4BgC,KAAK,EAAEhC;EAAnC,CAFK,EAGL;IAAEA,KAAK,EAALA,KAAF;IAAS+B,EAAE,EAAE/B,KAAK,GAAG,YAArB;IAAmCgC,KAAK,EAAE,QAAQhC,KAAR,GAAgB;EAA1D,CAHK,EAIL;IAAEA,KAAK,EAALA,KAAF;IAAS+B,EAAE,EAAE,QAAQ/B,KAAR,GAAgB,YAA7B;IAA2CgC,KAAK,EAAEhC,KAAK,GAAG;EAA1D,CAJK,CAAP;AAMD"}
+{"version":3,"file":"components.js","names":["memo","useState","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","Box","Tooltip","Text","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ColorItem","props","token","style","flex","height","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","label","children","Math","round","as","variant","ref","window","getComputedStyle","backgroundColor","sx","px","py","textOverflow","overflow","ColorRow","colors","width","display","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","map","_ref","bg","color","TonalColorItem","level","alignItems","justifyContent","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","palette","luminanceLevels","tone","makeColorArrayForToken"],"sources":["../../../src/ThemeExplorer/components.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { memo, useState } from 'react';\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\n\nimport { Box, Tooltip, Text } from '../';\n\nexport const ColorItem = memo(\n  (props: {\n    token: string;\n    style: CSSProperties;\n    height?: number;\n    flex: number;\n  }) => {\n    const { token, style, flex, height = '100%' } = props;\n    const [computedColor, setComputedColor] = useState<string>();\n    const hslColor = computedColor\n      ? parseToHsl(computedColor)\n      : { hue: 0, saturation: 0, lightness: 0 };\n    const rgbColor = computedColor\n      ? parseToRgb(computedColor)\n      : { red: 0, green: 0, blue: 0 };\n    return (\n      <Tooltip\n        label={\n          computedColor ? (\n            <>\n              <p>{token}</p>\n              <p>{rgb(rgbColor)}</p>\n              <p>\n                rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n              </p>\n              <p>\n                hsl({Math.round(hslColor.hue)},{' '}\n                {Math.round(hslColor.saturation * 100)}%,{' '}\n                {Math.round(hslColor.lightness * 100)}%)\n              </p>\n            </>\n          ) : (\n            <p>{token}</p>\n          )\n        }\n      >\n        <Text\n          as=\"div\"\n          variant=\"body-medium\"\n          style={style}\n          ref={(ref: HTMLDivElement | null) => {\n            if (ref) {\n              setComputedColor(window.getComputedStyle(ref).backgroundColor);\n            }\n          }}\n          sx={{\n            flex,\n            height,\n            px: '12px',\n            py: '12px',\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n          }}\n        >\n          {token}\n        </Text>\n      </Tooltip>\n    );\n  }\n);\n\nexport const ColorRow = memo(\n  (props: {\n    colors: { token: string; bg: string; color: string }[];\n    height?: number;\n  }) => {\n    const { colors, height = 50 } = props;\n    return (\n      <Box\n        width=\"100%\"\n        display=\"flex\"\n        sx={{\n          ':first-of-type': {\n            borderTopLeftRadius: 'large',\n            borderTopRightRadius: 'large',\n            overflow: 'hidden',\n          },\n          ':last-of-type': {\n            borderBottomLeftRadius: 'large',\n            borderBottomRightRadius: 'large',\n            overflow: 'hidden',\n          },\n          height,\n        }}\n      >\n        {colors.map(({ token, bg, color }) => (\n          <ColorItem\n            flex={1}\n            key={token}\n            token={token}\n            style={{ backgroundColor: bg, color: color }}\n          />\n        ))}\n      </Box>\n    );\n  }\n);\n\nexport const TonalColorItem = memo(\n  (props: { color: string; level: number }) => {\n    const { level, color } = props;\n    const hslColor = parseToHsl(color);\n    const rgbColor = parseToRgb(color);\n    return (\n      <Tooltip\n        label={\n          <>\n            <p>Luminance: {level}</p>\n            <p>{rgb(rgbColor)}</p>\n            <p>\n              rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n            </p>\n            <p>\n              hsl({Math.round(hslColor.hue)},{' '}\n              {Math.round(hslColor.saturation * 100)}%,{' '}\n              {Math.round(hslColor.lightness * 100)}%)\n            </p>\n          </>\n        }\n      >\n        <Text\n          key={level}\n          as=\"div\"\n          variant=\"body-small\"\n          flex={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          style={{\n            backgroundColor: color,\n            color: level <= 50 ? '#fff' : '#000',\n          }}\n        >\n          {level}\n        </Text>\n      </Tooltip>\n    );\n  }\n);\n\nexport const TonalColorsFromToken = memo((props: { token: string }) => {\n  const [computedColor, setComputedColor] = useState<string>();\n  if (!computedColor) {\n    return (\n      <Box\n        ref={(ref: HTMLDivElement | null) => {\n          if (ref) {\n            setComputedColor(window.getComputedStyle(ref).backgroundColor);\n          }\n        }}\n        bg={props.token}\n        style={{ position: 'fixed', left: -5000, top: -5000 }}\n      />\n    );\n  }\n  const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);\n  const tonal = TonalPalette.fromInt(colorInt);\n\n  return <TonalColors palette={tonal} />;\n});\n\nexport const TonalColors = memo((props: { palette: TonalPalette }) => {\n  const luminanceLevels = [\n    0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,\n  ];\n  return (\n    <Box display=\"flex\" height=\"72px\" width=\"100%\">\n      {luminanceLevels.map((level) => (\n        <TonalColorItem\n          key={level}\n          level={level}\n          color={hexFromArgb(props.palette.tone(level))}\n        />\n      ))}\n    </Box>\n  );\n});\n\nexport function makeColorArrayForToken(\n  token: string\n): { token: string; bg: string; color: string }[] {\n  return [\n    { token, bg: token, color: 'on.' + token },\n    { token, bg: 'on.' + token, color: token },\n    { token, bg: token + '-container', color: 'on.' + token + '-container' },\n    { token, bg: 'on.' + token + '-container', color: token + '-container' },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-export declare const googleFonts: string[];
+export declare const googleFonts: string[];