@helpdice/ui 2.1.5 → 2.1.8

package/esm/button/button.d.ts

@@ -4,7 +4,7 @@ interface Props {
     color?: ButtonTypes;
     ghost?: boolean;
     loading?: boolean;
-    shadow?: boolean;
+    shadow?: boolean | string;
     round?: boolean;
     auto?: boolean;
     effect?: boolean;

package/esm/button/button.js

@@ -71,7 +71,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     }, [theme.palette, filteredProps]),
     bg = _useMemo.bg,
     border = _useMemo.border,
-    color = _useMemo.color;
+    color = _useMemo.color,
+    rippleColor = _useMemo.ripple;
   var hover = useMemo(function () {
     return getButtonHoverColors(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
@@ -90,6 +91,45 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     setDripX(0);
     setDripY(0);
   };
+  var createRipple = function createRipple(event) {
+    var button = buttonRef.current;
+    if (!button) return;
+    var rect = button.getBoundingClientRect();
+    var size = Math.max(rect.width, rect.height);
+    var x = event.clientX - rect.left - size / 2;
+    var y = event.clientY - rect.top - size / 2;
+    var rippleCount = 1; // number of rings
+    var rippleDelay = 500; // ms between each ripple
+    var _loop = function _loop() {
+      var ripple = document.createElement('span');
+      Object.assign(ripple.style, {
+        position: 'absolute',
+        borderRadius: '50%',
+        backgroundColor: rippleColor,
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px"),
+        left: "".concat(x, "px"),
+        top: "".concat(y, "px"),
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+        opacity: '1',
+        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
+        zIndex: 1
+      });
+      button.appendChild(ripple);
+
+      // Force reflow to start transition
+      window.getComputedStyle(ripple).opacity;
+      ripple.style.transform = 'scale(2.5)';
+      ripple.style.opacity = '0';
+      ripple.addEventListener('transitionend', function () {
+        ripple.remove();
+      });
+    };
+    for (var i = 0; i < rippleCount; i++) {
+      _loop();
+    }
+  };
   var clickHandler = function clickHandler(event) {
     if (disabled || loading) return;
     var showDrip = !shadow && !ghost && effect;
@@ -100,6 +140,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
       setDripX(event.clientX - rect.left);
       setDripY(event.clientY - rect.top);
     }
+    if (shadow) {
+      createRipple(event);
+    }
     onClick && onClick(event);
   };
   var childrenWithIcon = useMemo(function () {
@@ -110,13 +153,16 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   }, [auto, children, icon, iconRight]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+
+  // If shadow provided is string then value other default
+  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme.shadows.level.z2 : 'none';
   return /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+    className: _JSXStyle.dynamic([["960361315", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
   }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
     color: color
   }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -125,9 +171,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     color: dripColor,
     onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1558010596",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+    id: "960361315",
+    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
 });
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);

package/esm/button/styles.d.ts

@@ -5,6 +5,7 @@ export interface ButtonColorGroup {
     bg: string;
     border: string;
     color: string;
+    ripple?: string;
 }
 export declare const getButtonGhostColors: (palette: HUIThemesPalette, _color: ButtonTypes) => ButtonColorGroup | null;
 export declare const getButtonColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;

package/esm/button/styles.js

@@ -5,22 +5,26 @@ export var getButtonGhostColors = function getButtonGhostColors(palette, _color)
     secondary: {
       bg: palette.background,
       border: palette.foreground,
-      color: palette.foreground
+      color: palette.foreground,
+      ripple: ''
     },
     success: {
       bg: palette.background,
       border: palette.success,
-      color: palette.success
+      color: palette.success,
+      ripple: ''
     },
     warning: {
       bg: palette.background,
       border: palette.warning,
-      color: palette.warning
+      color: palette.warning,
+      ripple: ''
     },
     error: {
       bg: palette.background,
       border: palette.error,
-      color: palette.error
+      color: palette.error,
+      ripple: ''
     }
   };
   return colors[_color] || null;
