@helpdice/ui 1.7.5 → 1.7.8

package/esm/CurrencyInput/components/utils/padTrimValue.js

@@ -0,0 +1,27 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+export var padTrimValue = function padTrimValue(value) {
+  var decimalSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.';
+  var decimalScale = arguments.length > 2 ? arguments[2] : undefined;
+  if (decimalScale === undefined || value === '' || value === undefined) {
+    return value;
+  }
+  if (!value.match(/\d/g)) {
+    return '';
+  }
+  var _value$split = value.split(decimalSeparator),
+    _value$split2 = _slicedToArray(_value$split, 2),
+    _int = _value$split2[0],
+    decimals = _value$split2[1];
+  if (decimalScale === 0) {
+    return _int;
+  }
+  var newValue = decimals || '';
+  if (newValue.length < decimalScale) {
+    while (newValue.length < decimalScale) {
+      newValue += '0';
+    }
+  } else {
+    newValue = newValue.slice(0, decimalScale);
+  }
+  return "".concat(_int).concat(decimalSeparator).concat(newValue);
+};

package/esm/CurrencyInput/components/utils/parseAbbrValue.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { escapeRegExp } from './escapeRegExp';
+
+/**
+ * Abbreviate number eg. 1000 = 1k
+ *
+ * Source: https://stackoverflow.com/a/9345181
+ */
+export var abbrValue = function abbrValue(value) {
+  var decimalSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.';
+  var _decimalPlaces = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+  if (value > 999) {
+    var valueLength = ('' + value).length;
+    var p = Math.pow;
+    var d = p(10, _decimalPlaces);
+    valueLength -= valueLength % 3;
+    var _abbrValue = Math.round(value * d / p(10, valueLength)) / d + ' kMGTPE'[valueLength / 3];
+    return _abbrValue.replace('.', decimalSeparator);
+  }
+  return String(value);
+};
+var abbrMap = {
+  k: 1000,
+  m: 1000000,
+  b: 1000000000
+};
+
+/**
+ * Parse a value with abbreviation e.g 1k = 1000
+ */
+export var parseAbbrValue = function parseAbbrValue(value) {
+  var decimalSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.';
+  var reg = new RegExp("(\\d+(".concat(escapeRegExp(decimalSeparator), "\\d*)?)([kmb])$"), 'i');
+  var match = value.match(reg);
+  if (match) {
+    var _match = _slicedToArray(match, 4),
+      digits = _match[1],
+      abbr = _match[3];
+    var multiplier = abbrMap[abbr.toLowerCase()];
+    return Number(digits.replace(decimalSeparator, '.')) * multiplier;
+  }
+  return undefined;
+};

package/esm/CurrencyInput/components/utils/removeInvalidChars.js

@@ -0,0 +1,10 @@
+import { escapeRegExp } from './escapeRegExp';
+
+/**
+ * Remove invalid characters
+ */
+export var removeInvalidChars = function removeInvalidChars(value, validChars) {
+  var chars = escapeRegExp(validChars.join(''));
+  var reg = new RegExp("[^\\d".concat(chars, "]"), 'gi');
+  return value.replace(reg, '');
+};

package/esm/CurrencyInput/components/utils/removeSeparators.js

@@ -0,0 +1,10 @@
+import { escapeRegExp } from './escapeRegExp';
+
+/**
+ * Remove group separator from value eg. 1,000 > 1000
+ */
+export var removeSeparators = function removeSeparators(value) {
+  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ',';
+  var reg = new RegExp(escapeRegExp(separator), 'g');
+  return value.replace(reg, '');
+};

package/esm/CurrencyInput/components/utils/repositionCursor.js

@@ -0,0 +1,35 @@
+/**
+ * Based on the last key stroke and the cursor position, update the value
+ * and reposition the cursor to the right place
+ */
+export var repositionCursor = function repositionCursor(_ref) {
+  var selectionStart = _ref.selectionStart,
+    value = _ref.value,
+    lastKeyStroke = _ref.lastKeyStroke,
+    stateValue = _ref.stateValue,
+    groupSeparator = _ref.groupSeparator;
+  var cursorPosition = selectionStart;
+  var modifiedValue = value;
+  if (stateValue && cursorPosition) {
+    var splitValue = value.split('');
+    // if cursor is to right of groupSeparator and backspace pressed, delete the character to the left of the separator and reposition the cursor
+    if (lastKeyStroke === 'Backspace' && stateValue[cursorPosition] === groupSeparator) {
+      splitValue.splice(cursorPosition - 1, 1);
+      cursorPosition -= 1;
+    }
+    // if cursor is to left of groupSeparator and delete pressed, delete the character to the right of the separator and reposition the cursor
+    if (lastKeyStroke === 'Delete' && stateValue[cursorPosition] === groupSeparator) {
+      splitValue.splice(cursorPosition, 1);
+      cursorPosition += 1;
+    }
+    modifiedValue = splitValue.join('');
+    return {
+      modifiedValue: modifiedValue,
+      cursorPosition: cursorPosition
+    };
+  }
+  return {
+    modifiedValue: modifiedValue,
+    cursorPosition: selectionStart
+  };
+};

