@mantine/core/cjs/components/Grid/GridVariables.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"GridVariables.cjs","names":["useMantineTheme","filterProps","getSpacing","getBaseValue","keys","getSortedBreakpoints","InlineStyles"],"sources":["../../../src/components/Grid/GridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  useMantineTheme,\n} from '../../core';\nimport type { GridProps } from './Grid';\nimport type { GridBreakpoints } from './Grid.context';\n\ninterface GridVariablesProps extends GridProps {\n  selector: string;\n}\n\nexport function GridVariables({\n  gap,\n  rowGap,\n  columnGap,\n  selector,\n  breakpoints,\n  type,\n}: GridVariablesProps) {\n  const theme = useMantineTheme();\n  const _breakpoints = breakpoints || theme.breakpoints;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--grid-gap': getSpacing(getBaseValue(gap)),\n    '--grid-row-gap': getSpacing(getBaseValue(rowGap)),\n    '--grid-column-gap': getSpacing(getBaseValue(columnGap)),\n  });\n\n  const queries = keys(_breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof gap === 'object' && gap[breakpoint] !== undefined) {\n        acc[breakpoint]['--grid-gap'] = getSpacing(gap[breakpoint]);\n      }\n\n      if (typeof rowGap === 'object' && rowGap[breakpoint] !== undefined) {\n        acc[breakpoint]['--grid-row-gap'] = getSpacing(rowGap[breakpoint]);\n      }\n\n      if (typeof columnGap === 'object' && columnGap[breakpoint] !== undefined) {\n        acc[breakpoint]['--grid-column-gap'] = getSpacing(columnGap[breakpoint]);\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), _breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const values = sortedBreakpoints.map((breakpoint) => ({\n    query:\n      type === 'container'\n        ? `mantine-grid (min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`\n        : `(min-width: ${_breakpoints[breakpoint.value as keyof GridBreakpoints]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return (\n    <InlineStyles\n      styles={baseStyles}\n      media={type === 'container' ? undefined : values}\n      container={type === 'container' ? values : undefined}\n      selector={selector}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,cAAc,EAC5B,KACA,QACA,WACA,UACA,aACA,QACqB;CACrB,MAAM,QAAQA,6BAAAA,iBAAiB;CAC/B,MAAM,eAAe,eAAe,MAAM;CAE1C,MAAM,aAAiDC,qBAAAA,YAAY;EACjE,cAAcC,iBAAAA,WAAWC,uBAAAA,aAAa,IAAI,CAAC;EAC3C,kBAAkBD,iBAAAA,WAAWC,uBAAAA,aAAa,OAAO,CAAC;EAClD,qBAAqBD,iBAAAA,WAAWC,uBAAAA,aAAa,UAAU,CAAC;EACzD,CAAC;CAEF,MAAM,UAAUC,aAAAA,KAAK,aAAa,CAAC,QAChC,KAAK,eAAe;AACnB,MAAI,CAAC,IAAI,YACP,KAAI,cAAc,EAAE;AAGtB,MAAI,OAAO,QAAQ,YAAY,IAAI,gBAAgB,KAAA,EACjD,KAAI,YAAY,gBAAgBF,iBAAAA,WAAW,IAAI,YAAY;AAG7D,MAAI,OAAO,WAAW,YAAY,OAAO,gBAAgB,KAAA,EACvD,KAAI,YAAY,oBAAoBA,iBAAAA,WAAW,OAAO,YAAY;AAGpE,MAAI,OAAO,cAAc,YAAY,UAAU,gBAAgB,KAAA,EAC7D,KAAI,YAAY,uBAAuBA,iBAAAA,WAAW,UAAU,YAAY;AAG1E,SAAO;IAET,EAAE,CACH;CAMD,MAAM,SAJoBG,+BAAAA,qBAAqBD,aAAAA,KAAK,QAAQ,EAAE,aAAa,CAAC,QACzE,eAAeA,aAAAA,KAAK,QAAQ,WAAW,OAAO,CAAC,SAAS,EAC1D,CAEgC,KAAK,gBAAgB;EACpD,OACE,SAAS,cACL,4BAA4B,aAAa,WAAW,OAAgC,KACpF,eAAe,aAAa,WAAW,OAAgC;EAC7E,QAAQ,QAAQ,WAAW;EAC5B,EAAE;AAEH,QACE,iBAAA,GAAA,kBAAA,KAACE,qBAAAA,cAAD;EACE,QAAQ;EACR,OAAO,SAAS,cAAc,KAAA,IAAY;EAC1C,WAAW,SAAS,cAAc,SAAS,KAAA;EACjC;EACV,CAAA"}