component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-11-html-email-templete-md-80353be94cd11488fb2a.js.map

{"version":3,"file":"component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-11-html-email-templete-md-80353be94cd11488fb2a.js","mappings":"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","sources":["webpack://kyoungah-dev-blog/./posts/2018-08-11-html-email-templete.md","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout.content.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout-content.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout-tags.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/index.ts","webpack://kyoungah-dev-blog/./src/entities/tags/tags.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/tags.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.ui.tsx","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.module.css","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/header/header.module.css","webpack://kyoungah-dev-blog/./src/widgets/header/header.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.module.css","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/default-layout/default-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.module.css","webpack://kyoungah-dev-blog/./node_modules/@mdx-js/react/lib/index.js","webpack://kyoungah-dev-blog/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["/*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/\nimport {useMDXComponents as _provideComponents} from \"@mdx-js/react\";\nimport React from \"react\";\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\",\n    h2: \"h2\",\n    img: \"img\",\n    ul: \"ul\",\n    li: \"li\",\n    a: \"a\"\n  }, _provideComponents(), props.components);\n  return React.createElement(React.Fragment, null, React.createElement(_components.p, null, \"오랜만에 퍼블리싱 외주를 받았는데 이메일 템플릿을 퍼블리싱 하는 일이었다.\\n이메일 템플릿은 처음 퍼블리싱 해보는거라 작업 전 먼저 사전작업으로 리서치나 관련 정보들을 알아봤다.\"), \"\\n\", React.createElement(_components.h2, null, \"리서치\"), \"\\n\", React.createElement(_components.p, null, \"먼저 내가 받은 이메일 중 몇몇 이메일을 검사해 보았다.\"), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.img, {\n    src: \"/images/posts/html-email-template-03.png\",\n    alt: \"aws 메일\"\n  }), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/html-email-template-04.png\",\n    alt: \"구글 애널리틱스 메일\"\n  }), \"\\n대부분은 table로 레이아웃을 잡고 퍼블리싱을 했다.\"), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.img, {\n    src: \"/images/posts/html-email-template-01.png\",\n    alt: \"구글 드라이브 알림 메일\"\n  }), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/html-email-template-02.png\",\n    alt: \"티스토리 메일\"\n  }), \"\\n평범하게 div를 사용해서 레이아웃을 잡은 이메일들도 있었다.\"), \"\\n\", React.createElement(_components.p, null, \"스타일은 전부다 인라인 스타일을 적용하고 있었다.\"), \"\\n\", React.createElement(_components.h2, null, \"이메일 템플릿을 작성할 때 주의해야 할 점\"), \"\\n\", React.createElement(_components.p, null, \"위에서 리서치한 결과대로 검색을 해봤더니 이메일 클라이언트 템플릿을 만들 때에는 주의해야 할 것들이 많았다.\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"레이아웃은 table로 잡자.\\n이메일에서 사용하는 HTML과 CSS는 웹 표준과는 거리가 멀다. 게다가 이메일 클라이언트 마다 html과 css를 다르게 해석하기 때문에 주의해야 한다. 다행이 table 코드는 대부분 적용되므로 이를 사용하는 방법이 가장 많이 쓰인다.\\n맨처음 이메일 템플릿 작업을 들어가면서 에이 뭐 어때 하며 평소대로 div나 다른 태그들로 레이아웃 작업을 진행했다가 나중에 아웃룩 구버전에서 레이아웃이 다 깨지는걸 확인하고 허겁지겁 table로 레이아웃을 다 바꿨다 ㅠ.\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"인라인으로 CSS를 적어주는 것이 가장 안전하다.\\n대부분의 메일 서비스 업체에서는 보안상 css 파일을 모두 제거하기 때문에 인라인 스타일로 css를 작성해주는 것이 좋다. 대신 안되는 css 요소들도 많으니 조심해야 한다. (position, background-image 등...) media query도 지원하는 곳에서만 쓸 수 있다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.h2, null, \"이메일 템플릿을 작성하면서 도움을 받았던 사이트\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n    href: \"https://webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770\"\n  }, \"HTML 이메일 템플릿 처음부터 제작하기\"), \"\\n이메일 템플릿을 작성하는 방법을 가르쳐준다. 튜토리얼 하는 식으로 한번 읽어보고 진행했었다.\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n    href: \"https://zurb.com/playground/responsive-email-templates\"\n  }, \"Responsive Email Templates\"), \"\\n무료 이메일 템플릿을 다운받을 수 있는 사이트이다. 이메일 템플릿 하나를 골라 다운 받은 뒤 작업하면서 많이 참고 했었는데 도움이 많이 되었다.\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n    href: \"https://litmus.com/\"\n  }, \"litmus\"), \"\\n작성한 템플릿을 아웃룩, 아이폰, 안드로이드 등 여러 클라이언트에서 테스트 해 볼 수 있는 웹서비스이다. 일주일 동안 무료로 사용할 수 있고 그 다음 부터는 결제를 해야한다. gmail이랑 네이버 메일에서는 작성했던 템플릿이 무너지지 않고 잘 나오길래 안심하고 있다가 litmus로 아웃룩에서 다 무너져있는 템플릿을 보고 식겁하며 새로 작업했었다.\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n    href: \"https://templates.mailchimp.com/resources/inline-css/\"\n  }, \"CSS Inliner Tool\"), \"\\nhtml이랑 style을 합쳐서 인라인 스타일 html을 만들어주는 웹사이트이다. 이 사이트 덕분에 css파일과 html 파일을 편하게 합칠 수 있었다. 대신 여러번 작업하면 제대로 결과물이 출력이 안되는 오류가 있어서 파일을 한번 합치고 새로고침 하고 또 다른 파일들을 합치는 작업을 반복했었다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.h2, null, \"마무리\"), \"\\n\", React.createElement(_components.p, null, \"이메일 템플릿 퍼블리싱을 하면서 테이블로 레이아웃 짜는것이 얼마나 구리고 html5가 얼마나 좋은지 느낄 수 있었다. css도 마음대로 못쓰고 미디어쿼리가 안되는것도 정말 힘들었다 ㅠ. 다시는... 이메일...템플릿...퍼블리싱...하고 싶지....않아...\"));\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? React.createElement(MDXLayout, props, React.createElement(_createMdxContent, props)) : _createMdxContent(props);\n}\nexport default MDXContent;\n","import React from \"react\";\nimport GATSBY_COMPILED_MDX from \"/Users/yookyoung.park/Workspace/kyoungah-dev-blog/posts/2018-08-11-html-email-templete.md\";\nimport {MDXProvider} from '@mdx-js/react';\nimport {Container} from '@/shared/uis/container';\nimport {DefaultLayout} from '@/widgets/default-layout';\nimport {PostLayoutContent} from './components/post-layout-content';\nimport {PostLayoutDate} from './components/post-layout-date';\nimport {PostLayoutTags} from './components/post-layout-tags';\nimport {PostLayoutTitle} from './components/post-layout-title';\nimport {postLayoutContainer, postLayoutTitle} from './post-layout.module.css';\nimport {jsx as _jsx} from \"react/jsx-runtime\";\nimport {jsxs as _jsxs} from \"react/jsx-runtime\";\nfunction PostLayout(_ref) {\n  var _data$mdx$frontmatter, _data$mdx;\n  let {data, children} = _ref;\n  const {date, tags, title} = (_data$mdx$frontmatter = data === null || data === void 0 ? void 0 : (_data$mdx = data.mdx) === null || _data$mdx === void 0 ? void 0 : _data$mdx.frontmatter) !== null && _data$mdx$frontmatter !== void 0 ? _data$mdx$frontmatter : {};\n  return _jsx(DefaultLayout, {\n    children: _jsxs(Container, {\n      className: postLayoutContainer,\n      children: [_jsx(PostLayoutTitle, {\n        className: postLayoutTitle,\n        title: title\n      }), _jsx(PostLayoutDate, {\n        date: date\n      }), _jsx(PostLayoutTags, {\n        tags: tags\n      }), _jsx(PostLayoutContent, {\n        children: _jsx(MDXProvider, {\n          children: children\n        })\n      })]\n    })\n  });\n}\nconst query = \"1347208223\";\nPostLayout\nexport default function GatsbyMDXWrapper(props) {\n  return React.createElement(PostLayout, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContentRoot = \"post-layout-content-module--post-layout-content-root--01754\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type PropsWithChildren } from \"react\";\n\nimport { postLayoutContentRoot } from \"./post-layout.content.module.css\";\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction PostLayoutContent({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(postLayoutContentRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { PostLayoutContent };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutDateRoot = \"post-layout-date-module--post-layout-date-root--f34d1\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes } from \"react\";\n\nimport { postLayoutDateRoot } from \"./post-layout-date.module.css\";\n\ntype Props = { date: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutDate({ className, date, ...props }: Props) {\n  return (\n    <span className={clsx(postLayoutDateRoot, className)} {...props}>\n      {date}\n    </span>\n  );\n}\n\nexport { PostLayoutDate };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTags = \"post-layout-module--post-layout-tags--837df\";","import { Tags } from \"@/entities/tags\";\nimport { Link } from \"gatsby\";\n\nimport { postLayoutTags } from \"./post-layout.module.css\";\n\ntype Props = { tags: string[] };\n\nfunction PostLayoutTags({ tags }: Props) {\n  return (\n    <Tags className={postLayoutTags}>\n      {tags.map((tag) => (\n        <Link key={tag} to={`/tags/${tag}`}>\n          <Tags.Tag tag={tag} />\n        </Link>\n      ))}\n    </Tags>\n  );\n}\n\nexport { PostLayoutTags };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTitleRoot = \"post-layout-title-module--post-layout-title-root--88374\";","import { clsx } from \"clsx\";\nimport { postLayoutTitleRoot } from \"./post-layout-title.module.css\";\nimport { HTMLAttributes } from \"react\";\n\ntype Props = { title: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutTitle({ className, title, ...props }: Props) {\n  return (\n    <h1 className={clsx(postLayoutTitleRoot, className)} {...props}>\n      {title}\n    </h1>\n  );\n}\n\nexport { PostLayoutTitle };\n","import { Tag } from '@/shared/uis/tag';\nimport { Tags } from './tags.ui';\n\nconst ComposedTags = Object.assign(Tags, {\n  Tag,\n});\n\nexport { ComposedTags as Tags };\n","import { PropsWithChildren, type HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nimport { tagsRoot } from './tags.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction Tags({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(tagsRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Tags };\n","// extracted by mini-css-extract-plugin\nexport var show = \"tags-module--show--7704b\";\nexport var tagsRoot = \"tags-module--tags-root--e3461\";","import { clsx } from 'clsx';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { tagRoot } from './tag.module.css';\n\ntype Props = {\n  tag: ReactNode;\n} & HTMLAttributes<HTMLSpanElement>;\n\nfunction Tag({ className, tag, ...props }: Props) {\n  return (\n    <span className={clsx(tagRoot, className)} {...props}>\n      {tag}\n    </span>\n  );\n}\n\nexport type { Props as TagProps };\nexport { Tag };\n","// extracted by mini-css-extract-plugin\nexport var tagRoot = \"tag-module--tag-root--aae01\";","// extracted by mini-css-extract-plugin\nexport var containerRoot = \"container-module--container-root--3b208\";","import { clsx } from 'clsx';\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\nimport { containerRoot } from './container.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLSpanElement>;\n\nfunction Container({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(containerRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Container };\n","// extracted by mini-css-extract-plugin\nexport var basicLayoutRoot = \"basic-layout-module--basic-layout-root--a11e0\";","import { clsx } from 'clsx';\nimport { type HTMLAttributes, type PropsWithChildren } from 'react';\n\nimport { basicLayoutRoot } from './basic-layout.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction BasicLayout({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(basicLayoutRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { BasicLayout };\n","// extracted by mini-css-extract-plugin\nexport var about = \"header-module--about--32ac9\";\nexport var headerLogo = \"header-module--header-logo--5bbdc\";\nexport var headerNavigation = \"header-module--header-navigation--24bcb\";\nexport var headerNavigationItem = \"header-module--header-navigation-item--ba248\";\nexport var headerNavigationItemLink = \"header-module--header-navigation-item-link--d6da9\";\nexport var headerNavigationList = \"header-module--header-navigation-list--3815c\";\nexport var headerRoot = \"header-module--header-root--01ceb\";\nexport var tags = \"header-module--tags--eb332\";","import { Link } from 'gatsby';\nimport { clsx } from 'clsx';\n\nimport {\n  about,\n  headerRoot,\n  headerLogo,\n  headerNavigation,\n  headerNavigationList,\n  headerNavigationItem,\n  headerNavigationItemLink,\n  tags,\n} from './header.module.css';\n\nfunction Header() {\n  return (\n    <header className={headerRoot}>\n      <Link to=\"/\">\n        <img\n          src=\"/images/logo.png\"\n          srcSet={`/images/logo-small.png 200w, /images/logo.png 300w`}\n          sizes=\"(max-width: 360px) 200px, 300px\"\n          alt=\"dev.kyoungah.me\"\n          className={headerLogo}\n        />\n      </Link>\n      <nav className={headerNavigation}>\n        <ul className={headerNavigationList}>\n          <li className={headerNavigationItem}>\n            <Link to=\"/tags\">\n              <span\n                aria-label=\"tags\"\n                className={clsx(headerNavigationItemLink, tags)}\n              />\n            </Link>\n          </li>\n          <li className={headerNavigationItem}>\n            <a href=\"/about\" rel=\"noopener\" target=\"_blank\">\n              <span\n                aria-label=\"about\"\n                className={clsx(headerNavigationItemLink, about)}\n              />\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n  );\n}\n\nexport { Header };\n","// extracted by mini-css-extract-plugin\nexport var footerRoot = \"footer-module--footer-root--795ff\";","import { footerRoot } from './footer.module.css';\n\nfunction Footer() {\n  return (\n    <footer className={footerRoot}>\n      <span>Powered by Gatsby, Hosted by GitHub Pages.</span>\n      <span>\n        ©\n        <a\n          href=\"https://github.com/partykyoung\"\n          rel=\"noreferrer\"\n          target=\"_blank\">\n          KyoungAh\n        </a>\n        , All rights reserved.\n      </span>\n    </footer>\n  );\n}\n\nexport { Footer };\n","import type { PropsWithChildren } from \"react\";\n\nimport { Header } from \"../header\";\nimport { Footer } from \"../footer\";\nimport { BasicLayout } from \"../basic-layout\";\n\nfunction DefaultLayout({ children }: PropsWithChildren) {\n  return (\n    <>\n      <Header />\n      <BasicLayout>{children}</BasicLayout>\n      <Footer />\n    </>\n  );\n}\n\nexport { DefaultLayout };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContainer = \"post-layout-module--post-layout-container--f40b5\";\nexport var postLayoutTitle = \"post-layout-module--post-layout-title--1c575\";","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n *   Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n *   Current components from the context.\n * @returns {MDXComponents}\n *   Additional components.\n *\n * @typedef Props\n *   Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n *   Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n *   Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n *   Current components.\n */\nexport function useMDXComponents(components) {\n  const contextComponents = React.useContext(MDXContext)\n\n  // Memoize to avoid unnecessary top-level context changes\n  return React.useMemo(\n    function () {\n      // Custom merge via a function prop\n      if (typeof components === 'function') {\n        return components(contextComponents)\n      }\n\n      return {...contextComponents, ...components}\n    },\n    [contextComponents, components]\n  )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n *   Properties.\n * @returns {JSX.Element}\n *   Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n  /** @type {Readonly<MDXComponents>} */\n  let allComponents\n\n  if (properties.disableParentContext) {\n    allComponents =\n      typeof properties.components === 'function'\n        ? properties.components(emptyComponents)\n        : properties.components || emptyComponents\n  } else {\n    allComponents = useMDXComponents(properties.components)\n  }\n\n  return React.createElement(\n    MDXContext.Provider,\n    {value: allComponents},\n    properties.children\n  )\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["_createMdxContent","props","_components","Object","assign","p","h2","img","ul","li","a","_provideComponents","components","React","src","alt","href","wrapper","MDXLayout","PostLayout","_ref","_data$mdx$frontmatter","_data$mdx","data","children","date","tags","title","mdx","frontmatter","_jsx","DefaultLayout","_jsxs","Container","className","postLayoutContainer","PostLayoutTitle","postLayoutTitle","PostLayoutDate","PostLayoutTags","PostLayoutContent","MDXProvider","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","postLayoutContentRoot","clsx","postLayoutDateRoot","postLayoutTags","Tags","map","tag","Link","to","Tag","postLayoutTitleRoot","ComposedTags","containerRoot","basicLayoutRoot","BasicLayout","about","headerLogo","headerNavigation","headerNavigationItem","headerNavigationItemLink","headerNavigationList","headerRoot","Header","srcSet","sizes","rel","target","footerRoot","Footer","_Fragment","emptyComponents","MDXContext","useMDXComponents","contextComponents","properties","allComponents","disableParentContext","Provider","value","r","e","t","f","n","Array","isArray","o","length","arguments"],"sourceRoot":""}