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

package/build/esm/RadioButton/RadioButtonIcon.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const RadioButtonIcon = /*#__PURE__*/forwardRef(function RadioButtonIcon(props, forwardedRef) {
-  const {
-    checked
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["checked"]);
+export var RadioButtonIcon = /*#__PURE__*/forwardRef(function RadioButtonIcon(props, forwardedRef) {
+  var checked = props.checked,
+      otherProps = _objectWithoutProperties(props, ["checked"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: forwardedRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/RadioButtonIcon.tsx"],"names":["forwardRef","Box","RadioButtonIcon","props","forwardedRef","checked","otherProps","borderColor","borderStyle","borderRadius","borderWidth","width","height","p","backgroundColor","transition","transform"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAQA,OAAO,MAAMC,eAAe,gBAAGF,UAAU,CACvC,SAASE,eAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA8C;AAC5C,QAAM;AAAEC,IAAAA;AAAF,MAA6BF,KAAnC;AAAA,QAAoBG,UAApB,iCAAmCH,KAAnC;;AAEA,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 type * as React from 'react';\nimport { rem } from 'polished';\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","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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BoxProps } from '../Box';
-import { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';
+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, "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "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" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "innerAs" | "name" | "value"> & 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" | "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>>;

package/build/esm/RadioButton/RadioGroup.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
-import { Box } from '../Box';
 import { RadioGroup as RadioGroupCore } from '@basic-ui/core';
+import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, forwardedRef) {
+export var RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, forwardedRef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
+  var as = props.as,
+      otherProps = _objectWithoutProperties(props, ["as"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     as: RadioGroupCore,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/RadioGroup.tsx"],"names":["forwardRef","Box","RadioGroup","RadioGroupCore","props","forwardedRef","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,SAASC,GAAT,QAA8B,QAA9B;AACA,SACEC,UAAU,IAAIC,cADhB,QAGO,gBAHP;;AAWA,OAAO,MAAMD,UAAU,gBAAGF,UAAU,CAClC,SAASE,UAAT,CAAoBE,KAApB,EAA2BC,YAA3B,EAAyC;AACvC;AACA,QAAeC,UAAf,iCAA8BF,KAA9B;;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAED,cADN;AAEE,IAAA,GAAG,EAAEE;AAFP,KAGMC,UAHN,EADF;AAOD,CAZiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport { Box, BoxProps } from '../Box';\nimport {\n  RadioGroup as RadioGroupCore,\n  RadioGroupProps as RadioGroupCoreProps,\n} from '@basic-ui/core';\n\nexport type RadioGroupProps = Omit<\n  BoxProps,\n  'onChange' | 'value' | 'defaultValue'\n> &\n  RadioGroupCoreProps;\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(props, forwardedRef) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { as, ...otherProps } = props;\n\n    return (\n      <Box<RadioGroupProps>\n        as={RadioGroupCore}\n        ref={forwardedRef}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"RadioGroup.js"}
+{"version":3,"sources":["../../../src/RadioButton/RadioGroup.tsx"],"names":["forwardRef","RadioGroup","RadioGroupCore","Box","props","forwardedRef","as","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,UAAU,IAAIC,cAAvB,QAA6C,gBAA7C;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAQA,OAAO,IAAMF,UAAU,gBAAGD,UAAU,CAClC,SAASC,UAAT,CAAoBG,KAApB,EAA2BC,YAA3B,EAAyC;AACvC;AADuC,MAE/BC,EAF+B,GAETF,KAFS,CAE/BE,EAF+B;AAAA,MAExBC,UAFwB,4BAETH,KAFS;;AAIvC,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEF,cADN;AAEE,IAAA,GAAG,EAAEG;AAFP,KAGME,UAHN,EADF;AAOD,CAZiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport type { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';\nimport { RadioGroup as RadioGroupCore } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type RadioGroupProps = Omit<\n  BoxProps,\n  'onChange' | 'value' | 'defaultValue'\n> &\n  RadioGroupCoreProps;\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(props, forwardedRef) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { as, ...otherProps } = props;\n\n    return (\n      <Box<RadioGroupProps>\n        as={RadioGroupCore}\n        ref={forwardedRef}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"RadioGroup.js"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CSSObject } from '@emotion/react';
+import type { CSSObject } from '@emotion/react';
 export declare const rippleStyle: ({ animation, }: {
     animation?: string | undefined;
 }) => CSSObject;

package/build/esm/Ripple/Ripple.js

@@ -1,27 +1,28 @@
 import _styled from "@emotion/styled/base";
 import { RIPPLE_BACKGROUND_COLOR, RIPPLE_SIZE, RIPPLE_POSITION } from './constants';
-export const rippleStyle = ({
-  animation
-}) => ({
-  position: 'absolute',
-  boxSizing: 'content-box',
-  display: 'block',
-  content: '""',
-  width: "var(".concat(RIPPLE_SIZE, ")"),
-  height: "var(".concat(RIPPLE_SIZE, ")"),
-  top: "var(".concat(RIPPLE_POSITION, ")"),
-  left: "var(".concat(RIPPLE_POSITION, ")"),
-  backgroundColor: "var(".concat(RIPPLE_BACKGROUND_COLOR, ")"),
-  transformOrigin: 'center center',
-  opacity: 0,
-  borderRadius: '999999px',
-  animation,
-  willChange: 'opacity,transform'
-});
-export const Ripple = _styled("div", process.env.NODE_ENV === "production" ? {
+export var rippleStyle = function rippleStyle(_ref) {
+  var animation = _ref.animation;
+  return {
+    position: 'absolute',
+    boxSizing: 'content-box',
+    display: 'block',
+    content: '""',
+    width: "var(".concat(RIPPLE_SIZE, ")"),
+    height: "var(".concat(RIPPLE_SIZE, ")"),
+    top: "var(".concat(RIPPLE_POSITION, ")"),
+    left: "var(".concat(RIPPLE_POSITION, ")"),
+    backgroundColor: "var(".concat(RIPPLE_BACKGROUND_COLOR, ")"),
+    transformOrigin: 'center center',
+    opacity: 0,
+    borderRadius: '999999px',
+    animation: animation,
+    willChange: 'opacity,transform'
+  };
+};
+export var Ripple = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ebk8cct0"
 } : {
   target: "ebk8cct0",
   label: "Ripple"
-})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SaXBwbGUvUmlwcGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9SaXBwbGUvUmlwcGxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7XG4gIFJJUFBMRV9CQUNLR1JPVU5EX0NPTE9SLFxuICBSSVBQTEVfU0laRSxcbiAgUklQUExFX1BPU0lUSU9OLFxufSBmcm9tICcuL2NvbnN0YW50cyc7XG5cbmV4cG9ydCBjb25zdCByaXBwbGVTdHlsZSA9ICh7XG4gIGFuaW1hdGlvbixcbn06IHtcbiAgYW5pbWF0aW9uPzogc3RyaW5nO1xufSk6IENTU09iamVjdCA9PiAoe1xuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm94U2l6aW5nOiAnY29udGVudC1ib3gnLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBjb250ZW50OiAnXCJcIicsXG4gIHdpZHRoOiBgdmFyKCR7UklQUExFX1NJWkV9KWAsXG4gIGhlaWdodDogYHZhcigke1JJUFBMRV9TSVpFfSlgLFxuICB0b3A6IGB2YXIoJHtSSVBQTEVfUE9TSVRJT059KWAsXG4gIGxlZnQ6IGB2YXIoJHtSSVBQTEVfUE9TSVRJT059KWAsXG4gIGJhY2tncm91bmRDb2xvcjogYHZhcigke1JJUFBMRV9CQUNLR1JPVU5EX0NPTE9SfSlgLFxuICB0cmFuc2Zvcm1PcmlnaW46ICdjZW50ZXIgY2VudGVyJyxcbiAgb3BhY2l0eTogMCxcbiAgYm9yZGVyUmFkaXVzOiAnOTk5OTk5cHgnLFxuICBhbmltYXRpb24sXG4gIHdpbGxDaGFuZ2U6ICdvcGFjaXR5LHRyYW5zZm9ybScsXG59KTtcblxuZXhwb3J0IGNvbnN0IFJpcHBsZSA9IHN0eWxlZC5kaXY8eyBhbmltYXRpb24/OiBzdHJpbmcgfT4ocmlwcGxlU3R5bGUsIHtcbiAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxufSk7XG4iXX0= */"));
+})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SaXBwbGUvUmlwcGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9SaXBwbGUvUmlwcGxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgQ1NTT2JqZWN0IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQge1xuICBSSVBQTEVfQkFDS0dST1VORF9DT0xPUixcbiAgUklQUExFX1NJWkUsXG4gIFJJUFBMRV9QT1NJVElPTixcbn0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG5leHBvcnQgY29uc3QgcmlwcGxlU3R5bGUgPSAoe1xuICBhbmltYXRpb24sXG59OiB7XG4gIGFuaW1hdGlvbj86IHN0cmluZztcbn0pOiBDU1NPYmplY3QgPT4gKHtcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIGJveFNpemluZzogJ2NvbnRlbnQtYm94JyxcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgY29udGVudDogJ1wiXCInLFxuICB3aWR0aDogYHZhcigke1JJUFBMRV9TSVpFfSlgLFxuICBoZWlnaHQ6IGB2YXIoJHtSSVBQTEVfU0laRX0pYCxcbiAgdG9wOiBgdmFyKCR7UklQUExFX1BPU0lUSU9OfSlgLFxuICBsZWZ0OiBgdmFyKCR7UklQUExFX1BPU0lUSU9OfSlgLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGB2YXIoJHtSSVBQTEVfQkFDS0dST1VORF9DT0xPUn0pYCxcbiAgdHJhbnNmb3JtT3JpZ2luOiAnY2VudGVyIGNlbnRlcicsXG4gIG9wYWNpdHk6IDAsXG4gIGJvcmRlclJhZGl1czogJzk5OTk5OXB4JyxcbiAgYW5pbWF0aW9uLFxuICB3aWxsQ2hhbmdlOiAnb3BhY2l0eSx0cmFuc2Zvcm0nLFxufSk7XG5cbmV4cG9ydCBjb25zdCBSaXBwbGUgPSBzdHlsZWQuZGl2PHsgYW5pbWF0aW9uPzogc3RyaW5nIH0+KHJpcHBsZVN0eWxlLCB7XG4gIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbn0pO1xuIl19 */"));
 //# sourceMappingURL=Ripple.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/Ripple.tsx"],"names":["RIPPLE_BACKGROUND_COLOR","RIPPLE_SIZE","RIPPLE_POSITION","rippleStyle","animation","position","boxSizing","display","content","width","height","top","left","backgroundColor","transformOrigin","opacity","borderRadius","willChange","Ripple"],"mappings":";AAEA,SACEA,uBADF,EAEEC,WAFF,EAGEC,eAHF,QAIO,aAJP;AAMA,OAAO,MAAMC,WAAW,GAAG,CAAC;AAC1BC,EAAAA;AAD0B,CAAD,MAIT;AAChBC,EAAAA,QAAQ,EAAE,UADM;AAEhBC,EAAAA,SAAS,EAAE,aAFK;AAGhBC,EAAAA,OAAO,EAAE,OAHO;AAIhBC,EAAAA,OAAO,EAAE,IAJO;AAKhBC,EAAAA,KAAK,gBAASR,WAAT,MALW;AAMhBS,EAAAA,MAAM,gBAAST,WAAT,MANU;AAOhBU,EAAAA,GAAG,gBAAST,eAAT,MAPa;AAQhBU,EAAAA,IAAI,gBAASV,eAAT,MARY;AAShBW,EAAAA,eAAe,gBAASb,uBAAT,MATC;AAUhBc,EAAAA,eAAe,EAAE,eAVD;AAWhBC,EAAAA,OAAO,EAAE,CAXO;AAYhBC,EAAAA,YAAY,EAAE,UAZE;AAahBZ,EAAAA,SAbgB;AAchBa,EAAAA,UAAU,EAAE;AAdI,CAJS,CAApB;AAqBP,OAAO,MAAMC,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAmCf,WAAnC,g5CAAf","sourcesContent":["import styled from '@emotion/styled';\nimport { CSSObject } from '@emotion/react';\nimport {\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_SIZE,\n  RIPPLE_POSITION,\n} from './constants';\n\nexport const rippleStyle = ({\n  animation,\n}: {\n  animation?: string;\n}): CSSObject => ({\n  position: 'absolute',\n  boxSizing: 'content-box',\n  display: 'block',\n  content: '\"\"',\n  width: `var(${RIPPLE_SIZE})`,\n  height: `var(${RIPPLE_SIZE})`,\n  top: `var(${RIPPLE_POSITION})`,\n  left: `var(${RIPPLE_POSITION})`,\n  backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,\n  transformOrigin: 'center center',\n  opacity: 0,\n  borderRadius: '999999px',\n  animation,\n  willChange: 'opacity,transform',\n});\n\nexport const Ripple = styled.div<{ animation?: string }>(rippleStyle, {\n  pointerEvents: 'none',\n});\n"],"file":"Ripple.js"}
+{"version":3,"sources":["../../../src/Ripple/Ripple.tsx"],"names":["RIPPLE_BACKGROUND_COLOR","RIPPLE_SIZE","RIPPLE_POSITION","rippleStyle","animation","position","boxSizing","display","content","width","height","top","left","backgroundColor","transformOrigin","opacity","borderRadius","willChange","Ripple"],"mappings":";AAGA,SACEA,uBADF,EAEEC,WAFF,EAGEC,eAHF,QAIO,aAJP;AAMA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,MACzBC,SADyB,QACzBA,SADyB;AAAA,SAIT;AAChBC,IAAAA,QAAQ,EAAE,UADM;AAEhBC,IAAAA,SAAS,EAAE,aAFK;AAGhBC,IAAAA,OAAO,EAAE,OAHO;AAIhBC,IAAAA,OAAO,EAAE,IAJO;AAKhBC,IAAAA,KAAK,gBAASR,WAAT,MALW;AAMhBS,IAAAA,MAAM,gBAAST,WAAT,MANU;AAOhBU,IAAAA,GAAG,gBAAST,eAAT,MAPa;AAQhBU,IAAAA,IAAI,gBAASV,eAAT,MARY;AAShBW,IAAAA,eAAe,gBAASb,uBAAT,MATC;AAUhBc,IAAAA,eAAe,EAAE,eAVD;AAWhBC,IAAAA,OAAO,EAAE,CAXO;AAYhBC,IAAAA,YAAY,EAAE,UAZE;AAahBZ,IAAAA,SAAS,EAATA,SAbgB;AAchBa,IAAAA,UAAU,EAAE;AAdI,GAJS;AAAA,CAApB;AAqBP,OAAO,IAAMC,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAmCf,WAAnC,w5CAAf","sourcesContent":["import styled from '@emotion/styled';\nimport type { CSSObject } from '@emotion/react';\n\nimport {\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_SIZE,\n  RIPPLE_POSITION,\n} from './constants';\n\nexport const rippleStyle = ({\n  animation,\n}: {\n  animation?: string;\n}): CSSObject => ({\n  position: 'absolute',\n  boxSizing: 'content-box',\n  display: 'block',\n  content: '\"\"',\n  width: `var(${RIPPLE_SIZE})`,\n  height: `var(${RIPPLE_SIZE})`,\n  top: `var(${RIPPLE_POSITION})`,\n  left: `var(${RIPPLE_POSITION})`,\n  backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,\n  transformOrigin: 'center center',\n  opacity: 0,\n  borderRadius: '999999px',\n  animation,\n  willChange: 'opacity,transform',\n});\n\nexport const Ripple = styled.div<{ animation?: string }>(rippleStyle, {\n  pointerEvents: 'none',\n});\n"],"file":"Ripple.js"}

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

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
-import type * as React from 'react';
-import { UseRippleSurfaceOptions } from './useRippleSurface';
-import { BoxProps } from '../Box';
+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 const RippleBox: <Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>>(props: Props) => JSX.Element;

package/build/esm/Ripple/RippleBox.js

@@ -1,29 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+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";
-export const RippleBox = /*#__PURE__*/forwardRef(function RippleBox(props, forwardedRef) {
-  const {
-    as = 'div',
-    __css,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "__css", "onKeyDown", "onPointerDown", "baseOpacity", "hoverOpacity", "focusOpacity", "pressedOpacity", "rippleColor", "center", "disabled", "rippleEnabled", "style"]);
+export var RippleBox = /*#__PURE__*/forwardRef(function RippleBox(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'div' : _props$as,
+      __css = props.__css,
+      onKeyDown = props.onKeyDown,
+      onPointerDown = props.onPointerDown,
+      baseOpacity = props.baseOpacity,
+      hoverOpacity = props.hoverOpacity,
+      focusOpacity = props.focusOpacity,
+      pressedOpacity = props.pressedOpacity,
+      rippleColor = props.rippleColor,
+      center = props.center,
+      disabled = props.disabled,
+      rippleEnabled = props.rippleEnabled,
+      style = props.style,
+      otherProps = _objectWithoutProperties(props, ["as", "__css", "onKeyDown", "onPointerDown", "baseOpacity", "hoverOpacity", "focusOpacity", "pressedOpacity", "rippleColor", "center", "disabled", "rippleEnabled", "style"]);
 
-  const _useRippleSurface = useRippleSurface(props),
-        {
-    __css: rippleCss
-  } = _useRippleSurface,
-        rippleProps = _objectWithoutPropertiesLoose(_useRippleSurface, ["__css"]);
+  var _useRippleSurface = useRippleSurface(props),
+      rippleCss = _useRippleSurface.__css,
+      rippleProps = _objectWithoutProperties(_useRippleSurface, ["__css"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     as: as,
     ref: forwardedRef,
     __css: _extends({}, rippleCss, __css),
-    disabled
+    disabled: disabled
   }, otherProps, rippleProps));
 });
 //# sourceMappingURL=RippleBox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/RippleBox.tsx"],"names":["forwardRef","useRippleSurface","Box","RippleBox","props","forwardedRef","as","__css","disabled","otherProps","rippleCss","rippleProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2C,OAA3C;AAEA,SAAkCC,gBAAlC,QAA0D,oBAA1D;AACA,SAASC,GAAT,QAA8B,QAA9B;;AAOA,OAAO,MAAMC,SAIG,gBAAGH,UAAU,CAC3B,SAASG,SAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAwC;AACtC,QAAM;AACJC,IAAAA,EAAE,GAAG,KADD;AAEJC,IAAAA,KAFI;AAYI;AACRC,IAAAA;AAbI,MAiBFJ,KAjBJ;AAAA,QAgBKK,UAhBL,iCAiBIL,KAjBJ;;AAmBA,4BAA6CH,gBAAgB,CAACG,KAAD,CAA7D;AAAA,QAAM;AAAEG,IAAAA,KAAK,EAAEG;AAAT,GAAN;AAAA,QAA6BC,WAA7B;;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEL,EADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,eAAOK,SAAP,EAAqBH,KAArB,CAHP;AAIQC,IAAAA;AAJR,KAKMC,UALN,EAMME,WANN,EADF;AAUD,CAjC0B,CAJtB","sourcesContent":["import { forwardRef, HTMLAttributes } from 'react';\nimport type * as React from 'react';\nimport { UseRippleSurfaceOptions, useRippleSurface } from './useRippleSurface';\nimport { Box, BoxProps } 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","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"}

package/build/esm/Ripple/constants.js

@@ -1,9 +1,9 @@
 import hash from '@emotion/hash';
-export const RIPPLE_BACKGROUND_COLOR = "--css-".concat(hash('basic-ui-ripple-fg-bg-color'));
-export const RIPPLE_TRANSLATE_START = "--css-".concat(hash('basic-ui-ripple-fg-translate-start'));
-export const RIPPLE_TRANSLATE_END = "--css-".concat(hash('basic-ui-ripple-fg-translate-end'));
-export const RIPPLE_SCALE_END = "--css-".concat(hash('basic-ui-ripple-fg-scale'));
-export const RIPPLE_OPACITY_END = "--css-".concat(hash('basic-ui-ripple-fg-opacity'));
-export const RIPPLE_SIZE = "--css-".concat(hash('basic-ui-ripple-fg-size'));
-export const RIPPLE_POSITION = "--css-".concat(hash('basic-ui-ripple-fg-position'));
+export var RIPPLE_BACKGROUND_COLOR = "--css-".concat(hash('basic-ui-ripple-fg-bg-color'));
+export var RIPPLE_TRANSLATE_START = "--css-".concat(hash('basic-ui-ripple-fg-translate-start'));
+export var RIPPLE_TRANSLATE_END = "--css-".concat(hash('basic-ui-ripple-fg-translate-end'));
+export var RIPPLE_SCALE_END = "--css-".concat(hash('basic-ui-ripple-fg-scale'));
+export var RIPPLE_OPACITY_END = "--css-".concat(hash('basic-ui-ripple-fg-opacity'));
+export var RIPPLE_SIZE = "--css-".concat(hash('basic-ui-ripple-fg-size'));
+export var RIPPLE_POSITION = "--css-".concat(hash('basic-ui-ripple-fg-position'));
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/constants.ts"],"names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,MAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,MAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,MAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,MAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,MAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,MAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,MAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB","sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"file":"constants.js"}
+{"version":3,"sources":["../../../src/Ripple/constants.ts"],"names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,IAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,IAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,IAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,IAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,IAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,IAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,IAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB","sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"file":"constants.js"}

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

@@ -1,4 +1,4 @@
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
 export declare const radiusIn: Keyframes;
 export declare const opacityIn: Keyframes;
 export declare const opacityOut: Keyframes;

package/build/esm/Ripple/keyframes.js

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react';
 import { RIPPLE_TRANSLATE_START, RIPPLE_TRANSLATE_END, RIPPLE_OPACITY_END, RIPPLE_SCALE_END } from './constants';
-export const radiusIn = keyframes({
+export var radiusIn = keyframes({
   from: {
     transform: "translate(var(".concat(RIPPLE_TRANSLATE_START, ", 0)) scale(1)")
   },
@@ -8,7 +8,7 @@ export const radiusIn = keyframes({
     transform: "translate(var(".concat(RIPPLE_TRANSLATE_END, ", 0)) scale(var(").concat(RIPPLE_SCALE_END, ", 1))")
   }
 });
-export const opacityIn = keyframes({
+export var opacityIn = keyframes({
   from: {
     opacity: '0'
   },
@@ -16,7 +16,7 @@ export const opacityIn = keyframes({
     opacity: "var(".concat(RIPPLE_OPACITY_END, ")")
   }
 });
-export const opacityOut = keyframes({
+export var opacityOut = keyframes({
   from: {
     opacity: "var(".concat(RIPPLE_OPACITY_END, ")")
   },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/keyframes.ts"],"names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAEA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,MAAMC,QAAmB,GAAGL,SAAS,CAAC;AAC3CM,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,0BAAmBN,sBAAnB;AADL,GADqC;AAI3CO,EAAAA,EAAE,EAAE;AACFD,IAAAA,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;AADP;AAJuC,CAAD,CAArC;AASP,OAAO,MAAMK,SAAoB,GAAGT,SAAS,CAAC;AAC5CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,EAAE;AADL,GADsC;AAI5CF,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,gBAASP,kBAAT;AADL;AAJwC,CAAD,CAAtC;AASP,OAAO,MAAMQ,UAAqB,GAAGX,SAAS,CAAC;AAC7CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,gBAASP,kBAAT;AADH,GADuC;AAI7CK,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,EAAE;AADP;AAJyC,CAAD,CAAvC","sourcesContent":["import { keyframes } from '@emotion/react';\nimport { Keyframes } from '@emotion/serialize';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"file":"keyframes.js"}
+{"version":3,"sources":["../../../src/Ripple/keyframes.ts"],"names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAGA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,IAAMC,QAAmB,GAAGL,SAAS,CAAC;AAC3CM,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,0BAAmBN,sBAAnB;AADL,GADqC;AAI3CO,EAAAA,EAAE,EAAE;AACFD,IAAAA,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;AADP;AAJuC,CAAD,CAArC;AASP,OAAO,IAAMK,SAAoB,GAAGT,SAAS,CAAC;AAC5CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,EAAE;AADL,GADsC;AAI5CF,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,gBAASP,kBAAT;AADL;AAJwC,CAAD,CAAtC;AASP,OAAO,IAAMQ,UAAqB,GAAGX,SAAS,CAAC;AAC7CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,gBAASP,kBAAT;AADH,GADuC;AAI7CK,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,EAAE;AADP;AAJyC,CAAD,CAAvC","sourcesContent":["import { keyframes } from '@emotion/react';\nimport type { Keyframes } from '@emotion/serialize';\n\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"file":"keyframes.js"}

package/build/esm/Ripple/useRipple.js

@@ -1,8 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import { useState, useRef, useEffect } from 'react';
 import { radiusIn, opacityIn, opacityOut } from './keyframes';
 import { RIPPLE_TRANSLATE_START, RIPPLE_TRANSLATE_END, RIPPLE_OPACITY_END, RIPPLE_SCALE_END, RIPPLE_SIZE, RIPPLE_BACKGROUND_COLOR, RIPPLE_POSITION } from './constants';
-const defaultRipple = {
+var defaultRipple = {
   x: 0,
   y: 0,
   size: 0,
@@ -16,18 +18,18 @@ const defaultRipple = {
 // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
 // `overflow: hidden`.
 
-const getBoundedRadius = (rect, padding) => {
-  const hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
+var getBoundedRadius = function getBoundedRadius(rect, padding) {
+  var hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
   return hypotenuse + padding;
 };
 
 function getScale(rect) {
-  const maxDim = Math.max(rect.height, rect.width);
-  const padding = 10;
-  const initialOriginScale = 0.6;
-  const maxRadius = getBoundedRadius(rect, padding); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+  var maxDim = Math.max(rect.height, rect.width);
+  var padding = 10;
+  var initialOriginScale = 0.6;
+  var maxRadius = getBoundedRadius(rect, padding); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
 
-  const initialSize = Math.floor(maxDim * initialOriginScale);
+  var initialSize = Math.floor(maxDim * initialOriginScale);
   return {
     size: initialSize,
     scale: maxRadius / initialSize,
@@ -36,8 +38,9 @@ function getScale(rect) {
   };
 }
 
-function calculateRipplePosition(rect, clientX, clientY, center = false) {
-  const rippleStart = center ? {
+function calculateRipplePosition(rect, clientX, clientY) {
+  var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var rippleStart = center ? {
     x: rect.width / 2,
     y: rect.height / 2
   } : {
@@ -49,53 +52,64 @@ function calculateRipplePosition(rect, clientX, clientY, center = false) {
   }, rippleStart, getScale(rect));
 }
 
-export const useRipple = opts => {
-  const {
-    opacity,
-    backgroundColor,
-    enterDuration = 225,
-    leaveDuration = 150
-  } = opts; // rippleState must be a ref, because it accesses the current value
+export var useRipple = function useRipple(opts) {
+  var _style;
+
+  var opacity = opts.opacity,
+      backgroundColor = opts.backgroundColor,
+      _opts$enterDuration = opts.enterDuration,
+      enterDuration = _opts$enterDuration === void 0 ? 225 : _opts$enterDuration,
+      _opts$leaveDuration = opts.leaveDuration,
+      leaveDuration = _opts$leaveDuration === void 0 ? 150 : _opts$leaveDuration; // rippleState must be a ref, because it accesses the current value
   // inside closures... if we use state, it's gonna recapture
   // the state variable and won't work correctly
 
-  const rippleState = useRef('left');
-  const [ripple, setRipple] = useState(defaultRipple);
-  const leavingTimeout = useRef();
-  const enteringTimeout = useRef();
-  const restartTimeout = useRef();
-  const shouldLeave = useRef(false); // clear timeouts to avoid setting state on unmounted component
+  var rippleState = useRef('left');
+
+  var _useState = useState(defaultRipple),
+      _useState2 = _slicedToArray(_useState, 2),
+      ripple = _useState2[0],
+      setRipple = _useState2[1];
+
+  var leavingTimeout = useRef();
+  var enteringTimeout = useRef();
+  var restartTimeout = useRef();
+  var shouldLeave = useRef(false); // clear timeouts to avoid setting state on unmounted component
 
-  useEffect(() => {
-    return () => {
+  useEffect(function () {
+    return function () {
       restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
   }, []); // State handling
 
-  const setLeft = () => {
+  var setLeft = function setLeft() {
     rippleState.current = 'left';
     setRipple(_extends({}, defaultRipple));
   };
 
-  const setLeaving = () => {
+  var setLeaving = function setLeaving() {
     clearTimeout(enteringTimeout.current);
     rippleState.current = 'leaving';
-    setRipple(ripple => _extends({}, ripple));
+    setRipple(function (ripple) {
+      return _extends({}, ripple);
+    });
     leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
   };
 
-  const setEntered = () => {
+  var setEntered = function setEntered() {
     rippleState.current = 'entered';
-    setRipple(ripple => _extends({}, ripple));
+    setRipple(function (ripple) {
+      return _extends({}, ripple);
+    });
 
     if (shouldLeave.current) {
       setLeaving();
     }
   };
 
-  const deactivate = () => {
+  var deactivate = function deactivate() {
     shouldLeave.current = true;
 
     if (rippleState.current === 'entered') {
@@ -103,13 +117,14 @@ export const useRipple = opts => {
     }
   };
 
-  const activate = (rect, clientX, clientY, center = false) => {
+  var activate = function activate(rect, clientX, clientY) {
+    var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     clearTimeout(leavingTimeout.current);
     clearTimeout(enteringTimeout.current);
     shouldLeave.current = false;
     rippleState.current = 'restart';
     setRipple(_extends({}, defaultRipple));
-    restartTimeout.current = requestAnimationFrame(() => {
+    restartTimeout.current = requestAnimationFrame(function () {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
       enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
@@ -117,7 +132,7 @@ export const useRipple = opts => {
   }; // Styling
 
 
-  let animation = undefined;
+  var animation = undefined;
 
   switch (rippleState.current) {
     case 'entering':
@@ -130,29 +145,21 @@ export const useRipple = opts => {
       break;
   }
 
-  let style = {};
+  var style = {};
 
   switch (rippleState.current) {
     case 'entering':
     case 'entered':
     case 'leaving':
-      style = {
-        [RIPPLE_SIZE]: "".concat(ripple.size, "px"),
-        [RIPPLE_POSITION]: "".concat(-ripple.size / 2, "px"),
-        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,
-        [RIPPLE_TRANSLATE_START]: "".concat(ripple.x, "px, ").concat(ripple.y, "px"),
-        [RIPPLE_TRANSLATE_END]: "".concat(ripple.centerX, "px, ").concat(ripple.centerY, "px"),
-        [RIPPLE_OPACITY_END]: opacity,
-        [RIPPLE_SCALE_END]: "".concat(ripple.scale)
-      };
+      style = (_style = {}, _defineProperty(_style, RIPPLE_SIZE, "".concat(ripple.size, "px")), _defineProperty(_style, RIPPLE_POSITION, "".concat(-ripple.size / 2, "px")), _defineProperty(_style, RIPPLE_BACKGROUND_COLOR, backgroundColor), _defineProperty(_style, RIPPLE_TRANSLATE_START, "".concat(ripple.x, "px, ").concat(ripple.y, "px")), _defineProperty(_style, RIPPLE_TRANSLATE_END, "".concat(ripple.centerX, "px, ").concat(ripple.centerY, "px")), _defineProperty(_style, RIPPLE_OPACITY_END, opacity), _defineProperty(_style, RIPPLE_SCALE_END, "".concat(ripple.scale)), _style);
       break;
   }
 
   return {
-    activate,
-    deactivate,
-    style,
-    animation // key: counter,
+    activate: activate,
+    deactivate: deactivate,
+    style: style,
+    animation: animation // key: counter,
 
   };
 };