@helpdice/ui 1.7.5 → 1.7.8

package/esm/ui-provider/theme-provider.js

@@ -1,45 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/* "use client" */
-
-import React from 'react';
-import Themes from '../themes';
-import { ThemeContext } from '../use-theme/theme-context';
-import { AllThemesContext } from '../use-all-themes/all-themes-context';
-var ThemeProvider = function ThemeProvider(_ref) {
-  var children = _ref.children,
-    themeType = _ref.themeType,
-    _ref$themes = _ref.themes,
-    themes = _ref$themes === void 0 ? [] : _ref$themes;
-  var _React$useState = React.useState({
-      themes: Themes.getPresets()
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    allThemes = _React$useState2[0],
-    setAllThemes = _React$useState2[1];
-  var currentTheme = React.useMemo(function () {
-    var theme = allThemes.themes.find(function (item) {
-      return item.type === themeType;
-    });
-    if (theme) return theme;
-    return Themes.getPresetStaticTheme();
-  }, [allThemes, themeType]);
-  React.useEffect(function () {
-    if (!(themes !== null && themes !== void 0 && themes.length)) return;
-    setAllThemes(function (last) {
-      var safeThemes = themes.filter(function (item) {
-        return Themes.isAvailableThemeType(item.type);
-      });
-      var nextThemes = Themes.getPresets().concat(safeThemes);
-      return _extends({}, last, {
-        themes: nextThemes
-      });
-    });
-  }, [themes]);
-  return /*#__PURE__*/React.createElement(AllThemesContext.Provider, {
-    value: allThemes
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: currentTheme
-  }, children));
-};
-export default ThemeProvider;

package/esm/ui-provider/ui-provider.d.ts

@@ -1,8 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { HUIThemes } from '../themes/presets';
-export type UiProviderProps = {
-    themes?: Array<HUIThemes>;
-    themeType?: string | 'dark' | 'light';
-};
-declare const HuiProvider: React.FC<PropsWithChildren<UiProviderProps>>;
-export default HuiProvider;

package/esm/ui-provider/ui-provider.js

@@ -1,55 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/* "use client" */
-
-import React from 'react';
-import { HUIContent, defaultToastLayout } from '../utils/use-hd-ui-context';
-import ThemeProvider from './theme-provider';
-import useCurrentState from '../utils/use-current-state';
-import ToastContainer from '../use-toasts/toast-container';
-var HuiProvider = function HuiProvider(_ref) {
-  var themes = _ref.themes,
-    themeType = _ref.themeType,
-    children = _ref.children;
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    lastUpdateToastId = _React$useState2[0],
-    setLastUpdateToastId = _React$useState2[1];
-  var _useCurrentState = useCurrentState([]),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    toasts = _useCurrentState2[0],
-    setToasts = _useCurrentState2[1],
-    toastsRef = _useCurrentState2[2];
-  var _useCurrentState3 = useCurrentState(defaultToastLayout),
-    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
-    toastLayout = _useCurrentState4[0],
-    setToastLayout = _useCurrentState4[1],
-    toastLayoutRef = _useCurrentState4[2];
-  var updateToasts = function updateToasts(fn) {
-    var nextToasts = fn(toastsRef.current);
-    setToasts(nextToasts);
-  };
-  var updateToastLayout = function updateToastLayout(fn) {
-    var nextLayout = fn(toastLayoutRef.current);
-    setToastLayout(nextLayout);
-  };
-  var updateLastToastId = function updateLastToastId(fn) {
-    setLastUpdateToastId(fn());
-  };
-  var initialValue = React.useMemo(function () {
-    return {
-      toasts: toasts,
-      toastLayout: toastLayout,
-      updateToasts: updateToasts,
-      lastUpdateToastId: lastUpdateToastId,
-      updateToastLayout: updateToastLayout,
-      updateLastToastId: updateLastToastId
-    };
-  }, [toasts, toastLayout, lastUpdateToastId]);
-  return /*#__PURE__*/React.createElement(HUIContent.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    themes: themes,
-    themeType: themeType
-  }, children, /*#__PURE__*/React.createElement(ToastContainer, null)));
-};
-export default HuiProvider;

