@basic-ui/material 1.0.0-alpha.31 → 1.0.0-alpha.33

package/build/esm/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["forwardRef","useState","useRef","useEffect","useId","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultRender","Box","IconContainer","listItemStyle","componentMap","outlined","filled","props","forwardedRef","idProp","id","name","variant","color","valueProp","value","defaultValue","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","otherProps","setState","e","v","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","target","currentTarget","dataset","hasError","Boolean","inputId","helperTextId","undefined","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import type {\n  SelectHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  ComponentType,\n} from 'react';\nimport { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport {\n  wrapEvent,\n  assignMultipleRefs,\n  useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { listItemStyle } from '../ListItem';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nexport interface SelectProps\n  extends Omit<\n    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,\n    'value' | 'defaultValue' | 'onChange'\n  > {\n  variant?: 'outlined' | 'filled';\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  defaultValue?: string;\n  value?: string;\n  native?: boolean;\n  theme?: Theme;\n  error?: boolean | string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n  renderValue?: (value?: string) => string | undefined;\n  leadingIcon?: ReactNode;\n}\n\nexport const Select = forwardRef<\n  HTMLSelectElement | HTMLButtonElement,\n  SelectProps\n>(function Select(props, forwardedRef) {\n  const {\n    id: idProp,\n    name,\n    variant = 'outlined',\n    color = 'primary',\n    value: valueProp,\n    defaultValue = '',\n    disabled,\n    error = false,\n    label = null,\n    placeholder,\n    helperText: helperTextProp,\n    onChange: onChangeProp,\n    onFocus,\n    onBlur,\n    native = false,\n    children,\n    renderValue: renderValueProp,\n    leadingIcon = null,\n    ...otherProps\n  } = props;\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue,\n    (setState) => (e, v) => {\n      setState(v);\n    }\n  );\n  const [hasFocus, setHasFocus] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n  const [open, setOpen] = useState(false);\n  const fallbackId = useId();\n  const theme = useTheme();\n\n  const Container = componentMap[variant] || OutlinedContainer;\n\n  const handleFocus = () => {\n    setHasFocus(true);\n  };\n\n  const handleBlur = () => {\n    setHasFocus(false);\n  };\n\n  const handleToggle = (e: unknown, isOpen: boolean) => {\n    setOpen(isOpen);\n  };\n\n  const handleOnChange = (e: any) => {\n    onChange &&\n      onChange(\n        e as any,\n        native ? e.target.value : e.currentTarget.dataset.value\n      );\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 renderValue = renderValueProp || makeDefaultRender(children);\n\n  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;\n\n  const Comp: ComponentType<any> = native\n    ? (SelectComp as any)\n    : (SelectButton as any);\n\n  useEffect(() => {\n    // right after mounting, if the default value in the select element\n    // is different than the value we have stored in state we need to\n    // update our state to reflect that.\n    if (native && buttonRef.current && buttonRef.current.value !== value) {\n      onChange && onChange({} as any, buttonRef.current.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        {!native && <input type=\"hidden\" name={name} value={value} />}\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          forceActive={open}\n          error={hasError}\n          leadingIcon={Boolean(leadingIcon)}\n        >\n          <Menu onChange={handleToggle} open={open}>\n            {leadingIcon && (\n              <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n            )}\n            <Comp\n              ref={assignMultipleRefs(forwardedRef, buttonRef)}\n              variant={variant}\n              id={inputId}\n              onFocus={wrapEvent(onFocus, handleFocus)}\n              onBlur={wrapEvent(onBlur, handleBlur)}\n              onChange={native ? handleOnChange : undefined}\n              value={native ? value : undefined}\n              theme={theme}\n              placeholder={placeholder}\n              disabled={disabled}\n              aria-disabled={disabled ? 'true' : undefined}\n              aria-describedby={helperTextId}\n              hasLabel={!!label}\n              leadingIcon={Boolean(leadingIcon)}\n              name={native ? name : undefined}\n              trailingIcon={true}\n              {...otherProps}\n            >\n              {native ? children : renderValue(value)}\n            </Comp>\n            {!native && (\n              <MenuPopover usePortal>\n                <MenuList\n                  defaultActiveItemValue={value}\n                  style={{\n                    minWidth: buttonRef?.current?.offsetWidth,\n                  }}\n                  role=\"listbox\"\n                  __css={{\n                    '& [data-menu-item=\"\"]': {\n                      ...listItemStyle('primary'),\n                    },\n                  }}\n                >\n                  {children}\n                </MenuList>\n              </MenuPopover>\n            )}\n          </Menu>\n          <SelectIcon open={open} />\n        </Container>\n\n        <HelperText\n          disabled={disabled}\n          id={helperTextId}\n          leftSide={helperText}\n          error={hasError}\n        />\n      </Box>\n    </SelectProvider>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["forwardRef","useState","useRef","useEffect","useId","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultRender","Box","IconContainer","listItemStyle","componentMap","outlined","filled","props","forwardedRef","idProp","id","name","variant","color","valueProp","value","defaultValue","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","overwrittenContainer","CustomContainer","otherProps","setState","e","v","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","target","currentTarget","dataset","hasError","Boolean","inputId","helperTextId","undefined","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import type {\n  SelectHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  ComponentType,\n} from 'react';\nimport { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport {\n  wrapEvent,\n  assignMultipleRefs,\n  useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport type { FilledContainerProps } from '../TextField/FilledContainer';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { listItemStyle } from '../ListItem';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nexport interface SelectProps\n  extends Omit<\n    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,\n    'value' | 'defaultValue' | 'onChange'\n  > {\n  variant?: 'outlined' | 'filled';\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  defaultValue?: string;\n  value?: string;\n  native?: boolean;\n  theme?: Theme;\n  error?: boolean | string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n  renderValue?: (value?: string) => string | undefined;\n  leadingIcon?: ReactNode;\n  CustomContainer?: ComponentType<FilledContainerProps>;\n}\n\nexport const Select = forwardRef<\n  HTMLSelectElement | HTMLButtonElement,\n  SelectProps\n>(function Select(props, forwardedRef) {\n  const {\n    id: idProp,\n    name,\n    variant = 'outlined',\n    color = 'primary',\n    value: valueProp,\n    defaultValue = '',\n    disabled,\n    error = false,\n    label = null,\n    placeholder,\n    helperText: helperTextProp,\n    onChange: onChangeProp,\n    onFocus,\n    onBlur,\n    native = false,\n    children,\n    renderValue: renderValueProp,\n    leadingIcon = null,\n    CustomContainer: overwrittenContainer,\n    ...otherProps\n  } = props;\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue,\n    (setState) => (e, v) => {\n      setState(v);\n    }\n  );\n  const [hasFocus, setHasFocus] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n  const [open, setOpen] = useState(false);\n  const fallbackId = useId();\n  const theme = useTheme();\n\n  const Container =\n    overwrittenContainer || componentMap[variant] || OutlinedContainer;\n\n  const handleFocus = () => {\n    setHasFocus(true);\n  };\n\n  const handleBlur = () => {\n    setHasFocus(false);\n  };\n\n  const handleToggle = (e: unknown, isOpen: boolean) => {\n    setOpen(isOpen);\n  };\n\n  const handleOnChange = (e: any) => {\n    onChange &&\n      onChange(\n        e as any,\n        native ? e.target.value : e.currentTarget.dataset.value\n      );\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 renderValue = renderValueProp || makeDefaultRender(children);\n\n  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;\n\n  const Comp: ComponentType<any> = native\n    ? (SelectComp as any)\n    : (SelectButton as any);\n\n  useEffect(() => {\n    // right after mounting, if the default value in the select element\n    // is different than the value we have stored in state we need to\n    // update our state to reflect that.\n    if (native && buttonRef.current && buttonRef.current.value !== value) {\n      onChange && onChange({} as any, buttonRef.current.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        {!native && <input type=\"hidden\" name={name} value={value} />}\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled ?? false}\n          forceActive={open}\n          error={hasError}\n          leadingIcon={Boolean(leadingIcon)}\n        >\n          <Menu onChange={handleToggle} open={open}>\n            {leadingIcon && (\n              <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n            )}\n            <Comp\n              ref={assignMultipleRefs(forwardedRef, buttonRef)}\n              variant={variant}\n              id={inputId}\n              onFocus={wrapEvent(onFocus, handleFocus)}\n              onBlur={wrapEvent(onBlur, handleBlur)}\n              onChange={native ? handleOnChange : undefined}\n              value={native ? value : undefined}\n              theme={theme}\n              placeholder={placeholder}\n              disabled={disabled}\n              aria-disabled={disabled ? 'true' : undefined}\n              aria-describedby={helperTextId}\n              hasLabel={!!label}\n              leadingIcon={Boolean(leadingIcon)}\n              name={native ? name : undefined}\n              trailingIcon={true}\n              {...otherProps}\n            >\n              {native ? children : renderValue(value)}\n            </Comp>\n            {!native && (\n              <MenuPopover usePortal>\n                <MenuList\n                  defaultActiveItemValue={value}\n                  style={{\n                    minWidth: buttonRef?.current?.offsetWidth,\n                  }}\n                  role=\"listbox\"\n                  __css={{\n                    '& [data-menu-item=\"\"]': {\n                      ...listItemStyle('primary'),\n                    },\n                  }}\n                >\n                  {children}\n                </MenuList>\n              </MenuPopover>\n            )}\n          </Menu>\n          <SelectIcon open={open} />\n        </Container>\n\n        <HelperText\n          disabled={disabled}\n          id={helperTextId}\n          leftSide={helperText}\n          error={hasError}\n        />\n      </Box>\n    </SelectProvider>\n  );\n});\n"],"mappings":"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"}

package/build/esm/Switch/Switch.d.ts

@@ -10,4 +10,4 @@ export interface SwitchProps extends BoxProps<HTMLInputElement, InputHTMLAttribu
         disabled?: boolean;
     }>;
 }
-export declare const Switch: import("react").ForwardRefExoticComponent<Pick<SwitchProps, "checked" | "disabled" | "form" | "p" | "slot" | "style" | "title" | "pattern" | "__css" | "position" | "width" | "height" | "borderRadius" | "left" | "top" | "role" | "aria-hidden" | "bottom" | "hidden" | "right" | "as" | "sx" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "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" | "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" | "zIndex" | "boxShadow" | "textShadow" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "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-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" | "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" | "icon" | "key"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Switch: import("react").ForwardRefExoticComponent<Pick<SwitchProps, "form" | "p" | "slot" | "style" | "title" | "pattern" | "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" | "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" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "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" | "icon" | "key"> & import("react").RefAttributes<HTMLInputElement>>;

package/build/esm/Switch/Switch.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["as", "disabled", "checked", "onChange", "size", "__css", "icon"],
     _excluded2 = ["as", "icon", "disabled", "children"];
 import { cloneElement, forwardRef } from 'react';
@@ -15,14 +15,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var CheckBoxCore = _CheckBoxCore;
 
-function getSizeCssVariables(size) {
-  var _ref;
+function getSizeCssVariables(size, hasIcon) {
+  var _extends2, _ref;
 
   var multiplier = size === 'small' ? 0.75 : 1;
   var BORDER_WIDTH = 2;
   var TRAIL_WIDTH = 52 * multiplier;
   var TRAIL_HEIGHT = 32 * multiplier;
-  return _ref = {}, _defineProperty(_ref, '--switch-border-width', rem(BORDER_WIDTH)), _defineProperty(_ref, '--switch-trail-width', rem(TRAIL_WIDTH)), _defineProperty(_ref, '--switch-trail-height', rem(TRAIL_HEIGHT)), _defineProperty(_ref, '--switch-icon-size', rem(TRAIL_HEIGHT / 2)), _defineProperty(_ref, '--switch-state-layer-size', rem(40 * multiplier)), _defineProperty(_ref, '--switch-thumb-size-checked-inactive', rem(TRAIL_HEIGHT - BORDER_WIDTH * 4)), _defineProperty(_ref, '--switch-thumb-size-checked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _defineProperty(_ref, '--switch-thumb-size-unchecked-inactive', rem(TRAIL_HEIGHT / 2)), _defineProperty(_ref, '--switch-thumb-size-unchecked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _ref;
+  return _extends((_extends2 = {}, _defineProperty(_extends2, '--switch-border-width', rem(BORDER_WIDTH)), _defineProperty(_extends2, '--switch-trail-width', rem(TRAIL_WIDTH)), _defineProperty(_extends2, '--switch-trail-height', rem(TRAIL_HEIGHT)), _defineProperty(_extends2, '--switch-icon-size', rem(TRAIL_HEIGHT / 2)), _defineProperty(_extends2, '--switch-state-layer-size', rem(40 * multiplier)), _defineProperty(_extends2, '--switch-thumb-size-checked-inactive', rem(TRAIL_HEIGHT - BORDER_WIDTH * 4)), _defineProperty(_extends2, '--switch-thumb-size-checked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _defineProperty(_extends2, '--switch-thumb-size-unchecked-inactive', rem(TRAIL_HEIGHT / 2)), _defineProperty(_extends2, '--switch-thumb-size-unchecked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _extends2), hasIcon && (_ref = {}, _defineProperty(_ref, '--switch-thumb-size-unchecked-inactive', 'var(--switch-thumb-size-checked-inactive)'), _defineProperty(_ref, '--switch-thumb-size-unchecked-active', 'var(--switch-thumb-size-checked-active)'), _ref));
 }
 
 var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedRef) {
@@ -45,7 +45,7 @@ var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedR
     display: "inline-block",
     position: "relative",
     minWidth: "auto",
-    sx: getSizeCssVariables(size),
+    sx: getSizeCssVariables(size, Boolean(icon)),
     children: [/*#__PURE__*/_jsx(SwitchTrail, {
       checked: checked,
       disabled: disabled

package/build/esm/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["cloneElement","forwardRef","CheckBox","_CheckBoxCore","rem","RippleBox","Box","useTheme","SelectionControlLabel","SelectionControlText","SwitchTrail","SwitchThumb","SwitchCircle","CheckBoxCore","getSizeCssVariables","size","multiplier","BORDER_WIDTH","TRAIL_WIDTH","TRAIL_HEIGHT","SwitchInner","props","forwardedRef","as","Comp","disabled","checked","onChange","__css","icon","otherProps","color","theme","top","left","backgroundColor","transform","width","height","appearance","outline","border","borderRadius","zIndex","position","Switch","children","inner"],"sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';\nimport { cloneElement, forwardRef } from 'react';\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\nimport { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';\n\nconst CheckBoxCore: FC<\n  SwitchProps & {\n    innerAs?: ElementType<any>;\n  }\n> = _CheckBoxCore as any;\n\nexport interface SwitchProps\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\n  as?: ElementType<any>;\n  checked?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'default';\n  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;\n}\n\nfunction getSizeCssVariables(size: 'small' | 'default') {\n  const multiplier = size === 'small' ? 0.75 : 1;\n  const BORDER_WIDTH = 2;\n  const TRAIL_WIDTH = 52 * multiplier;\n  const TRAIL_HEIGHT = 32 * multiplier;\n  return {\n    ['--switch-border-width']: rem(BORDER_WIDTH),\n    ['--switch-trail-width']: rem(TRAIL_WIDTH),\n    ['--switch-trail-height']: rem(TRAIL_HEIGHT),\n    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),\n    ['--switch-state-layer-size']: rem(40 * multiplier),\n    ['--switch-thumb-size-checked-inactive']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 4\n    ),\n    ['--switch-thumb-size-checked-active']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\n    ),\n    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),\n    ['--switch-thumb-size-unchecked-active']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\n    ),\n  };\n}\n\nconst SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(\n  function SwitchInner(props, forwardedRef) {\n    const {\n      as: Comp = 'input',\n      disabled,\n      checked,\n      onChange,\n      size = 'default',\n      __css,\n      icon,\n      ...otherProps\n    } = props;\n    const color = checked ? 'primary' : 'on.surface';\n    const theme = useTheme();\n\n    return (\n      <Box\n        display=\"inline-block\"\n        position=\"relative\"\n        minWidth=\"auto\"\n        sx={getSizeCssVariables(size)}\n      >\n        <SwitchTrail checked={checked} disabled={disabled} />\n        <SwitchThumb checked={checked}>\n          <RippleBox<\n            RippleBoxProps<\n              HTMLInputElement,\n              InputHTMLAttributes<HTMLInputElement>\n            >\n          >\n            as={Comp}\n            role=\"switch\"\n            type=\"checkbox\"\n            checked={checked}\n            onChange={onChange}\n            theme={theme}\n            ref={forwardedRef}\n            aria-checked={checked ? 'true' : 'false'}\n            rippleColor={color}\n            baseOpacity={0}\n            hoverOpacity={0.04}\n            focusOpacity={0.12}\n            center={true}\n            disabled={disabled}\n            data-switch-thumb=\"\"\n            {...otherProps}\n            __css={{\n              top: '50%',\n              left: '50%',\n              backgroundColor: 'transparent',\n              transform: 'translate(-50%, -50%)',\n              width: '100%',\n              height: '100%',\n              appearance: 'none',\n              ':focus': {\n                outline: 'none',\n              },\n              border: 'none',\n              borderRadius: 'full',\n              zIndex: 1,\n              position: 'absolute',\n              ...__css,\n            }}\n          />\n          <SwitchCircle checked={checked}>\n            {icon\n              ? cloneElement(icon, {\n                  checked,\n                  ['data-checkbox-icon' as any]: '',\n                  disabled,\n                })\n              : null}\n          </SwitchCircle>\n        </SwitchThumb>\n      </Box>\n    );\n  }\n);\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  props,\n  forwardedRef\n) {\n  const { as = 'input', icon, disabled, children, ...otherProps } = props;\n\n  const inner = (\n    <CheckBoxCore\n      as={SwitchInner}\n      innerAs={as}\n      ref={forwardedRef}\n      icon={icon}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n\n  if (!children) {\n    return inner;\n  }\n\n  return (\n    <SelectionControlLabel>\n      {inner}\n      <SelectionControlText disabled={disabled}>\n        {children}\n      </SelectionControlText>\n    </SelectionControlLabel>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["cloneElement","forwardRef","CheckBox","_CheckBoxCore","rem","RippleBox","Box","useTheme","SelectionControlLabel","SelectionControlText","SwitchTrail","SwitchThumb","SwitchCircle","CheckBoxCore","getSizeCssVariables","size","hasIcon","multiplier","BORDER_WIDTH","TRAIL_WIDTH","TRAIL_HEIGHT","SwitchInner","props","forwardedRef","as","Comp","disabled","checked","onChange","__css","icon","otherProps","color","theme","Boolean","top","left","backgroundColor","transform","width","height","appearance","outline","border","borderRadius","zIndex","position","Switch","children","inner"],"sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';\nimport { cloneElement, forwardRef } from 'react';\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\nimport { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';\n\nconst CheckBoxCore: FC<\n  SwitchProps & {\n    innerAs?: ElementType<any>;\n  }\n> = _CheckBoxCore as any;\n\nexport interface SwitchProps\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\n  as?: ElementType<any>;\n  checked?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'default';\n  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;\n}\n\nfunction getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {\n  const multiplier = size === 'small' ? 0.75 : 1;\n  const BORDER_WIDTH = 2;\n  const TRAIL_WIDTH = 52 * multiplier;\n  const TRAIL_HEIGHT = 32 * multiplier;\n  return {\n    ['--switch-border-width']: rem(BORDER_WIDTH),\n    ['--switch-trail-width']: rem(TRAIL_WIDTH),\n    ['--switch-trail-height']: rem(TRAIL_HEIGHT),\n    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),\n    ['--switch-state-layer-size']: rem(40 * multiplier),\n    ['--switch-thumb-size-checked-inactive']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 4\n    ),\n    ['--switch-thumb-size-checked-active']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\n    ),\n    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),\n    ['--switch-thumb-size-unchecked-active']: rem(\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\n    ),\n    ...(hasIcon && {\n      ['--switch-thumb-size-unchecked-inactive']:\n        'var(--switch-thumb-size-checked-inactive)',\n      ['--switch-thumb-size-unchecked-active']:\n        'var(--switch-thumb-size-checked-active)',\n    }),\n  };\n}\n\nconst SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(\n  function SwitchInner(props, forwardedRef) {\n    const {\n      as: Comp = 'input',\n      disabled,\n      checked,\n      onChange,\n      size = 'default',\n      __css,\n      icon,\n      ...otherProps\n    } = props;\n    const color = checked ? 'primary' : 'on.surface';\n    const theme = useTheme();\n\n    return (\n      <Box\n        display=\"inline-block\"\n        position=\"relative\"\n        minWidth=\"auto\"\n        sx={getSizeCssVariables(size, Boolean(icon))}\n      >\n        <SwitchTrail checked={checked} disabled={disabled} />\n        <SwitchThumb checked={checked}>\n          <RippleBox<\n            RippleBoxProps<\n              HTMLInputElement,\n              InputHTMLAttributes<HTMLInputElement>\n            >\n          >\n            as={Comp}\n            role=\"switch\"\n            type=\"checkbox\"\n            checked={checked}\n            onChange={onChange}\n            theme={theme}\n            ref={forwardedRef}\n            aria-checked={checked ? 'true' : 'false'}\n            rippleColor={color}\n            baseOpacity={0}\n            hoverOpacity={0.04}\n            focusOpacity={0.12}\n            center={true}\n            disabled={disabled}\n            data-switch-thumb=\"\"\n            {...otherProps}\n            __css={{\n              top: '50%',\n              left: '50%',\n              backgroundColor: 'transparent',\n              transform: 'translate(-50%, -50%)',\n              width: '100%',\n              height: '100%',\n              appearance: 'none',\n              ':focus': {\n                outline: 'none',\n              },\n              border: 'none',\n              borderRadius: 'full',\n              zIndex: 1,\n              position: 'absolute',\n              ...__css,\n            }}\n          />\n          <SwitchCircle checked={checked}>\n            {icon\n              ? cloneElement(icon, {\n                  checked,\n                  ['data-checkbox-icon' as any]: '',\n                  disabled,\n                })\n              : null}\n          </SwitchCircle>\n        </SwitchThumb>\n      </Box>\n    );\n  }\n);\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  props,\n  forwardedRef\n) {\n  const { as = 'input', icon, disabled, children, ...otherProps } = props;\n\n  const inner = (\n    <CheckBoxCore\n      as={SwitchInner}\n      innerAs={as}\n      ref={forwardedRef}\n      icon={icon}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n\n  if (!children) {\n    return inner;\n  }\n\n  return (\n    <SelectionControlLabel>\n      {inner}\n      <SelectionControlText disabled={disabled}>\n        {children}\n      </SelectionControlText>\n    </SelectionControlLabel>\n  );\n});\n"],"mappings":"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"}

package/build/esm/Table/TableHead.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { TableBodyProps } from './TableBody';
 export declare type TableHeadProps = TableBodyProps;
-export declare const TableHead: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "slot" | "style" | "title" | "role" | "aria-hidden" | "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "placeholder" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "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-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" | "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"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TableHead: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "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" | "key"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
 import type { BoxProps } from '../Box';
+export declare const FilledContainerOverlay: (props: {
+    forceActive?: boolean;
+}) => JSX.Element;
 export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
     children?: ReactNode;
     color?: string;
@@ -12,4 +15,4 @@ export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
     forceActive?: boolean;
     leadingIcon?: boolean;
 }
-export declare const FilledContainer: import("react").ForwardRefExoticComponent<Pick<FilledContainerProps, "label" | "p" | "slot" | "style" | "title" | "as" | "fontFamily" | "fontSize" | "children" | "error" | "background" | "bottom" | "top" | "hidden" | "left" | "right" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "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" | "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" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "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" | "disabled" | "leadingIcon" | "hasFocus" | "labelIsFloating" | "inputId" | "forceActive"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FilledContainer: import("react").ForwardRefExoticComponent<Pick<FilledContainerProps, "disabled" | "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" | "key" | "hasFocus" | "label" | "labelIsFloating" | "inputId" | "error" | "forceActive" | "leadingIcon"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/TextField/FilledContainer.js

@@ -14,10 +14,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var makeSelector = function makeSelector(state) {
-  return "input:".concat(state, " ~ &,") + "select:".concat(state, " ~ &,") + "button:".concat(state, " ~ &,") + "textarea:".concat(state, " ~ &");
+  return "input:".concat(state, " ~ &,") + "select:".concat(state, " ~ &,") + "button:".concat(state, " ~ &,") + "textarea:".concat(state, " ~ &,") + "[role=\"button\"]:".concat(state, " ~ &");
 };
 
-var Overlay = function Overlay(props) {
+export var FilledContainerOverlay = function FilledContainerOverlay(props) {
   var _extends2;
 
   var forceActive = props.forceActive;
@@ -46,7 +46,7 @@ var Overlay = function Overlay(props) {
   });
 };
 
-var BorderBottom = function BorderBottom() {
+var FilledContainerBorderBottom = function FilledContainerBorderBottom() {
   return /*#__PURE__*/_jsx(Box, {
     __css: _defineProperty({
       position: 'absolute',
@@ -117,9 +117,9 @@ export var FilledContainer = /*#__PURE__*/forwardRef(function FilledContainer(pr
       htmlFor: inputId,
       color: active || error ? color : undefined,
       children: label
-    }), children, /*#__PURE__*/_jsx(Overlay, {
+    }), children, /*#__PURE__*/_jsx(FilledContainerOverlay, {
       forceActive: active
-    }), /*#__PURE__*/_jsx(BorderBottom, {}), /*#__PURE__*/_jsx(LineRipple, {
+    }), /*#__PURE__*/_jsx(FilledContainerBorderBottom, {}), /*#__PURE__*/_jsx(LineRipple, {
       active: active || error,
       color: color
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"FilledContainer.js","names":["forwardRef","get","useTheme","FloatingLabel","LineRipple","alpha","Box","ICON_WIDTH","PADDING_LEFT_WITHOUT_ICON","PADDING_LEFT_WITH_ICON","makeSelector","state","Overlay","props","forceActive","theme","position","top","bottom","left","right","backgroundColor","pointerEvents","opacity","cursor","color","BorderBottom","width","height","FilledContainer","forwardedRef","label","labelIsFloating","inputId","hasFocus","colorProp","children","error","disabled","leadingIcon","otherProps","finalLabelHeight","labelHeight","inputHeight","active","lineHeight","overflow","boxSizing","borderTopRightRadius","borderTopLeftRadius","undefined"],"sources":["../../../src/TextField/FilledContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { get } from '@styled-system/css';\nimport { rem } from 'polished';\n\nimport { useTheme } from '../theme';\nimport { FloatingLabel } from '../FloatingLabel';\nimport { LineRipple } from '../LineRipple';\nimport { alpha } from '../color';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport {\n  ICON_WIDTH,\n  PADDING_LEFT_WITHOUT_ICON,\n  PADDING_LEFT_WITH_ICON,\n} from './consts';\n\nconst makeSelector = (\n  state:\n    | 'hover:not([disabled]):not(:focus)'\n    | 'focus:not([disabled])'\n    | 'disabled'\n) =>\n  `input:${state} ~ &,` +\n  `select:${state} ~ &,` +\n  `button:${state} ~ &,` +\n  `textarea:${state} ~ &`;\n\nconst Overlay = (props: { forceActive?: boolean }) => {\n  const { forceActive } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      __css={{\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        backgroundColor: 'on.surface',\n        pointerEvents: 'none',\n        opacity: 0,\n        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {\n          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),\n        },\n        [makeSelector('focus:not([disabled])')]: {\n          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n        },\n        [makeSelector('disabled')]: {\n          cursor: 'default',\n          color: alpha('on.surface', 0.6),\n          opacity: 0.02,\n        },\n        ...(forceActive && {\n          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n        }),\n      }}\n    />\n  );\n};\n\nconst BorderBottom = () => (\n  <Box\n    __css={{\n      position: 'absolute',\n      bottom: 0,\n      left: 0,\n      width: '100%',\n      height: rem(1),\n      backgroundColor: alpha('on.surface', 0.6),\n      pointerEvents: 'none',\n      [makeSelector('disabled')]: {\n        backgroundColor: 'transparent',\n      },\n    }}\n  />\n);\n\nexport interface FilledContainerProps extends Omit<BoxProps, 'color'> {\n  children?: ReactNode;\n  color?: string;\n  hasFocus?: boolean;\n  label?: ReactNode;\n  labelIsFloating: boolean;\n  inputId: string;\n  error?: boolean;\n  disabled?: boolean;\n  forceActive?: boolean;\n  leadingIcon?: boolean;\n}\n\nexport const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(\n  function FilledContainer(props, forwardedRef) {\n    const {\n      label,\n      labelIsFloating,\n      inputId,\n      hasFocus,\n      color: colorProp,\n      children,\n      error = false,\n      disabled = false,\n      forceActive = false,\n      leadingIcon,\n      ...otherProps\n    } = props;\n\n    const finalLabelHeight = 16;\n    const labelHeight = finalLabelHeight / 0.75;\n    const inputHeight = 56;\n\n    const color = error ? 'error' : colorProp;\n    const active = hasFocus || forceActive;\n\n    return (\n      <Box\n        ref={forwardedRef}\n        disabled={disabled}\n        active={active || error}\n        __css={{\n          position: 'relative',\n          lineHeight: 0,\n          width: '100%',\n          backgroundColor: 'surface-variant',\n          overflow: 'hidden',\n          boxSizing: 'border-box',\n          borderTopRightRadius: rem(4),\n          borderTopLeftRadius: rem(4),\n          color: alpha('on.surface-variant', 0.87),\n          ...(disabled && {\n            backgroundColor: alpha('on.surface-variant', 0.08),\n            color: alpha('on.surface-variant', 0.38),\n          }),\n          ...(active && { color: 'primary' }),\n        }}\n        {...otherProps}\n      >\n        {label && (\n          <FloatingLabel\n            height={inputHeight}\n            offsetX={\n              leadingIcon\n                ? PADDING_LEFT_WITH_ICON +\n                  ICON_WIDTH +\n                  PADDING_LEFT_WITHOUT_ICON\n                : PADDING_LEFT_WITHOUT_ICON\n            }\n            translateX={0}\n            translateY={\n              // To debug, delete these lines one by one to see it doing its work\n              -(inputHeight * 0.5) + // Put it at the top, crossing middle label\n              labelHeight * 0.75 * 0.5 + // Put it at position 0\n              8 // Add a 8px padding to the top\n            }\n            active={labelIsFloating}\n            htmlFor={inputId}\n            color={active || error ? color : undefined}\n          >\n            {label}\n          </FloatingLabel>\n        )}\n\n        {children}\n\n        <Overlay forceActive={active} />\n        <BorderBottom />\n        <LineRipple active={active || error} color={color} />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"FilledContainer.js","names":["forwardRef","get","useTheme","FloatingLabel","LineRipple","alpha","Box","ICON_WIDTH","PADDING_LEFT_WITHOUT_ICON","PADDING_LEFT_WITH_ICON","makeSelector","state","FilledContainerOverlay","props","forceActive","theme","position","top","bottom","left","right","backgroundColor","pointerEvents","opacity","cursor","color","FilledContainerBorderBottom","width","height","FilledContainer","forwardedRef","label","labelIsFloating","inputId","hasFocus","colorProp","children","error","disabled","leadingIcon","otherProps","finalLabelHeight","labelHeight","inputHeight","active","lineHeight","overflow","boxSizing","borderTopRightRadius","borderTopLeftRadius","undefined"],"sources":["../../../src/TextField/FilledContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { get } from '@styled-system/css';\nimport { rem } from 'polished';\n\nimport { useTheme } from '../theme';\nimport { FloatingLabel } from '../FloatingLabel';\nimport { LineRipple } from '../LineRipple';\nimport { alpha } from '../color';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport {\n  ICON_WIDTH,\n  PADDING_LEFT_WITHOUT_ICON,\n  PADDING_LEFT_WITH_ICON,\n} from './consts';\n\nconst makeSelector = (\n  state:\n    | 'hover:not([disabled]):not(:focus)'\n    | 'focus:not([disabled])'\n    | 'disabled'\n) =>\n  `input:${state} ~ &,` +\n  `select:${state} ~ &,` +\n  `button:${state} ~ &,` +\n  `textarea:${state} ~ &,` +\n  `[role=\"button\"]:${state} ~ &`;\n\nexport const FilledContainerOverlay = (props: { forceActive?: boolean }) => {\n  const { forceActive } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      __css={{\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        backgroundColor: 'on.surface',\n        pointerEvents: 'none',\n        opacity: 0,\n        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {\n          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),\n        },\n        [makeSelector('focus:not([disabled])')]: {\n          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n        },\n        [makeSelector('disabled')]: {\n          cursor: 'default',\n          color: alpha('on.surface', 0.6),\n          opacity: 0.02,\n        },\n        ...(forceActive && {\n          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n        }),\n      }}\n    />\n  );\n};\n\nconst FilledContainerBorderBottom = () => (\n  <Box\n    __css={{\n      position: 'absolute',\n      bottom: 0,\n      left: 0,\n      width: '100%',\n      height: rem(1),\n      backgroundColor: alpha('on.surface', 0.6),\n      pointerEvents: 'none',\n      [makeSelector('disabled')]: {\n        backgroundColor: 'transparent',\n      },\n    }}\n  />\n);\n\nexport interface FilledContainerProps extends Omit<BoxProps, 'color'> {\n  children?: ReactNode;\n  color?: string;\n  hasFocus?: boolean;\n  label?: ReactNode;\n  labelIsFloating: boolean;\n  inputId: string;\n  error?: boolean;\n  disabled?: boolean;\n  forceActive?: boolean;\n  leadingIcon?: boolean;\n}\n\nexport const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(\n  function FilledContainer(props, forwardedRef) {\n    const {\n      label,\n      labelIsFloating,\n      inputId,\n      hasFocus,\n      color: colorProp,\n      children,\n      error = false,\n      disabled = false,\n      forceActive = false,\n      leadingIcon,\n      ...otherProps\n    } = props;\n\n    const finalLabelHeight = 16;\n    const labelHeight = finalLabelHeight / 0.75;\n    const inputHeight = 56;\n\n    const color = error ? 'error' : colorProp;\n    const active = hasFocus || forceActive;\n\n    return (\n      <Box\n        ref={forwardedRef}\n        disabled={disabled}\n        active={active || error}\n        __css={{\n          position: 'relative',\n          lineHeight: 0,\n          width: '100%',\n          backgroundColor: 'surface-variant',\n          overflow: 'hidden',\n          boxSizing: 'border-box',\n          borderTopRightRadius: rem(4),\n          borderTopLeftRadius: rem(4),\n          color: alpha('on.surface-variant', 0.87),\n          ...(disabled && {\n            backgroundColor: alpha('on.surface-variant', 0.08),\n            color: alpha('on.surface-variant', 0.38),\n          }),\n          ...(active && { color: 'primary' }),\n        }}\n        {...otherProps}\n      >\n        {label && (\n          <FloatingLabel\n            height={inputHeight}\n            offsetX={\n              leadingIcon\n                ? PADDING_LEFT_WITH_ICON +\n                  ICON_WIDTH +\n                  PADDING_LEFT_WITHOUT_ICON\n                : PADDING_LEFT_WITHOUT_ICON\n            }\n            translateX={0}\n            translateY={\n              // To debug, delete these lines one by one to see it doing its work\n              -(inputHeight * 0.5) + // Put it at the top, crossing middle label\n              labelHeight * 0.75 * 0.5 + // Put it at position 0\n              8 // Add a 8px padding to the top\n            }\n            active={labelIsFloating}\n            htmlFor={inputId}\n            color={active || error ? color : undefined}\n          >\n            {label}\n          </FloatingLabel>\n        )}\n\n        {children}\n\n        <FilledContainerOverlay forceActive={active} />\n        <FilledContainerBorderBottom />\n        <LineRipple active={active || error} color={color} />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}

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

@@ -16,4 +16,4 @@ export declare type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'>
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 };
-export declare const TextField: import("react").ForwardRefExoticComponent<Pick<TextFieldProps, "form" | "label" | "p" | "slot" | "style" | "title" | "pattern" | "as" | "fontFamily" | "fontSize" | "children" | "error" | "background" | "bottom" | "top" | "hidden" | "left" | "right" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "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" | "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" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "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" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "multiple" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "enterKeyHint" | "readOnly" | "required" | "multiline" | "hasLabel" | "leadingIcon" | "trailingIcon" | "containerProps" | "helperText" | "hideCharacterCounter"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "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" | "key" | "label" | "error" | "leadingIcon" | "form" | "pattern" | "list" | "step" | "autoComplete" | "autoFocus" | "multiple" | "name" | "required" | "value" | "helperText" | "hasLabel" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "type" | "max" | "min" | "crossOrigin" | "accept" | "alt" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "src" | "multiline" | "trailingIcon" | "containerProps" | "hideCharacterCounter"> & import("react").RefAttributes<HTMLInputElement>>;

package/build/esm/ThemeExplorer/ThemeBuilder.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useMemo, useEffect } from 'react';
-import { CorePalette, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
+import { argbFromHex, hexFromArgb, TonalPalette, HCT } from '@material/material-color-utilities';
 import { toColor } from '@basic-ui/color-picker';
 import { THEME_OVERRIDE_STORAGE_KEY, injectThemeOverride, transformTheme, loadGoogleFont } from '@basic-ui/dynamic-theme';
 import { rem } from 'polished';
@@ -88,7 +88,18 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       setPrimaryColor = _useLocalStorageCache16[1];
 
   var _useMemo = useMemo(function () {
-    return CorePalette.of(argbFromHex(primaryColor.hex));
+    /* This is from CorePalette.of(...) */
+    var argb = argbFromHex(primaryColor.hex);
+    var hct = HCT.fromInt(argb);
+    var hue = hct.hue;
+    return {
+      a1: TonalPalette.fromHueAndChroma(hue, Math.max(48, hct.chroma)),
+      a2: TonalPalette.fromHueAndChroma(hue, 16),
+      a3: TonalPalette.fromHueAndChroma(hue + 60, 24),
+      n1: TonalPalette.fromHueAndChroma(hue, 6),
+      n2: TonalPalette.fromHueAndChroma(hue, 8),
+      error: TonalPalette.fromHueAndChroma(25, 84)
+    };
   }, [primaryColor.hex]),
       a1 = _useMemo.a1,
       a2 = _useMemo.a2,