@bolio-ui/core 1.1.8 → 2.0.0-alpha.0

package/dist/use-toasts/use-toast.d.ts

@@ -1,13 +1,13 @@
 import React, { CSSProperties } from 'react';
-import type { NormalTypes } from "../utils/prop-types";
-import { ToastPlacement } from "./helpers";
+import type { NormalTypes } from '../utils/prop-types';
+import { ToastPlacement } from './helpers';
 export interface ToastAction {
     name: string;
     handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void;
     passive?: boolean;
 }
-export declare type ToastTypes = NormalTypes;
-export declare type ToastLayout = {
+export type ToastTypes = NormalTypes;
+export type ToastLayout = {
     padding?: CSSProperties['padding'];
     margin?: CSSProperties['margin'];
     width?: CSSProperties['width'];
@@ -22,19 +22,19 @@ export interface ToastInput {
     delay?: number;
     actions?: Array<ToastAction>;
 }
-export declare type ToastInstance = {
+export type ToastInstance = {
     visible: boolean;
     cancel: () => void;
     _timeout: null | number;
     _internalIdent: string;
 };
-export declare type Toast = Required<ToastInput> & ToastInstance;
-export declare type ToastHooksResult = {
+export type Toast = Required<ToastInput> & ToastInstance;
+export type ToastHooksResult = {
     toasts: Array<Toast>;
     setToast: (toast: ToastInput) => void;
     removeAll: () => void;
     findToastOneByID: (ident: string) => Toast | undefined;
     removeToastOneByID: (ident: string) => void;
 };
-declare const useToasts: (layout?: ToastLayout | undefined) => ToastHooksResult;
+declare const useToasts: (layout?: ToastLayout) => ToastHooksResult;
 export default useToasts;

package/dist/utils/collections.d.ts

@@ -9,7 +9,7 @@ export declare const setChildrenProps: (children: ReactNode | undefined, props:
 export declare const setChildrenIndex: (children: ReactNode | undefined, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
 export declare const getReactNode: (node?: React.ReactNode | (() => React.ReactNode)) => React.ReactNode;
 export declare const isChildElement: (parent: Element | null | undefined, child: Element | null | undefined) => boolean;
-export declare const isBolioUIElement: (el?: HTMLElement | undefined) => boolean;
+export declare const isBolioUIElement: (el?: HTMLElement) => boolean;
 export declare const isBrowser: () => boolean;
 export declare const isMac: () => boolean;
-export declare const isCSSNumberValue: (value?: string | number | undefined) => boolean;
+export declare const isCSSNumberValue: (value?: string | number) => boolean;

package/dist/utils/layouts.d.ts

@@ -11,10 +11,10 @@ export interface ReactiveDomReact {
     height: number;
     elementTop: number;
 }
-export declare const isUnplacedRect: (rect?: ReactiveDomReact | undefined) => boolean;
-export declare const getRefRect: (ref?: MutableRefObject<HTMLElement | null> | undefined, getContainer?: (() => HTMLElement | null) | undefined) => ReactiveDomReact;
-export declare const getEventRect: (event?: FocusEvent<HTMLElement> | MouseEvent<HTMLElement, globalThis.MouseEvent> | undefined, getContainer?: (() => HTMLElement | null) | undefined) => ReactiveDomReact;
-export declare const useRect: (initialState?: ReactiveDomReact | (() => ReactiveDomReact) | undefined) => {
+export declare const isUnplacedRect: (rect?: ReactiveDomReact) => boolean;
+export declare const getRefRect: (ref?: MutableRefObject<HTMLElement | null>, getContainer?: () => HTMLElement | null) => ReactiveDomReact;
+export declare const getEventRect: (event?: MouseEvent<HTMLElement> | FocusEvent<HTMLElement>, getContainer?: () => HTMLElement | null) => ReactiveDomReact;
+export declare const useRect: (initialState?: ReactiveDomReact | (() => ReactiveDomReact)) => {
     rect: ReactiveDomReact;
-    setRect: (eventOrRef: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | MutableRefObject<HTMLElement | null>, getContainer?: (() => HTMLElement | null) | undefined) => void;
+    setRect: (eventOrRef: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | MutableRefObject<HTMLElement | null>, getContainer?: () => HTMLElement | null) => void;
 };

package/dist/utils/prop-types.d.ts

@@ -8,12 +8,12 @@ declare const copyTypes: ["default", "silent", "prevent"];
 declare const triggerTypes: ["hover", "click"];
 declare const placement: ["top", "topStart", "topEnd", "left", "leftStart", "leftEnd", "bottom", "bottomStart", "bottomEnd", "right", "rightStart", "rightEnd"];
 declare const dividerAlign: ["start", "center", "end", "left", "right"];
-export declare type ButtonTypes = typeof buttonTypes[number];
-export declare type NormalTypes = typeof normalTypes[number];
-export declare type SnippetTypes = typeof snippetTypes[number];
-export declare type CardTypes = typeof cardTypes[number];
-export declare type CopyTypes = typeof copyTypes[number];
-export declare type TriggerTypes = typeof triggerTypes[number];
-export declare type Placement = typeof placement[number];
-export declare type DividerAlign = typeof dividerAlign[number];
+export type ButtonTypes = typeof buttonTypes[number];
+export type NormalTypes = typeof normalTypes[number];
+export type SnippetTypes = typeof snippetTypes[number];
+export type CardTypes = typeof cardTypes[number];
+export type CopyTypes = typeof copyTypes[number];
+export type TriggerTypes = typeof triggerTypes[number];
+export type Placement = typeof placement[number];
+export type DividerAlign = typeof dividerAlign[number];
 export {};

package/dist/utils/types.d.ts

@@ -1,3 +1,3 @@
-export declare type DeepPartial<T> = {
+export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P];
 };

package/dist/utils/use-body-scroll.d.ts

@@ -1,2 +1,2 @@
-import useBodyScroll from "../use-body-scroll";
+import useBodyScroll from '../use-body-scroll';
 export default useBodyScroll;

package/dist/utils/use-bolio-ui-context.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { ToastLayout, Toast } from "../use-toasts/use-toast";
+import type { ToastLayout, Toast } from '../use-toasts/use-toast';
 export declare const defaultToastLayout: Required<ToastLayout>;
-export declare type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any;
-export declare type UpdateToastsLayoutFunction = (fn: (layout: Required<ToastLayout>) => Required<ToastLayout>) => any;
-export declare type UpdateToastsIDFunction = (fn: () => string | null) => any;
+export type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any;
+export type UpdateToastsLayoutFunction = (fn: (layout: Required<ToastLayout>) => Required<ToastLayout>) => any;
+export type UpdateToastsIDFunction = (fn: () => string | null) => any;
 export interface BolioUIContextParams {
     toasts: Array<Toast>;
     updateToasts: UpdateToastsFunction;

package/dist/utils/use-click-away.d.ts

@@ -1,2 +1,2 @@
-import { default as useClickAway } from "../use-click-away";
+import { default as useClickAway } from '../use-click-away';
 export default useClickAway;

package/dist/utils/use-clipboard.d.ts

@@ -1,2 +1,2 @@
-import useClipboard from "../use-clipboard";
+import useClipboard from '../use-clipboard';
 export default useClipboard;

package/dist/utils/use-current-state.d.ts

@@ -1,2 +1,2 @@
-import useCurrentState from "../use-current-state";
+import useCurrentState from '../use-current-state';
 export default useCurrentState;

package/dist/utils/use-default-props.d.ts

@@ -0,0 +1,2 @@
+declare const useDefaultProps: <T extends Record<string | number, any>, D extends Partial<T>>(props: T, defaultProps: D) => T & Required<D>;
+export default useDefaultProps;

package/dist/utils/use-drag.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-export declare type DraggingEvent = {
+export type DraggingEvent = {
     startX: number;
     currentX: number;
 };
-export declare type DraggingHandler = (event: DraggingEvent) => void;
+export type DraggingHandler = (event: DraggingEvent) => void;
 declare const useDrag: (elementRef: RefObject<HTMLElement> | null, draggingHandler?: DraggingHandler, dragStartHandler?: DraggingHandler, dragEndHandler?: DraggingHandler) => void;
 export default useDrag;

package/dist/utils/use-portal.d.ts

@@ -1,2 +1,2 @@
-declare const usePortal: (selectId?: string, getContainer?: (() => HTMLElement | null) | undefined) => HTMLElement | null;
+declare const usePortal: (selectId?: string, getContainer?: () => HTMLElement | null) => HTMLElement | null;
 export default usePortal;

package/dist/utils/use-real-shape.d.ts

@@ -1,9 +1,9 @@
 import { MutableRefObject } from 'react';
-export declare type ShapeType = {
+export type ShapeType = {
     width: number;
     height: number;
 };
 export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
-export declare type ShapeResult = [ShapeType, () => void];
+export type ShapeResult = [ShapeType, () => void];
 declare const useRealShape: <T extends HTMLElement>(ref: MutableRefObject<T | null>) => ShapeResult;
 export default useRealShape;

package/dist/utils/use-ssr.d.ts

@@ -1,4 +1,4 @@
-export declare type SSRState = {
+export type SSRState = {
     isBrowser: boolean;
     isServer: boolean;
 };

package/dist/utils/use-warning.d.ts

@@ -1,2 +1,2 @@
-declare const useWarning: (message: string, component?: string | undefined) => void;
+declare const useWarning: (message: string, component?: string) => void;
 export default useWarning;

package/esm/Avatar/Avatar.d.ts

@@ -6,7 +6,9 @@ interface Props {
     isSquare?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>, keyof Props>;
-export declare type AvatarProps = Props & NativeAttrs;
-declare const Avatar: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>, keyof Props>;
+export type AvatarProps = Props & NativeAttrs;
+declare const Avatar: import("../use-scale/with-scale").ScaleComponent<HTMLSpanElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/esm/Avatar/Avatar.js

@@ -2,36 +2,31 @@ 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 = ["src", "stacked", "text", "isSquare", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useRef, useState } from 'react';
 import AvatarSkeleton from './AvatarSkeleton';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var safeText = function safeText(text) {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
 };
-
-function AvatarComponent(_ref) {
+var AvatarComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
-      _ref$stacked = _ref.stacked,
-      stacked = _ref$stacked === void 0 ? false : _ref$stacked,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      _ref$isSquare = _ref.isSquare,
-      isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$isSquare = _ref.isSquare,
+    isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES,
-      getScaleProps = _useScale.getScaleProps;
-
+    SCALES = _useScale.SCALES,
+    getScaleProps = _useScale.getScaleProps;
   var showText = !src;
   var radius = isSquare ? theme.layout.radius : '50%';
   var marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
@@ -39,28 +34,22 @@ function AvatarComponent(_ref) {
   var width = getScaleProps(['width', 'w']);
   var height = getScaleProps(['height', 'h']);
   var showAnimation = width && height;
-
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      loading = _useState2[0],
-      setLoading = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
   var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showSkeleton = _useState4[0],
-      setShowSkeleton = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSkeleton = _useState4[0],
+    setShowSkeleton = _useState4[1];
   var imageRef = useRef(null);
-
   var imageLoaded = function imageLoaded() {
     if (!showAnimation) return;
     setLoading(false);
   };
-
   useEffect(function () {
     if (!showAnimation) return;
     if (!imageRef.current) return;
-
     if (imageRef.current.complete) {
       setLoading(false);
       setShowSkeleton(false);
@@ -71,7 +60,6 @@ function AvatarComponent(_ref) {
       if (showAnimation) {
         setShowSkeleton(false);
       }
-
       clearTimeout(timer);
     }, 3000);
     return function () {
@@ -79,7 +67,8 @@ function AvatarComponent(_ref) {
     };
   }, [loading, showAnimation]);
   return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
+    ref: ref,
+    className: _JSXStyle.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
   }, !showText && /*#__PURE__*/React.createElement(React.Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(AvatarSkeleton, {
     opacity: loading ? 1 : 0
   }), /*#__PURE__*/React.createElement("img", _extends({
@@ -89,15 +78,14 @@ function AvatarComponent(_ref) {
     onLoad: imageLoaded,
     draggable: false
   }, props, {
-    className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+    className: _JSXStyle.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
   }))), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
+    className: _JSXStyle.dynamic([["2602621947", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
   }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2828293809",
+    id: "2602621947",
     dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
   }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";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(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";font-weight:bold;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:none;}")));
-}
-
+});
 AvatarComponent.displayName = 'BolioUIAvatar';
 var Avatar = withScale(AvatarComponent);
 export default Avatar;

package/esm/Avatar/AvatarGroup.d.ts

@@ -3,7 +3,7 @@ interface Props {
     count?: number;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type AvatarGroupProps = Props & NativeAttrs;
-declare const AvatarGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type AvatarGroupProps = Props & NativeAttrs;
+declare const AvatarGroup: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs>;
 export default AvatarGroup;

package/esm/Avatar/AvatarGroup.js

@@ -1,19 +1,16 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function AvatarGroupComponent(_ref) {
   var count = _ref.count,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children;
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children;
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["441769479", [SCALES.width(1, 'max-content'), 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), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + (useClasses('avatar-group', className) || "")
   }, children, count && /*#__PURE__*/React.createElement("span", {
@@ -23,7 +20,6 @@ function AvatarGroupComponent(_ref) {
     dynamic: [SCALES.width(1, 'max-content'), 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), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]
   }, ".avatar-group.__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;width:".concat(SCALES.width(1, 'max-content'), ";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), ";}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-").concat(SCALES.ml(0.625), ";}.count.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(0.875), ";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;padding-left:5.5px;color:").concat(theme.palette.accents_7, ";}")));
 }
-
 AvatarGroupComponent.displayName = 'BolioUIAvatarGroup';
 var AvatarGroup = withScale(AvatarGroupComponent);
 export default AvatarGroup;

package/esm/Avatar/AvatarSkeleton.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 interface Props {
     opacity?: number;
 }
-export declare type AvatarSkeletonProps = Props;
+export type AvatarSkeletonProps = Props;
 declare const AvatarSkeleton: React.FC<AvatarSkeletonProps>;
 export default AvatarSkeleton;

package/esm/Avatar/AvatarSkeleton.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["opacity"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 var AvatarSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
-      opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")

package/esm/Avatar/helpers.js

@@ -1,10 +1,8 @@
 export var transformDataSource = function transformDataSource(src) {
   var left = "".concat(src).slice(0, 4);
-
   if (encodeURIComponent(left) === '%3Csvg') {
     return "data:image/svg+xml;utf8,".concat(src);
   }
-
   return src;
 };
 export var getHostFromUrl = function getHostFromUrl(url) {

package/esm/Avatar/index.d.ts

@@ -1,9 +1,9 @@
-import Avatar from "./Avatar";
-import AvatarGroup from "./AvatarGroup";
-export declare type AvatarComponentType = typeof Avatar & {
+import Avatar from './Avatar';
+import AvatarGroup from './AvatarGroup';
+export type AvatarComponentType = typeof Avatar & {
     Group: typeof AvatarGroup;
 };
-export type { AvatarProps } from "./Avatar";
-export type { AvatarGroupProps } from "./AvatarGroup";
+export type { AvatarProps } from './Avatar';
+export type { AvatarGroupProps } from './AvatarGroup';
 declare const _default: AvatarComponentType;
 export default _default;

package/esm/Avatar/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Avatar from './Avatar';
 import AvatarGroup from './AvatarGroup';
 Avatar.Group = AvatarGroup;

package/esm/Badge/Badge.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type BadgeTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type BadgeTypes = NormalTypes;
 interface Props {
     type?: BadgeTypes;
     dot?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type BadgeProps = Props & NativeAttrs;
-declare const Badge: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BadgeProps = Props & NativeAttrs;
+declare const Badge: import("../use-scale/with-scale").ScaleComponent<HTMLSpanElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/esm/Badge/Badge.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["type", "className", "children", "dot"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
     "default": palette.accents_2,
@@ -19,22 +18,18 @@ var getBgColor = function getBgColor(type, palette) {
   };
   return colors[type];
 };
-
-function BadgeComponent(_ref) {
+var BadgeComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      _ref$dot = _ref.dot,
-      dot = _ref$dot === void 0 ? false : _ref$dot,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var bg = useMemo(function () {
     return getBgColor(type, theme.palette);
   }, [type, theme.palette]);
@@ -45,14 +40,15 @@ function BadgeComponent(_ref) {
   var classes = useClasses('badge', {
     dot: dot
   }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2850533964", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["795724549", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2850533964",
+    id: "795724549",
     dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
   }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:bold;text-transform:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
-}
-
+});
 BadgeComponent.displayName = 'BolioUIBadge';
 var Badge = withScale(BadgeComponent);
 export default Badge;

package/esm/Badge/BadgeAnchor.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 declare const placement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
-export declare type BadgeAnchorPlacement = typeof placement[number];
+export type BadgeAnchorPlacement = typeof placement[number];
 interface Props {
     placement?: BadgeAnchorPlacement;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type BadgeAnchorProps = Props & NativeAttrs;
-declare function BadgeAnchor({ children, placement }: BadgeAnchorProps): JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BadgeAnchorProps = Props & NativeAttrs;
+declare function BadgeAnchor({ children, placement }: BadgeAnchorProps): React.JSX.Element;
 declare namespace BadgeAnchor {
     var displayName: string;
 }

package/esm/Badge/BadgeAnchor.js

@@ -1,11 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import { pickChild } from '../utils/collections';
 import { tuple } from '../utils/prop-types';
 import Badge from './Badge';
 var placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
-
 var getTransform = function getTransform(placement) {
   var styles = {
     topLeft: {
@@ -35,27 +34,23 @@ var getTransform = function getTransform(placement) {
   };
   return styles[placement];
 };
-
 function BadgeAnchor(_ref) {
   var children = _ref.children,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
-
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
   var _pickChild = pickChild(children, Badge),
-      _pickChild2 = _slicedToArray(_pickChild, 2),
-      withoutBadgeChildren = _pickChild2[0],
-      badgeChldren = _pickChild2[1];
-
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutBadgeChildren = _pickChild2[0],
+    badgeChldren = _pickChild2[1];
   var _useMemo = useMemo(function () {
-    return getTransform(placement);
-  }, [placement]),
-      top = _useMemo.top,
-      bottom = _useMemo.bottom,
-      left = _useMemo.left,
-      right = _useMemo.right,
-      value = _useMemo.value,
-      origin = _useMemo.origin;
-
+      return getTransform(placement);
+    }, [placement]),
+    top = _useMemo.top,
+    bottom = _useMemo.bottom,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    value = _useMemo.value,
+    origin = _useMemo.origin;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]) + " " + "anchor"
   }, withoutBadgeChildren, /*#__PURE__*/React.createElement("sup", {
@@ -65,6 +60,5 @@ function BadgeAnchor(_ref) {
     dynamic: [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]
   }, ".anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:".concat(top || 'auto', ";left:").concat(left || 'auto', ";right:").concat(right || 'auto', ";bottom:").concat(bottom || 'auto', ";-webkit-transform:").concat(value, ";-ms-transform:").concat(value, ";transform:").concat(value, ";-webkit-transform-origin:").concat(origin, ";-ms-transform-origin:").concat(origin, ";transform-origin:").concat(origin, ";z-index:1;}")));
 }
-
 BadgeAnchor.displayName = 'BolioUIBadgeAnchor';
 export default BadgeAnchor;

package/esm/Badge/index.d.ts

@@ -1,9 +1,9 @@
-import Badge from "./Badge";
-import BadgeAnchor from "./BadgeAnchor";
-export declare type BadgeComponentType = typeof Badge & {
+import Badge from './Badge';
+import BadgeAnchor from './BadgeAnchor';
+export type BadgeComponentType = typeof Badge & {
     Anchor: typeof BadgeAnchor;
 };
-export type { BadgeProps, BadgeTypes } from "./Badge";
-export type { BadgeAnchorProps, BadgeAnchorPlacement } from "./BadgeAnchor";
+export type { BadgeProps, BadgeTypes } from './Badge';
+export type { BadgeAnchorProps, BadgeAnchorPlacement } from './BadgeAnchor';
 declare const _default: BadgeComponentType;
 export default _default;

package/esm/Badge/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Badge from './Badge';
 import BadgeAnchor from './BadgeAnchor';
 Badge.Anchor = BadgeAnchor;