package/esm/use-all-themes/all-themes-context.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { HUIThemes } from '../themes/presets';
-export type AllThemesConfig = {
-    themes: Array<HUIThemes>;
-};
-export declare const AllThemesContext: React.Context<AllThemesConfig>;
-export declare const useAllThemes: () => AllThemesConfig;

package/esm/use-all-themes/all-themes-context.js

@@ -1,11 +0,0 @@
-/* "use client" */
-
-import React from 'react';
-import Themes from '../themes/themes';
-var defaultAllThemesConfig = {
-  themes: Themes.getPresets()
-};
-export var AllThemesContext = /*#__PURE__*/React.createContext(defaultAllThemesConfig);
-export var useAllThemes = function useAllThemes() {
-  return React.useContext(AllThemesContext);
-};

package/esm/use-all-themes/index.d.ts

@@ -1,3 +0,0 @@
-import { useAllThemes } from './all-themes-context';
-export type { AllThemesConfig } from './all-themes-context';
-export default useAllThemes;

package/esm/use-all-themes/index.js

@@ -1,2 +0,0 @@
-import { useAllThemes } from './all-themes-context';
-export default useAllThemes;

package/esm/use-classes/index.d.ts

@@ -1,2 +0,0 @@
-import { default as useClasses } from './use-classes';
-export default useClasses;

package/esm/use-classes/index.js

@@ -1,2 +0,0 @@
-import { default as useClasses } from './use-classes';
-export default useClasses;

package/esm/use-classes/use-classes.d.ts

@@ -1,4 +0,0 @@
-export type classNamesObject = Record<string, boolean | string | number | null | undefined>;
-export type className = string | classNamesObject | null | undefined | boolean | number;
-declare const useClasses: (...classNames: Array<className>) => string;
-export default useClasses;

package/esm/use-classes/use-classes.js

@@ -1,34 +0,0 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-/* "use client" */
-
-var classObjectToString = function classObjectToString(className) {
-  var keys = Object.keys(className);
-  var len = keys.length;
-  var str = '';
-  for (var index = 0; index < len; index++) {
-    var key = keys[index];
-    var val = className[keys[index]];
-    if (!val) continue;
-    str = str ? "".concat(str, " ").concat(String(key)) : String(key);
-  }
-  return str;
-};
-var isObjectClassName = function isObjectClassName(value) {
-  return _typeof(value) === 'object' && !Array.isArray(value);
-};
-var useClasses = function useClasses() {
-  var len = arguments.length;
-  var classes = '';
-  if (len === 0) return classes;
-  for (var index = 0; index < len; index++) {
-    var val = index < 0 || arguments.length <= index ? undefined : arguments[index];
-    if (!val) continue;
-    if (isObjectClassName(val)) {
-      classes += " ".concat(classObjectToString(val));
-    } else {
-      classes += " ".concat(String(val).trim());
-    }
-  }
-  return classes.trim();
-};
-export default useClasses;

package/esm/use-current-state/index.d.ts

@@ -1,2 +0,0 @@
-import useCurrentState from './use-current-state';
-export default useCurrentState;

package/esm/use-current-state/index.js

@@ -1,2 +0,0 @@
-import useCurrentState from './use-current-state';
-export default useCurrentState;

package/esm/use-current-state/use-current-state.d.ts

@@ -1,4 +0,0 @@
-import { Dispatch, MutableRefObject, SetStateAction } from 'react';
-export type CurrentStateType<S> = [S, Dispatch<SetStateAction<S>>, MutableRefObject<S>];
-declare const useCurrentState: <S>(initialState: S | (() => S)) => CurrentStateType<S>;
-export default useCurrentState;

