@onesy/ui-react 1.0.59 → 1.0.63

package/esm/SpeechToText/SpeechToText.js

@@ -1,190 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["size", "SpeechRecognition", "continuous", "interimResults", "grammars", "language", "maxAlternatives", "join", "loading", "disabled", "Icon", "IconStop", "onChange", "onData", "onListen", "onListenStop", "onStart", "onStop", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import { is, isEnvironment } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialStop from '@onesy/icons-material-rounded-react/IconMaterialStopW100';
-import IconMaterialSpeechToText from '@onesy/icons-material-rounded-react/IconMaterialSpeechToTextW100';
-import LineElement from '../Line';
-import TooltipElement from '../Tooltip';
-import IconButtonElement from '../IconButton';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {},
-  iconButton: {
-    '&.onesy-IconButton-root': {
-      transition: theme.methods.transitions.make('transform'),
-      '&:active': {
-        transform: 'scale(0.94)'
-      }
-    }
-  }
-}), {
-  name: 'onesy-SpeechToText'
-});
-const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeechToText?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const {
-      size = 'regular',
-      SpeechRecognition: SpeechRecognition_,
-      continuous = true,
-      interimResults = true,
-      grammars,
-      language = 'en-US',
-      maxAlternatives = 1,
-      join = '. ',
-      loading,
-      disabled,
-      Icon: Icon_ = IconMaterialSpeechToText,
-      IconStop = IconMaterialStop,
-      onChange,
-      onData: onData_,
-      onListen: onListen_,
-      onListenStop: onListenStop_,
-      onStart: onStart_,
-      onStop: onStop_,
-      onError: onError_,
-      TooltipProps,
-      IconButtonProps,
-      IconProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const [status, setStatus] = React.useState('initial');
-  const {
-    classes
-  } = useStyle();
-  const refs = {
-    root: React.useRef(undefined),
-    recognition: React.useRef(undefined),
-    value: React.useRef(''),
-    result: React.useRef([]),
-    status: React.useRef(status)
-  };
-  refs.status.current = status;
-  const supported = isEnvironment('browser') && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
-  const onData = React.useCallback(event => {
-    const value = Array.from(event.results || []).map(item => item[0]?.transcript || '').join('');
-    refs.value.current = value;
-    if (!value) {
-      refs.result.current.push(value);
-    }
-    if (is('function', onData_)) onData_(value);
-  }, [onData_]);
-  const onStart = React.useCallback(async event => {
-    setStatus('started');
-    if (is('function', onStart_)) onStart_(event);
-  }, [onStart_]);
-  const onEnd = React.useCallback(event => {
-    setStatus('initial');
-
-    // result
-    refs.result.current.push(refs.value.current);
-    const response = refs.result.current.join(join);
-    if (is('function', onChange)) onChange(response);
-  }, [onChange, join]);
-  const onError = React.useCallback(event => {
-    if (is('function', onError_)) onError_(event);
-  }, [onError_]);
-  React.useEffect(() => {
-    // previous clean up
-    if (refs.recognition.current) {
-      refs.recognition.current.abort();
-    }
-
-    // make a new instance
-    if (supported) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      const SpeechRecognitionClass = SpeechRecognition_ || window.SpeechRecognition || window.webkitSpeechRecognition;
-      if (SpeechRecognitionClass) {
-        refs.recognition.current = new SpeechRecognitionClass();
-
-        // options
-        if (continuous !== undefined) refs.recognition.current.continuous = continuous;
-        if (interimResults !== undefined) refs.recognition.current.interimResults = interimResults;
-        if (grammars !== undefined) refs.recognition.current.grammars = grammars;
-        if (language !== undefined) refs.recognition.current.lang = language;
-        if (maxAlternatives !== undefined) refs.recognition.current.maxAlternatives = maxAlternatives;
-
-        // events
-        // result
-        refs.recognition.current.addEventListener('start', onStart);
-        refs.recognition.current.addEventListener('end', onEnd);
-        refs.recognition.current.addEventListener('result', onData);
-        refs.recognition.current.addEventListener('error', onError);
-      }
-    }
-    return () => {
-      // Clean up
-      if (refs.recognition.current) {
-        refs.recognition.current.removeEventListener('start', onStart);
-        refs.recognition.current.removeEventListener('end', onEnd);
-        refs.recognition.current.removeEventListener('result', onData);
-        refs.recognition.current.removeEventListener('error', onError);
-      }
-    };
-  }, [SpeechRecognition_, supported, continuous, interimResults, grammars, language, maxAlternatives]);
-  const onCleanUp = React.useCallback(() => {
-    refs.result.current = [];
-    refs.value.current = '';
-  }, []);
-  const onListen = React.useCallback(async event => {
-    if (refs.recognition.current) {
-      // Clean up
-      onCleanUp();
-      refs.recognition.current.start();
-      if (is('function', onListen_)) onListen_(event);
-    }
-  }, [onListen_]);
-  const onListenStop = React.useCallback(async event => {
-    if (refs.recognition.current) {
-      refs.recognition.current.stop();
-      if (is('function', onListenStop_)) onListenStop_(event);
-    }
-  }, [onListenStop_]);
-  const iconProps = _objectSpread({
-    size
-  }, IconProps);
-  const iconButtonProps = _objectSpread({
-    size,
-    loading,
-    disabled
-  }, IconButtonProps);
-  if (!supported) return null;
-  let IconToUse = Icon_;
-  let name = 'Speech to text';
-  if (status === 'started') {
-    IconToUse = IconStop;
-    name = 'Stop';
-  }
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    gap: 1,
-    direction: "row",
-    align: "center",
-    className: classNames([staticClassName('SpeechToText', theme) && [`onesy-SpeechToText-root`, `onesy-SpeechToText-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: name
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: status === 'started' ? onListenStop : onListen
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: classNames([staticClassName('SpeechToText', theme) && [`onesy-SpeechToText-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/React.createElement(IconToUse, iconProps))));
-});
-SpeechToText.displayName = 'onesy-SpeechToText';
-export default SpeechToText;

