@onesy/ui-react 1.0.59 → 1.0.63

package/esm/SpeedDialItem/SpeedDialItem.js

@@ -1,79 +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 = ["open", "name", "label", "tooltipOpen", "closeOnClick", "render", "onBlur", "onFocus", "Icon", "TooltipProps", "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 } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import TooltipElement from '../Tooltip';
-import IconButtonElement from '../IconButton';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    position: 'relative',
-    lineHeight: '0'
-  },
-  no_render: {
-    '& .onesy-Button-root': {
-      boxShadow: theme.shadows.values.default[6],
-      '&:hover': {
-        boxShadow: theme.shadows.values.default[8]
-      },
-      '&.onesy-Button-focus': {
-        boxShadow: theme.shadows.values.default[8]
-      }
-    }
-  }
-}), {
-  name: 'onesy-SpeedDialItem'
-});
-const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDialItem?.props?.default), props_), [props_]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const {
-      open,
-      name,
-      label: label_,
-      tooltipOpen,
-      closeOnClick,
-      render,
-      onBlur,
-      onFocus,
-      Icon,
-      TooltipProps = {
-        alignment: 'center',
-        interactive: false
-      },
-      Component = 'div',
-      className,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  delete TooltipProps.open;
-  if (tooltipOpen) TooltipProps.open = true;
-  const label = name !== undefined ? name : label_;
-  return /*#__PURE__*/React.createElement(Component, {
-    ref: ref,
-    className: classNames([staticClassName('SpeedDialItem', theme) && [`onesy-SpeedDialItem-root`], className, classes.root, !is('function', render) && classes.no_render])
-  }, is('function', render) ? render(_objectSpread({
-    onBlur,
-    onFocus,
-    TooltipProps
-  }, other)) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: label,
-    portal: true,
-    nowrap: true
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onBlur: onBlur,
-    onFocus: onFocus
-  }, other), /*#__PURE__*/React.createElement(Icon, null))));
-});
-SpeedDialItem.displayName = 'onesy-SpeedDialItem';
-export default SpeedDialItem;

package/esm/TableCell/TableCell.js