@@ -33,38 +37,45 @@ export var getButtonColors = function getButtonColors(palette, props) {
     "default": {
       bg: palette.background,
       border: palette.border,
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     },
     secondary: {
       bg: palette.foreground,
       border: palette.foreground,
-      color: palette.background
+      color: palette.background,
+      ripple: palette.accents_1
     },
     success: {
       bg: palette.success,
       border: palette.success,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#1f93ffff'
     },
     warning: {
       bg: palette.warning,
       border: palette.warning,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ffca29ff'
     },
     error: {
       bg: palette.error,
       border: palette.error,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ff5a55ff'
     },
     abort: {
       bg: 'transparent',
       border: 'transparent',
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     }
   };
   if (disabled) return {
     bg: palette.accents_1,
     border: palette.accents_2,
-    color: '#ccc'
+    color: '#ccc',
+    ripple: ''
   };
 
   /**

package/esm/copy-to-clipboard/clipboard.d.ts

@@ -0,0 +1,2 @@
+export function Clipboard(props: any): React.JSX.Element;
+import React from 'react';

package/esm/copy-to-clipboard/copy.d.ts

@@ -0,0 +1,2 @@
+export default copy;
+declare function copy(text: any, options: any): boolean;

package/esm/copy-to-clipboard/copy.js

@@ -0,0 +1,105 @@
+'use strict';
+
+import deselectCurrent from './toggle-selection';
+var clipboardToIE11Formatting = {
+  'text/plain': 'Text',
+  'text/html': 'Url',
+  "default": 'Text'
+};
+var defaultMessage = 'Copy to clipboard: #{key}, Enter';
+function format(message) {
+  var copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+function copy(text, options) {
+  var debug,
+    message,
+    reselectPrevious,
+    range,
+    selection,
+    mark,
+    success = false;
+  if (!options) {
+    options = {};
+  }
+  debug = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+    range = document.createRange();
+    selection = document.getSelection();
+    mark = document.createElement('span');
+    mark.textContent = text;
+    // avoid screen readers from reading out loud the text
+    mark.ariaHidden = 'true';
+    // reset user styles for span element
+    mark.style.all = 'unset';
+    // prevents scrolling to the end of the page
+    mark.style.position = 'fixed';
+    mark.style.top = 0;
+    mark.style.clip = 'rect(0, 0, 0, 0)';
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = 'pre';
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = 'text';
+    mark.style.MozUserSelect = 'text';
+    mark.style.msUserSelect = 'text';
+    mark.style.userSelect = 'text';
+    mark.addEventListener('copy', function (e) {
+      e.stopPropagation();
+      if (options.format) {
+        e.preventDefault();
+        if (typeof e.clipboardData === 'undefined') {
+          // IE 11
+          debug && console.warn('unable to use e.clipboardData');
+          debug && console.warn('trying IE specific stuff');
+          window.clipboardData.clearData();
+          var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default'];
+          window.clipboardData.setData(format, text);
+        } else {
+          // all other browsers
+          e.clipboardData.clearData();
+          e.clipboardData.setData(options.format, text);
+        }
+      }
+      if (options.onCopy) {
+        e.preventDefault();
+        options.onCopy(e.clipboardData);
+      }
+    });
+    document.body.appendChild(mark);
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+    var successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('copy command was unsuccessful');
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error('unable to copy using execCommand: ', err);
+    debug && console.warn('trying IE specific stuff');
+    try {
+      window.clipboardData.setData(options.format || 'text', text);
+      options.onCopy && options.onCopy(window.clipboardData);
+      success = true;
+    } catch (err) {
+      debug && console.error('unable to copy using clipboardData: ', err);
+      debug && console.error('falling back to prompt');
+      message = format('message' in options ? options.message : defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == 'function') {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+  return success;
+}
+export default copy;

package/esm/copy-to-clipboard/index.d.ts

@@ -0,0 +1,2 @@
+import { Clipboard } from "./clipboard.jsx";
+export default Clipboard;

package/esm/copy-to-clipboard/index.js

@@ -0,0 +1,2 @@
+import { Clipboard } from "./clipboard.jsx";
+export default Clipboard;

package/esm/copy-to-clipboard/toggle-selection.d.ts

@@ -0,0 +1 @@
+export default function _default(): () => void;

package/esm/copy-to-clipboard/toggle-selection.js

@@ -0,0 +1,31 @@
+export default function () {
+  var selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function () {};
+  }
+  var active = document.activeElement;
+  var ranges = [];
+  for (var i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i));
+  }
+  switch (active.tagName.toUpperCase() // .toUpperCase handles XHTML
+  ) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      active.blur();
+      break;
+    default:
+      active = null;
+      break;
+  }
+  selection.removeAllRanges();
+  return function () {
+    selection.type === 'Caret' && selection.removeAllRanges();
+    if (!selection.rangeCount) {
+      ranges.forEach(function (range) {
+        selection.addRange(range);
+      });
+    }
+    active && active.focus();
+  };
+}

package/esm/index.d.ts

@@ -93,9 +93,9 @@ export type { HUIThemes, HUserTheme } from './themes';
 export { default as Toggle } from './toggle';
 export type { ToggleProps } from './toggle';
 export { default as Tooltip } from './tooltip';
-export { default as Notetip } from './notetip';
+export { default as Notetip } from './notetip/note-tip';
 export type { TooltipProps } from './tooltip';
-export type { NotetipProps } from './notetip';
+export type { NotetipProps } from './notetip/note-tip';
 export { default as Tree } from './tree';
 export type { TreeProps } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
@@ -129,3 +129,4 @@ export { default as CurrencyInput } from './currency-input';
 export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './currency-input';
 export { default as useToasts } from './use-toasts';
 export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
+export { default as Clipboard } from './copy-to-clipboard';

package/esm/index.js

@@ -55,7 +55,7 @@ export { default as Textarea } from './textarea';
 export { default as Themes } from './themes';
 export { default as Toggle } from './toggle';
 export { default as Tooltip } from './tooltip';
-export { default as Notetip } from './notetip';
+export { default as Notetip } from './notetip/note-tip';
 export { default as Tree } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
 export { default as User } from './user';
@@ -86,4 +86,5 @@ export { default as Swipe } from './swipe';
 export { Carousel } from './carousal';
 // Currency Input
 export { default as CurrencyInput } from './currency-input';
-export { default as useToasts } from './use-toasts';
+export { default as useToasts } from './use-toasts';
+export { default as Clipboard } from './copy-to-clipboard';

package/esm/input/input-field.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["label", "labelRight", "color", "error", "type", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded = ["label", "labelRight", "color", "error", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/jsx-no-undef */
@@ -30,6 +30,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
     iconRight = _ref.iconRight,
     _ref$iconClickable = _ref.iconClickable,
     iconClickable = _ref$iconClickable === void 0 ? false : _ref$iconClickable,
