@helpdice/ui 2.5.4 → 2.5.8

package/dist/input/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var theme = require('@helpdice/theme');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -72,15 +73,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function _iterableToArray(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
@@ -733,24 +725,28 @@ var InputLabel = function InputLabel(_ref) {
   var children = _ref.children,
     isRight = _ref.isRight;
   var theme$1 = theme.useTheme();
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3089782703", [theme$1.layout.gapHalf, theme$1.palette.accents_4, theme$1.palette.accents_1, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3089782703",
-    dynamic: [theme$1.layout.gapHalf, theme$1.palette.accents_4, theme$1.palette.accents_1, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border]
-  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme$1.layout.gapHalf, ";color:").concat(theme$1.palette.accents_4, ";background-color:").concat(theme$1.palette.accents_1, ";border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-left:1px solid ").concat(theme$1.palette.border, ";border-bottom:1px solid ").concat(theme$1.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";border-left:0;border-right:1px solid ").concat(theme$1.palette.border, ";}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: _JSXStyle.dynamic([["3089782703", [theme$1.layout.gapHalf, theme$1.palette.accents_4, theme$1.palette.accents_1, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border]]]) + " " + ((isRight ? 'right' : '') || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3089782703",
+      dynamic: [theme$1.layout.gapHalf, theme$1.palette.accents_4, theme$1.palette.accents_1, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border],
+      children: "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme$1.layout.gapHalf, ";color:").concat(theme$1.palette.accents_4, ";background-color:").concat(theme$1.palette.accents_1, ";border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-left:1px solid ").concat(theme$1.palette.border, ";border-bottom:1px solid ").concat(theme$1.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";border-left:0;border-right:1px solid ").concat(theme$1.palette.border, ";}")
+    })]
+  });
 };
 var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
 
 var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
   var children = _ref.children;
   var theme$1 = theme.useTheme();
-  return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme$1.palette.accents_6]]])
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1278828862",
-    dynamic: [theme$1.palette.accents_6]
-  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: _JSXStyle.dynamic([["1278828862", [theme$1.palette.accents_6]]]),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1278828862",
+      dynamic: [theme$1.palette.accents_6],
+      children: "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
+    })]
+  });
 };
 InputBlockLabelComponent.displayName = 'InputBlockLabel';
 var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
@@ -760,13 +756,15 @@ var InputIconComponent = function InputIconComponent(_ref) {
     _ref$clickable = _ref.clickable,
     clickable = _ref$clickable === void 0 ? false : _ref$clickable,
     onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
-  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4247656379",
-    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
-  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4247656379",
+      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
+      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
 };
 InputIconComponent.displayName = 'InputIcon';
 var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
@@ -785,70 +783,41 @@ var InputIconClear = function InputIconClear(_ref) {
     event.nativeEvent.stopImmediatePropagation();
     onClick && onClick(event);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 6L6 18",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6 6l12 12",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1567030211",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]
-  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18 6L6 18",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M6 6l12 12",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1567030211",
+      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
+      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
 };
 var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
 
-var getColors = function getColors(palette, status) {
-  var colors = {
-    "default": {
-      color: palette.foreground,
-      borderColor: palette.border,
-      hoverBorder: palette.accents_5
-    },
-    secondary: {
-      color: palette.foreground,
-      borderColor: palette.secondary,
-      hoverBorder: palette.secondary
-    },
-    success: {
-      color: palette.foreground,
-      borderColor: palette.successLight,
-      hoverBorder: palette.success
-    },
-    warning: {
-      color: palette.foreground,
-      borderColor: palette.warningLight,
-      hoverBorder: palette.warning
-    },
-    error: {
-      color: palette.error,
-      borderColor: palette.error,
-      hoverBorder: palette.errorDark
-    }
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};
-
 /* "use client" */
 
 var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext = {
+var defaultContext$1 = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -874,7 +843,7 @@ var defaultContext = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$1);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -931,7 +900,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$4 = ["children"];
+var _excluded$9 = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -941,7 +910,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$9);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1014,16 +983,897 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
+    return /*#__PURE__*/jsxRuntime.jsx(ScaleContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/jsxRuntime.jsx(Render, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    });
   });
   ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
   return ScaleFC;
 };
 