@@ -1,241 +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", "size", "position", "align", "justify", "noWeight", "sort", "sortedBy", "sortedByDefault", "onSort", "sticky", "stickyPosition", "stickyOffset", "disabled", "IconArrow", "IconButtonSortProps", "TypeProps", "DividerProps", "Component", "className", "style", "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 { clamp, is } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialArrowDownwardAlt from '@onesy/icons-material-rounded-react/IconMaterialArrowDownwardAltW100';
-import LineElement from '../Line';
-import IconButtonElement from '../IconButton';
-import TypeElement from '../Type';
-import DividerElement from '../Divider';
-import { getOverflowParent, staticClassName } from '../utils';
-import Tooltip from '../Tooltip';
-const useStyle = styleMethod(theme => ({
-  root: _objectSpread(_objectSpread({
-    display: 'table-cell',
-    position: 'relative',
-    zIndex: '1',
-    background: 'inherit'
-  }, theme.typography.values.b2), {}, {
-    '&::before': {
-      content: "''",
-      position: 'absolute',
-      inset: '0',
-      background: 'currentColor',
-      opacity: '0',
-      transition: theme.methods.transitions.make('opacity', {
-        duration: 'xxs'
-      }),
-      zIndex: '-1'
-    }
-  }),
-  value: {},
-  size_small: {
-    padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
-  },
-  size_regular: {
-    padding: theme.methods.space.value(2, 'px')
-  },
-  size_large: {
-    padding: theme.methods.space.value(3, 'px')
-  },
-  head: {
-    fontWeight: 'bold'
-  },
-  body: {},
-  divider: {
-    '&.onesy-Divider-root': {
-      position: 'absolute',
-      left: '0px',
-      bottom: '0px',
-      margin: '0px'
-    }
-  },
-  noWeight: {
-    fontWeight: '400'
-  },
-  sticky: {
-    position: 'sticky',
-    zIndex: '14',
-    '&::after': {
-      content: "''",
-      position: 'absolute',
-      top: '0',
-      right: '-24px',
-      bottom: '0',
-      width: '24px',
-      transition: theme.methods.transitions.make('box-shadow'),
-      pointerEvents: 'none'
-    }
-  },
-  stickyActive: {
-    '&::after': {
-      boxShadow: `inset 11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
-    }
-  },
-  sort: {
-    cursor: 'pointer',
-    borderRadius: 2,
-    '& > *:nth-child(1)': {
-      // '&:focus': {
-      //   outline: `1px solid ${theme.palette.text.default.primary}`,
-      //   outlineOffset: 2
-      // }
-    }
-  },
-  sortedBy: {
-    '& .onesy-Icon-root': {
-      transition: theme.methods.transitions.make('transform')
-    }
-  },
-  sortedBy_asc: {
-    '& .onesy-Icon-root': {
-      transform: 'rotate(180deg)'
-    }
-  }
-}), {
-  name: 'onesy-TableCell'
-});
-const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableCell?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const {
-      tonal = true,
-      color,
-      size = 'regular',
-      position = 'body',
-      align = 'center',
-      justify = 'flex-end',
-      noWeight,
-      sort,
-      sortedBy: sortedBy_,
-      sortedByDefault,
-      onSort: onSort_,
-      sticky,
-      stickyPosition = 'left',
-      stickyOffset,
-      disabled,
-      IconArrow = IconMaterialArrowDownwardAlt,
-      IconButtonSortProps,
-      TypeProps,
-      DividerProps,
-      Component = props.position === 'head' ? 'th' : 'td',
-      className,
-      style,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const [root, setRoot] = React.useState();
-  const [stickyActive, setStickyActive] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const [sortedBy, setSortedBy] = React.useState(sortedByDefault);
-  const refs = {
-    root: React.useRef(undefined)
-  };
-  const init = React.useCallback(() => {
-    setTimeout(() => {
-      if (sticky) {
-        const parent = refs.root.current?.parentElement;
-        if (parent) {
-          const elements = Array.from(parent.children);
-          const index = elements.findIndex(item => item === refs.root.current);
-          let elementsOffset = stickyPosition === 'left' ? elements.slice(0, index) : elements.slice(index + 1);
-          elementsOffset = elementsOffset.filter(item => item.classList.contains('onesy-TableCell-sticky'));
-          const offset_ = elementsOffset.reduce((result, item) => {
-            result += item.clientWidth;
-            return result;
-          }, 0);
-          setOffset(clamp(offset_, 0));
-        }
-      }
-    }, 140);
-  }, [sticky, stickyPosition]);
-  React.useEffect(() => {
-    // init
-    init();
-  }, []);
-  React.useEffect(() => {
-    if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
-  }, [sortedBy_]);
-  React.useEffect(() => {
-    if (sticky) {
-      if (root) {
-        const parentOverflow = getOverflowParent(root);
-        const offsetPrevious = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
-        const method = () => {
-          const offsetNew = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
-          setStickyActive(offsetPrevious !== offsetNew);
-        };
-        if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
-          passive: false
-        });
-        return () => {
-          parentOverflow.removeEventListener('scroll', method);
-        };
-      }
-    }
-  }, [sticky, stickyPosition, root]);
-  const onSort = React.useCallback(() => {
-    let valueNew;
-    setSortedBy(item => {
-      valueNew = item === 'asc' ? 'desc' : 'asc';
-      return valueNew;
-    });
-    if (is('function', onSort_)) onSort_(valueNew);
-  }, [onSort_]);
-  const stylesOther = {};
-  if (sticky) {
-    stylesOther[stickyPosition === 'left' ? 'left' : 'right'] = offset + (stickyOffset !== undefined ? stickyOffset : 0);
-    if (position === 'head') stylesOther.zIndex = '17';
-  }
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);
-        ref.current = item;
-      }
-      refs.root.current = item;
-      setRoot(item);
-    },
-    role: "cell",
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-root`, `onesy-TableCell-size-${size}`, sticky && `onesy-TableCell-sticky`, stickyPosition && `onesy-TableCell-sticky-position-${stickyPosition}`, stickyActive && `onesy-TableHead-sticky-active`], className, classes.root, position === 'head' ? classes.head : classes.body, noWeight && classes.noWeight, sticky && classes.sticky, stickyActive && classes.stickyActive]),
-    style: _objectSpread(_objectSpread({}, style), stylesOther)
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: align,
-    justify: justify,
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value`], classes.value, classes[`size_${size}`], sort !== undefined && classes.sort])
-  }, is('simple', children) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: "l2",
-    tabIndex: sort !== undefined ? 0 : undefined
-  }, TypeProps, {
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value-type`], TypeProps?.className])
-  }), children) : children && /*#__PURE__*/React.cloneElement(children, {
-    tabIndex: sort !== undefined ? 0 : undefined
-  }), sort && /*#__PURE__*/React.createElement(Tooltip, {
-    name: sortedBy === 'asc' ? 'Ascending' : 'Descending'
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: onSort,
-    disabled: disabled,
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-sort-icon-button`], classes.sortedBy, classes[`sortedBy_${sortedBy}`]])
-  }, /*#__PURE__*/React.createElement(IconArrow, null)))), /*#__PURE__*/React.createElement(Divider, _extends({
-    color: "inherit"
-  }, DividerProps, {
-    className: classNames([DividerProps?.className, classes.divider])
-  })));
-});
-TableCell.displayName = 'onesy-TableCell';
-export default TableCell;

package/esm/TablePagination/TablePagination.js

@@ -1,148 +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", "elevation", "size", "page", "pageDefault", "onChange", "rowsPerPage", "rowsPerPageDefault", "rowsPerPageOptions", "rowsPerPageText", "onRowsPerPageChange", "total", "first", "before", "next", "last", "IconFirst", "IconBefore", "IconNext", "IconLast", "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 { clamp, is } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialLastPage from '@onesy/icons-material-rounded-react/IconMaterialLastPageW100';
-import IconMaterialFirstPage from '@onesy/icons-material-rounded-react/IconMaterialFirstPageW100';
-import IconMaterialNavigateNext from '@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100';
-import IconMaterialNavigateBefore from '@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100';
-import LineElement from '../Line';
-import TypeElement from '../Type';
-import SelectElement from '../Select';
-import ListItemElement from '../ListItem';
-import IconButtonElement from '../IconButton';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {},
-  select: {
-    minWidth: '140px'
-  },
-  text: {
-    flex: '0 0 auto'
-  }
-}), {
-  name: 'onesy-TablePagination'
-});
-const TablePagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTablePagination?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Select = React.useMemo(() => theme?.elements?.Select || SelectElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const {
-      tonal = false,
-      color = 'default',
-      version = 'text',
-      elevation = false,
-      size = 'regular',
-      page: page_ = 0,
-      pageDefault,
-      onChange,
-      rowsPerPage: rowsPerPage_ = props.total < 4 ? props.total : props.total * 0.05,
-      rowsPerPageDefault,
-      rowsPerPageOptions = props.total < 4 ? [props.total] : [props.total * 0.05, props.total * 0.1, props.total * 0.25, props.total * 0.5, props.total],
-      rowsPerPageText = 'Rows per page',
-      onRowsPerPageChange,
-      total,
-      first = false,
-      before = true,
-      next = true,
-      last = false,
-      IconFirst = IconMaterialFirstPage,
-      IconBefore = IconMaterialNavigateBefore,
-      IconNext = IconMaterialNavigateNext,
-      IconLast = IconMaterialLastPage,
-      Component = 'div',
-      className,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const [page, setPage] = React.useState(pageDefault !== undefined ? pageDefault : page_);
-  const [rowsPerPage, setRowsPerPage] = React.useState(rowsPerPageDefault !== undefined ? rowsPerPageDefault : rowsPerPage_);
-  React.useEffect(() => {
-    if (rowsPerPage_ !== rowsPerPage) setRowsPerPage(rowsPerPage_);
-  }, [rowsPerPage_]);
-  const onUpdateRowsPerPage = value => {
-    // Update inner or controlled
-    if (!props.hasOwnProperty('rowsPerPage')) setRowsPerPage(value);
-    if (is('function', onRowsPerPageChange)) onRowsPerPageChange(value);
-    update(0);
-  };
-  const update = value => {
-    // Update inner or controlled
-    if (!props.hasOwnProperty('page')) setPage(value);
-    if (is('function', onChange)) onChange(value);
-  };
-  const maxPage = Math.ceil(total / rowsPerPage) - 1;
-  const IconButtonProps = {
-    tonal,
-    color,
-    version,
-    elevation,
-    size
-  };
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: 3,
-    direction: "row",
-    justify: "flex-start",
-    align: "center",
-    Component: Component,
-    className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-root`, `onesy-TablePagination-version-${version}`, `onesy-TablePagination-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Select, {
-    tonal: tonal,
-    color: color,
-    label: rowsPerPageText,
-    size: "small",
-    value: rowsPerPage,
-    onChange: onUpdateRowsPerPage,
-    className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-select`], classes.select])
-  }, rowsPerPageOptions.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item,
-    primary: item,
-    value: item,
-    button: true
-  })))), /*#__PURE__*/React.createElement(Type, {
-    version: "b2",
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center",
-    Component: Line,
-    className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-text`], classes.text])
-  }, /*#__PURE__*/React.createElement("span", null, page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total), " ", /*#__PURE__*/React.createElement("span", null, "of"), " ", /*#__PURE__*/React.createElement("span", null, total)), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center"
-  }, first && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(0),
-    disabled: page === 0
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconFirst, null)), before && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(clamp(page - 1, 0, maxPage)),
-    disabled: page === 0
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBefore, null)), next && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(clamp(page + 1, 0, maxPage)),
-    disabled: page === maxPage
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, null)), last && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(maxPage),
-    disabled: page === maxPage
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconLast, null))));
-});
-TablePagination.displayName = 'onesy-TablePagination';
-export default TablePagination;

package/esm/TextToSpeech/TextToSpeech.js

@@ -1,161 +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", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "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, wait } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialPause from '@onesy/icons-material-rounded-react/IconMaterialPauseW100';
-import IconMaterialTextToSpeech from '@onesy/icons-material-rounded-react/IconMaterialTextToSpeechW100';
-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-TextToSpeech'
-});
-const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextToSpeech?.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',
-      read,
-      speechSynthesisUtterance,
-      language,
-      pitch,
-      rate,
-      text,
-      voice,
-      volume,
-      loading,
-      disabled,
-      Icon: Icon_ = IconMaterialTextToSpeech,
-      IconPause = IconMaterialPause,
-      onStart: onStart_,
-      onPause: onPause_,
-      onResume: onResume_,
-      onEnd: onEnd_,
-      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),
-    status: React.useRef(status)
-  };
-  refs.status.current = status;
-  const supported = isEnvironment('browser') && 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
-  const onPause = React.useCallback(async event => {
-    setStatus('paused');
-    if (is('function', onPause_)) onPause_(event);
-  }, [onPause_]);
-  const onResume = React.useCallback(async event => {
-    setStatus('resumed');
-    if (is('function', onResume_)) onResume_(event);
-  }, [onResume_]);
-  const onEnd = React.useCallback(event => {
-    setStatus('initial');
-    if (is('function', onEnd_)) onEnd_(event);
-  }, [onEnd_]);
-  const onError = React.useCallback(event => {
-    setStatus('initial');
-    if (is('function', onError_)) onError_(event);
-  }, [onError_]);
-  React.useEffect(() => {
-    // Clean up previous utterance
-    // if there was any
-    if (supported) {
-      window.speechSynthesis.cancel();
-      setStatus('initial');
-    }
-  }, [read, speechSynthesisUtterance, supported, language, pitch, rate, text, voice, volume]);
-  const onStart = React.useCallback(async event => {
-    if (supported && is('string', read)) {
-      setStatus('started');
-      window.speechSynthesis.cancel();
-      await wait(140);
-      const utterance = speechSynthesisUtterance || new SpeechSynthesisUtterance(read);
-
-      // properties
-      if (language !== undefined) utterance.lang = language;
-      if (pitch !== undefined) utterance.pitch = pitch;
-      if (rate !== undefined) utterance.rate = rate;
-      if (text !== undefined) utterance.text = text;
-      if (voice !== undefined) utterance.voice = voice;
-      if (volume !== undefined) utterance.volume = volume;
-
-      // events
-      utterance.addEventListener('pause', onPause);
-      utterance.addEventListener('resume', onResume);
-      utterance.addEventListener('end', onEnd);
-      utterance.addEventListener('error', onError);
-      window.speechSynthesis.speak(utterance);
-      if (is('function', onStart_)) onStart_(event);
-    }
-  }, [read, speechSynthesisUtterance, supported, onStart_, onPause, onResume, onEnd, language, pitch, rate, text, voice, volume]);
-  const onClick = React.useCallback(async () => {
-    const status_ = refs.status.current;
-    if (['started', 'resumed'].includes(status_)) window.speechSynthesis.pause();else if (status_ === 'paused') window.speechSynthesis.resume();else if (status_ === 'initial') onStart();
-  }, [onStart]);
-  const iconProps = _objectSpread({
-    size
-  }, IconProps);
-  const iconButtonProps = _objectSpread({
-    size,
-    loading,
-    disabled
-  }, IconButtonProps);
-  if (!supported) return null;
-  let IconToUse = Icon_;
-  let name = 'Text to speech';
-  if (['started', 'resumed'].includes(status)) {
-    IconToUse = IconPause;
-    name = 'Pause';
-  }
-  if (status === 'paused') name = 'Resume';
-  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('TextToSpeech', theme) && [`onesy-TextToSpeech-root`, `onesy-TextToSpeech-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: name
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onClick
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: classNames([staticClassName('TextToSpeech', theme) && [`onesy-TextToSpeech-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/React.createElement(IconToUse, iconProps))));
-});
-TextToSpeech.displayName = 'onesy-TextToSpeech';
-export default TextToSpeech;