@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.3

package/build/esm/TextField/consts.js

@@ -1,6 +1,6 @@
-export const PADDING_LEFT_WITH_ICON = 14;
-export const PADDING_LEFT_WITHOUT_ICON = 16;
-export const ICON_WIDTH = 24;
-export const PADDING_RIGHT_WITH_ICON = 12;
-export const PADDING_RIGHT_WITHOUT_ICON = 16;
+export var PADDING_LEFT_WITH_ICON = 14;
+export var PADDING_LEFT_WITHOUT_ICON = 16;
+export var ICON_WIDTH = 24;
+export var PADDING_RIGHT_WITH_ICON = 12;
+export var PADDING_RIGHT_WITHOUT_ICON = 16;
 //# sourceMappingURL=consts.js.map

package/build/esm/TextField/consts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TextField/consts.ts"],"names":["PADDING_LEFT_WITH_ICON","PADDING_LEFT_WITHOUT_ICON","ICON_WIDTH","PADDING_RIGHT_WITH_ICON","PADDING_RIGHT_WITHOUT_ICON"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAA/B;AACP,OAAO,MAAMC,yBAAyB,GAAG,EAAlC;AAEP,OAAO,MAAMC,UAAU,GAAG,EAAnB;AAEP,OAAO,MAAMC,uBAAuB,GAAG,EAAhC;AACP,OAAO,MAAMC,0BAA0B,GAAG,EAAnC","sourcesContent":["export const PADDING_LEFT_WITH_ICON = 14;\nexport const PADDING_LEFT_WITHOUT_ICON = 16;\n\nexport const ICON_WIDTH = 24;\n\nexport const PADDING_RIGHT_WITH_ICON = 12;\nexport const PADDING_RIGHT_WITHOUT_ICON = 16;\n"],"file":"consts.js"}
+{"version":3,"sources":["../../../src/TextField/consts.ts"],"names":["PADDING_LEFT_WITH_ICON","PADDING_LEFT_WITHOUT_ICON","ICON_WIDTH","PADDING_RIGHT_WITH_ICON","PADDING_RIGHT_WITHOUT_ICON"],"mappings":"AAAA,OAAO,IAAMA,sBAAsB,GAAG,EAA/B;AACP,OAAO,IAAMC,yBAAyB,GAAG,EAAlC;AAEP,OAAO,IAAMC,UAAU,GAAG,EAAnB;AAEP,OAAO,IAAMC,uBAAuB,GAAG,EAAhC;AACP,OAAO,IAAMC,0BAA0B,GAAG,EAAnC","sourcesContent":["export const PADDING_LEFT_WITH_ICON = 14;\nexport const PADDING_LEFT_WITHOUT_ICON = 16;\n\nexport const ICON_WIDTH = 24;\n\nexport const PADDING_RIGHT_WITH_ICON = 12;\nexport const PADDING_RIGHT_WITHOUT_ICON = 16;\n"],"file":"consts.js"}

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

@@ -1,8 +1,8 @@
-import { Color, ColorPickerProps as BaseColorPickerProps } from '@basic-ui/color-picker';
-import { BoxProps } from '../Box';
-import { VFC } from 'react';
+import type { Color, ColorPickerProps as BaseColorPickerProps } from '@basic-ui/color-picker';
+import type { FC } from 'react';
+import type { BoxProps } from '../Box';
 export declare type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps) & {
     color: Color;
     onChange: (color: Color) => void;
 };
-export declare const ColorPicker: VFC<ColorPickerProps>;
+export declare const ColorPicker: FC<ColorPickerProps>;