+var _excluded$8 = ["children", "tag", "className", "color"];
+var getTypeColor = function getTypeColor(type, palette) {
+  var colors = {
+    "default": 'inherit',
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return colors[type] || colors["default"];
+};
+var TextChild = function TextChild(_ref) {
+  var children = _ref.children,
+    tag = _ref.tag,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  var Component = tag;
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES,
+    getScaleProps = _useScale.getScaleProps;
+  var font = getScaleProps('font');
+  var mx = getScaleProps(['margin', 'marginLeft', 'marginRight', 'mx', 'ml', 'mr']);
+  var my = getScaleProps(['margin', 'marginTop', 'marginBottom', 'my', 'mt', 'mb']);
+  var px = getScaleProps(['padding', 'paddingLeft', 'paddingRight', 'pl', 'pr', 'px']);
+  var py = getScaleProps(['padding', 'paddingTop', 'paddingBottom', 'pt', 'pb', 'py']);
+  var _color = React.useMemo(function () {
+    return getTypeColor(color, theme$1.palette);
+  }, [color, theme$1.palette]);
+  var classNames = React.useMemo(function () {
+    var keys = [{
+      value: mx,
+      className: 'mx'
+    }, {
+      value: my,
+      className: 'my'
+    }, {
+      value: px,
+      className: 'px'
+    }, {
+      value: py,
+      className: 'py'
+    }, {
+      value: font,
+      className: 'font'
+    }];
+    var scaleClassNames = keys.reduce(function (pre, next) {
+      if (typeof next.value === 'undefined') return pre;
+      return "".concat(pre, " ").concat(next.className);
+    }, '');
+    return "".concat(scaleClassNames, " ").concat(className).trim();
+  }, [mx, my, px, py, font, className]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Component, _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2277774325", [tag, _color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2277774325",
+      dynamic: [tag, _color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')],
+      children: "".concat(tag, ".__jsx-style-dynamic-selector{color:").concat(_color, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.font.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(1, 'inherit'), ";}.mx.__jsx-style-dynamic-selector{margin-left:").concat(SCALES.ml(0, 'revert'), ";margin-right:").concat(SCALES.mr(0, 'revert'), ";}.my.__jsx-style-dynamic-selector{margin-top:").concat(SCALES.mt(0, 'revert'), ";margin-bottom:").concat(SCALES.mb(0, 'revert'), ";}.px.__jsx-style-dynamic-selector{padding-left:").concat(SCALES.pl(0, 'revert'), ";padding-right:").concat(SCALES.pr(0, 'revert'), ";}.py.__jsx-style-dynamic-selector{padding-top:").concat(SCALES.pt(0, 'revert'), ";padding-bottom:").concat(SCALES.pb(0, 'revert'), ";}.no-wrap.__jsx-style-dynamic-selector{white-space:nowrap;}")
+    })]
+  }));
+};
+TextChild.displayName = 'TextChild';
+
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
+  var dripRef = React.useRef(null);
+  /* istanbul ignore next */
+  var top = Number.isNaN(+y) ? 0 : y - 10;
+  /* istanbul ignore next */
+  var left = Number.isNaN(+x) ? 0 : x - 10;
+  React.useEffect(function () {
+    /* istanbul ignore next */
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return function () {
+      /* istanbul ignore next */
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip",
+    children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      style: {
+        top: top,
+        left: left
+      },
+      className: "jsx-3424889537",
+      children: /*#__PURE__*/jsxRuntime.jsx("g", {
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd",
+        className: "jsx-3424889537",
+        children: /*#__PURE__*/jsxRuntime.jsx("g", {
+          fill: color,
+          className: "jsx-3424889537",
+          children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+            width: "100%",
+            height: "100%",
+            rx: "10",
+            className: "jsx-3424889537"
+          })
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3424889537",
+      children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
+    })]
+  });
+};
+ButtonDrip.displayName = 'ButtonDrip';
+
+var _excluded$7 = ["children", "type", "color", "className", "spaceRatio"];
+var getIconBgColor = function getIconBgColor(type, palette, color) {
+  var colors = {
+    "default": palette.accents_6,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = theme.useClasses('loading-container', className);
+  var bgColor = React.useMemo(function () {
+    return getIconBgColor(type, theme$1.palette, color);
+  }, [type, theme$1.palette, color]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
+      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2201634259",
+      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
+      children: ".loading-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;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
+    })]
+  }));
+};
+LoadingComponent.displayName = 'Loading';
+var Loading = withScale(LoadingComponent);
+
+var ButtonLoading = function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "jsx-212623367" + " " + "btn-loading",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Loading, {
+      color: color
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "212623367",
+      children: ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"
+    })]
+  });
+};
+ButtonLoading.displayName = 'ButtonLoading';
+
+var _excluded$6 = ["isRight", "isSingle", "children", "className"];
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var classes = theme.useClasses('icon', {
+    right: isRight,
+    single: isSingle
+  }, className);
+  return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2467502931",
+      children: ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"
+    })]
+  }));
+};
+ButtonIcon.displayName = 'ButtonIcon';
+
+var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
+  var icon = icons.icon,
+    iconRight = icons.iconRight;
+  var hasIcon = icon || iconRight;
+  var isRight = Boolean(iconRight);
+  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
+  var classes = theme.useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "text",
+    children: children
+  });
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true,
+      children: hasIcon
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
+      isRight: isRight,
+      children: hasIcon
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""),
+      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3568181479",
+        dynamic: [paddingForAutoMode, paddingForAutoMode],
+        children: ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}")
+      })]
+    })]
+  });
+};
+var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
+  if (!config.isButtonGroup) return props;
+  return _objectSpread2(_objectSpread2({}, props), {}, {
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  });
+};
+
+/* "use client" */
+
+var defaultContext = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+};
+
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
+  }
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith('rgb') || !regArray) {
+    console.log(color);
+    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
+  }
+  return regArray[1].split(',').map(function (str) {
+    return Number.parseFloat(str);
+  });
+};
+var addColorAlpha = function addColorAlpha(color, alpha) {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  var _colorToRgbValues = colorToRgbValues(color),
+    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
+    r = _colorToRgbValues2[0],
+    g = _colorToRgbValues2[1],
+    b = _colorToRgbValues2[2];
+  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
+};
+
+var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
+  var colors = {
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground,
+      color: palette.foreground,
+      ripple: ''
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success,
+      ripple: ''
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning,
+      ripple: ''
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error,
+      ripple: ''
+    }
+  };
+  return colors[_color] || null;
+};
+var getButtonColors = function getButtonColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5,
+      ripple: palette.accents_1
+    },
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background,
+      ripple: palette.accents_1
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff',
+      ripple: '#1f93ffff'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff',
+      ripple: '#ffca29ff'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff',
+      ripple: '#ff5a55ff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5,
+      ripple: palette.accents_1
+    }
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc',
+    ripple: ''
+  };
+
+  /**
+   * The '-light' type is the same color as the common type,
+   * only hover's color is different.
+   * e.g.
+   *   Color['success'] === Color['success-light']
+   *   Color['warning'] === Color['warning-light']
+   */
+  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
+  var colors = {
+    secondary: {
+      bg: palette.foreground,
+      border: palette.background,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
+    }
+  };
+  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    })
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+    color: 'transparent'
+  });
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
+  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
+    color: hoverColor.color || hoverColor.border
+  });
+};
+var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
+};
+var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type ? type.endsWith('light') : false;
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
+};
+
+var _excluded$5 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+  var theme$1 = theme.useTheme();
+  // const navigate = useNavigate();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  }); // Changed with !
+
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  var children = filteredProps.children,
+    _filteredProps$disabl = filteredProps.disabled,
+    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
+    filteredProps.color;
+    var _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
+    _filteredProps$round = filteredProps.round,
+    round = _filteredProps$round === void 0 ? false : _filteredProps$round;
+    filteredProps.relative;
+    filteredProps.replace;
+    filteredProps.a;
+    var to = filteredProps.to,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$5);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  var _useMemo = React.useMemo(function () {
+      return getButtonColors(theme$1.palette, filteredProps);
+    }, [theme$1.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color,
+    rippleColor = _useMemo.ripple;
+  var hover = React.useMemo(function () {
+    return getButtonHoverColors(theme$1.palette, filteredProps);
+  }, [theme$1.palette, filteredProps]);
+  var _useMemo2 = React.useMemo(function () {
+      return getButtonCursor(disabled, loading);
+    }, [disabled, loading]),
+    cursor = _useMemo2.cursor,
+    events = _useMemo2.events;
+  var dripColor = React.useMemo(function () {
+    return getButtonDripColor(theme$1.palette, filteredProps);
+  }, [theme$1.palette, filteredProps]);
+
+  /* istanbul ignore next */
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    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;
+    /* istanbul ignore next */
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    if (shadow) {
+      createRipple(event);
+    }
+    onClick && onClick(event);
+  };
+  var childrenWithIcon = React.useMemo(function () {
+    return getButtonChildrenWithIcon(auto, children, {
+      icon: icon,
+      iconRight: iconRight
+    });
+  }, [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$1.shadows.level.z2 : 'none';
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [to ? /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
+      href: to
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', 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 || theme.useClasses('btn', 'btn-link', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon]
+    })) : /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
+      ref: buttonRef,
+      type: type,
+      disabled: disabled,
+      onClick: clickHandler
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', 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 || theme.useClasses('btn', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon, dripShow && /*#__PURE__*/jsxRuntime.jsx(ButtonDrip, {
+        x: dripX,
+        y: dripY,
+        color: dripColor,
+        onCompleted: dripCompletedHandle
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "612376042",
+      dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', 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'],
+      children: ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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 !== null && cursor !== void 0 ? cursor : 'pointer', ";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-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.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);
+
+var CompactButton = function CompactButton(props) {
+  // const theme = useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
+    scale: 2 / 3,
+    px: 0.6
+  }, _objectSpread2({
+    auto: true
+  }, props)), {}, {
+    children: props.children
+  }));
+};
+var IconButton = /*#__PURE__*/React.memo(CompactButton);
+
+var SmallButton = function SmallButton(props) {
+  // const theme = useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6
+  }, props), {}, {
+    children: props.children
+  }));
+};
+var SmallButton$1 = /*#__PURE__*/React.memo(SmallButton);
+
+/* "use client" */
+
+Button.Icon = IconButton;
+Button.Small = SmallButton$1;
+
+var _excluded$4 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
+var _getModifierChild = function getModifierChild(tags, children) {
+  if (!tags.length) return children;
+  var nextTag = tags.slice(1, tags.length);
+  return /*#__PURE__*/jsxRuntime.jsx(TextChild, {
+    tag: tags[0],
+    children: _getModifierChild(nextTag, children)
+  });
+};
+var TextComponent = function TextComponent(_ref) {
+  var _ref$h = _ref.h1,
+    h1 = _ref$h === void 0 ? false : _ref$h,
+    _ref$h2 = _ref.h2,
+    h2 = _ref$h2 === void 0 ? false : _ref$h2,
+    _ref$h3 = _ref.h3,
+    h3 = _ref$h3 === void 0 ? false : _ref$h3,
+    _ref$h4 = _ref.h4,
+    h4 = _ref$h4 === void 0 ? false : _ref$h4,
+    _ref$h5 = _ref.h5,
+    h5 = _ref$h5 === void 0 ? false : _ref$h5,
+    _ref$h6 = _ref.h6,
+    h6 = _ref$h6 === void 0 ? false : _ref$h6,
+    _ref$p = _ref.p,
+    p = _ref$p === void 0 ? false : _ref$p,
+    _ref$b = _ref.b,
+    b = _ref$b === void 0 ? false : _ref$b,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    _ref$i = _ref.i,
+    i = _ref$i === void 0 ? false : _ref$i,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? false : _ref$span,
+    _ref$del = _ref.del,
+    del = _ref$del === void 0 ? false : _ref$del,
+    _ref$em = _ref.em,
+    em = _ref$em === void 0 ? false : _ref$em,
+    _ref$blockquote = _ref.blockquote,
+    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    alignItems = _ref.alignItems,
+    justify = _ref.justify,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  var elements = {
+    h1: h1,
+    h2: h2,
+    h3: h3,
+    h4: h4,
+    h5: h5,
+    h6: h6,
+    p: p,
+    blockquote: blockquote
+  };
+  var inlineElements = {
+    span: span,
+    small: small,
+    b: b,
+    em: em,
+    i: i,
+    del: del
+  };
+  var names = Object.keys(elements).filter(function (name) {
+    return elements[name];
+  });
+  var inlineNames = Object.keys(inlineElements).filter(function (name) {
+    return inlineElements[name];
+  });
+
+  /**
+   *  Render element "p" only if no element is found.
+   *  If there is only one modifier, just rendered one modifier element
+   *  e.g.
+   *    <Text /> => <p />
+   *    <Text em /> => <em />
+   *    <Text p em /> => <p><em>children</em></p>
+   *
+   */
+
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var tag = React.useMemo(function () {
+    if (names[0]) return names[0];
+    if (inlineNames[0]) return inlineNames[0];
+    return 'p';
+  }, [names, inlineNames]);
+  var renderableChildElements = inlineNames.filter(function (name) {
+    return name !== tag;
+  });
+  var modifers = React.useMemo(function () {
+    if (!renderableChildElements.length) return children;
+    return _getModifierChild(renderableChildElements, children);
+  }, [renderableChildElements, children]);
+  return /*#__PURE__*/jsxRuntime.jsx(TextChild, _objectSpread2(_objectSpread2({
+    style: {
+      textAlign: props.align,
+      display: display,
+      alignItems: alignItems,
+      justifyContent: justify
+    },
+    className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
+    tag: tag
+  }, props), {}, {
+    children: typeof children === 'string' && collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/jsxRuntime.jsx(Button, {
+        margin: 0,
+        onClick: function onClick() {
+          return setExpand(!expand);
+        },
+        style: {
+          textTransform: 'lowercase'
+        },
+        effect: false,
+        color: "abort",
+        scale: 2 / 3,
+        px: 0.2,
+        py: 0,
+        auto: true,
+        children: /*#__PURE__*/jsxRuntime.jsx("b", {
+          children: expand ? 'less' : 'more'
+        })
+      })]
+    }) : modifers
+  }));
+};
+TextComponent.displayName = 'Text';
+var Text = withScale(TextComponent);
+
+var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      color: palette.foreground,
+      borderColor: palette.border,
+      hoverBorder: palette.accents_5
+    },
+    secondary: {
+      color: palette.foreground,
+      borderColor: palette.secondary,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.foreground,
+      borderColor: palette.successLight,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.foreground,
+      borderColor: palette.warningLight,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.error,
+      borderColor: palette.error,
+      hoverBorder: palette.errorDark
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};
+
 var _excluded$3 = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