@@ -134,11 +136,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputProps = _extends({}, props, controlledValue);
   var defaultWidth = fullWidth ? '100%' : 'initial';
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
   }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -155,7 +157,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
@@ -167,7 +169,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
     isRight: true
   }, labelRight), /*#__PURE__*/React.createElement("br", {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
   })), error && /*#__PURE__*/React.createElement("p", {
     style: {
       marginTop: 0.4,
@@ -176,11 +178,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       marginBottom: '0.4rem',
       textAlign: 'left'
     },
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-error"
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-error"
   }, error), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3279091727",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#aa4a44;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+    id: "3970712841",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#aa4a44;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
 });
 InputComponent.displayName = 'Input';
 var Input = withScale(InputComponent);

package/esm/input/input-props.d.ts

@@ -6,6 +6,7 @@ export interface Props {
     placeholder?: string;
     color?: InputTypes;
     type?: string;
+    variant?: string;
     readOnly?: boolean;
     disabled?: boolean;
     label?: string;

package/esm/notetip/index.js

@@ -1,97 +1,2 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useState, useRef, useEffect } from 'react';
-import { useFloating, offset, flip, shift, arrow } from '@floating-ui/react-dom';
-import { useTheme } from '@helpdice/theme';
-import { createPortal } from 'react-dom';
-var Tooltip = function Tooltip(_ref) {
-  var children = _ref.children,
-    text = _ref.text,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 0 : _ref$delay,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 200 : _ref$duration,
-    _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? 'fade' : _ref$animation;
-  var theme = useTheme();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    show = _useState4[0],
-    setShow = _useState4[1];
-  var arrowRef = useRef(null);
-  var _useFloating = useFloating({
-      placement: placement,
-      middleware: [offset(8), flip(), shift({
-        padding: 5
-      }), arrow({
-        element: arrowRef
-      })]
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    refs = _useFloating.refs,
-    strategy = _useFloating.strategy;
-  useEffect(function () {
-    var timer;
-    if (open) {
-      timer = setTimeout(function () {
-        return setShow(true);
-      }, delay);
-    } else {
-      setShow(false);
-    }
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [open, delay]);
-  var handleMouseEnter = function handleMouseEnter() {
-    return setOpen(true);
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    return setOpen(false);
-  };
-  var handleTouchStart = function handleTouchStart() {
-    setOpen(true);
-    setTimeout(function () {
-      return setOpen(false);
-    }, 2000); // auto-hide
-  };
-
-  // const staticSide = {
-  //   top: 'bottom',
-  //   right: 'left',
-  //   bottom: 'top',
-  //   left: 'right',
-  // }[finalPlacement.split('-')[0]];
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: refs.setReference,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onTouchStart: handleTouchStart,
-    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-reference"
-  }, children), show && x != null && y != null ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
-    ref: refs.setFloating,
-    style: {
-      position: strategy,
-      top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0,
-      zIndex: 9999,
-      // opacity: show ? 1 : 0,
-      // visibility: x == null || y == null ? 'hidden' : 'visible',
-      transitionProperty: 'opacity, transform',
-      transitionDuration: "".concat(duration, "ms")
-    },
-    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
-  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2501444323",
-    dynamic: [theme.palette.accents_7, duration, duration, duration]
-  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_7, ";color:white;padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
-};
-export default Tooltip;
+import Notetip from "./note-tip";
+export default Notetip;

package/esm/notetip/{index.d.ts → note-tip.d.ts}

@@ -9,5 +9,5 @@ export type NotetipProps = {
     duration?: number;
     animation?: AnimationVariant;
 };
-declare const Tooltip: React.FC<NotetipProps>;
-export default Tooltip;
+declare const Notetip: React.FC<NotetipProps>;
+export default Notetip;