@helpdice/ui 2.1.5 → 2.1.8

package/dist/index.js

@@ -1365,7 +1365,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$1o = ["label", "labelRight", "color", "error", "type", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded$1o = ["label", "labelRight", "color", "error", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1381,6 +1381,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
     iconRight = _ref.iconRight,
     _ref$iconClickable = _ref.iconClickable,
     iconClickable = _ref$iconClickable === void 0 ? false : _ref$iconClickable,
@@ -1485,11 +1487,11 @@ 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([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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"
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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) || "")
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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', {
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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) || "")
@@ -1506,7 +1508,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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({
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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, {
@@ -1518,7 +1520,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
     isRight: true
   }, labelRight), /*#__PURE__*/React.createElement("br", {
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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]]])
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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 && /*#__PURE__*/React.createElement("p", {
     style: {
       marginTop: 0.4,
@@ -1527,11 +1529,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       marginBottom: '0.4rem',
       textAlign: 'left'
     },
-    className: _JSXStyle.dynamic([["3279091727", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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]]]) + " " + "input-error"
+    className: _JSXStyle.dynamic([["3970712841", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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]]]) + " " + "input-error"
   }, error), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3279091727",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), theme$1.layout.radius, 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:#aa4a44;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme$1.layout.radius, ";border:1px solid ").concat(borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$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;}")));
+    id: "3970712841",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$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:#aa4a44;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$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);
@@ -2596,22 +2598,26 @@ var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
     secondary: {
       bg: palette.background,
       border: palette.foreground,
-      color: palette.foreground
+      color: palette.foreground,
+      ripple: ''
     },
     success: {
       bg: palette.background,
       border: palette.success,
-      color: palette.success
+      color: palette.success,
+      ripple: ''
     },
     warning: {
       bg: palette.background,
       border: palette.warning,
-      color: palette.warning
+      color: palette.warning,
+      ripple: ''
     },
     error: {
       bg: palette.background,
       border: palette.error,
-      color: palette.error
+      color: palette.error,
+      ripple: ''
     }
   };
   return colors[_color] || null;