@@ -1152,55 +2002,66 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
   var defaultWidth = fullWidth ? '100%' : 'initial';
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "with-label"
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || "")
-  }, label && /*#__PURE__*/React.createElement(MemoInputLabel, null, label), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
-      hover: hover,
-      disabled: disabled
-    }, labelClasses) || "")
-  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
-    icon: icon
-  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
-    type: type,
-    ref: inputRef,
-    placeholder: placeholder,
-    disabled: disabled,
-    readOnly: readOnly,
-    onFocus: focusHandler,
-    onBlur: blurHandler,
-    onChange: changeHandler,
-    autoComplete: autoComplete,
-    onKeyDown: handleKeyDown
-  }, inputProps, {
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
-      disabled: disabled
-    }, iconClasses) || "")
-  })), clearable && /*#__PURE__*/React.createElement(MemoInputIconClear, {
-    visible: Boolean(inputRef.current && inputRef.current.value !== ''),
-    disabled: disabled || readOnly,
-    onClick: clearHandler
-  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
-    icon: iconRight
-  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
-    isRight: true
-  }, labelRight), /*#__PURE__*/React.createElement("br", {
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]])
-  })), helperText && /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginTop: 0.4,
-      marginRight: 0,
-      marginLeft: 0,
-      marginBottom: '0.4rem',
-      textAlign: 'left'
-    },
-    className: _JSXStyle.dynamic([["2582554466", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + ((error ? "input-error" : '') || "")
-  }, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2582554466",
-    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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.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:#e00;}.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$1.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$1.palette.accents_1, ";border-color:").concat(theme$1.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$1.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$1.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$1.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$1.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$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["1343268165", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "with-label",
+    children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["1343268165", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || ""),
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(MemoInputLabel, {
+        children: label
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: _JSXStyle.dynamic([["1343268165", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
+          hover: hover,
+          disabled: disabled
+        }, labelClasses) || ""),
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(InputIcon, _objectSpread2({
+          icon: icon
+        }, iconProps)), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread2(_objectSpread2({
+          type: type,
+          ref: inputRef,
+          placeholder: placeholder,
+          disabled: disabled,
+          readOnly: readOnly,
+          onFocus: focusHandler,
+          onBlur: blurHandler,
+          onChange: changeHandler,
+          autoComplete: autoComplete,
+          onKeyDown: handleKeyDown
+        }, inputProps), {}, {
+          className: _JSXStyle.dynamic([["1343268165", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
+            disabled: disabled
+          }, iconClasses) || "")
+        })), clearable && /*#__PURE__*/jsxRuntime.jsx(MemoInputIconClear, {
+          visible: Boolean(inputRef.current && inputRef.current.value !== ''),
+          disabled: disabled || readOnly,
+          onClick: clearHandler
+        }), iconRight && /*#__PURE__*/jsxRuntime.jsx(InputIcon, _objectSpread2({
+          icon: iconRight
+        }, iconProps))]
+      }), labelRight && /*#__PURE__*/jsxRuntime.jsx(MemoInputLabel, {
+        isRight: true,
+        children: labelRight
+      }), /*#__PURE__*/jsxRuntime.jsx("br", {
+        className: _JSXStyle.dynamic([["1343268165", [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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]])
+      })]
+    }), helperText && /*#__PURE__*/jsxRuntime.jsxs(Text, {
+      font: 0.8,
+      style: {
+        marginTop: 0.4,
+        marginRight: 0,
+        marginLeft: 0,
+        marginBottom: '0.4rem',
+        textAlign: 'left'
+      },
+      color: error ? "error" : 'default',
+      children: ["\xA0", helperText]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1343268165",
+      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$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color],
+      children: ".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-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$1.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$1.palette.accents_1, ";border-color:").concat(theme$1.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$1.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$1.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$1.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$1.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$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")
+    })]
+  });
 });
 InputComponent.displayName = 'Input';
 var Input = withScale(InputComponent);
