@bolio-ui/core 1.1.6 → 1.1.8

package/README.md

@@ -30,10 +30,6 @@
 
 Visit <a aria-label="bolio-ui learn" href="https://bolio-ui.com/docs/guide">https://bolio-ui.com/docs/guide</a> to get started with Bolio UI.
 
-## Documentation
-
-Visit [https://bolio-ui.com/docs](https://bolio-ui.com/docs) to view the full documentation.
-
 ## Quick Start
 
 1. Installation: Inside your React project directory, install Bolio UI by running either of the following:

package/dist/Popover/Popover.d.ts

@@ -1,19 +1,18 @@
 import React from 'react';
-import { TooltipProps } from "../Tooltip";
 import { Placement, TriggerTypes } from "../utils/prop-types";
 export declare type PopoverTriggerTypes = TriggerTypes;
 export declare type PopoverPlacement = Placement;
+export declare type TooltipOnVisibleChange = (visible: boolean) => void;
 interface Props {
-    content?: React.ReactNode | (() => React.ReactNode) | string;
+    content?: React.ReactNode | (() => React.ReactNode);
     trigger?: PopoverTriggerTypes;
     placement?: Placement;
     disableItemsAutoClose?: boolean;
+    visible?: boolean;
+    onVisibleChange?: TooltipOnVisibleChange;
 }
-declare type ExcludeTooltipProps = {
-    text: any;
-    trigger: any;
-    placement: any;
-};
-export declare type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps>;
-declare const Popover: React.ForwardRefExoticComponent<Props & Omit<TooltipProps, keyof ExcludeTooltipProps> & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export declare type PopoverProps = Props;
+declare const Popover: React.ForwardRefExoticComponent<Props & {
+    children?: React.ReactNode;
+} & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
 export default Popover;

package/dist/Popover/index.js

@@ -590,7 +590,7 @@ var useResize = function useResize(callback) {
 var useResize$1 = useResize;
 
 var _excluded$4 = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-var defaultProps = {
+var defaultProps$1 = {
   visible: false,
   enterTime: 60,
   leaveTime: 60,
@@ -653,7 +653,7 @@ function CssTransition(_ref) {
   }));
 }
 
-CssTransition.defaultProps = defaultProps;
+CssTransition.defaultProps = defaultProps$1;
 CssTransition.displayName = 'BolioUICssTransition';
 
 var useClickAnyWhere = function useClickAnyWhere(handler) {
@@ -1364,30 +1364,46 @@ var usePopoverContext = function usePopoverContext() {
   return React.useContext(PopoverContext);
 };
 
-var _excluded$1 = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
-
-function PopoverComponent(_ref) {
+var _excluded$1 = ["content", "children", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible", "type"];
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: 'click',
+  placement: 'bottom',
+  portalClassName: '',
+  initialVisible: false,
+  hideArrow: false,
+  type: 'default',
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: '',
+  onVisibleChange: function () {},
+  visible: false
+}; // type ExcludeTooltipProps = {
+//   type: any
+//   text: any
+//   trigger: any
+//   placement: any
+// }
+
+var PopoverComponent = function PopoverComponent(_ref) {
   var content = _ref.content,
       children = _ref.children,
-      _ref$disableItemsAuto = _ref.disableItemsAutoClose,
-      disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
-      _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      _ref$portalClassName = _ref.portalClassName,
-      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      trigger = _ref.trigger,
+      placement = _ref.placement,
+      initialVisible = _ref.initialVisible,
+      portalClassName = _ref.portalClassName,
+      disableItemsAutoClose = _ref.disableItemsAutoClose,
+      onVisibleChange = _ref.onVisibleChange,
+      customVisible = _ref.visible,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
-      customVisible = _ref.visible,
-      _ref$onVisibleChange = _ref.onVisibleChange,
-      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(initialVisible),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
       setVisible = _useState2[1];
@@ -1432,8 +1448,9 @@ function PopoverComponent(_ref) {
     id: "421785314",
     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.defaultProps = defaultProps;
 PopoverComponent.displayName = 'BolioUIPopover';
 var Popover = withScale$1(PopoverComponent);
 var Popover$1 = Popover;

package/dist/index.js

@@ -1304,7 +1304,7 @@ var usePortal = function usePortal() {
 var usePortal$1 = usePortal;
 
 var _excluded$1g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-var defaultProps$f = {
+var defaultProps$g = {
   visible: false,
   enterTime: 60,
   leaveTime: 60,
@@ -1367,10 +1367,10 @@ function CssTransition(_ref) {
   }));
 }
 
-CssTransition.defaultProps = defaultProps$f;
+CssTransition.defaultProps = defaultProps$g;
 CssTransition.displayName = 'BolioUICssTransition';
 
-var defaultProps$e = {
+var defaultProps$f = {
   x: 0,
   y: 0
 };
@@ -1422,7 +1422,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
 
-ButtonDrip.defaultProps = defaultProps$e;
+ButtonDrip.defaultProps = defaultProps$f;
 ButtonDrip.displayName = 'BolioUItButtonDrip';
 var ButtonDrip$1 = ButtonDrip;
 
@@ -1845,7 +1845,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
 };
 
 var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-var defaultProps$d = {
+var defaultProps$e = {
   type: 'default',
   htmlType: 'button',
   ghost: false,
@@ -1973,7 +1973,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), 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]
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:bold;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 ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-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{cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.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;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
 });
-ButtonComponent.defaultProps = defaultProps$d;
+ButtonComponent.defaultProps = defaultProps$e;
 ButtonComponent.displayName = 'BolioUIButton';
 var Button = withScale$1(ButtonComponent);
 var Button$1 = Button;
@@ -2716,7 +2716,7 @@ var ButtonDropdown$1 = ButtonDropdown;
 ButtonDropdown$1.Item = ButtonDropdownItem;
 
 var _excluded$18 = ["disabled", "type", "ghost", "vertical", "children", "className"];
-var defaultProps$c = {
+var defaultProps$d = {
   disabled: false,
   vertical: false,
   ghost: false,
@@ -2780,7 +2780,7 @@ function ButtonGroupComponent(groupProps) {
   }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
 }
 
-ButtonGroupComponent.defaultProps = defaultProps$c;
+ButtonGroupComponent.defaultProps = defaultProps$d;
 ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
 var ButtonGroup = withScale$1(ButtonGroupComponent);
 var ButtonGroup$1 = ButtonGroup;
@@ -3196,7 +3196,7 @@ var ImageBrowser$1 = ImageBrowser;
 Image$1.Browser = ImageBrowser$1;
 
 var _excluded$11 = ["children", "hoverable", "rounded", "bordered", "className", "shadow", "type"];
-var defaultProps$b = {
+var defaultProps$c = {
   type: 'default',
   hoverable: false,
   bordered: false,
@@ -3251,7 +3251,7 @@ function CardComponent(_ref) {
   }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:").concat(bordered ? '1px solid' + borderColor : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";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), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
-CardComponent.defaultProps = defaultProps$b;
+CardComponent.defaultProps = defaultProps$c;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale$1(CardComponent);
 var Card$1 = Card;
@@ -3709,7 +3709,7 @@ var useRealShape = function useRealShape(ref) {
 
 var useRealShape$1 = useRealShape;
 
-var defaultProps$a = {
+var defaultProps$b = {
   isExpanded: false,
   delay: 200
 };
@@ -3796,7 +3796,7 @@ function Expand(_ref) {
   }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
 }
 
-Expand.defaultProps = defaultProps$a;
+Expand.defaultProps = defaultProps$b;
 Expand.displayName = 'BolioUIExpand';
 
 var defaultContext$8 = {
@@ -3955,7 +3955,7 @@ var CollapseGroup$1 = CollapseGroup;
 Collapse$1.Group = CollapseGroup$1;
 
 var _excluded$W = ["children", "component", "justify", "align", "fluid", "className"];
-var defaultProps$9 = {
+var defaultProps$a = {
   gap: 0,
   justify: 'start',
   align: 'top',
@@ -4008,7 +4008,7 @@ function Container(_ref) {
   }, ".container.__jsx-style-dynamic-selector{".concat(fluidWidth, ";padding-left:15px;padding-right:15px;margin-right:auto;margin-left:auto;-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
 }
 
-Container.defaultProps = defaultProps$9;
+Container.defaultProps = defaultProps$a;
 Container.displayName = 'BolioUIContainer';
 
 var _excluded$V = ["title", "content", "className"];
@@ -4455,7 +4455,7 @@ var useKeyboard = function useKeyboard(handler, keyBindings) {
 var useKeyboard$1 = useKeyboard;
 
 var _excluded$R = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
-var defaultProps$8 = {
+var defaultProps$9 = {
   onClick: function onClick() {},
   visible: false,
   // onContentClick: () => {},
@@ -4518,7 +4518,7 @@ function BackdropComponent(_ref) {
   }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
 }
 
-BackdropComponent.defaultProps = defaultProps$8;
+BackdropComponent.defaultProps = defaultProps$9;
 BackdropComponent.displayName = 'BolioUIBackdrop';
 var Backdrop = /*#__PURE__*/React__default["default"].memo(BackdropComponent);
 var Backdrop$1 = Backdrop;
@@ -5030,7 +5030,7 @@ Fieldset$1.Content = FieldsetContent$1;
 Fieldset$1.Body = FieldsetContent$1;
 
 var _excluded$F = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
-var defaultProps$7 = {
+var defaultProps$8 = {
   xs: false,
   sm: false,
   md: false,
@@ -5115,7 +5115,7 @@ function GridBasicItem(_ref) {
   }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
 }
 
-GridBasicItem.defaultProps = defaultProps$7;
+GridBasicItem.defaultProps = defaultProps$8;
 GridBasicItem.displayName = 'BolioUIGridBasicItem';
 
 var _excluded$E = ["children", "className"];
@@ -5352,7 +5352,7 @@ var getColors$6 = function getColors(palette, status, disabled, readOnly) {
   return colors[status];
 };
 
-var defaultProps$6 = {
+var defaultProps$7 = {
   disabled: false,
   readOnly: false,
   clearable: false,
@@ -5531,7 +5531,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), 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, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.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, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";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(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : colors.borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : colors.bgColor, ";}.input-wrapper.active.__jsx-style-dynamic-selector,.input-wrapper.__jsx-style-dynamic-selector:hover{border:1px solid ").concat(hoverBorder ? hoverBorder : colors.hoverBorder, ";background:").concat(backgroundColor ? backgroundColor : colors.hoverBgColor, ";}.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{cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(colors.color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(colors.color, " !important;}")));
 });
-InputComponent.defaultProps = defaultProps$6;
+InputComponent.defaultProps = defaultProps$7;
 InputComponent.displayName = 'BolioUIInput';
 var Input = withScale$1(InputComponent);
 var Input$1 = Input;
@@ -5670,7 +5670,7 @@ var PasswordIcon$1 = MemoPasswordIcon;
 
 var _excluded$A = ["hideToggle", "children"];
 
-var passwordDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps$6), {}, {
+var passwordDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps$7), {}, {
   hideToggle: false
 });
 
@@ -7069,30 +7069,46 @@ var usePopoverContext = function usePopoverContext() {
   return React.useContext(PopoverContext);
 };
 
-var _excluded$l = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
-
-function PopoverComponent(_ref) {
+var _excluded$l = ["content", "children", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible", "type"];
+var defaultProps$6 = {
+  disableItemsAutoClose: false,
+  trigger: 'click',
+  placement: 'bottom',
+  portalClassName: '',
+  initialVisible: false,
+  hideArrow: false,
+  type: 'default',
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: '',
+  onVisibleChange: function () {},
+  visible: false
+}; // type ExcludeTooltipProps = {
+//   type: any
+//   text: any
+//   trigger: any
+//   placement: any
+// }
+
+var PopoverComponent = function PopoverComponent(_ref) {
   var content = _ref.content,
       children = _ref.children,
-      _ref$disableItemsAuto = _ref.disableItemsAutoClose,
-      disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
-      _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      _ref$portalClassName = _ref.portalClassName,
-      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      trigger = _ref.trigger,
+      placement = _ref.placement,
+      initialVisible = _ref.initialVisible,
+      portalClassName = _ref.portalClassName,
+      disableItemsAutoClose = _ref.disableItemsAutoClose,
+      onVisibleChange = _ref.onVisibleChange,
+      customVisible = _ref.visible,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
-      customVisible = _ref.visible,
-      _ref$onVisibleChange = _ref.onVisibleChange,
-      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
       props = _objectWithoutProperties(_ref, _excluded$l);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(initialVisible),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
       setVisible = _useState2[1];
@@ -7137,8 +7153,9 @@ function PopoverComponent(_ref) {
     id: "421785314",
     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.defaultProps = defaultProps$6;
 PopoverComponent.displayName = 'BolioUIPopover';
 var Popover = withScale$1(PopoverComponent);
 var Popover$1 = Popover;

package/esm/Popover/Popover.d.ts

@@ -1,19 +1,18 @@
 import React from 'react';
-import { TooltipProps } from "../Tooltip";
 import { Placement, TriggerTypes } from "../utils/prop-types";
 export declare type PopoverTriggerTypes = TriggerTypes;
 export declare type PopoverPlacement = Placement;
+export declare type TooltipOnVisibleChange = (visible: boolean) => void;
 interface Props {
-    content?: React.ReactNode | (() => React.ReactNode) | string;
+    content?: React.ReactNode | (() => React.ReactNode);
     trigger?: PopoverTriggerTypes;
     placement?: Placement;
     disableItemsAutoClose?: boolean;
+    visible?: boolean;
+    onVisibleChange?: TooltipOnVisibleChange;
 }
-declare type ExcludeTooltipProps = {
-    text: any;
-    trigger: any;
-    placement: any;
-};
-export declare type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps>;
-declare const Popover: React.ForwardRefExoticComponent<Props & Omit<TooltipProps, keyof ExcludeTooltipProps> & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export declare type PopoverProps = Props;
+declare const Popover: React.ForwardRefExoticComponent<Props & {
+    children?: React.ReactNode;
+} & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
 export default Popover;

package/esm/Popover/Popover.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
+var _excluded = ["content", "children", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible", "type"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useEffect, useMemo, useState } from 'react';
 import Tooltip from '../Tooltip';
@@ -9,29 +9,45 @@ import { getReactNode } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 import { PopoverContext } from './PopoverContext';
 import useClasses from '../use-classes';
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: 'click',
+  placement: 'bottom',
+  portalClassName: '',
+  initialVisible: false,
+  hideArrow: false,
+  type: 'default',
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: '',
+  onVisibleChange: function () {},
+  visible: false
+}; // type ExcludeTooltipProps = {
+//   type: any
+//   text: any
+//   trigger: any
+//   placement: any
+// }
 
-function PopoverComponent(_ref) {
+var PopoverComponent = function PopoverComponent(_ref) {
   var content = _ref.content,
       children = _ref.children,
-      _ref$disableItemsAuto = _ref.disableItemsAutoClose,
-      disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
-      _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      _ref$portalClassName = _ref.portalClassName,
-      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      trigger = _ref.trigger,
+      placement = _ref.placement,
+      initialVisible = _ref.initialVisible,
+      portalClassName = _ref.portalClassName,
+      disableItemsAutoClose = _ref.disableItemsAutoClose,
+      onVisibleChange = _ref.onVisibleChange,
+      customVisible = _ref.visible,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
-      customVisible = _ref.visible,
-      _ref$onVisibleChange = _ref.onVisibleChange,
-      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
 
-  var _useState = useState(false),
+  var _useState = useState(initialVisible),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
       setVisible = _useState2[1];
@@ -76,8 +92,9 @@ function PopoverComponent(_ref) {
     id: "421785314",
     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.defaultProps = defaultProps;
 PopoverComponent.displayName = 'BolioUIPopover';
 var Popover = withScale(PopoverComponent);
 export default Popover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolio-ui/core",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
   "keywords": [
     "bolio",
@@ -48,7 +48,7 @@
     "build:storybook": "build-storybook -s ./public",
     "build:clear": "rm -rf ./dist ./esm",
     "build:rollup": "rollup -c scripts/rollup.config.js",
-    "build:babel": "babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./core --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"",
+    "build:babel": "babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./core --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts,**/stories.tsx\"",
     "build:after": "node scripts/move-built-in.js",
     "build:webpack": "webpack --config scripts/webpack.config.js",
     "build:types": "ttsc -p ./scripts & ttsc -p ./scripts --outDir ./esm",
@@ -65,28 +65,7 @@
     ]
   },
   "dependencies": {
-    "@mapbox/rehype-prism": "^0.6.0",
-    "@mdx-js/loader": "^1.6.22",
-    "@next/mdx": "^11.0.1",
-    "algoliasearch": "^4.14.2",
-    "classnames": "^2.3.1",
-    "gray-matter": "^4.0.3",
-    "jest-styled-components": "^7.0.5",
-    "kbar": "0.1.0-beta.6",
-    "next": "12.3.1",
-    "next-seo": "^5.5.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^18.2.0",
-    "react-autosuggest": "^10.1.0",
-    "react-device-detect": "^1.17.0",
-    "react-dom": "^18.2.0",
-    "react-instantsearch-dom": "^6.12.0",
-    "react-live": "^2.2.3",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-join-line": "^1.0.2",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-slug": "^6.0.0",
-    "styled-components": "^5.3.0"
+    "@babel/runtime": "^7.14.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",
@@ -96,6 +75,9 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@bolio-ui/icons": "^1.0.4",
+    "@mapbox/rehype-prism": "^0.6.0",
+    "@mdx-js/loader": "^1.6.22",
+    "@next/mdx": "^11.0.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@storybook/addon-essentials": "^6.5.12",
@@ -110,9 +92,11 @@
     "@types/styled-components": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
+    "algoliasearch": "^4.14.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
     "babel-plugin-transform-rename-import": "^2.3.0",
+    "classnames": "^2.3.1",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "^8.3.0",
@@ -120,14 +104,32 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.6.4",
+    "gray-matter": "^4.0.3",
     "husky": "^7.0.0",
     "jest": "^27.0.6",
+    "jest-styled-components": "^7.0.5",
+    "kbar": "0.1.0-beta.6",
     "lint-staged": "^11.1.1",
+    "next": "12.3.1",
+    "next-pwa": "^5.6.0",
+    "next-seo": "^5.5.0",
     "plop": "^2.7.4",
     "prettier": "2.3.2",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^18.2.0",
+    "react-autosuggest": "^10.1.0",
+    "react-device-detect": "^1.17.0",
+    "react-dom": "^18.2.0",
+    "react-instantsearch-dom": "^6.12.0",
+    "react-live": "^2.2.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-join-line": "^1.0.2",
+    "remark-autolink-headings": "^6.0.1",
+    "remark-slug": "^6.0.0",
     "rollup": "^2.64.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-local-resolve": "^1.0.7",
+    "styled-components": "^5.3.0",
     "styled-jsx": "4.0.1",
     "ttypescript": "^1.5.13",
     "typescript": "^4.3.5",