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

package/build/esm/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Paper/Paper.tsx"],"names":["forwardRef","React","Box","useTheme","alpha","getBackgroundOverlay","getDarkThemeBackgroundOverlay","Paper","props","forwardedRef","outlined","elevation","backgroundOverlay","darkThemeBackgroundOverlay","__css","children","otherProps","theme","backgroundColor","boxShadow","String","outline","borderStyle","borderWidth","borderColor"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAIA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SACEC,KADF,EAEEC,oBAFF,EAGEC,6BAHF,QAIO,UAJP;;AAeA,OAAO,IAAMC,KAAK,gBAAGP,UAAU,CAA6B,SAASO,KAAT,CAC1DC,KAD0D,EAE1DC,YAF0D,EAG1D;AAAA,MAEEC,QAFF,GASIF,KATJ,CAEEE,QAFF;AAAA,yBASIF,KATJ,CAGEG,SAHF;AAAA,MAGEA,SAHF,iCAGc,CAHd;AAAA,MAIEC,iBAJF,GASIJ,KATJ,CAIEI,iBAJF;AAAA,MAKEC,0BALF,GASIL,KATJ,CAKEK,0BALF;AAAA,qBASIL,KATJ,CAMEM,KANF;AAAA,MAMEA,KANF,6BAMU,EANV;AAAA,MAOEC,QAPF,GASIP,KATJ,CAOEO,QAPF;AAAA,MAQKC,UARL,4BASIR,KATJ;;AAUA,MAAMS,KAAK,GAAGd,QAAQ,EAAtB;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,GAAG,EAAEM,YADP;AAEE,IAAA,KAAK;AACHS,MAAAA,eAAe,EAAE,SADd;AAEHC,MAAAA,SAAS,EAAEC,MAAM,CAACT,SAAD,CAFd;AAGH,gBAAU;AACRU,QAAAA,OAAO,EAAE;AADD;AAHP,OAMCX,QAAQ,GACR;AACEY,MAAAA,WAAW,EAAE,OADf;AAEEC,MAAAA,WAAW,aAFb;AAGEC,MAAAA,WAAW,EAAEpB,KAAK,CAAC,YAAD,EAAe,IAAf;AAHpB,KADQ,GAMR,EAZD,EAaCQ,iBAAiB,GACjBP,oBAAoB,CAACY,KAAD,EAAQL,iBAAR,EAA2B,SAA3B,CADH,GAEjB,EAfD,EAgBCC,0BAA0B,GAC1BP,6BAA6B,CAC3BW,KAD2B,EAE3BJ,0BAF2B,EAG3B,SAH2B,CADH,GAM1B,EAtBD,EAuBAC,KAvBA;AAFP,KA2BME,UA3BN;AAAA,cA6BGD;AA7BH,KADF;AAiCD,CAhD8B,CAAxB","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport {\n  alpha,\n  getBackgroundOverlay,\n  getDarkThemeBackgroundOverlay,\n} from '../color';\n\nexport interface PaperProps extends BoxProps {\n  as?: React.ElementType<any>;\n  elevation?: number;\n  outlined?: boolean;\n  backgroundOverlay?: number | string;\n  darkThemeBackgroundOverlay?: number | string;\n  children?: React.ReactNode;\n}\n\nexport const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(\n  props,\n  forwardedRef\n) {\n  const {\n    outlined,\n    elevation = 0,\n    backgroundOverlay,\n    darkThemeBackgroundOverlay,\n    __css = {},\n    children,\n    ...otherProps\n  } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      ref={forwardedRef}\n      __css={{\n        backgroundColor: 'surface',\n        boxShadow: String(elevation),\n        ':focus': {\n          outline: 'none',\n        },\n        ...(outlined\n          ? {\n              borderStyle: 'solid',\n              borderWidth: rem(1),\n              borderColor: alpha('on.surface', 0.12),\n            }\n          : {}),\n        ...(backgroundOverlay\n          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')\n          : {}),\n        ...(darkThemeBackgroundOverlay\n          ? getDarkThemeBackgroundOverlay(\n              theme,\n              darkThemeBackgroundOverlay,\n              'primary'\n            )\n          : {}),\n        ...__css,\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"file":"Paper.js"}
+{"version":3,"sources":["../../../src/Paper/Paper.tsx"],"names":["forwardRef","Box","useTheme","alpha","getBackgroundOverlay","getDarkThemeBackgroundOverlay","Paper","props","forwardedRef","outlined","elevation","backgroundOverlay","darkThemeBackgroundOverlay","__css","children","otherProps","theme","backgroundColor","boxShadow","String","outline","borderStyle","borderWidth","borderColor"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AAIA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SACEC,KADF,EAEEC,oBAFF,EAGEC,6BAHF,QAIO,UAJP;;AAeA,OAAO,IAAMC,KAAK,gBAAGN,UAAU,CAA6B,SAASM,KAAT,CAC1DC,KAD0D,EAE1DC,YAF0D,EAG1D;AAAA,MAEEC,QAFF,GASIF,KATJ,CAEEE,QAFF;AAAA,yBASIF,KATJ,CAGEG,SAHF;AAAA,MAGEA,SAHF,iCAGc,CAHd;AAAA,MAIEC,iBAJF,GASIJ,KATJ,CAIEI,iBAJF;AAAA,MAKEC,0BALF,GASIL,KATJ,CAKEK,0BALF;AAAA,qBASIL,KATJ,CAMEM,KANF;AAAA,MAMEA,KANF,6BAMU,EANV;AAAA,MAOEC,QAPF,GASIP,KATJ,CAOEO,QAPF;AAAA,MAQKC,UARL,4BASIR,KATJ;;AAUA,MAAMS,KAAK,GAAGd,QAAQ,EAAtB;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,GAAG,EAAEM,YADP;AAEE,IAAA,KAAK;AACHS,MAAAA,eAAe,EAAE,SADd;AAEHC,MAAAA,SAAS,EAAEC,MAAM,CAACT,SAAD,CAFd;AAGH,gBAAU;AACRU,QAAAA,OAAO,EAAE;AADD;AAHP,OAMCX,QAAQ,GACR;AACEY,MAAAA,WAAW,EAAE,OADf;AAEEC,MAAAA,WAAW,aAFb;AAGEC,MAAAA,WAAW,EAAEpB,KAAK,CAAC,YAAD,EAAe,IAAf;AAHpB,KADQ,GAMR,EAZD,EAaCQ,iBAAiB,GACjBP,oBAAoB,CAACY,KAAD,EAAQL,iBAAR,EAA2B,SAA3B,CADH,GAEjB,EAfD,EAgBCC,0BAA0B,GAC1BP,6BAA6B,CAC3BW,KAD2B,EAE3BJ,0BAF2B,EAG3B,SAH2B,CADH,GAM1B,EAtBD,EAuBAC,KAvBA;AAFP,KA2BME,UA3BN;AAAA,cA6BGD;AA7BH,KADF;AAiCD,CAhD8B,CAAxB","sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport {\n  alpha,\n  getBackgroundOverlay,\n  getDarkThemeBackgroundOverlay,\n} from '../color';\n\nexport interface PaperProps extends BoxProps {\n  as?: ElementType<any>;\n  elevation?: number;\n  outlined?: boolean;\n  backgroundOverlay?: number | string;\n  darkThemeBackgroundOverlay?: number | string;\n  children?: ReactNode;\n}\n\nexport const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(\n  props,\n  forwardedRef\n) {\n  const {\n    outlined,\n    elevation = 0,\n    backgroundOverlay,\n    darkThemeBackgroundOverlay,\n    __css = {},\n    children,\n    ...otherProps\n  } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      ref={forwardedRef}\n      __css={{\n        backgroundColor: 'surface',\n        boxShadow: String(elevation),\n        ':focus': {\n          outline: 'none',\n        },\n        ...(outlined\n          ? {\n              borderStyle: 'solid',\n              borderWidth: rem(1),\n              borderColor: alpha('on.surface', 0.12),\n            }\n          : {}),\n        ...(backgroundOverlay\n          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')\n          : {}),\n        ...(darkThemeBackgroundOverlay\n          ? getDarkThemeBackgroundOverlay(\n              theme,\n              darkThemeBackgroundOverlay,\n              'primary'\n            )\n          : {}),\n        ...__css,\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"file":"Paper.js"}

package/build/esm/ProgressSpinner/ProgressSpinner.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { keyframes } from '@emotion/react';
 import { rem } from 'polished';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 import { jsx as _jsx } from "react/jsx-runtime";
 var innerDivRotate = keyframes({
   '0%': {
@@ -79,7 +80,7 @@ export var ProgressSpinner = /*#__PURE__*/forwardRef(function ProgressSpinner(pr
             strokeDasharray: '80px, 200px',
             strokeDashoffset: '0px'
           } : {
-            transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+            transition: "stroke-dashoffset 300ms ".concat(EASING_STANDARD, " 0ms"),
             strokeDasharray: circumference.toFixed(3)
           }
         })

package/build/esm/ProgressSpinner/ProgressSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ProgressSpinner/ProgressSpinner.tsx"],"names":["forwardRef","keyframes","rem","Box","innerDivRotate","transformOrigin","transform","circleIndeterminate","strokeDasharray","strokeDashoffset","SIZE","ProgressSpinner","props","forwardedRef","__css","progressProp","progress","thickness","size","otherProps","indeterminate","undefined","circumference","Math","PI","color","display","width","height","animation","toFixed","transition"],"mappings":"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","sourcesContent":["import type { SVGAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { keyframes } from '@emotion/react';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type ProgressSpinnerProps = BoxProps & {\n  progress?: number;\n  thickness?: number;\n  size?: number;\n};\n\nconst innerDivRotate = keyframes({\n  '0%': {\n    transformOrigin: '50% 50%',\n  },\n  '100%': {\n    transform: 'rotate(360deg)',\n  },\n});\n\nconst circleIndeterminate = keyframes({\n  '0%': {\n    strokeDasharray: '1px, 200px',\n    strokeDashoffset: '0px',\n  },\n  '50%': {\n    strokeDasharray: '100px, 200px',\n    strokeDashoffset: '-15px',\n  },\n  '100%': {\n    strokeDasharray: '100px, 200px',\n    strokeDashoffset: '-125px',\n  },\n});\n\nconst SIZE = 44;\n\nexport const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(\n  function ProgressSpinner(props, forwardedRef) {\n    const {\n      __css,\n      progress: progressProp,\n      thickness = 3.6,\n      size = 40,\n      ...otherProps\n    } = props;\n\n    const indeterminate = progressProp === undefined;\n    const progress = progressProp ?? 0;\n\n    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);\n    return (\n      <Box\n        ref={forwardedRef}\n        {...otherProps}\n        __css={{\n          color: 'primary',\n          display: 'inline-block',\n          width: rem(size),\n          height: rem(size),\n          ...__css,\n        }}\n      >\n        <Box\n          __css={{\n            display: 'inline-block',\n            width: '100%',\n            height: '100%',\n            ...(indeterminate\n              ? { animation: `${innerDivRotate} 1.4s linear infinite` }\n              : { transform: 'rotate(-90deg)' }),\n          }}\n        >\n          <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>\n            as=\"svg\"\n            viewBox=\"22 22 44 44\"\n            display=\"block\"\n          >\n            <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>\n              as=\"circle\"\n              stroke=\"currentColor\"\n              cx={SIZE}\n              cy={SIZE}\n              r={(SIZE - thickness) / 2}\n              fill=\"none\"\n              strokeWidth={thickness}\n              style={\n                indeterminate\n                  ? {}\n                  : {\n                      strokeDashoffset: `${(\n                        ((100 - progress) / 100) *\n                        circumference\n                      ).toFixed(3)}px`,\n                    }\n              }\n              __css={\n                indeterminate\n                  ? {\n                      animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,\n                      strokeDasharray: '80px, 200px',\n                      strokeDashoffset: '0px',\n                    }\n                  : {\n                      transition:\n                        'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n                      strokeDasharray: circumference.toFixed(3),\n                    }\n              }\n            />\n          </Box>\n        </Box>\n      </Box>\n    );\n  }\n);\n"],"file":"ProgressSpinner.js"}
+{"version":3,"sources":["../../../src/ProgressSpinner/ProgressSpinner.tsx"],"names":["forwardRef","keyframes","rem","Box","EASING_STANDARD","innerDivRotate","transformOrigin","transform","circleIndeterminate","strokeDasharray","strokeDashoffset","SIZE","ProgressSpinner","props","forwardedRef","__css","progressProp","progress","thickness","size","otherProps","indeterminate","undefined","circumference","Math","PI","color","display","width","height","animation","toFixed","transition"],"mappings":"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","sourcesContent":["import type { SVGAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { keyframes } from '@emotion/react';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { EASING_STANDARD } from '../motion';\n\nexport type ProgressSpinnerProps = BoxProps & {\n  progress?: number;\n  thickness?: number;\n  size?: number;\n};\n\nconst innerDivRotate = keyframes({\n  '0%': {\n    transformOrigin: '50% 50%',\n  },\n  '100%': {\n    transform: 'rotate(360deg)',\n  },\n});\n\nconst circleIndeterminate = keyframes({\n  '0%': {\n    strokeDasharray: '1px, 200px',\n    strokeDashoffset: '0px',\n  },\n  '50%': {\n    strokeDasharray: '100px, 200px',\n    strokeDashoffset: '-15px',\n  },\n  '100%': {\n    strokeDasharray: '100px, 200px',\n    strokeDashoffset: '-125px',\n  },\n});\n\nconst SIZE = 44;\n\nexport const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(\n  function ProgressSpinner(props, forwardedRef) {\n    const {\n      __css,\n      progress: progressProp,\n      thickness = 3.6,\n      size = 40,\n      ...otherProps\n    } = props;\n\n    const indeterminate = progressProp === undefined;\n    const progress = progressProp ?? 0;\n\n    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);\n    return (\n      <Box\n        ref={forwardedRef}\n        {...otherProps}\n        __css={{\n          color: 'primary',\n          display: 'inline-block',\n          width: rem(size),\n          height: rem(size),\n          ...__css,\n        }}\n      >\n        <Box\n          __css={{\n            display: 'inline-block',\n            width: '100%',\n            height: '100%',\n            ...(indeterminate\n              ? { animation: `${innerDivRotate} 1.4s linear infinite` }\n              : { transform: 'rotate(-90deg)' }),\n          }}\n        >\n          <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>\n            as=\"svg\"\n            viewBox=\"22 22 44 44\"\n            display=\"block\"\n          >\n            <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>\n              as=\"circle\"\n              stroke=\"currentColor\"\n              cx={SIZE}\n              cy={SIZE}\n              r={(SIZE - thickness) / 2}\n              fill=\"none\"\n              strokeWidth={thickness}\n              style={\n                indeterminate\n                  ? {}\n                  : {\n                      strokeDashoffset: `${(\n                        ((100 - progress) / 100) *\n                        circumference\n                      ).toFixed(3)}px`,\n                    }\n              }\n              __css={\n                indeterminate\n                  ? {\n                      animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,\n                      strokeDasharray: '80px, 200px',\n                      strokeDashoffset: '0px',\n                    }\n                  : {\n                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,\n                      strokeDasharray: circumference.toFixed(3),\n                    }\n              }\n            />\n          </Box>\n        </Box>\n      </Box>\n    );\n  }\n);\n"],"file":"ProgressSpinner.js"}

package/build/esm/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/RadioButton.tsx"],"names":["forwardRef","RadioButton","RadioButtonCore","Box","RippleBox","alpha","RadioButtonIcon","useTheme","SelectionControlLabel","SelectionControlText","RadioButtonInner","props","forwardedRef","as","innerAs","checked","disabled","__css","otherProps","color","theme","top","left","width","height","appearance","outline","border","borderRadius","zIndex","position","padding","lineHeight","children","inner"],"mappings":"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","sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';\nimport { RadioButton as RadioButtonCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport { alpha } from '../color';\nimport { RadioButtonIcon } from './RadioButtonIcon';\nimport { useTheme } from '../theme';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\n\nexport type RadioButtonProps = RadioButtonCoreProps;\n\nconst RadioButtonInner = forwardRef<\n  HTMLInputElement,\n  RadioButtonProps &\n    BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n>(function RadioButtonInner(props, forwardedRef) {\n  const { innerAs: as, checked, disabled, __css, ...otherProps } = props;\n  const color = 'primary';\n  const theme = useTheme();\n\n  return (\n    <Box position=\"relative\" display=\"inline-block\" minWidth=\"auto\">\n      <RippleBox<\n        RippleBoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>\n      >\n        as={as}\n        checked={checked}\n        ref={forwardedRef}\n        rippleColor={color}\n        baseOpacity={0}\n        hoverOpacity={0.04}\n        focusOpacity={0.12}\n        center={true}\n        disabled={disabled}\n        theme={theme}\n        __css={{\n          top: 0,\n          left: 0,\n          width: rem(40),\n          height: rem(40),\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        {...otherProps}\n      />\n      <Box\n        __css={{\n          position: 'relative',\n          top: 0,\n          left: 0,\n          width: rem(40),\n          height: rem(40),\n          padding: rem(10),\n          lineHeight: 1,\n          color: checked ? 'primary' : alpha('on.surface', 0.54),\n          'input:disabled + &': {\n            color: alpha('on.surface', 0.38),\n          },\n        }}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n      >\n        <RadioButtonIcon checked={checked} disabled={disabled} />\n      </Box>\n    </Box>\n  );\n});\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  function RadioButton(props, forwardedRef) {\n    const { as = 'input', children, disabled, ...otherProps } = props;\n\n    const inner = (\n      <RadioButtonCore\n        as={RadioButtonInner}\n        innerAs={as}\n        ref={forwardedRef}\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);\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../../src/RadioButton/RadioButton.tsx"],"names":["forwardRef","RadioButton","RadioButtonCore","Box","RippleBox","alpha","RadioButtonIcon","useTheme","SelectionControlLabel","SelectionControlText","RadioButtonInner","props","forwardedRef","as","innerAs","checked","disabled","__css","otherProps","color","theme","top","left","width","height","appearance","outline","border","borderRadius","zIndex","position","padding","lineHeight","children","inner"],"mappings":"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","sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';\nimport { RadioButton as RadioButtonCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport { alpha } from '../color';\nimport { RadioButtonIcon } from './RadioButtonIcon';\nimport { useTheme } from '../theme';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\n\nexport type RadioButtonProps = RadioButtonCoreProps;\n\nconst RadioButtonInner = forwardRef<\n  HTMLInputElement,\n  RadioButtonProps &\n    BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>\n>(function RadioButtonInner(props, forwardedRef) {\n  const { innerAs: as, checked, disabled, __css, ...otherProps } = props;\n  const color = 'primary';\n  const theme = useTheme();\n\n  return (\n    <Box position=\"relative\" display=\"inline-block\" minWidth=\"auto\">\n      <RippleBox<\n        RippleBoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>\n      >\n        as={as}\n        checked={checked}\n        ref={forwardedRef}\n        rippleColor={color}\n        baseOpacity={0}\n        hoverOpacity={0.04}\n        focusOpacity={0.12}\n        center={true}\n        disabled={disabled}\n        theme={theme}\n        __css={{\n          top: 0,\n          left: 0,\n          width: rem(40),\n          height: rem(40),\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        {...otherProps}\n      />\n      <Box\n        __css={{\n          position: 'relative',\n          top: 0,\n          left: 0,\n          width: rem(40),\n          height: rem(40),\n          padding: rem(10),\n          lineHeight: 1,\n          color: checked ? 'primary' : alpha('on.surface', 0.54),\n          'input:disabled + &': {\n            color: alpha('on.surface', 0.38),\n          },\n        }}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n      >\n        <RadioButtonIcon checked={checked} disabled={disabled} />\n      </Box>\n    </Box>\n  );\n});\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  function RadioButton(props, forwardedRef) {\n    const { as = 'input', children, disabled, ...otherProps } = props;\n\n    const inner = (\n      <RadioButtonCore\n        as={RadioButtonInner}\n        innerAs={as}\n        ref={forwardedRef}\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);\n"],"file":"RadioButton.js"}

package/build/esm/RadioButton/RadioButtonIcon.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-export interface RadioButtonIconProps extends React.HTMLAttributes<HTMLDivElement> {
+import type { HTMLAttributes } from 'react';
+export interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {
     checked?: boolean;
     disabled?: boolean;
 }
-export declare const RadioButtonIcon: React.ForwardRefExoticComponent<RadioButtonIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioButtonIcon: import("react").ForwardRefExoticComponent<RadioButtonIconProps & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/RadioButton/RadioButtonIcon.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var RadioButtonIcon = /*#__PURE__*/forwardRef(function RadioButtonIcon(props, forwardedRef) {
   var checked = props.checked,
@@ -26,7 +26,7 @@ export var RadioButtonIcon = /*#__PURE__*/forwardRef(function RadioButtonIcon(pr
         borderRadius: 'full',
         width: '100%',
         height: '100%',
-        transition: 'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+        transition: "transform .12s ".concat(EASING_STANDARD, " 0ms,background-color .12s ").concat(EASING_STANDARD, " 0ms"),
         transform: checked ? 'scale(1)' : 'scale(0)'
       }
     })

package/build/esm/RadioButton/RadioButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/RadioButtonIcon.tsx"],"names":["forwardRef","React","Box","RadioButtonIcon","props","forwardedRef","checked","otherProps","borderColor","borderStyle","borderRadius","borderWidth","width","height","p","backgroundColor","transition","transform"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAQA,OAAO,IAAMC,eAAe,gBAAGH,UAAU,CACvC,SAASG,eAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA8C;AAAA,MACpCC,OADoC,GACTF,KADS,CACpCE,OADoC;AAAA,MACxBC,UADwB,4BACTH,KADS;;AAG5C,sBACE,KAAC,GAAD;AACE,IAAA,GAAG,EAAEC,YADP;AAEE,IAAA,KAAK,EAAE;AACLG,MAAAA,WAAW,EAAE,cADR;AAELC,MAAAA,WAAW,EAAE,OAFR;AAGLC,MAAAA,YAAY,EAAE,MAHT;AAILC,MAAAA,WAAW,YAJN;AAKLC,MAAAA,KAAK,EAAE,MALF;AAMLC,MAAAA,MAAM,EAAE,MANH;AAOLC,MAAAA,CAAC;AAPI;AAFT,KAWMP,UAXN;AAAA,2BAaE,KAAC,GAAD;AACE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAE,cADZ;AAELL,QAAAA,YAAY,EAAE,MAFT;AAGLE,QAAAA,KAAK,EAAE,MAHF;AAILC,QAAAA,MAAM,EAAE,MAJH;AAKLG,QAAAA,UAAU,EACR,4FANG;AAOLC,QAAAA,SAAS,EAAEX,OAAO,GAAG,UAAH,GAAgB;AAP7B;AADT;AAbF,KADF;AA2BD,CA/BsC,CAAlC","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\nimport { rem } from 'polished';\n\nimport { Box } from '../Box';\n\nexport interface RadioButtonIconProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(\n  function RadioButtonIcon(props, forwardedRef) {\n    const { checked, ...otherProps } = props;\n\n    return (\n      <Box\n        ref={forwardedRef}\n        __css={{\n          borderColor: 'currentColor',\n          borderStyle: 'solid',\n          borderRadius: 'full',\n          borderWidth: rem(2),\n          width: '100%',\n          height: '100%',\n          p: rem(3),\n        }}\n        {...otherProps}\n      >\n        <Box\n          __css={{\n            backgroundColor: 'currentColor',\n            borderRadius: 'full',\n            width: '100%',\n            height: '100%',\n            transition:\n              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',\n            transform: checked ? 'scale(1)' : 'scale(0)',\n          }}\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"RadioButtonIcon.js"}
+{"version":3,"sources":["../../../src/RadioButton/RadioButtonIcon.tsx"],"names":["forwardRef","Box","EASING_STANDARD","RadioButtonIcon","props","forwardedRef","checked","otherProps","borderColor","borderStyle","borderRadius","borderWidth","width","height","p","backgroundColor","transition","transform"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,eAAT,QAAgC,WAAhC;;AAOA,OAAO,IAAMC,eAAe,gBAAGH,UAAU,CACvC,SAASG,eAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA8C;AAAA,MACpCC,OADoC,GACTF,KADS,CACpCE,OADoC;AAAA,MACxBC,UADwB,4BACTH,KADS;;AAG5C,sBACE,KAAC,GAAD;AACE,IAAA,GAAG,EAAEC,YADP;AAEE,IAAA,KAAK,EAAE;AACLG,MAAAA,WAAW,EAAE,cADR;AAELC,MAAAA,WAAW,EAAE,OAFR;AAGLC,MAAAA,YAAY,EAAE,MAHT;AAILC,MAAAA,WAAW,YAJN;AAKLC,MAAAA,KAAK,EAAE,MALF;AAMLC,MAAAA,MAAM,EAAE,MANH;AAOLC,MAAAA,CAAC;AAPI;AAFT,KAWMP,UAXN;AAAA,2BAaE,KAAC,GAAD;AACE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAE,cADZ;AAELL,QAAAA,YAAY,EAAE,MAFT;AAGLE,QAAAA,KAAK,EAAE,MAHF;AAILC,QAAAA,MAAM,EAAE,MAJH;AAKLG,QAAAA,UAAU,2BAAoBd,eAApB,wCAAiEA,eAAjE,SALL;AAMLe,QAAAA,SAAS,EAAEX,OAAO,GAAG,UAAH,GAAgB;AAN7B;AADT;AAbF,KADF;AA0BD,CA9BsC,CAAlC","sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { rem } from 'polished';\n\nimport { Box } from '../Box';\nimport { EASING_STANDARD } from '../motion';\n\nexport interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nexport const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(\n  function RadioButtonIcon(props, forwardedRef) {\n    const { checked, ...otherProps } = props;\n\n    return (\n      <Box\n        ref={forwardedRef}\n        __css={{\n          borderColor: 'currentColor',\n          borderStyle: 'solid',\n          borderRadius: 'full',\n          borderWidth: rem(2),\n          width: '100%',\n          height: '100%',\n          p: rem(3),\n        }}\n        {...otherProps}\n      >\n        <Box\n          __css={{\n            backgroundColor: 'currentColor',\n            borderRadius: 'full',\n            width: '100%',\n            height: '100%',\n            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,\n            transform: checked ? 'scale(1)' : 'scale(0)',\n          }}\n        />\n      </Box>\n    );\n  }\n);\n"],"file":"RadioButtonIcon.js"}

package/build/esm/RadioButton/RadioGroup.d.ts

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

package/build/esm/Ripple/RippleBox.d.ts

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import * as React from 'react';
 import type { UseRippleSurfaceOptions } from './useRippleSurface';
 import type { BoxProps } from '../Box';
-export declare type RippleBoxProps<H extends HTMLElement = HTMLDivElement, Attr = React.HTMLAttributes<H>> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
+export declare type RippleBoxProps<H extends HTMLElement = HTMLDivElement, Attr = HTMLAttributes<H>> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
 export declare const RippleBox: <Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>>(props: Props) => JSX.Element;

package/build/esm/Ripple/RippleBox.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { useRippleSurface } from './useRippleSurface';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";

package/build/esm/Ripple/RippleBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/RippleBox.tsx"],"names":["forwardRef","React","useRippleSurface","Box","RippleBox","props","forwardedRef","as","__css","onKeyDown","onPointerDown","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","center","disabled","rippleEnabled","style","otherProps","rippleCss","rippleProps"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAOA,OAAO,IAAMC,SAIG,gBAAGJ,UAAU,CAC3B,SAASI,SAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAwC;AAAA,kBAkBlCD,KAlBkC,CAEpCE,EAFoC;AAAA,MAEpCA,EAFoC,0BAE/B,KAF+B;AAAA,MAGpCC,KAHoC,GAkBlCH,KAlBkC,CAGpCG,KAHoC;AAAA,MAMpCC,SANoC,GAkBlCJ,KAlBkC,CAMpCI,SANoC;AAAA,MAOpCC,aAPoC,GAkBlCL,KAlBkC,CAOpCK,aAPoC;AAAA,MAQpCC,WARoC,GAkBlCN,KAlBkC,CAQpCM,WARoC;AAAA,MASpCC,YAToC,GAkBlCP,KAlBkC,CASpCO,YAToC;AAAA,MAUpCC,YAVoC,GAkBlCR,KAlBkC,CAUpCQ,YAVoC;AAAA,MAWpCC,cAXoC,GAkBlCT,KAlBkC,CAWpCS,cAXoC;AAAA,MAYpCC,WAZoC,GAkBlCV,KAlBkC,CAYpCU,WAZoC;AAAA,MAapCC,MAboC,GAkBlCX,KAlBkC,CAapCW,MAboC;AAAA,MAcpCC,QAdoC,GAkBlCZ,KAlBkC,CAcpCY,QAdoC;AAAA,MAepCC,aAfoC,GAkBlCb,KAlBkC,CAepCa,aAfoC;AAAA,MAgBpCC,KAhBoC,GAkBlCd,KAlBkC,CAgBpCc,KAhBoC;AAAA,MAiBjCC,UAjBiC,4BAkBlCf,KAlBkC;;AAAA,0BAoBOH,gBAAgB,CAACG,KAAD,CApBvB;AAAA,MAoBvBgB,SApBuB,qBAoB9Bb,KApB8B;AAAA,MAoBTc,WApBS;;AAsBtC,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEf,EADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,eAAOe,SAAP,EAAqBb,KAArB,CAHP;AAIQS,IAAAA,QAAQ,EAARA;AAJR,KAKMG,UALN,EAMME,WANN,EADF;AAUD,CAjC0B,CAJtB","sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport type { UseRippleSurfaceOptions } from './useRippleSurface';\nimport { useRippleSurface } from './useRippleSurface';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type RippleBoxProps<\n  H extends HTMLElement = HTMLDivElement,\n  Attr = React.HTMLAttributes<H>\n> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;\n\nexport const RippleBox: <\n  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>\n>(\n  props: Props\n) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(\n  function RippleBox(props, forwardedRef) {\n    const {\n      as = 'div',\n      __css,\n      // Cherry picking the ripple props to prevent it from falling down to\n      // the Box component\n      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      center, // eslint-disable-line @typescript-eslint/no-unused-vars\n      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      style, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...otherProps\n    } = props;\n\n    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);\n\n    return (\n      <Box\n        as={as}\n        ref={forwardedRef}\n        __css={{ ...rippleCss, ...__css }}\n        {...{ disabled }}\n        {...otherProps}\n        {...rippleProps}\n      />\n    );\n  }\n) as any;\n"],"file":"RippleBox.js"}
+{"version":3,"sources":["../../../src/Ripple/RippleBox.tsx"],"names":["forwardRef","useRippleSurface","Box","RippleBox","props","forwardedRef","as","__css","onKeyDown","onPointerDown","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","center","disabled","rippleEnabled","style","otherProps","rippleCss","rippleProps"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAOA,OAAO,IAAMC,SAIG,gBAAGH,UAAU,CAC3B,SAASG,SAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAwC;AAAA,kBAkBlCD,KAlBkC,CAEpCE,EAFoC;AAAA,MAEpCA,EAFoC,0BAE/B,KAF+B;AAAA,MAGpCC,KAHoC,GAkBlCH,KAlBkC,CAGpCG,KAHoC;AAAA,MAMpCC,SANoC,GAkBlCJ,KAlBkC,CAMpCI,SANoC;AAAA,MAOpCC,aAPoC,GAkBlCL,KAlBkC,CAOpCK,aAPoC;AAAA,MAQpCC,WARoC,GAkBlCN,KAlBkC,CAQpCM,WARoC;AAAA,MASpCC,YAToC,GAkBlCP,KAlBkC,CASpCO,YAToC;AAAA,MAUpCC,YAVoC,GAkBlCR,KAlBkC,CAUpCQ,YAVoC;AAAA,MAWpCC,cAXoC,GAkBlCT,KAlBkC,CAWpCS,cAXoC;AAAA,MAYpCC,WAZoC,GAkBlCV,KAlBkC,CAYpCU,WAZoC;AAAA,MAapCC,MAboC,GAkBlCX,KAlBkC,CAapCW,MAboC;AAAA,MAcpCC,QAdoC,GAkBlCZ,KAlBkC,CAcpCY,QAdoC;AAAA,MAepCC,aAfoC,GAkBlCb,KAlBkC,CAepCa,aAfoC;AAAA,MAgBpCC,KAhBoC,GAkBlCd,KAlBkC,CAgBpCc,KAhBoC;AAAA,MAiBjCC,UAjBiC,4BAkBlCf,KAlBkC;;AAAA,0BAoBOH,gBAAgB,CAACG,KAAD,CApBvB;AAAA,MAoBvBgB,SApBuB,qBAoB9Bb,KApB8B;AAAA,MAoBTc,WApBS;;AAsBtC,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEf,EADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,eAAOe,SAAP,EAAqBb,KAArB,CAHP;AAIQS,IAAAA,QAAQ,EAARA;AAJR,KAKMG,UALN,EAMME,WANN,EADF;AAUD,CAjC0B,CAJtB","sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UseRippleSurfaceOptions } from './useRippleSurface';\nimport { useRippleSurface } from './useRippleSurface';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type RippleBoxProps<\n  H extends HTMLElement = HTMLDivElement,\n  Attr = HTMLAttributes<H>\n> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;\n\nexport const RippleBox: <\n  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>\n>(\n  props: Props\n) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(\n  function RippleBox(props, forwardedRef) {\n    const {\n      as = 'div',\n      __css,\n      // Cherry picking the ripple props to prevent it from falling down to\n      // the Box component\n      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      center, // eslint-disable-line @typescript-eslint/no-unused-vars\n      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      style, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...otherProps\n    } = props;\n\n    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);\n\n    return (\n      <Box\n        as={as}\n        ref={forwardedRef}\n        __css={{ ...rippleCss, ...__css }}\n        {...{ disabled }}\n        {...otherProps}\n        {...rippleProps}\n      />\n    );\n  }\n) as any;\n"],"file":"RippleBox.js"}

package/build/esm/Ripple/useRippleHandlers.d.ts

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import type { RippleOptions } from './useRipple';
 export declare function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions): {
     style: {};
     animation: string | undefined;
-    handleKeyDown: (e: React.KeyboardEvent<T>) => void;
-    handlePointerDown: (e: React.PointerEvent<T>) => void;
+    handleKeyDown: (e: ReactKeyboardEvent<T>) => void;
+    handlePointerDown: (e: PointerEvent<T>) => void;
 };

package/build/esm/Ripple/useRippleHandlers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleHandlers.ts"],"names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AAIA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;AAAA,mBAClCH,SAAS,CAACG,IAAD,CADyB;AAAA,MACpEC,QADoE,cACpEA,QADoE;AAAA,MAC1DC,UAD0D,cAC1DA,UAD0D;AAAA,MAC3CC,IAD2C,qEAG5E;;;AACA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5BC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;AACAC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;AACAF,IAAAA,UAAU;AACX,GAJD;;AAMA,MAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA8B;AACtD,QAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAV,IAAAA,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;AACAT,IAAAA,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;AACAC,IAAAA,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;AACD,GALD,CAV4E,CAiB5E;;;AACA,MAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;AACA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;AACxC,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;AACjB;AACD;;AACDb,IAAAA,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;AACAD,IAAAA,WAAW,CAACG,OAAZ,GAAsB,IAAtB;AACAjB,IAAAA,UAAU;AACX,GAPD;;AASA,MAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA+B;AACnD,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;AACzC;AACD;;AACD,QAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAK,IAAAA,WAAW,CAACG,OAAZ,GAAsB,KAAtB;AACAlB,IAAAA,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;AACAJ,IAAAA,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;AACD,GARD;;AAUA;AACEG,IAAAA,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;AAEEb,IAAAA,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;AAFvD,KAGKJ,IAHL;AAKD","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"file":"useRippleHandlers.js"}
+{"version":3,"sources":["../../../src/Ripple/useRippleHandlers.ts"],"names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"mappings":";;AACA,SAASA,MAAT,QAAuB,OAAvB;AAGA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;AAAA,mBAClCH,SAAS,CAACG,IAAD,CADyB;AAAA,MACpEC,QADoE,cACpEA,QADoE;AAAA,MAC1DC,UAD0D,cAC1DA,UAD0D;AAAA,MAC3CC,IAD2C,qEAG5E;;;AACA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5BC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;AACAC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;AACAF,IAAAA,UAAU;AACX,GAJD;;AAMA,MAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAwB;AAChD,QAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAV,IAAAA,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;AACAT,IAAAA,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;AACAC,IAAAA,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;AACD,GALD,CAV4E,CAiB5E;;;AACA,MAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;AACA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;AACxC,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;AACjB;AACD;;AACDb,IAAAA,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;AACAD,IAAAA,WAAW,CAACG,OAAZ,GAAsB,IAAtB;AACAjB,IAAAA,UAAU;AACX,GAPD;;AASA,MAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA8B;AAClD,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;AACzC;AACD;;AACD,QAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAK,IAAAA,WAAW,CAACG,OAAZ,GAAsB,KAAtB;AACAlB,IAAAA,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;AACAJ,IAAAA,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;AACD,GARD;;AAUA;AACEG,IAAAA,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;AAEEb,IAAAA,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;AAFvD,KAGKJ,IAHL;AAKD","sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';\nimport { useRef } from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"file":"useRippleHandlers.js"}

package/build/esm/Ripple/useRippleSurface.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, KeyboardEventHandler, PointerEventHandler } from 'react';
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     baseOpacity?: number;
     hoverOpacity?: number;
@@ -9,10 +9,10 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     center?: boolean;
     disabled?: boolean;
     style?: CSSProperties;
-    onPointerDown?: React.PointerEventHandler<T>;
-    onKeyDown?: React.KeyboardEventHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<T>;
 }
-export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleSurfaceOptions<T>): {
+export declare function useRippleSurface<T extends HTMLElement>(opts?: UseRippleSurfaceOptions<T>): {
     style: {
         alignContent?: import("csstype").Property.AlignContent | undefined;
         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -782,5 +782,5 @@ export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleS
     };
     onKeyDown: import("@basic-ui/core").CustomEventHandler<import("react").KeyboardEvent<T>, []>;
     onPointerDown: import("@basic-ui/core").CustomEventHandler<import("react").PointerEvent<T>, []>;
-    __css: Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
+    __css: import("@styled-system/css").SystemCssProperties | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
 };

package/build/esm/Ripple/useRippleSurface.js

@@ -1,14 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-export function useRippleSurface(opts) {
-  var _extends2;
-
+export function useRippleSurface() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _opts$baseOpacity = opts.baseOpacity,
       baseOpacity = _opts$baseOpacity === void 0 ? 0 : _opts$baseOpacity,
       _opts$hoverOpacity = opts.hoverOpacity,
@@ -48,62 +48,65 @@ export function useRippleSurface(opts) {
       animationStyle = _useRippleHandlers.style,
       animation = _useRippleHandlers.animation;
 
-  var css = _extends({
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear'
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&:active::before': {
-      opacity: pressedOpacity
-    }
-  }, {
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&[aria-pressed="true"]:active::before': {
-      opacity: pressedOpacity + pressedOpacity
-    }
-  }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
-    opacity: 0
-  }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
-    cursor: 'default'
-  }), _extends2), rippleEnabled && {
-    '&::after': _extends({}, rippleStyle({
-      animation: animation
-    }))
-  });
+  var css = useMemo(function () {
+    var _extends2;
 
+    return _extends({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear'
+      },
+      '&:hover::before': {
+        opacity: hoverOpacity
+      },
+      '&:focus-visible::before': {
+        opacity: focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity
+      }
+    }, {
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity
+      },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity
+      }
+    }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
+      opacity: 0
+    }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
+      cursor: 'default'
+    }), _extends2), rippleEnabled && {
+      '&::after': _extends({}, rippleStyle({
+        animation: animation
+      }))
+    });
+  }, [animation, baseOpacity, focusOpacity, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
     style: _extends({}, animationStyle, style),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),

package/build/esm/Ripple/useRippleSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T>\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = {\n    overflow: 'hidden',\n    position: 'relative',\n    cursor: 'pointer',\n    // fix overflow: hidden + borderRadius in Safari\n    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n    willChange: 'transform,opacity',\n    WebkitTapHighlightColor: 'transparent',\n    // ripple overlay\n    '&::before': {\n      backgroundColor: rippleColor,\n      boxSizing: 'content-box',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: baseOpacity,\n      pointerEvents: 'none',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      transition: 'opacity 75ms linear',\n    },\n    '&:hover::before': {\n      opacity: hoverOpacity,\n    },\n    '&:focus-visible::before': {\n      opacity: focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&:active::before': {\n        opacity: pressedOpacity,\n      },\n    }),\n    '&[aria-pressed=\"true\"]::before': {\n      opacity: baseOpacity + pressedOpacity,\n    },\n    '&[aria-pressed=\"true\"]:hover::before': {\n      opacity: pressedOpacity + hoverOpacity,\n    },\n    '&[aria-pressed=\"true\"]:focus-visible::before': {\n      opacity: pressedOpacity + focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&[aria-pressed=\"true\"]:active::before': {\n        opacity: pressedOpacity + pressedOpacity,\n      },\n    }),\n    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n    '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n      {\n        opacity: 0,\n      },\n    '&:disabled,&[data-disabled]': {\n      cursor: 'default',\n    },\n    // ripple\n    ...(rippleEnabled && {\n      '&::after': { ...rippleStyle({ animation }) },\n    }),\n  };\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}
+{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["useMemo","get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import type {\n  CSSProperties,\n  KeyboardEventHandler,\n  PointerEventHandler,\n} from 'react';\nimport { useMemo } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: PointerEventHandler<T>;\n  onKeyDown?: KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T> = {}\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = useMemo(\n    () => ({\n      overflow: 'hidden',\n      position: 'relative',\n      cursor: 'pointer',\n      // fix overflow: hidden + borderRadius in Safari\n      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n      willChange: 'transform,opacity',\n      WebkitTapHighlightColor: 'transparent',\n      // ripple overlay\n      '&::before': {\n        backgroundColor: rippleColor,\n        boxSizing: 'content-box',\n        position: 'absolute',\n        content: '\"\"',\n        opacity: baseOpacity,\n        pointerEvents: 'none',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        transition: 'opacity 75ms linear',\n      },\n      '&:hover::before': {\n        opacity: hoverOpacity,\n      },\n      '&:focus-visible::before': {\n        opacity: focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&:active::before': {\n          opacity: pressedOpacity,\n        },\n      }),\n      '&[aria-pressed=\"true\"]::before': {\n        opacity: baseOpacity + pressedOpacity,\n      },\n      '&[aria-pressed=\"true\"]:hover::before': {\n        opacity: pressedOpacity + hoverOpacity,\n      },\n      '&[aria-pressed=\"true\"]:focus-visible::before': {\n        opacity: pressedOpacity + focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&[aria-pressed=\"true\"]:active::before': {\n          opacity: pressedOpacity + pressedOpacity,\n        },\n      }),\n      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n      '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n        {\n          opacity: 0,\n        },\n      '&:disabled,&[data-disabled]': {\n        cursor: 'default',\n      },\n      // ripple\n      ...(rippleEnabled && {\n        '&::after': { ...rippleStyle({ animation }) },\n      }),\n    }),\n    [\n      animation,\n      baseOpacity,\n      focusOpacity,\n      hoverOpacity,\n      pressedOpacity,\n      rippleColor,\n      rippleEnabled,\n    ]\n  );\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}

package/build/esm/Select/Select.d.ts

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

package/build/esm/Select/Select.js

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