package/esm/CurrencyInput/index.js

@@ -0,0 +1,4 @@
+import CurrencyInput from './components/CurrencyInput';
+export { formatValue } from './components/utils/formatValue';
+export { cleanValue } from './components/utils/cleanValue';
+export default CurrencyInput;

package/esm/LinearProgress/index.d.ts

@@ -0,0 +1,2 @@
+import LinearProgress from "./linear-progress";
+export default LinearProgress;

package/esm/LinearProgress/index.js

@@ -0,0 +1,2 @@
+import LinearProgress from "./linear-progress";
+export default LinearProgress;

package/esm/LinearProgress/linear-progress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface LinearProgressProps {
+    isActive?: boolean;
+    progress?: number;
+    color?: string;
+    speed?: number;
+}
+declare const LinearProgress: React.FC<LinearProgressProps>;
+export default LinearProgress;

package/esm/LinearProgress/linear-progress.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var LinearProgress = function LinearProgress(_ref) {
+  var _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    progress = _ref.progress,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1976d2' : _ref$color,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 1.5 : _ref$speed;
+  if (!isActive) return null;
+  var isDeterminate = typeof progress === 'number' && progress >= 0 && progress <= 100;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2900495535", [color, speed]]]) + " " + "loader-wrapper"
+  }, isDeterminate ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(progress, "%"),
+      backgroundColor: color
+    },
+    className: _JSXStyle.dynamic([["2900495535", [color, speed]]]) + " " + "determinate-bar"
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2900495535", [color, speed]]]) + " " + "indeterminate-loader"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2900495535",
+    dynamic: [color, speed]
+  }, ".loader-wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;width:100%;height:4px;background:rgba(0,0,0,0.05);z-index:2000;overflow:hidden;}.determinate-bar.__jsx-style-dynamic-selector{height:100%;-webkit-transition:width 0.3s ease;transition:width 0.3s ease;}.indeterminate-loader.__jsx-style-dynamic-selector{width:100%;height:100%;background:linear-gradient( to right, transparent 0%, ".concat(color, " 50%, transparent 100% );background-size:200% 100%;-webkit-animation:slide-__jsx-style-dynamic-selector ").concat(speed, "s linear infinite;animation:slide-__jsx-style-dynamic-selector ").concat(speed, "s linear infinite;}@-webkit-keyframes slide-__jsx-style-dynamic-selector{from{background-position:-100% 0;}to{background-position:100% 0;}}@keyframes slide-__jsx-style-dynamic-selector{from{background-position:-100% 0;}to{background-position:100% 0;}}")));
+};
+export default LinearProgress;

package/esm/Loadable/index.js

@@ -0,0 +1,2 @@
+import Loadable from './loadable';
+export default Loadable;

package/esm/PhoneInput/phone.js

