{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n let x = '0'\n let margin = '0'\n\n if (foundBreakpoint && breakpoint !== 'responsive') {\n x = '-50%'\n\n if (\n typeof zoom === 'number' &&\n typeof size.width === 'number' &&\n typeof size.height === 'number'\n ) {\n const scaledWidth = size.width / zoom\n const difference = scaledWidth - size.width\n x = `${difference / 2}px`\n margin = '0 auto'\n }\n }\n\n return (\n