@@ -2624,38 +2630,45 @@ var getButtonColors = function getButtonColors(palette, props) {
     "default": {
       bg: palette.background,
       border: palette.border,
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     },
     secondary: {
       bg: palette.foreground,
       border: palette.foreground,
-      color: palette.background
+      color: palette.background,
+      ripple: palette.accents_1
     },
     success: {
       bg: palette.success,
       border: palette.success,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#1f93ffff'
     },
     warning: {
       bg: palette.warning,
       border: palette.warning,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ffca29ff'
     },
     error: {
       bg: palette.error,
       border: palette.error,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ff5a55ff'
     },
     abort: {
       bg: 'transparent',
       border: 'transparent',
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     }
   };
   if (disabled) return {
     bg: palette.accents_1,
     border: palette.accents_2,
-    color: '#ccc'
+    color: '#ccc',
+    ripple: ''
   };
 
   /**
@@ -2835,7 +2848,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     }, [theme$1.palette, filteredProps]),
     bg = _useMemo.bg,
     border = _useMemo.border,
-    color = _useMemo.color;
+    color = _useMemo.color,
+    rippleColor = _useMemo.ripple;
   var hover = React.useMemo(function () {
     return getButtonHoverColors(theme$1.palette, filteredProps);
   }, [theme$1.palette, filteredProps]);
@@ -2854,6 +2868,45 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     setDripX(0);
     setDripY(0);
   };
+  var createRipple = function createRipple(event) {
+    var button = buttonRef.current;
+    if (!button) return;
+    var rect = button.getBoundingClientRect();
+    var size = Math.max(rect.width, rect.height);
+    var x = event.clientX - rect.left - size / 2;
+    var y = event.clientY - rect.top - size / 2;
+    var rippleCount = 1; // number of rings
+    var rippleDelay = 500; // ms between each ripple
+    var _loop = function _loop() {
+      var ripple = document.createElement('span');
+      Object.assign(ripple.style, {
+        position: 'absolute',
+        borderRadius: '50%',
+        backgroundColor: rippleColor,
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px"),
+        left: "".concat(x, "px"),
+        top: "".concat(y, "px"),
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+        opacity: '1',
+        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
+        zIndex: 1
+      });
+      button.appendChild(ripple);
+
+      // Force reflow to start transition
+      window.getComputedStyle(ripple).opacity;
+      ripple.style.transform = 'scale(2.5)';
+      ripple.style.opacity = '0';
+      ripple.addEventListener('transitionend', function () {
+        ripple.remove();
+      });
+    };
+    for (var i = 0; i < rippleCount; i++) {
+      _loop();
+    }
+  };
   var clickHandler = function clickHandler(event) {
     if (disabled || loading) return;
     var showDrip = !shadow && !ghost && effect;
@@ -2864,6 +2917,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
       setDripX(event.clientX - rect.left);
       setDripY(event.clientY - rect.top);
     }
+    if (shadow) {
+      createRipple(event);
+    }
     onClick && onClick(event);
   };
   var childrenWithIcon = React.useMemo(function () {
@@ -2874,13 +2930,16 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   }, [auto, children, icon, iconRight]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+
+  // If shadow provided is string then value other default
+  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
   return /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme$1.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme$1.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+    className: _JSXStyle.dynamic([["960361315", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
   }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
     color: color
   }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -2889,9 +2948,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     color: dripColor,
     onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1558010596",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme$1.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme$1.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$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(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme$1.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme$1.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+    id: "960361315",
+    dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$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, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
 });
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
@@ -11080,7 +11139,7 @@ var GridContainer = withScale(GridContainerComponent);
 
 Grid.Container = GridContainer;
 
-/*! @license DOMPurify 3.2.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.7/LICENSE */
+/*! @license DOMPurify 3.3.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.0/LICENSE */
 
 const {
   entries,
@@ -11266,7 +11325,7 @@ function lookupGetter(object, prop) {
 }
 
 const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
-const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'slot', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
 const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
 // List of SVG elements that are disallowed by default.
 // We still need to know them so that we can do namespace
@@ -11280,7 +11339,7 @@ const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongd
 const text = freeze(['#text']);
 
 const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
-const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
+const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
 const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
 const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
 
@@ -11378,7 +11437,7 @@ const _createHooksMap = function _createHooksMap() {
 function createDOMPurify() {
   let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
   const DOMPurify = root => createDOMPurify(root);
-  DOMPurify.version = '3.2.7';
+  DOMPurify.version = '3.3.0';
   DOMPurify.removed = [];
   if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
     // Not running in a browser, provide a factory function
@@ -11489,6 +11548,21 @@ function createDOMPurify() {
   let FORBID_TAGS = null;
   /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
   let FORBID_ATTR = null;
+  /* Config object to store ADD_TAGS/ADD_ATTR functions (when used as functions) */
+  const EXTRA_ELEMENT_HANDLING = Object.seal(create$1(null, {
+    tagCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    },
+    attributeCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    }
+  }));
   /* Decide if ARIA attributes are okay */
   let ALLOW_ARIA_ATTR = true;
   /* Decide if custom data attributes are okay */
@@ -11681,16 +11755,24 @@ function createDOMPurify() {
     }
     /* Merge configuration parameters */
     if (cfg.ADD_TAGS) {
-      if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
-        ALLOWED_TAGS = clone(ALLOWED_TAGS);
+      if (typeof cfg.ADD_TAGS === 'function') {
+        EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS;
+      } else {
+        if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
+          ALLOWED_TAGS = clone(ALLOWED_TAGS);
+        }
+        addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
       }
-      addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
     }
     if (cfg.ADD_ATTR) {
-      if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
-        ALLOWED_ATTR = clone(ALLOWED_ATTR);
+      if (typeof cfg.ADD_ATTR === 'function') {
+        EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR;
+      } else {
+        if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
+          ALLOWED_ATTR = clone(ALLOWED_ATTR);
+        }
+        addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
       }
-      addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
     }
     if (cfg.ADD_URI_SAFE_ATTR) {
       addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);
@@ -11998,7 +12080,7 @@ function createDOMPurify() {
       return true;
     }
     /* Remove element if anything forbids its presence */
