diff --git a/assets/js/215698ba.919d4861.js b/assets/js/215698ba.fbe16a1e.js
similarity index 97%
rename from assets/js/215698ba.919d4861.js
rename to assets/js/215698ba.fbe16a1e.js
index 2a6b1918..c7ecb6b9 100644
--- a/assets/js/215698ba.919d4861.js
+++ b/assets/js/215698ba.fbe16a1e.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[492],{8392:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>m,frontMatter:()=>i,metadata:()=>c,toc:()=>h});var o=n(7624),r=n(2172),s=n(1268),a=n(5388),l=n(1608);const i={title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","styled-components"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-12-02T00:00:00.000Z")},d="Theming Ignite",c={id:"recipes/Theming-StyledComponents",title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-StyledComponents.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-StyledComponents",permalink:"/docs/recipes/Theming-StyledComponents",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"styled-components",permalink:"/docs/tags/styled-components"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1728940271,formattedLastUpdatedAt:"Oct 14, 2024",frontMatter:{title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","styled-components"],last_update:{author:"Mark Rickert"},publish_date:"2024-12-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Theming Ignite with Emotion.js",permalink:"/docs/recipes/Theming-Emotion"},next:{title:"Theming Ignite with Unistyles",permalink:"/docs/recipes/Theming-Unistyles"}},u={},h=[{value:"Using
styled-components",id:"using-styled-components",level:2},{value:"1. Add
styled-components to your app:",id:"1-add-styled-components-to-your-app",level:3},{value:"2. Add the
ThemeProvider to your app:",id:"2-add-the-themeprovider-to-your-app",level:3},{value:"3. Create and use your first styled-component using the new theme:",id:"3-create-and-use-your-first-styled-component-using-the-new-theme",level:3},{value:"4. Tell
styled-components about the shape of your theme:",id:"4-tell-styled-components-about-the-shape-of-your-theme",level:3},{value:"Complete!",id:"complete",level:2}];function p(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,o.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,o.jsx)(t.code,{children:"styled-components"}),", ",(0,o.jsx)(t.code,{children:"emotion.js"})," and ",(0,o.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,o.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,o.jsxs)(t.h2,{id:"using-styled-components",children:["Using ",(0,o.jsx)(t.code,{children:"styled-components"})]}),"\n",(0,o.jsxs)(t.h3,{id:"1-add-styled-components-to-your-app",children:["1. Add ",(0,o.jsx)(t.code,{children:"styled-components"})," to your app:"]}),"\n",(0,o.jsxs)(s.c,{groupId:"operating-systems",children:[(0,o.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,o.jsx)(l.c,{language:"bash",children:"yarn add styled-components"})}),(0,o.jsx)(a.c,{value:"npm",label:"npm",children:(0,o.jsx)(l.c,{language:"bash",children:"npm install styled-components"})}),(0,o.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(l.c,{language:"bash",children:"pnpm install styled-components"})})]}),"\n",(0,o.jsxs)(t.h3,{id:"2-add-the-themeprovider-to-your-app",children:["2. Add the ",(0,o.jsx)(t.code,{children:"ThemeProvider"})," to your app:"]}),"\n",(0,o.jsxs)(t.p,{children:["Find and open the ",(0,o.jsx)(t.code,{children:"AppNavigator.tsx"})," file in your project and add the import:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:'import { ThemeProvider as StyledThemeProvider } from "styled-components";\n'})}),"\n",(0,o.jsx)(t.p,{children:"Add the following functional component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const StyledComponentsThemeProvider = (props: React.PropsWithChildren) => {\n const { theme } = useAppTheme();\n return
;\n};\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Add the new ",(0,o.jsx)(t.code,{children:"StyledComponentsThemeProvider"})," component just inside the ",(0,o.jsx)(t.code,{children:"
"})," component in the ",(0,o.jsx)(t.code,{children:"AppNavigator"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-diff",children:"return (\n \n+ \n \n \n \n+ \n \n);\n"})}),"\n",(0,o.jsx)(t.h3,{id:"3-create-and-use-your-first-styled-component-using-the-new-theme",children:"3. Create and use your first styled-component using the new theme:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'import styled from "styled-components/native";\n\nconst MyTextComponent = styled.Text`\n margin: 10px;\n color: ${({ theme }) => theme.colors.text};\n background-color: ${({ theme }) => theme.colors.background};\n`;\n\nexport const MyScreen = (props) => {\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n'})}),"\n",(0,o.jsxs)(t.h3,{id:"4-tell-styled-components-about-the-shape-of-your-theme",children:["4. Tell ",(0,o.jsx)(t.code,{children:"styled-components"})," about the shape of your theme:"]}),"\n",(0,o.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,o.jsx)(t.code,{children:"types"})," folder called ",(0,o.jsx)(t.code,{children:"styled-components.d.ts"})," with the following content:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'// Override DefaultTheme to get accurate typings for your project.\nimport type { Theme } from "app/theme";\nimport "styled-components";\nimport "styled-components/native";\n\ndeclare module "styled-components" {\n export interface DefaultTheme extends Theme {}\n}\n\ndeclare module "styled-components/native" {\n export interface DefaultTheme extends Theme {}\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,o.jsxs)(t.p,{children:["You can now use ",(0,o.jsx)(t.code,{children:"styled-components"})," integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function m(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var o=n(5456);const r={tabItem:"tabItem_Ymn6"};var s=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,o.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var o=n(1504),r=n(5456),s=n(3943),a=n(5592),l=n(5288),i=n(632),d=n(7128),c=n(1148);function u(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(n);return function(e){const t=(0,d.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i._M)(s),(0,o.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=h(e),[a,i]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:s}))),[d,u]=m({queryString:n,groupId:r}),[g,y]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,c.IN)(n);return[r,(0,o.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),f=(()=>{const e=d??g;return p({value:e,tabValues:s})?e:null})();(0,l.c)((()=>{f&&i(f)}),[f]);return{selectedValue:a,selectValue:(0,o.useCallback)((e=>{if(!p({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);i(e),u(e),y(e)}),[u,y,s]),tabValues:s}}var y=n(3664);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(7624);function x(e){let{className:t,block:n,selectedValue:o,selectValue:a,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.MV)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==o&&(d(t),a(r))},u=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>i.push(e),onKeyDown:u,onClick:c,...s,className:(0,r.c)("tabs__item",f.tabItem,s?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function j(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.c)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...e,...t}),(0,b.jsx)(v,{...e,...t})]})}function T(e){const t=(0,y.c)();return(0,b.jsx)(j,{...e,children:u(e.children)},String(t))}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[492],{8392:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>m,frontMatter:()=>i,metadata:()=>c,toc:()=>h});var o=n(7624),r=n(2172),s=n(1268),a=n(5388),l=n(1608);const i={title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","styled-components"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-10-02T00:00:00.000Z")},d="Theming Ignite",c={id:"recipes/Theming-StyledComponents",title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-StyledComponents.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-StyledComponents",permalink:"/docs/recipes/Theming-StyledComponents",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"styled-components",permalink:"/docs/tags/styled-components"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1730219098,formattedLastUpdatedAt:"Oct 29, 2024",frontMatter:{title:"Theming Ignite with styled-components",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","styled-components"],last_update:{author:"Mark Rickert"},publish_date:"2024-10-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Theming Ignite with Emotion.js",permalink:"/docs/recipes/Theming-Emotion"},next:{title:"Theming Ignite with Unistyles",permalink:"/docs/recipes/Theming-Unistyles"}},u={},h=[{value:"Using styled-components",id:"using-styled-components",level:2},{value:"1. Add styled-components to your app:",id:"1-add-styled-components-to-your-app",level:3},{value:"2. Add the ThemeProvider to your app:",id:"2-add-the-themeprovider-to-your-app",level:3},{value:"3. Create and use your first styled-component using the new theme:",id:"3-create-and-use-your-first-styled-component-using-the-new-theme",level:3},{value:"4. Tell styled-components about the shape of your theme:",id:"4-tell-styled-components-about-the-shape-of-your-theme",level:3},{value:"Complete!",id:"complete",level:2}];function p(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,o.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,o.jsx)(t.code,{children:"styled-components"}),", ",(0,o.jsx)(t.code,{children:"emotion.js"})," and ",(0,o.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,o.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,o.jsxs)(t.h2,{id:"using-styled-components",children:["Using ",(0,o.jsx)(t.code,{children:"styled-components"})]}),"\n",(0,o.jsxs)(t.h3,{id:"1-add-styled-components-to-your-app",children:["1. Add ",(0,o.jsx)(t.code,{children:"styled-components"})," to your app:"]}),"\n",(0,o.jsxs)(s.c,{groupId:"operating-systems",children:[(0,o.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,o.jsx)(l.c,{language:"bash",children:"yarn add styled-components"})}),(0,o.jsx)(a.c,{value:"npm",label:"npm",children:(0,o.jsx)(l.c,{language:"bash",children:"npm install styled-components"})}),(0,o.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(l.c,{language:"bash",children:"pnpm install styled-components"})})]}),"\n",(0,o.jsxs)(t.h3,{id:"2-add-the-themeprovider-to-your-app",children:["2. Add the ",(0,o.jsx)(t.code,{children:"ThemeProvider"})," to your app:"]}),"\n",(0,o.jsxs)(t.p,{children:["Find and open the ",(0,o.jsx)(t.code,{children:"AppNavigator.tsx"})," file in your project and add the import:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:'import { ThemeProvider as StyledThemeProvider } from "styled-components";\n'})}),"\n",(0,o.jsx)(t.p,{children:"Add the following functional component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const StyledComponentsThemeProvider = (props: React.PropsWithChildren) => {\n const { theme } = useAppTheme();\n return ;\n};\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Add the new ",(0,o.jsx)(t.code,{children:"StyledComponentsThemeProvider"})," component just inside the ",(0,o.jsx)(t.code,{children:""})," component in the ",(0,o.jsx)(t.code,{children:"AppNavigator"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-diff",children:"return (\n \n+ \n \n \n \n+ \n \n);\n"})}),"\n",(0,o.jsx)(t.h3,{id:"3-create-and-use-your-first-styled-component-using-the-new-theme",children:"3. Create and use your first styled-component using the new theme:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'import styled from "styled-components/native";\n\nconst MyTextComponent = styled.Text`\n margin: 10px;\n color: ${({ theme }) => theme.colors.text};\n background-color: ${({ theme }) => theme.colors.background};\n`;\n\nexport const MyScreen = (props) => {\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n'})}),"\n",(0,o.jsxs)(t.h3,{id:"4-tell-styled-components-about-the-shape-of-your-theme",children:["4. Tell ",(0,o.jsx)(t.code,{children:"styled-components"})," about the shape of your theme:"]}),"\n",(0,o.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,o.jsx)(t.code,{children:"types"})," folder called ",(0,o.jsx)(t.code,{children:"styled-components.d.ts"})," with the following content:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'// Override DefaultTheme to get accurate typings for your project.\nimport type { Theme } from "app/theme";\nimport "styled-components";\nimport "styled-components/native";\n\ndeclare module "styled-components" {\n export interface DefaultTheme extends Theme {}\n}\n\ndeclare module "styled-components/native" {\n export interface DefaultTheme extends Theme {}\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,o.jsxs)(t.p,{children:["You can now use ",(0,o.jsx)(t.code,{children:"styled-components"})," integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function m(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var o=n(5456);const r={tabItem:"tabItem_Ymn6"};var s=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,o.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var o=n(1504),r=n(5456),s=n(3943),a=n(5592),l=n(5288),i=n(632),d=n(7128),c=n(1148);function u(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(n);return function(e){const t=(0,d.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i._M)(s),(0,o.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=h(e),[a,i]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:s}))),[d,u]=m({queryString:n,groupId:r}),[g,y]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,c.IN)(n);return[r,(0,o.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),f=(()=>{const e=d??g;return p({value:e,tabValues:s})?e:null})();(0,l.c)((()=>{f&&i(f)}),[f]);return{selectedValue:a,selectValue:(0,o.useCallback)((e=>{if(!p({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);i(e),u(e),y(e)}),[u,y,s]),tabValues:s}}var y=n(3664);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(7624);function x(e){let{className:t,block:n,selectedValue:o,selectValue:a,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.MV)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==o&&(d(t),a(r))},u=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>i.push(e),onKeyDown:u,onClick:c,...s,className:(0,r.c)("tabs__item",f.tabItem,s?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function j(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.c)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...e,...t}),(0,b.jsx)(v,{...e,...t})]})}function T(e){const t=(0,y.c)();return(0,b.jsx)(j,{...e,children:u(e.children)},String(t))}}}]);
\ No newline at end of file
diff --git a/assets/js/76759531.0401f9a7.js b/assets/js/76759531.5ba16058.js
similarity index 97%
rename from assets/js/76759531.0401f9a7.js
rename to assets/js/76759531.5ba16058.js
index d0156298..3ddc97db 100644
--- a/assets/js/76759531.0401f9a7.js
+++ b/assets/js/76759531.5ba16058.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1016],{500:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var o=n(7624),r=n(2172),i=n(1268),a=n(5388),s=n(1608);const l={title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","emotion.js"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-12-02T00:00:00.000Z")},c="Theming Ignite",d={id:"recipes/Theming-Emotion",title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-Emotion.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-Emotion",permalink:"/docs/recipes/Theming-Emotion",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"emotion.js",permalink:"/docs/tags/emotion-js"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1728940271,formattedLastUpdatedAt:"Oct 14, 2024",frontMatter:{title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","emotion.js"],last_update:{author:"Mark Rickert"},publish_date:"2024-12-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Switch Between Expo Go and Expo CNG",permalink:"/docs/recipes/SwitchBetweenExpoGoCNG"},next:{title:"Theming Ignite with styled-components",permalink:"/docs/recipes/Theming-StyledComponents"}},u={},h=[{value:"Using Emotion",id:"using-emotion",level:2},{value:"1. Add Emotion to your app:",id:"1-add-emotion-to-your-app",level:3},{value:"2. Add the Emotion ThemeProvider",id:"2-add-the-emotion-themeprovider",level:3},{value:"3. Create and use your first Emotion component using the new theme:",id:"3-create-and-use-your-first-emotion-component-using-the-new-theme",level:3},{value:"4. Tell Emotion.js about the shape of your theme:",id:"4-tell-emotionjs-about-the-shape-of-your-theme",level:3},{value:"Complete!",id:"complete",level:2}];function m(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,o.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,o.jsx)(t.code,{children:"styled-components"}),", ",(0,o.jsx)(t.code,{children:"emotion.js"})," and ",(0,o.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,o.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,o.jsxs)(t.h2,{id:"using-emotion",children:["Using ",(0,o.jsx)(t.code,{children:"Emotion"})]}),"\n",(0,o.jsxs)(t.h3,{id:"1-add-emotion-to-your-app",children:["1. Add ",(0,o.jsx)(t.code,{children:"Emotion"})," to your app:"]}),"\n",(0,o.jsxs)(i.c,{groupId:"operating-systems",children:[(0,o.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,o.jsx)(s.c,{language:"bash",children:"yarn add @emotion/react @emotion/native"})}),(0,o.jsx)(a.c,{value:"npm",label:"npm",children:(0,o.jsx)(s.c,{language:"bash",children:"npm install @emotion/react @emotion/native"})}),(0,o.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(s.c,{language:"bash",children:"pnpm install @emotion/react @emotion/native"})})]}),"\n",(0,o.jsxs)(t.h3,{id:"2-add-the-emotion-themeprovider",children:["2. Add the Emotion ",(0,o.jsx)(t.code,{children:"ThemeProvider"})]}),"\n",(0,o.jsxs)(t.p,{children:["Find and open the ",(0,o.jsx)(t.code,{children:"AppNavigator.tsx"})," file in your project and add the import:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:'import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";\n'})}),"\n",(0,o.jsx)(t.p,{children:"Add the following functional component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {\n const { theme } = useAppTheme();\n return {props.children};\n};\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Add the new ",(0,o.jsx)(t.code,{children:"EmotionJSThemeProvider"})," component just inside the ",(0,o.jsx)(t.code,{children:""})," component in the ",(0,o.jsx)(t.code,{children:"AppNavigator"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-diff",children:"return (\n \n+ \n \n \n \n+ \n \n);\n"})}),"\n",(0,o.jsxs)(t.h3,{id:"3-create-and-use-your-first-emotion-component-using-the-new-theme",children:["3. Create and use your first ",(0,o.jsx)(t.code,{children:"Emotion"})," component using the new theme:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'import styled from "@emotion/native";\n\nconst MyTextComponent = styled.Text`\n margin: 10px;\n color: ${({ theme }) => theme.colors.text};\n background-color: ${({ theme }) => theme.colors.background};\n`;\n\nexport const MyScreen = (props) => {\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n'})}),"\n",(0,o.jsx)(t.h3,{id:"4-tell-emotionjs-about-the-shape-of-your-theme",children:"4. Tell Emotion.js about the shape of your theme:"}),"\n",(0,o.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,o.jsx)(t.code,{children:"types"})," folder called ",(0,o.jsx)(t.code,{children:"emotion.d.ts"})," with the following content:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'// Override Theme to get accurate typings for your project.\nimport type { Theme as AppTheme } from "app/theme";\nimport "@emotion/react";\n\ndeclare module "@emotion/react" {\n export interface Theme extends AppTheme {}\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,o.jsxs)(t.p,{children:["You can now use ",(0,o.jsx)(t.code,{children:"Emotion"})," integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function p(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var o=n(5456);const r={tabItem:"tabItem_Ymn6"};var i=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,o.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var o=n(1504),r=n(5456),i=n(3943),a=n(5592),s=n(5288),l=n(632),c=n(7128),d=n(1148);function u(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(n);return function(e){const t=(0,c.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._M)(i),(0,o.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(r.location.search);t.set(i,e),r.replace({...r.location,search:t.toString()})}),[i,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,i=h(e),[a,l]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:i}))),[c,u]=p({queryString:n,groupId:r}),[g,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,i]=(0,d.IN)(n);return[r,(0,o.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:r}),b=(()=>{const e=c??g;return m({value:e,tabValues:i})?e:null})();(0,s.c)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,o.useCallback)((e=>{if(!m({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,i]),tabValues:i}}var f=n(3664);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(7624);function v(e){let{className:t,block:n,selectedValue:o,selectValue:a,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.MV)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=s[n].value;r!==o&&(c(t),a(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...i,className:(0,r.c)("tabs__item",b.tabItem,i?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:r}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,x.jsxs)("div",{className:(0,r.c)("tabs-container",b.tabList),children:[(0,x.jsx)(v,{...e,...t}),(0,x.jsx)(j,{...e,...t})]})}function T(e){const t=(0,f.c)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1016],{500:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var o=n(7624),r=n(2172),i=n(1268),a=n(5388),s=n(1608);const l={title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","emotion.js"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-10-02T00:00:00.000Z")},c="Theming Ignite",d={id:"recipes/Theming-Emotion",title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-Emotion.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-Emotion",permalink:"/docs/recipes/Theming-Emotion",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"emotion.js",permalink:"/docs/tags/emotion-js"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1730219098,formattedLastUpdatedAt:"Oct 29, 2024",frontMatter:{title:"Theming Ignite with Emotion.js",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","emotion.js"],last_update:{author:"Mark Rickert"},publish_date:"2024-10-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Switch Between Expo Go and Expo CNG",permalink:"/docs/recipes/SwitchBetweenExpoGoCNG"},next:{title:"Theming Ignite with styled-components",permalink:"/docs/recipes/Theming-StyledComponents"}},u={},h=[{value:"Using Emotion",id:"using-emotion",level:2},{value:"1. Add Emotion to your app:",id:"1-add-emotion-to-your-app",level:3},{value:"2. Add the Emotion ThemeProvider",id:"2-add-the-emotion-themeprovider",level:3},{value:"3. Create and use your first Emotion component using the new theme:",id:"3-create-and-use-your-first-emotion-component-using-the-new-theme",level:3},{value:"4. Tell Emotion.js about the shape of your theme:",id:"4-tell-emotionjs-about-the-shape-of-your-theme",level:3},{value:"Complete!",id:"complete",level:2}];function m(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,o.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,o.jsx)(t.code,{children:"styled-components"}),", ",(0,o.jsx)(t.code,{children:"emotion.js"})," and ",(0,o.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,o.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,o.jsxs)(t.h2,{id:"using-emotion",children:["Using ",(0,o.jsx)(t.code,{children:"Emotion"})]}),"\n",(0,o.jsxs)(t.h3,{id:"1-add-emotion-to-your-app",children:["1. Add ",(0,o.jsx)(t.code,{children:"Emotion"})," to your app:"]}),"\n",(0,o.jsxs)(i.c,{groupId:"operating-systems",children:[(0,o.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,o.jsx)(s.c,{language:"bash",children:"yarn add @emotion/react @emotion/native"})}),(0,o.jsx)(a.c,{value:"npm",label:"npm",children:(0,o.jsx)(s.c,{language:"bash",children:"npm install @emotion/react @emotion/native"})}),(0,o.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(s.c,{language:"bash",children:"pnpm install @emotion/react @emotion/native"})})]}),"\n",(0,o.jsxs)(t.h3,{id:"2-add-the-emotion-themeprovider",children:["2. Add the Emotion ",(0,o.jsx)(t.code,{children:"ThemeProvider"})]}),"\n",(0,o.jsxs)(t.p,{children:["Find and open the ",(0,o.jsx)(t.code,{children:"AppNavigator.tsx"})," file in your project and add the import:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:'import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";\n'})}),"\n",(0,o.jsx)(t.p,{children:"Add the following functional component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {\n const { theme } = useAppTheme();\n return {props.children};\n};\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Add the new ",(0,o.jsx)(t.code,{children:"EmotionJSThemeProvider"})," component just inside the ",(0,o.jsx)(t.code,{children:""})," component in the ",(0,o.jsx)(t.code,{children:"AppNavigator"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-diff",children:"return (\n \n+ \n \n \n \n+ \n \n);\n"})}),"\n",(0,o.jsxs)(t.h3,{id:"3-create-and-use-your-first-emotion-component-using-the-new-theme",children:["3. Create and use your first ",(0,o.jsx)(t.code,{children:"Emotion"})," component using the new theme:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'import styled from "@emotion/native";\n\nconst MyTextComponent = styled.Text`\n margin: 10px;\n color: ${({ theme }) => theme.colors.text};\n background-color: ${({ theme }) => theme.colors.background};\n`;\n\nexport const MyScreen = (props) => {\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n'})}),"\n",(0,o.jsx)(t.h3,{id:"4-tell-emotionjs-about-the-shape-of-your-theme",children:"4. Tell Emotion.js about the shape of your theme:"}),"\n",(0,o.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,o.jsx)(t.code,{children:"types"})," folder called ",(0,o.jsx)(t.code,{children:"emotion.d.ts"})," with the following content:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'// Override Theme to get accurate typings for your project.\nimport type { Theme as AppTheme } from "app/theme";\nimport "@emotion/react";\n\ndeclare module "@emotion/react" {\n export interface Theme extends AppTheme {}\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,o.jsxs)(t.p,{children:["You can now use ",(0,o.jsx)(t.code,{children:"Emotion"})," integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function p(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var o=n(5456);const r={tabItem:"tabItem_Ymn6"};var i=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,o.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var o=n(1504),r=n(5456),i=n(3943),a=n(5592),s=n(5288),l=n(632),c=n(7128),d=n(1148);function u(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(n);return function(e){const t=(0,c.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._M)(i),(0,o.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(r.location.search);t.set(i,e),r.replace({...r.location,search:t.toString()})}),[i,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,i=h(e),[a,l]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:i}))),[c,u]=p({queryString:n,groupId:r}),[g,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,i]=(0,d.IN)(n);return[r,(0,o.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:r}),b=(()=>{const e=c??g;return m({value:e,tabValues:i})?e:null})();(0,s.c)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,o.useCallback)((e=>{if(!m({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,i]),tabValues:i}}var f=n(3664);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(7624);function v(e){let{className:t,block:n,selectedValue:o,selectValue:a,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.MV)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=s[n].value;r!==o&&(c(t),a(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...i,className:(0,r.c)("tabs__item",b.tabItem,i?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:r}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,x.jsxs)("div",{className:(0,r.c)("tabs-container",b.tabList),children:[(0,x.jsx)(v,{...e,...t}),(0,x.jsx)(j,{...e,...t})]})}function T(e){const t=(0,f.c)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}}}]);
\ No newline at end of file
diff --git a/assets/js/9ec24567.c8293750.js b/assets/js/9ec24567.4a5f31fb.js
similarity index 98%
rename from assets/js/9ec24567.c8293750.js
rename to assets/js/9ec24567.4a5f31fb.js
index 09ee2885..898ddcc2 100644
--- a/assets/js/9ec24567.c8293750.js
+++ b/assets/js/9ec24567.4a5f31fb.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[7136],{900:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>u,toc:()=>h});var s=n(7624),r=n(2172),i=n(1268),a=n(5388),l=n(1608);const o={title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","unistyles"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-12-02T00:00:00.000Z")},c="Theming Ignite",u={id:"recipes/Theming-Unistyles",title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-Unistyles.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-Unistyles",permalink:"/docs/recipes/Theming-Unistyles",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"unistyles",permalink:"/docs/tags/unistyles"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1728940271,formattedLastUpdatedAt:"Oct 14, 2024",frontMatter:{title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","unistyles"],last_update:{author:"Mark Rickert"},publish_date:"2024-12-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Theming Ignite with styled-components",permalink:"/docs/recipes/Theming-StyledComponents"},next:{title:"TypeScript baseUrl Configuration",permalink:"/docs/recipes/TypeScriptBaseURL"}},d={},h=[{value:"Using Unistyles",id:"using-unistyles",level:2},{value:"1. Add react-native-unistyles to your app:",id:"1-add-react-native-unistyles-to-your-app",level:3},{value:"2. Add define Unistyles theme types:",id:"2-add-define-unistyles-theme-types",level:3},{value:"3. Configure unistyles to use the app's Theme:",id:"3-configure-unistyles-to-use-the-apps-theme",level:3},{value:"4. Ensure that Unistyles knows when we want to change the theme:",id:"4-ensure-that-unistyles-knows-when-we-want-to-change-the-theme",level:3},{value:"5. Create and use your first Unistyles component using the new theme:",id:"5-create-and-use-your-first-unistyles-component-using-the-new-theme",level:3},{value:"Complete!",id:"complete",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,s.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,s.jsx)(t.code,{children:"styled-components"}),", ",(0,s.jsx)(t.code,{children:"emotion.js"})," and ",(0,s.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,s.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,s.jsxs)(t.h2,{id:"using-unistyles",children:["Using ",(0,s.jsx)(t.code,{children:"Unistyles"})]}),"\n",(0,s.jsxs)(t.admonition,{type:"warning",children:[(0,s.jsx)(t.p,{children:"Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app."}),(0,s.jsxs)(t.p,{children:["To do this with an newly ignited app, run ",(0,s.jsx)(t.code,{children:"yarn prebuild:clean"})," and then ",(0,s.jsx)(t.code,{children:"yarn start"}),"."]})]}),"\n",(0,s.jsxs)(t.h3,{id:"1-add-react-native-unistyles-to-your-app",children:["1. Add ",(0,s.jsx)(t.code,{children:"react-native-unistyles"})," to your app:"]}),"\n",(0,s.jsxs)(i.c,{groupId:"operating-systems",children:[(0,s.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,s.jsx)(l.c,{language:"bash",children:"yarn add react-native-unistyles"})}),(0,s.jsx)(a.c,{value:"npm",label:"npm",children:(0,s.jsx)(l.c,{language:"bash",children:"npm install react-native-unistyles"})}),(0,s.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(l.c,{language:"bash",children:"pnpm install react-native-unistyles"})})]}),"\n",(0,s.jsx)(t.h3,{id:"2-add-define-unistyles-theme-types",children:"2. Add define Unistyles theme types:"}),"\n",(0,s.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,s.jsx)(t.code,{children:"types"})," folder called ",(0,s.jsx)(t.code,{children:"react-native-unistyles.d.ts"})," with the following content:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'// Override UnistylesThemes to get accurate typings for your project.\nimport type { Theme } from "app/theme";\nimport "react-native-unistyles";\n\ntype AppThemes = {\n light: Theme;\n dark: Theme;\n};\n\ndeclare module "react-native-unistyles" {\n export interface UnistylesThemes extends AppThemes {}\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"3-configure-unistyles-to-use-the-apps-theme",children:"3. Configure unistyles to use the app's Theme:"}),"\n",(0,s.jsxs)(t.p,{children:["Add the following to your app's ",(0,s.jsx)(t.code,{children:"app/App.tsx"}),":"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-diff",children:'+import { UnistylesRegistry } from "react-native-unistyles"\n+import { darkTheme, lightTheme } from "app/theme"\n\nSplashScreen.preventAutoHideAsync()\n\n+UnistylesRegistry.addThemes({\n+ light: lightTheme,\n+ dark: darkTheme,\n+}).addConfig({\n+ // adaptiveThemes: true,\n+ initialTheme: "light",\n+})\n+\n\nfunction IgniteApp() {\n return \n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"4-ensure-that-unistyles-knows-when-we-want-to-change-the-theme",children:"4. Ensure that Unistyles knows when we want to change the theme:"}),"\n",(0,s.jsxs)(t.p,{children:["Open the ",(0,s.jsx)(t.code,{children:"app/utils/useAppTheme.ts"})," and make the following changes:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-diff",children:' const setThemeContextOverride = useCallback((newTheme: ThemeContexts) => {\n setTheme(newTheme)\n+ UnistylesRuntime.setTheme(newTheme || "light")\n }, [])\n'})}),"\n",(0,s.jsx)(t.h3,{id:"5-create-and-use-your-first-unistyles-component-using-the-new-theme",children:"5. Create and use your first Unistyles component using the new theme:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'import { createStyleSheet, useStyles } from "react-native-unistyles";\n\nexport const MyScreen = (props) => {\n const { styles } = useStyles($uniStyles);\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n\nconst $uniStyles = createStyleSheet((theme) => ({\n text: {\n color: theme.colors.text,\n backgroundColor: theme.colors.background,\n },\n}));\n'})}),"\n",(0,s.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,s.jsx)(t.p,{children:"You can now use Unistyles integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function m(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var s=n(5456);const r={tabItem:"tabItem_Ymn6"};var i=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var s=n(1504),r=n(5456),i=n(3943),a=n(5592),l=n(5288),o=n(632),c=n(7128),u=n(1148);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o._M)(i),(0,s.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(r.location.search);t.set(i,e),r.replace({...r.location,search:t.toString()})}),[i,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,i=h(e),[a,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:i}))),[c,d]=m({queryString:n,groupId:r}),[g,y]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,i]=(0,u.IN)(n);return[r,(0,s.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:r}),f=(()=>{const e=c??g;return p({value:e,tabValues:i})?e:null})();(0,l.c)((()=>{f&&o(f)}),[f]);return{selectedValue:a,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),y(e)}),[d,y,i]),tabValues:i}}var y=n(3664);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(7624);function x(e){let{className:t,block:n,selectedValue:s,selectValue:a,tabValues:l}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.MV)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=l[n].value;r!==s&&(c(t),a(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>o.push(e),onKeyDown:d,onClick:u,...i,className:(0,r.c)("tabs__item",f.tabItem,i?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.c)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...e,...t}),(0,b.jsx)(v,{...e,...t})]})}function T(e){const t=(0,y.c)();return(0,b.jsx)(w,{...e,children:d(e.children)},String(t))}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[7136],{900:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>u,toc:()=>h});var s=n(7624),r=n(2172),i=n(1268),a=n(5388),l=n(1608);const o={title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","unistyles"],last_update:{author:"Mark Rickert"},publish_date:new Date("2024-10-02T00:00:00.000Z")},c="Theming Ignite",u={id:"recipes/Theming-Unistyles",title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",source:"@site/docs/recipes/Theming-Unistyles.mdx",sourceDirName:"recipes",slug:"/recipes/Theming-Unistyles",permalink:"/docs/recipes/Theming-Unistyles",draft:!1,unlisted:!1,tags:[{label:"Theming",permalink:"/docs/tags/theming"},{label:"iOS",permalink:"/docs/tags/i-os"},{label:"Android",permalink:"/docs/tags/android"},{label:"colors",permalink:"/docs/tags/colors"},{label:"darkmode",permalink:"/docs/tags/darkmode"},{label:"unistyles",permalink:"/docs/tags/unistyles"}],version:"current",lastUpdatedBy:"Mark Rickert",lastUpdatedAt:1730219098,formattedLastUpdatedAt:"Oct 29, 2024",frontMatter:{title:"Theming Ignite with Unistyles",description:"Learn how to use different styling libraries to theme your Ignited app!",tags:["Theming","iOS","Android","colors","darkmode","unistyles"],last_update:{author:"Mark Rickert"},publish_date:"2024-10-02T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Theming Ignite with styled-components",permalink:"/docs/recipes/Theming-StyledComponents"},next:{title:"TypeScript baseUrl Configuration",permalink:"/docs/recipes/TypeScriptBaseURL"}},d={},h=[{value:"Using Unistyles",id:"using-unistyles",level:2},{value:"1. Add react-native-unistyles to your app:",id:"1-add-react-native-unistyles-to-your-app",level:3},{value:"2. Add define Unistyles theme types:",id:"2-add-define-unistyles-theme-types",level:3},{value:"3. Configure unistyles to use the app's Theme:",id:"3-configure-unistyles-to-use-the-apps-theme",level:3},{value:"4. Ensure that Unistyles knows when we want to change the theme:",id:"4-ensure-that-unistyles-knows-when-we-want-to-change-the-theme",level:3},{value:"5. Create and use your first Unistyles component using the new theme:",id:"5-create-and-use-your-first-unistyles-component-using-the-new-theme",level:3},{value:"Complete!",id:"complete",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"theming-ignite",children:"Theming Ignite"}),"\n",(0,s.jsxs)(t.p,{children:["When it comes to styling we acknowledge the popularity and effectiveness of libraries like ",(0,s.jsx)(t.code,{children:"styled-components"}),", ",(0,s.jsx)(t.code,{children:"emotion.js"})," and ",(0,s.jsx)(t.code,{children:"unistyles"}),". Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements."]}),"\n",(0,s.jsx)(t.p,{children:"The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application."}),"\n",(0,s.jsxs)(t.h2,{id:"using-unistyles",children:["Using ",(0,s.jsx)(t.code,{children:"Unistyles"})]}),"\n",(0,s.jsxs)(t.admonition,{type:"warning",children:[(0,s.jsx)(t.p,{children:"Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app."}),(0,s.jsxs)(t.p,{children:["To do this with an newly ignited app, run ",(0,s.jsx)(t.code,{children:"yarn prebuild:clean"})," and then ",(0,s.jsx)(t.code,{children:"yarn start"}),"."]})]}),"\n",(0,s.jsxs)(t.h3,{id:"1-add-react-native-unistyles-to-your-app",children:["1. Add ",(0,s.jsx)(t.code,{children:"react-native-unistyles"})," to your app:"]}),"\n",(0,s.jsxs)(i.c,{groupId:"operating-systems",children:[(0,s.jsx)(a.c,{value:"yarn",label:"Yarn",children:(0,s.jsx)(l.c,{language:"bash",children:"yarn add react-native-unistyles"})}),(0,s.jsx)(a.c,{value:"npm",label:"npm",children:(0,s.jsx)(l.c,{language:"bash",children:"npm install react-native-unistyles"})}),(0,s.jsx)(a.c,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(l.c,{language:"bash",children:"pnpm install react-native-unistyles"})})]}),"\n",(0,s.jsx)(t.h3,{id:"2-add-define-unistyles-theme-types",children:"2. Add define Unistyles theme types:"}),"\n",(0,s.jsxs)(t.p,{children:["Create a new file in you Ignited app's ",(0,s.jsx)(t.code,{children:"types"})," folder called ",(0,s.jsx)(t.code,{children:"react-native-unistyles.d.ts"})," with the following content:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'// Override UnistylesThemes to get accurate typings for your project.\nimport type { Theme } from "app/theme";\nimport "react-native-unistyles";\n\ntype AppThemes = {\n light: Theme;\n dark: Theme;\n};\n\ndeclare module "react-native-unistyles" {\n export interface UnistylesThemes extends AppThemes {}\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"3-configure-unistyles-to-use-the-apps-theme",children:"3. Configure unistyles to use the app's Theme:"}),"\n",(0,s.jsxs)(t.p,{children:["Add the following to your app's ",(0,s.jsx)(t.code,{children:"app/App.tsx"}),":"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-diff",children:'+import { UnistylesRegistry } from "react-native-unistyles"\n+import { darkTheme, lightTheme } from "app/theme"\n\nSplashScreen.preventAutoHideAsync()\n\n+UnistylesRegistry.addThemes({\n+ light: lightTheme,\n+ dark: darkTheme,\n+}).addConfig({\n+ // adaptiveThemes: true,\n+ initialTheme: "light",\n+})\n+\n\nfunction IgniteApp() {\n return \n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"4-ensure-that-unistyles-knows-when-we-want-to-change-the-theme",children:"4. Ensure that Unistyles knows when we want to change the theme:"}),"\n",(0,s.jsxs)(t.p,{children:["Open the ",(0,s.jsx)(t.code,{children:"app/utils/useAppTheme.ts"})," and make the following changes:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-diff",children:' const setThemeContextOverride = useCallback((newTheme: ThemeContexts) => {\n setTheme(newTheme)\n+ UnistylesRuntime.setTheme(newTheme || "light")\n }, [])\n'})}),"\n",(0,s.jsx)(t.h3,{id:"5-create-and-use-your-first-unistyles-component-using-the-new-theme",children:"5. Create and use your first Unistyles component using the new theme:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'import { createStyleSheet, useStyles } from "react-native-unistyles";\n\nexport const MyScreen = (props) => {\n const { styles } = useStyles($uniStyles);\n return (\n \n This text color and background will change when changing themes.\n \n );\n};\n\nconst $uniStyles = createStyleSheet((theme) => ({\n text: {\n color: theme.colors.text,\n backgroundColor: theme.colors.background,\n },\n}));\n'})}),"\n",(0,s.jsx)(t.h2,{id:"complete",children:"Complete!"}),"\n",(0,s.jsx)(t.p,{children:"You can now use Unistyles integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:'const { setThemeContextOverride, themeContext } = useAppTheme();\n\nreturn (\n {\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition\n setThemeContextOverride(themeContext === "dark" ? "light" : "dark");\n }}\n text={`Switch Theme: ${themeContext}`}\n />\n);\n'})})]})}function m(e={}){const{wrapper:t}={...(0,r.M)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},5388:(e,t,n)=>{n.d(t,{c:()=>a});n(1504);var s=n(5456);const r={tabItem:"tabItem_Ymn6"};var i=n(7624);function a(e){let{children:t,hidden:n,className:a}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.c)(r.tabItem,a),hidden:n,children:t})}},1268:(e,t,n)=>{n.d(t,{c:()=>T});var s=n(1504),r=n(5456),i=n(3943),a=n(5592),l=n(5288),o=n(632),c=n(7128),u=n(1148);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.w)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,a.Uz)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o._M)(i),(0,s.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(r.location.search);t.set(i,e),r.replace({...r.location,search:t.toString()})}),[i,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,i=h(e),[a,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:i}))),[c,d]=m({queryString:n,groupId:r}),[g,y]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,i]=(0,u.IN)(n);return[r,(0,s.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:r}),f=(()=>{const e=c??g;return p({value:e,tabValues:i})?e:null})();(0,l.c)((()=>{f&&o(f)}),[f]);return{selectedValue:a,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),y(e)}),[d,y,i]),tabValues:i}}var y=n(3664);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(7624);function x(e){let{className:t,block:n,selectedValue:s,selectValue:a,tabValues:l}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.MV)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=l[n].value;r!==s&&(c(t),a(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.c)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>o.push(e),onKeyDown:d,onClick:u,...i,className:(0,r.c)("tabs__item",f.tabItem,i?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.c)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...e,...t}),(0,b.jsx)(v,{...e,...t})]})}function T(e){const t=(0,y.c)();return(0,b.jsx)(w,{...e,children:d(e.children)},String(t))}}}]);
\ No newline at end of file
diff --git a/assets/js/main.5d1b389f.js b/assets/js/main.5d1b389f.js
deleted file mode 100644
index 4b99e7f4..00000000
--- a/assets/js/main.5d1b389f.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see main.5d1b389f.js.LICENSE.txt */
-(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1590],{5052:(e,n,t)=>{"use strict";t.d(n,{I:()=>o});var r=t(1504);function o(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},628:(e,n,t)=>{"use strict";t.d(n,{c:()=>p});t(1504);var r=t(8852),o=t.n(r),a=t(4504);const s={"03224537":[()=>t.e(5284).then(t.bind(t,4024)),"@site/docs/recipes/DetoxIntro.md",4024],"04c3832a":[()=>t.e(7920).then(t.t.bind(t,780,19)),"~docs/default/tag-docs-tags-icons-a4b.json",780],"0825c398":[()=>t.e(5524).then(t.t.bind(t,5708,19)),"~docs/default/tag-docs-tags-backend-b17.json",5708],"08a54ed9":[()=>t.e(5156).then(t.t.bind(t,1128,19)),"~docs/default/tag-docs-tags-expo-updates-8e6.json",1128],"0e384e19":[()=>t.e(6328).then(t.bind(t,9404)),"@site/docs/intro.md",9404],"145425bc":[()=>t.e(16).then(t.bind(t,9856)),"@site/docs/recipes/AccessibilityFontSizes.md",9856],17896441:[()=>Promise.all([t.e(2176),t.e(7656),t.e(8908),t.e(6752)]).then(t.bind(t,8552)),"@theme/DocItem",8552],"18d888f3":[()=>t.e(5640).then(t.t.bind(t,9584,19)),"~docs/default/tag-docs-tags-state-management-fd9.json",9584],"199ff765":[()=>t.e(8368).then(t.t.bind(t,2520,19)),"~docs/default/tag-docs-tags-offline-support-d09.json",2520],"19d620af":[()=>t.e(3966).then(t.t.bind(t,5568,19)),"~docs/default/tag-docs-tags-ui-22c.json",5568],"1a4e3797":[()=>Promise.all([t.e(2176),t.e(9648)]).then(t.bind(t,3416)),"@theme/SearchPage",3416],"1ab29606":[()=>t.e(6928).then(t.t.bind(t,7704,19)),"~docs/default/tag-docs-tags-apisauce-8de.json",7704],"1c9ea255":[()=>t.e(8636).then(t.bind(t,620)),"@site/docs/recipes/TypeScriptBaseURL.md",620],"1df93b7f":[()=>Promise.all([t.e(2176),t.e(2096),t.e(8552)]).then(t.bind(t,9184)),"@site/src/pages/index.tsx",9184],"1fdec661":[()=>t.e(1904).then(t.t.bind(t,318,19)),"~docs/default/tag-docs-tags-cache-b57.json",318],"215698ba":[()=>Promise.all([t.e(2176),t.e(7656),t.e(492)]).then(t.bind(t,8392)),"@site/docs/recipes/Theming-StyledComponents.mdx",8392],"24a07a83":[()=>t.e(4424).then(t.t.bind(t,4136,19)),"~docs/default/tag-docs-tags-generator-e43.json",4136],"24c3776a":[()=>t.e(9828).then(t.bind(t,176)),"@site/docs/recipes/DistributingAuthTokenToAPI.md",176],"30b0babe":[()=>t.e(2816).then(t.t.bind(t,8464,19)),"~docs/default/tag-docs-tags-emotion-js-844.json",8464],"3192f89a":[()=>t.e(4992).then(t.t.bind(t,590,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],"31ac2bc7":[()=>t.e(9632).then(t.t.bind(t,9010,19)),"~docs/default/tag-docs-tags-cng-585.json",9010],"33f24359":[()=>t.e(222).then(t.t.bind(t,1592,19)),"~docs/default/tag-docs-tags-eas-update-bce.json",1592],"3663082a":[()=>t.e(5592).then(t.t.bind(t,6944,19)),"~docs/default/tag-docs-tags-data-synchronization-126.json",6944],"3720c009":[()=>Promise.all([t.e(2176),t.e(4492)]).then(t.bind(t,2808)),"@theme/DocTagsListPage",2808],"37e9da98":[()=>t.e(3800).then(t.t.bind(t,4496,19)),"~docs/default/tag-docs-tags-styled-components-6ef.json",4496],"3bb7a4af":[()=>t.e(2008).then(t.t.bind(t,7264,19)),"~docs/default/tag-docs-tags-i-os-d44.json",7264],"4699e3bd":[()=>t.e(8440).then(t.t.bind(t,680,19)),"~docs/default/tag-docs-tags-vector-icons-80f.json",680],"47a03c7f":[()=>t.e(3336).then(t.t.bind(t,7536,19)),"~docs/default/tag-docs-tags-testing-194.json",7536],"47c232e1":[()=>t.e(784).then(t.t.bind(t,6930,19)),"~docs/default/tag-docs-tags-supabase-1d9.json",6930],"4890b90f":[()=>t.e(6728).then(t.bind(t,2292)),"@site/docs/communityRecipes/index.md",2292],"4a4fb967":[()=>t.e(6756).then(t.t.bind(t,9056,19)),"~docs/default/tag-docs-tags-accessibility-83c.json",9056],"4e09609f":[()=>t.e(3128).then(t.bind(t,8220)),"@site/docs/recipes/SampleYAMLCircleCI.md",8220],"51658ad1":[()=>t.e(9576).then(t.t.bind(t,5752,19)),"~docs/default/tag-docs-tags-intro-ce4.json",5752],"51e76fb5":[()=>t.e(5064).then(t.bind(t,4488)),"@site/docs/recipes/MaestroSetup.md",4488],"51ea30c5":[()=>t.e(2324).then(t.t.bind(t,162,19)),"~docs/default/tag-docs-tags-mob-x-748.json",162],"52d269c5":[()=>t.e(5292).then(t.bind(t,9220)),"@site/docs/recipes/Authentication.md",9220],"54a9c7e8":[()=>t.e(8576).then(t.bind(t,2716)),"@site/docs/recipes/PrepForEASBuild.md",2716],"55960ee5":[()=>t.e(4296).then(t.t.bind(t,2416,19)),"~docs/default/tags-list-current-prop-15a.json",2416],"569bff92":[()=>t.e(5320).then(t.t.bind(t,2968,19)),"~docs/default/tag-docs-tags-hardware-92c.json",2968],"5e95c892":[()=>t.e(4304).then(t.bind(t,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(t.bind(t,7768)),"@generated/docusaurus.config",7768],"5fd7ef2e":[()=>t.e(656).then(t.bind(t,9044)),"@site/docs/recipes/LocalFirstDataWithPowerSync.md",9044],63181745:[()=>t.e(5548).then(t.bind(t,9108)),"@site/docs/recipes/UsingScreenReaders.md",9108],"6558e733":[()=>t.e(7338).then(t.t.bind(t,5440,19)),"~docs/default/tag-docs-tags-session-c44.json",5440],"657027a7":[()=>t.e(3180).then(t.bind(t,8232)),"@site/docs/recipes/MigratingToMMKV.md",8232],"6728e797":[()=>t.e(8616).then(t.t.bind(t,6824,19)),"~docs/default/tag-docs-tags-android-593.json",6824],"69dd30cd":[()=>t.e(4e3).then(t.t.bind(t,7672,19)),"~docs/default/tag-docs-tags-prettier-367.json",7672],"6c727604":[()=>t.e(7620).then(t.t.bind(t,7508,19)),"~docs/default/tag-docs-tags-login-6c7.json",7508],"6fd287af":[()=>t.e(4264).then(t.bind(t,9700)),"@site/docs/recipes/UpdatingIgnite.md",9700],"72dfd944":[()=>t.e(40).then(t.t.bind(t,8466,19)),"~docs/default/tag-docs-tags-text-field-8cc.json",8466],76759531:[()=>Promise.all([t.e(2176),t.e(7656),t.e(1016)]).then(t.bind(t,500)),"@site/docs/recipes/Theming-Emotion.mdx",500],"78a0b2f7":[()=>t.e(4224).then(t.bind(t,4068)),"@site/docs/recipes/SwitchBetweenExpoGoCNG.md",4068],"7acb6f50":[()=>t.e(56).then(t.t.bind(t,9200,19)),"~docs/default/tag-docs-tags-yarn-9bd.json",9200],"7b45617e":[()=>t.e(8436).then(t.bind(t,9368)),"@site/docs/recipes/GeneratorComponentTests.md",9368],"7f8cce85":[()=>t.e(4212).then(t.t.bind(t,2536,19)),"~docs/default/tag-docs-tags-power-sync-570.json",2536],82139467:[()=>t.e(7820).then(t.t.bind(t,5688,19)),"~docs/default/tag-docs-tags-react-native-vision-camera-af5.json",5688],"8b0d950b":[()=>t.e(3960).then(t.t.bind(t,4832,19)),"~docs/default/tag-docs-tags-dependencies-d4f.json",4832],"935f2afb":[()=>t.e(5696).then(t.t.bind(t,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"94ee064e":[()=>t.e(7300).then(t.t.bind(t,5683,19)),"~docs/default/tag-docs-tags-react-navigation-23c.json",5683],"954f316d":[()=>t.e(6044).then(t.t.bind(t,9272,19)),"~docs/default/tag-docs-tags-zustand-18e.json",9272],"985027d8":[()=>t.e(2160).then(t.t.bind(t,6843,19)),"~docs/default/tag-docs-tags-archive-6cf.json",6843],"99d16955":[()=>t.e(622).then(t.t.bind(t,5004,19)),"~docs/default/tag-docs-tags-eas-228.json",5004],"9b650fc1":[()=>t.e(9208).then(t.t.bind(t,4514,19)),"~docs/default/tag-docs-tags-colors-792.json",4514],"9dc0f37b":[()=>t.e(6704).then(t.t.bind(t,6154,19)),"~docs/default/tag-docs-tags-section-list-198.json",6154],"9ec24567":[()=>Promise.all([t.e(2176),t.e(7656),t.e(7136)]).then(t.bind(t,900)),"@site/docs/recipes/Theming-Unistyles.mdx",900],"9fc76e3d":[()=>t.e(900).then(t.bind(t,8468)),"@site/docs/recipes/EASUpdate.md",8468],a0d6a633:[()=>t.e(7732).then(t.t.bind(t,1284,19)),"~docs/default/tag-docs-tags-expo-dev-client-4bf.json",1284],a2f5d017:[()=>t.e(916).then(t.bind(t,3884)),"@site/docs/recipes/Redux.md",3884],a7bd4aaa:[()=>t.e(6500).then(t.bind(t,2e3)),"@theme/DocVersionRoot",2e3],a8646ade:[()=>t.e(3008).then(t.t.bind(t,1492,19)),"~docs/default/tag-docs-tags-mmkv-046.json",1492],a8f9d519:[()=>t.e(6216).then(t.t.bind(t,606,19)),"~docs/default/tag-docs-tags-scroll-to-8d4.json",606],a94703ab:[()=>Promise.all([t.e(2176),t.e(4666)]).then(t.bind(t,996)),"@theme/DocRoot",996],a951c726:[()=>t.e(8200).then(t.t.bind(t,7976,19)),"~docs/default/tag-docs-tags-ci-cd-ed9.json",7976],abaad534:[()=>t.e(2464).then(t.t.bind(t,4684,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",4684],abfb2977:[()=>t.e(2044).then(t.t.bind(t,6278,19)),"~docs/default/tag-docs-tags-database-1c7.json",6278],ad7b1610:[()=>t.e(3980).then(t.t.bind(t,6248,19)),"~docs/default/tag-docs-tags-community-0f9.json",6248],b33180cb:[()=>t.e(1528).then(t.bind(t,7160)),"@site/docs/archive/PristineExpoProject.md",7160],b3d1732c:[()=>t.e(95).then(t.t.bind(t,2464,19)),"~docs/default/tag-docs-tags-babel-ecc.json",2464],b3fb1bb5:[()=>t.e(4955).then(t.bind(t,3980)),"@site/docs/communityRecipes/CustomVectorIcons.md",3980],b6b5631c:[()=>t.e(9960).then(t.t.bind(t,9148,19)),"~docs/default/tag-docs-tags-theming-09d.json",9148],b747e1af:[()=>t.e(7556).then(t.t.bind(t,784,19)),"~docs/default/tag-docs-tags-signup-d75.json",784],b832b2ff:[()=>t.e(4822).then(t.t.bind(t,2962,19)),"~docs/default/tag-docs-tags-imports-63f.json",2962],b8c37621:[()=>t.e(2372).then(t.t.bind(t,4328,19)),"~docs/default/tag-docs-tags-guide-a32.json",4328],bbaf8084:[()=>t.e(4428).then(t.t.bind(t,5328,19)),"~docs/default/tag-docs-tags-darkmode-3d7.json",5328],bc1a59c9:[()=>t.e(5819).then(t.t.bind(t,5256,19)),"~docs/default/tag-docs-tags-reactotron-574.json",5256],c3e2f4d4:[()=>t.e(1264).then(t.bind(t,5800)),"@site/docs/recipes/UnrenderedItemInScrollView.md",5800],c47fa949:[()=>t.e(5032).then(t.bind(t,8332)),"@site/docs/recipes/ExpoRouter.md",8332],c5abe9fe:[()=>t.e(9607).then(t.t.bind(t,1344,19)),"~docs/default/tag-docs-tags-vision-camera-2ad.json",1344],c5ca3bf3:[()=>t.e(8872).then(t.t.bind(t,872,19)),"~docs/default/tag-docs-tags-expo-router-e61.json",872],c75b21fd:[()=>t.e(1412).then(t.bind(t,6188)),"@site/docs/recipes/RemoveMobxStateTree.md",6188],cc1d3934:[()=>t.e(8500).then(t.bind(t,5220)),"@site/docs/recipes/ReactNativeVisionCamera.md",5220],ccf3150e:[()=>t.e(7600).then(t.t.bind(t,3030,19)),"~docs/default/tag-docs-tags-ui-required-device-capabilities-7ff.json",3030],ce17b301:[()=>t.e(1388).then(t.t.bind(t,1540,19)),"~docs/default/tag-docs-tags-expo-4de.json",1540],cecd52bc:[()=>t.e(8).then(t.bind(t,6040)),"@site/docs/recipes/RequiringHardwareFeaturesWithExpo.md",6040],cf59a740:[()=>t.e(8780).then(t.t.bind(t,411,19)),"~docs/default/tag-docs-tags-react-native-b11.json",411],d01c4de2:[()=>t.e(7224).then(t.t.bind(t,488,19)),"~docs/default/tag-docs-tags-async-storage-da0.json",488],d0e08e4a:[()=>t.e(9016).then(t.bind(t,2980)),"@site/docs/recipes/PatchingBuildingAndroid.md",2980],d63d2b89:[()=>Promise.all([t.e(6432),t.e(5276)]).then(t.bind(t,6960)),"@site/docs/recipes/SelectFieldWithBottomSheet.mdx",6960],d699663a:[()=>t.e(1784).then(t.t.bind(t,5820,19)),"~docs/default/tag-docs-tags-uses-feature-818.json",5820],d6ab422f:[()=>t.e(8762).then(t.bind(t,7748)),"@site/docs/recipes/EnvironmentVariables.md",7748],d7af48b9:[()=>t.e(6264).then(t.bind(t,2508)),"@site/docs/recipes/EnforcingImportOrder.md",2508],da9277bc:[()=>t.e(5856).then(t.bind(t,1188)),"@site/docs/recipes/UpdatingDependencies.md",1188],dce6faa4:[()=>t.e(2596).then(t.t.bind(t,5892,19)),"~docs/default/tag-docs-tags-select-field-e86.json",5892],dd3340a6:[()=>t.e(7572).then(t.bind(t,8508)),"@site/docs/archive/index.md",8508],dec1aed8:[()=>t.e(9144).then(t.t.bind(t,4986,19)),"~docs/default/tag-docs-tags-maestro-a0f.json",4986],df203c0f:[()=>Promise.all([t.e(2176),t.e(3400)]).then(t.bind(t,8614)),"@theme/DocTagDocListPage",8614],e0854532:[()=>t.e(2288).then(t.t.bind(t,2456,19)),"~docs/default/tag-docs-tags-flat-list-bca.json",2456],e1b6b0a8:[()=>t.e(328).then(t.t.bind(t,2984,19)),"~docs/default/tag-docs-tags-debug-69b.json",2984],e2041b9b:[()=>t.e(7164).then(t.t.bind(t,9680,19)),"~docs/default/tag-docs-tags-redux-49b.json",9680],e2d058df:[()=>t.e(7706).then(t.t.bind(t,4196,19)),"~docs/default/tag-docs-tags-font-awesome-056.json",4196],e33e793e:[()=>t.e(5708).then(t.bind(t,3356)),"@site/docs/recipes/Zustand.md",3356],e7928ab4:[()=>t.e(6460).then(t.t.bind(t,2080,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],e965bea7:[()=>t.e(5576).then(t.bind(t,4492)),"@site/docs/recipes/ApolloClientCache.md",4492],eba20459:[()=>t.e(2928).then(t.t.bind(t,5736,19)),"~docs/default/tag-docs-tags-apollo-client-0ba.json",5736],ecce3b64:[()=>t.e(3324).then(t.t.bind(t,4640,19)),"~docs/default/tag-docs-tags-authentication-9a3.json",4640],ee0b98b5:[()=>t.e(6568).then(t.t.bind(t,1962,19)),"~docs/default/tag-docs-tags-unistyles-958.json",1962],f50f3884:[()=>t.e(1236).then(t.t.bind(t,9720,19)),"~docs/default/tag-docs-tags-prebuild-64b.json",9720],f523b160:[()=>t.e(3504).then(t.bind(t,2232)),"@site/docs/recipes/CreatingGreateExperienceForScreenReaders.md",2232],fd1937a7:[()=>t.e(4116).then(t.t.bind(t,7472,19)),"~docs/default/tag-docs-tags-environment-variables-3be.json",7472],fe9b09bf:[()=>t.e(140).then(t.bind(t,1204)),"@site/docs/recipes/CircleCIRNSetup.md",1204],ff2c7cca:[()=>t.e(6252).then(t.t.bind(t,2248,19)),"~docs/default/tag-docs-tags-type-script-6e5.json",2248],ffe4833d:[()=>t.e(9380).then(t.t.bind(t,570,19)),"~docs/default/tag-docs-tags-custom-commands-621.json",570]};var i=t(7624);function l(e){let{error:n,retry:t,pastDelay:r}=e;return n?(0,i.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,i.jsx)("p",{children:String(n)}),(0,i.jsx)("div",{children:(0,i.jsx)("button",{type:"button",onClick:t,children:"Retry"})})]}):r?(0,i.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,i.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,i.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,i.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,i.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,i.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,i.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,i.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,i.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=t(8120),u=t(5548);function d(e,n){if("*"===e)return o()({loading:l,loader:()=>t.e(4552).then(t.bind(t,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,n){const t=e.default;return(0,i.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,i.jsx)(t,{...n})})}});const r=a[`${e}-${n}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[n,t]=e;const r=s[t];r&&(d[n]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(n,t){const o=JSON.parse(JSON.stringify(r));Object.entries(n).forEach((n=>{let[t,r]=n;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let s=o;const i=t.split(".");i.slice(0,-1).forEach((e=>{s=s[e]})),s[i[i.length-1]]=a}));const a=o.__comp;delete o.__comp;const s=o.__context;return delete o.__context,(0,i.jsx)(u.Y,{value:s,children:(0,i.jsx)(a,{...o,...t})})}})}const p=[{path:"/search",component:d("/search","437"),exact:!0},{path:"/docs",component:d("/docs","3d8"),routes:[{path:"/docs",component:d("/docs","257"),routes:[{path:"/docs/tags",component:d("/docs/tags","0cc"),exact:!0},{path:"/docs/tags/accessibility",component:d("/docs/tags/accessibility","8aa"),exact:!0},{path:"/docs/tags/android",component:d("/docs/tags/android","e3a"),exact:!0},{path:"/docs/tags/apisauce",component:d("/docs/tags/apisauce","143"),exact:!0},{path:"/docs/tags/apollo-client",component:d("/docs/tags/apollo-client","ee0"),exact:!0},{path:"/docs/tags/archive",component:d("/docs/tags/archive","51b"),exact:!0},{path:"/docs/tags/async-storage",component:d("/docs/tags/async-storage","afc"),exact:!0},{path:"/docs/tags/authentication",component:d("/docs/tags/authentication","587"),exact:!0},{path:"/docs/tags/babel",component:d("/docs/tags/babel","e90"),exact:!0},{path:"/docs/tags/backend",component:d("/docs/tags/backend","908"),exact:!0},{path:"/docs/tags/cache",component:d("/docs/tags/cache","283"),exact:!0},{path:"/docs/tags/ci-cd",component:d("/docs/tags/ci-cd","56c"),exact:!0},{path:"/docs/tags/cng",component:d("/docs/tags/cng","581"),exact:!0},{path:"/docs/tags/colors",component:d("/docs/tags/colors","9a5"),exact:!0},{path:"/docs/tags/community",component:d("/docs/tags/community","de4"),exact:!0},{path:"/docs/tags/custom-commands",component:d("/docs/tags/custom-commands","269"),exact:!0},{path:"/docs/tags/darkmode",component:d("/docs/tags/darkmode","2b8"),exact:!0},{path:"/docs/tags/data-synchronization",component:d("/docs/tags/data-synchronization","453"),exact:!0},{path:"/docs/tags/database",component:d("/docs/tags/database","7e4"),exact:!0},{path:"/docs/tags/debug",component:d("/docs/tags/debug","888"),exact:!0},{path:"/docs/tags/dependencies",component:d("/docs/tags/dependencies","c34"),exact:!0},{path:"/docs/tags/eas",component:d("/docs/tags/eas","17a"),exact:!0},{path:"/docs/tags/eas-update",component:d("/docs/tags/eas-update","632"),exact:!0},{path:"/docs/tags/emotion-js",component:d("/docs/tags/emotion-js","a0a"),exact:!0},{path:"/docs/tags/environment-variables",component:d("/docs/tags/environment-variables","0f3"),exact:!0},{path:"/docs/tags/expo",component:d("/docs/tags/expo","a41"),exact:!0},{path:"/docs/tags/expo-dev-client",component:d("/docs/tags/expo-dev-client","0df"),exact:!0},{path:"/docs/tags/expo-router",component:d("/docs/tags/expo-router","257"),exact:!0},{path:"/docs/tags/expo-updates",component:d("/docs/tags/expo-updates","807"),exact:!0},{path:"/docs/tags/flat-list",component:d("/docs/tags/flat-list","5a7"),exact:!0},{path:"/docs/tags/font-awesome",component:d("/docs/tags/font-awesome","c23"),exact:!0},{path:"/docs/tags/generator",component:d("/docs/tags/generator","80e"),exact:!0},{path:"/docs/tags/guide",component:d("/docs/tags/guide","cea"),exact:!0},{path:"/docs/tags/hardware",component:d("/docs/tags/hardware","303"),exact:!0},{path:"/docs/tags/i-os",component:d("/docs/tags/i-os","96e"),exact:!0},{path:"/docs/tags/icons",component:d("/docs/tags/icons","3e5"),exact:!0},{path:"/docs/tags/imports",component:d("/docs/tags/imports","887"),exact:!0},{path:"/docs/tags/intro",component:d("/docs/tags/intro","b42"),exact:!0},{path:"/docs/tags/login",component:d("/docs/tags/login","a24"),exact:!0},{path:"/docs/tags/maestro",component:d("/docs/tags/maestro","034"),exact:!0},{path:"/docs/tags/mmkv",component:d("/docs/tags/mmkv","f7e"),exact:!0},{path:"/docs/tags/mob-x",component:d("/docs/tags/mob-x","a01"),exact:!0},{path:"/docs/tags/offline-support",component:d("/docs/tags/offline-support","6ec"),exact:!0},{path:"/docs/tags/power-sync",component:d("/docs/tags/power-sync","dca"),exact:!0},{path:"/docs/tags/prebuild",component:d("/docs/tags/prebuild","83d"),exact:!0},{path:"/docs/tags/prettier",component:d("/docs/tags/prettier","db7"),exact:!0},{path:"/docs/tags/react-native",component:d("/docs/tags/react-native","873"),exact:!0},{path:"/docs/tags/react-native-vision-camera",component:d("/docs/tags/react-native-vision-camera","ea0"),exact:!0},{path:"/docs/tags/react-navigation",component:d("/docs/tags/react-navigation","0ad"),exact:!0},{path:"/docs/tags/reactotron",component:d("/docs/tags/reactotron","cf3"),exact:!0},{path:"/docs/tags/redux",component:d("/docs/tags/redux","c5e"),exact:!0},{path:"/docs/tags/scroll-to",component:d("/docs/tags/scroll-to","f32"),exact:!0},{path:"/docs/tags/section-list",component:d("/docs/tags/section-list","8de"),exact:!0},{path:"/docs/tags/select-field",component:d("/docs/tags/select-field","5f4"),exact:!0},{path:"/docs/tags/session",component:d("/docs/tags/session","2f1"),exact:!0},{path:"/docs/tags/signup",component:d("/docs/tags/signup","c30"),exact:!0},{path:"/docs/tags/state-management",component:d("/docs/tags/state-management","181"),exact:!0},{path:"/docs/tags/styled-components",component:d("/docs/tags/styled-components","e53"),exact:!0},{path:"/docs/tags/supabase",component:d("/docs/tags/supabase","e10"),exact:!0},{path:"/docs/tags/testing",component:d("/docs/tags/testing","b53"),exact:!0},{path:"/docs/tags/text-field",component:d("/docs/tags/text-field","782"),exact:!0},{path:"/docs/tags/theming",component:d("/docs/tags/theming","bbf"),exact:!0},{path:"/docs/tags/type-script",component:d("/docs/tags/type-script","825"),exact:!0},{path:"/docs/tags/ui",component:d("/docs/tags/ui","020"),exact:!0},{path:"/docs/tags/ui-required-device-capabilities",component:d("/docs/tags/ui-required-device-capabilities","73a"),exact:!0},{path:"/docs/tags/unistyles",component:d("/docs/tags/unistyles","8aa"),exact:!0},{path:"/docs/tags/uses-feature",component:d("/docs/tags/uses-feature","f1a"),exact:!0},{path:"/docs/tags/vector-icons",component:d("/docs/tags/vector-icons","968"),exact:!0},{path:"/docs/tags/vision-camera",component:d("/docs/tags/vision-camera","e9b"),exact:!0},{path:"/docs/tags/yarn",component:d("/docs/tags/yarn","e4e"),exact:!0},{path:"/docs/tags/zustand",component:d("/docs/tags/zustand","24d"),exact:!0},{path:"/docs",component:d("/docs","548"),routes:[{path:"/docs/archive/",component:d("/docs/archive/","ab8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/archive/PristineExpoProject",component:d("/docs/archive/PristineExpoProject","afa"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/communityRecipes/",component:d("/docs/communityRecipes/","fc5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/communityRecipes/CustomVectorIcons",component:d("/docs/communityRecipes/CustomVectorIcons","b15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/intro",component:d("/docs/intro","194"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/AccessibilityFontSizes",component:d("/docs/recipes/AccessibilityFontSizes","872"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ApolloClientCache",component:d("/docs/recipes/ApolloClientCache","f38"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Authentication",component:d("/docs/recipes/Authentication","41e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CircleCIRNSetup",component:d("/docs/recipes/CircleCIRNSetup","ce2"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CreatingGreateExperienceForScreenReaders",component:d("/docs/recipes/CreatingGreateExperienceForScreenReaders","752"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DetoxIntro",component:d("/docs/recipes/DetoxIntro","700"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DistributingAuthTokenToAPI",component:d("/docs/recipes/DistributingAuthTokenToAPI","298"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EASUpdate",component:d("/docs/recipes/EASUpdate","938"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnforcingImportOrder",component:d("/docs/recipes/EnforcingImportOrder","713"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnvironmentVariables",component:d("/docs/recipes/EnvironmentVariables","92b"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ExpoRouter",component:d("/docs/recipes/ExpoRouter","0b5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/GeneratorComponentTests",component:d("/docs/recipes/GeneratorComponentTests","e55"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/LocalFirstDataWithPowerSync",component:d("/docs/recipes/LocalFirstDataWithPowerSync","9a4"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MaestroSetup",component:d("/docs/recipes/MaestroSetup","237"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MigratingToMMKV",component:d("/docs/recipes/MigratingToMMKV","9d0"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PatchingBuildingAndroid",component:d("/docs/recipes/PatchingBuildingAndroid","ac8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PrepForEASBuild",component:d("/docs/recipes/PrepForEASBuild","64a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ReactNativeVisionCamera",component:d("/docs/recipes/ReactNativeVisionCamera","e2e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Redux",component:d("/docs/recipes/Redux","0f8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RemoveMobxStateTree",component:d("/docs/recipes/RemoveMobxStateTree","50f"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RequiringHardwareFeaturesWithExpo",component:d("/docs/recipes/RequiringHardwareFeaturesWithExpo","2fd"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SampleYAMLCircleCI",component:d("/docs/recipes/SampleYAMLCircleCI","30a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SelectFieldWithBottomSheet",component:d("/docs/recipes/SelectFieldWithBottomSheet","ca3"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SwitchBetweenExpoGoCNG",component:d("/docs/recipes/SwitchBetweenExpoGoCNG","695"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Theming-Emotion",component:d("/docs/recipes/Theming-Emotion","715"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Theming-StyledComponents",component:d("/docs/recipes/Theming-StyledComponents","069"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Theming-Unistyles",component:d("/docs/recipes/Theming-Unistyles","905"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/TypeScriptBaseURL",component:d("/docs/recipes/TypeScriptBaseURL","986"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UnrenderedItemInScrollView",component:d("/docs/recipes/UnrenderedItemInScrollView","c15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingDependencies",component:d("/docs/recipes/UpdatingDependencies","21c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingIgnite",component:d("/docs/recipes/UpdatingIgnite","f0c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UsingScreenReaders",component:d("/docs/recipes/UsingScreenReaders","324"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Zustand",component:d("/docs/recipes/Zustand","0e1"),exact:!0,sidebar:"mainSidebar"}]}]}]},{path:"/",component:d("/","703"),exact:!0},{path:"*",component:d("*")}]},240:(e,n,t)=>{"use strict";t.d(n,{e:()=>a,g:()=>s});var r=t(1504),o=t(7624);const a=r.createContext(!1);function s(e){let{children:n}=e;const[t,s]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{s(!0)}),[]),(0,o.jsx)(a.Provider,{value:t,children:n})}},8808:(e,n,t)=>{"use strict";var r=t(1504),o=t(8352),a=t(440),s=t(2160),i=t(8684);const l=[t(7483),t(1462),t(5396),t(1976),t(9115)];var c=t(628),u=t(5592),d=t(5464),p=t(7624);function f(e){let{children:n}=e;return(0,p.jsx)(p.Fragment,{children:n})}var m=t(6952),g=t(8264),h=t(964),y=t(1824),b=t(5008),v=t(1616),S=t(204),w=t(4456),x=t(5684),k=t(8712);function T(){const{i18n:{currentLocale:e,defaultLocale:n,localeConfigs:t}}=(0,g.c)(),r=(0,v.D)(),o=t[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(t).map((e=>{let[n,{htmlLang:t}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:t},n)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(t).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:n}=e;const{siteConfig:{url:t}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:n,trailingSlash:t}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:t,baseUrl:n})}(),o=n?`${t}${n}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:n,image:t}=(0,y.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:S.m})]}),t&&(0,p.jsx)(b.U7,{image:t}),(0,p.jsx)(E,{}),(0,p.jsx)(T,{}),(0,p.jsx)(k.c,{tag:w.e6,locale:e}),(0,p.jsx)(m.c,{children:n.map(((e,n)=>(0,p.jsx)("meta",{...e},n)))})]})}const A=new Map;function _(e){if(A.has(e.pathname))return{...e,pathname:A.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:n}=e;return!0===n.exact})))return A.set(e.pathname,e.pathname),e;const n=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return A.set(e.pathname,n),{...e,pathname:n}}var I=t(240),P=t(136),R=t(5288);function L(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),r=1;r{const r=n.default?.[e]??n[e];return r?.(...t)}));return()=>o.forEach((e=>e?.()))}const O=function(e){let{children:n,location:t,previousLocation:r}=e;return(0,R.c)((()=>{r!==t&&(!function(e){let{location:n,previousLocation:t}=e;if(!t)return;const r=n.pathname===t.pathname,o=n.hash===t.hash,a=n.search===t.search;if(r&&o&&!a)return;const{hash:s}=n;if(s){const e=decodeURIComponent(s.substring(1)),n=document.getElementById(e);n?.scrollIntoView()}else window.scrollTo(0,0)}({location:t,previousLocation:r}),L("onRouteDidUpdate",{previousLocation:r,location:t}))}),[r,t]),n};function N(e){const n=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(n.map((e=>e.route.component.preload?.())))}class F extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=i.c.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,n){if(e.location===this.props.location)return n.nextRouteHasLoaded;const t=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:t}),N(t.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:n}=this.props;return(0,p.jsx)(O,{previousLocation:this.previousLocation,location:n,children:(0,p.jsx)(u.kX,{location:n,render:()=>e})})}}const j=F,M="__docusaurus-base-url-issue-banner-container",D="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function $(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n\n
Your Docusaurus site did not load properly.
\n
A very common reason is a wrong site baseUrl configuration.
\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n
Recipes
'},{position:"right",html:'Ignite Boilerplate
',to:"https://github.com/infinitered/ignite"},{position:"right",html:'Infinite Red
',to:"https://infinite.red"},{style:{marginRight:"0px"},type:"dropdown",html:' \n Community\n
\n
\n
\n Slack community\n
\n
\n
\n
Join a growing React Native community with 2,000 developers and counting.
\n
\n
\n
\n Submit an idea\n
\n
\n
\n
Have an recipe idea for the cookbook? Contribute your ideas on GitHub!
\n
\n
',style:"dark",links:[{title:"Community",items:[{html:''},{html:''},{html:''}]},{title:"Resources",items:[{html:''},{html:''},{html:''},{html:''},{html:''}]},{title:"Infinite Red",items:[{html:''},{html:''},{html:''}]}]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:["bash","ruby","json","ejs","diff","markup-templating"],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}},{className:"code-block-error-line",line:"error-line",block:{start:"error-line-start",end:"error-line-end"}},{className:"code-block-success-line",line:"success-line",block:{start:"success-line-start",end:"success-line-end"}}]},algolia:{appId:"MFHD60DIB5",apiKey:"4e924e740d603ec90f106067754ccf50",indexName:"ignite-cookbook",searchParameters:{},searchPagePath:"search",contextualSearch:!0},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},6404:(e,n,t)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;nr})},9948:(e,n,t)=>{"use strict";function r(e,n){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},r(e,n)}function o(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,r(e,n)}t.d(n,{c:()=>o})},4384:(e,n,t)=>{"use strict";function r(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r=0||(o[t]=e[t]);return o}t.d(n,{c:()=>r})},5456:(e,n,t)=>{"use strict";function r(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(n=0;no});const o=function(){for(var e,n,t=0,o="",a=arguments.length;t{"use strict";t.d(n,{gl:()=>ee,sp:()=>A});var r,o,a,s,i,l,c,u=t(1504),d=t(5456),p=Object.create,f=Object.defineProperty,m=Object.defineProperties,g=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,x=(e,n,t)=>n in e?f(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,k=(e,n)=>{for(var t in n||(n={}))S.call(n,t)&&x(e,t,n[t]);if(b)for(var t of b(n))w.call(n,t)&&x(e,t,n[t]);return e},T=(e,n)=>m(e,h(n)),E=(e,n)=>{var t={};for(var r in e)S.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&b)for(var r of b(e))n.indexOf(r)<0&&w.call(e,r)&&(t[r]=e[r]);return t},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,n){var t=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,n=0,t={},r={util:{encode:function e(n){return n instanceof o?new o(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=d.reach);k+=x.value.length,x=x.next){var T=x.value;if(n.length>e.length)return;if(!(T instanceof o)){var E,C=1;if(b){if(!(E=a(w,k,e,y))||E.index>=e.length)break;var A=E.index,_=E.index+E[0].length,I=k;for(I+=x.value.length;A>=I;)I+=(x=x.next).value.length;if(k=I-=x.value.length,x.value instanceof o)continue;for(var P=x;P!==n.tail&&(I<_||"string"==typeof P.value);P=P.next)C++,I+=P.value.length;C--,T=e.slice(k,I),E.index-=k}else if(!(E=a(w,0,T,y)))continue;A=E.index;var R=E[0],L=T.slice(0,A),O=T.slice(A+R.length),N=k+T.length;d&&N>d.reach&&(d.reach=N);var F=x.prev;if(L&&(F=l(n,F,L),k+=L.length),c(n,F,C),x=l(n,F,new o(p,h?r.tokenize(R,h):R,v,R)),O&&l(n,x,O),C>1){var j={cause:p+","+m,reach:N};s(e,n,t,x.prev,k,j),d&&j.reach>d.reach&&(d.reach=j.reach)}}}}}}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function l(e,n,t){var r=n.next,o={value:t,prev:n,next:r};return n.next=o,r.prev=o,e.length++,o}function c(e,n,t){for(var r=n.next,o=0;o"+a.content+""},r}();n.exports=t,t.default=t}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),A=((e,n,t)=>(t=null!=e?p(v(e)):{},((e,n,t,r)=>{if(n&&"object"==typeof n||"function"==typeof n)for(let o of y(n))S.call(e,o)||o===t||f(e,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return e})(!n&&e&&e.__esModule?t:f(t,"default",{value:e,enumerable:!0}),e)))(C());A.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},A.languages.markup.tag.inside["attr-value"].inside.entity=A.languages.markup.entity,A.languages.markup.doctype.inside["internal-subset"].inside=A.languages.markup,A.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(A.languages.markup.tag,"addInlined",{value:function(e,n){var t;(n=((t=((t={})["language-"+n]={pattern:/(^$)/i,lookbehind:!0,inside:A.languages[n]},t.cdata=/^$/i,{"included-cdata":{pattern://i,inside:t}}))["language-"+n]={pattern:/[\s\S]+/,inside:A.languages[n]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:t},A.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(A.languages.markup.tag,"addAttribute",{value:function(e,n){A.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[n,"language-"+n],inside:A.languages[n]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),A.languages.html=A.languages.markup,A.languages.mathml=A.languages.markup,A.languages.svg=A.languages.markup,A.languages.xml=A.languages.extend("markup",{}),A.languages.ssml=A.languages.xml,A.languages.atom=A.languages.xml,A.languages.rss=A.languages.xml,a=A,s={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(i=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:l,inside:{escape:i,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":s,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:i}},"special-escape":s,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:i,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},A.languages.javascript=A.languages.extend("clike",{"class-name":[A.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),A.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,A.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:A.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:A.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:A.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:A.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:A.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),A.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:A.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),A.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),A.languages.markup&&(A.languages.markup.tag.addInlined("script","javascript"),A.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),A.languages.js=A.languages.javascript,A.languages.actionscript=A.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),A.languages.actionscript["class-name"].alias="function",delete A.languages.actionscript.parameter,delete A.languages.actionscript["literal-property"],A.languages.markup&&A.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:A.languages.markup}}),function(e){var n=/#(?!\{).+/,t={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:n,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:t}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:n,interpolation:t}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:t}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(A),function(e){var n=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(n,"addSupport",{value:function(n,t){(n="string"==typeof n?[n]:n).forEach((function(n){var r=function(e){e.inside||(e.inside={}),e.inside.rest=t},o="doc-comment";if(a=e.languages[n]){var a,s=a[o];if((s=s||(a=e.languages.insertBefore(n,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(s=a[o]={pattern:s}),Array.isArray(s))for(var i=0,l=s.length;i|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=n,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:n,number:t,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:n,number:t})}(A),function(e){var n=/[*&][^\s[\]{},]+/,t=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+t.source+"(?:[ \t]+"+n.source+")?|"+n.source+"(?:[ \t]+"+t.source+")?)",o=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function s(e,n){n=(n||"").replace(/m/g,"")+"m";var t=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(t,n)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+o+"|"+a+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:s(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:s(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:s(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:s(a),lookbehind:!0,greedy:!0},number:{pattern:s(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:t,important:n,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(A),function(e){var n=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function t(e){return e=e.replace(//g,(function(){return n})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,s=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:t(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:t(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:t(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:t(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(n){["url","bold","italic","strike","code-snippet"].forEach((function(t){n!==t&&(e.languages.markdown[n].inside.content.inside[t]=e.languages.markdown[t])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(n){if(n&&"string"!=typeof n)for(var t=0,r=n.length;t",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(A),A.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:A.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},A.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var n=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),t=0;t?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var n=e.languages.javascript["template-string"],t=n.pattern.source,r=n.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function s(n,r){if(e.languages[n])return{pattern:RegExp("((?:"+r+")\\s*)"+t),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:n}}}}function i(n,t,r){return n={code:n,grammar:t,language:r},e.hooks.run("before-tokenize",n),n.tokens=e.tokenize(n.code,n.grammar),e.hooks.run("after-tokenize",n),n.tokens}function l(n,t,s){var l=e.tokenize(n,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=i(l.map((function(e){if("string"==typeof e)return e;var t,r;for(e=e.content;-1!==n.indexOf((r=c++,t="___"+s.toUpperCase()+"_"+r+"___")););return u[t]=e,t})).join(""),t,s),Object.keys(u));return c=0,function n(t){for(var a=0;a=d.length)return;var s,l,p,f,m,g,h,y=t[a];"string"==typeof y||"string"==typeof y.content?(s=d[c],-1!==(h=(g="string"==typeof y?y:y.content).indexOf(s))&&(++c,l=g.substring(0,h),m=u[s],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(m,f)).length&&((p=[1,1]).push.apply(p,i(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,m),f=g.substring(h+s.length),m=[],l&&m.push(l),m.push(p),f&&(n(g=[f]),m.push.apply(m,g)),"string"==typeof y?(t.splice.apply(t,[a,1].concat(m)),a+=m.length-1):y.content=m)):(h=y.content,Array.isArray(h)?n(h):n([h]))}}(l),new e.Token(s,l,"language-"+s,n)}e.languages.javascript["template-string"]=[s("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),s("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),s("svg",/\bsvg/.source),s("markdown",/\b(?:markdown|md)/.source),s("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),s("sql",/\bsql/.source),n].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(n){n.language in c&&function n(t){for(var r=0,o=t.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var n=e.languages.extend("typescript",{});delete n["class-name"],e.languages.typescript["class-name"].inside=n,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:n}}}}),e.languages.ts=e.languages.typescript}(A),function(e){var n=e.languages.javascript,t=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+t+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:n,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,(function(){return t}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+t),lookbehind:!0,inside:{string:n.string,number:n.number,boolean:n.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:n,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(A),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(A),A.languages.n4js=A.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),A.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),A.languages.n4jsd=A.languages.n4js,function(e){function n(e,n){return RegExp(e.replace(/