@helpdice/ui 2.6.0-beta.6 → 2.6.0-beta.7

package/dist/container/index.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var theme = require('@helpdice/theme');
 var jsxRuntime = require('react/jsx-runtime');
+var Expandable = require('components/expandable');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
   return n;
 }
-function _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
 function _createForOfIteratorHelper(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (!t) {
@@ -70,36 +68,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = true,
-      o = false;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = true, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -141,9 +109,6 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
-function _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -715,7 +680,7 @@ var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingL
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext$1 = {
+var defaultContext = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -741,7 +706,7 @@ var defaultContext$1 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -798,7 +763,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$5 = ["children"];
+var _excluded$2 = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -808,7 +773,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$2);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -893,7 +858,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$4 = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$1 = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {
@@ -931,7 +896,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -988,651 +953,6 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var ButtonDrip = function ButtonDrip(_ref) {
-  var _ref$x = _ref.x,
-    x = _ref$x === void 0 ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === void 0 ? 0 : _ref$y,
-    color = _ref.color,
-    onCompleted = _ref.onCompleted;
-  var dripRef = React.useRef(null);
-  /* istanbul ignore next */
-  var top = Number.isNaN(+y) ? 0 : y - 10;
-  /* istanbul ignore next */
-  var left = Number.isNaN(+x) ? 0 : x - 10;
-  React.useEffect(function () {
-    /* istanbul ignore next */
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return function () {
-      /* istanbul ignore next */
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip",
-    children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      style: {
-        top: top,
-        left: left
-      },
-      className: "jsx-3424889537",
-      children: /*#__PURE__*/jsxRuntime.jsx("g", {
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd",
-        className: "jsx-3424889537",
-        children: /*#__PURE__*/jsxRuntime.jsx("g", {
-          fill: color,
-          className: "jsx-3424889537",
-          children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-            width: "100%",
-            height: "100%",
-            rx: "10",
-            className: "jsx-3424889537"
-          })
-        })
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "3424889537",
-      children: ".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.displayName = 'ButtonDrip';
-
-var _excluded$3 = ["children", "type", "color", "className", "spaceRatio"];
-var getIconBgColor = function getIconBgColor(type, palette, color) {
-  var colors = {
-    "default": palette.accents_6,
-    secondary: palette.secondary,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error
-  };
-  return color ? color : colors[type];
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    color = _ref.color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$spaceRatio = _ref.spaceRatio,
-    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = theme.useClasses('loading-container', className);
-  var bgColor = React.useMemo(function () {
-    return getIconBgColor(type, theme$1.palette, color);
-  }, [type, theme$1.palette, color]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
-      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "2201634259",
-      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
-      children: ".loading-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;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
-    })]
-  }));
-};
-LoadingComponent.displayName = 'Loading';
-var Loading = withScale(LoadingComponent);
-
-var ButtonLoading = function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "jsx-212623367" + " " + "btn-loading",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Loading, {
-      color: color
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "212623367",
-      children: ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"
-    })]
-  });
-};
-ButtonLoading.displayName = 'ButtonLoading';
-
-var _excluded$2 = ["isRight", "isSingle", "children", "className"];
-var ButtonIcon = function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  var classes = theme.useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || ""),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "2467502931",
-      children: ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"
-    })]
-  }));
-};
-ButtonIcon.displayName = 'ButtonIcon';
-
-var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
-  var icon = icons.icon,
-    iconRight = icons.iconRight;
-  var hasIcon = icon || iconRight;
-  var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
-  var classes = theme.useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "text",
-    children: children
-  });
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true,
-      children: hasIcon
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
-      isRight: isRight,
-      children: hasIcon
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""),
-      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-        id: "3568181479",
-        dynamic: [paddingForAutoMode, paddingForAutoMode],
-        children: ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}")
-      })]
-    })]
-  });
-};
-var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
-  if (!config.isButtonGroup) return props;
-  return _objectSpread2(_objectSpread2({}, props), {}, {
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  });
-};
-
-/* "use client" */
-
-var defaultContext = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
-var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
-};
-
-var hexToRgb = function hexToRgb(color) {
-  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  var full = color.replace(fullReg, function (_, r, g, b) {
-    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-  });
-  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
-  if (!values) {
-    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
-  }
-  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
-};
-var colorToRgbValues = function colorToRgbValues(color) {
-  if (color.charAt(0) === '#') return hexToRgb(color);
-  var safeColor = color.replace(/ /g, '');
-  var colorType = color.substr(0, 4);
-  var regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
-    console.log(color);
-    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
-  }
-  return regArray[1].split(',').map(function (str) {
-    return Number.parseFloat(str);
-  });
-};
-var addColorAlpha = function addColorAlpha(color, alpha) {
-  if (!/^#|rgb|RGB/.test(color)) return color;
-  var _colorToRgbValues = colorToRgbValues(color),
-    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
-    r = _colorToRgbValues2[0],
-    g = _colorToRgbValues2[1],
-    b = _colorToRgbValues2[2];
-  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
-};
-
-var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
-  var colors = {
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground,
-      color: palette.foreground,
-      ripple: ''
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success,
-      color: palette.success,
-      ripple: ''
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning,
-      color: palette.warning,
-      ripple: ''
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error,
-      color: palette.error,
-      ripple: ''
-    }
-  };
-  return colors[_color] || null;
-};
-var getButtonColors = function getButtonColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5,
-      ripple: palette.accents_1
-    },
-    secondary: {
-      bg: palette.foreground,
-      border: palette.foreground,
-      color: palette.background,
-      ripple: palette.accents_1
-    },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff',
-      ripple: '#1f93ffff'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff',
-      ripple: '#ffca29ff'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: '#fff',
-      ripple: '#ff5a55ff'
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5,
-      ripple: palette.accents_1
-    }
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc',
-    ripple: ''
-  };
-
-  /**
-   * The '-light' type is the same color as the common type,
-   * only hover's color is different.
-   * e.g.
-   *   Color['success'] === Color['success-light']
-   *   Color['warning'] === Color['warning-light']
-   */
-  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
-  var colors = {
-    secondary: {
-      bg: palette.foreground,
-      border: palette.background,
-      color: palette.background
-    },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: 'white'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: 'white'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: 'white'
-    }
-  };
-  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
-  return colors[withoutLightType] || null;
-};
-var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    loading = props.loading,
-    shadow = props.shadow,
-    ghost = props.ghost;
-  var defaultColor = getButtonColors(palette, props);
-  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    },
-    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    })
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-    color: 'transparent'
-  });
-  if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
-  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
-    color: hoverColor.color || hoverColor.border
-  });
-};
-var getButtonCursor = function getButtonCursor(disabled, loading) {
-  if (disabled) return {
-    cursor: 'not-allowed',
-    events: 'auto'
-  };
-  if (loading) return {
-    cursor: 'default',
-    events: 'none'
-  };
-  return {
-    cursor: 'pointer',
-    events: 'auto'
-  };
-};
-var getButtonDripColor = function getButtonDripColor(palette, props) {
-  var type = props.type;
-  var isLightHover = type ? type.endsWith('light') : false;
-  var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
-};
-
-var _excluded$1 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
-var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
-  var theme$1 = theme.useTheme();
-  // const navigate = useNavigate();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  }); // Changed with !
-
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dripShow = _useState2[0],
-    setDripShow = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dripX = _useState4[0],
-    setDripX = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dripY = _useState6[0],
-    setDripY = _useState6[1];
-  var groupConfig = useButtonGroupContext();
-  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  var children = filteredProps.children,
-    _filteredProps$disabl = filteredProps.disabled,
-    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
-    filteredProps.color;
-    var _filteredProps$loadin = filteredProps.loading,
-    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
-    _filteredProps$shadow = filteredProps.shadow,
-    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
-    _filteredProps$ghost = filteredProps.ghost,
-    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
-    _filteredProps$effect = filteredProps.effect,
-    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
-    _filteredProps$round = filteredProps.round,
-    round = _filteredProps$round === void 0 ? false : _filteredProps$round;
-    filteredProps.relative;
-    filteredProps.replace;
-    filteredProps.a;
-    var to = filteredProps.to,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$type = filteredProps.type,
-    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = React.useMemo(function () {
-      return getButtonColors(theme$1.palette, filteredProps);
-    }, [theme$1.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color,
-    rippleColor = _useMemo.ripple;
-  var hover = React.useMemo(function () {
-    return getButtonHoverColors(theme$1.palette, filteredProps);
-  }, [theme$1.palette, filteredProps]);
-  var _useMemo2 = React.useMemo(function () {
-      return getButtonCursor(disabled, loading);
-    }, [disabled, loading]),
-    cursor = _useMemo2.cursor,
-    events = _useMemo2.events;
-  var dripColor = React.useMemo(function () {
-    return getButtonDripColor(theme$1.palette, filteredProps);
-  }, [theme$1.palette, filteredProps]);
-
-  /* istanbul ignore next */
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  var createRipple = function createRipple(event) {
-    var button = buttonRef.current;
-    if (!button) return;
-    var rect = button.getBoundingClientRect();
-    var size = Math.max(rect.width, rect.height);
-    var x = event.clientX - rect.left - size / 2;
-    var y = event.clientY - rect.top - size / 2;
-    var rippleCount = 1; // number of rings
-    var rippleDelay = 500; // ms between each ripple
-    var _loop = function _loop() {
-      var ripple = document.createElement('span');
-      Object.assign(ripple.style, {
-        position: 'absolute',
-        borderRadius: '50%',
-        backgroundColor: rippleColor,
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px"),
-        left: "".concat(x, "px"),
-        top: "".concat(y, "px"),
-        pointerEvents: 'none',
-        transform: 'scale(0)',
-        opacity: '1',
-        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
-        zIndex: 1
-      });
-      button.appendChild(ripple);
-
-      // Force reflow to start transition
-      window.getComputedStyle(ripple).opacity;
-      ripple.style.transform = 'scale(2.5)';
-      ripple.style.opacity = '0';
-      ripple.addEventListener('transitionend', function () {
-        ripple.remove();
-      });
-    };
-    for (var i = 0; i < rippleCount; i++) {
-      _loop();
-    }
-  };
-  var clickHandler = function clickHandler(event) {
-    if (disabled || loading) return;
-    var showDrip = !shadow && !ghost && effect;
-    /* istanbul ignore next */
-    if (showDrip && buttonRef.current) {
-      var rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    if (shadow) {
-      createRipple(event);
-    }
-    onClick && onClick(event);
-  };
-  var childrenWithIcon = React.useMemo(function () {
-    return getButtonChildrenWithIcon(auto, children, {
-      icon: icon,
-      iconRight: iconRight
-    });
-  }, [auto, children, icon, iconRight]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-
-  // If shadow provided is string then value other default
-  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [to ? /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
-      href: to
-    }, props), {}, {
-      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', 'btn-link', className) || ""),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
-        color: color
-      }), childrenWithIcon]
-    })) : /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
-      ref: buttonRef,
-      type: type,
-      disabled: disabled,
-      onClick: clickHandler
-    }, props), {}, {
-      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || ""),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
-        color: color
-      }), childrenWithIcon, dripShow && /*#__PURE__*/jsxRuntime.jsx(ButtonDrip, {
-        x: dripX,
-        y: dripY,
-        color: dripColor,
-        onCompleted: dripCompletedHandle
-      })]
-    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "612376042",
-      dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px'],
-      children: ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")
-    })]
-  });
-});
-ButtonComponent.displayName = 'Button';
-var Button = withScale(ButtonComponent);
-
-var CompactButton = function CompactButton(props) {
-  // const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
-    scale: 2 / 3,
-    px: 0.6
-  }, _objectSpread2({
-    auto: true
-  }, props)), {}, {
-    children: props.children
-  }));
-};
-var IconButton = /*#__PURE__*/React.memo(CompactButton);
-
-var SmallButton = function SmallButton(props) {
-  // const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6
-  }, props), {}, {
-    children: props.children
-  }));
-};
-var SmallButton$1 = /*#__PURE__*/React.memo(SmallButton);
-
-/* "use client" */
-
-Button.Icon = IconButton;
-Button.Small = SmallButton$1;
-
 var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
