@basic-ui/material 1.0.0-alpha.1 → 1.0.0-alpha.10

package/build/esm/TextField/TextField.d.ts

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

package/build/esm/TextField/TextField.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef, useState, useId } from 'react';
-import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
 import { Input } from './Input';
 import { useTheme } from '../theme';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TextField/TextField.tsx"],"names":["forwardRef","useState","useId","React","wrapEvent","useControlledState","Input","useTheme","FilledContainer","OutlinedContainer","HelperText","Box","IconContainer","componentMap","outlined","filled","characterCounter","value","maxLength","undefined","length","TextField","props","forwardedRef","type","idProp","id","variant","color","valueProp","defaultValue","error","disabled","hideCharacterCounter","label","placeholder","helperTextProp","helperText","multiline","onChangeProp","onChange","onFocus","onBlur","leadingIcon","trailingIcon","containerProps","otherProps","setState","e","target","hasFocus","setHasFocus","Container","fallbackId","theme","handleFocus","handleBlur","hasError","Boolean","inputId","helperTextId","labelIsFloating"],"mappings":"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","sourcesContent":["import { forwardRef, useState, useId } from 'react';\nimport * as React from 'react';\nimport { wrapEvent, useControlledState } from '@basic-ui/core';\n\nimport type { InputProps } from './Input';\nimport { Input } from './Input';\nimport { useTheme } from '../theme';\nimport { FilledContainer } from './FilledContainer';\nimport { OutlinedContainer } from './OutlinedContainer';\nimport { HelperText } from './HelperText';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from './IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nfunction characterCounter(\n  value: string | number | string[],\n  maxLength?: number\n) {\n  if (maxLength === undefined) {\n    return null;\n  }\n\n  return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;\n}\n\nexport type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {\n  variant?: 'outlined' | 'filled';\n  containerProps?: Omit<BoxProps, 'color'>;\n  color?: 'primary' | 'secondary';\n  label?: React.ReactNode;\n  helperText?: string;\n  maxLength?: number;\n  hideCharacterCounter?: boolean;\n  defaultValue?: string;\n  value?: string;\n  multiline?: boolean;\n  error?: boolean | string;\n  leadingIcon?: React.ReactNode;\n  trailingIcon?: React.ReactNode;\n};\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      variant = 'outlined',\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      disabled,\n      maxLength,\n      hideCharacterCounter = false,\n      label = null,\n      placeholder,\n      helperText: helperTextProp,\n      multiline,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n    const [hasFocus, setHasFocus] = useState(false);\n\n    const Container = componentMap[variant] || OutlinedContainer;\n\n    const fallbackId = useId();\n\n    const theme = useTheme();\n\n    const handleFocus = () => {\n      setHasFocus(true);\n    };\n\n    const handleBlur = () => {\n      setHasFocus(false);\n    };\n\n    const hasError = Boolean(error);\n    const helperText = typeof error === 'string' ? error : helperTextProp;\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-text-field`;\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const labelIsFloating =\n      hasFocus || (typeof value === 'string' && value.length > 0);\n\n    return (\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          error={hasError}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          leadingIcon={Boolean(leadingIcon)}\n          {...containerProps}\n        >\n          {leadingIcon && (\n            <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n          )}\n          <Input\n            ref={forwardedRef}\n            as={multiline ? 'textarea' : 'input'}\n            variant={variant}\n            type={type}\n            id={inputId}\n            onFocus={wrapEvent(onFocus, handleFocus)}\n            onBlur={wrapEvent(onBlur, handleBlur)}\n            onChange={onChange}\n            value={value}\n            theme={theme}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-disabled={disabled ? 'true' : undefined}\n            maxLength={maxLength}\n            multiline={multiline}\n            aria-describedby={helperTextId}\n            hasLabel={!!label}\n            leadingIcon={Boolean(leadingIcon)}\n            trailingIcon={Boolean(trailingIcon)}\n            {...otherProps}\n          />\n          {trailingIcon && (\n            <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n          )}\n        </Container>\n\n        <HelperText\n          error={hasError}\n          disabled={disabled}\n          leftSide={helperText && <span id={helperTextId}>{helperText}</span>}\n          rightSide={\n            !hideCharacterCounter &&\n            characterCounter(value as string, maxLength)\n          }\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../../src/TextField/TextField.tsx"],"names":["forwardRef","useState","useId","wrapEvent","useControlledState","Input","useTheme","FilledContainer","OutlinedContainer","HelperText","Box","IconContainer","componentMap","outlined","filled","characterCounter","value","maxLength","undefined","length","TextField","props","forwardedRef","type","idProp","id","variant","color","valueProp","defaultValue","error","disabled","hideCharacterCounter","label","placeholder","helperTextProp","helperText","multiline","onChangeProp","onChange","onFocus","onBlur","leadingIcon","trailingIcon","containerProps","otherProps","setState","e","target","hasFocus","setHasFocus","Container","fallbackId","theme","handleFocus","handleBlur","hasError","Boolean","inputId","helperTextId","labelIsFloating"],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef, useState, useId } from 'react';\nimport { wrapEvent, useControlledState } from '@basic-ui/core';\n\nimport type { InputProps } from './Input';\nimport { Input } from './Input';\nimport { useTheme } from '../theme';\nimport { FilledContainer } from './FilledContainer';\nimport { OutlinedContainer } from './OutlinedContainer';\nimport { HelperText } from './HelperText';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from './IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nfunction characterCounter(\n  value: string | number | string[],\n  maxLength?: number\n) {\n  if (maxLength === undefined) {\n    return null;\n  }\n\n  return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;\n}\n\nexport type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {\n  variant?: 'outlined' | 'filled';\n  containerProps?: Omit<BoxProps, 'color'>;\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  maxLength?: number;\n  hideCharacterCounter?: boolean;\n  defaultValue?: string;\n  value?: string;\n  multiline?: boolean;\n  error?: boolean | string;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      variant = 'outlined',\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      disabled,\n      maxLength,\n      hideCharacterCounter = false,\n      label = null,\n      placeholder,\n      helperText: helperTextProp,\n      multiline,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n    const [hasFocus, setHasFocus] = useState(false);\n\n    const Container = componentMap[variant] || OutlinedContainer;\n\n    const fallbackId = useId();\n\n    const theme = useTheme();\n\n    const handleFocus = () => {\n      setHasFocus(true);\n    };\n\n    const handleBlur = () => {\n      setHasFocus(false);\n    };\n\n    const hasError = Boolean(error);\n    const helperText = typeof error === 'string' ? error : helperTextProp;\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-text-field`;\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n    const labelIsFloating =\n      hasFocus || (typeof value === 'string' && value.length > 0);\n\n    return (\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          error={hasError}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          leadingIcon={Boolean(leadingIcon)}\n          {...containerProps}\n        >\n          {leadingIcon && (\n            <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n          )}\n          <Input\n            ref={forwardedRef}\n            as={multiline ? 'textarea' : 'input'}\n            variant={variant}\n            type={type}\n            id={inputId}\n            onFocus={wrapEvent(onFocus, handleFocus)}\n            onBlur={wrapEvent(onBlur, handleBlur)}\n            onChange={onChange}\n            value={value}\n            theme={theme}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-disabled={disabled ? 'true' : undefined}\n            maxLength={maxLength}\n            multiline={multiline}\n            aria-describedby={helperTextId}\n            hasLabel={!!label}\n            leadingIcon={Boolean(leadingIcon)}\n            trailingIcon={Boolean(trailingIcon)}\n            {...otherProps}\n          />\n          {trailingIcon && (\n            <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n          )}\n        </Container>\n\n        <HelperText\n          error={hasError}\n          disabled={disabled}\n          leftSide={helperText && <span id={helperTextId}>{helperText}</span>}\n          rightSide={\n            !hideCharacterCounter &&\n            characterCounter(value as string, maxLength)\n          }\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"TextField.js"}

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

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

package/build/esm/ThemeExplorer/ThemeColors.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Box } from '..';
 import { ColorRow } from './components';
 import { jsx as _jsx } from "react/jsx-runtime";

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';\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"}
+{"version":3,"sources":["../../../src/ThemeExplorer/ThemeColors.tsx"],"names":["memo","Box","ColorRow","ThemeColors","scheme","makeColorArrayForToken","token","bg","color","on","gap","background","surface","outline"],"mappings":"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","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    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,13 +1,12 @@
 import type { CSSProperties } from 'react';
-import React from 'react';
 import { TonalPalette } from '@material/material-color-utilities';
-export declare const ColorItem: React.MemoExoticComponent<(props: {
+export declare const ColorItem: import("react").MemoExoticComponent<(props: {
     token: string;
     style: CSSProperties;
     height: number;
     width: string;
 }) => JSX.Element>;
-export declare const ColorRow: React.MemoExoticComponent<(props: {
+export declare const ColorRow: import("react").MemoExoticComponent<(props: {
     colors: {
         token: string;
         bg: string;
@@ -15,14 +14,14 @@ export declare const ColorRow: React.MemoExoticComponent<(props: {
     }[];
     height?: number;
 }) => JSX.Element>;
-export declare const TonalColorItem: React.MemoExoticComponent<(props: {
+export declare const TonalColorItem: import("react").MemoExoticComponent<(props: {
     color: string;
     level: number;
 }) => JSX.Element>;
-export declare const TonalColorsFromToken: React.MemoExoticComponent<(props: {
+export declare const TonalColorsFromToken: import("react").MemoExoticComponent<(props: {
     token: string;
 }) => JSX.Element>;
-export declare const TonalColors: React.MemoExoticComponent<(props: {
+export declare const TonalColors: import("react").MemoExoticComponent<(props: {
     palette: TonalPalette;
 }) => JSX.Element>;
 export declare function makeColorArrayForToken(token: string): {

package/build/esm/ThemeExplorer/components.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
-import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+
 import { Box, Text, Tooltip } from '../';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,7 +55,7 @@ export var ColorItem = /*#__PURE__*/memo(function (props) {
         }
       },
       children: /*#__PURE__*/_jsx(Text, {
-        variant: "body2",
+        variant: "body-small",
         as: "span",
         fontSize: "11px",
         lineHeight: "11px",

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

@@ -1 +1 @@
-{"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":"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","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"}
+{"version":3,"sources":["../../../src/ThemeExplorer/components.tsx"],"names":["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":"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","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'; // eslint-disable-line import/no-unresolved\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\n            variant=\"body-small\"\n            as=\"span\"\n            fontSize=\"11px\"\n            lineHeight=\"11px\"\n          >\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.js

@@ -1,4 +1,5 @@
-import { hexFromArgb } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+
 export function makeColorScheme(opts) {
   function c(palette, tone) {
     return hexFromArgb(palette.tone(tone));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","surface","neutralVariant","outline","on","modes","dark"],"mappings":"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","sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\nimport { hexFromArgb } from '@material/material-color-utilities';\n\nexport function makeColorScheme(opts: {\n  primary: TonalPalette;\n  secondary: TonalPalette;\n  tertiary: TonalPalette;\n  error: TonalPalette;\n  neutral: TonalPalette;\n  neutralVariant: TonalPalette;\n}) {\n  function c(palette: TonalPalette, tone: number) {\n    return hexFromArgb(palette.tone(tone));\n  }\n\n  return {\n    primary: c(opts.primary, 40),\n    secondary: c(opts.secondary, 40),\n    tertiary: c(opts.tertiary, 40),\n    error: c(opts.error, 40),\n    'primary-container': c(opts.primary, 90),\n    'secondary-container': c(opts.secondary, 90),\n    'tertiary-container': c(opts.tertiary, 90),\n    'error-container': c(opts.error, 90),\n    background: c(opts.neutral, 99),\n    surface: c(opts.neutral, 99),\n    'surface-variant': c(opts.neutralVariant, 90),\n    outline: c(opts.neutralVariant, 50),\n    on: {\n      primary: c(opts.primary, 100),\n      secondary: c(opts.secondary, 100),\n      tertiary: c(opts.tertiary, 100),\n      error: c(opts.error, 100),\n      'primary-container': c(opts.primary, 10),\n      'secondary-container': c(opts.secondary, 10),\n      'tertiary-container': c(opts.tertiary, 10),\n      'error-container': c(opts.error, 10),\n      background: c(opts.neutral, 10),\n      surface: c(opts.neutral, 10),\n      'surface-variant': c(opts.neutralVariant, 30),\n      outline: c(opts.neutralVariant, 95),\n    },\n    modes: {\n      dark: {\n        primary: c(opts.primary, 80),\n        secondary: c(opts.secondary, 80),\n        tertiary: c(opts.tertiary, 80),\n        error: c(opts.error, 80),\n        'primary-container': c(opts.primary, 30),\n        'secondary-container': c(opts.secondary, 30),\n        'tertiary-container': c(opts.tertiary, 30),\n        'error-container': c(opts.error, 30),\n        background: c(opts.neutral, 10),\n        surface: c(opts.neutral, 10),\n        'surface-variant': c(opts.neutralVariant, 30),\n        outline: c(opts.neutralVariant, 60),\n        on: {\n          primary: c(opts.primary, 20),\n          secondary: c(opts.secondary, 20),\n          tertiary: c(opts.tertiary, 20),\n          error: c(opts.error, 20),\n          'primary-container': c(opts.primary, 90),\n          'secondary-container': c(opts.secondary, 90),\n          'tertiary-container': c(opts.tertiary, 90),\n          'error-container': c(opts.error, 90),\n          background: c(opts.neutral, 90),\n          surface: c(opts.neutral, 90),\n          'surface-variant': c(opts.neutralVariant, 80),\n          outline: c(opts.neutralVariant, 10),\n        },\n      },\n    },\n  };\n}\n"],"file":"makeColorScheme.js"}
+{"version":3,"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","surface","neutralVariant","outline","on","modes","dark"],"mappings":"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","sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\nimport { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved\n\nexport function makeColorScheme(opts: {\n  primary: TonalPalette;\n  secondary: TonalPalette;\n  tertiary: TonalPalette;\n  error: TonalPalette;\n  neutral: TonalPalette;\n  neutralVariant: TonalPalette;\n}) {\n  function c(palette: TonalPalette, tone: number) {\n    return hexFromArgb(palette.tone(tone));\n  }\n\n  return {\n    primary: c(opts.primary, 40),\n    secondary: c(opts.secondary, 40),\n    tertiary: c(opts.tertiary, 40),\n    error: c(opts.error, 40),\n    'primary-container': c(opts.primary, 90),\n    'secondary-container': c(opts.secondary, 90),\n    'tertiary-container': c(opts.tertiary, 90),\n    'error-container': c(opts.error, 90),\n    background: c(opts.neutral, 99),\n    surface: c(opts.neutral, 99),\n    'surface-variant': c(opts.neutralVariant, 90),\n    outline: c(opts.neutralVariant, 50),\n    on: {\n      primary: c(opts.primary, 100),\n      secondary: c(opts.secondary, 100),\n      tertiary: c(opts.tertiary, 100),\n      error: c(opts.error, 100),\n      'primary-container': c(opts.primary, 10),\n      'secondary-container': c(opts.secondary, 10),\n      'tertiary-container': c(opts.tertiary, 10),\n      'error-container': c(opts.error, 10),\n      background: c(opts.neutral, 10),\n      surface: c(opts.neutral, 10),\n      'surface-variant': c(opts.neutralVariant, 30),\n      outline: c(opts.neutralVariant, 95),\n    },\n    modes: {\n      dark: {\n        primary: c(opts.primary, 80),\n        secondary: c(opts.secondary, 80),\n        tertiary: c(opts.tertiary, 80),\n        error: c(opts.error, 80),\n        'primary-container': c(opts.primary, 30),\n        'secondary-container': c(opts.secondary, 30),\n        'tertiary-container': c(opts.tertiary, 30),\n        'error-container': c(opts.error, 30),\n        background: c(opts.neutral, 10),\n        surface: c(opts.neutral, 10),\n        'surface-variant': c(opts.neutralVariant, 30),\n        outline: c(opts.neutralVariant, 60),\n        on: {\n          primary: c(opts.primary, 20),\n          secondary: c(opts.secondary, 20),\n          tertiary: c(opts.tertiary, 20),\n          error: c(opts.error, 20),\n          'primary-container': c(opts.primary, 90),\n          'secondary-container': c(opts.secondary, 90),\n          'tertiary-container': c(opts.tertiary, 90),\n          'error-container': c(opts.error, 90),\n          background: c(opts.neutral, 90),\n          surface: c(opts.neutral, 90),\n          'surface-variant': c(opts.neutralVariant, 80),\n          outline: c(opts.neutralVariant, 10),\n        },\n      },\n    },\n  };\n}\n"],"file":"makeColorScheme.js"}

package/build/esm/ThemeExplorer/useDeferredColor.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+
 import { useLocalStorageCachedState } from './useLocalStorageCachedState'; // import './styles.css';
 
 export function useDeferredColor(key, fallbackValue) {

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

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

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

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

package/build/esm/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,15 +19,12 @@ export var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, forwardedRe
     placement: placement,
     distance: 8,
     __css: _extends({
+      variant: ['text.body-medium', 'text.body-small'],
       bg: alpha('#616161', 0.9),
       color: '#fff',
-      fontSize: [2, 2, 1],
-      fontFamily: 'body',
-      fontWeight: 'regular',
-      lineHeight: [1.2, 1.2, 1.33],
-      px: [3, 3, 2],
-      py: [2, 2, 1],
-      borderRadius: '4px',
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
       zIndex: 'tooltip'
     }, __css)
   }, otherProps));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/Tooltip.tsx"],"names":["Tooltip","_BaseTooltip","Popper","React","forwardRef","Box","alpha","BaseTooltip","props","forwardedRef","placement","__css","otherProps","bg","color","fontSize","fontFamily","fontWeight","lineHeight","px","py","borderRadius","zIndex"],"mappings":";;AACA,SAASA,OAAO,IAAIC,YAApB,EAAkCC,MAAlC,QAAgD,gBAAhD;AAEA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;;AASA,IAAMC,WAIL,GAAGN,YAJJ;AAKA,OAAO,IAAMD,OAAO,gBAAGI,UAAU,CAC/B,SAASJ,OAAT,CAAiBQ,KAAjB,EAAwBC,YAAxB,EAAsC;AAAA,yBACmBD,KADnB,CAC5BE,SAD4B;AAAA,MAC5BA,SAD4B,iCAChB,QADgB;AAAA,MACNC,KADM,GACmBH,KADnB,CACNG,KADM;AAAA,MACIC,UADJ,4BACmBJ,KADnB;;AAGpC,sBACE,KAAC,WAAD;AACE,IAAA,EAAE,EAAEN,MADN;AAEE,IAAA,OAAO,EAAEG,GAFX;AAGE,IAAA,GAAG,EAAEI,YAHP;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,QAAQ,EAAE,CALZ;AAME,IAAA,KAAK;AACHG,MAAAA,EAAE,EAAEP,KAAK,CAAC,SAAD,EAAY,GAAZ,CADN;AAEHQ,MAAAA,KAAK,EAAE,MAFJ;AAGHC,MAAAA,QAAQ,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAHP;AAIHC,MAAAA,UAAU,EAAE,MAJT;AAKHC,MAAAA,UAAU,EAAE,SALT;AAMHC,MAAAA,UAAU,EAAE,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CANT;AAOHC,MAAAA,EAAE,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAPD;AAQHC,MAAAA,EAAE,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CARD;AASHC,MAAAA,YAAY,EAAE,KATX;AAUHC,MAAAA,MAAM,EAAE;AAVL,OAWAX,KAXA;AANP,KAmBMC,UAnBN,EADF;AAuBD,CA3B8B,CAA1B","sourcesContent":["import type { PopperProps } from '@basic-ui/core';\nimport { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';\nimport type { FC } from 'react';\nimport React, { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { alpha } from '../color';\n\nexport interface TooltipProps\n  extends BoxProps,\n    Omit<PopperProps, 'color' | 'anchorEl'> {\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst BaseTooltip: FC<\n  BoxProps & {\n    innerAs?: React.ElementType<any>;\n  } & Omit<PopperProps, 'color' | 'anchorEl'>\n> = _BaseTooltip as any;\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, forwardedRef) {\n    const { placement = 'bottom', __css, ...otherProps } = props;\n\n    return (\n      <BaseTooltip\n        as={Popper}\n        innerAs={Box}\n        ref={forwardedRef}\n        placement={placement}\n        distance={8}\n        __css={{\n          bg: alpha('#616161', 0.9),\n          color: '#fff',\n          fontSize: [2, 2, 1],\n          fontFamily: 'body',\n          fontWeight: 'regular',\n          lineHeight: [1.2, 1.2, 1.33],\n          px: [3, 3, 2],\n          py: [2, 2, 1],\n          borderRadius: '4px',\n          zIndex: 'tooltip',\n          ...__css,\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"Tooltip.js"}
+{"version":3,"sources":["../../../src/Tooltip/Tooltip.tsx"],"names":["Tooltip","_BaseTooltip","Popper","forwardRef","Box","alpha","BaseTooltip","props","forwardedRef","placement","__css","otherProps","variant","bg","color","px","py","borderRadius","zIndex"],"mappings":";;AACA,SAASA,OAAO,IAAIC,YAApB,EAAkCC,MAAlC,QAAgD,gBAAhD;AAEA,SAASC,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;;AASA,IAAMC,WAIL,GAAGL,YAJJ;AAMA,OAAO,IAAMD,OAAO,gBAAGG,UAAU,CAC/B,SAASH,OAAT,CAAiBO,KAAjB,EAAwBC,YAAxB,EAAsC;AAAA,yBACmBD,KADnB,CAC5BE,SAD4B;AAAA,MAC5BA,SAD4B,iCAChB,QADgB;AAAA,MACNC,KADM,GACmBH,KADnB,CACNG,KADM;AAAA,MACIC,UADJ,4BACmBJ,KADnB;;AAGpC,sBACE,KAAC,WAAD;AACE,IAAA,EAAE,EAAEL,MADN;AAEE,IAAA,OAAO,EAAEE,GAFX;AAGE,IAAA,GAAG,EAAEI,YAHP;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,QAAQ,EAAE,CALZ;AAME,IAAA,KAAK;AACHG,MAAAA,OAAO,EAAE,CAAC,kBAAD,EAAqB,iBAArB,CADN;AAEHC,MAAAA,EAAE,EAAER,KAAK,CAAC,SAAD,EAAY,GAAZ,CAFN;AAGHS,MAAAA,KAAK,EAAE,MAHJ;AAIHC,MAAAA,EAAE,EAAE,CAJD;AAKHC,MAAAA,EAAE,EAAE,CALD;AAMHC,MAAAA,YAAY,EAAE,aANX;AAOHC,MAAAA,MAAM,EAAE;AAPL,OAQAR,KARA;AANP,KAgBMC,UAhBN,EADF;AAoBD,CAxB8B,CAA1B","sourcesContent":["import type { PopperProps } from '@basic-ui/core';\nimport { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';\nimport type { ElementType, FC, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { alpha } from '../color';\n\nexport interface TooltipProps\n  extends BoxProps,\n    Omit<PopperProps, 'color' | 'anchorEl'> {\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nconst BaseTooltip: FC<\n  BoxProps & {\n    innerAs?: ElementType<any>;\n  } & Omit<PopperProps, 'color' | 'anchorEl'>\n> = _BaseTooltip as any;\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, forwardedRef) {\n    const { placement = 'bottom', __css, ...otherProps } = props;\n\n    return (\n      <BaseTooltip\n        as={Popper}\n        innerAs={Box}\n        ref={forwardedRef}\n        placement={placement}\n        distance={8}\n        __css={{\n          variant: ['text.body-medium', 'text.body-small'],\n          bg: alpha('#616161', 0.9),\n          color: '#fff',\n          px: 2,\n          py: 1,\n          borderRadius: 'extra-small',\n          zIndex: 'tooltip',\n          ...__css,\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"Tooltip.js"}

package/build/esm/color.d.ts

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

package/build/esm/color.js

@@ -17,11 +17,16 @@ export var alpha = function alpha(colorString, alphaValue) {
     return "rgba(".concat(rgb.red, ",").concat(rgb.green, ",").concat(rgb.blue, ",").concat(alphaValue, ")");
   };
 };
+export function mixColor(baseColor, overlayColor, overlayOpacity) {
+  return function (theme) {
+    baseColor = get(theme, "colors.".concat(baseColor), baseColor);
+    overlayColor = overlayOpacity ? alpha(overlayColor, overlayOpacity)(theme) : get(theme, "colors.".concat(overlayColor), overlayColor);
+    return "linear-gradient(".concat(overlayColor, ", ").concat(overlayColor, "), ").concat(baseColor);
+  };
+}
 export function getColorOverlay(theme, baseColor, overlayColor, overlayOpacity) {
-  baseColor = get(theme, "colors.".concat(baseColor)) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
   return {
-    background: "linear-gradient(".concat(overlayColor, ", ").concat(overlayColor, "), ").concat(baseColor)
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme)
   };
 }
 export function getBackgroundOverlay(theme, backgroundOverlay) {

package/build/esm/color.js.map

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

package/build/esm/index.d.ts

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +34,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/build/esm/index.js

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,6 +34,7 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './ColorMode';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './theme';\nexport * from './color';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './ColorMode';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NavRail';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './motion';\nexport * from './theme';\nexport * from './color';\n"],"file":"index.js"}