@@ -2,7 +2,7 @@ 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 '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import { getColors } from '../input/styles';
 var PhoneInput = function PhoneInput(_ref) {
   var onChange = _ref.onChange,
@@ -52,7 +52,7 @@ var PhoneInput = function PhoneInput(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var value = e.target.value.replace(/[^\d]/g, '');
     setPhoneNumber(value);
-    if (onChange) onChange("".concat(selectedCountry.code).concat(value));
+    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
   };
   var handleClickOutside = function handleClickOutside(e) {
     if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -71,21 +71,21 @@ var PhoneInput = function PhoneInput(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: dropdownRef,
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }, /*#__PURE__*/React.createElement("img", {
     loading: "lazy",
     width: "23",
@@ -93,11 +93,14 @@ var PhoneInput = function PhoneInput(_ref) {
     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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
     type: "tel",
+    style: {
+      width: '100%'
+    },
     placeholder: placeholder,
     value: phoneNumber,
     onChange: handlePhoneChange,
@@ -107,9 +110,9 @@ var PhoneInput = function PhoneInput(_ref) {
     onBlur: function onBlur() {
       return setIsFocused(false);
     },
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
   })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
   }, /*#__PURE__*/React.createElement("input", {
     type: "text",
     placeholder: "Search country...",
@@ -117,23 +120,23 @@ var PhoneInput = function PhoneInput(_ref) {
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
+      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }, /*#__PURE__*/React.createElement("img", {
       loading: "lazy",
       width: "23",
@@ -141,18 +144,18 @@ var PhoneInput = function PhoneInput(_ref) {
       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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
       style: {
         color: 'grey'
       },
-      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }, c.label)));
   }) : /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
   }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "785147617",
+    id: "1313692390",
     dynamic: [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
-  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;max-width:400px;}.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{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;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:100%;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;}")));
+  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;min-width:200px;width:auto;}.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{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;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:100%;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/auto-complete/auto-complete-dropdown.js

@@ -1,9 +1,7 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
 import { useAutoCompleteContext } from './auto-complete-context';
-import Dropdown from '../shared/dropdown';
-import useClasses from '../use-classes';
+import { useClasses, Dropdown, useTheme } from '@helpdice/theme';
 var AutoCompleteDropdown = function AutoCompleteDropdown(_ref) {
   var children = _ref.children,
     visible = _ref.visible,

package/esm/auto-complete/auto-complete-item.js

@@ -1,11 +1,9 @@
 import _JSXStyle from "../styled-jsx.es.js";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, Ellipsis, useClasses } from '@helpdice/theme';
 import { useAutoCompleteContext } from './auto-complete-context';
-import Ellipsis from '../shared/ellipsis';
 import useScale from '../use-scale';
-import useClasses from '../use-classes';
 
 // interface Props 
 

package/esm/auto-complete/auto-complete-searching.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
 
 // interface Props {

package/esm/auto-complete/auto-complete.js

@@ -14,7 +14,7 @@ import AutoCompleteEmpty from './auto-complete-empty';
 import { AutoCompleteContext } from './auto-complete-context';
 import Loading from '../loading';
 import { pickChild } from '../utils/collections';
-import useCurrentState from '../utils/use-current-state';
+import { useCurrentState } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
 import { ArrowRight } from '@helpdice/icons';
 var childrenToOptionsNode = function childrenToOptionsNode(options) {

package/esm/avatar/avatar-group.js

@@ -2,9 +2,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var AvatarGroupComponent = function AvatarGroupComponent(_ref) {
   var count = _ref.count,
     _ref$className = _ref.className,

package/esm/avatar/avatar.js

@@ -5,9 +5,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 
 // type NativeAttrs = Omit<
 //   Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>,

package/esm/badge/badge.js

@@ -5,9 +5,8 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
     "default": palette.foreground,

package/esm/breadcrumbs/breadcrumbs-item.js

@@ -8,7 +8,7 @@ import Link from '../link';
 import React, { useMemo } from 'react';
 import { pickChild } from '../utils/collections';
 import BreadcrumbsSeparator from './breadcrumbs-separator';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var href = _ref.href,
     _ref$nextLink = _ref.nextLink,

package/esm/breadcrumbs/breadcrumbs-separator.js

@@ -3,7 +3,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var Separator = function Separator(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,

package/esm/breadcrumbs/breadcrumbs.js

@@ -2,7 +2,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
+import { useTheme } from '@helpdice/theme';
 import BreadcrumbsSeparator from './breadcrumbs-separator';
 import { addColorAlpha } from '../utils/color';
 import useScale, { withScale } from '../use-scale';

package/esm/button/button-icon.js

@@ -5,7 +5,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
 import React from 'react';
-import useClasses from '../use-classes';
+import { useClasses } from '@helpdice/theme';
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === void 0 ? false : _ref$isRight,

package/esm/button/button.compact.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties } from 'react';
+import { ButtonTypes } from 'components/button-group';
 type CompactButtonProps = {
     children?: React.ReactNode;
     iconRight?: React.ReactNode;
@@ -9,6 +10,7 @@ type CompactButtonProps = {
     style?: CSSProperties;
     a?: boolean;
     target?: string;
+    color?: ButtonTypes;
     onClick?: () => void;
 };
 declare const _default: React.NamedExoticComponent<CompactButtonProps>;

package/esm/button/button.compact.js

@@ -1,7 +1,14 @@
 import React, { memo } from 'react';
 import Button from './button';
+// import { useTheme } from '@helpdice/theme';
+// import { getButtonColors } from './styles';
+
+// import useScale from 'components/use-scale';
+
 var CompactButton = function CompactButton(_ref) {
-  var _ref$to = _ref.to,
+  var _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$to = _ref.to,
     to = _ref$to === void 0 ? '/' : _ref$to,
     children = _ref.children,
     iconRight = _ref.iconRight,
@@ -13,57 +20,94 @@ var CompactButton = function CompactButton(_ref) {
     a = _ref.a,
     target = _ref.target,
     onClick = _ref.onClick;
+  // const theme = useTheme();
+  // const { SCALES } = useScale();
+  // const [paddingLeft, paddingRight] = [
+  //   auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+  //   auto ? SCALES.pr(1.15) : SCALES.pr(1.375),
+  // ]
+  // const { bg, border, color } = useMemo(
+  //       () => getButtonColors(theme.palette, {
+  //         color: _color
+  //       }),
+  //       [theme.palette],
+  //     )
   if (a) {
-    return /*#__PURE__*/React.createElement("a", {
-      style: {
-        all: 'unset',
-        boxSizing: 'border-box',
-        display: 'inline-block',
-        lineHeight: 'calc(2.5* 16px)',
-        fontWeight: '400',
-        fontSize: 'calc(0.875* 16px)',
-        textAlign: 'center',
-        whiteSpace: 'nowrap',
-        position: 'relative',
-        overflow: 'hidden',
-        color: '#666',
-        backgroundColor: '#fff',
-        cursor: 'pointer',
-        minWidth: 'min-content',
-        width: 'auto',
-        height: 'calc(2.5* 16px)',
-        padding: '0 calc(0.69* 16px) 0 calc(0.69* 16px)',
-        margin: 0,
-        '--helpdice-ui-button-height': 'calc(2.5* 16px)',
-        '--helpdice-ui-button-icon-padding': 'calc(0.4362* 16px)'
+    return /*#__PURE__*/React.createElement(Button, {
+      icon: icon,
+      style: style,
+      type: type,
+      onClick: function onClick() {
+        return window.open(to, target);
       },
-      href: to,
-      target: target
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        position: 'absolute',
-        right: 'auto',
-        left: 'var(--helpdice-ui-button-icon-padding)',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: 'var(--helpdice-ui-button-color)',
-        zIndex: 1
-      }
-    }, icon), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'inline-flex',
-        position: 'relative',
-        zIndex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center',
-        lineHeight: 'inherit',
-        paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
-      }
-    }, children));
+      auto: true,
+      scale: scale,
+      px: 0.6,
+      iconRight: iconRight
+    }, children)
+    // <a
+    //     style={
+    //         {
+    //             all: 'unset',
+    //             boxSizing: 'border-box',
+    //             display: 'inline-block',
+    //             lineHeight: 'calc(2.5* 16px)',
+    //             fontWeight: '400',
+    //             fontSize: 'calc(0.875* 16px)',
+    //             textAlign: 'center',
+    //             whiteSpace: 'nowrap',
+    //             position: 'relative',
+    //             overflow: 'hidden',
+    //             color: color,
+    //             backgroundColor: bg,
+    //             border: `1px solid ${border}`,
+    //             cursor: 'pointer',
+    //             '--helpdice-ui-button-icon-padding': `${SCALES.pl(0.727)}`,
+    // '--helpdice-ui-button-height': `${SCALES.height(2.5)}`,
+    // '--helpdice-ui-button-color':`${color}`,
+    // '--helpdice-ui-button-bg': `${bg}`,
+    // minWidth: `${auto ? 'min-content' : SCALES.width(10.5)}`,
+    // width: `${auto ? 'auto' : 'initial'}`,
+    // height: `${SCALES.height(2.5)}`,
+    // padding:` ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
+    // margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    //         } as React.CSSProperties
+    //     }
+    //     href={to}
+    //     target={target}
+    // >
+    //     <span
+    //         style={{
+    //             position: 'absolute',
+    //             right: 'auto',
+    //             left: 'var(--helpdice-ui-button-icon-padding)',
+    //             top: '50%',
+    //             transform: 'translateY(-50%)',
+    //             display: 'flex',
+    //             justifyContent: 'center',
+    //             alignItems: 'center',
+    //             color: 'var(--helpdice-ui-button-color)',
+    //             zIndex: 1
+    //         }}
+    //     >
+    //         {icon}
+    //     </span>
+    //     <div
+    //         style={{
+    //             display: 'inline-flex',
+    //             position: 'relative',
+    //             zIndex: 1,
+    //             justifyContent: 'center',
+    //             alignItems: 'center',
+    //             textAlign: 'center',
+    //             lineHeight: 'inherit',
+    //             paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
+    //         }}
+    //     >
+    //         {children}
+    //     </div>
+    // </a>
+    ;
   }
   return /*#__PURE__*/React.createElement(Button, {
     icon: icon,