package/build/esm/ThemeExplorer/ColorPicker.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { ColorPicker as _BaseColorPicker, Hue as _Hue, HueCursor as _HueCursor, Saturation as _Saturation, SaturationCursor as _SaturationCursor } from '@basic-ui/color-picker';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const BaseColorPicker = _BaseColorPicker;
-const Hue = _Hue;
-const HueCursor = _HueCursor;
-const Saturation = _Saturation;
-const SaturationCursor = _SaturationCursor;
-export const ColorPicker = (_ref) => {
-  let {
-    color,
-    onChange,
-    width = 450,
-    height = 225
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, ["color", "onChange", "width", "height"]);
+var BaseColorPicker = _BaseColorPicker;
+var Hue = _Hue;
+var HueCursor = _HueCursor;
+var Saturation = _Saturation;
+var SaturationCursor = _SaturationCursor;
+export var ColorPicker = function ColorPicker(_ref) {
+  var color = _ref.color,
+      onChange = _ref.onChange,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 450 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 225 : _ref$height,
+      otherProps = _objectWithoutProperties(_ref, ["color", "onChange", "width", "height"]);
 
   return /*#__PURE__*/_jsxs(BaseColorPicker, _extends({
     as: Box,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/ColorPicker.tsx"],"names":["ColorPicker","_BaseColorPicker","Hue","_Hue","HueCursor","_HueCursor","Saturation","_Saturation","SaturationCursor","_SaturationCursor","Box","BaseColorPicker","color","onChange","width","height","otherProps","position","touchAction","userSelect","backgroundImage","border","borderRadius","boxShadow","boxSizing","transform"],"mappings":";;AAAA,SAEEA,WAAW,IAAIC,gBAFjB,EAGEC,GAAG,IAAIC,IAHT,EAIEC,SAAS,IAAIC,UAJf,EAKEC,UAAU,IAAIC,WALhB,EAMEC,gBAAgB,IAAIC,iBANtB,QAYO,wBAZP;AAaA,SAASC,GAAT,QAA8B,QAA9B;;;AASA,MAAMC,eAEL,GAAGV,gBAFJ;AAGA,MAAMC,GAA6B,GAAGC,IAAtC;AACA,MAAMC,SAAyC,GAAGC,UAAlD;AACA,MAAMC,UAA2C,GAAGC,WAApD;AACA,MAAMC,gBAEL,GAAGC,iBAFJ;AAIA,OAAO,MAAMT,WAAkC,GAAG,UAM5C;AAAA,MAN6C;AACjDY,IAAAA,KADiD;AAEjDC,IAAAA,QAFiD;AAGjDC,IAAAA,KAAK,GAAG,GAHyC;AAIjDC,IAAAA,MAAM,GAAG;AAJwC,GAM7C;AAAA,MADDC,UACC;;AACJ,sBACE,MAAC,eAAD;AACE,IAAA,EAAE,EAAEN,GADN;AAEE,IAAA,KAAK,EAAEI,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,KAAK,EAAED;AALT,KAMMI,UANN;AAAA,4BAQE,KAAC,UAAD;AACE,MAAA,EAAE,EAAEN,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFM,QAAAA,eAAe,EACb;AANA,OAFN;AAAA,6BAWE,KAAC,gBAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,MALZ;AAMFC,UAAAA,SAAS,EAAE,gCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MARF,eAiCE,KAAC,GAAD;AACE,MAAA,EAAE,EAAEf,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFC,QAAAA,MAAM,EAAE,MALN;AAMFK,QAAAA,eAAe;AANb,OAFN;AAAA,6BAWE,KAAC,SAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,MALZ;AAMFC,UAAAA,SAAS,EAAE,sCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MAjCF;AAAA,KADF;AA6DD,CApEM","sourcesContent":["import {\n  Color,\n  ColorPicker as _BaseColorPicker,\n  Hue as _Hue,\n  HueCursor as _HueCursor,\n  Saturation as _Saturation,\n  SaturationCursor as _SaturationCursor,\n  ColorPickerProps as BaseColorPickerProps,\n  HueProps,\n  HueCursorProps,\n  SaturationProps,\n  SaturationCursorProps,\n} from '@basic-ui/color-picker';\nimport { Box, BoxProps } from '../Box';\nimport { VFC } from 'react';\n\nexport type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &\n  BaseColorPickerProps) & {\n  color: Color;\n  onChange: (color: Color) => void;\n};\n\nconst BaseColorPicker: VFC<\n  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps\n> = _BaseColorPicker as any;\nconst Hue: VFC<BoxProps & HueProps> = _Hue as any;\nconst HueCursor: VFC<BoxProps & HueCursorProps> = _HueCursor as any;\nconst Saturation: VFC<BoxProps & SaturationProps> = _Saturation as any;\nconst SaturationCursor: VFC<\n  BoxProps & SaturationCursorProps\n> = _SaturationCursor as any;\n\nexport const ColorPicker: VFC<ColorPickerProps> = ({\n  color,\n  onChange,\n  width = 450,\n  height = 225,\n  ...otherProps\n}) => {\n  return (\n    <BaseColorPicker\n      as={Box}\n      width={width}\n      height={height}\n      onChange={onChange}\n      color={color}\n      {...otherProps}\n    >\n      <Saturation\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          backgroundImage:\n            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',\n        }}\n      >\n        <SaturationCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: 'full',\n            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -10px)',\n          }}\n        />\n      </Saturation>\n      <Hue\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          height: '12px',\n          backgroundImage: `linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))`,\n        }}\n      >\n        <HueCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: 'full',\n            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -4px)',\n          }}\n        />\n      </Hue>\n    </BaseColorPicker>\n  );\n};\n"],"file":"ColorPicker.js"}
+{"version":3,"sources":["../../../src/ThemeExplorer/ColorPicker.tsx"],"names":["ColorPicker","_BaseColorPicker","Hue","_Hue","HueCursor","_HueCursor","Saturation","_Saturation","SaturationCursor","_SaturationCursor","Box","BaseColorPicker","color","onChange","width","height","otherProps","position","touchAction","userSelect","backgroundImage","border","borderRadius","boxShadow","boxSizing","transform"],"mappings":";;AAQA,SACEA,WAAW,IAAIC,gBADjB,EAEEC,GAAG,IAAIC,IAFT,EAGEC,SAAS,IAAIC,UAHf,EAIEC,UAAU,IAAIC,WAJhB,EAKEC,gBAAgB,IAAIC,iBALtB,QAMO,wBANP;AAUA,SAASC,GAAT,QAAoB,QAApB;;;AAQA,IAAMC,eAEL,GAAGV,gBAFJ;AAGA,IAAMC,GAA4B,GAAGC,IAArC;AACA,IAAMC,SAAwC,GAAGC,UAAjD;AACA,IAAMC,UAA0C,GAAGC,WAAnD;AACA,IAAMC,gBAAsD,GAC1DC,iBADF;AAGA,OAAO,IAAMT,WAAiC,GAAG,SAApCA,WAAoC,OAM3C;AAAA,MALJY,KAKI,QALJA,KAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,GAGJ;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,GAEL;AAAA,MADDC,UACC;;AACJ,sBACE,MAAC,eAAD;AACE,IAAA,EAAE,EAAEN,GADN;AAEE,IAAA,KAAK,EAAEI,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,KAAK,EAAED;AALT,KAMMI,UANN;AAAA,4BAQE,KAAC,UAAD;AACE,MAAA,EAAE,EAAEN,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFM,QAAAA,eAAe,EACb;AANA,OAFN;AAAA,6BAWE,KAAC,gBAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,MALZ;AAMFC,UAAAA,SAAS,EAAE,gCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MARF,eAiCE,KAAC,GAAD;AACE,MAAA,EAAE,EAAEf,GADN;AAEE,MAAA,EAAE,EAAE;AACFO,QAAAA,QAAQ,EAAE,UADR;AAEFC,QAAAA,WAAW,EAAE,MAFX;AAGFC,QAAAA,UAAU,EAAE,MAHV;AAIFL,QAAAA,KAAK,EAAE,MAJL;AAKFC,QAAAA,MAAM,EAAE,MALN;AAMFK,QAAAA,eAAe;AANb,OAFN;AAAA,6BAWE,KAAC,SAAD;AACE,QAAA,EAAE,EAAEV,GADN;AAEE,QAAA,EAAE,EAAE;AACFO,UAAAA,QAAQ,EAAE,UADR;AAEFH,UAAAA,KAAK,EAAE,MAFL;AAGFC,UAAAA,MAAM,EAAE,MAHN;AAIFM,UAAAA,MAAM,EAAE,mBAJN;AAKFC,UAAAA,YAAY,EAAE,MALZ;AAMFC,UAAAA,SAAS,EAAE,sCANT;AAOFC,UAAAA,SAAS,EAAE,YAPT;AAQFC,UAAAA,SAAS,EAAE;AART;AAFN;AAXF,MAjCF;AAAA,KADF;AA6DD,CApEM","sourcesContent":["import type {\n  Color,\n  ColorPickerProps as BaseColorPickerProps,\n  HueProps,\n  HueCursorProps,\n  SaturationProps,\n  SaturationCursorProps,\n} from '@basic-ui/color-picker';\nimport {\n  ColorPicker as _BaseColorPicker,\n  Hue as _Hue,\n  HueCursor as _HueCursor,\n  Saturation as _Saturation,\n  SaturationCursor as _SaturationCursor,\n} from '@basic-ui/color-picker';\nimport type { FC } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &\n  BaseColorPickerProps) & {\n  color: Color;\n  onChange: (color: Color) => void;\n};\n\nconst BaseColorPicker: FC<\n  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps\n> = _BaseColorPicker as any;\nconst Hue: FC<BoxProps & HueProps> = _Hue as any;\nconst HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;\nconst Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;\nconst SaturationCursor: FC<BoxProps & SaturationCursorProps> =\n  _SaturationCursor as any;\n\nexport const ColorPicker: FC<ColorPickerProps> = ({\n  color,\n  onChange,\n  width = 450,\n  height = 225,\n  ...otherProps\n}) => {\n  return (\n    <BaseColorPicker\n      as={Box}\n      width={width}\n      height={height}\n      onChange={onChange}\n      color={color}\n      {...otherProps}\n    >\n      <Saturation\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          backgroundImage:\n            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',\n        }}\n      >\n        <SaturationCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: 'full',\n            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -10px)',\n          }}\n        />\n      </Saturation>\n      <Hue\n        as={Box}\n        sx={{\n          position: 'relative',\n          touchAction: 'none',\n          userSelect: 'none',\n          width: '100%',\n          height: '12px',\n          backgroundImage: `linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))`,\n        }}\n      >\n        <HueCursor\n          as={Box}\n          sx={{\n            position: 'absolute',\n            width: '20px',\n            height: '20px',\n            border: '2px solid #ffffff',\n            borderRadius: 'full',\n            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',\n            boxSizing: 'border-box',\n            transform: 'translate(-10px, -4px)',\n          }}\n        />\n      </Hue>\n    </BaseColorPicker>\n  );\n};\n"],"file":"ColorPicker.js"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Color } from '@basic-ui/color-picker';
-import { TextFieldProps } from '../';
+import type { Color } from '@basic-ui/color-picker';
+import type { TextFieldProps } from '../';
 export interface TextFieldColorPickerProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
     value?: Color;
     defaultValue?: Color;

package/build/esm/ThemeExplorer/TextFieldColorPicker.js

@@ -1,37 +1,52 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { toColor } from '@basic-ui/color-picker';
 import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
-import { alpha, Box, TextField, Button } from '../';
 import { useRef, useState, memo, useCallback } from 'react';
+import { alpha, Box, TextField, Button } from '../';
 import { ColorPicker } from './ColorPicker';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
-  const {
-    value: valueProp,
-    defaultValue = toColor('hex', '#33ff33'),
-    onChange: onChangeProp,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["value", "defaultValue", "onChange", "disabled"]);
+export var TextFieldColorPicker = /*#__PURE__*/memo(function (props) {
+  var valueProp = props.value,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? toColor('hex', '#33ff33') : _props$defaultValue,
+      onChangeProp = props.onChange,
+      disabled = props.disabled,
+      otherProps = _objectWithoutProperties(props, ["value", "defaultValue", "onChange", "disabled"]);
 
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const [text, setText] = useState((valueProp == null ? void 0 : valueProp.hex) || defaultValue.hex);
-  const [value, _onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setState => v => {
-    setState(v);
-    setText(v.hex);
-  });
-  const onChange = useCallback(color => {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverOpen = _useState2[0],
+      setPopoverOpen = _useState2[1];
+
+  var _useState3 = useState((valueProp == null ? void 0 : valueProp.hex) || defaultValue.hex),
+      _useState4 = _slicedToArray(_useState3, 2),
+      text = _useState4[0],
+      setText = _useState4[1];
+
+  var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
+    return function (v) {
+      setState(v);
+      setText(v.hex);
+    };
+  }),
+      _useControlledState2 = _slicedToArray(_useControlledState, 2),
+      value = _useControlledState2[0],
+      _onChange = _useControlledState2[1];
+
+  var _onChange2 = useCallback(function (color) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     _onChange(color);
 
     setText(color.hex.replace('#', ''));
   }, [_onChange]);
-  const popoverRef = useRef(null);
-  const buttonRef = useRef(null);
-  useOnClickOutside(popoverRef, e => {
+
+  var popoverRef = useRef(null);
+  var buttonRef = useRef(null);
+  useOnClickOutside(popoverRef, function (e) {
     if (e.target === (buttonRef == null ? void 0 : buttonRef.current)) {
       return;
     }
@@ -49,7 +64,11 @@ export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
         },
         color: "on.surface",
         ref: buttonRef,
-        onClick: () => setPopoverOpen(open => !open),
+        onClick: function onClick() {
+          return setPopoverOpen(function (open) {
+            return !open;
+          });
+        },
         disabled: disabled,
         sx: {
           pointerEvents: 'all',
@@ -65,10 +84,11 @@ export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
       }),
       maxLength: 6,
       hideCharacterCounter: true,
-      onChange: e => {
+      onChange: function onChange(e) {
         if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          onChange(toColor('hex', '#' + e.target.value));
+          _onChange2(toColor('hex', '#' + e.target.value));
+
           return;
         }
 
@@ -88,7 +108,7 @@ export const TextFieldColorPicker = /*#__PURE__*/memo(props => {
           children: /*#__PURE__*/_jsx(ColorPicker, {
             color: value // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             ,
-            onChange: onChange,
+            onChange: _onChange2,
             width: 220,
             height: 220
           })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/TextFieldColorPicker.tsx"],"names":["toColor","Popper","useControlledState","useOnClickOutside","alpha","Box","TextField","Button","useRef","useState","memo","useCallback","ColorPicker","TextFieldColorPicker","props","value","valueProp","defaultValue","onChange","onChangeProp","disabled","otherProps","popoverOpen","setPopoverOpen","text","setText","hex","_onChange","setState","v","color","replace","popoverRef","buttonRef","e","target","current","backgroundColor","open","pointerEvents","cursor","width","height","borderRadius","borderWidth","borderColor","borderStyle","outlineColor","match","zIndex"],"mappings":"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","sourcesContent":["import { Color, toColor } from '@basic-ui/color-picker';\nimport { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';\nimport { alpha, Box, TextField, Button, TextFieldProps } from '../';\nimport { useRef, useState, memo, useCallback } from 'react';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface TextFieldColorPickerProps\n  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {\n  value?: Color;\n  defaultValue?: Color;\n  onChange?: (color: Color) => void;\n}\n\nexport const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {\n  const {\n    value: valueProp,\n    defaultValue = toColor('hex', '#33ff33'),\n    onChange: onChangeProp,\n    disabled,\n    ...otherProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);\n  const [value, _onChange] = useControlledState<Color, any, []>(\n    valueProp,\n    onChangeProp as any,\n    defaultValue,\n    (setState) => (v: any) => {\n      setState(v);\n      setText(v.hex);\n    }\n  );\n\n  const onChange = useCallback(\n    (color: Color) => {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      _onChange!(color);\n      setText(color.hex.replace('#', ''));\n    },\n    [_onChange]\n  );\n\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  useOnClickOutside(popoverRef, (e) => {\n    if (e.target === buttonRef?.current) {\n      return;\n    }\n    setPopoverOpen(false);\n  });\n\n  return (\n    <>\n      <TextField\n        disabled={disabled}\n        value={text.replace('#', '')}\n        leadingIcon={'#'}\n        trailingIcon={\n          <Button\n            style={{ backgroundColor: value.hex }}\n            color=\"on.surface\"\n            ref={buttonRef}\n            onClick={() => setPopoverOpen((open) => !open)}\n            disabled={disabled}\n            sx={{\n              pointerEvents: 'all',\n              cursor: 'pointer',\n              width: 32,\n              height: 32,\n              borderRadius: 'extra-small',\n              borderWidth: '1px',\n              borderColor: alpha('on.surface', 0.38),\n              borderStyle: 'solid',\n              outlineColor: 'transparent',\n            }}\n          />\n        }\n        maxLength={6}\n        hideCharacterCounter\n        onChange={(e) => {\n          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            onChange!(toColor('hex', '#' + e.target.value));\n            return;\n          }\n          setText(e.target.value);\n        }}\n        {...otherProps}\n      />\n      {popoverOpen && (\n        <Popper\n          anchorEl={buttonRef}\n          placement=\"bottom-end\"\n          style={{ zIndex: 2 }}\n        >\n          <Box ref={popoverRef} py={2}>\n            <Box boxShadow={4}>\n              <ColorPicker\n                color={value}\n                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                onChange={onChange!}\n                width={220}\n                height={220}\n              />\n            </Box>\n          </Box>\n        </Popper>\n      )}\n    </>\n  );\n});\n"],"file":"TextFieldColorPicker.js"}
+{"version":3,"sources":["../../../src/ThemeExplorer/TextFieldColorPicker.tsx"],"names":["toColor","Popper","useControlledState","useOnClickOutside","useRef","useState","memo","useCallback","alpha","Box","TextField","Button","ColorPicker","TextFieldColorPicker","props","valueProp","value","defaultValue","onChangeProp","onChange","disabled","otherProps","popoverOpen","setPopoverOpen","hex","text","setText","setState","v","_onChange","color","replace","popoverRef","buttonRef","e","target","current","backgroundColor","open","pointerEvents","cursor","width","height","borderRadius","borderWidth","borderColor","borderStyle","outlineColor","match","zIndex"],"mappings":"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","sourcesContent":["import type { Color } from '@basic-ui/color-picker';\nimport { toColor } from '@basic-ui/color-picker';\nimport { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';\nimport { useRef, useState, memo, useCallback } from 'react';\n\nimport type { TextFieldProps } from '../';\nimport { alpha, Box, TextField, Button } from '../';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface TextFieldColorPickerProps\n  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {\n  value?: Color;\n  defaultValue?: Color;\n  onChange?: (color: Color) => void;\n}\n\nexport const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {\n  const {\n    value: valueProp,\n    defaultValue = toColor('hex', '#33ff33'),\n    onChange: onChangeProp,\n    disabled,\n    ...otherProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);\n  const [value, _onChange] = useControlledState<Color, any, []>(\n    valueProp,\n    onChangeProp as any,\n    defaultValue,\n    (setState) => (v: any) => {\n      setState(v);\n      setText(v.hex);\n    }\n  );\n\n  const onChange = useCallback(\n    (color: Color) => {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      _onChange!(color);\n      setText(color.hex.replace('#', ''));\n    },\n    [_onChange]\n  );\n\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  useOnClickOutside(popoverRef, (e) => {\n    if (e.target === buttonRef?.current) {\n      return;\n    }\n    setPopoverOpen(false);\n  });\n\n  return (\n    <>\n      <TextField\n        disabled={disabled}\n        value={text.replace('#', '')}\n        leadingIcon={'#'}\n        trailingIcon={\n          <Button\n            style={{ backgroundColor: value.hex }}\n            color=\"on.surface\"\n            ref={buttonRef}\n            onClick={() => setPopoverOpen((open) => !open)}\n            disabled={disabled}\n            sx={{\n              pointerEvents: 'all',\n              cursor: 'pointer',\n              width: 32,\n              height: 32,\n              borderRadius: 'extra-small',\n              borderWidth: '1px',\n              borderColor: alpha('on.surface', 0.38),\n              borderStyle: 'solid',\n              outlineColor: 'transparent',\n            }}\n          />\n        }\n        maxLength={6}\n        hideCharacterCounter\n        onChange={(e) => {\n          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            onChange!(toColor('hex', '#' + e.target.value));\n            return;\n          }\n          setText(e.target.value);\n        }}\n        {...otherProps}\n      />\n      {popoverOpen && (\n        <Popper\n          anchorEl={buttonRef}\n          placement=\"bottom-end\"\n          style={{ zIndex: 2 }}\n        >\n          <Box ref={popoverRef} py={2}>\n            <Box boxShadow={4}>\n              <ColorPicker\n                color={value}\n                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                onChange={onChange!}\n                width={220}\n                height={220}\n              />\n            </Box>\n          </Box>\n        </Popper>\n      )}\n    </>\n  );\n});\n"],"file":"TextFieldColorPicker.js"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeColorScheme } from './makeColorScheme';
+import type { makeColorScheme } from './makeColorScheme';
 export declare const ThemeColors: React.MemoExoticComponent<({ scheme, }: {
     scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
 }) => JSX.Element>;

package/build/esm/ThemeExplorer/ThemeColors.js

@@ -3,9 +3,9 @@ import { Box } from '..';
 import { ColorRow } from './components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ThemeColors = /*#__PURE__*/memo(({
-  scheme
-}) => {
+export var ThemeColors = /*#__PURE__*/memo(function (_ref) {
+  var scheme = _ref.scheme;
+
   function makeColorArrayForToken(token) {
     return [{
       token: "".concat(token),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"names":["React","memo","Box","ColorRow","ThemeColors","scheme","makeColorArrayForToken","token","bg","color","on","gap","background","surface","outline"],"mappings":"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","sourcesContent":["import React, { memo } from 'react';\nimport { Box } from '..';\nimport { ColorRow } from './components';\nimport { makeColorScheme } from './makeColorScheme';\n\nexport const ThemeColors = memo(\n  ({\n    scheme,\n  }: {\n    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;\n  }) => {\n    function makeColorArrayForToken(token: string) {\n      return [\n        {\n          token: `${token}`,\n          bg: scheme[token],\n          color: scheme.on[token],\n        },\n        {\n          token: `on.${token}`,\n          bg: scheme.on[token],\n          color: scheme[token],\n        },\n        {\n          token: `${token}-container`,\n          bg: scheme[`${token}-container`],\n          color: scheme.on[`${token}-container`],\n        },\n        {\n          token: `on.${token}-container`,\n          bg: scheme.on[`${token}-container`],\n          color: scheme[`${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: `background`,\n              bg: scheme.background,\n              color: scheme.on.background,\n            },\n            {\n              token: `on.background`,\n              bg: scheme.on.background,\n              color: scheme.background,\n            },\n            {\n              token: `surface`,\n              bg: scheme.surface,\n              color: scheme.on.surface,\n            },\n            {\n              token: `on.surface`,\n              bg: scheme.on.surface,\n              color: scheme.surface,\n            },\n          ]}\n        />\n        <ColorRow\n          colors={[\n            {\n              token: `surface-variant`,\n              bg: scheme['surface-variant'],\n              color: scheme.on['surface-variant'],\n            },\n            {\n              token: `on.surface-variant`,\n              bg: scheme.on['surface-variant'],\n              color: scheme['surface-variant'],\n            },\n            {\n              token: `outline`,\n              bg: scheme.outline,\n              color: scheme.on.outline,\n            },\n          ]}\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"ThemeColors.js"}
+{"version":3,"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"names":["React","memo","Box","ColorRow","ThemeColors","scheme","makeColorArrayForToken","token","bg","color","on","gap","background","surface","outline"],"mappings":"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","sourcesContent":["import React, { 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    function makeColorArrayForToken(token: string) {\n      return [\n        {\n          token: `${token}`,\n          bg: scheme[token],\n          color: scheme.on[token],\n        },\n        {\n          token: `on.${token}`,\n          bg: scheme.on[token],\n          color: scheme[token],\n        },\n        {\n          token: `${token}-container`,\n          bg: scheme[`${token}-container`],\n          color: scheme.on[`${token}-container`],\n        },\n        {\n          token: `on.${token}-container`,\n          bg: scheme.on[`${token}-container`],\n          color: scheme[`${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: `background`,\n              bg: scheme.background,\n              color: scheme.on.background,\n            },\n            {\n              token: `on.background`,\n              bg: scheme.on.background,\n              color: scheme.background,\n            },\n            {\n              token: `surface`,\n              bg: scheme.surface,\n              color: scheme.on.surface,\n            },\n            {\n              token: `on.surface`,\n              bg: scheme.on.surface,\n              color: scheme.surface,\n            },\n          ]}\n        />\n        <ColorRow\n          colors={[\n            {\n              token: `surface-variant`,\n              bg: scheme['surface-variant'],\n              color: scheme.on['surface-variant'],\n            },\n            {\n              token: `on.surface-variant`,\n              bg: scheme.on['surface-variant'],\n              color: scheme['surface-variant'],\n            },\n            {\n              token: `outline`,\n              bg: scheme.outline,\n              color: scheme.on.outline,\n            },\n          ]}\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"ThemeColors.js"}

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

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import React from 'react';
 import { TonalPalette } from '@material/material-color-utilities';
 export declare const ColorItem: React.MemoExoticComponent<(props: {
     token: string;

package/build/esm/ThemeExplorer/components.js

@@ -1,24 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useState } from 'react';
-import { Box, Text, Tooltip } from '../';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+import { Box, Text, Tooltip } 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 const ColorItem = /*#__PURE__*/memo(props => {
-  const {
-    token,
-    style,
-    height = 50,
-    width
-  } = props;
-  const [computedColor, setComputedColor] = useState();
-  const hslColor = computedColor ? parseToHsl(computedColor) : {
+export var ColorItem = /*#__PURE__*/memo(function (props) {
+  var token = props.token,
+      style = props.style,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 50 : _props$height,
+      width = props.width;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      computedColor = _useState2[0],
+      setComputedColor = _useState2[1];
+
+  var hslColor = computedColor ? parseToHsl(computedColor) : {
     hue: 0,
     saturation: 0,
     lightness: 0
   };
-  const rgbColor = computedColor ? parseToRgb(computedColor) : {
+  var rgbColor = computedColor ? parseToRgb(computedColor) : {
     red: 0,
     green: 0,
     blue: 0
@@ -43,9 +48,9 @@ export const ColorItem = /*#__PURE__*/memo(props => {
       style: style,
       pl: "10px",
       pt: "10px",
-      ref: ref => {
-        if (ref) {
-          setComputedColor(window.getComputedStyle(ref).backgroundColor);
+      ref: function ref(_ref) {
+        if (_ref) {
+          setComputedColor(window.getComputedStyle(_ref).backgroundColor);
         }
       },
       children: /*#__PURE__*/_jsx(Text, {
@@ -58,11 +63,10 @@ export const ColorItem = /*#__PURE__*/memo(props => {
     })
   });
 });
-export const ColorRow = /*#__PURE__*/memo(props => {
-  const {
-    colors,
-    height = 50
-  } = props;
+export var ColorRow = /*#__PURE__*/memo(function (props) {
+  var colors = props.colors,
+      _props$height2 = props.height,
+      height = _props$height2 === void 0 ? 50 : _props$height2;
   return /*#__PURE__*/_jsx(Box, {
     width: "100%",
     display: "flex",
@@ -78,28 +82,27 @@ export const ColorRow = /*#__PURE__*/memo(props => {
         overflow: 'hidden'
       }
     },
-    children: colors.map(({
-      token,
-      bg,
-      color
-    }, idx) => /*#__PURE__*/_jsx(ColorItem, {
-      width: colors.length % 2 === 1 ? idx === colors.length - 1 ? '50%' : '25%' : '33.33%',
-      token: token,
-      style: {
-        backgroundColor: bg,
-        color: color
-      },
-      height: height
-    }, token))
+    children: colors.map(function (_ref2, idx) {
+      var token = _ref2.token,
+          bg = _ref2.bg,
+          color = _ref2.color;
+      return /*#__PURE__*/_jsx(ColorItem, {
+        width: colors.length % 2 === 1 ? idx === colors.length - 1 ? '50%' : '25%' : '33.33%',
+        token: token,
+        style: {
+          backgroundColor: bg,
+          color: color
+        },
+        height: height
+      }, token);
+    })
   });
 });
-export const TonalColorItem = /*#__PURE__*/memo(props => {
-  const {
-    level,
-    color
-  } = props;
-  const hslColor = parseToHsl(color);
-  const rgbColor = parseToRgb(color);
+export var TonalColorItem = /*#__PURE__*/memo(function (props) {
+  var level = props.level,
+      color = props.color;
+  var hslColor = parseToHsl(color);
+  var rgbColor = parseToRgb(color);
   return /*#__PURE__*/_jsx(Tooltip, {
     label: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs("p", {
@@ -125,14 +128,17 @@ export const TonalColorItem = /*#__PURE__*/memo(props => {
     }, level)
   });
 });
-export const TonalColorsFromToken = /*#__PURE__*/memo(props => {
-  const [computedColor, setComputedColor] = useState();
+export var TonalColorsFromToken = /*#__PURE__*/memo(function (props) {
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      computedColor = _useState4[0],
+      setComputedColor = _useState4[1];
 
   if (!computedColor) {
     return /*#__PURE__*/_jsx(Box, {
-      ref: ref => {
-        if (ref) {
-          setComputedColor(window.getComputedStyle(ref).backgroundColor);
+      ref: function ref(_ref3) {
+        if (_ref3) {
+          setComputedColor(window.getComputedStyle(_ref3).backgroundColor);
         }
       },
       bg: props.token,
@@ -144,39 +150,41 @@ export const TonalColorsFromToken = /*#__PURE__*/memo(props => {
     });
   }
 
-  const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);
-  const tonal = TonalPalette.fromInt(colorInt);
+  var colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);
+  var tonal = TonalPalette.fromInt(colorInt);
   return /*#__PURE__*/_jsx(TonalColors, {
     palette: tonal
   });
 });
-export const TonalColors = /*#__PURE__*/memo(props => {
-  const luminanceLevels = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
+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];
   return /*#__PURE__*/_jsx(Box, {
     display: "flex",
     height: "72px",
     width: "100%",
-    children: luminanceLevels.map(level => /*#__PURE__*/_jsx(TonalColorItem, {
-      level: level,
-      color: hexFromArgb(props.palette.tone(level))
-    }, level))
+    children: luminanceLevels.map(function (level) {
+      return /*#__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,"sources":["../../../src/ThemeExplorer/components.tsx"],"names":["React","memo","useState","Box","Text","Tooltip","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","ColorItem","props","token","style","height","width","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","Math","round","ref","window","getComputedStyle","backgroundColor","ColorRow","colors","borderTopLeftRadius","borderTopRightRadius","overflow","borderBottomLeftRadius","borderBottomRightRadius","map","bg","color","idx","length","TonalColorItem","level","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","luminanceLevels","palette","tone","makeColorArrayForToken"],"mappings":"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","sourcesContent":["import React, { memo, useState, CSSProperties } from 'react';\nimport { Box, Text, Tooltip } from '../';\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\n\nexport const ColorItem = memo(\n  (props: {\n    token: string;\n    style: CSSProperties;\n    height: number;\n    width: string;\n  }) => {\n    const { token, style, height = 50, width } = 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        <Box\n          width={width}\n          height={height}\n          style={style}\n          pl=\"10px\"\n          pt=\"10px\"\n          ref={(ref: HTMLDivElement | null) => {\n            if (ref) {\n              setComputedColor(window.getComputedStyle(ref).backgroundColor);\n            }\n          }}\n        >\n          <Text variant=\"body2\" as=\"span\" fontSize=\"11px\" lineHeight=\"11px\">\n            {token}\n          </Text>\n        </Box>\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: 24,\n            borderTopRightRadius: 24,\n            overflow: 'hidden',\n          },\n          ':last-of-type': {\n            borderBottomLeftRadius: 24,\n            borderBottomRightRadius: 24,\n            overflow: 'hidden',\n          },\n        }}\n      >\n        {colors.map(({ token, bg, color }, idx) => (\n          <ColorItem\n            width={\n              colors.length % 2 === 1\n                ? idx === colors.length - 1\n                  ? '50%'\n                  : '25%'\n                : '33.33%'\n            }\n            key={token}\n            token={token}\n            style={{ backgroundColor: bg, color: color }}\n            height={height}\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        <Box\n          key={level}\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        </Box>\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,\n    10,\n    20,\n    25,\n    30,\n    35,\n    40,\n    50,\n    60,\n    70,\n    80,\n    90,\n    95,\n    98,\n    99,\n    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"],"file":"components.js"}
+{"version":3,"sources":["../../../src/ThemeExplorer/components.tsx"],"names":["React","memo","useState","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","Box","Text","Tooltip","ColorItem","props","token","style","height","width","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","Math","round","ref","window","getComputedStyle","backgroundColor","ColorRow","colors","borderTopLeftRadius","borderTopRightRadius","overflow","borderBottomLeftRadius","borderBottomRightRadius","map","idx","bg","color","length","TonalColorItem","level","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","luminanceLevels","palette","tone","makeColorArrayForToken"],"mappings":";AACA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,QAAtB,QAAsC,OAAtC;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,UAA1B,QAA4C,UAA5C;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,oCAA1C;AAEA,SAASC,GAAT,EAAcC,IAAd,EAAoBC,OAApB,QAAmC,KAAnC;;;;AAEA,OAAO,IAAMC,SAAS,gBAAGV,IAAI,CAC3B,UAACW,KAAD,EAKM;AAAA,MACIC,KADJ,GACyCD,KADzC,CACIC,KADJ;AAAA,MACWC,KADX,GACyCF,KADzC,CACWE,KADX;AAAA,sBACyCF,KADzC,CACkBG,MADlB;AAAA,MACkBA,MADlB,8BAC2B,EAD3B;AAAA,MAC+BC,KAD/B,GACyCJ,KADzC,CAC+BI,KAD/B;;AAAA,kBAEsCd,QAAQ,EAF9C;AAAA;AAAA,MAEGe,aAFH;AAAA,MAEkBC,gBAFlB;;AAGJ,MAAMC,QAAQ,GAAGF,aAAa,GAC1Bb,UAAU,CAACa,aAAD,CADgB,GAE1B;AAAEG,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,UAAU,EAAE,CAAtB;AAAyBC,IAAAA,SAAS,EAAE;AAApC,GAFJ;AAGA,MAAMC,QAAQ,GAAGN,aAAa,GAC1BZ,UAAU,CAACY,aAAD,CADgB,GAE1B;AAAEO,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,KAAK,EAAE,CAAjB;AAAoBC,IAAAA,IAAI,EAAE;AAA1B,GAFJ;AAGA,sBACE,KAAC,OAAD;AACE,IAAA,KAAK,EACHT,aAAa,gBACX;AAAA,8BACE;AAAA,kBAAIJ;AAAJ,QADF,eAEE;AAAA,kBAAIV,GAAG,CAACoB,QAAD;AAAP,QAFF,eAGE;AAAA,2BACOA,QAAQ,CAACC,GADhB,QACuBD,QAAQ,CAACE,KADhC,QACyCF,QAAQ,CAACG,IADlD;AAAA,QAHF,eAME;AAAA,2BACOC,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;AAAA,QANF;AAAA,MADW,gBAcX;AAAA,gBAAIT;AAAJ,MAhBN;AAAA,2BAoBE,KAAC,GAAD;AACE,MAAA,KAAK,EAAEG,KADT;AAEE,MAAA,MAAM,EAAED,MAFV;AAGE,MAAA,KAAK,EAAED,KAHT;AAIE,MAAA,EAAE,EAAC,MAJL;AAKE,MAAA,EAAE,EAAC,MALL;AAME,MAAA,GAAG,EAAE,aAACe,IAAD,EAAgC;AACnC,YAAIA,IAAJ,EAAS;AACPX,UAAAA,gBAAgB,CAACY,MAAM,CAACC,gBAAP,CAAwBF,IAAxB,EAA6BG,eAA9B,CAAhB;AACD;AACF,OAVH;AAAA,6BAYE,KAAC,IAAD;AAAM,QAAA,OAAO,EAAC,OAAd;AAAsB,QAAA,EAAE,EAAC,MAAzB;AAAgC,QAAA,QAAQ,EAAC,MAAzC;AAAgD,QAAA,UAAU,EAAC,MAA3D;AAAA,kBACGnB;AADH;AAZF;AApBF,IADF;AAuCD,CAtD0B,CAAtB;AAyDP,OAAO,IAAMoB,QAAQ,gBAAGhC,IAAI,CAC1B,UAACW,KAAD,EAGM;AAAA,MACIsB,MADJ,GAC4BtB,KAD5B,CACIsB,MADJ;AAAA,uBAC4BtB,KAD5B,CACYG,MADZ;AAAA,MACYA,MADZ,+BACqB,EADrB;AAEJ,sBACE,KAAC,GAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,EAAE,EAAE;AACF,wBAAkB;AAChBoB,QAAAA,mBAAmB,EAAE,EADL;AAEhBC,QAAAA,oBAAoB,EAAE,EAFN;AAGhBC,QAAAA,QAAQ,EAAE;AAHM,OADhB;AAMF,uBAAiB;AACfC,QAAAA,sBAAsB,EAAE,EADT;AAEfC,QAAAA,uBAAuB,EAAE,EAFV;AAGfF,QAAAA,QAAQ,EAAE;AAHK;AANf,KAHN;AAAA,cAgBGH,MAAM,CAACM,GAAP,CAAW,iBAAuBC,GAAvB;AAAA,UAAG5B,KAAH,SAAGA,KAAH;AAAA,UAAU6B,EAAV,SAAUA,EAAV;AAAA,UAAcC,KAAd,SAAcA,KAAd;AAAA,0BACV,KAAC,SAAD;AACE,QAAA,KAAK,EACHT,MAAM,CAACU,MAAP,GAAgB,CAAhB,KAAsB,CAAtB,GACIH,GAAG,KAAKP,MAAM,CAACU,MAAP,GAAgB,CAAxB,GACE,KADF,GAEE,KAHN,GAII,QANR;AASE,QAAA,KAAK,EAAE/B,KATT;AAUE,QAAA,KAAK,EAAE;AAAEmB,UAAAA,eAAe,EAAEU,EAAnB;AAAuBC,UAAAA,KAAK,EAAEA;AAA9B,SAVT;AAWE,QAAA,MAAM,EAAE5B;AAXV,SAQOF,KARP,CADU;AAAA,KAAX;AAhBH,IADF;AAkCD,CAxCyB,CAArB;AA2CP,OAAO,IAAMgC,cAAc,gBAAG5C,IAAI,CAChC,UAACW,KAAD,EAA6C;AAAA,MACnCkC,KADmC,GAClBlC,KADkB,CACnCkC,KADmC;AAAA,MAC5BH,KAD4B,GAClB/B,KADkB,CAC5B+B,KAD4B;AAE3C,MAAMxB,QAAQ,GAAGf,UAAU,CAACuC,KAAD,CAA3B;AACA,MAAMpB,QAAQ,GAAGlB,UAAU,CAACsC,KAAD,CAA3B;AACA,sBACE,KAAC,OAAD;AACE,IAAA,KAAK,eACH;AAAA,8BACE;AAAA,kCAAeG,KAAf;AAAA,QADF,eAEE;AAAA,kBAAI3C,GAAG,CAACoB,QAAD;AAAP,QAFF,eAGE;AAAA,2BACOA,QAAQ,CAACC,GADhB,QACuBD,QAAQ,CAACE,KADhC,QACyCF,QAAQ,CAACG,IADlD;AAAA,QAHF,eAME;AAAA,2BACOC,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;AAAA,QANF;AAAA,MAFJ;AAAA,2BAgBE,KAAC,GAAD;AAEE,MAAA,IAAI,EAAE,CAFR;AAGE,MAAA,OAAO,EAAC,MAHV;AAIE,MAAA,UAAU,EAAC,QAJb;AAKE,MAAA,cAAc,EAAC,QALjB;AAME,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAEW,KADZ;AAELA,QAAAA,KAAK,EAAEG,KAAK,IAAI,EAAT,GAAc,MAAd,GAAuB;AAFzB,OANT;AAAA,gBAWGA;AAXH,OACOA,KADP;AAhBF,IADF;AAgCD,CArC+B,CAA3B;AAwCP,OAAO,IAAMC,oBAAoB,gBAAG9C,IAAI,CAAC,UAACW,KAAD,EAA8B;AAAA,mBAC3BV,QAAQ,EADmB;AAAA;AAAA,MAC9De,aAD8D;AAAA,MAC/CC,gBAD+C;;AAErE,MAAI,CAACD,aAAL,EAAoB;AAClB,wBACE,KAAC,GAAD;AACE,MAAA,GAAG,EAAE,aAACY,KAAD,EAAgC;AACnC,YAAIA,KAAJ,EAAS;AACPX,UAAAA,gBAAgB,CAACY,MAAM,CAACC,gBAAP,CAAwBF,KAAxB,EAA6BG,eAA9B,CAAhB;AACD;AACF,OALH;AAME,MAAA,EAAE,EAAEpB,KAAK,CAACC,KANZ;AAOE,MAAA,KAAK,EAAE;AAAEmC,QAAAA,QAAQ,EAAE,OAAZ;AAAqBC,QAAAA,IAAI,EAAE,CAAC,IAA5B;AAAkCC,QAAAA,GAAG,EAAE,CAAC;AAAxC;AAPT,MADF;AAWD;;AACD,MAAMC,QAAQ,GAAGC,QAAQ,CAACjD,GAAG,CAACE,UAAU,CAACY,aAAD,CAAX,CAAH,CAA+BoC,KAA/B,CAAqC,CAArC,CAAD,EAA0C,EAA1C,CAAzB;AACA,MAAMC,KAAK,GAAG/C,YAAY,CAACgD,OAAb,CAAqBJ,QAArB,CAAd;AAEA,sBAAO,KAAC,WAAD;AAAa,IAAA,OAAO,EAAEG;AAAtB,IAAP;AACD,CAnBuC,CAAjC;AAqBP,OAAO,IAAME,WAAW,gBAAGvD,IAAI,CAAC,UAACW,KAAD,EAAsC;AACpE,MAAM6C,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;AAGA,sBACE,KAAC,GAAD;AAAK,IAAA,OAAO,EAAC,MAAb;AAAoB,IAAA,MAAM,EAAC,MAA3B;AAAkC,IAAA,KAAK,EAAC,MAAxC;AAAA,cACGA,eAAe,CAACjB,GAAhB,CAAoB,UAACM,KAAD;AAAA,0BACnB,KAAC,cAAD;AAEE,QAAA,KAAK,EAAEA,KAFT;AAGE,QAAA,KAAK,EAAExC,WAAW,CAACM,KAAK,CAAC8C,OAAN,CAAcC,IAAd,CAAmBb,KAAnB,CAAD;AAHpB,SACOA,KADP,CADmB;AAAA,KAApB;AADH,IADF;AAWD,CAf8B,CAAxB;AAiBP,OAAO,SAASc,sBAAT,CACL/C,KADK,EAE2C;AAChD,SAAO,CACL;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAAS6B,IAAAA,EAAE,EAAE7B,KAAb;AAAoB8B,IAAAA,KAAK,EAAE,QAAQ9B;AAAnC,GADK,EAEL;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAAS6B,IAAAA,EAAE,EAAE,QAAQ7B,KAArB;AAA4B8B,IAAAA,KAAK,EAAE9B;AAAnC,GAFK,EAGL;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAAS6B,IAAAA,EAAE,EAAE7B,KAAK,GAAG,YAArB;AAAmC8B,IAAAA,KAAK,EAAE,QAAQ9B,KAAR,GAAgB;AAA1D,GAHK,EAIL;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAAS6B,IAAAA,EAAE,EAAE,QAAQ7B,KAAR,GAAgB,YAA7B;AAA2C8B,IAAAA,KAAK,EAAE9B,KAAK,GAAG;AAA1D,GAJK,CAAP;AAMD","sourcesContent":["import type { CSSProperties } from 'react';\nimport React, { memo, useState } from 'react';\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\n\nimport { Box, Text, Tooltip } from '../';\n\nexport const ColorItem = memo(\n  (props: {\n    token: string;\n    style: CSSProperties;\n    height: number;\n    width: string;\n  }) => {\n    const { token, style, height = 50, width } = 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        <Box\n          width={width}\n          height={height}\n          style={style}\n          pl=\"10px\"\n          pt=\"10px\"\n          ref={(ref: HTMLDivElement | null) => {\n            if (ref) {\n              setComputedColor(window.getComputedStyle(ref).backgroundColor);\n            }\n          }}\n        >\n          <Text variant=\"body2\" as=\"span\" fontSize=\"11px\" lineHeight=\"11px\">\n            {token}\n          </Text>\n        </Box>\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: 24,\n            borderTopRightRadius: 24,\n            overflow: 'hidden',\n          },\n          ':last-of-type': {\n            borderBottomLeftRadius: 24,\n            borderBottomRightRadius: 24,\n            overflow: 'hidden',\n          },\n        }}\n      >\n        {colors.map(({ token, bg, color }, idx) => (\n          <ColorItem\n            width={\n              colors.length % 2 === 1\n                ? idx === colors.length - 1\n                  ? '50%'\n                  : '25%'\n                : '33.33%'\n            }\n            key={token}\n            token={token}\n            style={{ backgroundColor: bg, color: color }}\n            height={height}\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        <Box\n          key={level}\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        </Box>\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"],"file":"components.js"}

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

@@ -1,4 +1,4 @@
-import { TonalPalette } from '@material/material-color-utilities';
+import type { TonalPalette } from '@material/material-color-utilities';
 export declare function makeColorScheme(opts: {
     primary: TonalPalette;
     secondary: TonalPalette;