@helpdice/ui 2.1.5 → 2.1.9

package/esm/index.js

@@ -24,7 +24,8 @@ export * from './form';
 
 // export * as captcha from './captcha'
 
-export { default as Grid, Container } from './grid';
+export { default as Grid } from './grid';
+export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export { default as Input, getColors } from './input';
@@ -38,7 +39,6 @@ export { default as Pagination } from './pagination';
 export { default as Popover } from './popover';
 export { default as List } from './list';
 export { default as Menu } from './menu';
-export { default as PhoneInput } from './phone-input';
 export { default as Progress } from './progress';
 export { default as Radio } from './radio';
 export { default as Rating } from './rating';
@@ -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';
@@ -84,6 +84,8 @@ export * from './login-with';
 export { default as Swipe } from './swipe';
 // Carousel
 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/index.d.ts

@@ -1,9 +1,13 @@
 import Input from './input-field';
 import Textarea from '../textarea';
 import InputPassword from './password';
+import PhoneInput from './phone-input';
+import CurrencyInput from './currency-input';
 export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
+    Phone: typeof PhoneInput;
+    Currency: typeof CurrencyInput;
 };
 export { getColors } from './styles';
 export type { InputProps } from './input-field';

package/esm/input/index.js

@@ -2,7 +2,11 @@
 import Input from './input-field';
 import Textarea from '../textarea';
 import InputPassword from './password';
+import PhoneInput from './phone-input';
+import CurrencyInput from './currency-input';
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
+Input.Phone = PhoneInput;
+Input.Currency = CurrencyInput;
 export { getColors } from './styles';
 export default Input;

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/input/phone-input/phone.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputTypes } from '..';
+type PhoneInputProps = {
+    onChange: (data: string) => void;
+    value?: string;
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+    country?: string;
+    placeholder?: string;
+    color?: InputTypes;
+};
+declare function PhoneInput({ onChange, value, country, placeholder, color: _color, children, fullWidth }: PhoneInputProps): React.JSX.Element;
+export default PhoneInput;

package/esm/input/phone-input/phone.js

@@ -0,0 +1,166 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import countries from './countries.json';
+import { useTheme } from '@helpdice/theme';
+import { getColors } from '../styles';
+import useScale from '../../use-scale';
+import InputBlockLabel from '../input-block-label';
+function PhoneInput(_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    country = _ref.country,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
+    children = _ref.children,
+    fullWidth = _ref.fullWidth;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var defaultValue = country ? countries.findIndex(function (cn) {
+    return cn.code == country;
+  }) : 103;
+  var _useState = useState(countries[defaultValue]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCountry = _useState2[0],
+    setSelectedCountry = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phoneNumber = _useState4[0],
+    setPhoneNumber = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFocused = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dropdownOpen = _useState8[0],
+    setDropdownOpen = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
+  var dropdownRef = useRef(null);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, _color);
+    }, [theme.palette]),
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var handleSelectCountry = function handleSelectCountry(country) {
+    setSelectedCountry(country);
+    setDropdownOpen(false);
+    setSearchTerm('');
+    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
+  };
+  var handlePhoneChange = function handlePhoneChange(e) {
+    var value = e.target.value.replace(/[^\d]/g, '');
+    setPhoneNumber(value);
+    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setDropdownOpen(false);
+      setSearchTerm('');
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var filteredCountries = countries.filter(function (c) {
+    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
+  });
+  var defaultWidth = fullWidth ? '100%' : 'initial';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setDropdownOpen(!dropdownOpen);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 5
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    width: "20",
+    height: "20",
+    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
+    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
+    alt: "Flag of ".concat(selectedCountry.label),
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
+    type: "tel",
+    placeholder: placeholder,
+    value: phoneNumber,
+    onChange: handlePhoneChange,
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Search country...",
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
+  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: c.code,
+      onClick: function onClick() {
+        return handleSelectCountry(c);
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      width: "23",
+      height: "23",
+      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
+      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
+      alt: "Flag of ".concat(c.label),
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'grey'
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, c.label)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3237870810",
+    dynamic: [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
+  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;width:".concat(SCALES.width(1, defaultWidth), ";height:").concat(SCALES.height(2.25), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
+}
+;
+export default PhoneInput;

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/{dist/notetip/index.d.ts → esm/notetip/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;

package/esm/notetip/note-tip.js

@@ -0,0 +1,97 @@
+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 Notetip = function Notetip(_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([["4210526695", [theme.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-reference"
+  }, children), show && x != null && y != null && text != 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([["4210526695", [theme.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
+  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4210526695",
+    dynamic: [theme.palette.accents_1, duration, duration, duration]
+  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_1, ";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 Notetip;

package/esm/table/table-body.js

@@ -73,7 +73,7 @@ var TableBody = function TableBody(_ref) {
 
   function renderRow(cols, row, index) {
     var _row$style;
-    var urid = _.uniqueId();
+    // const urid = _.uniqueId();
     var className = rowClassName(row, index);
     var rw = _extends({}, row);
     var rowStyle = (_row$style = row === null || row === void 0 ? void 0 : row.style) !== null && _row$style !== void 0 ? _row$style : {};
@@ -94,7 +94,7 @@ var TableBody = function TableBody(_ref) {
       onDragStart: onDragStart,
       "aria-checked": selected.indexOf(row) !== -1,
       tabIndex: -1,
-      key: urid,
+      key: "table-row-".concat(rw.id),
       style: _extends({
         cursor: 'pointer',
         backgroundColor: isRowSelected ? hoverColor : ''

package/esm/table/table-cell.js

@@ -22,7 +22,7 @@ var TableCell = function TableCell(_ref) {
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
       "data-column": column.prop,
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      key: "row-td-".concat(currentRowValue.id, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },

package/esm/table/table-head.js

@@ -5,10 +5,12 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import { useTheme } from '@helpdice/theme';
 import Input from '../input';
+import { uniqueId } from 'lodash';
 import Select from '../select';
 // import Button from '../button'
 
 var makeColgroup = function makeColgroup(width, columns) {
+  var colId = uniqueId('col');
   var unsetWidthCount = columns.filter(function (c) {
     return !c.width;
   }).length;
@@ -17,9 +19,9 @@ var makeColgroup = function makeColgroup(width, columns) {
   }, 0);
   var averageWidth = (width - customWidthTotal) / unsetWidthCount;
   if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
-  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column) {
     return /*#__PURE__*/React.createElement("col", {
-      key: "colgroup-".concat(index),
+      key: "colgroup-".concat(colId),
       width: column.width || averageWidth
     });
   }));

package/esm/table/table.js

@@ -5,7 +5,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
-
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import TableHead from './table-head';
 import TableBody from './table-body';