-    if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+    if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) {
       /* Check if we have a custom element to handle */
       if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
         if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
@@ -12070,7 +12152,7 @@ function createDOMPurify() {
         (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
         XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
         We don't need to check the value; it's always URI safe. */
-    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
       if (
       // First condition does a very basic check if a) it's basically a valid custom element tagname AND
       // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
@@ -13625,7 +13707,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
   }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
 };
 TooltipComponent.displayName = 'Tooltip';
-var Tooltip$1 = withScale(TooltipComponent);
+var Tooltip = withScale(TooltipComponent);
 
 /* "use client" */
 
@@ -13693,7 +13775,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
   }, [customVisible]);
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(Tooltip$1, _extends({
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
     type: type,
     enterDelay: enterDelay,
     leaveDelay: leaveDelay,
@@ -16706,172 +16788,6 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
 SpinnerComponent.displayName = 'Spinner';
 var Spinner = withScale(SpinnerComponent);
 
-// import Button from '../button'
-
-var makeColgroup = function makeColgroup(width, columns) {
-  var unsetWidthCount = columns.filter(function (c) {
-    return !c.width;
-  }).length;
-  var customWidthTotal = columns.reduce(function (pre, current) {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
-  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("col", {
-      key: "colgroup-".concat(index),
-      width: column.width || averageWidth
-    });
-  }));
-};
-var TableHead = function TableHead(props) {
-  var theme$1 = theme.useTheme();
-  var _ref = props,
-    columns = _ref.columns,
-    width = _ref.width,
-    onFilters = _ref.onFilters,
-    showFilters = _ref.showFilters,
-    stickyHeader = _ref.stickyHeader;
-  var isScalableWidth = React.useMemo(function () {
-    return columns.find(function (item) {
-      return !!item.width;
-    });
-  }, [columns]);
-  var colgroup = React.useMemo(function () {
-    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width]);
-  var _React$useState = React.useState(columns.reduce(function (acc, col) {
-      if (col.filter) {
-        acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
-      }
-      return acc;
-    }, {})),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filters = _React$useState2[0],
-    setFilters = _React$useState2[1];
-
-  // const applyFilters = () => {
-  //   if (onFilters) {
-  //     onFilters(filters);
-  //   }
-  // }
-
-  var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
-      if (onFilters) {
-        onFilters(filters);
-      }
-      return updatedFilters;
-    });
-  };
-  var generateFilterInputs = function generateFilterInputs() {
-    return columns.map(function (col) {
-      var _String, _filters$filterName;
-      var Header = col.label,
-        accessor = col.filter,
-        options = col.options;
-      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-      // const unq_accessor = _.uniqueId(filterName);
-      // if (Header === 'actions') {
-      //   return (
-      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
-      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
-      //     </th>
-      //   )
-      // }
-      return /*#__PURE__*/React.createElement("th", {
-        style: {
-          padding: '3px',
-          textAlign: 'left'
-        },
-        "data-column": Header
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
-        onChange: function onChange(newValue) {
-          return handleFilterChange(filterName, newValue);
-        }
-      }, /*#__PURE__*/React.createElement(Select.Option, {
-        value: "All"
-      }, "All ", Header), options ? options.map(function (option) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          value: option.value
-        }, option.name);
-      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
-      // id={`filter-date-${filterName}`}
-      , {
-        type: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        }
-      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
-      // id={`filter-search-${filterName}`}
-      , {
-        type: "text",
-        autoComplete: "off"
-        // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
-        ,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        },
-        placeholder: "Search...",
-        fullWidth: true
-      }));
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
-  }, /*#__PURE__*/React.createElement("tr", {
-    style: {
-      backgroundColor: theme$1.palette.background
-    },
-    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
-  }, columns.map(function (column, _index) {
-    var _String2;
-    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
-    return /*#__PURE__*/React.createElement("th", {
-      style: _objectSpread2({
-        // textAlign: `${column?.align} !important`,
-        // paddingLeft: '0.3rem',
-        // paddingRight: '0.3rem',
-        backgroundColor: theme$1.type == 'dark' ? theme$1.palette.accents_1 : theme$1.palette.background,
-        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
-        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
-      }, column === null || column === void 0 ? void 0 : column.style),
-      "data-column": dataName,
-      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]]) + " " + (column.className || "")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]]) + " " + "thead-box"
-    }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
-    }), /*#__PURE__*/React.createElement("span", {
-      style: {
-        textAlign: 'center'
-      },
-      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
-    }, column.text)));
-  })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
-  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4089411751",
-    dynamic: [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:".concat(theme$1.palette.background, ";font-size:inherit;").concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme$1.palette.accents_5, ";background:").concat(theme$1.palette.accents_1, ";border-bottom:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme$1.palette.border, ";border-left:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme$1.palette.border, ";border-right:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";}.thead-box.__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;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
-};
-TableHead.displayName = 'TableHead';
-
 var lodash$1 = {exports: {}};
 
 /**
@@ -34084,6 +34000,173 @@ function requireLodash () {
 var lodashExports = requireLodash();
 var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
+// import Button from '../button'
+
+var makeColgroup = function makeColgroup(width, columns) {
+  var colId = lodashExports.uniqueId('col');
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(colId),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme$1 = theme.useTheme();
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width,
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters,
+    stickyHeader = _ref.stickyHeader;
+  var isScalableWidth = React.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  var _React$useState = React.useState(columns.reduce(function (acc, col) {
+      if (col.filter) {
+        acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
+      }
+      return acc;
+    }, {})),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
+
+  // const applyFilters = () => {
+  //   if (onFilters) {
+  //     onFilters(filters);
+  //   }
+  // }
+
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
+      if (onFilters) {
+        onFilters(filters);
+      }
+      return updatedFilters;
+    });
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      // const unq_accessor = _.uniqueId(filterName);
+      // if (Header === 'actions') {
+      //   return (
+      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
+      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
+      //     </th>
+      //   )
+      // }
+      return /*#__PURE__*/React.createElement("th", {
+        style: {
+          padding: '3px',
+          textAlign: 'left'
+        },
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
+      // key={unq_accessor}
+      // name={filterName}
+      , {
+        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+        onChange: function onChange(newValue) {
+          return handleFilterChange(filterName, newValue);
+        }
+      }, /*#__PURE__*/React.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
+      // id={`filter-date-${filterName}`}
+      , {
+        type: "date"
+        // name={filterName}
+        ,
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        }
+      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
+      // id={`filter-search-${filterName}`}
+      , {
+        type: "text",
+        autoComplete: "off"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        // name={filterName}
+        ,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        },
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: theme$1.palette.background
+    },
+    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
+  }, columns.map(function (column, _index) {
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    return /*#__PURE__*/React.createElement("th", {
+      style: _objectSpread2({
+        // textAlign: `${column?.align} !important`,
+        // paddingLeft: '0.3rem',
+        // paddingRight: '0.3rem',
+        backgroundColor: theme$1.type == 'dark' ? theme$1.palette.accents_1 : theme$1.palette.background,
+        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
+        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
+      }, column === null || column === void 0 ? void 0 : column.style),
+      "data-column": dataName,
+      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]]) + " " + (column.className || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]]) + " " + "thead-box"
+    }, column.label, /*#__PURE__*/React.createElement("br", {
+      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        textAlign: 'center'
+      },
+      className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
+    }, column.text)));
+  })), showFilters && /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]]])
+  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4089411751",
+    dynamic: [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, 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]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:".concat(theme$1.palette.background, ";font-size:inherit;").concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme$1.palette.accents_5, ";background:").concat(theme$1.palette.accents_1, ";border-bottom:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme$1.palette.border, ";border-left:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme$1.palette.border, ";border-right:1px solid ").concat(theme$1.palette.border, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";}.thead-box.__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;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+};
+TableHead.displayName = 'TableHead';
+
 function Empty() {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -34660,7 +34743,7 @@ var TableCell = function TableCell(_ref) {
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
       "data-column": column.prop,
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      key: "row-td-".concat(currentRowValue.id, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },
@@ -34748,7 +34831,7 @@ var TableBody = function TableBody(_ref) {
 
   function renderRow(cols, row, index) {
     var _row$style;
-    var urid = _.uniqueId();
+    // const urid = _.uniqueId();
     var className = rowClassName(row, index);
     var rw = _objectSpread2({}, row);
     var rowStyle = (_row$style = row === null || row === void 0 ? void 0 : row.style) !== null && _row$style !== void 0 ? _row$style : {};
@@ -34769,7 +34852,7 @@ var TableBody = function TableBody(_ref) {
       onDragStart: onDragStart,
       "aria-checked": selected.indexOf(row) !== -1,
       tabIndex: -1,
-      key: urid,
+      key: "table-row-".concat(rw.id),
       style: _objectSpread2({
         cursor: 'pointer',
         backgroundColor: isRowSelected ? hoverColor : ''
@@ -35068,7 +35151,7 @@ function TableComponent(tableProps) {
       margin: '10px'
     },
     className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement(Tooltip$1, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Previous"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !previousCursor,
@@ -35079,7 +35162,7 @@ function TableComponent(tableProps) {
     px: 0.6,
     scale: 2 / 3,
     iconRight: /*#__PURE__*/React.createElement(icons.ChevronLeft, null)
-  })), /*#__PURE__*/React.createElement(Tooltip$1, {
+  })), /*#__PURE__*/React.createElement(Tooltip, {
     text: "Next"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !nextCursor,
@@ -35782,7 +35865,7 @@ var ToggleComponent = function ToggleComponent(_ref) {
 ToggleComponent.displayName = 'Toggle';
 var Toggle = withScale(ToggleComponent);
 
-var Tooltip = function Tooltip(_ref) {
+var Notetip = function Notetip(_ref) {
   var children = _ref.children,
     text = _ref.text,
     _ref$placement = _ref.placement,
@@ -35853,8 +35936,8 @@ var Tooltip = function Tooltip(_ref) {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onTouchStart: handleTouchStart,
-    className: _JSXStyle.dynamic([["2501444323", [theme$1.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-reference"
-  }, children), show && x != null && y != null ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4210526695", [theme$1.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-reference"
+  }, children), show && x != null && y != null && text != null ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
     ref: refs.setFloating,
     style: {
       position: strategy,
@@ -35866,11 +35949,11 @@ var Tooltip = function Tooltip(_ref) {
       transitionProperty: 'opacity, transform',
       transitionDuration: "".concat(duration, "ms")
     },
-    className: _JSXStyle.dynamic([["2501444323", [theme$1.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
+    className: _JSXStyle.dynamic([["4210526695", [theme$1.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
   }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2501444323",
-    dynamic: [theme$1.palette.accents_7, duration, duration, duration]
-  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme$1.palette.accents_7, ";color:white;padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
+    id: "4210526695",
+    dynamic: [theme$1.palette.accents_1, duration, duration, duration]
+  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme$1.palette.accents_1, ";padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
 };
 
 var TreeFileIcon = function TreeFileIcon(_ref) {
@@ -41632,6 +41715,241 @@ var useToasts = function useToasts(layout) {
   };
 };
 
+function deselectCurrent () {
+  var selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function () {};
+  }
+  var active = document.activeElement;
+  var ranges = [];
+  for (var i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i));
+  }
+  switch (active.tagName.toUpperCase() // .toUpperCase handles XHTML
+  ) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      active.blur();
+      break;
+    default:
+      active = null;
+      break;
+  }
+  selection.removeAllRanges();
+  return function () {
+    selection.type === 'Caret' && selection.removeAllRanges();
+    if (!selection.rangeCount) {
+      ranges.forEach(function (range) {
+        selection.addRange(range);
+      });
+    }
+    active && active.focus();
+  };
+}
+
+var clipboardToIE11Formatting = {
+  'text/plain': 'Text',
+  'text/html': 'Url',
+  "default": 'Text'
+};
+var defaultMessage = 'Copy to clipboard: #{key}, Enter';
+function format(message) {
+  var copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+function copy(text, options) {
+  var debug,
+    message,
+    reselectPrevious,
+    range,
+    selection,
+    mark,
+    success = false;
+  if (!options) {
+    options = {};
+  }
+  debug = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+    range = document.createRange();
+    selection = document.getSelection();
+    mark = document.createElement('span');
+    mark.textContent = text;
+    // avoid screen readers from reading out loud the text
+    mark.ariaHidden = 'true';
+    // reset user styles for span element
+    mark.style.all = 'unset';
+    // prevents scrolling to the end of the page
+    mark.style.position = 'fixed';
+    mark.style.top = 0;
+    mark.style.clip = 'rect(0, 0, 0, 0)';
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = 'pre';
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = 'text';
+    mark.style.MozUserSelect = 'text';
+    mark.style.msUserSelect = 'text';
+    mark.style.userSelect = 'text';
+    mark.addEventListener('copy', function (e) {
+      e.stopPropagation();
+      if (options.format) {
+        e.preventDefault();
+        if (typeof e.clipboardData === 'undefined') {
+          // IE 11
+          debug && console.warn('unable to use e.clipboardData');
+          debug && console.warn('trying IE specific stuff');
+          window.clipboardData.clearData();
+          var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default'];
+          window.clipboardData.setData(format, text);
+        } else {
+          // all other browsers
+          e.clipboardData.clearData();
+          e.clipboardData.setData(options.format, text);
+        }
+      }
+      if (options.onCopy) {
+        e.preventDefault();
+        options.onCopy(e.clipboardData);
+      }
+    });
+    document.body.appendChild(mark);
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+    var successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('copy command was unsuccessful');
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error('unable to copy using execCommand: ', err);
+    debug && console.warn('trying IE specific stuff');
+    try {
+      window.clipboardData.setData(options.format || 'text', text);
+      options.onCopy && options.onCopy(window.clipboardData);
+      success = true;
+    } catch (err) {
+      debug && console.error('unable to copy using clipboardData: ', err);
+      debug && console.error('falling back to prompt');
+      message = format('message' in options ? options.message : defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == 'function') {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+  return success;
+}
+
+// type ClipboardProps = {
+//     showIcon: boolean,
+//     text: string,
+//     children: React.ReactNode,
+//     onCopy: (text: string, result: any) => void,
+//     options: {
+//         debug: boolean,
+//         message: string,
+//         format: string
+//     }
+// }
+
+// export function Clipboard(props: ClipboardProps) {
+//     const { setToast } = useToasts();
+//     const { showIcon, text, onCopy, options: options, children, } = props;
+//     const elem: ReactNode = React.Children.only(children) as ReactNode;
+//     const onClick = (event: MouseEventHandler<HTMLButtonElement | MouseEvent>) => {
+//         const result = copy(text, options);
+
+//         if (result) {
+//             setToast({
+//                 text: 'Text Copied'
+//             });
+//         }
+
+//         if (onCopy) {
+//             onCopy(text, result);
+//         }
+
+//         // Bypass onClick if it was present
+//         if (elem && elem.props && typeof elem.props.onClick === 'function') {
+//             elem.props.onClick(event);
+//         }
+//     };
+
+//     if (showIcon) {
+//         return React.cloneElement(
+//             <div>
+//                 {elem}
+//                 <Button auto scale={0.1} px={0.6} onClick={onClick} icon={<Copy />} />
+//             </div>,
+//             { ...props }
+//         );
+//     }
+
+//     return React.cloneElement(
+//         <div onClick={onClick}>
+//             {elem}
+//         </div>,
+//         { ...props }
+//     );
+// }
+
+function Clipboard(props) {
+  var _useToasts = theme.useToasts(),
+    setToast = _useToasts.setToast;
+  var showIcon = props.showIcon,
+    text = props.text,
+    onCopy = props.onCopy,
+    options = props.options,
+    children = props.children;
+  var elem = React.Children.only(children);
+  var _onClick = function onClick() {
+    var _elem$props;
+    var result = copy(text, options);
+    if (result) {
+      setToast({
+        text: 'Text Copied'
+      });
+    }
+    if (onCopy) {
+      onCopy(text, result);
+    }
+
+    // ✅ Safely invoke child's onClick if it exists
+    if (/*#__PURE__*/React.isValidElement(elem) && typeof (elem === null || elem === void 0 || (_elem$props = elem.props) === null || _elem$props === void 0 ? void 0 : _elem$props.onClick) === 'function') {
+      elem.props.onClick();
+    }
+  };
+
+  // If showIcon is true, render the child + a copy icon button
+  if (showIcon) {
+    return /*#__PURE__*/React.createElement("div", null, elem, /*#__PURE__*/React.createElement(Button, {
+      auto: true,
+      scale: 0.1,
+      px: 0.6,
+      onClick: function onClick() {
+        return _onClick;
+      },
+      icon: /*#__PURE__*/React.createElement(icons.Copy, null)
+    }));
+  }
+
+  // Otherwise, make the entire div clickable for copy
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return _onClick;
+    }
+  }, elem);
+}
+
 exports.AutoComplete = AutoComplete;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -41645,6 +41963,7 @@ exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CircularProgress = CircularProgressbarWithChildren;
 exports.CircularProgressBar = CircularProgressbar;
+exports.Clipboard = Clipboard;
 exports.Code = Code;
 exports.CodeBlock = CodeBlock;
 exports.Collapse = Collapse;
@@ -41686,7 +42005,7 @@ exports.LoginWithTwitter = index$2;
 exports.Menu = Menu;
 exports.Modal = Modal;
 exports.Note = Note;
-exports.Notetip = Tooltip;
+exports.Notetip = Notetip;
 exports.Page = Page;
 exports.Pagination = Pagination;
 exports.PhoneInput = PhoneInput;
@@ -41710,7 +42029,7 @@ exports.Text = Text;
 exports.Textarea = Textarea;
 exports.Themes = Themes;
 exports.Toggle = Toggle;
-exports.Tooltip = Tooltip$1;
+exports.Tooltip = Tooltip;
 exports.Tree = Tree;
 exports.User = User;
 exports.buildStyles = buildStyles;