@@ -1220,7 +2081,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$2 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$2 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1238,6 +2099,9 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     value = _ref.value,
     placeholder = _ref.placeholder,
+    helperText = _ref.helperText,
+    error = _ref.error,
+    label = _ref.label,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded$2);
@@ -1293,29 +2157,47 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultValue: initialValue
   };
   var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
-    ref: textareaRef,
-    disabled: disabled,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    onFocus: focusHandler,
-    onBlur: blurHandler,
-    onChange: changeHandler
-  }, textareaProps, {
-    className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "12276481",
-    dynamic: [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]
-  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme$1.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme$1.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "with-label",
+    children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (classes || ""),
+      children: [/*#__PURE__*/jsxRuntime.jsx("textarea", _objectSpread2(_objectSpread2({
+        ref: textareaRef,
+        disabled: disabled,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        onFocus: focusHandler,
+        onBlur: blurHandler,
+        onChange: changeHandler
+      }, textareaProps), {}, {
+        className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
+      })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "12276481",
+        dynamic: [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background],
+        children: ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme$1.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme$1.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;}")
+      })]
+    }), helperText && /*#__PURE__*/jsxRuntime.jsxs(Text, {
+      font: 0.8,
+      style: {
+        marginTop: 0.4,
+        marginRight: 0,
+        marginLeft: 0,
+        marginBottom: '0.4rem',
+        textAlign: 'left'
+      },
+      color: error ? "error" : 'default',
+      children: ["\xA0", helperText]
+    })]
+  });
 });
 TextareaComponent.displayName = 'Textarea';
 var Textarea = withScale(TextareaComponent);
 
 var PasswordIcon = function PasswordIcon(_ref) {
   var visible = _ref.visible;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
     viewBox: "0 0 24 24",
     stroke: "currentColor",
     strokeWidth: "1.5",
@@ -1325,18 +2207,23 @@ var PasswordIcon = function PasswordIcon(_ref) {
     shapeRendering: "geometricPrecision",
     style: {
       color: 'currentColor'
-    }
-  }, !visible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M1 1l22 22"
-  })));
+    },
+    children: !visible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "12",
+        cy: "12",
+        r: "3"
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M1 1l22 22"
+      })]
+    })
+  });
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
@@ -1375,13 +2262,15 @@ var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, [props, iconClickHandler, visible, inputRef]);
   var icon = React.useMemo(function () {
     if (hideToggle) return null;
-    return /*#__PURE__*/React.createElement(MemoPasswordIcon, {
+    return /*#__PURE__*/jsxRuntime.jsx(MemoPasswordIcon, {
       visible: visible
     });
   }, [hideToggle, visible]);
-  return /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread2(_objectSpread2(_objectSpread2({
     iconRight: icon
-  }, getAllScaleProps(), inputProps), children);
+  }, getAllScaleProps()), inputProps), {}, {
+    children: children
+  }));
 });
 InputPasswordComponent.displayName = 'InputPassword';
 var InputPassword = withScale(InputPasswordComponent);
