@ultraviolet/ui 1.0.0

package/dist/src/components/TextInput/index.js

@@ -0,0 +1,529 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import randomName from '@scaleway/random-name';
+import { forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect, useMemo } from 'react';
+import { Button } from '../Button/index.js';
+import { Expandable } from '../Expandable/index.js';
+import { Icon } from '../Icon/index.js';
+import { Notice } from '../Notice/index.js';
+import { Separator } from '../Separator/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const inputSizes = {
+  medium: {
+    default: `
+      height: 48px;
+      padding-left: 8px;
+      padding-right: 20px;
+      padding-top: 14px;
+    `,
+    full: `
+      padding: 8px;
+    `
+  },
+  small: {
+    default: `
+      height: 30px;
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-top: 14px;
+      font-size: 14px;
+    `,
+    full: `
+      padding: 4px 8px;
+    `
+  }
+};
+const StyledSeparator = /*#__PURE__*/_styled(Separator, {
+  target: "el3h3g98"
+})("margin:1px 0px;height:calc(100% - 2px);background-color:", _ref3 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref3;
+  return colors.neutral.backgroundStrong;
+}, ";");
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "176jwhy",
+  styles: "pointer-events:auto;>button{box-shadow:none!important;}"
+} : {
+  name: "176jwhy",
+  styles: "pointer-events:auto;>button{box-shadow:none!important;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const StyledRightElement = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['edit', 'touchable'].includes(prop),
+  target: "el3h3g97"
+})(_ref4 => {
+  let {
+    theme: {
+      colors,
+      space
+    }
+  } = _ref4;
+  return /*#__PURE__*/css("pointer-events:none;position:absolute;right:0;bottom:0;top:0;padding:0 ", space['1'], ";display:flex;gap:", space['1'], ";align-items:center;transition:transform 150ms,color 150ms;color:", colors.neutral.textWeak, ";&:hover,&:focus-within{color:", colors.neutral.textWeakHover, ";}");
+}, " ", _ref5 => {
+  let {
+    touchable
+  } = _ref5;
+  return touchable && _ref2;
+}, ";");
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "z8qxmc",
+  styles: "transform:translate(-9.6%, -3px) scale(0.8)"
+} : {
+  name: "z8qxmc",
+  styles: "transform:translate(-9.6%, -3px) scale(0.8)",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const StyledLabel = /*#__PURE__*/_styled('label', {
+  shouldForwardProp: prop => !['edit', 'error', 'resizable', 'fillAvailable'].includes(prop),
+  target: "el3h3g96"
+})("display:block;position:absolute;left:0;top:0;padding-left:8px;padding-right:8px;pointer-events:none;color:", _ref6 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref6;
+  return colors.neutral.textWeak;
+}, ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;height:48px;font-size:16px;transition:transform 150ms;transform:translate(0, 12px) scale(1);", _ref7 => {
+  let {
+    edit
+  } = _ref7;
+  return edit && _ref;
+}, " ", _ref8 => {
+  let {
+    disabled,
+    theme: {
+      colors
+    }
+  } = _ref8;
+  return disabled && /*#__PURE__*/css("color:", colors.neutral.textDisabled, ";");
+}, " ", _ref9 => {
+  let {
+    readOnly,
+    theme: {
+      colors
+    }
+  } = _ref9;
+  return readOnly && /*#__PURE__*/css("color:", colors.neutral.textDisabled, ";");
+}, " ", _ref10 => {
+  let {
+    error,
+    theme: {
+      colors
+    }
+  } = _ref10;
+  return error && /*#__PURE__*/css("color:", colors.danger.textWeak, ";");
+}, ";");
+const StyledRelativeDiv = /*#__PURE__*/_styled("div", {
+  target: "el3h3g95"
+})(process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledError = /*#__PURE__*/_styled("div", {
+  target: "el3h3g94"
+})("font-size:12px;color:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.danger.textWeak;
+}, ";padding-top:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.space['0.25'];
+}, ";");
+const StyledNotice = /*#__PURE__*/_styled(Notice, {
+  target: "el3h3g93"
+})("margin-top:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space['1'];
+}, ";");
+const StyledInput = /*#__PURE__*/_styled('input', {
+  shouldForwardProp: prop => !['as', 'error', 'fillAvailable', 'hasLabel', 'isPlaceholderVisible', 'multiline', 'resizable', 'inputSize', 'paddingRightFactor'].includes(prop),
+  target: "el3h3g92"
+})("transition:border-color 0.2s ease,box-shadow 0.2s ease;appearance:none;background-color:", _ref14 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref14;
+  return colors.neutral.backgroundWeak;
+}, ";background-image:none;border:1px solid ", _ref15 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref15;
+  return colors.neutral.borderWeak;
+}, ";border-radius:", _ref16 => {
+  let {
+    theme: {
+      radii
+    }
+  } = _ref16;
+  return radii.default;
+}, ";color:", _ref17 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref17;
+  return colors.neutral.text;
+}, ";display:block;max-width:100%;outline:none;position:relative;width:100%;padding-left:", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space['1'];
+}, ";padding-right:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.space['1'];
+}, ";padding-top:14px;font-size:16px;line-height:24px;&::placeholder{color:", _ref20 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref20;
+  return colors.neutral.textWeak;
+}, ";opacity:0;}&:hover,&:focus{border-color:", _ref21 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref21;
+  return colors.primary.borderWeakHover;
+}, ";}&:focus{box-shadow:", _ref22 => {
+  let {
+    theme: {
+      shadows
+    }
+  } = _ref22;
+  return shadows.focusPrimary;
+}, ";border-color:", _ref23 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref23;
+  return colors.primary.borderWeakHover;
+}, ";}", _ref24 => {
+  let {
+    isPlaceholderVisible
+  } = _ref24;
+  return isPlaceholderVisible && `&::placeholder {
+      opacity: 1;
+    }`;
+}, " ", _ref25 => {
+  let {
+    disabled,
+    theme: {
+      colors
+    }
+  } = _ref25;
+  return disabled && `cursor: default;
+    pointer-events: none;
+    background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.textDisabled};`;
+}, " ", _ref26 => {
+  let {
+    readOnly,
+    theme: {
+      colors
+    }
+  } = _ref26;
+  return readOnly && `background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.text};`;
+}, " ", _ref27 => {
+  let {
+    inputSize
+  } = _ref27;
+  return inputSizes[inputSize]?.default;
+}, " ", _ref28 => {
+  let {
+    inputSize,
+    hasLabel
+  } = _ref28;
+  return !!inputSize && !hasLabel && inputSizes[inputSize]?.full;
+}, " ", _ref29 => {
+  let {
+    error,
+    theme: {
+      colors,
+      shadows
+    }
+  } = _ref29;
+  return error && `border-color: ${colors.danger.borderWeak};
+
+    &:hover,
+    &:focus {
+      border-color: ${colors.danger.borderHover};
+    }
+
+    &:focus {
+      box-shadow: ${shadows.focusDanger};
+      border-color: ${colors.danger.borderWeakHover};
+    }`;
+}, " ", _ref30 => {
+  let {
+    multiline,
+    resizable,
+    fillAvailable
+  } = _ref30;
+  return multiline && `
+    padding-top: 20px;
+    height: ${fillAvailable ? '100%' : 'initial'};
+    resize: ${resizable === false ? 'none' : 'vertical'};
+  `;
+}, " ", _ref31 => {
+  let {
+    multiline,
+    hasLabel,
+    theme
+  } = _ref31;
+  return multiline && !hasLabel && `
+    padding-top: ${theme.space['1']};
+  `;
+}, " ", _ref32 => {
+  let {
+    paddingRightFactor,
+    theme
+  } = _ref32;
+  return paddingRightFactor > 0 && `
+    padding-right: calc(${paddingRightFactor} * ${theme.space['4']});
+  `;
+}, ";");
+const RightComponent = /*#__PURE__*/_styled(Stack, {
+  target: "el3h3g91"
+})(process.env.NODE_ENV === "production" ? {
+  name: "9bmev",
+  styles: "min-width:24px"
+} : {
+  name: "9bmev",
+  styles: "min-width:24px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const UnitLabel = /*#__PURE__*/_styled(Text, {
+  target: "el3h3g90"
+})("padding:", _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.space['1'];
+}, " 0;line-height:18px;");
+const TextInput = /*#__PURE__*/forwardRef((_ref34, ref) => {
+  let {
+    'data-testid': dataTestId,
+    ariaControls,
+    autoComplete = 'on',
+    autoFocus,
+    className,
+    cols,
+    defaultValue,
+    disabled,
+    edit: forceEdit,
+    error,
+    fillAvailable,
+    generated,
+    height,
+    id,
+    label,
+    multiline,
+    name,
+    notice,
+    noTopLabel = false,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyUp,
+    onKeyDown,
+    placeholder,
+    random,
+    readOnly,
+    required,
+    resizable,
+    rows,
+    size = 'medium',
+    tabIndex,
+    type = 'text',
+    unit,
+    valid,
+    value,
+    wrap,
+    inputProps
+  } = _ref34;
+  const controlRef = useRef(null);
+  const [visited, setVisited] = useState(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const togglePasswordVisibility = useCallback(() => setPasswordVisible(x => !x), []);
+
+  // Forward ref to parent ref
+  useImperativeHandle(ref, () => controlRef, []);
+
+  // Focus when password is visible
+  useEffect(() => {
+    if (passwordVisible) {
+      controlRef?.current?.focus();
+    }
+  }, [passwordVisible]);
+  const handlePassVisibilityClick = useCallback(() => togglePasswordVisibility(), [togglePasswordVisibility]);
+  const randomize = useCallback(() => onChange?.(randomName(random)), [onChange, random]);
+  const handleClickRandomize = useCallback(() => randomize(), [randomize]);
+  const handleFocus = useCallback(event => {
+    if (!visited && !readOnly) {
+      setVisited(true);
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  }, [visited, readOnly, onFocus]);
+  const handleChange = useCallback(event => onChange?.(event.target.value), [onChange]);
+  const isPassToggleable = type === 'toggleable-password';
+  const hasLabel = !!label && !noTopLabel && size === 'medium';
+  const edit = hasLabel && (forceEdit || visited || value || error || generated);
+  const isPlaceholderVisible = !hasLabel || !!edit;
+  const hasRightElement = !!(valid !== undefined || isPassToggleable || random || unit);
+  const getType = () => {
+    if (isPassToggleable) {
+      return passwordVisible || generated ? 'text' : 'password';
+    }
+    return multiline ? undefined : type;
+  };
+  const inputSize = size;
+  const rightComponentsArray = useMemo(() => {
+    const rightComponents = [];
+    if (isPassToggleable && !generated) {
+      rightComponents.push(jsx(Button, {
+        "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
+        "aria-label": passwordVisible ? 'hide' : 'show',
+        onClick: handlePassVisibilityClick,
+        variant: "ghost",
+        sentiment: "neutral",
+        icon: passwordVisible ? 'eye-off' : 'eye',
+        size: "small"
+      }, "password-visible"));
+    }
+    if (random) {
+      rightComponents.push(jsx(Button, {
+        "data-testid": dataTestId ? `${dataTestId}-randomize-button` : undefined,
+        "aria-label": "randomize",
+        onClick: handleClickRandomize,
+        disabled: disabled,
+        icon: "auto-fix",
+        variant: "ghost",
+        sentiment: "neutral",
+        size: "small"
+      }, "random"));
+    }
+    if (valid === false || valid === true) {
+      rightComponents.push(jsx(Icon, {
+        name: !valid ? 'close' : 'check',
+        color: !valid ? 'danger' : 'success',
+        size: 20
+      }, "valid"));
+    }
+    if (unit) {
+      rightComponents.push(jsx(UnitLabel, {
+        variant: "bodySmall",
+        as: "p",
+        prominence: "weak",
+        children: unit
+      }, "unit"));
+    }
+    return rightComponents;
+  }, [disabled, generated, handleClickRandomize, handlePassVisibilityClick, isPassToggleable, passwordVisible, random, unit, valid, dataTestId]);
+  const showSeparator = required && hasRightElement || unit;
+  const paddingRightFactor = rightComponentsArray.length + (required ? 1 : 0) + (showSeparator ? 0.5 : 0);
+  return jsxs("div", {
+    className: className,
+    children: [jsxs(StyledRelativeDiv, {
+      children: [jsx(StyledInput, {
+        "aria-controls": ariaControls,
+        "aria-label": label || undefined,
+        "aria-labelledby": hasLabel ? ariaControls : undefined,
+        as: multiline ? 'textarea' : 'input',
+        autoComplete: autoComplete,
+        autoFocus: autoFocus,
+        cols: cols,
+        "data-testid": dataTestId,
+        defaultValue: defaultValue,
+        disabled: disabled,
+        error: !!error,
+        fillAvailable: fillAvailable,
+        hasLabel: hasLabel,
+        paddingRightFactor: paddingRightFactor,
+        id: id,
+        inputSize: inputSize,
+        isPlaceholderVisible: isPlaceholderVisible,
+        multiline: multiline,
+        name: name,
+        onBlur: onBlur,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onKeyUp: onKeyUp,
+        onKeyDown: onKeyDown,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        ref: controlRef,
+        resizable: resizable,
+        rows: rows,
+        style: {
+          height
+        },
+        tabIndex: tabIndex,
+        type: getType(),
+        value: value,
+        wrap: wrap,
+        ...inputProps
+      }), hasLabel && jsx(StyledLabel, {
+        edit: !!edit,
+        disabled: disabled,
+        readOnly: readOnly,
+        error: !!error,
+        id: ariaControls,
+        htmlFor: id,
+        "aria-live": "assertive",
+        children: label
+      }), hasRightElement || required ? jsxs(StyledRightElement, {
+        edit: !!edit,
+        touchable: isPassToggleable || !!random,
+        children: [required ? jsx(Icon, {
+          name: "asterisk",
+          color: "danger",
+          size: 10
+        }) : null, showSeparator ? jsx(StyledSeparator, {
+          direction: "vertical"
+        }) : null, rightComponentsArray.length > 0 ? jsx(RightComponent, {
+          justifyContent: "center",
+          direction: "row",
+          alignItems: "center",
+          children: rightComponentsArray
+        }) : null]
+      }) : null]
+    }), jsx(Expandable, {
+      opened: !!error,
+      children: jsx(StyledError, {
+        children: error
+      })
+    }), notice ? jsx(StyledNotice, {
+      children: notice
+    }) : null]
+  });
+});
+
+export { TextInput };

package/dist/src/components/TimeInput/index.js

@@ -0,0 +1,38 @@
+import { SelectInput } from '../SelectInput/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const hours = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
+const half = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'];
+const quarter = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'];
+const schedules = {
+  half,
+  hours,
+  quarter
+};
+const options = schedule => schedules[schedule].map(hour => ({
+  label: hour,
+  value: hour
+}));
+const defaultValue = {
+  label: '00:00',
+  value: '00:00'
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const TimeInput = function (_temp) {
+  let {
+    value = defaultValue,
+    schedule = 'hours',
+    ...props
+  } = _temp === void 0 ? {} : _temp;
+  return jsx(SelectInput, {
+    ...props,
+    time: true,
+    value: value,
+    options: options(schedule)
+  });
+};
+TimeInput.options = options;
+
+export { TimeInput, schedules };

package/dist/src/components/Toaster/index.js

@@ -0,0 +1,116 @@
+import _styled from '@emotion/styled/base';
+import { useTheme, Global, ClassNames, css } from '@emotion/react';
+import { toast as toast$1, ToastContainer as ToastContainer$1 } from 'react-toastify';
+import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
+import { Icon } from '../Icon/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+
+const PREFIX = '.Toastify';
+const AUTOCLOSE_DELAY = 6000; // Delay to close the toast in ms
+
+const TOAST_ICONS = {
+  warning: 'alert',
+  info: 'information-outline',
+  success: 'checkbox-circle-outline',
+  danger: 'alert'
+};
+const styles = {
+  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";box-shadow:", theme.shadows.dropdown, ";min-height:44px;margin-bottom:", theme.space['2'], ";", PREFIX, "__toast-body{margin:0;padding:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.success.background, ";color:", theme.colors.success.text, ";", PREFIX, "__progress-bar{background-color:", theme.colors.success.backgroundStrong, ";}}&", PREFIX, "__toast--info{background-color:", theme.colors.info.background, ";color:", theme.colors.info.text, ";", PREFIX, "__progress-bar{background-color:", theme.colors.info.backgroundStrong, ";}}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.background, ";color:", theme.colors.danger.text, ";", PREFIX, "__progress-bar{background-color:", theme.colors.danger.backgroundStrong, ";}}")
+};
+const CloseButtonWrapper = /*#__PURE__*/_styled("button", {
+  target: "e1eb63991"
+})("background:none;border:none;cursor:pointer;color:inherit;padding:0;margin:0;margin-bottom:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";");
+const IconWithLeftMargin = /*#__PURE__*/_styled(Icon, {
+  target: "e1eb63990"
+})("margin-left:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['1'];
+}, ";");
+const CloseButton = _ref3 => {
+  let {
+    closeToast
+  } = _ref3;
+  return jsx(CloseButtonWrapper, {
+    type: "button",
+    onClick: closeToast,
+    children: jsx(IconWithLeftMargin, {
+      name: "close",
+      size: 18
+    })
+  });
+};
+const Content = _ref4 => {
+  let {
+    variant,
+    children
+  } = _ref4;
+  return jsxs(Stack, {
+    gap: 2,
+    direction: "row",
+    children: [jsx(Icon, {
+      name: TOAST_ICONS[variant],
+      size: 24
+    }), jsx(Text, {
+      variant: "body",
+      as: "span",
+      color: variant,
+      children: children
+    })]
+  });
+};
+const toast = {
+  error: (children, options) => toast$1.error(jsx(Content, {
+    variant: "danger",
+    children: children
+  }), options),
+  info: (children, options) => toast$1.info(jsx(Content, {
+    variant: "info",
+    children: children
+  }), options),
+  success: (children, options) => toast$1.success(jsx(Content, {
+    variant: "success",
+    children: children
+  }), options)
+};
+const ToastContainer = _ref5 => {
+  let {
+    newestOnTop,
+    limit,
+    position,
+    'data-testid': dataTestId
+  } = _ref5;
+  const theme = useTheme();
+  return jsxs(Fragment, {
+    children: [jsx(Global, {
+      styles: css_248z
+    }), jsx(ClassNames, {
+      children: _ref6 => {
+        let {
+          css: localCss
+        } = _ref6;
+        return jsx(ToastContainer$1, {
+          "data-testid": dataTestId,
+          closeButton: jsx(CloseButton, {}),
+          toastClassName: localCss(styles.toast(theme)),
+          autoClose: AUTOCLOSE_DELAY,
+          icon: false,
+          newestOnTop: newestOnTop,
+          limit: limit,
+          position: position,
+          css: /*#__PURE__*/css("top:100px;right:calc(0% + ", theme.space['2'], ");")
+        });
+      }
+    })]
+  });
+};
+
+export { ToastContainer, toast };