@sky-mavis/tanto-widget/dist/cjs/components/animated-containers/SmoothWidth.cjs

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var useResizeObserver = require('use-resize-observer');

const SmoothWidth = ({
  children,
  ...rest
}) => {
  const {
    width,
    ref
  } = useResizeObserver();
  return jsxRuntime.jsx("div", {
    style: {
      display: 'flex',
      justifyContent: 'center',
      boxSizing: 'border-box',
      transition: 'width 150ms',
      width: width ? width : 'auto'
    },
    ...rest,
    children: jsxRuntime.jsx("div", {
      style: {
        width: 'fit-content',
        whiteSpace: 'nowrap'
      },
      ref: ref,
      children: children
    })
  });
};

exports.SmoothWidth = SmoothWidth;