@helpdice/ui 1.3.2 → 1.3.3

package/README.md

@@ -13,13 +13,13 @@
 2. import into project:
 
 ```jsx
-import { ThemeProvider, CssBaseline } from '@helpdice/ui'
+import { UiProvider, CssBaseline } from '@helpdice/ui'
 
 const Application = () => (
-  <ThemeProvider>
+  <UiProvider>
     <CssBaseline /> // ---> Normalize styles
     <AppComponent /> // ---> Your App Component
-  </ThemeProvider>
+  </UiProvider>
 )
 ```
 

package/dist/index.js

@@ -2,7 +2,6 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
-var Popover$1 = require('components/popover');
 var require$$0 = require('react-is');
 var isEqual = require('react-fast-compare');
 
@@ -42772,7 +42771,7 @@ function DataTable(_ref) {
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      return /*#__PURE__*/React.createElement(Popover$1.Item, {
+      return /*#__PURE__*/React.createElement(Popover.Item, {
         key: colunqid
         // selected={!hideColumn.includes(option.name as never)}
         ,
@@ -42880,7 +42879,7 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover$1, {
+  }, /*#__PURE__*/React.createElement(Popover, {
     child: content
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {},

package/dist/table/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var Popover = require('components/popover');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1142,7 +1141,7 @@ var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingL
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext$4 = {
+var defaultContext$5 = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -1168,7 +1167,7 @@ var defaultContext$4 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$4);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$5);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -1213,6 +1212,11 @@ var pickChildByProps = function pickChildByProps(children, key, value) {
   var targetChildren = target.length >= 0 ? target : undefined;
   return [withoutPropChildren, targetChildren];
 };
+var getReactNode = function getReactNode(node) {
+  if (!node) return null;
+  if (typeof node !== 'function') return node;
+  return node();
+};
 var isBrowser = function isBrowser() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 };
@@ -1266,7 +1270,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$i = ["children"];
+var _excluded$k = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1276,7 +1280,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$k);
     var _useTheme = useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1359,7 +1363,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$h = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$j = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1399,7 +1403,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === undefined ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1541,7 +1545,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$g = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$i = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1561,7 +1565,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$resize = _ref.resize,
     resize = _ref$resize === undefined ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1661,11 +1665,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$f = ["hideToggle", "children"];
+var _excluded$h = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -18962,11 +18966,11 @@ var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
 
 /* "use client" */
 
-var defaultContext$3 = {
+var defaultContext$4 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React.createContext(defaultContext$3);
+var SelectContext = /*#__PURE__*/React.createContext(defaultContext$4);
 var useSelectContext = function useSelectContext() {
   return React.useContext(SelectContext);
 };
@@ -19031,7 +19035,7 @@ var useResize = function useResize(callback) {
   }, []);
 };
 
-var _excluded$e = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var _excluded$g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -19046,7 +19050,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === undefined ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === undefined ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -19302,7 +19306,7 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$d = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$f = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {
@@ -19340,7 +19344,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19380,12 +19384,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$c = ["children", "className"];
+var _excluded$e = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -19405,7 +19409,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$b = ["gap", "wrap", "children", "className"];
+var _excluded$d = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === undefined ? 0 : _ref$gap,
@@ -19414,7 +19418,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -19570,7 +19574,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'GeistSelectInput';
 
-var _excluded$a = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$c = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -19599,7 +19603,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === undefined ? function () {} : _ref$onDropdownVisibl,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19771,7 +19775,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
 SelectComponent.displayName = 'Select';
 var Select = withScale(SelectComponent);
 
-var _excluded$9 = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+var _excluded$b = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,
@@ -19785,7 +19789,7 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     label = _ref$label === undefined ? false : _ref$label,
     _ref$preventAllEvents = _ref.preventAllEvents,
     preventAllEvents = _ref$preventAllEvents === undefined ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -20034,11 +20038,11 @@ var TableCell = function TableCell(_ref) {
 
 /* "use client" */
 
-var defaultContext$2 = {
+var defaultContext$3 = {
   columns: [],
   updateColumn: function updateColumn() {}
 };
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$3);
 var useTableContext = function useTableContext() {
   return React.useContext(TableContext);
 };
@@ -30187,13 +30191,13 @@ var addColorAlpha = function addColorAlpha(color, alpha) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
 };
 
-var _excluded$8 = ["active", "children", "disabled", "onClick"];
+var _excluded$a = ["active", "children", "disabled", "onClick"];
 var PaginationItem = function PaginationItem(_ref) {
   var active = _ref.active,
     children = _ref.children,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var theme = useTheme();
   var _useMemo = React.useMemo(function () {
       return [addColorAlpha(theme.palette.success, 0.1), addColorAlpha(theme.palette.success, 0.8)];
@@ -30225,16 +30229,16 @@ PaginationItem.displayName = 'GeistPaginationItem';
 /* "use client" */
 
 tuple('prev', 'next', 'click');
-var defaultContext$1 = {};
-var PaginationContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var defaultContext$2 = {};
+var PaginationContext = /*#__PURE__*/React.createContext(defaultContext$2);
 var usePaginationContext = function usePaginationContext() {
   return React.useContext(PaginationContext);
 };
 
-var _excluded$7 = ["children"];
+var _excluded$9 = ["children"];
 var PaginationPrevious = function PaginationPrevious(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var _usePaginationContext = usePaginationContext(),
     update = _usePaginationContext.update,
     isFirst = _usePaginationContext.isFirst;
@@ -30247,10 +30251,10 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
 };
 PaginationPrevious.displayName = 'GeistPaginationPrevious';
 
-var _excluded$6 = ["children"];
+var _excluded$8 = ["children"];
 var PaginationNext = function PaginationNext(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var _usePaginationContext = usePaginationContext(),
     update = _usePaginationContext.update,
     isLast = _usePaginationContext.isLast;
@@ -30409,7 +30413,7 @@ var PaginationPages = function PaginationPages(_ref) {
 };
 PaginationPages.displayName = 'GeistPaginationPages';
 
-var _excluded$5 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+var _excluded$7 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
 var PaginationComponent = function PaginationComponent(_ref) {
   var customPage = _ref.page,
     _ref$initialPage = _ref.initialPage,
@@ -30422,7 +30426,7 @@ var PaginationComponent = function PaginationComponent(_ref) {
     onChange = _ref.onChange,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useCurrentState = useCurrentState(initialPage),
@@ -30494,7 +30498,7 @@ var Pagination = withScale(PaginationComponent);
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 
-var _excluded$4 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded$6 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -30528,7 +30532,7 @@ function TableComponent(tableProps) {
     rowClassName = _ref$rowClassName === undefined ? function () {
       return '';
     } : _ref$rowClassName,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   /* eslint-enable @typescript-eslint/no-unused-vars */
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -30678,7 +30682,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
 };
 ButtonDrip.displayName = 'ButtonDrip';
 
-var _excluded$3 = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$5 = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -30698,7 +30702,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -30738,7 +30742,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'GeistButtonLoading';
 
-var _excluded$2 = ["isRight", "isSingle", "children", "className"];
+var _excluded$4 = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === undefined ? false : _ref$isRight,
@@ -30746,7 +30750,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var classes = useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -30797,11 +30801,11 @@ var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
 
 /* "use client" */
 
-var defaultContext = {
+var defaultContext$1 = {
   isButtonGroup: false,
   disabled: false
 };
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$1);
 var useButtonGroupContext = function useButtonGroupContext() {
   return React.useContext(ButtonGroupContext);
 };
@@ -30993,7 +30997,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var _excluded$3 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
@@ -31039,7 +31043,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1);
+    var props = _objectWithoutProperties(filteredProps, _excluded$3);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -31409,7 +31413,7 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+var _excluded$2 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
 var TooltipComponent = function TooltipComponent(_ref) {
   var children = _ref.children,
     _ref$initialVisible = _ref.initialVisible,
@@ -31436,7 +31440,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     _ref$hideArrow = _ref.hideArrow,
     hideArrow = _ref$hideArrow === undefined ? false : _ref$hideArrow,
     customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var timer = React.useRef();
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -31517,6 +31521,142 @@ var TooltipComponent = function TooltipComponent(_ref) {
 TooltipComponent.displayName = 'Tooltip';
 var Tooltip = withScale(TooltipComponent);
 
+/* "use client" */
+
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: function onItemClick() {}
+};
+var PopoverContext = /*#__PURE__*/React.createContext(defaultContext);
+var usePopoverContext = function usePopoverContext() {
+  return React.useContext(PopoverContext);
+};
+
+var _excluded$1 = ["child", "children", "enterDelay", "leaveDelay", "offset", "type", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible"];
+var PopoverComponent = function PopoverComponent(_ref) {
+  var child = _ref.child,
+    children = _ref.children,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === undefined ? 100 : _ref$enterDelay,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === undefined ? 150 : _ref$leaveDelay,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === undefined ? 12 : _ref$offset,
+    _ref$type = _ref.type,
+    type = _ref$type === undefined ? 'default' : _ref$type,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === undefined ? 'click' : _ref$trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === undefined ? 'bottom' : _ref$placement,
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === undefined ? false : _ref$initialVisible,
+    _ref$portalClassName = _ref.portalClassName,
+    portalClassName = _ref$portalClassName === undefined ? '' : _ref$portalClassName,
+    _ref$disableItemsAuto = _ref.disableItemsAutoClose,
+    disableItemsAutoClose = _ref$disableItemsAuto === undefined ? false : _ref$disableItemsAuto,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === undefined ? function () {} : _ref$onVisibleChange,
+    customVisible = _ref.visible,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = React.useState(initialVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var textNode = React.useMemo(function () {
+    return getReactNode(child);
+  }, [child]);
+  var onChildClick = function onChildClick() {
+    onPopoverVisibleChange(false);
+  };
+  var value = React.useMemo(function () {
+    return {
+      onItemClick: onChildClick,
+      disableItemsAutoClose: disableItemsAutoClose
+    };
+  }, [disableItemsAutoClose]);
+  var classes = useClasses('popover', portalClassName);
+  var onPopoverVisibleChange = function onPopoverVisibleChange(next) {
+    setVisible(next);
+    onVisibleChange(next);
+  };
+  React.useEffect(function () {
+    if (customVisible === undefined) return;
+    onPopoverVisibleChange(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    type: type,
+    enterDelay: enterDelay,
+    leaveDelay: leaveDelay,
+    offset: offset,
+    text: textNode,
+    trigger: trigger,
+    placement: placement,
+    portalClassName: classes,
+    visible: visible,
+    onVisibleChange: onPopoverVisibleChange
+  }, props), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "622655983",
+    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
+  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}"))));
+};
+PopoverComponent.displayName = 'Popover';
+var Popover = withScale(PopoverComponent);
+
+var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var PopoverItemComponent = function PopoverItemComponent(_ref) {
+  var children = _ref.children,
+    _ref$line = _ref.line,
+    line = _ref$line === undefined ? false : _ref$line,
+    _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === undefined ? false : _ref$showTitle,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    onClick = _ref.onClick,
+    _ref$disableAutoClose = _ref.disableAutoClose,
+    disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _usePopoverContext = usePopoverContext(),
+    disableItemsAutoClose = _usePopoverContext.disableItemsAutoClose,
+    onItemClick = _usePopoverContext.onItemClick;
+  var hasHandler = Boolean(onClick);
+  var dontCloseByClick = disableAutoClose || disableItemsAutoClose || showTitle || line;
+  var classes = useClasses('item', {
+    line: line,
+    showTitle: showTitle
+  }, className);
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+    onItemClick(event);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "190621384",
+    dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), showTitle && /*#__PURE__*/React.createElement(PopoverItem, {
+    line: true,
+    showTitle: false
+  }));
+};
+PopoverItemComponent.displayName = 'PopoverItem';
+var PopoverItem = withScale(PopoverItemComponent);
+
+/* "use client" */
+Popover.Item = PopoverItem;
+Popover.Option = PopoverItem;
+
 function DataTable(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === undefined ? [] : _ref$cols,

package/esm/table/data-table.js

@@ -11,7 +11,7 @@ import Grid from '../grid';
 import Button from '../button';
 import Tooltip from '../tooltip';
 import Table from './table';
-import Popover from 'components/popover';
+import Popover from '../popover';
 function DataTable(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? [] : _ref$cols,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",