@@ -2455,92 +3344,105 @@ function PhoneInput(_ref) {
     return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
   });
   var defaultWidth = fullWidth ? '100%' : 'initial';
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: dropdownRef,
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setDropdownOpen(!dropdownOpen);
-    },
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 5,
-      paddingRight: '15px'
-    },
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.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: "".concat(selectedCountry.label, " Flag"),
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.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([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
-  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.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([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.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([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 5
-      },
-      className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.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: "".concat(c.label, " Flag"),
-      className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: 'grey'
-      },
-      className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }, c.label)));
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
-  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2480261071",
-    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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']
-  }, ".with-label.__jsx-style-dynamic-selector{position:relative;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), ";}.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, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);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$1.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$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
+    className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : ''),
+    children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        onClick: function onClick() {
+          return setDropdownOpen(!dropdownOpen);
+        },
+        className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle",
+        children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 5,
+            paddingRight: '15px'
+          },
+          className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
+          children: [/*#__PURE__*/jsxRuntime.jsx("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: "".concat(selectedCountry.label, " Flag"),
+            className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
+            children: selectedCountry.phone
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        type: "tel",
+        placeholder: placeholder,
+        value: phoneNumber,
+        onChange: handlePhoneChange,
+        onFocus: function onFocus() {
+          return setIsFocused(true);
+        },
+        onBlur: function onBlur() {
+          return setIsFocused(false);
+        },
+        className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+      })]
+    }), dropdownOpen && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown",
+      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+        type: "text",
+        placeholder: "Search country...",
+        value: searchTerm,
+        onChange: function onChange(e) {
+          return setSearchTerm(e.target.value);
+        },
+        className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list",
+        children: filteredCountries.length > 0 ? filteredCountries.map(function (c) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            onClick: function onClick() {
+              return handleSelectCountry(c);
+            },
+            className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item",
+            children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 5
+              },
+              className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
+              children: [/*#__PURE__*/jsxRuntime.jsx("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: "".concat(c.label, " Flag"),
+                className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+              }), c.phone, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+                style: {
+                  color: 'grey'
+                },
+                className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
+                children: c.label
+              })]
+            })
+          }, c.code);
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: _JSXStyle.dynamic([["2480261071", [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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled",
+          children: "No results"
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2480261071",
+      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), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef'],
+      children: ".with-label.__jsx-style-dynamic-selector{position:relative;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), ";}.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, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);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$1.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$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")
+    })]
+  });
 }
 var PhoneInput$1 = withScale(PhoneInput);
 
