@mantine/core/cjs/core/MantineProvider/MantineClasses/MantineClasses.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"MantineClasses.cjs","names":["useMantineTheme","useMantineStyleNonce","keys","px","em"],"sources":["../../../../src/core/MantineProvider/MantineClasses/MantineClasses.tsx"],"sourcesContent":["import { em, keys, px } from '../../utils';\nimport { useMantineStyleNonce } from '../Mantine.context';\nimport { useMantineTheme } from '../MantineThemeProvider';\n\nexport function MantineClasses() {\n  const theme = useMantineTheme();\n  const nonce = useMantineStyleNonce();\n\n  const classes = keys(theme.breakpoints).reduce<string>((acc, breakpoint) => {\n    const isPxBreakpoint = theme.breakpoints[breakpoint].includes('px');\n    const pxValue = px(theme.breakpoints[breakpoint]) as number;\n    const maxWidthBreakpoint = isPxBreakpoint ? `${pxValue - 0.1}px` : em(pxValue - 0.1);\n    const minWidthBreakpoint = isPxBreakpoint ? `${pxValue}px` : em(pxValue);\n\n    return `${acc}@media (max-width: ${maxWidthBreakpoint}) {.mantine-visible-from-${breakpoint} {display: none !important;}}@media (min-width: ${minWidthBreakpoint}) {.mantine-hidden-from-${breakpoint} {display: none !important;}}`;\n  }, '');\n\n  return (\n    <style\n      data-mantine-styles=\"classes\"\n      nonce={nonce?.()}\n      dangerouslySetInnerHTML={{ __html: classes }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,QAAQA,6BAAAA,iBAAiB;CAC/B,MAAM,QAAQC,wBAAAA,sBAAsB;CAEpC,MAAM,UAAUC,aAAAA,KAAK,MAAM,YAAY,CAAC,QAAgB,KAAK,eAAe;EAC1E,MAAM,iBAAiB,MAAM,YAAY,YAAY,SAAS,KAAK;EACnE,MAAM,UAAUC,WAAAA,GAAG,MAAM,YAAY,YAAY;AAIjD,SAAO,GAAG,IAAI,qBAHa,iBAAiB,GAAG,UAAU,GAAI,MAAMC,YAAAA,GAAG,UAAU,GAAI,CAG9B,2BAA2B,WAAW,kDAFjE,iBAAiB,GAAG,QAAQ,MAAMA,YAAAA,GAAG,QAAQ,CAEyF,0BAA0B,WAAW;IACrM,GAAG;AAEN,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,uBAAoB;EACpB,OAAO,SAAS;EAChB,yBAAyB,EAAE,QAAQ,SAAS;EAC5C,CAAA"}