@helpdice/theme 1.0.0

package/esm/css-baseline/css-baseline.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react';
+export type FlushToReact = <T>(opts?: {
+    nonce?: string;
+}) => Array<ReactElement<T>>;
+type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
+    flush: FlushToReact;
+};
+declare const MemoCssBaseline: MemoCssBaselineComponent<React.PropsWithChildren<unknown>>;
+export default MemoCssBaseline;

package/esm/css-baseline/css-baseline.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+import React from 'react';
+import useTheme from '../use-theme';
+// import flush from 'styled-jsx'
+
+// export type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>
+
+// export type FlushToHTML = (opts?: { nonce?: string }) => string
+
+var CssBaseline = function CssBaseline(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3647548829",
+    dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground]
+  }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--helpdice-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{color:").concat(theme.palette.foreground, ";font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
+};
+var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
+// MemoCssBaseline.flush = flush.StyleRegistry
+// MemoCssBaseline.flushToHTML = flushToReact
+
+export default MemoCssBaseline;

package/esm/css-baseline/index.d.ts

@@ -0,0 +1 @@
+export { default } from './css-baseline';

package/esm/css-baseline/index.js

@@ -0,0 +1,2 @@
+/* "use client" */
+export { default } from './css-baseline';

package/esm/index.d.ts

@@ -0,0 +1,12 @@
+import useTheme from './use-theme';
+export { default as UiProvider } from './ui-provider';
+export type { UiProviderProps } from './ui-provider';
+export { default as Themes } from './themes';
+export type { HUIThemes, HUserTheme } from './themes';
+export { default as useAllThemes } from './use-all-themes';
+export type { AllThemesConfig } from './use-all-themes';
+export { default as CssBaseline } from './css-baseline';
+export { default as useTheme } from './use-theme';
+export { useRect } from './utils/layouts';
+export type { ReactiveDomReact } from './utils/layouts';
+export default useTheme;

package/esm/index.js

@@ -0,0 +1,11 @@
+// @ts-ignore
+/// <reference types="styled-jsx" />
+
+import useTheme from './use-theme';
+export { default as UiProvider } from './ui-provider';
+export { default as Themes } from './themes';
+export { default as useAllThemes } from './use-all-themes';
+export { default as CssBaseline } from './css-baseline';
+export { default as useTheme } from './use-theme';
+export { useRect } from './utils/layouts';
+export default useTheme;

package/esm/shared/backdrop.js

@@ -0,0 +1,66 @@
+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 = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import CssTransition from './css-transition';
+import useCurrentState from '../utils/use-current-state';
+import useClasses from '../use-classes';
+var Backdrop = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    width = _ref.width,
+    _ref$onContentClick = _ref.onContentClick,
+    onContentClick = _ref$onContentClick === void 0 ? function () {} : _ref$onContentClick,
+    _ref$backdropClassNam = _ref.backdropClassName,
+    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
+    _ref$positionClassNam = _ref.positionClassName,
+    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
+    _ref$layerClassName = _ref.layerClassName,
+    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useCurrentState = useCurrentState(false),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setIsContentMouseDown = _useCurrentState2[1],
+    IsContentMouseDownRef = _useCurrentState2[2];
+  var clickHandler = function clickHandler(event) {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+  var mouseUpHandler = function mouseUpHandler() {
+    if (!IsContentMouseDownRef.current) return;
+    var timer = setTimeout(function () {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "backdrop-wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler,
+    onMouseUp: mouseUpHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentClick,
+    onMouseDown: function onMouseDown() {
+      return setIsContentMouseDown(true);
+    },
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2021762493",
+    dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
+  }, ".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;}"))));
+});
+Backdrop.displayName = 'Backdrop';
+export default Backdrop;

package/esm/shared/css-transition.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    visible?: boolean;
+    enterTime?: number;
+    leaveTime?: number;
+    clearTime?: number;
+    className?: string;
+    name?: string;
+    children: ReactNode;
+}
+export type CssTransitionProps = Props;
+declare const CssTransition: React.FC<CssTransitionProps>;
+export default CssTransition;

package/esm/shared/css-transition.js

@@ -0,0 +1,65 @@
+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 = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+/* "use client" */
+
+import React, { useEffect, useState } from 'react';
+var CssTransition = function CssTransition(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$enterTime = _ref.enterTime,
+    enterTime = _ref$enterTime === void 0 ? 60 : _ref$enterTime,
+    _ref$leaveTime = _ref.leaveTime,
+    leaveTime = _ref$leaveTime === void 0 ? 60 : _ref$leaveTime,
+    _ref$clearTime = _ref.clearTime,
+    clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'transition' : _ref$name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    classes = _useState2[0],
+    setClasses = _useState2[1];
+  var _useState3 = useState(visible),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderable = _useState4[0],
+    setRenderable = _useState4[1];
+  useEffect(function () {
+    var statusClassName = visible ? 'enter' : 'leave';
+    var time = visible ? enterTime : leaveTime;
+    if (visible && !renderable) {
+      setRenderable(true);
+    }
+    setClasses("".concat(name, "-").concat(statusClassName));
+
+    // set class to active
+    var timer = setTimeout(function () {
+      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
+      clearTimeout(timer);
+    }, time);
+
+    // remove classess when animation over
+    var clearClassesTimer = setTimeout(function () {
+      if (!visible) {
+        setClasses('');
+        setRenderable(false);
+      }
+      clearTimeout(clearClassesTimer);
+    }, time + clearTime);
+    return function () {
+      clearTimeout(timer);
+      clearTimeout(clearClassesTimer);
+    };
+  }, [visible, renderable]);
+  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
+  var propsTransition = _extends({}, props, {
+    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
+  });
+  return /*#__PURE__*/React.cloneElement(children, propsTransition);
+};
+CssTransition.displayName = 'CssTransition';
+export default CssTransition;