@@ -1648,10 +968,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -1672,34 +988,9 @@ var Container = function Container(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
   }, props), {}, {
-    children: [collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-          overflow: 'hidden',
-          display: 'inline',
-          transition: "max-height 0.3s ease"
-        },
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        margin: 0,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
-        style: {
-          textTransform: 'lowercase',
-          height: '25px'
-        },
-        effect: false,
-        color: "abort",
-        scale: 2 / 3,
-        px: 0.2,
-        py: 0,
-        auto: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("b", {
-          children: expand ? 'less' : 'more'
-        })
-      })]
+    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable, {
+      collapsedHeight: collapse,
+      children: children
     }) : children, styles]
   }));
 };

package/dist/index.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@helpdice/icons');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
+var Expandable$1 = require('components/expandable');
 var reactDom$1 = require('@floating-ui/react-dom');
 var pro = require('@helpdice/pro');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
@@ -13403,10 +13404,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$B);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -13427,34 +13424,9 @@ var Container = function Container(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
   }, props), {}, {
-    children: [collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-          overflow: 'hidden',
-          display: 'inline',
-          transition: "max-height 0.3s ease"
-        },
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        margin: 0,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
-        style: {
-          textTransform: 'lowercase',
-          height: '25px'
-        },
-        effect: false,
-        color: "abort",
-        scale: 2 / 3,
-        px: 0.2,
-        py: 0,
-        auto: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("b", {
-          children: expand ? 'less' : 'more'
-        })
-      })]
+    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable$1, {
+      collapsedHeight: collapse,
+      children: children
     }) : children, styles]
   }));
 };

package/esm/container/box.js

@@ -1,14 +1,13 @@
 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 = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import GridBasicItem from "../grid/basic-item";
 import useScale, { withScale } from '../use-scale';
 import { useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
-import Button from "../button";
+import Expandable from "components/expandable";
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
   var _ref$gap = _ref.gap,
@@ -23,10 +22,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -45,29 +40,9 @@ var Container = function Container(_ref) {
   var classes = useClasses(resolveClassName, className);
   return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
     className: classes
-  }, props), collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-      overflow: 'hidden',
-      display: 'inline',
-      transition: "max-height 0.3s ease"
-    }
-  }, children), /*#__PURE__*/React.createElement(Button, {
-    margin: 0,
-    onClick: function onClick() {
-      return setExpand(!expand);
-    },
-    style: {
-      textTransform: 'lowercase',
-      height: '25px'
-    },
-    effect: false,
-    color: "abort",
-    scale: 2 / 3,
-    px: 0.2,
-    py: 0,
-    auto: true
-  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : children, styles);
+  }, props), collapse > 10 ? /*#__PURE__*/React.createElement(Expandable, {
+    collapsedHeight: collapse
+  }, children) : children, styles);
 };
 Container.displayName = 'Container';
 export default withScale(Container);

package/package.json

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