From fd810e2b93dae93fd332c6615177d345daedcfc3 Mon Sep 17 00:00:00 2001 From: github-actions-bot Date: Thu, 22 Feb 2024 20:58:09 +0000 Subject: [PATCH] Updates --- 404.html | 10 +++++----- assets/js/3002f4e5.526f4cf0.js | 1 + assets/js/3002f4e5.f5c85d53.js | 1 - .../js/{33d50a8e.40ea747b.js => 33d50a8e.d6a1c41d.js} | 2 +- assets/js/4edc808e.a40053f8.js | 1 + assets/js/4edc808e.fa9745bd.js | 1 - .../js/{5a58cff1.09688309.js => 5a58cff1.d730b2a7.js} | 2 +- assets/js/5c9eef2d.1c56466e.js | 1 + assets/js/5c9eef2d.9681f2bc.js | 1 - .../js/{63d0de19.f05de14f.js => 63d0de19.88287a4a.js} | 2 +- .../js/{6ab114b0.6c349868.js => 6ab114b0.6b48c898.js} | 2 +- .../js/{83398278.fa603100.js => 83398278.65e89be3.js} | 2 +- assets/js/92dde4bf.79200cac.js | 1 - assets/js/92dde4bf.dfd2f9e7.js | 1 + .../js/{9825658c.4d757538.js => 9825658c.b4e3eeca.js} | 2 +- .../js/{9cd7d415.a6019768.js => 9cd7d415.7c9cfb35.js} | 2 +- .../js/{9f55f1ad.3a150d70.js => 9f55f1ad.9abf0811.js} | 2 +- .../js/{ab0123d0.eb733937.js => ab0123d0.ee6725ca.js} | 2 +- assets/js/ce6c328c.067e45fe.js | 1 + assets/js/ce6c328c.f11d6dee.js | 1 - .../js/{d5140e4c.c6ec60f8.js => d5140e4c.8f707d77.js} | 2 +- assets/js/fa28435c.5179aff5.js | 1 + assets/js/fa28435c.8c8ef4cd.js | 1 - assets/js/{main.39761b0f.js => main.945f31fb.js} | 4 ++-- ...b0f.js.LICENSE.txt => main.945f31fb.js.LICENSE.txt} | 0 ...ntime~main.82f8fdbd.js => runtime~main.7ad464d2.js} | 2 +- fundamentals/accessing-the-theme/index.html | 10 +++++----- fundamentals/breakpoints/index.html | 10 +++++----- fundamentals/colors/index.html | 10 +++++----- fundamentals/components/custom-components/index.html | 10 +++++----- fundamentals/components/index.html | 10 +++++----- .../components/predefined-components/index.html | 10 +++++----- fundamentals/defining-your-theme/index.html | 10 +++++----- fundamentals/index.html | 10 +++++----- fundamentals/overriding-styles/index.html | 10 +++++----- fundamentals/responsive-values/index.html | 10 +++++----- fundamentals/restyle-functions/index.html | 10 +++++----- fundamentals/spacing/index.html | 10 +++++----- fundamentals/variants/index.html | 10 +++++----- guides/dark-mode/index.html | 10 +++++----- guides/fixture-app/index.html | 10 +++++----- guides/index.html | 10 +++++----- guides/migrating-to-v2/index.html | 10 +++++----- guides/shopify-design-system/index.html | 10 +++++----- index.html | 10 +++++----- search-index.json | 2 +- search/index.html | 10 +++++----- 47 files changed, 125 insertions(+), 125 deletions(-) create mode 100644 assets/js/3002f4e5.526f4cf0.js delete mode 100644 assets/js/3002f4e5.f5c85d53.js rename assets/js/{33d50a8e.40ea747b.js => 33d50a8e.d6a1c41d.js} (54%) create mode 100644 assets/js/4edc808e.a40053f8.js delete mode 100644 assets/js/4edc808e.fa9745bd.js rename assets/js/{5a58cff1.09688309.js => 5a58cff1.d730b2a7.js} (74%) create mode 100644 assets/js/5c9eef2d.1c56466e.js delete mode 100644 assets/js/5c9eef2d.9681f2bc.js rename assets/js/{63d0de19.f05de14f.js => 63d0de19.88287a4a.js} (74%) rename assets/js/{6ab114b0.6c349868.js => 6ab114b0.6b48c898.js} (75%) rename assets/js/{83398278.fa603100.js => 83398278.65e89be3.js} (51%) delete mode 100644 assets/js/92dde4bf.79200cac.js create mode 100644 assets/js/92dde4bf.dfd2f9e7.js rename assets/js/{9825658c.4d757538.js => 9825658c.b4e3eeca.js} (50%) rename assets/js/{9cd7d415.a6019768.js => 9cd7d415.7c9cfb35.js} (52%) rename assets/js/{9f55f1ad.3a150d70.js => 9f55f1ad.9abf0811.js} (53%) rename assets/js/{ab0123d0.eb733937.js => ab0123d0.ee6725ca.js} (53%) create mode 100644 assets/js/ce6c328c.067e45fe.js delete mode 100644 assets/js/ce6c328c.f11d6dee.js rename assets/js/{d5140e4c.c6ec60f8.js => d5140e4c.8f707d77.js} (67%) create mode 100644 assets/js/fa28435c.5179aff5.js delete mode 100644 assets/js/fa28435c.8c8ef4cd.js rename assets/js/{main.39761b0f.js => main.945f31fb.js} (99%) rename assets/js/{main.39761b0f.js.LICENSE.txt => main.945f31fb.js.LICENSE.txt} (100%) rename assets/js/{runtime~main.82f8fdbd.js => runtime~main.7ad464d2.js} (54%) diff --git a/404.html b/404.html index ba6b5afa..ac5bd64e 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Restyle - - + +
-
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+ + \ No newline at end of file diff --git a/assets/js/3002f4e5.526f4cf0.js b/assets/js/3002f4e5.526f4cf0.js new file mode 100644 index 00000000..02d6c8b0 --- /dev/null +++ b/assets/js/3002f4e5.526f4cf0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>f});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=l(t),u=r,f=m["".concat(s,".").concat(u)]||m[u]||d[u]||a;return t?o.createElement(f,i(i({ref:n},c),{},{components:t})):o.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=u;var p={};for(var s in n)hasOwnProperty.call(n,s)&&(p[s]=n[s]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>l});var o=t(7462),r=(t(7294),t(3905));const a={id:"predefined-components",title:"Predefined components"},i=void 0,p={unversionedId:"fundamentals/components/predefined-components",id:"fundamentals/components/predefined-components",title:"Predefined components",description:"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.",source:"@site/docs/fundamentals/components/predefined-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/predefined-components",permalink:"/restyle/fundamentals/components/predefined-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/predefined-components.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"predefined-components",title:"Predefined components"},sidebar:"docs",previous:{title:"Components",permalink:"/restyle/fundamentals/components"},next:{title:"Custom components",permalink:"/restyle/fundamentals/components/custom-components"}},s={},l=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:l};function m(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This library comes with predefined functions to create a ",(0,r.kt)("inlineCode",{parentName:"p"},"Box")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Text")," component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme."),(0,r.kt)("h4",{id:"box"},"Box"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Box.tsx\nimport {createBox} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Box = createBox();\n\nexport default Box;\n")),(0,r.kt)("p",null,"The Box component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"backgroundColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"border"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"shadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"position"),"."),(0,r.kt)("h4",{id:"text"},"Text"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Text.tsx\nimport {createText} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Text = createText();\n\nexport default Text;\n")),(0,r.kt)("p",null,"The Text component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"color"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textDecorationColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"typography"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textShadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),". It also includes a ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/variants"},"variant")," that picks up styles under the ",(0,r.kt)("inlineCode",{parentName:"p"},"textVariants")," key in your theme:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n ...,\n textVariants: {\n header: {\n fontFamily: 'ShopifySans-Bold',\n fontWeight: 'bold',\n fontSize: 34,\n lineHeight: 42.5,\n color: 'black',\n },\n subheader: {\n fontFamily: 'ShopifySans-SemiBold',\n fontWeight: '600',\n fontSize: 28,\n lineHeight: 36,\n color: 'black',\n },\n body: {\n fontFamily: 'ShopifySans',\n fontSize: 16,\n lineHeight: 24,\n color: 'black',\n },\n },\n});\n\n// In a component\nHeader\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3002f4e5.f5c85d53.js b/assets/js/3002f4e5.f5c85d53.js deleted file mode 100644 index edb2142f..00000000 --- a/assets/js/3002f4e5.f5c85d53.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[462],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>f});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=l(t),u=r,f=m["".concat(s,".").concat(u)]||m[u]||d[u]||a;return t?o.createElement(f,i(i({ref:n},c),{},{components:t})):o.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=u;var p={};for(var s in n)hasOwnProperty.call(n,s)&&(p[s]=n[s]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>p,toc:()=>l});var o=t(7462),r=(t(7294),t(3905));const a={id:"predefined-components",title:"Predefined components"},i=void 0,p={unversionedId:"fundamentals/components/predefined-components",id:"fundamentals/components/predefined-components",title:"Predefined components",description:"This library comes with predefined functions to create a Box and Text component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme.",source:"@site/docs/fundamentals/components/predefined-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/predefined-components",permalink:"/restyle/fundamentals/components/predefined-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/predefined-components.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"predefined-components",title:"Predefined components"},sidebar:"docs",previous:{title:"Components",permalink:"/restyle/fundamentals/components"},next:{title:"Custom components",permalink:"/restyle/fundamentals/components/custom-components"}},s={},l=[{value:"Box",id:"box",level:4},{value:"Text",id:"text",level:4}],c={toc:l};function m(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,o.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This library comes with predefined functions to create a ",(0,r.kt)("inlineCode",{parentName:"p"},"Box")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Text")," component, as seen in action in the introductory example. These come as functions instead of ready-made components to give you a chance to provide the type of your theme object. Doing this will make all props that map to theme values have proper types configured, based on what's available in your theme."),(0,r.kt)("h4",{id:"box"},"Box"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Box.tsx\nimport {createBox} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Box = createBox();\n\nexport default Box;\n")),(0,r.kt)("p",null,"The Box component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"backgroundColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"layout"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"border"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"shadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"position"),"."),(0,r.kt)("h4",{id:"text"},"Text"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In Text.tsx\nimport {createText} from '@shopify/restyle';\nimport {Theme} from './theme';\n\nconst Text = createText();\n\nexport default Text;\n")),(0,r.kt)("p",null,"The Text component comes with the following ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"Restyle functions"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"color"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textDecorationColor"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"visible"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"typography"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"textShadow"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"spacing"),". It also includes a ",(0,r.kt)("a",{parentName:"p",href:"/fundamentals/variants"},"variant")," that picks up styles under the ",(0,r.kt)("inlineCode",{parentName:"p"},"textVariants")," key in your theme:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n ...,\n textVariants: {\n header: {\n fontFamily: 'ShopifySans-Bold',\n fontWeight: 'bold',\n fontSize: 34,\n lineHeight: 42.5,\n color: 'black',\n },\n subheader: {\n fontFamily: 'ShopifySans-SemiBold',\n fontWeight: '600',\n fontSize: 28,\n lineHeight: 36,\n color: 'black',\n },\n body: {\n fontFamily: 'ShopifySans',\n fontSize: 16,\n lineHeight: 24,\n color: 'black',\n },\n },\n});\n\n// In a component\nHeader\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/33d50a8e.40ea747b.js b/assets/js/33d50a8e.d6a1c41d.js similarity index 54% rename from assets/js/33d50a8e.40ea747b.js rename to assets/js/33d50a8e.d6a1c41d.js index 189ca384..9826d18c 100644 --- a/assets/js/33d50a8e.40ea747b.js +++ b/assets/js/33d50a8e.d6a1c41d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[641],{3905:(e,n,t)=>{t.d(n,{Zo:()=>l,kt:()=>f});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=r.createContext({}),i=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},l=function(e){var n=i(e.components);return r.createElement(c.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,s=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=i(t),d=o,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||s;return t?r.createElement(f,a(a({ref:n},l),{},{components:t})):r.createElement(f,a({ref:n},l))}));function f(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var s=t.length,a=new Array(s);a[0]=d;var p={};for(var c in n)hasOwnProperty.call(n,c)&&(p[c]=n[c]);p.originalType=e,p[m]="string"==typeof e?e:o,a[1]=p;for(var i=2;i{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>s,metadata:()=>p,toc:()=>i});var r=t(7462),o=(t(7294),t(3905));const s={id:"custom-components",title:"Custom components"},a=void 0,p={unversionedId:"fundamentals/components/custom-components",id:"fundamentals/components/custom-components",title:"Custom components",description:"If you want to create your own component similar to Box or Text, but decide",source:"@site/docs/fundamentals/components/custom-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/custom-components",permalink:"/restyle/fundamentals/components/custom-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/custom-components.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"custom-components",title:"Custom components"},sidebar:"docs",previous:{title:"Predefined components",permalink:"/restyle/fundamentals/components/predefined-components"},next:{title:"Guides",permalink:"/restyle/guides"}},c={},i=[],l={toc:i};function m(e){let{components:n,...t}=e;return(0,o.kt)("wrapper",(0,r.Z)({},l,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"If you want to create your own component similar to ",(0,o.kt)("inlineCode",{parentName:"p"},"Box")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"Text"),", but decide\nyourself which ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"predefined Restyle functions")," to use, use the\n",(0,o.kt)("inlineCode",{parentName:"p"},"createRestyleComponent")," helper:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {\n createRestyleComponent,\n createVariant,\n spacing,\n SpacingProps,\n VariantProps,\n} from '@shopify/restyle';\nimport {Theme} from './theme';\n\ntype Props = SpacingProps & VariantProps;\nconst Card = createRestyleComponent([\n spacing,\n createVariant({themeKey: 'cardVariants'}),\n]);\n\nexport default Card;\n")),(0,o.kt)("p",null,"For more advanced components, you may want to instead use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\ntype RestyleProps = SpacingProps &\n BorderProps &\n BackgroundColorProps;\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\n\ntype Props = RestyleProps & {\n onPress: () => void;\n label: string;\n};\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[641],{3905:(e,n,t)=>{t.d(n,{Zo:()=>l,kt:()=>f});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=r.createContext({}),i=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},l=function(e){var n=i(e.components);return r.createElement(c.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,s=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=i(t),d=o,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||s;return t?r.createElement(f,a(a({ref:n},l),{},{components:t})):r.createElement(f,a({ref:n},l))}));function f(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var s=t.length,a=new Array(s);a[0]=d;var p={};for(var c in n)hasOwnProperty.call(n,c)&&(p[c]=n[c]);p.originalType=e,p[m]="string"==typeof e?e:o,a[1]=p;for(var i=2;i{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>s,metadata:()=>p,toc:()=>i});var r=t(7462),o=(t(7294),t(3905));const s={id:"custom-components",title:"Custom components"},a=void 0,p={unversionedId:"fundamentals/components/custom-components",id:"fundamentals/components/custom-components",title:"Custom components",description:"If you want to create your own component similar to Box or Text, but decide",source:"@site/docs/fundamentals/components/custom-components.md",sourceDirName:"fundamentals/components",slug:"/fundamentals/components/custom-components",permalink:"/restyle/fundamentals/components/custom-components",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/components/custom-components.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"custom-components",title:"Custom components"},sidebar:"docs",previous:{title:"Predefined components",permalink:"/restyle/fundamentals/components/predefined-components"},next:{title:"Guides",permalink:"/restyle/guides"}},c={},i=[],l={toc:i};function m(e){let{components:n,...t}=e;return(0,o.kt)("wrapper",(0,r.Z)({},l,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"If you want to create your own component similar to ",(0,o.kt)("inlineCode",{parentName:"p"},"Box")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"Text"),", but decide\nyourself which ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals/restyle-functions#predefined-restyle-functions"},"predefined Restyle functions")," to use, use the\n",(0,o.kt)("inlineCode",{parentName:"p"},"createRestyleComponent")," helper:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {\n createRestyleComponent,\n createVariant,\n spacing,\n SpacingProps,\n VariantProps,\n} from '@shopify/restyle';\nimport {Theme} from './theme';\n\ntype Props = SpacingProps & VariantProps;\nconst Card = createRestyleComponent([\n spacing,\n createVariant({themeKey: 'cardVariants'}),\n]);\n\nexport default Card;\n")),(0,o.kt)("p",null,"For more advanced components, you may want to instead use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\ntype RestyleProps = SpacingProps &\n BorderProps &\n BackgroundColorProps;\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\n\ntype Props = RestyleProps & {\n onPress: () => void;\n label: string;\n};\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4edc808e.a40053f8.js b/assets/js/4edc808e.a40053f8.js new file mode 100644 index 00000000..9943b848 --- /dev/null +++ b/assets/js/4edc808e.a40053f8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[173],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),u=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},c),{},{components:n})):a.createElement(h,o({ref:t},c))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var u=2;u{n.r(t),n.d(t,{assets:()=>k,contentTitle:()=>g,default:()=>w,frontMatter:()=>b,metadata:()=>v,toc:()=>x});var a=n(7462),r=n(7294),l=n(3905),o=n(6010),s=n(2389),i=n(7392),u=n(7094),c=n(2466);const p="tabList__CuJ",d="tabItem_LNqP";function m(e){const{lazy:t,block:n,defaultValue:l,values:s,groupId:m,className:h}=e,f=r.Children.map(e.children,(e=>{if((0,r.isValidElement)(e)&&"value"in e.props)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.`)})),y=s??f.map((e=>{let{props:{value:t,label:n,attributes:a}}=e;return{value:t,label:n,attributes:a}})),b=(0,i.l)(y,((e,t)=>e.value===t.value));if(b.length>0)throw new Error(`Docusaurus error: Duplicate values "${b.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`);const g=null===l?l:l??f.find((e=>e.props.default))?.props.value??f[0].props.value;if(null!==g&&!y.some((e=>e.value===g)))throw new Error(`Docusaurus error: The has a defaultValue "${g}" but none of its children has the corresponding value. Available values are: ${y.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const{tabGroupChoices:v,setTabGroupChoices:k}=(0,u.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:O}=(0,c.o5)();if(null!=m){const e=v[m];null!=e&&e!==x&&y.some((t=>t.value===e))&&T(e)}const N=e=>{const t=e.currentTarget,n=w.indexOf(t),a=y[n].value;a!==x&&(O(t),T(a),null!=m&&k(m,String(a)))},E=e=>{let t=null;switch(e.key){case"Enter":N(e);break;case"ArrowRight":{const n=w.indexOf(e.currentTarget)+1;t=w[n]??w[0];break}case"ArrowLeft":{const n=w.indexOf(e.currentTarget)-1;t=w[n]??w[w.length-1];break}}t?.focus()};return r.createElement("div",{className:(0,o.Z)("tabs-container",p)},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},h)},y.map((e=>{let{value:t,label:n,attributes:l}=e;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,key:t,ref:e=>w.push(e),onKeyDown:E,onClick:N},l,{className:(0,o.Z)("tabs__item",d,l?.className,{"tabs__item--active":x===t})}),n??t)}))),t?(0,r.cloneElement)(f.filter((e=>e.props.value===x))[0],{className:"margin-top--md"}):r.createElement("div",{className:"margin-top--md"},f.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})))))}function h(e){const t=(0,s.Z)();return r.createElement(m,(0,a.Z)({key:String(t)},e))}const f="tabItem_Ymn6";function y(e){let{children:t,hidden:n,className:a}=e;return r.createElement("div",{role:"tabpanel",className:(0,o.Z)(f,a),hidden:n},t)}const b={id:"getting-started",title:"Getting started",slug:"/"},g=void 0,v={unversionedId:"getting-started",id:"getting-started",title:"Getting started",description:"Build a consistent, themed UI in minutes.",source:"@site/docs/index.mdx",sourceDirName:".",slug:"/",permalink:"/restyle/",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/index.mdx",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"getting-started",title:"Getting started",slug:"/"},sidebar:"docs",next:{title:"Fundamentals",permalink:"/restyle/fundamentals"}},k={},x=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Playground",id:"playground",level:2}],T={toc:x};function w(e){let{components:t,...r}=e;return(0,l.kt)("wrapper",(0,a.Z)({},T,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Build a consistent, themed UI in minutes.")),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Welcome example",src:n(2565).Z,width:"700",height:"403"})),(0,l.kt)("p",null,"The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus."),(0,l.kt)("p",null,"This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum."),(0,l.kt)("p",null,"Here's an example of how a view built with Restyle components could look:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'import {\n ThemeProvider,\n createBox,\n createText,\n createRestyleComponent,\n createVariant,\n VariantProps,\n} from \'@shopify/restyle\';\n\n// See the "Defining your theme" section under "Fundamentals"\nimport theme, {Theme} from \'./theme\';\n\nconst Box = createBox();\nconst Text = createText();\n\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>([createVariant({themeKey: \'cardVariants\'})], Box);\n\nconst Welcome = () => {\n return (\n \n Welcome\n \n \n This is a simple example\n \n \n Displaying how to use Restyle\n \n \n \n );\n};\n\nconst App = () => {\n return (\n \n \n \n );\n};\n')),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Simple example",src:n(2355).Z,width:"700",height:"403"})),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("p",null,"Add the package to your project:"),(0,l.kt)(h,{mdxType:"Tabs"},(0,l.kt)(y,{value:"yarn",label:"Yarn",default:!0,mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @shopify/restyle\n"))),(0,l.kt)(y,{value:"npm",label:"Npm",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @shopify/restyle\n"))),(0,l.kt)(y,{value:"expo",label:"Expo",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install @shopify/restyle\n")))),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("p",null,"Read more about the usage of ",(0,l.kt)("inlineCode",{parentName:"p"},"Restyle")," ",(0,l.kt)("a",{parentName:"p",href:"/fundamentals"},"here"),"."),(0,l.kt)("h2",{id:"playground"},"Playground"),(0,l.kt)("p",null,"The ",(0,l.kt)("a",{parentName:"p",href:"/"},"fixture")," is an example app showing how to use the library."))}w.isMDXComponent=!0},2355:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/simple-example-866819cb9b1c401398713cd85972ce1e.gif"},2565:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/welcome-example-53186d2f4fdca35f97ddf093d2e95cca.gif"}}]); \ No newline at end of file diff --git a/assets/js/4edc808e.fa9745bd.js b/assets/js/4edc808e.fa9745bd.js deleted file mode 100644 index 8a09c406..00000000 --- a/assets/js/4edc808e.fa9745bd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[173],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),c=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=c(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=c(n),m=r,h=p["".concat(i,".").concat(m)]||p[m]||d[m]||l;return n?a.createElement(h,o(o({ref:t},u),{},{components:n})):a.createElement(h,o({ref:t},u))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>k,contentTitle:()=>g,default:()=>w,frontMatter:()=>b,metadata:()=>v,toc:()=>x});var a=n(7462),r=n(7294),l=n(3905),o=n(6010),s=n(2389),i=n(7392),c=n(7094),u=n(2466);const p="tabList__CuJ",d="tabItem_LNqP";function m(e){const{lazy:t,block:n,defaultValue:l,values:s,groupId:m,className:h}=e,f=r.Children.map(e.children,(e=>{if((0,r.isValidElement)(e)&&"value"in e.props)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.`)})),y=s??f.map((e=>{let{props:{value:t,label:n,attributes:a}}=e;return{value:t,label:n,attributes:a}})),b=(0,i.l)(y,((e,t)=>e.value===t.value));if(b.length>0)throw new Error(`Docusaurus error: Duplicate values "${b.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`);const g=null===l?l:l??f.find((e=>e.props.default))?.props.value??f[0].props.value;if(null!==g&&!y.some((e=>e.value===g)))throw new Error(`Docusaurus error: The has a defaultValue "${g}" but none of its children has the corresponding value. Available values are: ${y.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const{tabGroupChoices:v,setTabGroupChoices:k}=(0,c.U)(),[x,T]=(0,r.useState)(g),w=[],{blockElementScrollPositionUntilNextRender:O}=(0,u.o5)();if(null!=m){const e=v[m];null!=e&&e!==x&&y.some((t=>t.value===e))&&T(e)}const N=e=>{const t=e.currentTarget,n=w.indexOf(t),a=y[n].value;a!==x&&(O(t),T(a),null!=m&&k(m,String(a)))},E=e=>{let t=null;switch(e.key){case"Enter":N(e);break;case"ArrowRight":{const n=w.indexOf(e.currentTarget)+1;t=w[n]??w[0];break}case"ArrowLeft":{const n=w.indexOf(e.currentTarget)-1;t=w[n]??w[w.length-1];break}}t?.focus()};return r.createElement("div",{className:(0,o.Z)("tabs-container",p)},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},h)},y.map((e=>{let{value:t,label:n,attributes:l}=e;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,key:t,ref:e=>w.push(e),onKeyDown:E,onClick:N},l,{className:(0,o.Z)("tabs__item",d,l?.className,{"tabs__item--active":x===t})}),n??t)}))),t?(0,r.cloneElement)(f.filter((e=>e.props.value===x))[0],{className:"margin-top--md"}):r.createElement("div",{className:"margin-top--md"},f.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})))))}function h(e){const t=(0,s.Z)();return r.createElement(m,(0,a.Z)({key:String(t)},e))}const f="tabItem_Ymn6";function y(e){let{children:t,hidden:n,className:a}=e;return r.createElement("div",{role:"tabpanel",className:(0,o.Z)(f,a),hidden:n},t)}const b={id:"getting-started",title:"Getting started",slug:"/"},g=void 0,v={unversionedId:"getting-started",id:"getting-started",title:"Getting started",description:"Build a consistent, themed UI in minutes.",source:"@site/docs/index.mdx",sourceDirName:".",slug:"/",permalink:"/restyle/",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/index.mdx",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"getting-started",title:"Getting started",slug:"/"},sidebar:"docs",next:{title:"Fundamentals",permalink:"/restyle/fundamentals"}},k={},x=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Playground",id:"playground",level:2}],T={toc:x};function w(e){let{components:t,...r}=e;return(0,l.kt)("wrapper",(0,a.Z)({},T,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Build a consistent, themed UI in minutes.")),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Welcome example",src:n(2565).Z,width:"700",height:"403"})),(0,l.kt)("p",null,"The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus."),(0,l.kt)("p",null,"This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum."),(0,l.kt)("p",null,"Here's an example of how a view built with Restyle components could look:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},'import {\n ThemeProvider,\n createBox,\n createText,\n createRestyleComponent,\n createVariant,\n VariantProps,\n} from \'@shopify/restyle\';\n\n// See the "Defining your theme" section under "Fundamentals"\nimport theme, {Theme} from \'./theme\';\n\nconst Box = createBox();\nconst Text = createText();\n\nconst Card = createRestyleComponent<\n VariantProps & React.ComponentProps,\n Theme\n>([createVariant({themeKey: \'cardVariants\'})], Box);\n\nconst Welcome = () => {\n return (\n \n Welcome\n \n \n This is a simple example\n \n \n Displaying how to use Restyle\n \n \n \n );\n};\n\nconst App = () => {\n return (\n \n \n \n );\n};\n')),(0,l.kt)("p",null,(0,l.kt)("img",{alt:"Simple example",src:n(2355).Z,width:"700",height:"403"})),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("p",null,"Add the package to your project:"),(0,l.kt)(h,{mdxType:"Tabs"},(0,l.kt)(y,{value:"yarn",label:"Yarn",default:!0,mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @shopify/restyle\n"))),(0,l.kt)(y,{value:"npm",label:"Npm",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @shopify/restyle\n"))),(0,l.kt)(y,{value:"expo",label:"Expo",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install @shopify/restyle\n")))),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("p",null,"Read more about the usage of ",(0,l.kt)("inlineCode",{parentName:"p"},"Restyle")," ",(0,l.kt)("a",{parentName:"p",href:"/fundamentals"},"here"),"."),(0,l.kt)("h2",{id:"playground"},"Playground"),(0,l.kt)("p",null,"The ",(0,l.kt)("a",{parentName:"p",href:"/"},"fixture")," is an example app showing how to use the library."))}w.isMDXComponent=!0},2355:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/simple-example-866819cb9b1c401398713cd85972ce1e.gif"},2565:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/welcome-example-53186d2f4fdca35f97ddf093d2e95cca.gif"}}]); \ No newline at end of file diff --git a/assets/js/5a58cff1.09688309.js b/assets/js/5a58cff1.d730b2a7.js similarity index 74% rename from assets/js/5a58cff1.09688309.js rename to assets/js/5a58cff1.d730b2a7.js index 649ba163..3e1955bb 100644 --- a/assets/js/5a58cff1.09688309.js +++ b/assets/js/5a58cff1.d730b2a7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[118],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,d=u["".concat(l,".").concat(m)]||u[m]||f[m]||o;return n?r.createElement(d,i(i({ref:t},p),{},{components:n})):r.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"spacing",title:"Spacing"},i=void 0,s={unversionedId:"fundamentals/spacing",id:"fundamentals/spacing",title:"Spacing",description:"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):",source:"@site/docs/fundamentals/spacing.md",sourceDirName:"fundamentals",slug:"/fundamentals/spacing",permalink:"/restyle/fundamentals/spacing",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/spacing.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"spacing",title:"Spacing"},sidebar:"docs",previous:{title:"Colors",permalink:"/restyle/fundamentals/colors"},next:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"}},l={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Spacing tends to follow multiples of a given base spacing number, for example ",(0,a.kt)("inlineCode",{parentName:"p"},"8"),". We prefer using the t-shirt size naming convention, because of the scalability of it (any number of ",(0,a.kt)("inlineCode",{parentName:"p"},"x"),"'s can be prepended for smaller and larger sizes):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[118],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,d=u["".concat(l,".").concat(m)]||u[m]||f[m]||o;return n?r.createElement(d,i(i({ref:t},p),{},{components:n})):r.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"spacing",title:"Spacing"},i=void 0,s={unversionedId:"fundamentals/spacing",id:"fundamentals/spacing",title:"Spacing",description:"Spacing tends to follow multiples of a given base spacing number, for example 8. We prefer using the t-shirt size naming convention, because of the scalability of it (any number of x's can be prepended for smaller and larger sizes):",source:"@site/docs/fundamentals/spacing.md",sourceDirName:"fundamentals",slug:"/fundamentals/spacing",permalink:"/restyle/fundamentals/spacing",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/spacing.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"spacing",title:"Spacing"},sidebar:"docs",previous:{title:"Colors",permalink:"/restyle/fundamentals/colors"},next:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"}},l={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Spacing tends to follow multiples of a given base spacing number, for example ",(0,a.kt)("inlineCode",{parentName:"p"},"8"),". We prefer using the t-shirt size naming convention, because of the scalability of it (any number of ",(0,a.kt)("inlineCode",{parentName:"p"},"x"),"'s can be prepended for smaller and larger sizes):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5c9eef2d.1c56466e.js b/assets/js/5c9eef2d.1c56466e.js new file mode 100644 index 00000000..ce5e5258 --- /dev/null +++ b/assets/js/5c9eef2d.1c56466e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[892],{3905:(e,n,r)=>{r.d(n,{Zo:()=>p,kt:()=>y});var t=r(7294);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function d(e){for(var n=1;n=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=t.createContext({}),l=function(e){var n=t.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):d(d({},n),e)),r},p=function(e){var n=l(e.components);return t.createElement(c.Provider,{value:n},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=l(r),u=a,y=s["".concat(c,".").concat(u)]||s[u]||m[u]||o;return r?t.createElement(y,d(d({ref:n},p),{},{components:r})):t.createElement(y,d({ref:n},p))}));function y(e,n){var r=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=r.length,d=new Array(o);d[0]=u;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i[s]="string"==typeof e?e:a,d[1]=i;for(var l=2;l{r.r(n),r.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>s,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var t=r(7462),a=(r(7294),r(3905));const o={id:"dark-mode",title:"Implementing dark mode"},d=void 0,i={unversionedId:"guides/dark-mode",id:"guides/dark-mode",title:"Implementing dark mode",description:"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:",source:"@site/docs/guides/dark-mode.md",sourceDirName:"guides",slug:"/guides/dark-mode",permalink:"/restyle/guides/dark-mode",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/dark-mode.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"dark-mode",title:"Implementing dark mode"},sidebar:"docs",previous:{title:"Guides",permalink:"/restyle/guides"},next:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"}},c={},l=[],p={toc:l};function s(e){let{components:n,...r}=e;return(0,a.kt)("wrapper",(0,t.Z)({},p,r,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'import React, {useState} from \'react\';\nimport {Switch} from \'react-native\';\nimport {\n ThemeProvider,\n createBox,\n createText,\n createTheme,\n} from \'@shopify/restyle\';\n\nexport const palette = {\n purple: \'#5A31F4\',\n white: \'#FFF\',\n black: \'#111\',\n darkGray: \'#333\',\n lightGray: \'#EEE\',\n};\n\nconst theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n },\n colors: {\n mainBackground: palette.lightGray,\n mainForeground: palette.black,\n\n primaryCardBackground: palette.purple,\n secondaryCardBackground: palette.white,\n primaryCardText: palette.white,\n secondaryCardText: palette.black,\n },\n textVariants: {\n defaults: {},\n body: {\n fontSize: 16,\n lineHeight: 24,\n color: \'mainForeground\',\n },\n },\n cardVariants: {\n defaults: {},\n primary: {\n backgroundColor: \'primaryCardBackground\',\n shadowOpacity: 0.3,\n },\n secondary: {\n backgroundColor: \'secondaryCardBackground\',\n shadowOpacity: 0.1,\n },\n },\n});\n\ntype Theme = typeof theme;\n\nconst darkTheme: Theme = {\n ...theme,\n colors: {\n ...theme.colors,\n mainBackground: palette.black,\n mainForeground: palette.white,\n\n secondaryCardBackground: palette.darkGray,\n secondaryCardText: palette.white,\n },\n};\n\nconst Box = createBox();\nconst Text = createText();\n\nconst App = () => {\n const [darkMode, setDarkMode] = useState(false);\n return (\n \n \n \n \n Primary Card\n \n \n \n \n Secondary Card\n \n \n \n setDarkMode(value)}\n />\n \n \n \n );\n};\n\nexport default App;\n')))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5c9eef2d.9681f2bc.js b/assets/js/5c9eef2d.9681f2bc.js deleted file mode 100644 index 462ea81f..00000000 --- a/assets/js/5c9eef2d.9681f2bc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[892],{3905:(e,n,r)=>{r.d(n,{Zo:()=>p,kt:()=>y});var t=r(7294);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function d(e){for(var n=1;n=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=t.createContext({}),l=function(e){var n=t.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):d(d({},n),e)),r},p=function(e){var n=l(e.components);return t.createElement(c.Provider,{value:n},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=l(r),u=a,y=s["".concat(c,".").concat(u)]||s[u]||m[u]||o;return r?t.createElement(y,d(d({ref:n},p),{},{components:r})):t.createElement(y,d({ref:n},p))}));function y(e,n){var r=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=r.length,d=new Array(o);d[0]=u;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i[s]="string"==typeof e?e:a,d[1]=i;for(var l=2;l{r.r(n),r.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>s,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var t=r(7462),a=(r(7294),r(3905));const o={id:"dark-mode",title:"Implementing dark mode"},d=void 0,i={unversionedId:"guides/dark-mode",id:"guides/dark-mode",title:"Implementing dark mode",description:"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:",source:"@site/docs/guides/dark-mode.md",sourceDirName:"guides",slug:"/guides/dark-mode",permalink:"/restyle/guides/dark-mode",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/dark-mode.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"dark-mode",title:"Implementing dark mode"},sidebar:"docs",previous:{title:"Guides",permalink:"/restyle/guides"},next:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"}},c={},l=[],p={toc:l};function s(e){let{components:n,...r}=e;return(0,a.kt)("wrapper",(0,t.Z)({},p,r,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Of course, no app is complete without a dark mode. Here a simple example of how you would implement it:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'import React, {useState} from \'react\';\nimport {Switch} from \'react-native\';\nimport {\n ThemeProvider,\n createBox,\n createText,\n createTheme,\n} from \'@shopify/restyle\';\n\nexport const palette = {\n purple: \'#5A31F4\',\n white: \'#FFF\',\n black: \'#111\',\n darkGray: \'#333\',\n lightGray: \'#EEE\',\n};\n\nconst theme = createTheme({\n spacing: {\n s: 8,\n m: 16,\n },\n colors: {\n mainBackground: palette.lightGray,\n mainForeground: palette.black,\n\n primaryCardBackground: palette.purple,\n secondaryCardBackground: palette.white,\n primaryCardText: palette.white,\n secondaryCardText: palette.black,\n },\n textVariants: {\n defaults: {},\n body: {\n fontSize: 16,\n lineHeight: 24,\n color: \'mainForeground\',\n },\n },\n cardVariants: {\n defaults: {},\n primary: {\n backgroundColor: \'primaryCardBackground\',\n shadowOpacity: 0.3,\n },\n secondary: {\n backgroundColor: \'secondaryCardBackground\',\n shadowOpacity: 0.1,\n },\n },\n});\n\ntype Theme = typeof theme;\n\nconst darkTheme: Theme = {\n ...theme,\n colors: {\n ...theme.colors,\n mainBackground: palette.black,\n mainForeground: palette.white,\n\n secondaryCardBackground: palette.darkGray,\n secondaryCardText: palette.white,\n },\n};\n\nconst Box = createBox();\nconst Text = createText();\n\nconst App = () => {\n const [darkMode, setDarkMode] = useState(false);\n return (\n \n \n \n \n Primary Card\n \n \n \n \n Secondary Card\n \n \n \n setDarkMode(value)}\n />\n \n \n \n );\n};\n\nexport default App;\n')))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/63d0de19.f05de14f.js b/assets/js/63d0de19.88287a4a.js similarity index 74% rename from assets/js/63d0de19.f05de14f.js rename to assets/js/63d0de19.88287a4a.js index 199d7586..1d9830cd 100644 --- a/assets/js/63d0de19.f05de14f.js +++ b/assets/js/63d0de19.88287a4a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[493],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),l=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=l(e.components);return r.createElement(i.Provider,{value:t},e.children)},m="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=l(n),d=a,f=m["".concat(i,".").concat(d)]||m[d]||p[d]||o;return n?r.createElement(f,s(s({ref:t},u),{},{components:n})):r.createElement(f,s({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[m]="string"==typeof e?e:a,s[1]=c;for(var l=2;l{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(7462),a=(n(7294),n(3905));const o={id:"accessing-the-theme",title:"Accessing the theme"},s=void 0,c={unversionedId:"fundamentals/accessing-the-theme",id:"fundamentals/accessing-the-theme",title:"Accessing the theme",description:"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:",source:"@site/docs/fundamentals/accessing-the-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/accessing-the-theme",permalink:"/restyle/fundamentals/accessing-the-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/accessing-the-theme.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"accessing-the-theme",title:"Accessing the theme"},sidebar:"docs",previous:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"},next:{title:"Variants",permalink:"/restyle/fundamentals/variants"}},i={},l=[],u={toc:l};function m(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"If you need to manually access the theme outside of a component created with Restyle, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"useTheme")," hook:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"const Component = () => {\n const theme = useTheme();\n const {cardPrimaryBackground} = theme.colors;\n // ...\n};\n")),(0,a.kt)("p",null,"By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a ",(0,a.kt)("a",{parentName:"p",href:"/guides/dark-mode"},"dark mode switch")," in your app."))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[493],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=r.createContext({}),l=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=l(e.components);return r.createElement(i.Provider,{value:t},e.children)},m="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=l(n),d=a,f=m["".concat(i,".").concat(d)]||m[d]||p[d]||o;return n?r.createElement(f,s(s({ref:t},u),{},{components:n})):r.createElement(f,s({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[m]="string"==typeof e?e:a,s[1]=c;for(var l=2;l{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(7462),a=(n(7294),n(3905));const o={id:"accessing-the-theme",title:"Accessing the theme"},s=void 0,c={unversionedId:"fundamentals/accessing-the-theme",id:"fundamentals/accessing-the-theme",title:"Accessing the theme",description:"If you need to manually access the theme outside of a component created with Restyle, use the useTheme hook:",source:"@site/docs/fundamentals/accessing-the-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/accessing-the-theme",permalink:"/restyle/fundamentals/accessing-the-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/accessing-the-theme.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"accessing-the-theme",title:"Accessing the theme"},sidebar:"docs",previous:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"},next:{title:"Variants",permalink:"/restyle/fundamentals/variants"}},i={},l=[],u={toc:l};function m(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"If you need to manually access the theme outside of a component created with Restyle, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"useTheme")," hook:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"const Component = () => {\n const theme = useTheme();\n const {cardPrimaryBackground} = theme.colors;\n // ...\n};\n")),(0,a.kt)("p",null,"By doing this instead of directly importing the theme object, it becomes easy to swap the theme out during runtime to for example implement a ",(0,a.kt)("a",{parentName:"p",href:"/guides/dark-mode"},"dark mode switch")," in your app."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/6ab114b0.6c349868.js b/assets/js/6ab114b0.6b48c898.js similarity index 75% rename from assets/js/6ab114b0.6c349868.js rename to assets/js/6ab114b0.6b48c898.js index 7491d6a4..9816b9ef 100644 --- a/assets/js/6ab114b0.6c349868.js +++ b/assets/js/6ab114b0.6b48c898.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[387],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),c=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(r),y=a,f=u["".concat(i,".").concat(y)]||u[y]||d[y]||o;return r?n.createElement(f,s(s({ref:t},p),{},{components:r})):n.createElement(f,s({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=y;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[u]="string"==typeof e?e:a,s[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={id:"overriding-styles",title:"Overriding styles"},s=void 0,l={unversionedId:"fundamentals/overriding-styles",id:"fundamentals/overriding-styles",title:"Overriding styles",description:"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.",source:"@site/docs/fundamentals/overriding-styles.md",sourceDirName:"fundamentals",slug:"/fundamentals/overriding-styles",permalink:"/restyle/fundamentals/overriding-styles",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/overriding-styles.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"overriding-styles",title:"Overriding styles"},sidebar:"docs",previous:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"},next:{title:"Restyle functions",permalink:"/restyle/fundamentals/restyle-functions"}},i={},c=[],p={toc:c};function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Any Restyle component also accepts a regular ",(0,a.kt)("inlineCode",{parentName:"p"},"style")," property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[387],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),c=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(r),y=a,f=u["".concat(i,".").concat(y)]||u[y]||d[y]||o;return r?n.createElement(f,s(s({ref:t},p),{},{components:r})):n.createElement(f,s({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=y;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[u]="string"==typeof e?e:a,s[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={id:"overriding-styles",title:"Overriding styles"},s=void 0,l={unversionedId:"fundamentals/overriding-styles",id:"fundamentals/overriding-styles",title:"Overriding styles",description:"Any Restyle component also accepts a regular style property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary.",source:"@site/docs/fundamentals/overriding-styles.md",sourceDirName:"fundamentals",slug:"/fundamentals/overriding-styles",permalink:"/restyle/fundamentals/overriding-styles",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/overriding-styles.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"overriding-styles",title:"Overriding styles"},sidebar:"docs",previous:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"},next:{title:"Restyle functions",permalink:"/restyle/fundamentals/restyle-functions"}},i={},c=[],p={toc:c};function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Any Restyle component also accepts a regular ",(0,a.kt)("inlineCode",{parentName:"p"},"style")," property and will apply it after all other styles, which means that you can use this to do any overrides that you might find necessary."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},'\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/83398278.fa603100.js b/assets/js/83398278.65e89be3.js similarity index 51% rename from assets/js/83398278.fa603100.js rename to assets/js/83398278.65e89be3.js index 7fe4ad45..a8fc3b1a 100644 --- a/assets/js/83398278.fa603100.js +++ b/assets/js/83398278.65e89be3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[352],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(l,".").concat(d)]||u[d]||m[d]||o;return n?a.createElement(f,i(i({ref:t},c),{},{components:n})):a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var a=n(7462),r=(n(7294),n(3905));const o={id:"variants",title:"Variants"},i=void 0,s={unversionedId:"fundamentals/variants",id:"fundamentals/variants",title:"Variants",description:"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.",source:"@site/docs/fundamentals/variants.md",sourceDirName:"fundamentals",slug:"/fundamentals/variants",permalink:"/restyle/fundamentals/variants",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/variants.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"variants",title:"Variants"},sidebar:"docs",previous:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"},next:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"// In theme\nconst theme = createTheme({\n // ...\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n },\n colors: {\n cardRegularBackground: '#EEEEEE',\n },\n breakpoints: {\n phone: 0,\n tablet: 768,\n },\n cardVariants: {\n defaults: {\n // We can define defaults for the variant here.\n // This will be applied after the defaults passed to createVariant and before the variant defined below.\n },\n regular: {\n // We can refer to other values in the theme here, and use responsive props\n padding: {\n phone: 's',\n tablet: 'm',\n },\n },\n elevated: {\n padding: {\n phone: 's',\n tablet: 'm',\n },\n shadowColor: '#000',\n shadowOpacity: 0.2,\n shadowOffset: {width: 0, height: 5},\n shadowRadius: 15,\n elevation: 5,\n }\n }\n})\n\nimport {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'\nimport {Theme} from './theme';\nconst variant = createVariant({themeKey: 'cardVariants', defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardRegularBackground',\n}})\n\nconst Card = createRestyleComponent, Theme>([variant])\n\n\n")),(0,r.kt)("p",null,"Arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that will map to a variant. Defaults to ",(0,r.kt)("inlineCode",{parentName:"li"},"variant"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"themeKey"),": A key in the theme to map values from. Unlike ",(0,r.kt)("inlineCode",{parentName:"li"},"createRestyleFunction"),", this option ",(0,r.kt)("em",{parentName:"li"},"is required")," to create a variant."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaults"),": The default values to apply before applying anything from the values in the theme.")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[352],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),p=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(l,".").concat(d)]||u[d]||m[d]||o;return n?a.createElement(f,i(i({ref:t},c),{},{components:n})):a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var a=n(7462),r=(n(7294),n(3905));const o={id:"variants",title:"Variants"},i=void 0,s={unversionedId:"fundamentals/variants",id:"fundamentals/variants",title:"Variants",description:"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme.",source:"@site/docs/fundamentals/variants.md",sourceDirName:"fundamentals",slug:"/fundamentals/variants",permalink:"/restyle/fundamentals/variants",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/variants.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"variants",title:"Variants"},sidebar:"docs",previous:{title:"Accessing the theme",permalink:"/restyle/fundamentals/accessing-the-theme"},next:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A variant is a form of Restyle function that maps a prop into multiple other props to use with Restyle functions. A variant needs to always map to a key in the theme."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"// In theme\nconst theme = createTheme({\n // ...\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n },\n colors: {\n cardRegularBackground: '#EEEEEE',\n },\n breakpoints: {\n phone: 0,\n tablet: 768,\n },\n cardVariants: {\n defaults: {\n // We can define defaults for the variant here.\n // This will be applied after the defaults passed to createVariant and before the variant defined below.\n },\n regular: {\n // We can refer to other values in the theme here, and use responsive props\n padding: {\n phone: 's',\n tablet: 'm',\n },\n },\n elevated: {\n padding: {\n phone: 's',\n tablet: 'm',\n },\n shadowColor: '#000',\n shadowOpacity: 0.2,\n shadowOffset: {width: 0, height: 5},\n shadowRadius: 15,\n elevation: 5,\n }\n }\n})\n\nimport {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'\nimport {Theme} from './theme';\nconst variant = createVariant({themeKey: 'cardVariants', defaults: {\n margin: {\n phone: 's',\n tablet: 'm',\n },\n backgroundColor: 'cardRegularBackground',\n}})\n\nconst Card = createRestyleComponent, Theme>([variant])\n\n\n")),(0,r.kt)("p",null,"Arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that will map to a variant. Defaults to ",(0,r.kt)("inlineCode",{parentName:"li"},"variant"),"."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"themeKey"),": A key in the theme to map values from. Unlike ",(0,r.kt)("inlineCode",{parentName:"li"},"createRestyleFunction"),", this option ",(0,r.kt)("em",{parentName:"li"},"is required")," to create a variant."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"defaults"),": The default values to apply before applying anything from the values in the theme.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/92dde4bf.79200cac.js b/assets/js/92dde4bf.79200cac.js deleted file mode 100644 index e9225832..00000000 --- a/assets/js/92dde4bf.79200cac.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[795],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),g=o,m=u["".concat(l,".").concat(g)]||u[g]||d[g]||i;return n?r.createElement(m,a(a({ref:t},c),{},{components:n})):r.createElement(m,a({ref:t},c))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=g;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,a[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const i={id:"migrating-to-v2",title:"Migrating to Restyle V2"},a=void 0,s={unversionedId:"guides/migrating-to-v2",id:"guides/migrating-to-v2",title:"Migrating to Restyle V2",description:"v2 of this library introduces breaking changes in the usage of the useRestyle hook.",source:"@site/docs/guides/migrating-to-v2.md",sourceDirName:"guides",slug:"/guides/migrating-to-v2",permalink:"/restyle/guides/migrating-to-v2",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/migrating-to-v2.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"migrating-to-v2",title:"Migrating to Restyle V2"},sidebar:"docs",previous:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},p=[{value:"Addressing breaking changes in useRestyle",id:"addressing-breaking-changes-in-userestyle",level:2},{value:"Before",id:"before",level:3},{value:"After",id:"after",level:3}],c={toc:p};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"v2 of this library introduces breaking changes in the usage of the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook.\nIf you are not using ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," in your project, then you don't need to address any breaking change and can upgrade the library right away."),(0,o.kt)("h2",{id:"addressing-breaking-changes-in-userestyle"},"Addressing breaking changes in ",(0,o.kt)("inlineCode",{parentName:"h2"},"useRestyle")),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Import ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")," from ",(0,o.kt)("inlineCode",{parentName:"li"},"@shopify/restyle")),(0,o.kt)("li",{parentName:"ol"},"Wrap the array you were using as param of ",(0,o.kt)("inlineCode",{parentName:"li"},"useRestyle")," with ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")),(0,o.kt)("li",{parentName:"ol"},"Done")),(0,o.kt)("h3",{id:"before"},"Before"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = [spacing, border, backgroundColor];\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")),(0,o.kt)("h3",{id:"after"},"After"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/92dde4bf.dfd2f9e7.js b/assets/js/92dde4bf.dfd2f9e7.js new file mode 100644 index 00000000..8c8256b8 --- /dev/null +++ b/assets/js/92dde4bf.dfd2f9e7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[795],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),g=o,m=u["".concat(l,".").concat(g)]||u[g]||d[g]||i;return n?r.createElement(m,a(a({ref:t},c),{},{components:n})):r.createElement(m,a({ref:t},c))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=g;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,a[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const i={id:"migrating-to-v2",title:"Migrating to Restyle V2"},a=void 0,s={unversionedId:"guides/migrating-to-v2",id:"guides/migrating-to-v2",title:"Migrating to Restyle V2",description:"v2 of this library introduces breaking changes in the usage of the useRestyle hook.",source:"@site/docs/guides/migrating-to-v2.md",sourceDirName:"guides",slug:"/guides/migrating-to-v2",permalink:"/restyle/guides/migrating-to-v2",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/migrating-to-v2.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"migrating-to-v2",title:"Migrating to Restyle V2"},sidebar:"docs",previous:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},p=[{value:"Addressing breaking changes in useRestyle",id:"addressing-breaking-changes-in-userestyle",level:2},{value:"Before",id:"before",level:3},{value:"After",id:"after",level:3}],c={toc:p};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"v2 of this library introduces breaking changes in the usage of the ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," hook.\nIf you are not using ",(0,o.kt)("inlineCode",{parentName:"p"},"useRestyle")," in your project, then you don't need to address any breaking change and can upgrade the library right away."),(0,o.kt)("h2",{id:"addressing-breaking-changes-in-userestyle"},"Addressing breaking changes in ",(0,o.kt)("inlineCode",{parentName:"h2"},"useRestyle")),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Import ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")," from ",(0,o.kt)("inlineCode",{parentName:"li"},"@shopify/restyle")),(0,o.kt)("li",{parentName:"ol"},"Wrap the array you were using as param of ",(0,o.kt)("inlineCode",{parentName:"li"},"useRestyle")," with ",(0,o.kt)("inlineCode",{parentName:"li"},"composeRestyleFunctions")),(0,o.kt)("li",{parentName:"ol"},"Done")),(0,o.kt)("h3",{id:"before"},"Before"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = [spacing, border, backgroundColor];\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")),(0,o.kt)("h3",{id:"after"},"After"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {TouchableOpacity, View} from 'react-native';\nimport {\n useRestyle,\n spacing,\n border,\n backgroundColor,\n SpacingProps,\n BorderProps,\n BackgroundColorProps,\n composeRestyleFunctions,\n} from '@shopify/restyle';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst restyleFunctions = composeRestyleFunctions([\n spacing,\n border,\n backgroundColor,\n]);\ntype Props = SpacingProps &\n BorderProps &\n BackgroundColorProps & {\n onPress: () => void;\n };\n\nconst Button = ({onPress, label, ...rest}: Props) => {\n const props = useRestyle(restyleFunctions, rest);\n\n return (\n \n \n {label}\n \n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9825658c.4d757538.js b/assets/js/9825658c.b4e3eeca.js similarity index 50% rename from assets/js/9825658c.4d757538.js rename to assets/js/9825658c.b4e3eeca.js index cddc6ca4..20925ea4 100644 --- a/assets/js/9825658c.4d757538.js +++ b/assets/js/9825658c.b4e3eeca.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[661],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,s=e.originalType,p=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),u=l(n),y=o,g=u["".concat(p,".").concat(y)]||u[y]||m[y]||s;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var s=n.length,i=new Array(s);i[0]=y;var a={};for(var p in t)hasOwnProperty.call(t,p)&&(a[p]=t[p]);a.originalType=e,a[u]="string"==typeof e?e:o,i[1]=a;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var r=n(7462),o=(n(7294),n(3905));const s={id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},i=void 0,a={unversionedId:"guides/shopify-design-system",id:"guides/shopify-design-system",title:"Getting Setup With the Shopify Design System",description:"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.",source:"@site/docs/guides/shopify-design-system.md",sourceDirName:"guides",slug:"/guides/shopify-design-system",permalink:"/restyle/guides/shopify-design-system",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/shopify-design-system.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},sidebar:"docs",previous:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"},next:{title:"Migrating to Restyle V2",permalink:"/restyle/guides/migrating-to-v2"}},p={},l=[{value:"Installation",id:"installation",level:4},{value:"Define Your Theme",id:"define-your-theme",level:4}],c={toc:l};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"To start using Shopify style assets we can leverage ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/Shopify/polaris/tree/main/polaris-tokens"},"Polaris tokens"),". You can see all of the tokens ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/tokens/colors"},"here"),"."),(0,o.kt)("h4",{id:"installation"},"Installation"),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://www.npmjs.com/"},"npm"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"npm install @shopify/polaris-tokens --save")),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://yarnpkg.com/en/"},"yarn"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"yarn add @shopify/polaris-tokens")),(0,o.kt)("h4",{id:"define-your-theme"},"Define Your Theme"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In theme\nimport tokens from '@shopify/polaris-tokens';\nimport {createTheme} from '@shopify/restyle';\n\nconst pxToNumber = (px: string) => {\n return parseInt(px.replace('px', ''), 10);\n};\n\nconst theme = createTheme({\n colors: {\n body: tokens.colorBlack,\n backgroundRegular: tokens.colorWhite,\n backgroundSubdued: tokens.colorSkyLighter,\n\n foregroundRegular: tokens.colorBlack,\n foregroundOff: tokens.colorInkLight,\n foregroundSubdued: tokens.colorInkLightest,\n foregroundContrasting: tokens.colorWhite,\n foregroundSuccess: tokens.colorGreenDark,\n\n highlightPrimary: tokens.colorIndigo,\n highlightPrimaryDisabled: tokens.colorIndigoLight,\n\n buttonBackgroundPlain: tokens.colorSky,\n errorPrimary: tokens.colorRed,\n\n iconBackgroundDark: tokens.colorBlueDarker,\n },\n spacing: {\n none: tokens.spacingNone,\n xxs: pxToNumber(tokens.spacingExtraTight),\n xs: pxToNumber(tokens.spacingTight),\n s: pxToNumber(tokens.spacingBaseTight),\n m: pxToNumber(tokens.spacingBase),\n l: pxToNumber(tokens.spacingLoose),\n xl: pxToNumber(tokens.spacingExtraLoose),\n xxl: 2 * pxToNumber(tokens.spacingExtraLoose),\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,"Now you can easily style your components with ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/"},"Shopify Polaris"),"."))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[661],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,s=e.originalType,p=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),u=l(n),y=o,g=u["".concat(p,".").concat(y)]||u[y]||m[y]||s;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var s=n.length,i=new Array(s);i[0]=y;var a={};for(var p in t)hasOwnProperty.call(t,p)&&(a[p]=t[p]);a.originalType=e,a[u]="string"==typeof e?e:o,i[1]=a;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var r=n(7462),o=(n(7294),n(3905));const s={id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},i=void 0,a={unversionedId:"guides/shopify-design-system",id:"guides/shopify-design-system",title:"Getting Setup With the Shopify Design System",description:"To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.",source:"@site/docs/guides/shopify-design-system.md",sourceDirName:"guides",slug:"/guides/shopify-design-system",permalink:"/restyle/guides/shopify-design-system",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/shopify-design-system.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"shopify-design-system",title:"Getting Setup With the Shopify Design System"},sidebar:"docs",previous:{title:"Running the fixture app",permalink:"/restyle/guides/fixture-app"},next:{title:"Migrating to Restyle V2",permalink:"/restyle/guides/migrating-to-v2"}},p={},l=[{value:"Installation",id:"installation",level:4},{value:"Define Your Theme",id:"define-your-theme",level:4}],c={toc:l};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"To start using Shopify style assets we can leverage ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/Shopify/polaris/tree/main/polaris-tokens"},"Polaris tokens"),". You can see all of the tokens ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/tokens/colors"},"here"),"."),(0,o.kt)("h4",{id:"installation"},"Installation"),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://www.npmjs.com/"},"npm"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"npm install @shopify/polaris-tokens --save")),(0,o.kt)("p",null,"Using ",(0,o.kt)("a",{parentName:"p",href:"https://yarnpkg.com/en/"},"yarn"),":"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"yarn add @shopify/polaris-tokens")),(0,o.kt)("h4",{id:"define-your-theme"},"Define Your Theme"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In theme\nimport tokens from '@shopify/polaris-tokens';\nimport {createTheme} from '@shopify/restyle';\n\nconst pxToNumber = (px: string) => {\n return parseInt(px.replace('px', ''), 10);\n};\n\nconst theme = createTheme({\n colors: {\n body: tokens.colorBlack,\n backgroundRegular: tokens.colorWhite,\n backgroundSubdued: tokens.colorSkyLighter,\n\n foregroundRegular: tokens.colorBlack,\n foregroundOff: tokens.colorInkLight,\n foregroundSubdued: tokens.colorInkLightest,\n foregroundContrasting: tokens.colorWhite,\n foregroundSuccess: tokens.colorGreenDark,\n\n highlightPrimary: tokens.colorIndigo,\n highlightPrimaryDisabled: tokens.colorIndigoLight,\n\n buttonBackgroundPlain: tokens.colorSky,\n errorPrimary: tokens.colorRed,\n\n iconBackgroundDark: tokens.colorBlueDarker,\n },\n spacing: {\n none: tokens.spacingNone,\n xxs: pxToNumber(tokens.spacingExtraTight),\n xs: pxToNumber(tokens.spacingTight),\n s: pxToNumber(tokens.spacingBaseTight),\n m: pxToNumber(tokens.spacingBase),\n l: pxToNumber(tokens.spacingLoose),\n xl: pxToNumber(tokens.spacingExtraLoose),\n xxl: 2 * pxToNumber(tokens.spacingExtraLoose),\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,"Now you can easily style your components with ",(0,o.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/"},"Shopify Polaris"),"."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9cd7d415.a6019768.js b/assets/js/9cd7d415.7c9cfb35.js similarity index 52% rename from assets/js/9cd7d415.a6019768.js rename to assets/js/9cd7d415.7c9cfb35.js index a8efc43d..24654aae 100644 --- a/assets/js/9cd7d415.a6019768.js +++ b/assets/js/9cd7d415.7c9cfb35.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[218],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(n),d=o,f=m["".concat(s,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(f,i(i({ref:t},c),{},{components:n})):r.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const a={id:"defining-your-theme",title:"Defining your theme"},i=void 0,l={unversionedId:"fundamentals/defining-your-theme",id:"fundamentals/defining-your-theme",title:"Defining your theme",description:'Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.',source:"@site/docs/fundamentals/defining-your-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/defining-your-theme",permalink:"/restyle/fundamentals/defining-your-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/defining-your-theme.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"defining-your-theme",title:"Defining your theme"},sidebar:"docs",previous:{title:"Fundamentals",permalink:"/restyle/fundamentals"},next:{title:"Colors",permalink:"/restyle/fundamentals/colors"}},s={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write ",(0,o.kt)("inlineCode",{parentName:"p"},'backgroundColor="cardPrimary"')," to use the named color from your theme. In fact, TypeScript enforces the ",(0,o.kt)("inlineCode",{parentName:"p"},"backgroundColor")," property to ",(0,o.kt)("em",{parentName:"p"},"only")," accept colors that have been defined in your theme, and autocompletes values for you in a modern editor."),(0,o.kt)("p",null,"Below is an example of how a basic theme could look. Make sure to read the other sections in ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals"},"Fundamentals")," for more details on how to set up your different theme values."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {createTheme} from '@shopify/restyle';\n\nconst palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n cardPrimaryBackground: palette.purplePrimary,\n },\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n textVariants: {\n header: {\n fontWeight: 'bold',\n fontSize: 34,\n },\n body: {\n fontSize: 16,\n lineHeight: 24,\n },\n defaults: {\n // We can define a default text variant here.\n },\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,(0,o.kt)("em",{parentName:"p"},"Note: ",(0,o.kt)("inlineCode",{parentName:"em"},"createTheme")," doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the ",(0,o.kt)("inlineCode",{parentName:"em"},"{ [key:string]: any }")," in BaseTheme")),(0,o.kt)("p",null,"This theme should be passed to a ",(0,o.kt)("inlineCode",{parentName:"p"},"ThemeProvider")," at the top of your React tree:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {ThemeProvider} from '@shopify/restyle';\nimport theme from './theme';\n\nconst App = () => (\n {/* Rest of the app */}\n);\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[218],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(n),d=o,f=m["".concat(s,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(f,i(i({ref:t},c),{},{components:n})):r.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var r=n(7462),o=(n(7294),n(3905));const a={id:"defining-your-theme",title:"Defining your theme"},i=void 0,l={unversionedId:"fundamentals/defining-your-theme",id:"fundamentals/defining-your-theme",title:"Defining your theme",description:'Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write backgroundColor="cardPrimary" to use the named color from your theme. In fact, TypeScript enforces the backgroundColor property to only accept colors that have been defined in your theme, and autocompletes values for you in a modern editor.',source:"@site/docs/fundamentals/defining-your-theme.md",sourceDirName:"fundamentals",slug:"/fundamentals/defining-your-theme",permalink:"/restyle/fundamentals/defining-your-theme",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/defining-your-theme.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"defining-your-theme",title:"Defining your theme"},sidebar:"docs",previous:{title:"Fundamentals",permalink:"/restyle/fundamentals"},next:{title:"Colors",permalink:"/restyle/fundamentals/colors"}},s={},p=[],c={toc:p};function m(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any project using this library should have a global theme object which specifies a set of values for spacing, colors, breakpoints, and more. These values are made available to Restyle components, so that you can for example write ",(0,o.kt)("inlineCode",{parentName:"p"},'backgroundColor="cardPrimary"')," to use the named color from your theme. In fact, TypeScript enforces the ",(0,o.kt)("inlineCode",{parentName:"p"},"backgroundColor")," property to ",(0,o.kt)("em",{parentName:"p"},"only")," accept colors that have been defined in your theme, and autocompletes values for you in a modern editor."),(0,o.kt)("p",null,"Below is an example of how a basic theme could look. Make sure to read the other sections in ",(0,o.kt)("a",{parentName:"p",href:"/fundamentals"},"Fundamentals")," for more details on how to set up your different theme values."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import {createTheme} from '@shopify/restyle';\n\nconst palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n cardPrimaryBackground: palette.purplePrimary,\n },\n spacing: {\n s: 8,\n m: 16,\n l: 24,\n xl: 40,\n },\n textVariants: {\n header: {\n fontWeight: 'bold',\n fontSize: 34,\n },\n body: {\n fontSize: 16,\n lineHeight: 24,\n },\n defaults: {\n // We can define a default text variant here.\n },\n },\n});\n\nexport type Theme = typeof theme;\nexport default theme;\n")),(0,o.kt)("p",null,(0,o.kt)("em",{parentName:"p"},"Note: ",(0,o.kt)("inlineCode",{parentName:"em"},"createTheme")," doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the ",(0,o.kt)("inlineCode",{parentName:"em"},"{ [key:string]: any }")," in BaseTheme")),(0,o.kt)("p",null,"This theme should be passed to a ",(0,o.kt)("inlineCode",{parentName:"p"},"ThemeProvider")," at the top of your React tree:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {ThemeProvider} from '@shopify/restyle';\nimport theme from './theme';\n\nconst App = () => (\n {/* Rest of the app */}\n);\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9f55f1ad.3a150d70.js b/assets/js/9f55f1ad.9abf0811.js similarity index 53% rename from assets/js/9f55f1ad.3a150d70.js rename to assets/js/9f55f1ad.9abf0811.js index f0902088..add6bb1c 100644 --- a/assets/js/9f55f1ad.3a150d70.js +++ b/assets/js/9f55f1ad.9abf0811.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[433],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},p),{},{components:n})):r.createElement(h,l({ref:t},p))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"colors",title:"Colors"},l=void 0,i={unversionedId:"fundamentals/colors",id:"fundamentals/colors",title:"Colors",description:"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.",source:"@site/docs/fundamentals/colors.md",sourceDirName:"fundamentals",slug:"/fundamentals/colors",permalink:"/restyle/fundamentals/colors",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/colors.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"colors",title:"Colors"},sidebar:"docs",previous:{title:"Defining your theme",permalink:"/restyle/fundamentals/defining-your-theme"},next:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"}},s={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the ",(0,a.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/design/colors#color-palette"},"Polaris Color Palette"),"."),(0,a.kt)("p",null,"This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n mainForeground: palette.black,\n cardPrimaryBackground: palette.purplePrimary,\n buttonPrimaryBackground: palette.purplePrimary,\n },\n});\n")),(0,a.kt)("p",null,"Taking the time to define these semantic meanings comes with a number of benefits:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"It's easy to understand where and in what context colors are applied throughout the app"),(0,a.kt)("li",{parentName:"ul"},"If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to ",(0,a.kt)("inlineCode",{parentName:"li"},"purplePrimary")," throughout the app."),(0,a.kt)("li",{parentName:"ul"},"Even though ",(0,a.kt)("inlineCode",{parentName:"li"},"cardPrimaryBackground")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"buttonPrimaryBackground")," point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change."),(0,a.kt)("li",{parentName:"ul"},"A theme can easily be ",(0,a.kt)("a",{parentName:"li",href:"/guides/dark-mode"},"swapped at runtime"),".")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[433],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(h,l(l({ref:t},p),{},{components:n})):r.createElement(h,l({ref:t},p))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={id:"colors",title:"Colors"},l=void 0,i={unversionedId:"fundamentals/colors",id:"fundamentals/colors",title:"Colors",description:"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the Polaris Color Palette.",source:"@site/docs/fundamentals/colors.md",sourceDirName:"fundamentals",slug:"/fundamentals/colors",permalink:"/restyle/fundamentals/colors",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/colors.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"colors",title:"Colors"},sidebar:"docs",previous:{title:"Defining your theme",permalink:"/restyle/fundamentals/defining-your-theme"},next:{title:"Spacing",permalink:"/restyle/fundamentals/spacing"}},s={},c=[],p={toc:c};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"When working with colors in a design system a common pattern is to have a palette including a number of base colors with darker and lighter shades, see for example the ",(0,a.kt)("a",{parentName:"p",href:"https://polaris.shopify.com/design/colors#color-palette"},"Polaris Color Palette"),"."),(0,a.kt)("p",null,"This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette, see this example:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const palette = {\n purpleLight: '#8C6FF7',\n purplePrimary: '#5A31F4',\n purpleDark: '#3F22AB',\n\n greenLight: '#56DCBA',\n greenPrimary: '#0ECD9D',\n greenDark: '#0A906E',\n\n black: '#0B0B0B',\n white: '#F0F2F3',\n};\n\nconst theme = createTheme({\n colors: {\n mainBackground: palette.white,\n mainForeground: palette.black,\n cardPrimaryBackground: palette.purplePrimary,\n buttonPrimaryBackground: palette.purplePrimary,\n },\n});\n")),(0,a.kt)("p",null,"Taking the time to define these semantic meanings comes with a number of benefits:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"It's easy to understand where and in what context colors are applied throughout the app"),(0,a.kt)("li",{parentName:"ul"},"If changes are made to the palette (e.g. the purple colors are changed to a shade of blue instead), we only have to update what the semantic names point to instead of updating all references to ",(0,a.kt)("inlineCode",{parentName:"li"},"purplePrimary")," throughout the app."),(0,a.kt)("li",{parentName:"ul"},"Even though ",(0,a.kt)("inlineCode",{parentName:"li"},"cardPrimaryBackground")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"buttonPrimaryBackground")," point to the same color in the example above, deciding that buttons should instead be green (while cards remain purple) becomes a trivial change."),(0,a.kt)("li",{parentName:"ul"},"A theme can easily be ",(0,a.kt)("a",{parentName:"li",href:"/guides/dark-mode"},"swapped at runtime"),".")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/ab0123d0.eb733937.js b/assets/js/ab0123d0.ee6725ca.js similarity index 53% rename from assets/js/ab0123d0.eb733937.js rename to assets/js/ab0123d0.ee6725ca.js index dae0f5e4..ce93bfd6 100644 --- a/assets/js/ab0123d0.eb733937.js +++ b/assets/js/ab0123d0.ee6725ca.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[881],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),i=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=i(n),f=o,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return n?r.createElement(d,s(s({ref:t},c),{},{components:n})):r.createElement(d,s({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,s=new Array(a);s[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:o,s[1]=l;for(var i=2;i{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>i});var r=n(7462),o=(n(7294),n(3905));const a={id:"responsive-values",title:"Responsive values"},s=void 0,l={unversionedId:"fundamentals/responsive-values",id:"fundamentals/responsive-values",title:"Responsive values",description:"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:",source:"@site/docs/fundamentals/responsive-values.md",sourceDirName:"fundamentals",slug:"/fundamentals/responsive-values",permalink:"/restyle/fundamentals/responsive-values",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/responsive-values.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"responsive-values",title:"Responsive values"},sidebar:"docs",previous:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"},next:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"}},p={},i=[],c={toc:i};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the ",(0,o.kt)("inlineCode",{parentName:"p"},"breakpoints")," object in the theme:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n // ...\n breakpoints: {\n phone: 0,\n tablet: 768,\n }\n})\n\n// Props always accept either plain values\n\n\n// Or breakpoint-specific values\n\n")),(0,o.kt)("p",null,"If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useResponsiveProp")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {\n ColorProps,\n createBox,\n useResponsiveProp,\n useTheme,\n} from '@shopify/restyle';\nimport React from 'react';\nimport {\n ActivityIndicator,\n TouchableOpacity,\n TouchableOpacityProps,\n} from 'react-native';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst BaseButton = createBox(TouchableOpacity);\n\ntype Props = React.ComponentProps &\n ColorProps & {\n label: string;\n isLoading?: boolean;\n };\n\nconst Button = ({\n label,\n isLoading,\n color = {phone: 'purple', tablet: 'blue'},\n ...props\n}: Props) => {\n const theme = useTheme();\n\n // Will be 'purple' on phone and 'blue' on tablet\n const textColorProp = useResponsiveProp(color);\n\n // Can safely perform logic with the extracted value\n const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';\n\n return (\n \n \n {label}\n \n {isLoading ? (\n \n ) : null}\n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[881],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),i=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=i(n),f=o,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return n?r.createElement(d,s(s({ref:t},c),{},{components:n})):r.createElement(d,s({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,s=new Array(a);s[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:o,s[1]=l;for(var i=2;i{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>i});var r=n(7462),o=(n(7294),n(3905));const a={id:"responsive-values",title:"Responsive values"},s=void 0,l={unversionedId:"fundamentals/responsive-values",id:"fundamentals/responsive-values",title:"Responsive values",description:"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the breakpoints object in the theme:",source:"@site/docs/fundamentals/responsive-values.md",sourceDirName:"fundamentals",slug:"/fundamentals/responsive-values",permalink:"/restyle/fundamentals/responsive-values",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/responsive-values.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"responsive-values",title:"Responsive values"},sidebar:"docs",previous:{title:"Breakpoints",permalink:"/restyle/fundamentals/breakpoints"},next:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"}},p={},i=[],c={toc:i};function u(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Any prop powered by Restyle can optionally accept a value for each screen size, as defined by the ",(0,o.kt)("inlineCode",{parentName:"p"},"breakpoints")," object in the theme:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"// In your theme\nconst theme = createTheme({\n // ...\n breakpoints: {\n phone: 0,\n tablet: 768,\n }\n})\n\n// Props always accept either plain values\n\n\n// Or breakpoint-specific values\n\n")),(0,o.kt)("p",null,"If you need to extract the value of a responsive prop in a custom component (e.g. to use it outside of component styles), you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useResponsiveProp")," hook:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import {\n ColorProps,\n createBox,\n useResponsiveProp,\n useTheme,\n} from '@shopify/restyle';\nimport React from 'react';\nimport {\n ActivityIndicator,\n TouchableOpacity,\n TouchableOpacityProps,\n} from 'react-native';\n\nimport Text from './Text';\nimport {Theme} from './theme';\n\nconst BaseButton = createBox(TouchableOpacity);\n\ntype Props = React.ComponentProps &\n ColorProps & {\n label: string;\n isLoading?: boolean;\n };\n\nconst Button = ({\n label,\n isLoading,\n color = {phone: 'purple', tablet: 'blue'},\n ...props\n}: Props) => {\n const theme = useTheme();\n\n // Will be 'purple' on phone and 'blue' on tablet\n const textColorProp = useResponsiveProp(color);\n\n // Can safely perform logic with the extracted value\n const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';\n\n return (\n \n \n {label}\n \n {isLoading ? (\n \n ) : null}\n \n );\n};\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/ce6c328c.067e45fe.js b/assets/js/ce6c328c.067e45fe.js new file mode 100644 index 00000000..5ae9291a --- /dev/null +++ b/assets/js/ce6c328c.067e45fe.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[444],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(r),y=a,f=c["".concat(l,".").concat(y)]||c[y]||d[y]||i;return r?n.createElement(f,o(o({ref:t},u),{},{components:r})):n.createElement(f,o({ref:t},u))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:a,o[1]=p;for(var s=2;s{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>i,metadata:()=>p,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const i={id:"fixture-app",title:"Running the fixture app"},o=void 0,p={unversionedId:"guides/fixture-app",id:"guides/fixture-app",title:"Running the fixture app",description:"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:",source:"@site/docs/guides/fixture-app.md",sourceDirName:"guides",slug:"/guides/fixture-app",permalink:"/restyle/guides/fixture-app",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/fixture-app.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"fixture-app",title:"Running the fixture app"},sidebar:"docs",previous:{title:"Implementing dark mode",permalink:"/restyle/guides/dark-mode"},next:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},s=[{value:"Making changes to Restyle",id:"making-changes-to-restyle",level:3}],u={toc:s};function c(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"First, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn up")," to install all the Restyle and fixture app dependencies.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Next, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn start")," to start Metro.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Lastly, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-ios")," to start the app on iOS, and ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-android")," to start the app on Android."))),(0,a.kt)("p",null,"Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's ",(0,a.kt)("a",{parentName:"p",href:"https://reactnative.dev/docs/environment-setup"},"Setting up the development environment"),"."),(0,a.kt)("h3",{id:"making-changes-to-restyle"},"Making changes to Restyle"),(0,a.kt)("p",null,"When making changes to Restyle (the code in ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Shopify/restyle/tree/master/src"},"/src"),"), you'll need to run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn build")," to use the latest Restyle build in the fixture app."))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/ce6c328c.f11d6dee.js b/assets/js/ce6c328c.f11d6dee.js deleted file mode 100644 index 4fc5763d..00000000 --- a/assets/js/ce6c328c.f11d6dee.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[444],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(r),y=a,f=c["".concat(l,".").concat(y)]||c[y]||d[y]||o;return r?n.createElement(f,i(i({ref:t},u),{},{components:r})):n.createElement(f,i({ref:t},u))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=y;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:a,i[1]=p;for(var s=2;s{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>c,frontMatter:()=>o,metadata:()=>p,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const o={id:"fixture-app",title:"Running the fixture app"},i=void 0,p={unversionedId:"guides/fixture-app",id:"guides/fixture-app",title:"Running the fixture app",description:"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:",source:"@site/docs/guides/fixture-app.md",sourceDirName:"guides",slug:"/guides/fixture-app",permalink:"/restyle/guides/fixture-app",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/guides/fixture-app.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"fixture-app",title:"Running the fixture app"},sidebar:"docs",previous:{title:"Implementing dark mode",permalink:"/restyle/guides/dark-mode"},next:{title:"Getting Setup With the Shopify Design System",permalink:"/restyle/guides/shopify-design-system"}},l={},s=[{value:"Making changes to Restyle",id:"making-changes-to-restyle",level:3}],u={toc:s};function c(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"The fixture app serves as a playground to either learn to use Restyle, test changes to the library, or simply prototype ideas. To get it running, follow the steps below:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"First, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn up")," to install all the Restyle and fixture app dependencies.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Next, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn start")," to start Metro.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Lastly, run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-ios")," to start the app on iOS, and ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn run-android")," to start the app on Android."))),(0,a.kt)("p",null,"Your local iOS simulator and Android emulator should open automatically. If they do not, please follow React Native's ",(0,a.kt)("a",{parentName:"p",href:"https://reactnative.dev/docs/environment-setup"},"Setting up the development environment"),"."),(0,a.kt)("h3",{id:"making-changes-to-restyle"},"Making changes to Restyle"),(0,a.kt)("p",null,"When making changes to Restyle (the code in ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/Shopify/restyle/tree/master/src"},"/src"),"), you'll need to run ",(0,a.kt)("inlineCode",{parentName:"p"},"yarn build")," to use the latest Restyle build in the fixture app."))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d5140e4c.c6ec60f8.js b/assets/js/d5140e4c.8f707d77.js similarity index 67% rename from assets/js/d5140e4c.c6ec60f8.js rename to assets/js/d5140e4c.8f707d77.js index b64cc260..89021e61 100644 --- a/assets/js/d5140e4c.c6ec60f8.js +++ b/assets/js/d5140e4c.8f707d77.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[899],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),f=a,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||i;return n?r.createElement(m,o(o({ref:t},c),{},{components:n})):r.createElement(m,o({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={id:"breakpoints",title:"Breakpoints"},o=void 0,s={unversionedId:"fundamentals/breakpoints",id:"fundamentals/breakpoints",title:"Breakpoints",description:"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:",source:"@site/docs/fundamentals/breakpoints.md",sourceDirName:"fundamentals",slug:"/fundamentals/breakpoints",permalink:"/restyle/fundamentals/breakpoints",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/breakpoints.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"breakpoints",title:"Breakpoints"},sidebar:"docs",previous:{title:"Variants",permalink:"/restyle/fundamentals/variants"},next:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n breakpoints: {\n phone: 0,\n longPhone: {\n width: 0,\n height: 812,\n },\n tablet: 768,\n largeTablet: 1024,\n },\n});\n")),(0,a.kt)("p",null,"See the ",(0,a.kt)("a",{parentName:"p",href:"/fundamentals/responsive-values"},"Responsive Values")," section to see how these can be used. Defining ",(0,a.kt)("inlineCode",{parentName:"p"},"breakpoints")," is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur."))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[899],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),p=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),f=a,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||i;return n?r.createElement(m,o(o({ref:t},c),{},{components:n})):r.createElement(m,o({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={id:"breakpoints",title:"Breakpoints"},o=void 0,s={unversionedId:"fundamentals/breakpoints",id:"fundamentals/breakpoints",title:"Breakpoints",description:"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:",source:"@site/docs/fundamentals/breakpoints.md",sourceDirName:"fundamentals",slug:"/fundamentals/breakpoints",permalink:"/restyle/fundamentals/breakpoints",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/breakpoints.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"breakpoints",title:"Breakpoints"},sidebar:"docs",previous:{title:"Variants",permalink:"/restyle/fundamentals/variants"},next:{title:"Responsive values",permalink:"/restyle/fundamentals/responsive-values"}},l={},p=[],c={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Breakpoints are defined as minimum widths (inclusive) for different target screen sizes where we want to apply differing styles. Consider giving your breakpoints names that give a general idea of the type of device the user is using. Breakpoints can be defined by either a single value (width) or an object containing both width and height:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const theme = createTheme({\n breakpoints: {\n phone: 0,\n longPhone: {\n width: 0,\n height: 812,\n },\n tablet: 768,\n largeTablet: 1024,\n },\n});\n")),(0,a.kt)("p",null,"See the ",(0,a.kt)("a",{parentName:"p",href:"/fundamentals/responsive-values"},"Responsive Values")," section to see how these can be used. Defining ",(0,a.kt)("inlineCode",{parentName:"p"},"breakpoints")," is optional and we recommend defining it only if you plan to use them due to a performance hit (up to 10 % worse average FPS when scrolling in a list) responsive values incur."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fa28435c.5179aff5.js b/assets/js/fa28435c.5179aff5.js new file mode 100644 index 00000000..55fe93f4 --- /dev/null +++ b/assets/js/fa28435c.5179aff5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[263],{3905:(t,e,n)=>{n.d(e,{Zo:()=>s,kt:()=>y});var r=n(7294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var p=r.createContext({}),d=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},s=function(t){var e=d(t.components);return r.createElement(p.Provider,{value:e},t.children)},m="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},c=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,s=i(t,["components","mdxType","originalType","parentName"]),m=d(n),c=a,y=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?r.createElement(y,o(o({ref:e},s),{},{components:n})):r.createElement(y,o({ref:e},s))}));function y(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=t,i[m]="string"==typeof t?t:a,o[1]=i;for(var d=2;d{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>i,toc:()=>d});var r=n(7462),a=(n(7294),n(3905));const l={id:"restyle-functions",title:"Restyle functions"},o=void 0,i={unversionedId:"fundamentals/restyle-functions",id:"fundamentals/restyle-functions",title:"Restyle functions",description:"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.",source:"@site/docs/fundamentals/restyle-functions.md",sourceDirName:"fundamentals",slug:"/fundamentals/restyle-functions",permalink:"/restyle/fundamentals/restyle-functions",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/restyle-functions.md",tags:[],version:"current",lastUpdatedBy:"Guilherme Varandas",lastUpdatedAt:1708635413,formattedLastUpdatedAt:"Feb 22, 2024",frontMatter:{id:"restyle-functions",title:"Restyle functions"},sidebar:"docs",previous:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"},next:{title:"Components",permalink:"/restyle/fundamentals/components"}},p={},d=[{value:"Predefined Restyle functions",id:"predefined-restyle-functions",level:2},{value:"Custom Restyle functions",id:"custom-restyle-functions",level:2}],s={toc:d};function m(t){let{components:e,...n}=t;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme."),(0,a.kt)("h2",{id:"predefined-restyle-functions"},"Predefined Restyle functions"),(0,a.kt)("p",null,"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name."),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Restyle Function"),(0,a.kt)("th",{parentName:"tr",align:null},"Props"),(0,a.kt)("th",{parentName:"tr",align:null},"Theme Key"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor"),(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor ","[bg]"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"visible"),(0,a.kt)("td",{parentName:"tr",align:null},"display (maps ",(0,a.kt)("inlineCode",{parentName:"td"},"true")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"false")," to ",(0,a.kt)("inlineCode",{parentName:"td"},"flex")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"none"),")"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"spacing"),(0,a.kt)("td",{parentName:"tr",align:null},"margin ","[m]",", marginTop ","[mt]",", marginRight ","[mr]",", marginBottom ","[mb]",", marginLeft ","[ml]",", marginStart ","[ms]",", marginEnd","[me]",", marginHorizontal ","[mx]",", marginVertical ","[my]",", padding ","[p]",", paddingTop ","[pt]",", paddingRight ","[pr]",", paddingBottom ","[pb]",", paddingLeft ","[pl]",", paddingStart ","[ps]",", paddingEnd ","[pe]",", paddingHorizontal ","[px]",", paddingVertical ","[py]",", gap ","[g]",", rowGap ","[rG]",", columnGap ","[cG]"),(0,a.kt)("td",{parentName:"tr",align:null},"spacing")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"layout"),(0,a.kt)("td",{parentName:"tr",align:null},"width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"position, top, right, bottom, left, start, end"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndex"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndices")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadii")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowOpacity, shadowOffset, shadowRadius, elevation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowOffset, textShadowRadius"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"typography"),(0,a.kt)("td",{parentName:"tr",align:null},"fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))))),(0,a.kt)("h2",{id:"custom-restyle-functions"},"Custom Restyle functions"),(0,a.kt)("p",null,"To define your own Restyle function, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"createRestyleFunction")," helper:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'\nconst transparency = createRestyleFunction({\n property: 'transparency',\n styleProperty: 'opacity',\n transform: ({value}: {value: number}) => 1 - value,\n});\n\nconst TransparentComponent = createRestyleComponent([transparency])\n\n\n")),(0,a.kt)("p",null,"Arguments:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that the function will receive the value of."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"styleProperty"),": The name of the property in the style object to map to. Defaults to the value of ",(0,a.kt)("inlineCode",{parentName:"li"},"property"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"transform({value, theme, themeKey})"),": An optional function that transforms the value of the prop to the value that will be inserted into the style object."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"themeKey"),": An optional key in the theme to map values from, e.g. ",(0,a.kt)("inlineCode",{parentName:"li"},"colors"),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fa28435c.8c8ef4cd.js b/assets/js/fa28435c.8c8ef4cd.js deleted file mode 100644 index c5d43a0a..00000000 --- a/assets/js/fa28435c.8c8ef4cd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[263],{3905:(t,e,n)=>{n.d(e,{Zo:()=>s,kt:()=>y});var r=n(7294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function o(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var p=r.createContext({}),d=function(t){var e=r.useContext(p),n=e;return t&&(n="function"==typeof t?t(e):o(o({},e),t)),n},s=function(t){var e=d(t.components);return r.createElement(p.Provider,{value:e},t.children)},m="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},c=r.forwardRef((function(t,e){var n=t.components,a=t.mdxType,l=t.originalType,p=t.parentName,s=i(t,["components","mdxType","originalType","parentName"]),m=d(n),c=a,y=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?r.createElement(y,o(o({ref:e},s),{},{components:n})):r.createElement(y,o({ref:e},s))}));function y(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=n.length,o=new Array(l);o[0]=c;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=t,i[m]="string"==typeof t?t:a,o[1]=i;for(var d=2;d{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>i,toc:()=>d});var r=n(7462),a=(n(7294),n(3905));const l={id:"restyle-functions",title:"Restyle functions"},o=void 0,i={unversionedId:"fundamentals/restyle-functions",id:"fundamentals/restyle-functions",title:"Restyle functions",description:"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme.",source:"@site/docs/fundamentals/restyle-functions.md",sourceDirName:"fundamentals",slug:"/fundamentals/restyle-functions",permalink:"/restyle/fundamentals/restyle-functions",draft:!1,editUrl:"https://github.com/shopify/restyle/edit/master/docusaurus/docs/fundamentals/restyle-functions.md",tags:[],version:"current",lastUpdatedBy:"Lorenzo Sciandra",lastUpdatedAt:1692373236,formattedLastUpdatedAt:"Aug 18, 2023",frontMatter:{id:"restyle-functions",title:"Restyle functions"},sidebar:"docs",previous:{title:"Overriding styles",permalink:"/restyle/fundamentals/overriding-styles"},next:{title:"Components",permalink:"/restyle/fundamentals/components"}},p={},d=[{value:"Predefined Restyle functions",id:"predefined-restyle-functions",level:2},{value:"Custom Restyle functions",id:"custom-restyle-functions",level:2}],s={toc:d};function m(t){let{components:e,...n}=t;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Restyle functions are the bread and butter of Restyle. They specify how props should be mapped to values in a resulting style object, that can then be passed down to a React Native component. The props support responsive values and can be mapped to values in your theme."),(0,a.kt)("h2",{id:"predefined-restyle-functions"},"Predefined Restyle functions"),(0,a.kt)("p",null,"The Restyle library comes with a number of predefined Restyle functions for your convenience. Properties within brackets are aliases / shorthands for the preceding prop name."),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Restyle Function"),(0,a.kt)("th",{parentName:"tr",align:null},"Props"),(0,a.kt)("th",{parentName:"tr",align:null},"Theme Key"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor"),(0,a.kt)("td",{parentName:"tr",align:null},"backgroundColor ","[bg]"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"color"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},"opacity"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"visible"),(0,a.kt)("td",{parentName:"tr",align:null},"display (maps ",(0,a.kt)("inlineCode",{parentName:"td"},"true")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"false")," to ",(0,a.kt)("inlineCode",{parentName:"td"},"flex")," / ",(0,a.kt)("inlineCode",{parentName:"td"},"none"),")"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"spacing"),(0,a.kt)("td",{parentName:"tr",align:null},"margin ","[m]",", marginTop ","[mt]",", marginRight ","[mr]",", marginBottom ","[mb]",", marginLeft ","[ml]",", marginStart ","[ms]",", marginEnd","[me]",", marginHorizontal ","[mx]",", marginVertical ","[my]",", padding ","[p]",", paddingTop ","[pt]",", paddingRight ","[pr]",", paddingBottom ","[pb]",", paddingLeft ","[pl]",", paddingStart ","[ps]",", paddingEnd ","[pe]",", paddingHorizontal ","[px]",", paddingVertical ","[py]",", gap ","[g]",", rowGap ","[rG]",", columnGap ","[cG]"),(0,a.kt)("td",{parentName:"tr",align:null},"spacing")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"layout"),(0,a.kt)("td",{parentName:"tr",align:null},"width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"position, top, right, bottom, left, start, end"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"position"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndex"),(0,a.kt)("td",{parentName:"tr",align:null},"zIndices")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"border"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius"),(0,a.kt)("td",{parentName:"tr",align:null},"borderRadii")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowOpacity, shadowOffset, shadowRadius, elevation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"shadow"),(0,a.kt)("td",{parentName:"tr",align:null},"shadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowOffset, textShadowRadius"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"textShadow"),(0,a.kt)("td",{parentName:"tr",align:null},"textShadowColor"),(0,a.kt)("td",{parentName:"tr",align:null},"colors")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"typography"),(0,a.kt)("td",{parentName:"tr",align:null},"fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("em",{parentName:"td"},"none"))))),(0,a.kt)("h2",{id:"custom-restyle-functions"},"Custom Restyle functions"),(0,a.kt)("p",null,"To define your own Restyle function, use the ",(0,a.kt)("inlineCode",{parentName:"p"},"createRestyleFunction")," helper:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"import {createRestyleFunction, createRestyleComponent} from '@shopify/restyle'\nconst transparency = createRestyleFunction({\n property: 'transparency',\n styleProperty: 'opacity',\n transform: ({value}: {value: number}) => 1 - value,\n});\n\nconst TransparentComponent = createRestyleComponent([transparency])\n\n\n")),(0,a.kt)("p",null,"Arguments:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"property"),": The name of the component prop that the function will receive the value of."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"styleProperty"),": The name of the property in the style object to map to. Defaults to the value of ",(0,a.kt)("inlineCode",{parentName:"li"},"property"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"transform({value, theme, themeKey})"),": An optional function that transforms the value of the prop to the value that will be inserted into the style object."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"themeKey"),": An optional key in the theme to map values from, e.g. ",(0,a.kt)("inlineCode",{parentName:"li"},"colors"),".")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.39761b0f.js b/assets/js/main.945f31fb.js similarity index 99% rename from assets/js/main.39761b0f.js rename to assets/js/main.945f31fb.js index 6beb209b..caff2c99 100644 --- a/assets/js/main.39761b0f.js +++ b/assets/js/main.945f31fb.js @@ -1,2 +1,2 @@ -/*! For license information please see main.39761b0f.js.LICENSE.txt */ -(self.webpackChunkrestyle=self.webpackChunkrestyle||[]).push([[179],{723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o),l=n(6887);const s={"14eb3368":[()=>Promise.all([n.e(532),n.e(817)]).then(n.bind(n,4228)),"@theme/DocCategoryGeneratedIndexPage",4228],17896441:[()=>Promise.all([n.e(532),n.e(918)]).then(n.bind(n,5824)),"@theme/DocItem",5824],"1a4e3797":[()=>Promise.all([n.e(532),n.e(920)]).then(n.bind(n,2027)),"@theme/SearchPage",2027],"1be78505":[()=>Promise.all([n.e(532),n.e(514)]).then(n.bind(n,9963)),"@theme/DocPage",9963],"3002f4e5":[()=>n.e(462).then(n.bind(n,6004)),"@site/docs/fundamentals/components/predefined-components.md",6004],"33d50a8e":[()=>n.e(641).then(n.bind(n,9482)),"@site/docs/fundamentals/components/custom-components.md",9482],"357d96e7":[()=>n.e(287).then(n.t.bind(n,2776,19)),"/home/runner/work/restyle/restyle/documentation/.docusaurus/@easyops-cn/docusaurus-search-local/default/plugin-route-context-module-100.json",2776],"4edc808e":[()=>Promise.all([n.e(532),n.e(173)]).then(n.bind(n,1240)),"@site/docs/index.mdx",1240],"5a58cff1":[()=>n.e(118).then(n.bind(n,6105)),"@site/docs/fundamentals/spacing.md",6105],"5c9eef2d":[()=>n.e(892).then(n.bind(n,4919)),"@site/docs/guides/dark-mode.md",4919],"63d0de19":[()=>n.e(493).then(n.bind(n,9664)),"@site/docs/fundamentals/accessing-the-theme.md",9664],"6ab114b0":[()=>n.e(387).then(n.bind(n,4408)),"@site/docs/fundamentals/overriding-styles.md",4408],"815f03a2":[()=>n.e(730).then(n.t.bind(n,3769,19)),"/home/runner/work/restyle/restyle/documentation/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],83398278:[()=>n.e(352).then(n.bind(n,4169)),"@site/docs/fundamentals/variants.md",4169],"89b3da96":[()=>n.e(830).then(n.t.bind(n,9206,19)),"~docs/default/category-restyle-docs-category-fundamentals-8fe.json",9206],"926ca428":[()=>n.e(106).then(n.t.bind(n,4745,19)),"~docs/default/category-restyle-docs-category-components-65e.json",4745],"92dde4bf":[()=>n.e(795).then(n.bind(n,4627)),"@site/docs/guides/migrating-to-v2.md",4627],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"9825658c":[()=>n.e(661).then(n.bind(n,2758)),"@site/docs/guides/shopify-design-system.md",2758],"9cd7d415":[()=>n.e(218).then(n.bind(n,9354)),"@site/docs/fundamentals/defining-your-theme.md",9354],"9f55f1ad":[()=>n.e(433).then(n.bind(n,38)),"@site/docs/fundamentals/colors.md",38],a029320f:[()=>n.e(581).then(n.t.bind(n,7116,19)),"~docs/default/category-restyle-docs-category-guides-3de.json",7116],ab0123d0:[()=>n.e(881).then(n.bind(n,2661)),"@site/docs/fundamentals/responsive-values.md",2661],ce6c328c:[()=>n.e(444).then(n.bind(n,3709)),"@site/docs/guides/fixture-app.md",3709],d5140e4c:[()=>n.e(899).then(n.bind(n,8033)),"@site/docs/fundamentals/breakpoints.md",8033],fa28435c:[()=>n.e(263).then(n.bind(n,6478)),"@site/docs/fundamentals/restyle-functions.md",6478]};function u(e){let{error:t,retry:n,pastDelay:a}=e;return t?r.createElement("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%"}},r.createElement("p",null,String(t)),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("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"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"8"},r.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var c=n(9670),d=n(226);function f(e,t){if("*"===e)return i()({loading:u,loader:()=>n.e(972).then(n.bind(n,4972)),modules:["@theme/NotFound"],webpack:()=>[4972],render(e,t){const n=e.default;return r.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},r.createElement(n,t))}});const o=l[`${e}-${t}`],f={},p=[],m=[],h=(0,c.Z)(o);return Object.entries(h).forEach((e=>{let[t,n]=e;const r=s[n];r&&(f[t]=r[0],p.push(r[1]),m.push(r[2]))})),i().Map({loading:u,loader:f,modules:p,webpack:()=>m,render(t,n){const i=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,r]=t;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 o=i;const l=n.split(".");l.slice(0,-1).forEach((e=>{o=o[e]})),o[l[l.length-1]]=a}));const l=i.__comp;delete i.__comp;const s=i.__context;return delete i.__context,r.createElement(d.z,{value:s},r.createElement(l,(0,a.Z)({},i,n)))}})}const p=[{path:"/restyle/search",component:f("/restyle/search","e36"),exact:!0},{path:"/restyle/",component:f("/restyle/","18d"),routes:[{path:"/restyle/",component:f("/restyle/","071"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals",component:f("/restyle/fundamentals","9da"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/accessing-the-theme",component:f("/restyle/fundamentals/accessing-the-theme","88c"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/breakpoints",component:f("/restyle/fundamentals/breakpoints","af2"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/colors",component:f("/restyle/fundamentals/colors","b32"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/components",component:f("/restyle/fundamentals/components","d42"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/components/custom-components",component:f("/restyle/fundamentals/components/custom-components","4f5"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/components/predefined-components",component:f("/restyle/fundamentals/components/predefined-components","5bc"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/defining-your-theme",component:f("/restyle/fundamentals/defining-your-theme","a7a"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/overriding-styles",component:f("/restyle/fundamentals/overriding-styles","1ea"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/responsive-values",component:f("/restyle/fundamentals/responsive-values","3f9"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/restyle-functions",component:f("/restyle/fundamentals/restyle-functions","12a"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/spacing",component:f("/restyle/fundamentals/spacing","438"),exact:!0,sidebar:"docs"},{path:"/restyle/fundamentals/variants",component:f("/restyle/fundamentals/variants","2fa"),exact:!0,sidebar:"docs"},{path:"/restyle/guides",component:f("/restyle/guides","3c1"),exact:!0,sidebar:"docs"},{path:"/restyle/guides/dark-mode",component:f("/restyle/guides/dark-mode","da1"),exact:!0,sidebar:"docs"},{path:"/restyle/guides/fixture-app",component:f("/restyle/guides/fixture-app","072"),exact:!0,sidebar:"docs"},{path:"/restyle/guides/migrating-to-v2",component:f("/restyle/guides/migrating-to-v2","3e5"),exact:!0,sidebar:"docs"},{path:"/restyle/guides/shopify-design-system",component:f("/restyle/guides/shopify-design-system","525"),exact:!0,sidebar:"docs"}]},{path:"*",component:f("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>o});var r=n(7294);const a=r.createContext(!1);function o(e){let{children:t}=e;const[n,o]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{o(!0)}),[]),r.createElement(a.Provider,{value:n},t)}},9383:(e,t,n)=>{"use strict";var r=n(7294),a=n(3935),o=n(3727),i=n(405),l=n(412);const s=[n(2497),n(3310),n(8320)];var u=n(723),c=n(6550),d=n(8790);function f(e){let{children:t}=e;return r.createElement(r.Fragment,null,t)}var p=n(7462),m=n(5742),h=n(2263),g=n(4996),y=n(6668),v=n(1944),b=n(4711),E=n(9727),w=n(3320),k=n(197);function S(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,h.Z)(),n=(0,b.l)();return r.createElement(m.Z,null,Object.entries(t).map((e=>{let[t,{htmlLang:a}]=e;return r.createElement("link",{key:t,rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:a})})),r.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function x(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),a=function(){const{siteConfig:{url:e}}=(0,h.Z)(),{pathname:t}=(0,c.TH)();return e+(0,g.Z)(t)}(),o=t?`${n}${t}`:a;return r.createElement(m.Z,null,r.createElement("meta",{property:"og:url",content:o}),r.createElement("link",{rel:"canonical",href:o}))}function T(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,y.L)();return r.createElement(r.Fragment,null,r.createElement(m.Z,null,r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("body",{className:E.h})),n&&r.createElement(v.d,{image:n}),r.createElement(x,null),r.createElement(S,null),r.createElement(k.Z,{tag:w.HX,locale:e}),r.createElement(m.Z,null,t.map(((e,t)=>r.createElement("meta",(0,p.Z)({key:t},e))))))}const C=new Map;function _(e){if(C.has(e.pathname))return{...e,pathname:C.get(e.pathname)};if((0,d.f)(u.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return C.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return C.set(e.pathname,t),{...e,pathname:t}}var L=n(8934),N=n(8940);function O(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r(t.default?.[e]??t[e])?.(...n)));return()=>a.forEach((e=>e?.()))}const I=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,r.useLayoutEffect)((()=>{a!==n&&(a&&function(e){const{hash:t}=e;if(t){const e=decodeURIComponent(t.substring(1));document.getElementById(e)?.scrollIntoView()}else window.scrollTo(0,0)}(n),O("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function A(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(u.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class R extends r.Component{constructor(e){super(e),this.previousLocation=void 0,this.routeUpdateCleanupCb=void 0,this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?O("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=O("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),A(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return r.createElement(I,{previousLocation:this.previousLocation,location:t},r.createElement(c.AW,{location:t,render:()=>e}))}}const P=R,D="docusaurus-base-url-issue-banner-container",M="docusaurus-base-url-issue-banner-suggestion-container",F="__DOCUSAURUS_INSERT_BASEURL_BANNER";function B(e){return`\nwindow['${F}'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['${F}'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('${D}');\n if (!bannerContainer) {\n return;\n }\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
\n`}(e)).replace(/{window[F]=!1}),[]),r.createElement(r.Fragment,null,!l.Z.canUseDOM&&r.createElement(m.Z,null,r.createElement("script",null,B(e))),r.createElement("div",{id:D}))}function $(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.Z)(),{pathname:n}=(0,c.TH)();return t&&n===e?r.createElement(U,null):null}function z(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:a,localeConfigs:o}}=(0,h.Z)(),i=(0,g.Z)(e),{htmlLang:l,direction:s}=o[a];return r.createElement(m.Z,null,r.createElement("html",{lang:l,dir:s}),r.createElement("title",null,t),r.createElement("meta",{property:"og:title",content:t}),r.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&r.createElement("meta",{name:"robots",content:"noindex, nofollow"}),e&&r.createElement("link",{rel:"icon",href:i}))}var j=n(4763);function H(){const e=(0,d.H)(u.Z),t=(0,c.TH)();return r.createElement(j.Z,null,r.createElement(N.M,null,r.createElement(L.t,null,r.createElement(f,null,r.createElement(z,null),r.createElement(T,null),r.createElement($,null),r.createElement(P,{location:_(t)},e)))))}var Z=n(6887);const Q=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();(document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode)?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var V=n(9670);const G=new Set,W=new Set,q=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,Y={prefetch(e){if(!(e=>!q()&&!W.has(e)&&!G.has(e))(e))return!1;G.add(e);const t=(0,d.f)(u.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(Z).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,V.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Q(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!q()&&!W.has(e))(e)&&(W.add(e),A(e))},K=Object.freeze(Y);if(l.Z.canUseDOM){window.docusaurus=K;const e=a.hydrate;A(window.location.pathname).then((()=>{e(r.createElement(i.B6,null,r.createElement(o.VK,null,r.createElement(H,null))),document.getElementById("__docusaurus"))}))}},8940:(e,t,n)=>{"use strict";n.d(t,{_:()=>c,M:()=>d});var r=n(7294),a=n(6809);const o=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/restyle/","versions":[{"name":"current","label":"Next","isLast":true,"path":"/restyle/","mainDocId":"getting-started","docs":[{"id":"fundamentals/accessing-the-theme","path":"/restyle/fundamentals/accessing-the-theme","sidebar":"docs"},{"id":"fundamentals/breakpoints","path":"/restyle/fundamentals/breakpoints","sidebar":"docs"},{"id":"fundamentals/colors","path":"/restyle/fundamentals/colors","sidebar":"docs"},{"id":"fundamentals/components/custom-components","path":"/restyle/fundamentals/components/custom-components","sidebar":"docs"},{"id":"fundamentals/components/predefined-components","path":"/restyle/fundamentals/components/predefined-components","sidebar":"docs"},{"id":"fundamentals/defining-your-theme","path":"/restyle/fundamentals/defining-your-theme","sidebar":"docs"},{"id":"fundamentals/overriding-styles","path":"/restyle/fundamentals/overriding-styles","sidebar":"docs"},{"id":"fundamentals/responsive-values","path":"/restyle/fundamentals/responsive-values","sidebar":"docs"},{"id":"fundamentals/restyle-functions","path":"/restyle/fundamentals/restyle-functions","sidebar":"docs"},{"id":"fundamentals/spacing","path":"/restyle/fundamentals/spacing","sidebar":"docs"},{"id":"fundamentals/variants","path":"/restyle/fundamentals/variants","sidebar":"docs"},{"id":"getting-started","path":"/restyle/","sidebar":"docs"},{"id":"guides/dark-mode","path":"/restyle/guides/dark-mode","sidebar":"docs"},{"id":"guides/fixture-app","path":"/restyle/guides/fixture-app","sidebar":"docs"},{"id":"guides/migrating-to-v2","path":"/restyle/guides/migrating-to-v2","sidebar":"docs"},{"id":"guides/shopify-design-system","path":"/restyle/guides/shopify-design-system","sidebar":"docs"},{"id":"/fundamentals","path":"/restyle/fundamentals","sidebar":"docs"},{"id":"fundamentals/components","path":"/restyle/fundamentals/components","sidebar":"docs"},{"id":"guides","path":"/restyle/guides","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/restyle/","label":"Getting started"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"2.2.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.2.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.2.0"},"@easyops-cn/docusaurus-search-local":{"type":"package","name":"@easyops-cn/docusaurus-search-local","version":"0.33.6"}}}'),u={siteConfig:a.Z,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},c=r.createContext(u);function d(e){let{children:t}=e;return r.createElement(c.Provider,{value:u},t)}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});var r=n(7294),a=n(412),o=n(5742),i=n(3929);function l(e){let{error:t,tryAgain:n}=e;return r.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",height:"50vh",width:"100%",fontSize:"20px"}},r.createElement("h1",null,"This page crashed."),r.createElement("p",null,t.message),r.createElement("button",{type:"button",onClick:n},"Try again"))}function s(e){let{error:t,tryAgain:n}=e;return r.createElement(c,{fallback:()=>r.createElement(l,{error:t,tryAgain:n})},r.createElement(o.Z,null,r.createElement("title",null,"Page Error")),r.createElement(i.Z,null,r.createElement(l,{error:t,tryAgain:n})))}const u=e=>r.createElement(s,e);class c extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??u)(e)}return e??null}}},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(405);function o(e){return r.createElement(a.ql,e)}},9960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(7462),a=n(7294),o=n(3727),i=n(8780),l=n(2263),s=n(3919),u=n(412);const c=a.createContext({collectLink:()=>{}});var d=n(4996);function f(e,t){let{isNavLink:n,to:f,href:p,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":g,autoAddBaseUrl:y=!0,...v}=e;const{siteConfig:{trailingSlash:b,baseUrl:E}}=(0,l.Z)(),{withBaseUrl:w}=(0,d.C)(),k=(0,a.useContext)(c),S=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>S.current));const x=f||p;const T=(0,s.Z)(x),C=x?.replace("pathname://","");let _=void 0!==C?(L=C,y&&(e=>e.startsWith("/"))(L)?w(L):L):void 0;var L;_&&T&&(_=(0,i.applyTrailingSlash)(_,{trailingSlash:b,baseUrl:E}));const N=(0,a.useRef)(!1),O=n?o.OL:o.rU,I=u.Z.canUseIntersectionObserver,A=(0,a.useRef)(),R=()=>{N.current||null==_||(window.docusaurus.preload(_),N.current=!0)};(0,a.useEffect)((()=>(!I&&T&&null!=_&&window.docusaurus.prefetch(_),()=>{I&&A.current&&A.current.disconnect()})),[A,_,I,T]);const P=_?.startsWith("#")??!1,D=!_||!T||P;return D||g||k.collectLink(_),D?a.createElement("a",(0,r.Z)({ref:S,href:_},x&&!T&&{target:"_blank",rel:"noopener noreferrer"},v)):a.createElement(O,(0,r.Z)({},v,{onMouseEnter:R,onTouchStart:R,innerRef:e=>{S.current=e,I&&e&&T&&(A.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(A.current.unobserve(e),A.current.disconnect(),null!=_&&window.docusaurus.prefetch(_))}))})),A.current.observe(e))},to:_},n&&{isActive:h,activeClassName:m}))}const p=a.forwardRef(f)},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s,I:()=>l});var r=n(7294);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var o=n(7529);function i(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return o[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(i({message:n,id:r}),t)}function s(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const l=i({message:t,id:n});return r.createElement(r.Fragment,null,a(l,o))}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>o,Z:()=>i});var r=n(2263),a=n(3919);function o(){const{siteConfig:{baseUrl:e,url:t}}=(0,r.Z)();return{withBaseUrl:(n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:o=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,a.b)(n))return n;if(o)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)}}function i(e,t){void 0===t&&(t={});const{withBaseUrl:n}=o();return n(e,t)}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8940);function o(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8934);function o(){return(0,r.useContext)(a._)}},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});function r(e){const t={};return function e(n,r){Object.entries(n).forEach((n=>{let[a,o]=n;const i=r?`${r}.${a}`:a;var l;"object"==typeof(l=o)&&l&&Object.keys(l).length>0?e(o,i):t[i]=o}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>o});var r=n(7294);const a=r.createContext(null);function o(e){let{children:t,value:n}=e;const o=r.useContext(a),i=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:o,value:n})),[o,n]);return r.createElement(a.Provider,{value:i},t)}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>f,_r:()=>c,Jo:()=>g,zh:()=>d,yW:()=>m,gB:()=>p});var r=n(6550),a=n(2263),o=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=function(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const u={},c=()=>i("docusaurus-plugin-content-docs")??u,d=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e)?.[t];if(!r&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return r}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=c(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function p(e){return d(e).versions}function m(e){const t=d(e);return l(t)}function h(e){const t=d(e),{pathname:n}=(0,r.TH)();return s(t,n)}function g(e){const t=d(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:s(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r=n(7410),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.Z,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{n(2585)(`./prism-${e}`)})),delete globalThis.Prism}(r.Z)},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294);const a="iconExternalLink_nPIU";function o(e){let{width:t=13.5,height:n=13.5}=e;return r.createElement("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a},r.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},3929:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Wt});var r=n(7294),a=n(6010),o=n(4763),i=n(1944),l=n(7462),s=n(6550),u=n(5999),c=n(5936);const d="docusaurus_skipToContent_fallback";function f(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function p(){const e=(0,r.useRef)(null),{action:t}=(0,s.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&f(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&f(e.current)})),{containerRef:e,onClick:n}}const m=(0,u.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:a}=p();return r.createElement("div",{ref:n,role:"region","aria-label":m},r.createElement("a",(0,l.Z)({},e,{href:`#${d}`,onClick:a}),t))}var g=n(5281),y=n(9727);const v="skipToContent_fXgn";function b(){return r.createElement(h,{className:v})}var E=n(6668),w=n(9689);function k(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...s}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 15 15",width:t,height:n},s),r.createElement("g",{stroke:a,strokeWidth:o},r.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const S="closeButton_CVFx";function x(e){return r.createElement("button",(0,l.Z)({type:"button","aria-label":(0,u.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,a.Z)("clean-btn close",S,e.className)}),r.createElement(k,{width:14,height:14,strokeWidth:3.1}))}const T="content_knG7";function C(e){const{announcementBar:t}=(0,E.L)(),{content:n}=t;return r.createElement("div",(0,l.Z)({},e,{className:(0,a.Z)(T,e.className),dangerouslySetInnerHTML:{__html:n}}))}const _="announcementBar_mb4j",L="announcementBarPlaceholder_vyr4",N="announcementBarClose_gvF7",O="announcementBarContent_xLdY";function I(){const{announcementBar:e}=(0,E.L)(),{isActive:t,close:n}=(0,w.nT)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:i}=e;return r.createElement("div",{className:_,style:{backgroundColor:a,color:o},role:"banner"},i&&r.createElement("div",{className:L}),r.createElement(C,{className:O}),i&&r.createElement(x,{onClick:n,className:N}))}var A=n(2961),R=n(2466);var P=n(902),D=n(3102);const M=r.createContext(null);function F(e){let{children:t}=e;const n=function(){const e=(0,A.e)(),t=(0,D.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,P.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return r.createElement(M.Provider,{value:n},t)}function B(e){if(e.component){const t=e.component;return r.createElement(t,e.props)}}function U(){const e=(0,r.useContext)(M);if(!e)throw new P.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,D.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:B(o)})),[a,o,t])}function $(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:i}=U();return r.createElement("div",{className:"navbar-sidebar"},t,r.createElement("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},r.createElement("div",{className:"navbar-sidebar__item menu"},n),r.createElement("div",{className:"navbar-sidebar__item menu"},o)))}var z=n(2949),j=n(2389);function H(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function Z(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}const Q={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function V(e){let{className:t,value:n,onChange:o}=e;const i=(0,j.Z)(),l=(0,u.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===n?(0,u.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,u.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return r.createElement("div",{className:(0,a.Z)(Q.toggle,t)},r.createElement("button",{className:(0,a.Z)("clean-btn",Q.toggleButton,!i&&Q.toggleButtonDisabled),type:"button",onClick:()=>o("dark"===n?"light":"dark"),disabled:!i,title:l,"aria-label":l,"aria-live":"polite"},r.createElement(H,{className:(0,a.Z)(Q.toggleIcon,Q.lightToggleIcon)}),r.createElement(Z,{className:(0,a.Z)(Q.toggleIcon,Q.darkToggleIcon)})))}const G=r.memo(V);function W(e){let{className:t}=e;const n=(0,E.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:o}=(0,z.I)();return n?null:r.createElement(G,{className:t,value:a,onChange:o})}var q=n(1327);function Y(){return r.createElement(q.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,A.e)();return r.createElement("button",{type:"button","aria-label":(0,u.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle()},r.createElement(k,{color:"var(--ifm-color-emphasis-600)"}))}function X(){return r.createElement("div",{className:"navbar-sidebar__brand"},r.createElement(Y,null),r.createElement(W,{className:"margin-right--md"}),r.createElement(K,null))}var J=n(9960),ee=n(4996),te=n(3919);function ne(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var re=n(9471);function ae(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:i,html:s,isDropdownLink:u,prependBaseUrlToHref:c,...d}=e;const f=(0,ee.Z)(a),p=(0,ee.Z)(t),m=(0,ee.Z)(o,{forcePrependBaseUrl:!0}),h=i&&o&&!(0,te.Z)(o),g=s?{dangerouslySetInnerHTML:{__html:s}}:{children:r.createElement(r.Fragment,null,i,h&&r.createElement(re.Z,u&&{width:12,height:12}))};return o?r.createElement(J.Z,(0,l.Z)({href:c?m:o},d,g)):r.createElement(J.Z,(0,l.Z)({to:f,isNavLink:!0},(t||n)&&{isActive:(e,t)=>n?ne(n,t.pathname):t.pathname.startsWith(p)},d,g))}function oe(e){let{className:t,isDropdownItem:n=!1,...o}=e;const i=r.createElement(ae,(0,l.Z)({className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n},o));return n?r.createElement("li",null,i):i}function ie(e){let{className:t,isDropdownItem:n,...o}=e;return r.createElement("li",{className:"menu__list-item"},r.createElement(ae,(0,l.Z)({className:(0,a.Z)("menu__link",t)},o)))}function le(e){let{mobile:t=!1,position:n,...a}=e;const o=t?ie:oe;return r.createElement(o,(0,l.Z)({},a,{activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")}))}var se=n(6043),ue=n(8596),ce=n(2263);function de(e,t){return e.some((e=>function(e,t){return!!(0,ue.Mg)(e.to,t)||!!ne(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function fe(e){let{items:t,position:n,className:o,onClick:i,...s}=e;const u=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[u]),r.createElement("div",{ref:u,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c})},r.createElement(ae,(0,l.Z)({"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,a.Z)("navbar__link",o)},s,{onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))}}),s.children??s.label),r.createElement("ul",{className:"dropdown__menu"},t.map(((e,n)=>r.createElement(dt,(0,l.Z)({isDropdownItem:!0,onKeyDown:e=>{if(n===t.length-1&&"Tab"===e.key){e.preventDefault(),d(!1);const t=u.current.nextElementSibling;if(t){(t instanceof HTMLAnchorElement?t:t.querySelector("a")).focus()}}},activeClassName:"dropdown__link--active"},e,{key:n}))))))}function pe(e){let{items:t,className:n,position:o,onClick:i,...u}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,ce.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),d=de(t,c),{collapsed:f,toggleCollapsed:p,setCollapsed:m}=(0,se.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),r.createElement("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":f})},r.createElement(ae,(0,l.Z)({role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",n)},u,{onClick:e=>{e.preventDefault(),p()}}),u.children??u.label),r.createElement(se.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:f},t.map(((e,t)=>r.createElement(dt,(0,l.Z)({mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active"},e,{key:t}))))))}function me(e){let{mobile:t=!1,...n}=e;const a=t?pe:fe;return r.createElement(a,n)}var he=n(4711);function ge(e){let{width:t=20,height:n=20,...a}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0},a),r.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}const ye="iconLanguage_nlXk";var ve=n(1029),be=n(412),Ee=n(373),we=n(143),ke=n(22),Se=n(8202),xe=n(3926),Te=n(1073),Ce=n(2539),_e=n(726);const Le="searchBar_RVTs",Ne="dropdownMenu_qbY6",Oe="searchBarLeft_MXDe",Ie="suggestion_fB_2",Ae="cursor_eG29",Re="hitTree_kk6K",Pe="hitIcon_a7Zy",De="hitPath_ieM4",Me="noResultsIcon_EBY5",Fe="hitFooter_E9YW",Be="hitWrapper_sAK8",Ue="hitTitle_vyVt",$e="hitAction_NqkB",ze="noResults_l6Q3",je="searchBarContainer_NW3z",He="searchBarLoadingRing_YnHq",Ze="searchClearButton_qk4g",Qe="searchIndexLoading_EJ1f",Ve="searchHintContainer_Pkmr",Ge="searchHint_iIMx",We="focused_OWtg",qe="input_FOTf",Ye="hint_URu1",Ke="suggestions_X8XU",Xe="dataset_QiCy",Je="empty_eITn";function et(e){let{document:t,type:n,page:r,metadata:a,tokens:o,isInterOfTree:i,isLastOfTree:l}=e;const s=0===n,u=1===n,c=[];i?c.push(''):l&&c.push('');const d=c.map((e=>`${e}`)),f=`${s?'':u?'':''}`,p=[`${(0,_e.o)(t.t,(0,Te.m)(a,"t"),o)}`];if(!i&&!l&&ve.H6){const e=r?(r.b??[]).concat(r.t).concat(t.s&&t.s!==r.t?t.s:[]):t.b;p.push(`${(0,xe.e)(e??[])}`)}else s||p.push(`${(0,Ce.C)(r.t||(t.u.startsWith("/docs/api-reference/")?"API Reference":""),o)}`);const m=``;return[...d,f,``,...p,"",m].join("")}function tt(){return`${(0,u.I)({id:"theme.SearchBar.noResultsText",message:"No results"})}`}var nt=n(311);async function rt(){const e=await Promise.all([n.e(443),n.e(525)]).then(n.t.bind(n,8443,23)),t=e.default;return t.noConflict?t.noConflict():e.noConflict&&e.noConflict(),t}const at="_highlight";const ot=function(e){let{handleSearchBarToggle:t}=e;const{siteConfig:{baseUrl:n}}=(0,ce.Z)(),o=(0,we.gA)();let i=n;try{const{preferredVersion:e}=(0,Ee.J)(o?.pluginId??ve.gQ);e&&!e.isLast&&(i=e.path+"/")}catch(D){if(ve.l9&&!(D instanceof P.i6))throw D}const l=(0,s.k6)(),c=(0,s.TH)(),d=(0,r.useRef)(null),f=(0,r.useRef)(new Map),p=(0,r.useRef)(!1),[m,h]=(0,r.useState)(!1),[g,y]=(0,r.useState)(!1),[v,b]=(0,r.useState)(""),E=(0,r.useRef)(null),w=(0,r.useRef)(""),[k,S]=(0,r.useState)("");(0,r.useEffect)((()=>{if(!Array.isArray(ve.Kc))return;let e="";if(c.pathname.startsWith(i)){const t=c.pathname.substring(i.length),n=ve.Kc.find((e=>t===e||t.startsWith(`${e}/`)));n&&(e=n)}w.current!==e&&(f.current.delete(e),w.current=e),S(e)}),[c.pathname,i]);const x=!!ve.hG&&Array.isArray(ve.Kc)&&""===k,T=(0,r.useCallback)((async()=>{if(x||f.current.get(k))return;f.current.set(k,"loading"),E.current?.autocomplete.destroy(),h(!0);const[{wrappedIndexes:e,zhDictionary:t},r]=await Promise.all([(0,ke.w)(i,k),rt()]);if(E.current=r(d.current,{hint:!1,autoselect:!0,openOnFocus:!0,cssClasses:{root:(0,a.Z)(Le,{[Oe]:"left"===ve.pu}),noPrefix:!0,dropdownMenu:Ne,input:qe,hint:Ye,suggestions:Ke,suggestion:Ie,cursor:Ae,dataset:Xe,empty:Je}},[{source:(0,Se.v)(e,t,ve.qo),templates:{suggestion:et,empty:tt,footer:e=>{let{query:t,isEmpty:r}=e;if(r)return;const a=document.createElement("a"),o=new URLSearchParams;if(o.set("q",t),Array.isArray(ve.Kc)&&o.set("ctx",k),i!==n){if(!i.startsWith(n))throw new Error(`Version url '${i}' does not start with base url '${n}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);o.set("version",i.substring(n.length))}const s=`${n}search?${o.toString()}`;a.href=s,a.textContent=(0,u.I)({id:"theme.SearchBar.seeAll",message:"See all results"}),a.addEventListener("click",(e=>{e.ctrlKey||e.metaKey||(e.preventDefault(),E.current?.autocomplete.close(),l.push(s))}));const c=document.createElement("div");return c.className=Fe,c.appendChild(a),c}}}]).on("autocomplete:selected",(function(e,t){let{document:{u:n,h:r},tokens:a}=t;d.current?.blur();let o=n;if(ve.vc&&a.length>0){const e=new URLSearchParams;for(const t of a)e.append(at,t);o+=`?${e.toString()}`}r&&(o+=r),l.push(o)})).on("autocomplete:closed",(()=>{d.current?.blur()})),f.current.set(k,"done"),h(!1),p.current){const e=d.current;e.value&&E.current?.autocomplete.open(),e.focus()}}),[x,k,i,n,l]);(0,r.useEffect)((()=>{if(!ve.vc)return;const e=be.Z.canUseDOM?new URLSearchParams(c.search).getAll(at):[];setTimeout((()=>{const t=document.querySelector("article");if(!t)return;const n=new ve.vc(t);n.unmark(),0!==e.length&&n.mark(e),b(e.join(" ")),E.current?.autocomplete.setVal(e.join(" "))}))}),[c.search,c.pathname]);const[C,_]=(0,r.useState)(!1),L=(0,r.useCallback)((()=>{p.current=!0,T(),_(!0),t?.(!0)}),[t,T]),N=(0,r.useCallback)((()=>{_(!1),t?.(!1)}),[t]),O=(0,r.useCallback)((()=>{T()}),[T]),I=(0,r.useCallback)((e=>{b(e.target.value),e.target.value&&y(!0)}),[]),A=!!be.Z.canUseDOM&&/mac/i.test(navigator.userAgentData?.platform??navigator.platform);(0,r.useEffect)((()=>{if(!ve.AY)return;const e=e=>{!(A?e.metaKey:e.ctrlKey)||"k"!==e.key&&"K"!==e.key||(e.preventDefault(),d.current?.focus(),L())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[A,L]);const R=(0,r.useCallback)((()=>{const e=new URLSearchParams(c.search);e.delete(at);const t=e.toString(),n=c.pathname+(""!=t?`?${t}`:"")+c.hash;n!=c.pathname+c.search+c.hash&&l.push(n),b(""),E.current?.autocomplete.setVal("")}),[c.pathname,c.search,c.hash,l]);return r.createElement("div",{className:(0,a.Z)("navbar__search",je,{[Qe]:m&&g,[We]:C}),hidden:x},r.createElement("input",{placeholder:(0,u.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),"aria-label":"Search",className:"navbar__search-input",onMouseEnter:O,onFocus:L,onBlur:N,onChange:I,ref:d,value:v}),r.createElement(nt.Z,{className:He}),ve.AY&&ve.t_&&(""!==v?r.createElement("button",{className:Ze,onClick:R},"\u2715"):be.Z.canUseDOM&&r.createElement("div",{className:Ve},r.createElement("kbd",{className:Ge},A?"\u2318":"ctrl"),r.createElement("kbd",{className:Ge},"K"))))},it="searchBox_ZlJk";function lt(e){let{children:t,className:n}=e;return r.createElement("div",{className:(0,a.Z)(n,it)},t)}var st=n(3438);const ut=e=>e.docs.find((t=>t.id===e.mainDocId));const ct={default:le,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,ce.Z)(),f=(0,he.l)(),{search:p,hash:m}=(0,s.TH)(),h=[...n,...c.map((e=>{const n=`${`pathname://${f.createUrl({locale:e,fullyQualified:!1})}`}${p}${m}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...a],g=t?(0,u.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return r.createElement(me,(0,l.Z)({},o,{mobile:t,label:r.createElement(r.Fragment,null,r.createElement(ge,{className:ye}),g),items:h}))},search:function(e){let{mobile:t,className:n}=e;return t?null:r.createElement(lt,{className:n},r.createElement(ot,null))},dropdown:me,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:i=!1}=e;const l=i?"li":"div";return r.createElement(l,{className:(0,a.Z)({navbar__item:!o&&!i,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,we.Iw)(a),s=(0,st.vY)(t,a);return null===s?null:r.createElement(le,(0,l.Z)({exact:!0},o,{isActive:()=>i?.path===s.path||!!i?.sidebar&&i.sidebar===s.sidebar,label:n??s.id,to:s.path}))},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,we.Iw)(a),s=(0,st.oz)(t,a).link;if(!s)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return r.createElement(le,(0,l.Z)({exact:!0},o,{isActive:()=>i?.sidebar===t,label:n??s.label,to:s.path}))},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const i=(0,st.lO)(a)[0],s=t??i.label,u=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return r.createElement(le,(0,l.Z)({},o,{label:s,to:u}))},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:i,...c}=e;const{search:d,hash:f}=(0,s.TH)(),p=(0,we.Iw)(n),m=(0,we.gB)(n),{savePreferredVersionName:h}=(0,Ee.J)(n),g=[...o,...m.map((e=>{const t=p.alternateDocVersions[e.name]??ut(e);return{label:e.label,to:`${t.path}${d}${f}`,isActive:()=>e===p.activeVersion,onClick:()=>h(e.name)}})),...i],y=(0,st.lO)(n)[0],v=t&&g.length>1?(0,u.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):y.label,b=t&&g.length>1?void 0:ut(y).path;return g.length<=1?r.createElement(le,(0,l.Z)({},c,{mobile:t,label:v,to:b,isActive:a?()=>!1:void 0})):r.createElement(me,(0,l.Z)({},c,{mobile:t,label:v,to:b,items:g,isActive:a?()=>!1:void 0}))}};function dt(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=ct[a];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return r.createElement(o,n)}function ft(){const e=(0,A.e)(),t=(0,E.L)().navbar.items;return r.createElement("ul",{className:"menu__list"},t.map(((t,n)=>r.createElement(dt,(0,l.Z)({mobile:!0},t,{onClick:()=>e.toggle(),key:n})))))}function pt(e){return r.createElement("button",(0,l.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),r.createElement(u.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function mt(){const e=0===(0,E.L)().navbar.items.length,t=U();return r.createElement(r.Fragment,null,!e&&r.createElement(pt,{onClick:()=>t.hide()}),t.content)}function ht(){const e=(0,A.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?r.createElement($,{header:r.createElement(X,null),primaryMenu:r.createElement(ft,null),secondaryMenu:r.createElement(mt,null)}):null}const gt="navbarHideable_m1mJ",yt="navbarHidden_jGov";function vt(e){return r.createElement("div",(0,l.Z)({role:"presentation"},e,{className:(0,a.Z)("navbar-sidebar__backdrop",e.className)}))}function bt(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,E.L)(),i=(0,A.e)(),{navbarRef:l,isNavbarVisible:s}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,R.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+u{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return r.createElement("nav",{ref:l,className:(0,a.Z)("navbar","navbar--fixed-top",n&&[gt,!s&&yt],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown})},t,r.createElement(vt,{onClick:i.toggle}),r.createElement(ht,null))}function Et(e){let{width:t=30,height:n=30,className:a,...o}=e;return r.createElement("svg",(0,l.Z)({className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true"},o),r.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}function wt(){const{toggle:e,shown:t}=(0,A.e)();return r.createElement("button",{onClick:e,"aria-label":(0,u.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button"},r.createElement(Et,null))}const kt="colorModeToggle_DEke";function St(e){let{items:t}=e;return r.createElement(r.Fragment,null,t.map(((e,t)=>r.createElement(dt,(0,l.Z)({},e,{key:t})))))}function xt(e){let{left:t,right:n}=e;return r.createElement("div",{className:"navbar__inner"},r.createElement("div",{className:"navbar__items"},t),r.createElement("div",{className:"navbar__items navbar__items--right"},n))}function Tt(){const e=(0,A.e)(),t=(0,E.L)().navbar.items,[n,a]=function(e){function t(e){return"left"===(e.position??"right")}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return r.createElement(xt,{left:r.createElement(r.Fragment,null,!e.disabled&&r.createElement(wt,null),r.createElement(Y,null),r.createElement(St,{items:n})),right:r.createElement(r.Fragment,null,r.createElement(St,{items:a}),r.createElement(W,{className:kt}),!o&&r.createElement(lt,null,r.createElement(ot,null)))})}function Ct(){return r.createElement(bt,null,r.createElement(Tt,null))}function _t(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:i,...s}=t,u=(0,ee.Z)(n),c=(0,ee.Z)(a,{forcePrependBaseUrl:!0});return r.createElement(J.Z,(0,l.Z)({className:"footer__link-item"},a?{href:i?c:a}:{to:u},s),o,a&&!(0,te.Z)(a)&&r.createElement(re.Z,null))}function Lt(e){let{item:t}=e;return t.html?r.createElement("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement("li",{key:t.href??t.to,className:"footer__item"},r.createElement(_t,{item:t}))}function Nt(e){let{column:t}=e;return r.createElement("div",{className:"col footer__col"},r.createElement("div",{className:"footer__title"},t.title),r.createElement("ul",{className:"footer__items clean-list"},t.items.map(((e,t)=>r.createElement(Lt,{key:t,item:e})))))}function Ot(e){let{columns:t}=e;return r.createElement("div",{className:"row footer__links"},t.map(((e,t)=>r.createElement(Nt,{key:t,column:e}))))}function It(){return r.createElement("span",{className:"footer__link-separator"},"\xb7")}function At(e){let{item:t}=e;return t.html?r.createElement("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement(_t,{item:t})}function Rt(e){let{links:t}=e;return r.createElement("div",{className:"footer__links text--center"},r.createElement("div",{className:"footer__links"},t.map(((e,n)=>r.createElement(r.Fragment,{key:n},r.createElement(At,{item:e}),t.length!==n+1&&r.createElement(It,null))))))}function Pt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?r.createElement(Ot,{columns:t}):r.createElement(Rt,{links:t})}var Dt=n(941);const Mt="footerLogoLink_BH7S";function Ft(e){let{logo:t}=e;const{withBaseUrl:n}=(0,ee.C)(),o={light:n(t.src),dark:n(t.srcDark??t.src)};return r.createElement(Dt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:o,width:t.width,height:t.height,style:t.style})}function Bt(e){let{logo:t}=e;return t.href?r.createElement(J.Z,{href:t.href,className:Mt,target:t.target},r.createElement(Ft,{logo:t})):r.createElement(Ft,{logo:t})}function Ut(e){let{copyright:t}=e;return r.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function $t(e){let{style:t,links:n,logo:o,copyright:i}=e;return r.createElement("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t})},r.createElement("div",{className:"container container-fluid"},n,(o||i)&&r.createElement("div",{className:"footer__bottom text--center"},o&&r.createElement("div",{className:"margin-bottom--sm"},o),i)))}function zt(){const{footer:e}=(0,E.L)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return r.createElement($t,{style:o,links:n&&n.length>0&&r.createElement(Pt,{links:n}),logo:a&&r.createElement(Bt,{logo:a}),copyright:t&&r.createElement(Ut,{copyright:t})})}const jt=r.memo(zt);var Ht=n(7094);const Zt=(0,P.Qc)([z.S,w.pl,Ht.z,R.OC,Ee.L5,i.VC,function(e){let{children:t}=e;return r.createElement(D.n2,null,r.createElement(A.M,null,r.createElement(F,null,t)))}]);function Qt(e){let{children:t}=e;return r.createElement(Zt,null,t)}function Vt(e){let{error:t,tryAgain:n}=e;return r.createElement("main",{className:"container margin-vert--xl"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col col--6 col--offset-3"},r.createElement("h1",{className:"hero__title"},r.createElement(u.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),r.createElement("p",null,t.message),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},r.createElement(u.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again when the page crashed"},"Try again"))))))}const Gt="mainWrapper_z2l0";function Wt(e){const{children:t,noFooter:n,wrapperClassName:l,title:s,description:u}=e;return(0,y.t)(),r.createElement(Qt,null,r.createElement(i.d,{title:s,description:u}),r.createElement(b,null),r.createElement(I,null),r.createElement(Ct,null),r.createElement("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,Gt,l)},r.createElement(o.Z,{fallback:e=>r.createElement(Vt,e)},t)),!n&&r.createElement(jt,null))}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(7462),a=n(7294),o=n(9960),i=n(4996),l=n(2263),s=n(6668),u=n(941);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,i.Z)(t.src),dark:(0,i.Z)(t.srcDark||t.src)},l=a.createElement(u.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?a.createElement("div",{className:r},l):l}function d(e){const{siteConfig:{title:t}}=(0,l.Z)(),{navbar:{title:n,logo:u}}=(0,s.L)(),{imageClassName:d,titleClassName:f,...p}=e,m=(0,i.Z)(u?.href||"/"),h=n?"":t,g=u?.alt??h;return a.createElement(o.Z,(0,r.Z)({to:m},p,u?.target&&{target:u.target}),u&&a.createElement(c,{logo:u,alt:g,imageClassName:d}),null!=n&&a.createElement("b",{className:f},n))}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(5742);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return r.createElement(a.Z,null,t&&r.createElement("meta",{name:"docusaurus_locale",content:t}),n&&r.createElement("meta",{name:"docusaurus_version",content:n}),o&&r.createElement("meta",{name:"docusaurus_tag",content:o}),i&&r.createElement("meta",{name:"docsearch:language",content:i}),n&&r.createElement("meta",{name:"docsearch:version",content:n}),o&&r.createElement("meta",{name:"docsearch:docusaurus_tag",content:o}))}},941:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7462),a=n(7294),o=n(6010),i=n(2389),l=n(2949);const s={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"};function u(e){const t=(0,i.Z)(),{colorMode:n}=(0,l.I)(),{sources:u,className:c,alt:d,...f}=e,p=t?"dark"===n?["dark"]:["light"]:["light","dark"];return a.createElement(a.Fragment,null,p.map((e=>a.createElement("img",(0,r.Z)({key:e,src:u[e],alt:d,className:(0,o.Z)(s.themedImage,s[`themedImage--${e}`],c)},f)))))}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>i,z:()=>m});var r=n(7462),a=n(7294),o=n(412);function i(e){let{initialState:t}=e;const[n,r]=(0,a.useState)(t??!1),o=(0,a.useCallback)((()=>{r((e=>!e))}),[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:o}}const l={display:"none",overflow:"hidden",height:"0px"},s={display:"block",overflow:"visible",height:"auto"};function u(e,t){const n=t?l:s;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function c(e){let{collapsibleRef:t,collapsed:n,animation:r}=e;const o=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=e.scrollHeight,n=r?.duration??function(e){const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${r?.easing??"ease-in-out"}`,height:`${t}px`}}function i(){const t=a();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return u(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(i(),requestAnimationFrame((()=>{e.style.height=l.height,e.style.overflow=l.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{i()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,r])}function d(e){if(!o.Z.canUseDOM)return e?l:s}function f(e){let{as:t="div",collapsed:n,children:r,animation:o,onCollapseTransitionEnd:i,className:l,disableSSRStyle:s}=e;const f=(0,a.useRef)(null);return c({collapsibleRef:f,collapsed:n,animation:o}),a.createElement(t,{ref:f,style:s?void 0:d(n),onTransitionEnd:e=>{"height"===e.propertyName&&(u(f.current,n),i?.(n))},className:l},r)}function p(e){let{collapsed:t,...n}=e;const[o,i]=(0,a.useState)(!t),[l,s]=(0,a.useState)(t);return(0,a.useLayoutEffect)((()=>{t||i(!0)}),[t]),(0,a.useLayoutEffect)((()=>{o&&s(t)}),[o,t]),o?a.createElement(f,(0,r.Z)({},n,{collapsed:l})):null}function m(e){let{lazy:t,...n}=e;const r=t?p:f;return a.createElement(r,n)}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>p});var r=n(7294),a=n(2389),o=n(12),i=n(902),l=n(6668);const s=(0,o.W)("docusaurus.announcement.dismiss"),u=(0,o.W)("docusaurus.announcement.id"),c=()=>"true"===s.get(),d=e=>s.set(String(e)),f=r.createContext(null);function p(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&c()));(0,r.useEffect)((()=>{o(c())}),[]);const i=(0,r.useCallback)((()=>{d(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&d(!1),!r&&c()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return r.createElement(f.Provider,{value:n},t)}function m(){const e=(0,r.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>g,S:()=>h});var r=n(7294),a=n(412),o=n(902),i=n(12),l=n(6668);const s=r.createContext(void 0),u="theme",c=(0,i.W)(u),d="light",f="dark",p=e=>e===f?f:d;function m(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[o,i]=(0,r.useState)((e=>a.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e))(e));(0,r.useEffect)((()=>{t&&c.del()}),[t]);const s=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(i(t),a&&(e=>{c.set(p(e))})(t)):(i(n?window.matchMedia("(prefers-color-scheme: dark)").matches?f:d:e),c.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",p(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=c.get();null!==t&&s(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,s]);const m=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||m.current?m.current=window.matchMedia("print").matches:s(null)};return e.addListener(r),()=>e.removeListener(r)}),[s,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:s,get isDarkTheme(){return o===f},setLightTheme(){s(d)},setDarkTheme(){s(f)}})),[o,s])}function h(e){let{children:t}=e;const n=m();return r.createElement(s.Provider,{value:n},t)}function g(){const e=(0,r.useContext)(s);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>b,L5:()=>y});var r=n(7294),a=n(143),o=n(9935),i=n(6668),l=n(3438),s=n(902),u=n(12);const c=e=>`docs-preferred-version-${e}`,d=(e,t,n)=>{(0,u.W)(c(e),{persistence:t}).set(n)},f=(e,t)=>(0,u.W)(c(e),{persistence:t}).get(),p=(e,t)=>{(0,u.W)(c(e),{persistence:t}).del()};const m=r.createContext(null);function h(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>(e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}]))))(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=f(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=h();return r.createElement(m.Provider,{value:n},t)}function y(e){let{children:t}=e;return l.cE?r.createElement(g,null,t):r.createElement(r.Fragment,null,t)}function v(){const e=(0,r.useContext)(m);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function b(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,i]=v(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,b:()=>l});var r=n(7294),a=n(902);const o=Symbol("EmptyContext"),i=r.createContext(o);function l(e){let{children:t,name:n,items:a}=e;const o=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return r.createElement(i.Provider,{value:o},t)}function s(){const e=(0,r.useContext)(i);if(e===o)throw new a.i6("DocsSidebarProvider");return e}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>l,q:()=>i});var r=n(7294),a=n(902);const o=r.createContext(null);function i(e){let{children:t,version:n}=e;return r.createElement(o.Provider,{value:n},t)}function l(){const e=(0,r.useContext)(o);if(null===e)throw new a.i6("DocsVersionProvider");return e}},2961:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>p});var r=n(7294),a=n(3102),o=n(7524),i=n(6550),l=n(902);function s(e){!function(e){const t=(0,i.k6)(),n=(0,l.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var u=n(6668);const c=r.createContext(void 0);function d(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,u.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[i,l]=(0,r.useState)(!1);s((()=>{if(i)return l(!1),!1}));const c=(0,r.useCallback)((()=>{l((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&l(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:c,shown:i})),[e,n,c,i])}function f(e){let{children:t}=e;const n=d();return r.createElement(c.Provider,{value:n},t)}function p(){const e=r.useContext(c);if(void 0===e)throw new l.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>s,n2:()=>i});var r=n(7294),a=n(902);const o=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return r.createElement(o.Provider,{value:n},t)}function l(){const e=(0,r.useContext)(o);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function s(e){let{component:t,props:n}=e;const i=(0,r.useContext)(o);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=i,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},7094:(e,t,n)=>{"use strict";n.d(t,{U:()=>u,z:()=>s});var r=n(7294),a=n(12),o=n(902);const i="docusaurus.tab.",l=r.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const[e,t]=(0,r.useState)({}),n=(0,r.useCallback)(((e,t)=>{(0,a.W)(`${i}${e}`).set(t)}),[]);(0,r.useEffect)((()=>{try{const e={};(0,a._)().forEach((t=>{if(t.startsWith(i)){const n=t.substring(i.length);e[n]=(0,a.W)(t).get()}})),t(e)}catch(e){console.error(e)}}),[]);const o=(0,r.useCallback)(((e,r)=>{t((t=>({...t,[e]:r}))),n(e,r)}),[n]);return(0,r.useMemo)((()=>({tabGroupChoices:e,setTabGroupChoices:o})),[e,o])}();return r.createElement(l.Provider,{value:n},t)}function u(){const e=(0,r.useContext)(l);if(null==e)throw new o.i6("TabGroupChoiceProvider");return e}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>u});var r=n(7294),a=n(412);const o="desktop",i="mobile",l="ssr";function s(){return a.Z.canUseDOM?window.innerWidth>996?o:i:l}function u(){const[e,t]=(0,r.useState)((()=>s()));return(0,r.useEffect)((()=>{function e(){t(s())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(undefined)}}),[]),e}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},3438:(e,t,n)=>{"use strict";n.d(t,{MN:()=>x,Wl:()=>m,_F:()=>y,cE:()=>f,hI:()=>S,jA:()=>h,lO:()=>E,oz:()=>w,s1:()=>b,vY:()=>k,xz:()=>p});var r=n(7294),a=n(6550),o=n(8790),i=n(143),l=n(373),s=n(4477),u=n(1116),c=n(7392),d=n(8596);const f=!!i._r;function p(e){const t=(0,s.E)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function m(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=m(t);if(e)return e}}}function h(){const{pathname:e}=(0,a.TH)(),t=(0,u.V)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=v({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}const g=(e,t)=>void 0!==e&&(0,d.Mg)(e,t);function y(e,t){return"link"===e.type?g(e.href,t):"category"===e.type&&(g(e.href,t)||((e,t)=>e.some((e=>y(e,t))))(e.items,t))}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,d.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,d.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function b(){const e=(0,u.V)(),{pathname:t}=(0,a.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function E(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>(0,c.j)([t,n,a].filter(Boolean))),[t,n,a])}function w(e,t){const n=E(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\n Available sidebar ids are:\n - ${Object.keys(t).join("\n- ")}`);return r[1]}),[e,n])}function k(e,t){const n=E(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`DocNavbarItem: couldn't find any doc with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,c.j)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function S(e){let{route:t,versionMetadata:n}=e;const r=(0,a.TH)(),i=t.routes,l=i.find((e=>(0,a.LX)(r.pathname,e)));if(!l)return null;const s=l.sidebar,u=s?n.docsSidebars[s]:void 0;return{docElement:(0,o.H)(i),sidebarName:s,sidebarItems:u}}function x(e){return e.filter((e=>"category"!==e.type||!!m(e)))}},7392:(e,t,n)=>{"use strict";function r(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,r)=>e.findIndex((e=>t(e,n)))!==r))}function a(e){return Array.from(new Set(e))}n.d(t,{j:()=>a,l:()=>r})},1944:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>c,VC:()=>p});var r=n(7294),a=n(6010),o=n(5742),i=n(226);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(4996),u=n(2263);function c(e){let{title:t,description:n,keywords:a,image:i,children:l}=e;const c=function(e){const{siteConfig:t}=(0,u.Z)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,s.C)(),f=i?d(i,{absolute:!0}):void 0;return r.createElement(o.Z,null,t&&r.createElement("title",null,c),t&&r.createElement("meta",{property:"og:title",content:c}),n&&r.createElement("meta",{name:"description",content:n}),n&&r.createElement("meta",{property:"og:description",content:n}),a&&r.createElement("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),f&&r.createElement("meta",{property:"og:image",content:f}),f&&r.createElement("meta",{name:"twitter:image",content:f}),l)}const d=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(d),l=(0,a.Z)(i,t);return r.createElement(d.Provider,{value:l},r.createElement(o.Z,null,r.createElement("html",{className:l})),n)}function p(e){let{children:t}=e;const n=l(),o=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return r.createElement(f,{className:(0,a.Z)(o,i)},t)}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>u,Ql:()=>s,i6:()=>l,zX:()=>o});var r=n(7294);const a=n(412).Z.canUseDOM?r.useLayoutEffect:r.useEffect;function o(e){const t=(0,r.useRef)(e);return a((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return a((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function s(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return r.createElement(r.Fragment,null,e.reduceRight(((e,t)=>r.createElement(t,null,e)),n))}}},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7294),a=n(723),o=n(2263);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>p,OC:()=>s,RF:()=>d,o5:()=>f});var r=n(7294),a=n(412),o=n(2389),i=n(902);const l=r.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return r.createElement(l.Provider,{value:n},t)}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const c=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(c()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=c();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function f(){const e=u(),t=function(){const e=(0,r.useRef)({elem:null,top:0}),t=(0,r.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,r.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]);return(0,r.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,r.useRef)(void 0),a=(0,r.useCallback)((r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{const{restored:r}=t.restore();if(n.current=void 0,r){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,r.useLayoutEffect)((()=>{n.current?.()})),{blockElementScrollPositionUntilNextRender:a}}function p(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>r,os:()=>a});n(2263);const r="default";function a(e,t){return`docs-${e}-${t}`}},12:(e,t,n)=>{"use strict";n.d(t,{W:()=>l,_:()=>s});const r="localStorage";function a(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,o||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),o=!0),null}var t}let o=!1;const i={get:()=>null,set:()=>{},del:()=>{}};function l(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t}}(e);const n=a(t?.persistence);return null===n?i:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{n.setItem(e,t)}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{n.removeItem(e)}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}}}}function s(e){void 0===e&&(e=r);const t=a(e);if(!t)return[];const n=[];for(let r=0;r{"use strict";n.d(t,{l:()=>o});var r=n(2263),a=n(6550);function o(){const{siteConfig:{baseUrl:e,url:t},i18n:{defaultLocale:n,currentLocale:o}}=(0,r.Z)(),{pathname:i}=(0,a.TH)(),l=o===n?e:e.replace(`/${o}/`,"/"),s=i.replace(e,"");return{createUrl:function(e){let{locale:r,fullyQualified:a}=e;return`${a?t:""}${function(e){return e===n?`${l}`:`${l}${e}/`}(r)}${s}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="post-content";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}})},311:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7294),a=n(6010);const o="loadingRing_RJI3";function i(e){let{className:t}=e;return r.createElement("div",{className:(0,a.Z)(o,t)},r.createElement("div",null),r.createElement("div",null),r.createElement("div",null),r.createElement("div",null))}},22:(e,t,n)=>{"use strict";n.d(t,{w:()=>l});var r=n(1336),a=n.n(r),o=n(1029);const i=new Map;function l(e,t){const n=`${e}${t}`;let r=i.get(n);return r||(r=async function(e,t){{const n=`${e}${o.J.replace("{dir}",t?`-${t.replace(/\//g,"-")}`:"")}`;if(new URL(n,location.origin).origin!==location.origin)throw new Error("Unexpected version url");const r=await(await fetch(n)).json(),i=r.map(((e,t)=>{let{documents:n,index:r}=e;return{type:t,documents:n,index:a().Index.load(r)}})),l=r.reduce(((e,t)=>{for(const n of t.index.invertedIndex)/\p{Unified_Ideograph}/u.test(n[0][0])&&e.add(n[0]);return e}),new Set);return{wrappedIndexes:i,zhDictionary:Array.from(l)}}return{wrappedIndexes:[],zhDictionary:[]}}(e,t),i.set(n,r)),r}},8202:(e,t,n)=>{"use strict";n.d(t,{v:()=>s});var r=n(1336),a=n.n(r);var o=n(1029);function i(e){return l(e).concat(l(e.filter((e=>{const t=e[e.length-1];return!t.trailing&&t.maybeTyping})),!0))}function l(e,t){return e.map((e=>({tokens:e.map((e=>e.value)),term:e.map((e=>({value:e.value,presence:a().Query.presence.REQUIRED,wildcard:(t?e.trailing||e.maybeTyping:e.trailing)?a().Query.wildcard.TRAILING:a().Query.wildcard.NONE})))})))}function s(e,t,n){return function(r,l){const s=function(e,t){if(1===t.length&&["ja","jp","th"].includes(t[0]))return a()[t[0]].tokenizer(e).map((e=>e.toString()));let n=/[^-\s]+/g;return t.includes("zh")&&(n=/\w+|\p{Unified_Ideograph}+/gu),e.toLowerCase().match(n)||[]}(r,o.dK);if(0===s.length)return void l([]);const u=function(e,t){const n=function(e,t){const n=[];return function e(r,a){if(0===r.length)return void n.push(a);const o=r[0];if(/\p{Unified_Ideograph}/u.test(o)){const n=function(e,t){const n=[];return function e(r,a){let o=0,i=!1;for(const l of t)if(r.substr(0,l.length)===l){const t={missed:a.missed,term:a.term.concat({value:l})};r.length>l.length?e(r.substr(l.length),t):n.push(t),i=!0}else for(let t=l.length-1;t>o;t-=1){const s=l.substr(0,t);if(r.substr(0,t)===s){o=t;const l={missed:a.missed,term:a.term.concat({value:s,trailing:!0})};r.length>t?e(r.substr(t),l):n.push(l),i=!0;break}}i||(r.length>0?e(r.substr(1),{missed:a.missed+1,term:a.term}):a.term.length>0&&n.push(a))}(e,{missed:0,term:[]}),n.sort(((e,t)=>{const n=e.missed>0?1:0,r=t.missed>0?1:0;return n!==r?n-r:e.term.length-t.term.length})).map((e=>e.term))}(o,t);for(const t of n){const n=a.concat(...t);e(r.slice(1),n)}}else{const t=a.concat({value:o});e(r.slice(1),t)}}(e,[]),n}(e,t);if(0===n.length)return[{tokens:e,term:e.map((e=>({value:e,presence:a().Query.presence.REQUIRED,wildcard:a().Query.wildcard.LEADING|a().Query.wildcard.TRAILING})))}];for(const a of n)a[a.length-1].maybeTyping=!0;const r=[];for(const i of o.dK)if("en"===i)o._k||r.unshift(a().stopWordFilter);else{const e=a()[i];e.stopWordFilter&&r.unshift(e.stopWordFilter)}let l;if(r.length>0){const e=e=>r.reduce(((e,t)=>e.filter((e=>t(e.value)))),e);l=[];const t=[];for(const r of n){const n=e(r);l.push(n),n.length0&&t.push(n)}n.push(...t)}else l=n.slice();const s=[];for(const a of l)if(a.length>2)for(let e=a.length-1;e>=0;e-=1)s.push(a.slice(0,e).concat(a.slice(e+1)));return i(n).concat(i(s))}(s,t),c=[];e:for(const{term:t,tokens:a}of u)for(const{documents:r,index:o,type:i}of e)if(c.push(...o.query((e=>{for(const n of t)e.term(n.value,{wildcard:n.wildcard,presence:n.presence})})).slice(0,n).filter((e=>!c.some((t=>t.document.i.toString()===e.ref)))).slice(0,n-c.length).map((t=>{const n=r.find((e=>e.i.toString()===t.ref));return{document:n,type:i,page:0!==i&&e[0].documents.find((e=>e.i===n.p)),metadata:t.matchData.metadata,tokens:a,score:t.score}}))),c.length>=n)break e;!function(e){e.forEach(((e,t)=>{e.index=t})),e.sort(((t,n)=>{let r=t.type>0&&t.page?e.findIndex((e=>e.document===t.page)):t.index,a=n.type>0&&n.page?e.findIndex((e=>e.document===n.page)):n.index;return-1===r&&(r=t.index),-1===a&&(a=n.index),r===a?0===t.type?-1:0===n.type?1:t.index-n.index:r-a}))}(c),function(e){e.forEach(((t,n)=>{n>0&&t.page&&e.some((e=>e.document===t.page))&&(n{"use strict";function r(e){return e.join(" \u203a ")}n.d(t,{e:()=>r})},1690:(e,t,n)=>{"use strict";function r(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}n.d(t,{X:()=>r})},1073:(e,t,n)=>{"use strict";function r(e,t){const n=[];for(const r of Object.values(e))r[t]&&n.push(...r[t].position);return n.sort(((e,t)=>e[0]-t[0]||t[1]-e[1]))}n.d(t,{m:()=>r})},2539:(e,t,n)=>{"use strict";n.d(t,{C:()=>a});var r=n(1690);function a(e,t,n){const o=[];for(const i of t){const n=e.toLowerCase().indexOf(i);if(n>=0){n>0&&o.push(a(e.substr(0,n),t)),o.push(`${(0,r.X)(e.substr(n,i.length))}`);const l=n+i.length;l${(0,r.X)(e)}`:(0,r.X)(e):o.join("")}},726:(e,t,n)=>{"use strict";n.d(t,{o:()=>s});var r=n(1690),a=n(2539);const o=/\w+|\p{Unified_Ideograph}/u;function i(e){const t=[];let n=0,r=e;for(;r.length>0;){const a=r.match(o);if(!a){t.push(r);break}a.index>0&&t.push(r.substring(0,a.index)),t.push(a[0]),n+=a.index+a[0].length,r=e.substring(n)}return t}var l=n(1029);function s(e,t,n,o){void 0===o&&(o=l.Hk);const{chunkIndex:s,chunks:u}=function(e,t,n){const o=[];let l=0,s=0,u=-1;for(;ls){const t=i(e.substring(s,c)).map((e=>({html:(0,r.X)(e),textLength:e.length})));for(const e of t)o.push(e)}-1===u&&(u=o.length),s=c+d,o.push({html:(0,a.C)(e.substring(c,s),n,!0),textLength:d})}}if(s({html:(0,r.X)(e),textLength:e.length})));for(const e of t)o.push(e)}return{chunkIndex:u,chunks:o}}(e,t,n),c=u.slice(0,s),d=u[s],f=[d.html],p=u.slice(s+1);let m=d.textLength,h=0,g=0,y=!1,v=!1;for(;m0){const e=c.pop();m+e.textLength<=o?(f.unshift(e.html),h+=e.textLength,m+=e.textLength):(y=!0,c.length=0)}else{if(!(p.length>0))break;{const e=p.shift();m+e.textLength<=o?(f.push(e.html),g+=e.textLength,m+=e.textLength):(v=!0,p.length=0)}}return(y||c.length>0)&&f.unshift("\u2026"),(v||p.length>0)&&f.push("\u2026"),f.join("")}},1029:(e,t,n)=>{"use strict";n.d(t,{vc:()=>o,gQ:()=>p,H6:()=>u,hG:()=>g,l9:()=>m,dK:()=>r,_k:()=>a,pu:()=>f,AY:()=>c,t_:()=>d,Kc:()=>h,J:()=>i,Hk:()=>s,qo:()=>l});n(1336);const r=["en"],a=!1,o=null,i="search-index{dir}.json",l=8,s=50,u=!1,c=!0,d=!0,f="right",p=void 0,m=!0,h=null,g=!1},6010:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>E,q_:()=>C,ob:()=>p,PP:()=>L,Ep:()=>f});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;f--){var p=i[f];"."===p?o(i,f):".."===p?(o(i,f),d++):d&&(o(i,f),d--)}if(!u)for(;d--;d)i.unshift("..");!u||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(8776);function s(e){return"/"===e.charAt(0)?e:"/"+e}function u(e){return"/"===e.charAt(0)?e.substr(1):e}function c(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function f(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function p(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=p(e,t,h(),E.location);c.confirmTransitionTo(a,r,n,(function(e){e&&(E.entries[E.index]=a,d({action:r,location:a}))}))},go:b,goBack:function(){b(-1)},goForward:function(){b(1)},canGo:function(e){var t=E.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,f=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=p(n);a&&a!==m&&e(t,a,r)}var i=c(n);d&&(i=i.concat(d(n)));for(var l=s(t),h=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,a,o,i,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},1336:(e,t,n)=>{var r,a;!function(){var o,i,l,s,u,c,d,f,p,m,h,g,y,v,b,E,w,k,S,x,T,C,_,L,N,O,I,A,R,P,D=function(e){var t=new D.Builder;return t.pipeline.add(D.trimmer,D.stopWordFilter,D.stemmer),t.searchPipeline.add(D.stemmer),e.call(t,t),t.build()};D.version="2.3.9",D.utils={},D.utils.warn=(o=this,function(e){o.console&&console.warn&&console.warn(e)}),D.utils.asString=function(e){return null==e?"":e.toString()},D.utils.clone=function(e){if(null==e)return e;for(var t=Object.create(null),n=Object.keys(e),r=0;r0){var s=D.utils.clone(t)||{};s.position=[i,l],s.index=a.length,a.push(new D.Token(n.slice(i,o),s))}i=o+1}}return a},D.tokenizer.separator=/[\s\-]+/,D.Pipeline=function(){this._stack=[]},D.Pipeline.registeredFunctions=Object.create(null),D.Pipeline.registerFunction=function(e,t){t in this.registeredFunctions&&D.utils.warn("Overwriting existing registered function: "+t),e.label=t,D.Pipeline.registeredFunctions[e.label]=e},D.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||D.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},D.Pipeline.load=function(e){var t=new D.Pipeline;return e.forEach((function(e){var n=D.Pipeline.registeredFunctions[e];if(!n)throw new Error("Cannot load unregistered function: "+e);t.add(n)})),t},D.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach((function(e){D.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)}),this)},D.Pipeline.prototype.after=function(e,t){D.Pipeline.warnIfFunctionNotRegistered(t);var n=this._stack.indexOf(e);if(-1==n)throw new Error("Cannot find existingFn");n+=1,this._stack.splice(n,0,t)},D.Pipeline.prototype.before=function(e,t){D.Pipeline.warnIfFunctionNotRegistered(t);var n=this._stack.indexOf(e);if(-1==n)throw new Error("Cannot find existingFn");this._stack.splice(n,0,t)},D.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);-1!=t&&this._stack.splice(t,1)},D.Pipeline.prototype.run=function(e){for(var t=this._stack.length,n=0;n1&&(oe&&(n=a),o!=e);)r=n-t,a=t+Math.floor(r/2),o=this.elements[2*a];return o==e||o>e?2*a:ol?u+=2:i==l&&(t+=n[s+1]*r[u+1],s+=2,u+=2);return t},D.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},D.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,n=0;t0){var o,i=a.str.charAt(0);i in a.node.edges?o=a.node.edges[i]:(o=new D.TokenSet,a.node.edges[i]=o),1==a.str.length&&(o.final=!0),r.push({node:o,editsRemaining:a.editsRemaining,str:a.str.slice(1)})}if(0!=a.editsRemaining){if("*"in a.node.edges)var l=a.node.edges["*"];else{l=new D.TokenSet;a.node.edges["*"]=l}if(0==a.str.length&&(l.final=!0),r.push({node:l,editsRemaining:a.editsRemaining-1,str:a.str}),a.str.length>1&&r.push({node:a.node,editsRemaining:a.editsRemaining-1,str:a.str.slice(1)}),1==a.str.length&&(a.node.final=!0),a.str.length>=1){if("*"in a.node.edges)var s=a.node.edges["*"];else{s=new D.TokenSet;a.node.edges["*"]=s}1==a.str.length&&(s.final=!0),r.push({node:s,editsRemaining:a.editsRemaining-1,str:a.str.slice(1)})}if(a.str.length>1){var u,c=a.str.charAt(0),d=a.str.charAt(1);d in a.node.edges?u=a.node.edges[d]:(u=new D.TokenSet,a.node.edges[d]=u),1==a.str.length&&(u.final=!0),r.push({node:u,editsRemaining:a.editsRemaining-1,str:c+a.str.slice(2)})}}}return n},D.TokenSet.fromString=function(e){for(var t=new D.TokenSet,n=t,r=0,a=e.length;r=e;t--){var n=this.uncheckedNodes[t],r=n.child.toString();r in this.minimizedNodes?n.parent.edges[n.char]=this.minimizedNodes[r]:(n.child._str=r,this.minimizedNodes[r]=n.child),this.uncheckedNodes.pop()}},D.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},D.Index.prototype.search=function(e){return this.query((function(t){new D.QueryParser(e,t).parse()}))},D.Index.prototype.query=function(e){for(var t=new D.Query(this.fields),n=Object.create(null),r=Object.create(null),a=Object.create(null),o=Object.create(null),i=Object.create(null),l=0;l1?1:e},D.Builder.prototype.k1=function(e){this._k1=e},D.Builder.prototype.add=function(e,t){var n=e[this._ref],r=Object.keys(this._fields);this._documents[n]=t||{},this.documentCount+=1;for(var a=0;a=this.length)return D.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},D.QueryLexer.prototype.width=function(){return this.pos-this.start},D.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},D.QueryLexer.prototype.backup=function(){this.pos-=1},D.QueryLexer.prototype.acceptDigitRun=function(){var e,t;do{t=(e=this.next()).charCodeAt(0)}while(t>47&&t<58);e!=D.QueryLexer.EOS&&this.backup()},D.QueryLexer.prototype.more=function(){return this.pos1&&(e.backup(),e.emit(D.QueryLexer.TERM)),e.ignore(),e.more())return D.QueryLexer.lexText},D.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(D.QueryLexer.EDIT_DISTANCE),D.QueryLexer.lexText},D.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(D.QueryLexer.BOOST),D.QueryLexer.lexText},D.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(D.QueryLexer.TERM)},D.QueryLexer.termSeparator=D.tokenizer.separator,D.QueryLexer.lexText=function(e){for(;;){var t=e.next();if(t==D.QueryLexer.EOS)return D.QueryLexer.lexEOS;if(92!=t.charCodeAt(0)){if(":"==t)return D.QueryLexer.lexField;if("~"==t)return e.backup(),e.width()>0&&e.emit(D.QueryLexer.TERM),D.QueryLexer.lexEditDistance;if("^"==t)return e.backup(),e.width()>0&&e.emit(D.QueryLexer.TERM),D.QueryLexer.lexBoost;if("+"==t&&1===e.width())return e.emit(D.QueryLexer.PRESENCE),D.QueryLexer.lexText;if("-"==t&&1===e.width())return e.emit(D.QueryLexer.PRESENCE),D.QueryLexer.lexText;if(t.match(D.QueryLexer.termSeparator))return D.QueryLexer.lexTerm}else e.escapeCharacter()}},D.QueryParser=function(e,t){this.lexer=new D.QueryLexer(e),this.query=t,this.currentClause={},this.lexemeIdx=0},D.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=D.QueryParser.parseClause;e;)e=e(this);return this.query},D.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},D.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},D.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},D.QueryParser.parseClause=function(e){var t=e.peekLexeme();if(null!=t)switch(t.type){case D.QueryLexer.PRESENCE:return D.QueryParser.parsePresence;case D.QueryLexer.FIELD:return D.QueryParser.parseField;case D.QueryLexer.TERM:return D.QueryParser.parseTerm;default:var n="expected either a field or a term, found "+t.type;throw t.str.length>=1&&(n+=" with value '"+t.str+"'"),new D.QueryParseError(n,t.start,t.end)}},D.QueryParser.parsePresence=function(e){var t=e.consumeLexeme();if(null!=t){switch(t.str){case"-":e.currentClause.presence=D.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=D.Query.presence.REQUIRED;break;default:var n="unrecognised presence operator'"+t.str+"'";throw new D.QueryParseError(n,t.start,t.end)}var r=e.peekLexeme();if(null==r){n="expecting term or field, found nothing";throw new D.QueryParseError(n,t.start,t.end)}switch(r.type){case D.QueryLexer.FIELD:return D.QueryParser.parseField;case D.QueryLexer.TERM:return D.QueryParser.parseTerm;default:n="expecting term or field, found '"+r.type+"'";throw new D.QueryParseError(n,r.start,r.end)}}},D.QueryParser.parseField=function(e){var t=e.consumeLexeme();if(null!=t){if(-1==e.query.allFields.indexOf(t.str)){var n=e.query.allFields.map((function(e){return"'"+e+"'"})).join(", "),r="unrecognised field '"+t.str+"', possible fields: "+n;throw new D.QueryParseError(r,t.start,t.end)}e.currentClause.fields=[t.str];var a=e.peekLexeme();if(null==a){r="expecting term, found nothing";throw new D.QueryParseError(r,t.start,t.end)}if(a.type===D.QueryLexer.TERM)return D.QueryParser.parseTerm;r="expecting term, found '"+a.type+"'";throw new D.QueryParseError(r,a.start,a.end)}},D.QueryParser.parseTerm=function(e){var t=e.consumeLexeme();if(null!=t){e.currentClause.term=t.str.toLowerCase(),-1!=t.str.indexOf("*")&&(e.currentClause.usePipeline=!1);var n=e.peekLexeme();if(null!=n)switch(n.type){case D.QueryLexer.TERM:return e.nextClause(),D.QueryParser.parseTerm;case D.QueryLexer.FIELD:return e.nextClause(),D.QueryParser.parseField;case D.QueryLexer.EDIT_DISTANCE:return D.QueryParser.parseEditDistance;case D.QueryLexer.BOOST:return D.QueryParser.parseBoost;case D.QueryLexer.PRESENCE:return e.nextClause(),D.QueryParser.parsePresence;default:var r="Unexpected lexeme type '"+n.type+"'";throw new D.QueryParseError(r,n.start,n.end)}else e.nextClause()}},D.QueryParser.parseEditDistance=function(e){var t=e.consumeLexeme();if(null!=t){var n=parseInt(t.str,10);if(isNaN(n)){var r="edit distance must be numeric";throw new D.QueryParseError(r,t.start,t.end)}e.currentClause.editDistance=n;var a=e.peekLexeme();if(null!=a)switch(a.type){case D.QueryLexer.TERM:return e.nextClause(),D.QueryParser.parseTerm;case D.QueryLexer.FIELD:return e.nextClause(),D.QueryParser.parseField;case D.QueryLexer.EDIT_DISTANCE:return D.QueryParser.parseEditDistance;case D.QueryLexer.BOOST:return D.QueryParser.parseBoost;case D.QueryLexer.PRESENCE:return e.nextClause(),D.QueryParser.parsePresence;default:r="Unexpected lexeme type '"+a.type+"'";throw new D.QueryParseError(r,a.start,a.end)}else e.nextClause()}},D.QueryParser.parseBoost=function(e){var t=e.consumeLexeme();if(null!=t){var n=parseInt(t.str,10);if(isNaN(n)){var r="boost must be numeric";throw new D.QueryParseError(r,t.start,t.end)}e.currentClause.boost=n;var a=e.peekLexeme();if(null!=a)switch(a.type){case D.QueryLexer.TERM:return e.nextClause(),D.QueryParser.parseTerm;case D.QueryLexer.FIELD:return e.nextClause(),D.QueryParser.parseField;case D.QueryLexer.EDIT_DISTANCE:return D.QueryParser.parseEditDistance;case D.QueryLexer.BOOST:return D.QueryParser.parseBoost;case D.QueryLexer.PRESENCE:return e.nextClause(),D.QueryParser.parsePresence;default:r="Unexpected lexeme type '"+a.type+"'";throw new D.QueryParseError(r,a.start,a.end)}else e.nextClause()}},void 0===(a="function"==typeof(r=function(){return D})?r.call(t,n,t,e):r)||(e.exports=a)}()},2497:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),u=o.querySelector(r.barSelector),c=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,i(e,c,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+c+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),c)}),c)):setTimeout(t,c)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&p(a),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&p(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function u(e,t){return("string"==typeof e?e:f(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=f(e),r=n+t;u(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=f(e);u(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function f(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function p(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},7418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,o){for(var i,l,s=a(e),u=1;u{"use strict";n.d(t,{Z:()=>o});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);S+=k.value.length,k=k.next){var x=k.value;if(t.length>e.length)return;if(!(x instanceof a)){var T,C=1;if(v){if(!(T=o(w,S,e,y))||T.index>=e.length)break;var _=T.index,L=T.index+T[0].length,N=S;for(N+=k.value.length;_>=N;)N+=(k=k.next).value.length;if(S=N-=k.value.length,k.value instanceof a)continue;for(var O=k;O!==t.tail&&(Nd.reach&&(d.reach=P);var D=k.prev;if(A&&(D=s(t,D,A),S+=A.length),u(t,D,C),k=s(t,D,new a(f,g?r.tokenize(I,g):I,b,I)),R&&s(t,k,R),C>1){var M={cause:f+","+m,reach:P};i(e,t,n,k.prev,S,M),d&&M.reach>d.reach&&(d.reach=M.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function u(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}(),a=r;r.default=r,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"},/"|'/]}},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,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){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:[t,"language-"+t],inside:a.languages[t]},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,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={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|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:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),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:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,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,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],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:t,interpolation:n}}}),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:n}}]}),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 t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\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})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}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"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\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:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;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("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),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:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\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:n(/!?\[(?:(?!\]))+\](?:\([^\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(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=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 t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var l=f(/^\{$/,/^\}$/);if(-1===l)continue;for(var s=n;s=0&&p(u,"variable-input")}}}}function c(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function u(t){var n={};n["interpolation-punctuation"]=a;var o=e.tokenize(t,n);if(3===o.length){var i=[1,1];i.push.apply(i,s(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,i)}return new e.Token("interpolation",o,r.alias,t)}function c(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),i=0,c={},d=s(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=l(i++,r)););return c[n]=a,n})).join(""),n,r),f=Object.keys(c);return i=0,function e(t){for(var n=0;n=f.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=f[i],o="string"==typeof r?r:r.content,l=o.indexOf(a);if(-1!==l){++i;var s=o.substring(0,l),d=u(c[a]),p=o.substring(l+a.length),m=[];if(s&&m.push(s),m.push(d),p){var h=[p];e(h),m.push.apply(m,h)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):r.content=m}}else{var g=r.content;Array.isArray(g)?e(g):e([g])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function f(e){return"string"==typeof e?e:Array.isArray(e)?e.map(f).join(""):f(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.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 t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,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:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},l=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===i(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var s=i(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=i(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}a.content&&"string"!=typeof a.content&&l(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||l(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var u=l[s];if("string"==typeof u||u.content&&"string"==typeof u.content){var c=o[a],d=n.tokenStack[c],f="string"==typeof u?u:u.content,p=t(r,c),m=f.indexOf(p);if(m>-1){++a;var h=f.substring(0,m),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),y=f.substring(m+p.length),v=[];h&&v.push.apply(v,i([h])),v.push(g),y&&v.push.apply(v,i([y])),"string"==typeof u?l.splice.apply(l,[s,1].concat(v)):u.content=v}}else u.content&&i(u.content)}return l}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?: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|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)\b/i,{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:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const o=a},9385:()=>{!function(e){e.languages.ruby=e.languages.extend("clike",{comment:{pattern:/#.*|^=begin\s[\s\S]*?^=end/m,greedy:!0},"class-name":{pattern:/(\b(?:class|module)\s+|\bcatch\s+\()[\w.\\]+|\b[A-Z_]\w*(?=\s*\.\s*new\b)/,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:BEGIN|END|alias|and|begin|break|case|class|def|define_method|defined|do|each|else|elsif|end|ensure|extend|for|if|in|include|module|new|next|nil|not|or|prepend|private|protected|public|raise|redo|require|rescue|retry|return|self|super|then|throw|undef|unless|until|when|while|yield)\b/,operator:/\.{2,3}|&\.|===||[!=]?~|(?:&&|\|\||<<|>>|\*\*|[+\-*/%<>!^&|=])=?|[?:]/,punctuation:/[(){}[\].,;]/}),e.languages.insertBefore("ruby","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}});var t={pattern:/((?:^|[^\\])(?:\\{2})*)#\{(?:[^{}]|\{[^{}]*\})*\}/,lookbehind:!0,inside:{content:{pattern:/^(#\{)[\s\S]+(?=\}$)/,lookbehind:!0,inside:e.languages.ruby},delimiter:{pattern:/^#\{|\}$/,alias:"punctuation"}}};delete e.languages.ruby.function;var n="(?:"+[/([^a-zA-Z0-9\s{(\[<=])(?:(?!\1)[^\\]|\\[\s\S])*\1/.source,/\((?:[^()\\]|\\[\s\S]|\((?:[^()\\]|\\[\s\S])*\))*\)/.source,/\{(?:[^{}\\]|\\[\s\S]|\{(?:[^{}\\]|\\[\s\S])*\})*\}/.source,/\[(?:[^\[\]\\]|\\[\s\S]|\[(?:[^\[\]\\]|\\[\s\S])*\])*\]/.source,/<(?:[^<>\\]|\\[\s\S]|<(?:[^<>\\]|\\[\s\S])*>)*>/.source].join("|")+")",r=/(?:"(?:\\.|[^"\\\r\n])*"|(?:\b[a-zA-Z_]\w*|[^\s\0-\x7F]+)[?!]?|\$.)/.source;e.languages.insertBefore("ruby","keyword",{"regex-literal":[{pattern:RegExp(/%r/.source+n+/[egimnosux]{0,6}/.source),greedy:!0,inside:{interpolation:t,regex:/[\s\S]+/}},{pattern:/(^|[^/])\/(?!\/)(?:\[[^\r\n\]]+\]|\\.|[^[/\\\r\n])+\/[egimnosux]{0,6}(?=\s*(?:$|[\r\n,.;})#]))/,lookbehind:!0,greedy:!0,inside:{interpolation:t,regex:/[\s\S]+/}}],variable:/[@$]+[a-zA-Z_]\w*(?:[?!]|\b)/,symbol:[{pattern:RegExp(/(^|[^:]):/.source+r),lookbehind:!0,greedy:!0},{pattern:RegExp(/([\r\n{(,][ \t]*)/.source+r+/(?=:(?!:))/.source),lookbehind:!0,greedy:!0}],"method-definition":{pattern:/(\bdef\s+)\w+(?:\s*\.\s*\w+)?/,lookbehind:!0,inside:{function:/\b\w+$/,keyword:/^self\b/,"class-name":/^\w+/,punctuation:/\./}}}),e.languages.insertBefore("ruby","string",{"string-literal":[{pattern:RegExp(/%[qQiIwWs]?/.source+n),greedy:!0,inside:{interpolation:t,string:/[\s\S]+/}},{pattern:/("|')(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|(?!\1)[^\\#\r\n])*\1/,greedy:!0,inside:{interpolation:t,string:/[\s\S]+/}},{pattern:/<<[-~]?([a-z_]\w*)[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?[a-z_]\w*|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?/}},interpolation:t,string:/[\s\S]+/}},{pattern:/<<[-~]?'([a-z_]\w*)'[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?'[a-z_]\w*'|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?'|'$/}},string:/[\s\S]+/}}],"command-literal":[{pattern:RegExp(/%x/.source+n),greedy:!0,inside:{interpolation:t,command:{pattern:/[\s\S]+/,alias:"string"}}},{pattern:/`(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|[^\\`#\r\n])*`/,greedy:!0,inside:{interpolation:t,command:{pattern:/[\s\S]+/,alias:"string"}}}]}),delete e.languages.ruby.string,e.languages.insertBefore("ruby","number",{builtin:/\b(?:Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Fixnum|Float|Hash|IO|Integer|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|Stat|String|Struct|Symbol|TMS|Thread|ThreadGroup|Time|TrueClass)\b/,constant:/\b[A-Z][A-Z0-9_]*(?:[?!]|\b)/}),e.languages.rb=e.languages.ruby}(Prism)},5266:()=>{Prism.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/}},2585:(e,t,n)=>{var r={"./prism-ruby":9385,"./prism-sql":5266};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=2585},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(7418),o=n(3840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n