package/esm/use-current-state/use-current-state.js

@@ -1,23 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/* "use client" */
-
-import { useEffect, useRef, useState } from 'react';
-var useCurrentState = function useCurrentState(initialState) {
-  var _useState = useState(function () {
-      return typeof initialState === 'function' ? initialState() : initialState;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var ref = useRef(initialState);
-  useEffect(function () {
-    ref.current = state;
-  }, [state]);
-  var setValue = function setValue(val) {
-    var result = typeof val === 'function' ? val(ref.current) : val;
-    ref.current = result;
-    setState(result);
-  };
-  return [state, setValue, ref];
-};
-export default useCurrentState;

package/esm/use-media-query/index.d.ts

@@ -1,3 +0,0 @@
-import useMediaQuery from './use-media-query';
-export type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query';
-export default useMediaQuery;

package/esm/use-media-query/index.js

@@ -1,2 +0,0 @@
-import useMediaQuery from './use-media-query';
-export default useMediaQuery;

package/esm/use-media-query/use-media-query.d.ts

@@ -1,12 +0,0 @@
-declare const breakpoints: ["xs", "sm", "md", "lg", "xl", "mobile"];
-export type ResponsiveBreakpoint = typeof breakpoints[number];
-declare const matchType: ["up", "down", "default"];
-export type ResponsiveMatchType = typeof matchType[number];
-export type ResponsiveOptions = {
-    match?: ResponsiveMatchType;
-    ssrMatchMedia?: (query: string) => {
-        matches: boolean;
-    };
-};
-declare const useMediaQuery: (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) => boolean;
-export default useMediaQuery;

package/esm/use-media-query/use-media-query.js

@@ -1,81 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/* "use client" */
-
-import { useEffect, useMemo, useState } from 'react';
-import useTheme from '../use-theme';
-import { tuple } from '../utils/prop-types';
-var breakpoints = tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile');
-var matchType = tuple('up', 'down', 'default');
-var defaultResponsiveOptions = {
-  match: 'default'
-};
-var makeQueries = function makeQueries(bp, up, down) {
-  var queryString = function queryString(item) {
-    var upQuery = "(min-width: ".concat(item.min, ")");
-    var downQuery = "(max-width: ".concat(item.max, ")");
-    return up ? upQuery : down ? downQuery : "".concat(upQuery, " and ").concat(downQuery);
-  };
-  var xs = queryString(bp.xs);
-  return {
-    xs: xs,
-    mobile: xs,
-    sm: queryString(bp.sm),
-    md: queryString(bp.md),
-    lg: queryString(bp.lg),
-    xl: queryString(bp.xl)
-  };
-};
-var useMediaQuery = function useMediaQuery(breakpoint) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultResponsiveOptions;
-  var _options$match = options.match,
-    matchType = _options$match === void 0 ? 'default' : _options$match,
-    _options$ssrMatchMedi = options.ssrMatchMedia,
-    ssrMatchMedia = _options$ssrMatchMedi === void 0 ? null : _options$ssrMatchMedi;
-  var supportMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-  var theme = useTheme();
-  var mediaQueries = useMemo(function () {
-    var up = matchType === 'up';
-    var down = matchType === 'down';
-    return makeQueries(theme.breakpoints, up, down);
-  }, [theme.breakpoints, options]);
-  var query = useMemo(function () {
-    return mediaQueries[breakpoint];
-  }, [mediaQueries, breakpoint]);
-  var matchQuery = function matchQuery(q) {
-    return window.matchMedia(q);
-  };
-
-  /**
-   * Do nothing in the server-side rendering.
-   * If server match query fucntion is simulated, return user-defined value first.
-   */
-  var _useState = useState(function () {
-      if (supportMedia) return matchQuery(query).matches;
-      if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {
-        return ssrMatchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  useEffect(function () {
-    if (!supportMedia) return;
-    var queryList = matchQuery(query);
-    var update = function update() {
-      return setState(matchQuery(query).matches);
-    };
-    update();
-
-    /**
-     * addListener is deprecated. EventTarget.addEventListener is recommended.
-     * But in some old browsers, MediaQueryList does not inherit from EventTarget.
-     */
-    queryList.addListener(update);
-    return function () {
-      queryList.removeListener(update);
-    };
-  }, [supportMedia]);
-  return state;
-};
-export default useMediaQuery;

package/esm/use-theme/index.d.ts

@@ -1,2 +0,0 @@
-import { useTheme } from './theme-context';
-export default useTheme;

package/esm/use-theme/index.js

@@ -1,2 +0,0 @@
-import { useTheme } from './theme-context';
-export default useTheme;

package/esm/use-theme/theme-context.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { HUIThemes } from '../themes/presets';
-export declare const ThemeContext: React.Context<HUIThemes>;
-export declare const useTheme: () => HUIThemes;

package/esm/use-theme/theme-context.js

@@ -1,9 +0,0 @@
-/* "use client" */
-
-import React from 'react';
-import Themes from '../themes';
-var defaultTheme = Themes.getPresetStaticTheme();
-export var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
-export var useTheme = function useTheme() {
-  return React.useContext(ThemeContext);
-};

package/esm/use-toasts/helpers.d.ts

@@ -1,18 +0,0 @@
-import { Toast } from './use-toast';
-import React from 'react';
-import { HUIThemesPalette } from '../themes';
-import { NormalTypes } from '../utils/prop-types';
-export declare const makeToastActions: (actions: Toast["actions"], cancelHandle: () => void) => React.JSX.Element[] | null;
-export declare const getColors: (palette: HUIThemesPalette, type?: NormalTypes) => {
-    bgColor: string;
-    color: string;
-};
-declare const toastPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
-export type ToastPlacement = typeof toastPlacement[number];
-export declare const isTopPlacement: (placement: ToastPlacement) => boolean;
-export declare const isLeftPlacement: (placement: ToastPlacement) => boolean;
-export declare const getTranslateByPlacement: (placement: ToastPlacement) => {
-    enter: string;
-    leave: string;
-};
-export {};

package/esm/use-toasts/helpers.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import Button from '../button';
-import { tuple } from '../utils/prop-types';
-export var makeToastActions = function makeToastActions(actions, cancelHandle) {
-  var handler = function handler(event, userHandler) {
-    userHandler && userHandler(event, cancelHandle);
-  };
-  if (!actions || !actions.length) return null;
-  return actions.map(function (action, index) {
-    return /*#__PURE__*/React.createElement(Button, {
-      auto: true,
-      scale: 1 / 3,
-      font: "13px",
-      color: action.passive ? 'default' : 'secondary',
-      key: "action-".concat(index),
-      onClick: function onClick(event) {
-        return handler(event, action.handler);
-      }
-    }, action.name);
-  });
-};
-export var getColors = function getColors(palette, type) {
-  var colors = {
-    "default": palette.background,
-    secondary: palette.secondary,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error
-  };
-  var isDefault = !type || type === 'default';
-  if (isDefault) return {
-    bgColor: colors["default"],
-    color: palette.foreground
-  };
-  /**
-   * Prevent main color change in special types.
-   * The color will only follow the theme when it is in the default type.
-   */
-  return {
-    bgColor: colors[type],
-    color: 'white'
-  };
-};
-var toastPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
-export var isTopPlacement = function isTopPlacement(placement) {
-  return "".concat(placement).toLowerCase().startsWith('top');
-};
-export var isLeftPlacement = function isLeftPlacement(placement) {
-  return "".concat(placement).toLowerCase().endsWith('left');
-};
-export var getTranslateByPlacement = function getTranslateByPlacement(placement) {
-  var translateInByPlacement = {
-    topLeft: 'translate(-60px, -60px)',
-    topRight: 'translate(60px, -60px)',
-    bottomLeft: 'translate(-60px, 60px)',
-    bottomRight: 'translate(60px, 60px)'
-  };
-  var translateOutByPlacement = {
-    topLeft: 'translate(-50px, 15px) scale(0.85)',
-    topRight: 'translate(50px, 15px) scale(0.85)',
-    bottomLeft: 'translate(-50px, -15px) scale(0.85)',
-    bottomRight: 'translate(50px, -15px) scale(0.85)'
-  };
-  return {
-    enter: translateInByPlacement[placement],
-    leave: translateOutByPlacement[placement]
-  };
-};

package/esm/use-toasts/index.d.ts

@@ -1,3 +0,0 @@
-import useToasts from './use-toast';
-export type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from './use-toast';
-export default useToasts;

package/esm/use-toasts/index.js

@@ -1,2 +0,0 @@
-import useToasts from './use-toast';
-export default useToasts;

package/esm/use-toasts/toast-container.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ToastContainer: React.FC<React.PropsWithChildren<unknown>>;
-export default ToastContainer;

package/esm/use-toasts/toast-container.js

@@ -1,120 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
-/* "use client" */
-
-import React, { useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import usePortal from '../utils/use-portal';
-import useTheme from '../use-theme';
-import { useHUIContext } from '../utils/use-hd-ui-context';
-import ToastItem from './toast-item';
-import useClasses from '../use-classes';
-import { isLeftPlacement, isTopPlacement } from './helpers';
-import useCurrentState from '../utils/use-current-state';
-var ToastContainer = function ToastContainer() {
-  var theme = useTheme();
-  var portal = usePortal('toast');
-  var _useCurrentState = useCurrentState(false),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    setHovering = _useCurrentState2[1],
-    hoveringRef = _useCurrentState2[2];
-  var _useHUIContext = useHUIContext(),
-    toasts = _useHUIContext.toasts,
-    updateToasts = _useHUIContext.updateToasts,
-    toastLayout = _useHUIContext.toastLayout,
-    lastUpdateToastId = _useHUIContext.lastUpdateToastId;
-  var memoizedLayout = useMemo(function () {
-    return toastLayout;
-  }, [toastLayout]);
-  var toastElements = useMemo(function () {
-    return toasts.map(function (toast) {
-      return /*#__PURE__*/React.createElement(ToastItem, {
-        toast: toast,
-        layout: memoizedLayout,
-        key: toast._internalIdent
-      });
-    });
-  }, [toasts, memoizedLayout]);
-  var classNames = useMemo(function () {
-    return useClasses('toasts', {
-      top: isTopPlacement(toastLayout.placement),
-      left: isLeftPlacement(toastLayout.placement)
-    });
-  }, [memoizedLayout]);
-  var hoverHandler = function hoverHandler(isHovering) {
-    setHovering(isHovering);
-    if (isHovering) {
-      return updateToasts(function (last) {
-        return last.map(function (toast) {
-          if (!toast.visible) return toast;
-          toast._timeout && window.clearTimeout(toast._timeout);
-          return _extends({}, toast, {
-            timeout: null
-          });
-        });
-      });
-    }
-    updateToasts(function (last) {
-      return last.map(function (toast, index) {
-        if (!toast.visible) return toast;
-        toast._timeout && window.clearTimeout(toast._timeout);
-        return _extends({}, toast, {
-          _timeout: function () {
-            var timer = window.setTimeout(function () {
-              toast.cancel();
-              window.clearTimeout(timer);
-            }, toast.delay + index * 100);
-            return timer;
-          }()
-        });
-      });
-    });
-  };
-  useEffect(function () {
-    var index = toasts.findIndex(function (r) {
-      return r._internalIdent === lastUpdateToastId;
-    });
-    var toast = toasts[index];
-    if (!toast || toast.visible || !hoveringRef.current) return;
-    var hasVisible = toasts.find(function (r, i) {
-      return i < index && r.visible;
-    });
-    if (hasVisible || !hoveringRef.current) return;
-    hoverHandler(false);
-  }, [toasts, lastUpdateToastId]);
-  useEffect(function () {
-    var timeout = null;
-    var timer = window.setInterval(function () {
-      if (toasts.length === 0) return;
-      timeout = window.setTimeout(function () {
-        var allInvisible = !toasts.find(function (r) {
-          return r.visible;
-        });
-        allInvisible && updateToasts(function () {
-          return [];
-        });
-        timeout && clearTimeout(timeout);
-      }, 350);
-    }, 5000);
-    return function () {
-      timer && clearInterval(timer);
-      timeout && clearTimeout(timeout);
-    };
-  }, [toasts]);
-  if (!portal) return null;
-  if (!toasts || toasts.length === 0) return null;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
-    onMouseEnter: function onMouseEnter() {
-      return hoverHandler(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return hoverHandler(false);
-    },
-    className: _JSXStyle.dynamic([["622610754", [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (classNames || "")
-  }, toastElements, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "622610754",
-    dynamic: [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]
-  }, ".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:".concat(theme.layout.gap, ";bottom:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:").concat(theme.layout.gap, ";}.left.__jsx-style-dynamic-selector{right:unset;left:").concat(theme.layout.gap, ";}"))), portal);
-};
-export default ToastContainer;

package/esm/use-toasts/toast-item.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { Toast, ToastLayout } from './use-toast';
-export interface ToastItemProps {
-    toast: Toast;
-    layout: Required<ToastLayout>;
-}
-declare const ToastItem: React.FC<ToastItemProps>;
-export default ToastItem;

package/esm/use-toasts/toast-item.js

@@ -1,45 +0,0 @@
-import _JSXStyle from "../styled-jsx.es.js";
-/* "use client" */
-
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import CssTransition from '../shared/css-transition';
-import { makeToastActions, getColors, getTranslateByPlacement } from './helpers';
-var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
-  var toast = _ref.toast,
-    layout = _ref.layout;
-  var theme = useTheme();
-  var _useMemo = useMemo(function () {
-      return getColors(theme.palette, toast.type);
-    }, [theme.palette, toast.type]),
-    color = _useMemo.color,
-    bgColor = _useMemo.bgColor;
-  var isReactNode = typeof toast.text !== 'string';
-  var padding = layout.padding,
-    margin = layout.margin,
-    maxHeight = layout.maxHeight,
-    maxWidth = layout.maxWidth,
-    width = layout.width,
-    placement = layout.placement;
-  var _useMemo2 = useMemo(function () {
-      return getTranslateByPlacement(placement);
-    }, [placement]),
-    enter = _useMemo2.enter,
-    leave = _useMemo2.leave;
-  return /*#__PURE__*/React.createElement(CssTransition, {
-    name: "toast",
-    visible: toast.visible,
-    clearTime: 350
-  }, /*#__PURE__*/React.createElement("div", {
-    key: toast.id,
-    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "toast"
-  }, isReactNode ? toast.text : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "message"
-  }, toast.text), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "action"
-  }, makeToastActions(toast.actions, toast.cancel))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1407001838",
-    dynamic: [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]
-  }, ".toast.__jsx-style-dynamic-selector{width:".concat(width, ";max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";opacity:1;box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;padding-right:").concat(theme.layout.gapHalf, ";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:").concat(enter, ";-ms-transform:").concat(enter, ";transform:").concat(enter, ";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:").concat(margin, ";padding:").concat(padding, ";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:").concat(margin, ";padding:").concat(padding, ";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(leave, ";-ms-transform:").concat(leave, ";transform:").concat(leave, ";}"))));
-});
-export default ToastItem;