package/esm/shared/dropdown.js

@@ -0,0 +1,99 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import useResize from '../utils/use-resize';
+import CssTransition from './css-transition';
+import useClickAnyWhere from '../utils/use-click-anywhere';
+import useDOMObserver from '../utils/use-dom-observer';
+import useWarning from '../utils/use-warning';
+import { getRefRect } from '../utils/layouts';
+import useClasses from '../use-classes';
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  width: 0
+};
+var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    parent = _ref.parent,
+    visible = _ref.visible,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
+  var el = usePortal('dropdown', getPopupContainer);
+  var _useState = useState(defaultRect),
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
+  if (!parent) return null;
+
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production') {
+    if (getPopupContainer && getPopupContainer()) {
+      var _el = getPopupContainer();
+      var style = window.getComputedStyle(_el);
+      if (style.position === 'static') {
+        useWarning('The element specified by "getPopupContainer" must have "position" set.');
+      }
+    }
+  }
+  var updateRect = function updateRect() {
+    var _getRefRect = getRefRect(parent, getPopupContainer),
+      top = _getRefRect.top,
+      left = _getRefRect.left,
+      right = _getRefRect.right,
+      nativeWidth = _getRefRect.width;
+    setRect({
+      top: top,
+      left: left,
+      right: right,
+      width: nativeWidth
+    });
+  };
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    var _getRefRect2 = getRefRect(parent, getPopupContainer),
+      top = _getRefRect2.top,
+      left = _getRefRect2.left;
+    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
+    if (!shouldUpdatePosition) return;
+    updateRect();
+  });
+  useDOMObserver(parent, function () {
+    updateRect();
+  });
+  useEffect(function () {
+    if (!parent || !parent.current) return;
+    parent.current.addEventListener('mouseenter', updateRect);
+    /* istanbul ignore next */
+    return function () {
+      if (!parent || !parent.current) return;
+      parent.current.removeEventListener('mouseenter', updateRect);
+    };
+  }, [parent]);
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+  };
+  var mouseDownHandler = function mouseDownHandler(event) {
+    event.preventDefault();
+  };
+  if (!el) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1644673105",
+    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
+  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
+});
+export default Dropdown;

package/esm/shared/ellipsis.js

@@ -0,0 +1,13 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var Ellipsis = function Ellipsis(_ref) {
+  var children = _ref.children,
+    height = _ref.height;
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["822089635", [height]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "822089635",
+    dynamic: [height]
+  }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
+};
+export default /*#__PURE__*/React.memo(Ellipsis);

package/esm/shared/expand.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+
+import React, { useEffect, useRef, useState } from 'react';
+import useRealShape from '../utils/use-real-shape';
+import useClasses from '../use-classes';
+var Expand = function Expand(_ref) {
+  var _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay,
+    children = _ref.children;
+  var _useState = useState(isExpanded ? 'auto' : '0'),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _useState3 = useState(isExpanded),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selfExpanded = _useState4[0],
+    setSelfExpanded = _useState4[1];
+  var _useState5 = useState(isExpanded),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var contentRef = useRef(null);
+  var entryTimer = useRef();
+  var leaveTimer = useRef();
+  var resetTimer = useRef();
+  var _useRealShape = useRealShape(contentRef),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    state = _useRealShape2[0],
+    updateShape = _useRealShape2[1];
+  var classes = useClasses('container', {
+    expanded: selfExpanded
+  });
+  useEffect(function () {
+    return setHeight("".concat(state.height, "px"));
+  }, [state.height]);
+  useEffect(function () {
+    // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight("".concat(state.height, "px"));
+    }
+
+    // show expand animation
+    entryTimer.current = window.setTimeout(function () {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30);
+
+    // Reset height after animation
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(function () {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(function () {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+    return function () {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1918690829",
+    dynamic: [visible ? 'visible' : 'hidden', delay, height]
+  }, ".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.displayName = 'Expand';
+export default Expand;

package/esm/shared/highlight.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+
+import React, { useMemo, useRef } from 'react';
+import { isUnplacedRect } from '../utils/layouts';
+import usePrevious from '../utils/use-previous';
+import useTheme from '../use-theme';
+import useClasses from '../use-classes';
+var Highlight = function Highlight(_ref) {
+  var rect = _ref.rect,
+    visible = _ref.visible,
+    _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+    hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
+    _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+    hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
+    _ref$activeOpacity = _ref.activeOpacity,
+    activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var ref = useRef(null);
+  var isFirstVisible = usePrevious(isUnplacedRect(rect));
+  var position = useMemo(function () {
+    var width = rect.width * hoverWidthRatio;
+    var height = rect.height * hoverHeightRatio;
+    return {
+      width: "".concat(width, "px"),
+      left: "".concat(rect.left + (rect.width - width) / 2, "px"),
+      height: "".concat(height, "px"),
+      top: "".concat(rect.elementTop + (rect.height - height) / 2, "px"),
+      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
+    };
+  }, [rect, hoverWidthRatio, hoverHeightRatio]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || useClasses('highlight', className) || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "603024321",
+    dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]
+  }, ".highlight.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_2, ";position:absolute;border-radius:5px;width:").concat(position.width, ";left:").concat(position.left, ";height:").concat(position.height, ";top:").concat(position.top, ";opacity:").concat(visible ? activeOpacity : 0, ";-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:").concat(position.transition, ";transition-property:").concat(position.transition, ";}")));
+};
+export default Highlight;

package/esm/styled-jsx-server.es.js

@@ -0,0 +1,5 @@
+import { server } from './styled-jsx.es'
+const { flushToHTML } = server
+
+export { server, flushToHTML }
+export default server