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

Tanto Widget

import {jsx}from'@emotion/react/jsx-runtime';import useResizeObserver from'use-resize-observer';const SmoothWidth = ({
  children,
  ...rest
}) => {
  const {
    width,
    ref
  } = useResizeObserver();
  return jsx("div", {
    style: {
      display: 'flex',
      justifyContent: 'center',
      boxSizing: 'border-box',
      transition: 'width 150ms',
      width: width ? width : 'auto'
    },
    ...rest,
    children: jsx("div", {
      style: {
        width: 'fit-content',
        whiteSpace: 'nowrap'
      },
      ref: ref,
      children: children
    })
  });
};export{SmoothWidth};