package/esm/SpeedDial/SpeedDial.js

@@ -1,422 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "open", "openDefault", "onOpen", "onClose", "in", "position", "alignment", "direction", "closeOnClick", "tooltipOpen", "start", "end", "noRotate", "tooltipLabel", "onKeyDown", "disabled", "IconOpen", "Icon", "FabTransitionComponent", "SpeeDialItemTransitionComponent", "IconProps", "TooltipProps", "FabProps", "FabWrapperProps", "FabTransitionComponentProps", "SpeeDialItemTransitionComponentProps", "Component", "className", "children"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import { is, clamp, isBrowser, isEnvironment } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialCloseW100';
-import ZoomElement from '../Zoom';
-import FadeElement from '../Fade';
-import FabElement from '../Fab';
-import TooltipElement from '../Tooltip';
-import LineElement from '../Line';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    position: 'fixed',
-    zIndex: theme.z_index.modal
-  },
-  position_top: {
-    top: '24px'
-  },
-  position_bottom: {
-    bottom: '24px'
-  },
-  alignment_left: {
-    left: '24px',
-    right: 'auto'
-  },
-  alignment_start: {
-    insetInlineStart: '24px',
-    insetInlineEnd: 'auto'
-  },
-  alignment_center: {
-    left: '50%',
-    right: 'auto',
-    transform: 'translateX(-50%)'
-  },
-  alignment_right: {
-    right: '24px',
-    left: 'auto'
-  },
-  alignment_end: {
-    insetInlineEnd: '24px',
-    insetInlineStart: 'auto'
-  },
-  items: {
-    pointerEvents: 'none'
-  },
-  items_position_row: {
-    paddingInline: theme.methods.space.value(2, 'px')
-  },
-  'items_position_row-reverse': {
-    paddingInline: theme.methods.space.value(2, 'px')
-  },
-  items_position_column: {
-    paddingBlock: theme.methods.space.value(2, 'px')
-  },
-  'items_position_column-reverse': {
-    paddingBlock: theme.methods.space.value(2, 'px')
-  },
-  items_open: {
-    pointerEvents: 'auto'
-  },
-  fab: {
-    '&.onesy-Fab-root': {
-      boxShadow: theme.shadows.values.default[6],
-      transition: theme.methods.transitions.make('box-shadow')
-    }
-  },
-  fab_open: {
-    '&.onesy-Fab-root': {
-      boxShadow: theme.shadows.values.default[8]
-    }
-  },
-  iconWrapper: {
-    position: 'relative',
-    lineHeight: '0',
-    transform: 'rotate(-45deg)',
-    transition: theme.methods.transitions.make('transform')
-  },
-  iconWrapper_noRotate: {
-    transform: 'rotate(0deg)'
-  },
-  iconWrapper_open: {
-    transform: 'rotate(0deg)'
-  },
-  icon_absolute: {
-    position: 'absolute',
-    inset: '0'
-  }
-}), {
-  name: 'onesy-SpeedDial'
-});
-const IconWrapper = props => {
-  return /*#__PURE__*/React.createElement("span", props, React.Children.toArray(props.children).map(item => (/*#__PURE__*/React.cloneElement(item, {
-    style: _objectSpread(_objectSpread({}, item.props.style), props.style)
-  }))));
-};
-const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDial?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Zoom = React.useMemo(() => theme?.elements?.Zoom || ZoomElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Fab = React.useMemo(() => theme?.elements?.Fab || FabElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const {
-      tonal = true,
-      color = 'primary',
-      version = 'filled',
-      open: open_,
-      openDefault,
-      onOpen: onOpen_,
-      onClose: onClose_,
-      in: inProp = true,
-      position = 'bottom',
-      alignment = 'end',
-      direction: direction_ = 'top',
-      closeOnClick,
-      tooltipOpen,
-      start,
-      end,
-      noRotate,
-      tooltipLabel,
-      onKeyDown: onKeyDown_,
-      disabled,
-      IconOpen,
-      Icon: Icon_ = IconMaterialClose,
-      FabTransitionComponent = Zoom,
-      SpeeDialItemTransitionComponent: SpeeDialItemTransitionComponent_ = Zoom,
-      IconProps,
-      TooltipProps = {
-        alignment: 'center',
-        interactive: false
-      },
-      FabProps = {
-        elevation: false
-      },
-      FabWrapperProps,
-      FabTransitionComponentProps,
-      SpeeDialItemTransitionComponentProps,
-      Component = 'div',
-      className,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const [focus, setFocus] = React.useState(false);
-  const [hover, setHover] = React.useState(false);
-  const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
-  const {
-    classes
-  } = useStyle();
-  const refs = {
-    root: React.useRef(undefined),
-    fab: React.useRef(undefined),
-    line: React.useRef(undefined)
-  };
-  const direction = direction_;
-  let SpeeDialItemTransitionComponent = SpeeDialItemTransitionComponent_;
-  if (tooltipOpen) SpeeDialItemTransitionComponent = Fade;
-  const onOpen = () => {
-    // Update inner or controlled
-    if (!props.hasOwnProperty('open')) setOpen(true);
-    if (is('function', onOpen_)) onOpen_();
-  };
-  const onClose = () => {
-    // Update inner or controlled
-    if (!props.hasOwnProperty('open')) setOpen(false);
-    setHover(false);
-    setFocus(false);
-    if (is('function', onClose_)) onClose_();
-  };
-  React.useEffect(() => {
-    if (hover) {
-      if (!open) onOpen();
-    } else {
-      if (open) onClose();
-    }
-  }, [hover]);
-  React.useEffect(() => {
-    if (focus) {
-      if (!open) onOpen();
-    } else {
-      if (open && !hover) onClose();
-    }
-  }, [focus]);
-  React.useEffect(() => {
-    if (open_ !== open) setOpen(open_);
-  }, [open_]);
-  const onClick = () => {
-    !open ? onOpen() : onClose();
-  };
-  const onMouseEnter = React.useCallback(event => {
-    if (!disabled && (event.target.contains(refs.fab.current) || event.target.contains(refs.line.current))) {
-      setHover(true);
-    }
-  }, [disabled]);
-  const onMouseLeave = React.useCallback(event => {
-    if (!disabled) {
-      setHover(false);
-    }
-  }, [disabled]);
-  const onFocus = React.useCallback(event => {
-    if (!disabled) {
-      setFocus(true);
-    }
-  }, [disabled]);
-  const onBlur = React.useCallback(event => {
-    if (!disabled) {
-      setFocus(false);
-    }
-  }, [disabled]);
-  let lineDirection = 'row';
-  // Safari bug *-reverse using gap
-  // let lineItemsDirection = 'row-reverse';
-  let lineItemsDirection = !isBrowser('safari') ? 'row-reverse' : 'row';
-  let directionToUse = direction;
-  if (position === 'top') {
-    // Safari bug *-reverse using gap
-    // lineDirection = 'column-reverse';
-    if (!isBrowser('safari')) lineDirection = 'column-reverse';else lineDirection = 'column';
-    lineItemsDirection = 'column';
-    if (alignment === 'left' || alignment === 'start' && theme.direction === 'ltr' || alignment === 'end' && theme.direction === 'rtl') {
-      if (['top', 'bottom'].includes(direction)) directionToUse = 'bottom';
-      if (['left', 'right'].includes(direction)) directionToUse = isBrowser('safari') ? 'bottom' : 'right';
-      if (directionToUse === 'bottom') {
-        TooltipProps.position = 'right';
-      }
-      if (directionToUse === 'right') {
-        TooltipProps.position = 'bottom';
-
-        // Safari bug *-reverse using gap
-        // lineDirection = 'row-reverse';
-        lineDirection = theme.direction === 'ltr' ? 'row-reverse' : 'row';
-        lineItemsDirection = theme.direction === 'ltr' ? 'row' : 'row-reverse';
-      }
-    }
-    if (alignment === 'center') {
-      if (!['bottom'].includes(direction)) directionToUse = 'bottom';
-      if (directionToUse === 'bottom') {
-        TooltipProps.position = 'left';
-      }
-    }
-    if (alignment === 'right' || alignment === 'end' && theme.direction === 'ltr' || alignment === 'start' && theme.direction === 'rtl') {
-      if (['top', 'bottom'].includes(direction)) directionToUse = 'bottom';
-      if (['left', 'right'].includes(direction)) directionToUse = isBrowser('safari') ? 'bottom' : 'left';
-      if (directionToUse === 'bottom') {
-        TooltipProps.position = 'left';
-      }
-      if (directionToUse === 'left') {
-        TooltipProps.position = 'bottom';
-        lineDirection = theme.direction === 'ltr' ? 'row' : 'row-reverse';
-        // Safari bug *-reverse using gap
-        // lineItemsDirection = 'row-reverse';
-        lineItemsDirection = theme.direction === 'ltr' ? 'row-reverse' : 'row';
-      }
-    }
-  }
-  if (position === 'bottom') {
-    lineDirection = 'column';
-    // Safari bug *-reverse using gap
-    // lineItemsDirection = 'column-reverse';
-    if (!isBrowser('safari')) lineItemsDirection = 'column-reverse';else lineItemsDirection = 'column';
-    if (alignment === 'left' || alignment === 'start' && theme.direction === 'ltr' || alignment === 'end' && theme.direction === 'rtl') {
-      if (['top', 'bottom'].includes(direction)) directionToUse = 'top';
-      if (['left', 'right'].includes(direction)) directionToUse = isBrowser('safari') ? 'top' : 'right';
-      if (directionToUse === 'top') {
-        TooltipProps.position = 'right';
-      }
-      if (directionToUse === 'right') {
-        TooltipProps.position = 'top';
-
-        // Safari bug *-reverse using gap
-        // lineDirection = 'row-reverse';
-        lineDirection = theme.direction === 'ltr' ? 'row-reverse' : 'row';
-        lineItemsDirection = theme.direction === 'ltr' ? 'row' : 'row-reverse';
-      }
-    }
-    if (alignment === 'center') {
-      if (!['top'].includes(direction)) directionToUse = 'top';
-      if (directionToUse === 'top') {
-        TooltipProps.position = 'left';
-      }
-    }
-    if (alignment === 'right' || alignment === 'end' && theme.direction === 'ltr' || alignment === 'start' && theme.direction === 'rtl') {
-      if (['top', 'bottom'].includes(direction)) directionToUse = 'top';
-      if (['left', 'right'].includes(direction)) directionToUse = isBrowser('safari') ? 'top' : 'left';
-      if (directionToUse === 'top') {
-        TooltipProps.position = 'left';
-      }
-      if (directionToUse === 'left') {
-        TooltipProps.position = 'top';
-        lineDirection = theme.direction === 'ltr' ? 'row' : 'row-reverse';
-        // Safari bug *-reverse using gap
-        // lineItemsDirection = 'row-reverse';
-        lineItemsDirection = theme.direction === 'ltr' ? 'row-reverse' : 'row';
-      }
-    }
-  }
-  let linePosition = 'row';
-  if (['top', 'bottom'].includes(directionToUse)) linePosition = 'column';
-  if (!tooltipLabel) TooltipProps.open = false;
-  const onKeyDown = event => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    let allElements = [];
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      allElements = [...Array.from(refs.line.current?.children).map(item => item.children[0]).filter(item => {
-        const method = is('element', item) && (item.matches || item['webkitMatchesSelector'] || item['mozMatchesSelector'] || item['oMatchesSelector'] || item['msMatchesSelector']);
-        const query = `a[href]:not([tabindex='-1']), area[href]:not([tabindex='-1']), input:not([disabled]):not([tabindex='-1']), select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']), iframe:not([tabindex='-1']), [tabindex]:not([tabindex='-1']), [contentEditable=true]:not([tabindex='-1'])`;
-        return method.bind(item)(query) || item.tabIndex > -1;
-      })];
-      if (!lineItemsDirection.includes('reverse')) {
-        allElements.reverse();
-        allElements.push(refs.fab.current);
-      } else allElements.unshift(refs.fab.current);
-    }
-    switch (event.key) {
-      case 'Escape':
-        return onClose();
-      case 'ArrowUp':
-      case 'ArrowDown':
-        if (lineItemsDirection.includes('column')) {
-          let index = clamp(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowUp' ? index++ : index--;
-          allElements[clamp(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
-        }
-        return;
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        if (lineItemsDirection.includes('row')) {
-          let index = clamp(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowLeft' ? index++ : index--;
-          allElements[clamp(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
-        }
-        return;
-      default:
-        break;
-    }
-  };
-  const reverse = lineDirection.includes('reverse') || lineItemsDirection.includes('reverse');
-  const elementsChildren = React.Children.toArray(children);
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    gap: 0,
-    direction: lineDirection,
-    align: "center",
-    justify: "center",
-    onKeyDown: onKeyDown,
-    Component: Component,
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-root`, open && `onesy-SpeedDial-open`, hover && `onesy-SpeedDial-hover`, focus && `onesy-SpeedDial-focus`, disabled && `onesy-SpeedDial-disabled`], className, classes.root, classes[`position_${position}`], classes[`alignment_${alignment}`], disabled && classes.disabled])
-  }, other), !!elementsChildren.length && /*#__PURE__*/React.createElement(Line, {
-    ref: refs.line,
-    gap: 1,
-    direction: lineItemsDirection,
-    align: "center",
-    justify: "center",
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-items`], classes.items, classes[`items_position_${linePosition}`], open && classes.items_open])
-  }, elementsChildren.map((item, index) => /*#__PURE__*/React.createElement(SpeeDialItemTransitionComponent, _extends({
-    key: index,
-    in: open,
-    delay: (open && !reverse || !open && reverse ? children.length - 1 - index : index) * 30,
-    append: true,
-    add: true,
-    removeOnExited: true,
-    addTransition: theme.methods.transitions.make('box-shadow')
-  }, SpeeDialItemTransitionComponentProps), /*#__PURE__*/React.cloneElement(item, {
-    open,
-    tonal,
-    color,
-    version,
-    tooltipOpen,
-    onClick: event => {
-      if (item.props.closeOnClick !== undefined ? item.props.closeOnClick : closeOnClick) onClose();
-      if (is('function', item.props.onClick)) item.props.onClick(event);
-    },
-    onBlur,
-    onFocus,
-    TooltipProps: _objectSpread({}, TooltipProps)
-  })))), /*#__PURE__*/React.createElement(FabTransitionComponent, _extends({
-    in: inProp
-  }, FabTransitionComponentProps), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 1,
-    direction: "column"
-  }, FabWrapperProps), start, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: tooltipLabel
-  }, TooltipProps), /*#__PURE__*/React.createElement(Fab, _extends({
-    ref: refs.fab,
-    tonal: tonal,
-    color: color,
-    version: version,
-    onClick: onClick,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-fab`], classes.fab, open && classes.fab_open])
-  }, FabProps, {
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(IconWrapper, {
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-icon-wrapper`], classes.iconWrapper, noRotate && classes.iconWrapper_noRotate, open && classes.iconWrapper_open])
-  }, !IconOpen ? /*#__PURE__*/React.createElement(Icon_, IconProps) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(Icon_, _extends({}, IconProps, {
-    className: classNames([IconProps?.className, classes.icon_absolute])
-  }))), /*#__PURE__*/React.createElement(Fade, {
-    in: open
-  }, /*#__PURE__*/React.createElement(IconOpen, IconProps)))))), end)));
-});
-SpeedDial.displayName = 'onesy-SpeedDial';
-export default SpeedDial;