{"version":3,"file":"MainContainer.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/MainContainer.tsx"],"sourcesContent":["// This order is important - we need mixins to appear first so later styles can override them\nimport '../mixins';\n\nimport { useLingui } from '@lingui/react/macro';\nimport classNames from 'classnames';\nimport React, { CSSProperties, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport Column from '../atoms/Column';\nimport { ToastContainer } from '../atoms/Toast';\nimport Watermark from '../atoms/Watermark';\nimport { Theme } from '../themes/ThemeConfig';\nimport styles from './MainContainer.module.css';\n\nexport type MainContainerProps = {\n  children: ReactNode;\n  displayWatermark: boolean;\n  theme: Theme;\n};\n\nconst MainContainer = ({ children, displayWatermark, theme }: MainContainerProps) => {\n  const { t } = useLingui();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const { className, style } = useRootStyles(theme, ref);\n\n  return (\n    <Column gap={6} style={style} className={classNames(styles.container, className)} ref={ref}>\n      {children}\n\n      {displayWatermark && (\n        <div className={styles.watermarkContainer}>\n          <Watermark\n            poweredBy={t({ id: 'watermark.poweredBy', message: 'Powered by' })}\n            label={t({ id: 'watermark.altText', message: 'Stytch by Twilio' })}\n          />\n        </div>\n      )}\n\n      <ToastContainer />\n    </Column>\n  );\n};\n\nexport function useRootStyles(theme: Theme, ref: RefObject<HTMLDivElement>) {\n  const rawBreakpoint = theme['mobile-breakpoint'];\n\n  // Media queries don't play well with CSS custom properties, so as a workaround we parse var() expressions out of the\n  // breakpoint string and replace them with values resolved using getComputedStyle().\n  const [breakpoint, setBreakpoint] = useState(rawBreakpoint);\n  useEffect(() => {\n    setBreakpoint(parseCssVar(rawBreakpoint, ref.current));\n  }, [rawBreakpoint, ref]);\n\n  const isMobile = useMediaQuery(`(max-width: ${breakpoint})`);\n  const themeVariables = useMemo(() => themeToCssVariables(theme), [theme]);\n\n  return {\n    style: themeVariables,\n    className: classNames({ '-st-mobile': isMobile }),\n  };\n}\n\nexport function themeToCssVariables(theme: Theme) {\n  const { 'color-scheme': colorScheme, ...themeVariables } = theme;\n  const variables = Object.fromEntries(\n    // eslint-disable-next-line lingui/no-unlocalized-strings\n    Object.entries(themeVariables).map(([key, value]) => [`--st-${key}`, value]),\n  );\n\n  if (theme['color-scheme'] === 'shadcn') {\n    variables['--st-color-scheme'] = 'inherit';\n  } else {\n    variables['--st-color-scheme'] = colorScheme;\n    variables['--st-dark-mode'] = theme['color-scheme'] === 'dark' ? '1' : '0';\n  }\n\n  return variables as CSSProperties;\n}\n\nexport function parseCssVar(value: string, element: HTMLElement | null): string {\n  if (!element) return value;\n\n  // Ideally we would use CSSStyleValue.parse() instead of regex, but that's not currently well supported\n  // https://caniuse.com/mdn-api_cssstylevalue_parse_static\n  const replaced = value.replace(/var\\s*\\([^)]+\\)/gi, (r) => {\n    // r is going to be var(..., ...), so we use a similar regex with a capture group to match the stuff in the brackets\n    // variable should always exist but defaultValue may not\n    const [variable, defaultValue] = r\n      .match(/\\(([^)]+)\\)/)![1]\n      .split(',')\n      .map((s) => s.trim());\n    const propertyValue = window.getComputedStyle(element).getPropertyValue(variable);\n    return propertyValue || defaultValue || r;\n  });\n\n  return replaced === value ? replaced : parseCssVar(replaced, element);\n}\n\nexport default MainContainer;\n"],"names":["MainContainer","children","displayWatermark","theme","useLingui","ref","useRef","className","style","useRootStyles","React","Column","gap","classNames","styles","container","div","watermarkContainer","Watermark","poweredBy","label","ToastContainer","rawBreakpoint","breakpoint","setBreakpoint","useState","useEffect","parseCssVar","current","isMobile","useMediaQuery","themeVariables","useMemo","themeToCssVariables","colorScheme","variables","Object","fromEntries","entries","map","key","value","element","replaced","replace","r","variable","defaultValue","match","split","s","trim","propertyValue","window","getComputedStyle","getPropertyValue"],"mappings":"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"}