{"version":3,"sources":["../../core/src/create-responsive-row.tsx","../../core/src/create-responsive-column.tsx","../src/responsive-column.ts"],"sourcesContent":["import React from \"react\";\nimport { ResponsiveColumnProps } from \"./create-responsive-column\";\n\nexport type ResponsiveRowProps = Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> & {\n  style?: Omit<\n    React.CSSProperties,\n    | \"padding\"\n    | \"paddingLeft\"\n    | \"paddingRight\"\n    | \"paddingTop\"\n    | \"paddingBottom\"\n    | \"paddingInline\"\n    | \"paddingBlock\"\n    | \"maxWidth\"\n  >;\n\n  maxWidth?: number;\n\n  paddingLeft?: number;\n  paddingRight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n};\n\nexport function createResponsiveRow(\n  isResponsiveColumn: (\n    node: any,\n  ) => node is React.ReactElement<\n    ResponsiveColumnProps,\n    React.FC<ResponsiveColumnProps>\n  >,\n) {\n  return (props: ResponsiveRowProps) => {\n    const childrenArray = React.Children.toArray(props.children);\n\n    const responsiveColumns = childrenArray\n      .filter(isResponsiveColumn)\n      .map((node) => node.props.span ?? 1);\n    if (responsiveColumns.length > 3) {\n      console.warn(\n        \"You've exceeded the recommended 3-column limit in your email template. Consider sticking to a maximum of 3 columns for best practice.\",\n      );\n    }\n\n    const totalColumnSpan = responsiveColumns.reduce(\n      (acc, spanForColumn) => acc + spanForColumn,\n      0,\n    );\n\n    const pl = props.paddingLeft ?? 0;\n    const pr = props.paddingLeft ?? 0;\n    const oneColumnMaxWidth =\n      (props.maxWidth ?? 600 - pl - pr) / totalColumnSpan;\n\n    return (\n      <table\n        align=\"center\"\n        width=\"100%\"\n        border={0}\n        cellPadding=\"0\"\n        cellSpacing=\"0\"\n        role=\"presentation\"\n        {...props}\n        style={{\n          textAlign: \"center\",\n          fontSize: 0,\n          ...props.style,\n        }}\n      >\n        <tbody>\n          <tr>\n            <td\n              style={{\n                padding: `${props.paddingTop ?? 0}px ${\n                  props.paddingRight ?? 0\n                }px ${props.paddingBottom ?? 0}px ${props.paddingLeft ?? 0}px`,\n              }}\n            >\n              {childrenArray.map((node, i) => {\n                if (isResponsiveColumn(node)) {\n                  const columnProps = node.props;\n                  const columnSpan = columnProps.span ?? 1;\n\n                  return (\n                    <table\n                      key={i}\n                      align=\"center\"\n                      width=\"100%\"\n                      border={0}\n                      cellPadding=\"0\"\n                      cellSpacing=\"0\"\n                      role=\"presentation\"\n                      {...columnProps}\n                      style={{\n                        maxWidth: oneColumnMaxWidth * columnSpan,\n                        display: \"inline-block\",\n                        verticalAlign: \"top\",\n                        fontSize: 16,\n                        boxSizing: \"border-box\",\n                        ...columnProps.style,\n                      }}\n                    >\n                      <tbody>\n                        <tr>\n                          <td {...columnProps.tdProps}>{columnProps.children}</td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  );\n                }\n\n                return node;\n              })}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    );\n  };\n}\n","import React from \"react\";\nimport { BaseSectionProps } from \"./base-section-props\";\n\nexport type ResponsiveColumnProps = React.ComponentPropsWithoutRef<'table'> & {\n  span?: number;\n  tdProps?: React.ComponentPropsWithoutRef<'td'>;\n};\n\nexport function createResponsiveColumn() {\n  const ResponsiveColumn = (_props: BaseSectionProps) => {\n    /*\n      This component is basically just a placeholder that we then get the props from.\n      Once the user does something like `<ResponsiveColumn span={2}>`\n      it will be equivalent to an object like\n      \n      ```typescript\n      {\n        type: [Function: ResponsiveColumn],\n        props: { span: 2 },\n        ...\n      }\n      ```\n\n      This will allow us to get the value of the props and to know if the\n      component used was the proper one.\n    */\n    return <></>;\n  };\n\n  return {\n    isResponsiveColumn: (\n      node: any,\n    ): node is React.ReactElement<\n      ResponsiveColumnProps,\n      typeof ResponsiveColumn\n    > => {\n      return (\n        React.isValidElement<ResponsiveColumnProps>(node) &&\n        node.type === ResponsiveColumn\n      );\n    },\n    component: ResponsiveColumn as React.FC<ResponsiveColumnProps>,\n  };\n}\n","import {\n  createResponsiveColumn,\n  ResponsiveColumnProps as BaseProps,\n} from \"@responsive-email/core\";\n\nexport type ResponsiveColumnProps = BaseProps;\n\nexport const { isResponsiveColumn, component: ResponsiveColumn } =\n  createResponsiveColumn();\n"],"mappings":"AAAA,OAAOA,MAAW,QAwBX,SAASC,EACdC,EAMA,CACA,OAAQC,GAA8B,CACpC,IAAMC,EAAgBJ,EAAM,SAAS,QAAQG,EAAM,QAAQ,EAErDE,EAAoBD,EACvB,OAAOF,CAAkB,EACzB,IAAKI,GAASA,EAAK,MAAM,MAAQ,CAAC,EACjCD,EAAkB,OAAS,GAC7B,QAAQ,KACN,uIACF,EAGF,IAAME,EAAkBF,EAAkB,OACxC,CAACG,EAAKC,IAAkBD,EAAMC,EAC9B,CACF,EAEMC,EAAKP,EAAM,aAAe,EAC1BQ,EAAKR,EAAM,aAAe,EAC1BS,GACHT,EAAM,UAAY,IAAMO,EAAKC,GAAMJ,EAEtC,OACEP,EAAA,cAAC,SACC,MAAM,SACN,MAAM,OACN,OAAQ,EACR,YAAY,IACZ,YAAY,IACZ,KAAK,eACJ,GAAGG,EACJ,MAAO,CACL,UAAW,SACX,SAAU,EACV,GAAGA,EAAM,KACX,GAEAH,EAAA,cAAC,aACCA,EAAA,cAAC,UACCA,EAAA,cAAC,MACC,MAAO,CACL,QAAS,GAAGG,EAAM,YAAc,CAAC,MAC/BA,EAAM,cAAgB,CACxB,MAAMA,EAAM,eAAiB,CAAC,MAAMA,EAAM,aAAe,CAAC,IAC5D,GAECC,EAAc,IAAI,CAACE,EAAMO,IAAM,CAC9B,GAAIX,EAAmBI,CAAI,EAAG,CAC5B,IAAMQ,EAAcR,EAAK,MACnBS,EAAaD,EAAY,MAAQ,EAEvC,OACEd,EAAA,cAAC,SACC,IAAKa,EACL,MAAM,SACN,MAAM,OACN,OAAQ,EACR,YAAY,IACZ,YAAY,IACZ,KAAK,eACJ,GAAGC,EACJ,MAAO,CACL,SAAUF,EAAoBG,EAC9B,QAAS,eACT,cAAe,MACf,SAAU,GACV,UAAW,aACX,GAAGD,EAAY,KACjB,GAEAd,EAAA,cAAC,aACCA,EAAA,cAAC,UACCA,EAAA,cAAC,MAAI,GAAGc,EAAY,SAAUA,EAAY,QAAS,CACrD,CACF,CACF,CAEJ,CAEA,OAAOR,CACT,CAAC,CACH,CACF,CACF,CACF,CAEJ,CACF,CCvHA,OAAOU,MAAW,QAQX,SAASC,GAAyB,CACvC,IAAMC,EAAoBC,GAiBjBH,EAAA,cAAAA,EAAA,aAAE,EAGX,MAAO,CACL,mBACEI,GAMEJ,EAAM,eAAsCI,CAAI,GAChDA,EAAK,OAASF,EAGlB,UAAWA,CACb,CACF,CCpCO,GAAM,CAAE,mBAAAG,EAAoB,UAAWC,CAAiB,EAC7DC,EAAuB","names":["React","createResponsiveRow","isResponsiveColumn","props","childrenArray","responsiveColumns","node","totalColumnSpan","acc","spanForColumn","pl","pr","oneColumnMaxWidth","i","columnProps","columnSpan","React","createResponsiveColumn","ResponsiveColumn","_props","node","isResponsiveColumn","ResponsiveColumn","createResponsiveColumn"]}