@@ -3242,28 +4144,32 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props);
   if (customInput) {
     var CustomInput = customInput;
-    return /*#__PURE__*/React.createElement(CustomInput, inputProps);
+    return /*#__PURE__*/jsxRuntime.jsx(CustomInput, _objectSpread2({}, inputProps));
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + "with-label"
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
-    style: {
-      textAlign: 'right',
-      border: "1px solid ".concat(theme$1.palette.border),
-      fontSize: '14px',
-      borderRadius: '5px',
-      height: '35px',
-      padding: '5px 10px',
-      fontWeight: 'light',
-      width: 'auto',
-      background: 'transparent',
-      minWidth: '200px'
-    },
-    className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1592876518",
-    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)]
-  }, ".with-label.__jsx-style-dynamic-selector{position:relative;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), ";}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + "with-label",
+    children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread2(_objectSpread2({}, inputProps), {}, {
+      style: {
+        textAlign: 'right',
+        border: "1px solid ".concat(theme$1.palette.border),
+        fontSize: '14px',
+        borderRadius: '5px',
+        height: '35px',
+        padding: '5px 10px',
+        fontWeight: 'light',
+        width: 'auto',
+        background: 'transparent',
+        minWidth: '200px'
+      },
+      className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1592876518",
+      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)],
+      children: ".with-label.__jsx-style-dynamic-selector{position:relative;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), ";}")
+    })]
+  });
 });
 
 // CurrencyInput.displayName = 'CurrencyInput';