diff --git a/11.2c22e7ef.iframe.bundle.js b/11.2c22e7ef.iframe.bundle.js
new file mode 100644
index 00000000..edbfdc96
--- /dev/null
+++ b/11.2c22e7ef.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[11],{"./docs/components/Text/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{x:()=>Text_Text});__webpack_require__("./node_modules/react/index.js");var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Text_Text=_ref=>{let{style,children,as}=_ref;const Component=as||"span";return(0,jsx_runtime.jsx)(Component,{style:{fontFamily:fontFamilies.V.euclidCircularB,...style},children})};Text_Text.displayName="Text";try{Text_Text.displayName="Text",Text_Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/Text.tsx#Text"]={docgenInfo:Text_Text.__docgenInfo,name:"Text",path:"docs/components/Text/Text.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/Text/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./docs/components/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{bc:()=>ColorSwatch_ColorSwatch,H4:()=>ColorSwatchGroup_ColorSwatchGroup,xv:()=>components_Text.x});__webpack_require__("./node_modules/react/index.js");var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ColorSwatch_ColorSwatch=_ref=>{let{color,borderColor=src.Wb.colors.border.muted,textBackgroundColor=src.Wb.colors.background.default,textColor=src.Wb.colors.text.default,name,...props}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:120,backgroundColor:color,border:`1px solid ${borderColor}`,display:"flex",flexDirection:"column-reverse",borderRadius:"8px"},...props,children:(0,jsx_runtime.jsxs)("div",{style:{backgroundColor:textBackgroundColor,padding:8,borderRadius:"0 0 8px 8px"},children:[(0,jsx_runtime.jsx)("strong",{style:{display:"block",marginBottom:"8px"},children:(0,jsx_runtime.jsx)("code",{children:`${name}`})}),(0,jsx_runtime.jsx)("code",{children:`${color}`})]})})};ColorSwatch_ColorSwatch.displayName="ColorSwatch";try{ColorSwatch_ColorSwatch.displayName="ColorSwatch",ColorSwatch_ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"]={docgenInfo:ColorSwatch_ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}const ColorSwatchGroup_ColorSwatchGroup=_ref=>{let{swatchData,borderColor,textBackgroundColor,textColor}=_ref;if(!swatchData)return(0,jsx_runtime.jsx)("div",{children:"No swatch data"});const swatchColorsArr=Object.keys(swatchData);return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:swatchColorsArr.map((category=>{const colorsObj=swatchData[category];let colorsArr=[];const recursiveColors=(nextLevel,label)=>{for(const key in nextLevel){const level=nextLevel[key];level.value?colorsArr.push({label:`${label}${key}`,value:level.value,description:level.description}):recursiveColors(level,`${label}${key}.`)}};return recursiveColors(colorsObj,""),(0,jsx_runtime.jsxs)("div",{style:{fontSize:"0.875rem",fontFamily:"sans-serif",color:textColor},children:[(0,jsx_runtime.jsx)("h2",{children:category}),(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"16px",gridTemplateColumns:"repeat(auto-fill, 300px)"},children:colorsArr.map((color=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(ColorSwatch_ColorSwatch,{color:color.value,name:color.label,borderColor,textBackgroundColor,textColor}),color?.description?(0,jsx_runtime.jsx)("p",{style:{lineHeight:1.3},children:color?.description}):null]},color.label)))})]},category)}))})};try{ColorSwatchGroup_ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup_ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup_ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}var components_Text=__webpack_require__("./docs/components/Text/index.tsx");try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./src/figma/tokens.json":module=>{module.exports=JSON.parse('{"CO":{"D2":{"white":{"white000":{"value":"#FFFFFF","description":"(HEX: #FFFFFF)","type":"color"},"white010":{"value":"#FCFCFC","description":"(HEX: #FCFCFC)","type":"color"}},"black":{"black000":{"value":"#000000","description":"(HEX: #000000)","type":"color"}},"grey":{"grey030":{"value":"#FAFBFC","description":"(HEX: #FAFBFC)","type":"color"},"grey040":{"value":"#F2F4F6","description":"(HEX: #F2F4F6)","type":"color"},"grey100":{"value":"#D6D9DC","description":"(HEX: #D6D9DC)","type":"color"},"grey200":{"value":"#BBC0C5","description":"(HEX: #BBC0C5)","type":"color"},"grey300":{"value":"#9FA6AE","description":"(HEX: #9FA6AE)","type":"color"},"grey400":{"value":"#848C96","description":"(HEX: #848C96)","type":"color"},"grey500":{"value":"#6A737D","description":"(HEX: #6A737D)","type":"color"},"grey600":{"value":"#535A61","description":"(HEX: #535A61)","type":"color"},"grey700":{"value":"#3B4046","description":"(HEX: #3B4046)","type":"color"},"grey750":{"value":"#2E3339","description":"(HEX: #2E3339)","type":"color"},"grey800":{"value":"#24272A","description":"(HEX: #24272A)","type":"color"},"grey900":{"value":"#141618","description":"(HEX: #141618)","type":"color"}},"blue":{"blue000":{"value":"#EAF6FF","description":"(HEX: #EAF6FF)","type":"color"},"blue100":{"value":"#A7D9FE","description":"(HEX: #A7D9FE)","type":"color"},"blue200":{"value":"#75C4FD","description":"(HEX: #75C4FD)","type":"color"},"blue300":{"value":"#43AEFC","description":"(HEX: #43AEFC)","type":"color"},"blue400":{"value":"#1098FC","description":"(HEX: #1098FC)","type":"color"},"blue500":{"value":"#0376C9","description":"(HEX: #0376C9)","type":"color"},"blue600":{"value":"#0260A4","description":"(HEX: #0260A4)","type":"color"},"blue700":{"value":"#024272","description":"(HEX: #024272)","type":"color"},"blue800":{"value":"#01253F","description":"(HEX: #01253F)","type":"color"},"blue900":{"value":"#00080D","description":"(HEX: #00080D)","type":"color"}},"orange":{"orange000":{"value":"#FEF5EF","description":"(HEX: #FEF5EF)","type":"color"},"orange100":{"value":"#FDE2CF","description":"(HEX: #FDE2CF)","type":"color"},"orange200":{"value":"#FBC49D","description":"(HEX: #FBC49D)","type":"color"},"orange300":{"value":"#FAA66C","description":"(HEX: #FAA66C)","type":"color"},"orange400":{"value":"#F8883B","description":"(HEX: #F8883B)","type":"color"},"orange500":{"value":"#F66A0A","description":"(HEX: #F66A0A)","type":"color"},"orange600":{"value":"#BF5208","description":"(HEX: #BF5208)","type":"color"},"orange700":{"value":"#954005","description":"(HEX: #954005)","type":"color"},"orange800":{"value":"#632B04","description":"(HEX: #632B04)","type":"color"},"orange900":{"value":"#321602","description":"(HEX: #321602)","type":"color"}},"green":{"green000":{"value":"#F3FCF5","description":"(HEX: #F3FCF5)","type":"color"},"green100":{"value":"#D6FFDF","description":"(HEX: #D6FFDF)","type":"color"},"green200":{"value":"#AFECBD","description":"(HEX: #AFECBD)","type":"color"},"green300":{"value":"#86E29B","description":"(HEX: #86E29B)","type":"color"},"green400":{"value":"#5DD879","description":"(HEX: #5DD879)","type":"color"},"green500":{"value":"#28A745","description":"(HEX: #28A745)","type":"color"},"green600":{"value":"#1C8234","description":"(HEX: #1C8234)","type":"color"},"green700":{"value":"#145523","description":"(HEX: #145523)","type":"color"},"green800":{"value":"#0A2C12","description":"(HEX: #0A2C12)","type":"color"},"green900":{"value":"#041007","description":"(HEX: #041007)","type":"color"}},"red":{"red000":{"value":"#FCF2F3","description":"(HEX: #FCF2F3)","type":"color"},"red100":{"value":"#F7D5D8","description":"(HEX: #F7D5D8)","type":"color"},"red200":{"value":"#F1B9BE","description":"(HEX: #F1B9BE)","type":"color"},"red300":{"value":"#E88F97","description":"(HEX: #E88F97)","type":"color"},"red400":{"value":"#E06470","description":"(HEX: #E06470)","type":"color"},"red500":{"value":"#D73847","description":"(HEX: #D73847)","type":"color"},"red600":{"value":"#B92534","description":"(HEX: #B92534)","type":"color"},"red700":{"value":"#8E1D28","description":"(HEX: #8E1D28)","type":"color"},"red800":{"value":"#64141C","description":"(HEX: #64141C)","type":"color"},"red900":{"value":"#3A0C10","description":"(HEX: #3A0C10)","type":"color"}},"purple":{"purple500":{"value":"#8B45B6","description":"(HEX: #8B45B6)","type":"color"}},"violet":{"violet300":{"value":"#CFB5F0","description":"(HEX: #CFB5F0)","type":"color"}},"yellow":{"yellow000":{"value":"#FFFDF8","description":"(HEX: #FFFDF8)","type":"color"},"yellow100":{"value":"#FEFCDE","description":"(HEX: #FEFCDE)","type":"color"},"yellow200":{"value":"#FFF2C5","description":"(HEX: #FFF2C5)","type":"color"},"yellow300":{"value":"#FFEAA3","description":"(HEX: #FFEAA3)","type":"color"},"yellow400":{"value":"#FFDF70","description":"(HEX: #FFDF70)","type":"color"},"yellow500":{"value":"#FFD33D","description":"(HEX: #FFD33D)","type":"color"},"yellow600":{"value":"#FFC70A","description":"(HEX: #FFC70A)","type":"color"}}}},"R2":{"O":{"background":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For default neutral backgrounds","type":"color"},"default-hover":{"value":"#FAFAFA","type":"color","description":"(#FAFAFA)For component hover states that use background/default"},"default-pressed":{"value":"#EBEBEB","type":"color","description":"(#EBEBEB) For component pressed states that use background/default"},"alternative":{"value":"#F2F4F6","description":"(grey040: #F2F4F6) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)","type":"color"},"alternative-hover":{"value":"#EDEFF1","type":"color","description":"(#EDEFF1) For component hover states that use background/alternative"},"alternative-pressed":{"value":"#DFE0E2","type":"color","description":"(#DFE0E2) For component pressed states that use background/alternative"},"hover":{"value":"#00000005","type":"color","description":"(#00000005) For component hover states with no background color"},"pressed":{"value":"#00000014","type":"color","description":"(#00000014) For component pressed states with no background color"}},"text":{"default":{"value":"#24272A","description":"(grey800: #24272A) For general text that takes main priority in the information hierarchy","type":"color"},"alternative":{"value":"#535A61","description":"(grey600: #535A61) For a weaker contrast option for neutral text","type":"color"},"muted":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For inactive or lowest priority text. (Example: placeholder)","type":"color"}},"icon":{"default":{"value":"#24272A","description":"(grey800: #24272A) For default neutral icons","type":"color"},"alternative":{"value":"#6A737D","type":"color","description":"(grey500: #6A737D) For a weaker contrast option for neutral icons"},"muted":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For inactive or lowest priority icons","type":"color"}},"border":{"default":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For default neutral borders with visible contrast. (Example: text inputs)","type":"color"},"muted":{"value":"#D6D9DC","description":"(grey100: #D6D9DC) For a weaker contrast option for neutral borders. (Example: dividers)","type":"color"}},"overlay":{"default":{"value":"#00000099","description":"(black000: #000000 60% opacity) For shading layers behind modality screens","type":"color"},"alternative":{"value":"#000000CC","description":"(black000: #000000 80% opacity) For a stronger shading layer option behind modality screens","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons","type":"color"}},"primary":{"default":{"value":"#0376C9","description":"(blue500: #0376C9) For primary user action related elements","type":"color"},"alternative":{"value":"#0260A4","description":"(blue600: #0260A4) For the \\"pressed\\" state of interactive primary elements","type":"color"},"muted":{"value":"#0376C919","description":"(blue500: #0376C9 10% opacity) For lowest contrast background used in primary elements","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"},"default-hover":{"value":"#0379CE","type":"color","description":"(#0379CE) For the \\"hover\\" state of interactive primary elements"},"default-pressed":{"value":"#036DB9","type":"color","description":"(#036DB9) For the \\"pressed\\" state of interactive primary elements"}},"secondary":{"default":{"value":"#F66A0A","description":"(orange500: #F66A0A) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox","type":"color"},"alternative":{"value":"#BF5208","description":"(orange600: #BF5208) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states","type":"color"},"muted":{"value":"#F66A0A19","description":"(orange500: #F66A0A 10% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button","type":"color"},"disabled":{"value":"#F66A0A80","description":"(orange500: #F66A0A 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components","type":"color"}},"error":{"default":{"value":"#D73847","description":"(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#B92534","description":"(red600: #B92534) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#D7384719","description":"(red500: #D73847 10% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of error/default (Example: label of danger/critical button)"},"disabled":{"value":"#D7384780","description":"(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons","type":"color"},"default-hover":{"value":"#CD4250","type":"color","description":"(#CD4250) For the \\"hovered\\" state of interactive danger/critical elements"},"default-pressed":{"value":"#C63441","type":"color","description":"(#C63441) For the \\"pressed\\" state of interactive danger/critical elements"}},"warning":{"default":{"value":"#BF5208","type":"color","description":"(orange600: #BF5208) For low-mid level alert elements. Used for text, background, icon or border"},"alternative":{"value":"#FFC70A","description":"(yellow600: #FFC70A) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states","type":"color"},"muted":{"value":"#BF520819","type":"color","description":"(orange600: #BF5208 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of warning/default. Used for text, icon or border"},"disabled":{"value":"#FFD33D80","description":"(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons","type":"color"},"default-hover":{"value":"#C2540A","type":"color","description":"(#C2540A) For the \\"hover\\" state of warning elements"},"default-pressed":{"value":"#A24507","type":"color","description":"(#A24507) For the \\"pressed\\" state of warning elements"}},"success":{"default":{"value":"#1C8234","type":"color","description":"(green500: #1C8234) For positive & good semantic elements. Used for text, background, icon or border"},"alternative":{"value":"#1C8234","description":"(green600: #1C8234) [DEPRECATED] (green600: #1C8234) success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#1C823419","type":"color","description":"(green600: #1C8234 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of success/default. Used for text, icon or border"},"disabled":{"value":"#28A74580","description":"(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons","type":"color"},"default-hover":{"value":"#208838","type":"color","description":"(#208838) For the \\"hover\\" state of success elements"},"default-pressed":{"value":"#1B7431","type":"color","description":"(#1B7431) For the \\"pressed\\" state of success elements"}},"info":{"default":{"value":"#0376C9","description":"(blue500: #0376C9) For informational semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#0260A4","description":"(blue600: #0260A4) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states","type":"color"},"muted":{"value":"#0376C919","description":"(blue500: #0376C9 10% opacity) For lowest contrast background used in informational semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of info/default. Used for text, icon or border"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"}},"networks":{"goerli":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For goerli test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/goerli/default. Used for text, icon or border","type":"color"}},"localhost":{"default":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For localhost test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border","type":"color"}},"sepolia":{"default":{"value":"#CFB5F0","description":"(violet300: #CFB5F0) For sepolia test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border","type":"color"}}},"flask":{"default":{"value":"#8B45B6","description":"(purple500: #8B45B6) For Flask brand default colored elements.","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of flask/default. Used for text, icon or border","type":"color"}}}},"_4":{"O":{"background":{"default":{"value":"#24272A","description":"(grey800: #24272A) For default neutral backgrounds","type":"color"},"default-hover":{"value":"#282B2E","type":"color","description":"(#282B2E) For component hover states that use background/default"},"default-pressed":{"value":"#36383B","type":"color","description":"(#36383B) For component pressed states that use background/default"},"alternative":{"value":"#141618","description":"(grey900: #141618) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)","type":"color"},"alternative-hover":{"value":"#191B1D","type":"color","description":"(#191B1D) For component hover states that use background/alternative"},"alternative-pressed":{"value":"#27292A","type":"color","description":"(#27292A) For component pressed states that use background/alternative"},"hover":{"value":"#FFFFFF05","type":"color","description":"(#FFFFFF05) For component hover states with no background color"},"pressed":{"value":"#FFFFFF14","type":"color","description":"(#FFFFFF14) For component pressed states with no background color"}},"text":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For general text that takes main priority in the information hierarchy","type":"color"},"alternative":{"value":"#D6D9DC","description":"(grey100: #D6D9DC) For a weaker contrast option for neutral text. ","type":"color"},"muted":{"value":"#9FA6AE","description":"(grey300: #9FA6AE) For inactive or lowest priority text. (Example: placeholder)","type":"color"}},"icon":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For default neutral icons","type":"color"},"alternative":{"value":"#BBC0C5","type":"color","description":"(grey200: #BBC0C5) For a weaker contrast option for neutral icons"},"muted":{"value":"#9FA6AE","description":"(grey300: #9FA6AE) For inactive or lowest priority icons","type":"color"}},"border":{"default":{"value":"#848C96","description":"(grey400: #848C96) For default neutral borders with visible contrast. (Example: text inputs)","type":"color"},"muted":{"value":"#3B4046","description":"(grey700: #3B4046) For a weaker contrast option for neutral borders. (Example: dividers)","type":"color"}},"overlay":{"default":{"value":"#00000099","description":"(black000: #000000 60% opacity) For shading layers behind modality screens","type":"color"},"alternative":{"value":"#000000CC","description":"(black000: #000000 80% opacity) For a stronger shading layer option behind modality screens","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons","type":"color"}},"primary":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For primary user action related elements","type":"color"},"alternative":{"value":"#43AEFC","description":"(blue300: #43AEFC) For the \\"pressed\\" state of interactive primary elements","type":"color"},"muted":{"value":"#1098FC26","description":"(blue400: #1098FC 15% opacity) For lowest contrast background used in primary elements","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900 : #141618)  For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"},"disabled":{"value":"#1098FC80","description":"(blue400: #1098FC) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"},"default-hover":{"value":"#0092FA","type":"color","description":"(#0092FA) For the \\"hover\\" state of interactive primary elements"},"default-pressed":{"value":"#54B6FC","type":"color","description":"(#54B6FC) For the \\"hover\\" state of interactive primary elements"}},"secondary":{"default":{"value":"#F8883B","description":"(orange400: #F8883B) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox","type":"color"},"alternative":{"value":"#FAA66C","description":"(orange300: #FAA66C) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states","type":"color"},"muted":{"value":"#F8883B26","description":"(orange400: #F8883B 15% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button","type":"color"},"disabled":{"value":"#F8883B80","description":"(orange400: #F8883B 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components","type":"color"}},"error":{"default":{"value":"#FF5263","type":"color","description":"(#FF5263) For high-level alert danger/critical elements. Used for text, background, icon or border"},"alternative":{"value":"#E88F97","description":"(red300: #E88F97) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#FF526326","type":"color","description":"(#FF5263) 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)"},"inverse":{"value":"#141618","type":"color","description":"(grey900: #141618) For elements used on top of error/default (Example: label of danger/critical button)"},"disabled":{"value":"#D7384780","description":"(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons","type":"color"},"default-hover":{"value":"#FF4D58","type":"color","description":"FF4D58: For the \\"hover\\" state of interactive danger/critical elements"},"default-pressed":{"value":"#F9868E","type":"color","description":"F9868E: For the \\"hover\\" state of interactive danger/critical elements"}},"warning":{"default":{"value":"#FFD33D","description":"(yellow500: #FFD33D) For low-mid level alert elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#FFDF70","description":"(yellow400: #FFDF70) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states","type":"color"},"muted":{"value":"#FFD33D26","description":"(yellow500: #FFD33D 15% opacity) For lowest contrast background used in warning elements. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","description":"(grey900: #141618) For elements used on top of warning/default. Used for text, icon or border","type":"color"},"disabled":{"value":"#FFD33D80","description":"(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons","type":"color"},"default-hover":{"value":"#FFC60A","type":"color","description":"(#FFC60A): For warning with stronger contrast."},"default-pressed":{"value":"#FFEAA3D1","type":"color","description":"(#FFEAA3): For the \\"pressed\\" state of low-mid level alert elements."}},"success":{"default":{"value":"#28A745","description":"(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#5DD879","description":"(green400: #5DD879) [DEPRECATED] success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#28A74526","description":"(green500: #28A745 15% opacity) Lowest contrast background used in success semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900 : #141618) For elements used on top of success/default. Used for text, icon or border"},"disabled":{"value":"#28A74580","description":"(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons","type":"color"},"default-hover":{"value":"#05B82F","type":"color","description":"(#05B82F): For success with stronger contrast."},"default-pressed":{"value":"#6AEC88","type":"color","description":"(#6AEC88): For success with stronger contrast."}},"info":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For informational semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#43AEFC","description":"(blue300: #43AEFC) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states","type":"color"},"muted":{"value":"#1098FC26","description":"(blue400: #1098FC 15% opacity) For lowest contrast background used in informational semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900: #141618) For elements used on top of info/default. Used for text, icon or border"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] info.disabled should be used for all disabled info action components such as buttons or links","type":"color"}},"networks":{"goerli":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For goerli test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/goerli/default. Used for text, icon or border","type":"color"}},"localhost":{"default":{"value":"#BBC0C5","description":"(blue400: #BBC0C5) For localhost test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border","type":"color"}},"sepolia":{"default":{"value":"#CFB5F0","description":"(violet300: #CFB5F0) For sepolia test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border","type":"color"}}},"flask":{"default":{"value":"#8B45B6","description":"(purple500: #8B45B6) For Flask brand default colored elements.","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of flask/default. Used for text, icon or border","type":"color"}}}}}')}}]);
\ No newline at end of file
diff --git a/432.b338d721.iframe.bundle.js b/432.b338d721.iframe.bundle.js
new file mode 100644
index 00000000..792499ee
--- /dev/null
+++ b/432.b338d721.iframe.bundle.js
@@ -0,0 +1,2 @@
+/*! For license information please see 432.b338d721.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[432],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Wb:()=>_js__WEBPACK_IMPORTED_MODULE_0__.Wb});var _js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/js/index.ts")},"./src/js/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Fz:()=>brandColor,Wb:()=>lightTheme});var typography=__webpack_require__("./src/js/typography/index.ts");const colors={background:{default:"#FFFFFF",defaultHover:"#FAFAFA",defaultPressed:"#EBEBEB",alternative:"#F2F4F6",alternativeHover:"#EDEFF1",alternativePressed:"#DFE0E2",hover:"#00000005",pressed:"#00000014"},text:{default:"#24272A",alternative:"#535A61",muted:"#BBC0C5"},icon:{default:"#24272A",alternative:"#6A737D",muted:"#BBC0C5"},border:{default:"#BBC0C5",muted:"#D6D9DC"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#0000001A"},primary:{default:"#0376C9",defaultHover:"#0379CE",defaultPressed:"#036DB9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#BF5208",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",defaultHover:"#CD4250",defaultPressed:"#C63441",alternative:"#B92534",muted:"#D7384719",inverse:"#FFFFFF",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#BF5208",defaultHover:"#C2540A",defaultPressed:"#A24507",alternative:"#FFC70A",muted:"#BF520819",inverse:"#FFFFFF",disabled:"#FFD33D80"},success:{default:"#1C8234",defaultHover:"#208838",defaultPressed:"#1B7431",alternative:"#1C8234",muted:"#1C823419",inverse:"#FFFFFF",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},shadows={size:{xs:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:4},sm:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:8},md:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:16},lg:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:40}}},lightTheme={colors,typography:typography.c,shadows},colors_colors={background:{default:"#24272A",defaultHover:"#282B2E",defaultPressed:"#36383B",alternative:"#141618",alternativeHover:"#191B1D",alternativePressed:"#27292A",hover:"#FFFFFF05",pressed:"#FFFFFF14"},text:{default:"#FFFFFF",alternative:"#D6D9DC",muted:"#9FA6AE"},icon:{default:"#FFFFFF",alternative:"#BBC0C5",muted:"#9FA6AE"},border:{default:"#848C96",muted:"#3B4046"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#00000066"},primary:{default:"#1098FC",defaultHover:"#0092FA",defaultPressed:"#54B6FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#FF5263",defaultHover:"#FF4D58",defaultPressed:"#F9868E",alternative:"#E88F97",muted:"#FF526326",inverse:"#141618",disabled:"#D7384780",shadow:"#FF526366"},warning:{default:"#FFD33D",defaultHover:"#FFC60A",defaultPressed:"#FFEAA3D1",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",defaultHover:"#05B82F",defaultPressed:"#6AEC88",alternative:"#5DD879",muted:"#28A74526",inverse:"#141618",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},darkTheme_colors=(colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors),brandColor=(typography.c,{white000:"#ffffff",white010:"#fcfcfc",black000:"#000000",grey030:"#fafbfc",grey040:"#f2f4f6",grey100:"#d6d9dc",grey200:"#bbc0c5",grey300:"#9fa6ae",grey400:"#848c96",grey500:"#6a737d",grey600:"#535a61",grey700:"#3b4046",grey750:"#2e3339",grey800:"#24272a",grey900:"#141618",blue000:"#eaf6ff",blue100:"#a7d9fe",blue200:"#75c4fd",blue300:"#43aefc",blue400:"#1098fc",blue500:"#0376c9",blue600:"#0260a4",blue700:"#024272",blue800:"#01253f",blue900:"#00080d",orange000:"#fef5ef",orange100:"#fde2cf",orange200:"#fbc49d",orange300:"#faa66c",orange400:"#f8883b",orange500:"#f66a0a",orange600:"#c65507",orange700:"#954005",orange800:"#632b04",orange900:"#321602",green000:"#f3fcf5",green100:"#d6ffdf",green200:"#afecbd",green300:"#86e29b",green400:"#5dd879",green500:"#28a745",green600:"#1e7e34",green700:"#145523",green800:"#0a2c12",green900:"#041007",red000:"#fcf2f3",red100:"#f7d5d8",red200:"#f1b9be",red300:"#e88f97",red400:"#e06470",red500:"#d73847",red600:"#b92534",red700:"#8e1d28",red800:"#64141c",red900:"#3a0c10",purple500:"#8b45b6",violet300:"#cfb5f0",yellow000:"#fffdf8",yellow100:"#fefcde",yellow200:"#fff2c5",yellow300:"#ffeaa3",yellow400:"#ffdf70",yellow500:"#ffd33d",yellow600:"#ffc70a"});lightTheme.colors},"./src/js/typography/fontFamilies.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{V:()=>fontFamilies});const fontFamilies={euclidCircularB:"Euclid Circular B"}},"./src/js/typography/fontSizes.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C:()=>fontSizes});const fontSizes={fontSize1:10,fontSize2:12,fontSize3:14,fontSize4:16,fontSize5:18,fontSize6:24,fontSize7:32,fontSize8:48}},"./src/js/typography/fontWeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{v:()=>fontWeights});const fontWeights={regular:"400",medium:"500",bold:"700"}},"./src/js/typography/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{c:()=>typography});var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),fontSizes=__webpack_require__("./src/js/typography/fontSizes.ts"),fontWeights=__webpack_require__("./src/js/typography/fontWeights.ts"),letterSpacing=__webpack_require__("./src/js/typography/letterSpacing.ts"),lineHeights=__webpack_require__("./src/js/typography/lineHeights.ts");const typography={sDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},sBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},lDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize8,lineHeight:lineHeights.t.lineHeight7,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1},lBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1}}},"./src/js/typography/letterSpacing.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>letterSpacing});const letterSpacing={letterSpacing0:0,letterSpacing1:.25}},"./src/js/typography/lineHeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{t:()=>lineHeights});const lineHeights={lineHeight1:16,lineHeight2:20,lineHeight3:22,lineHeight4:24,lineHeight5:32,lineHeight6:40,lineHeight7:56}},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/object-assign/index.js");var f=__webpack_require__("./node_modules/react/index.js"),g=60103;if(exports.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element"),exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,k){var b,d={},e=null,l=null;for(b in void 0!==k&&(e=""+k),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(l=a.ref),a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
\ No newline at end of file
diff --git a/948.e8ffb950.iframe.bundle.js.LICENSE.txt b/432.b338d721.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 948.e8ffb950.iframe.bundle.js.LICENSE.txt
rename to 432.b338d721.iframe.bundle.js.LICENSE.txt
diff --git a/706.fd484d5d.iframe.bundle.js b/706.fd484d5d.iframe.bundle.js
deleted file mode 100644
index 792bc96e..00000000
--- a/706.fd484d5d.iframe.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[706],{"./src/figma/tokens.json":module=>{module.exports=JSON.parse('{"CO":{"D2":{"white":{"white000":{"value":"#FFFFFF","description":"(HEX: #FFFFFF)","type":"color"},"white010":{"value":"#FCFCFC","description":"(HEX: #FCFCFC)","type":"color"}},"black":{"black000":{"value":"#000000","description":"(HEX: #000000)","type":"color"}},"grey":{"grey030":{"value":"#FAFBFC","description":"(HEX: #FAFBFC)","type":"color"},"grey040":{"value":"#F2F4F6","description":"(HEX: #F2F4F6)","type":"color"},"grey100":{"value":"#D6D9DC","description":"(HEX: #D6D9DC)","type":"color"},"grey200":{"value":"#BBC0C5","description":"(HEX: #BBC0C5)","type":"color"},"grey300":{"value":"#9FA6AE","description":"(HEX: #9FA6AE)","type":"color"},"grey400":{"value":"#848C96","description":"(HEX: #848C96)","type":"color"},"grey500":{"value":"#6A737D","description":"(HEX: #6A737D)","type":"color"},"grey600":{"value":"#535A61","description":"(HEX: #535A61)","type":"color"},"grey700":{"value":"#3B4046","description":"(HEX: #3B4046)","type":"color"},"grey750":{"value":"#2E3339","description":"(HEX: #2E3339)","type":"color"},"grey800":{"value":"#24272A","description":"(HEX: #24272A)","type":"color"},"grey900":{"value":"#141618","description":"(HEX: #141618)","type":"color"}},"blue":{"blue000":{"value":"#EAF6FF","description":"(HEX: #EAF6FF)","type":"color"},"blue100":{"value":"#A7D9FE","description":"(HEX: #A7D9FE)","type":"color"},"blue200":{"value":"#75C4FD","description":"(HEX: #75C4FD)","type":"color"},"blue300":{"value":"#43AEFC","description":"(HEX: #43AEFC)","type":"color"},"blue400":{"value":"#1098FC","description":"(HEX: #1098FC)","type":"color"},"blue500":{"value":"#0376C9","description":"(HEX: #0376C9)","type":"color"},"blue600":{"value":"#0260A4","description":"(HEX: #0260A4)","type":"color"},"blue700":{"value":"#024272","description":"(HEX: #024272)","type":"color"},"blue800":{"value":"#01253F","description":"(HEX: #01253F)","type":"color"},"blue900":{"value":"#00080D","description":"(HEX: #00080D)","type":"color"}},"orange":{"orange000":{"value":"#FEF5EF","description":"(HEX: #FEF5EF)","type":"color"},"orange100":{"value":"#FDE2CF","description":"(HEX: #FDE2CF)","type":"color"},"orange200":{"value":"#FBC49D","description":"(HEX: #FBC49D)","type":"color"},"orange300":{"value":"#FAA66C","description":"(HEX: #FAA66C)","type":"color"},"orange400":{"value":"#F8883B","description":"(HEX: #F8883B)","type":"color"},"orange500":{"value":"#F66A0A","description":"(HEX: #F66A0A)","type":"color"},"orange600":{"value":"#BF5208","description":"(HEX: #BF5208)","type":"color"},"orange700":{"value":"#954005","description":"(HEX: #954005)","type":"color"},"orange800":{"value":"#632B04","description":"(HEX: #632B04)","type":"color"},"orange900":{"value":"#321602","description":"(HEX: #321602)","type":"color"}},"green":{"green000":{"value":"#F3FCF5","description":"(HEX: #F3FCF5)","type":"color"},"green100":{"value":"#D6FFDF","description":"(HEX: #D6FFDF)","type":"color"},"green200":{"value":"#AFECBD","description":"(HEX: #AFECBD)","type":"color"},"green300":{"value":"#86E29B","description":"(HEX: #86E29B)","type":"color"},"green400":{"value":"#5DD879","description":"(HEX: #5DD879)","type":"color"},"green500":{"value":"#28A745","description":"(HEX: #28A745)","type":"color"},"green600":{"value":"#1C8234","description":"(HEX: #1C8234)","type":"color"},"green700":{"value":"#145523","description":"(HEX: #145523)","type":"color"},"green800":{"value":"#0A2C12","description":"(HEX: #0A2C12)","type":"color"},"green900":{"value":"#041007","description":"(HEX: #041007)","type":"color"}},"red":{"red000":{"value":"#FCF2F3","description":"(HEX: #FCF2F3)","type":"color"},"red100":{"value":"#F7D5D8","description":"(HEX: #F7D5D8)","type":"color"},"red200":{"value":"#F1B9BE","description":"(HEX: #F1B9BE)","type":"color"},"red300":{"value":"#E88F97","description":"(HEX: #E88F97)","type":"color"},"red400":{"value":"#E06470","description":"(HEX: #E06470)","type":"color"},"red500":{"value":"#D73847","description":"(HEX: #D73847)","type":"color"},"red600":{"value":"#B92534","description":"(HEX: #B92534)","type":"color"},"red700":{"value":"#8E1D28","description":"(HEX: #8E1D28)","type":"color"},"red800":{"value":"#64141C","description":"(HEX: #64141C)","type":"color"},"red900":{"value":"#3A0C10","description":"(HEX: #3A0C10)","type":"color"}},"purple":{"purple500":{"value":"#8B45B6","description":"(HEX: #8B45B6)","type":"color"}},"violet":{"violet300":{"value":"#CFB5F0","description":"(HEX: #CFB5F0)","type":"color"}},"yellow":{"yellow000":{"value":"#FFFDF8","description":"(HEX: #FFFDF8)","type":"color"},"yellow100":{"value":"#FEFCDE","description":"(HEX: #FEFCDE)","type":"color"},"yellow200":{"value":"#FFF2C5","description":"(HEX: #FFF2C5)","type":"color"},"yellow300":{"value":"#FFEAA3","description":"(HEX: #FFEAA3)","type":"color"},"yellow400":{"value":"#FFDF70","description":"(HEX: #FFDF70)","type":"color"},"yellow500":{"value":"#FFD33D","description":"(HEX: #FFD33D)","type":"color"},"yellow600":{"value":"#FFC70A","description":"(HEX: #FFC70A)","type":"color"}}}},"R2":{"O":{"background":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For default neutral backgrounds","type":"color"},"default-hover":{"value":"#FAFAFA","type":"color","description":"(#FAFAFA)For component hover states that use background/default"},"default-pressed":{"value":"#EBEBEB","type":"color","description":"(#EBEBEB) For component pressed states that use background/default"},"alternative":{"value":"#F2F4F6","description":"(grey040: #F2F4F6) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)","type":"color"},"alternative-hover":{"value":"#EDEFF1","type":"color","description":"(#EDEFF1) For component hover states that use background/alternative"},"alternative-pressed":{"value":"#DFE0E2","type":"color","description":"(#DFE0E2) For component pressed states that use background/alternative"},"hover":{"value":"#00000005","type":"color","description":"(#00000005) For component hover states with no background color"},"pressed":{"value":"#00000014","type":"color","description":"(#00000014) For component pressed states with no background color"}},"text":{"default":{"value":"#24272A","description":"(grey800: #24272A) For general text that takes main priority in the information hierarchy","type":"color"},"alternative":{"value":"#535A61","description":"(grey600: #535A61) For a weaker contrast option for neutral text","type":"color"},"muted":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For inactive or lowest priority text. (Example: placeholder)","type":"color"}},"icon":{"default":{"value":"#24272A","description":"(grey800: #24272A) For default neutral icons","type":"color"},"alternative":{"value":"#6A737D","type":"color","description":"(grey500: #6A737D) For a weaker contrast option for neutral icons"},"muted":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For inactive or lowest priority icons","type":"color"}},"border":{"default":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For default neutral borders with visible contrast. (Example: text inputs)","type":"color"},"muted":{"value":"#D6D9DC","description":"(grey100: #D6D9DC) For a weaker contrast option for neutral borders. (Example: dividers)","type":"color"}},"overlay":{"default":{"value":"#00000099","description":"(black000: #000000 60% opacity) For shading layers behind modality screens","type":"color"},"alternative":{"value":"#000000CC","description":"(black000: #000000 80% opacity) For a stronger shading layer option behind modality screens","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons","type":"color"}},"primary":{"default":{"value":"#0376C9","description":"(blue500: #0376C9) For primary user action related elements","type":"color"},"alternative":{"value":"#0260A4","description":"(blue600: #0260A4) For the \\"pressed\\" state of interactive primary elements","type":"color"},"muted":{"value":"#0376C919","description":"(blue500: #0376C9 10% opacity) For lowest contrast background used in primary elements","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"},"default-hover":{"value":"#0379CE","type":"color","description":"(#0379CE) For the \\"hover\\" state of interactive primary elements"},"default-pressed":{"value":"#036DB9","type":"color","description":"(#036DB9) For the \\"pressed\\" state of interactive primary elements"}},"secondary":{"default":{"value":"#F66A0A","description":"(orange500: #F66A0A) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox","type":"color"},"alternative":{"value":"#BF5208","description":"(orange600: #BF5208) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states","type":"color"},"muted":{"value":"#F66A0A19","description":"(orange500: #F66A0A 10% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button","type":"color"},"disabled":{"value":"#F66A0A80","description":"(orange500: #F66A0A 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components","type":"color"}},"error":{"default":{"value":"#D73847","description":"(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#B92534","description":"(red600: #B92534) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#D7384719","description":"(red500: #D73847 10% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of error/default (Example: label of danger/critical button)"},"disabled":{"value":"#D7384780","description":"(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons","type":"color"},"default-hover":{"value":"#CD4250","type":"color","description":"(#CD4250) For the \\"hovered\\" state of interactive danger/critical elements"},"default-pressed":{"value":"#C63441","type":"color","description":"(#C63441) For the \\"pressed\\" state of interactive danger/critical elements"}},"warning":{"default":{"value":"#BF5208","type":"color","description":"(orange600: #BF5208) For low-mid level alert elements. Used for text, background, icon or border"},"alternative":{"value":"#FFC70A","description":"(yellow600: #FFC70A) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states","type":"color"},"muted":{"value":"#BF520819","type":"color","description":"(orange600: #BF5208 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of warning/default. Used for text, icon or border"},"disabled":{"value":"#FFD33D80","description":"(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons","type":"color"},"default-hover":{"value":"#C2540A","type":"color","description":"(#C2540A) For the \\"hover\\" state of warning elements"},"default-pressed":{"value":"#A24507","type":"color","description":"(#A24507) For the \\"pressed\\" state of warning elements"}},"success":{"default":{"value":"#1C8234","type":"color","description":"(green500: #1C8234) For positive & good semantic elements. Used for text, background, icon or border"},"alternative":{"value":"#1C8234","description":"(green600: #1C8234) [DEPRECATED] (green600: #1C8234) success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#1C823419","type":"color","description":"(green600: #1C8234 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of success/default. Used for text, icon or border"},"disabled":{"value":"#28A74580","description":"(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons","type":"color"},"default-hover":{"value":"#208838","type":"color","description":"(#208838) For the \\"hover\\" state of success elements"},"default-pressed":{"value":"#1B7431","type":"color","description":"(#1B7431) For the \\"pressed\\" state of success elements"}},"info":{"default":{"value":"#0376C9","description":"(blue500: #0376C9) For informational semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#0260A4","description":"(blue600: #0260A4) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states","type":"color"},"muted":{"value":"#0376C919","description":"(blue500: #0376C9 10% opacity) For lowest contrast background used in informational semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#FFFFFF","type":"color","description":"(white000: #FFFFFF) For elements used on top of info/default. Used for text, icon or border"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"}},"networks":{"goerli":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For goerli test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/goerli/default. Used for text, icon or border","type":"color"}},"localhost":{"default":{"value":"#BBC0C5","description":"(grey200: #BBC0C5) For localhost test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border","type":"color"}},"sepolia":{"default":{"value":"#CFB5F0","description":"(violet300: #CFB5F0) For sepolia test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border","type":"color"}}},"flask":{"default":{"value":"#8B45B6","description":"(purple500: #8B45B6) For Flask brand default colored elements.","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of flask/default. Used for text, icon or border","type":"color"}}}},"_4":{"O":{"background":{"default":{"value":"#24272A","description":"(grey800: #24272A) For default neutral backgrounds","type":"color"},"default-hover":{"value":"#282B2E","type":"color","description":"(#282B2E) For component hover states that use background/default"},"default-pressed":{"value":"#36383B","type":"color","description":"(#36383B) For component pressed states that use background/default"},"alternative":{"value":"#141618","description":"(grey900: #141618) For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)","type":"color"},"alternative-hover":{"value":"#191B1D","type":"color","description":"(#191B1D) For component hover states that use background/alternative"},"alternative-pressed":{"value":"#27292A","type":"color","description":"(#27292A) For component pressed states that use background/alternative"},"hover":{"value":"#FFFFFF05","type":"color","description":"(#FFFFFF05) For component hover states with no background color"},"pressed":{"value":"#FFFFFF14","type":"color","description":"(#FFFFFF14) For component pressed states with no background color"}},"text":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For general text that takes main priority in the information hierarchy","type":"color"},"alternative":{"value":"#D6D9DC","description":"(grey100: #D6D9DC) For a weaker contrast option for neutral text. ","type":"color"},"muted":{"value":"#9FA6AE","description":"(grey300: #9FA6AE) For inactive or lowest priority text. (Example: placeholder)","type":"color"}},"icon":{"default":{"value":"#FFFFFF","description":"(white000: #FFFFFF) For default neutral icons","type":"color"},"alternative":{"value":"#BBC0C5","type":"color","description":"(grey200: #BBC0C5) For a weaker contrast option for neutral icons"},"muted":{"value":"#9FA6AE","description":"(grey300: #9FA6AE) For inactive or lowest priority icons","type":"color"}},"border":{"default":{"value":"#848C96","description":"(grey400: #848C96) For default neutral borders with visible contrast. (Example: text inputs)","type":"color"},"muted":{"value":"#3B4046","description":"(grey700: #3B4046) For a weaker contrast option for neutral borders. (Example: dividers)","type":"color"}},"overlay":{"default":{"value":"#00000099","description":"(black000: #000000 60% opacity) For shading layers behind modality screens","type":"color"},"alternative":{"value":"#000000CC","description":"(black000: #000000 80% opacity) For a stronger shading layer option behind modality screens","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons","type":"color"}},"primary":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For primary user action related elements","type":"color"},"alternative":{"value":"#43AEFC","description":"(blue300: #43AEFC) For the \\"pressed\\" state of interactive primary elements","type":"color"},"muted":{"value":"#1098FC26","description":"(blue400: #1098FC 15% opacity) For lowest contrast background used in primary elements","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900 : #141618)  For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"},"disabled":{"value":"#1098FC80","description":"(blue400: #1098FC) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links","type":"color"},"default-hover":{"value":"#0092FA","type":"color","description":"(#0092FA) For the \\"hover\\" state of interactive primary elements"},"default-pressed":{"value":"#54B6FC","type":"color","description":"(#54B6FC) For the \\"hover\\" state of interactive primary elements"}},"secondary":{"default":{"value":"#F8883B","description":"(orange400: #F8883B) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox","type":"color"},"alternative":{"value":"#FAA66C","description":"(orange300: #FAA66C) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states","type":"color"},"muted":{"value":"#F8883B26","description":"(orange400: #F8883B 15% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button","type":"color"},"disabled":{"value":"#F8883B80","description":"(orange400: #F8883B 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components","type":"color"}},"error":{"default":{"value":"#FF5263","type":"color","description":"(#FF5263) For high-level alert danger/critical elements. Used for text, background, icon or border"},"alternative":{"value":"#E88F97","description":"(red300: #E88F97) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#FF526326","type":"color","description":"(#FF5263) 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)"},"inverse":{"value":"#141618","type":"color","description":"(grey900: #141618) For elements used on top of error/default (Example: label of danger/critical button)"},"disabled":{"value":"#D7384780","description":"(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons","type":"color"},"default-hover":{"value":"#FF4D58","type":"color","description":"FF4D58: For the \\"hover\\" state of interactive danger/critical elements"},"default-pressed":{"value":"#F9868E","type":"color","description":"F9868E: For the \\"hover\\" state of interactive danger/critical elements"}},"warning":{"default":{"value":"#FFD33D","description":"(yellow500: #FFD33D) For low-mid level alert elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#FFDF70","description":"(yellow400: #FFDF70) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states","type":"color"},"muted":{"value":"#FFD33D26","description":"(yellow500: #FFD33D 15% opacity) For lowest contrast background used in warning elements. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","description":"(grey900: #141618) For elements used on top of warning/default. Used for text, icon or border","type":"color"},"disabled":{"value":"#FFD33D80","description":"(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons","type":"color"},"default-hover":{"value":"#FFC60A","type":"color","description":"(#FFC60A): For warning with stronger contrast."},"default-pressed":{"value":"#FFEAA3D1","type":"color","description":"(#FFEAA3): For the \\"pressed\\" state of low-mid level alert elements."}},"success":{"default":{"value":"#28A745","description":"(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#5DD879","description":"(green400: #5DD879) [DEPRECATED] success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#28A74526","description":"(green500: #28A745 15% opacity) Lowest contrast background used in success semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900 : #141618) For elements used on top of success/default. Used for text, icon or border"},"disabled":{"value":"#28A74580","description":"(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons","type":"color"},"default-hover":{"value":"#05B82F","type":"color","description":"(#05B82F): For success with stronger contrast."},"default-pressed":{"value":"#6AEC88","type":"color","description":"(#6AEC88): For success with stronger contrast."}},"info":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For informational semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#43AEFC","description":"(blue300: #43AEFC) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states","type":"color"},"muted":{"value":"#1098FC26","description":"(blue400: #1098FC 15% opacity) For lowest contrast background used in informational semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#141618","type":"color","description":"(grey900: #141618) For elements used on top of info/default. Used for text, icon or border"},"disabled":{"value":"#0376C980","description":"(blue500: #0376C9 50% opacity) [DEPRECATED] info.disabled should be used for all disabled info action components such as buttons or links","type":"color"}},"networks":{"goerli":{"default":{"value":"#1098FC","description":"(blue400: #1098FC) For goerli test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/goerli/default. Used for text, icon or border","type":"color"}},"localhost":{"default":{"value":"#BBC0C5","description":"(blue400: #BBC0C5) For localhost test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border","type":"color"}},"sepolia":{"default":{"value":"#CFB5F0","description":"(violet300: #CFB5F0) For sepolia test network","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border","type":"color"}}},"flask":{"default":{"value":"#8B45B6","description":"(purple500: #8B45B6) For Flask brand default colored elements.","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of flask/default. Used for text, icon or border","type":"color"}}}}}')}}]);
\ No newline at end of file
diff --git a/948.e8ffb950.iframe.bundle.js b/948.e8ffb950.iframe.bundle.js
deleted file mode 100644
index be35b4f4..00000000
--- a/948.e8ffb950.iframe.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see 948.e8ffb950.iframe.bundle.js.LICENSE.txt */
-(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[948],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./docs/components/Text/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{x:()=>Text_Text});__webpack_require__("./node_modules/react/index.js");var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Text_Text=_ref=>{let{style,children,as}=_ref;const Component=as||"span";return(0,jsx_runtime.jsx)(Component,{style:{fontFamily:fontFamilies.V.euclidCircularB,...style},children})};Text_Text.displayName="Text";try{Text_Text.displayName="Text",Text_Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/Text.tsx#Text"]={docgenInfo:Text_Text.__docgenInfo,name:"Text",path:"docs/components/Text/Text.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/Text/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./docs/components/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{bc:()=>ColorSwatch_ColorSwatch,H4:()=>ColorSwatchGroup_ColorSwatchGroup,xv:()=>components_Text.x});__webpack_require__("./node_modules/react/index.js");var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ColorSwatch_ColorSwatch=_ref=>{let{color,borderColor=src.Wb.colors.border.muted,textBackgroundColor=src.Wb.colors.background.default,textColor=src.Wb.colors.text.default,name,...props}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:120,backgroundColor:color,border:`1px solid ${borderColor}`,display:"flex",flexDirection:"column-reverse",borderRadius:"8px"},...props,children:(0,jsx_runtime.jsxs)("div",{style:{backgroundColor:textBackgroundColor,padding:8,borderRadius:"0 0 8px 8px"},children:[(0,jsx_runtime.jsx)("strong",{style:{display:"block",marginBottom:"8px"},children:(0,jsx_runtime.jsx)("code",{children:`${name}`})}),(0,jsx_runtime.jsx)("code",{children:`${color}`})]})})};ColorSwatch_ColorSwatch.displayName="ColorSwatch";try{ColorSwatch_ColorSwatch.displayName="ColorSwatch",ColorSwatch_ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"]={docgenInfo:ColorSwatch_ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}const ColorSwatchGroup_ColorSwatchGroup=_ref=>{let{swatchData,borderColor,textBackgroundColor,textColor}=_ref;if(!swatchData)return(0,jsx_runtime.jsx)("div",{children:"No swatch data"});const swatchColorsArr=Object.keys(swatchData);return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:swatchColorsArr.map((category=>{const colorsObj=swatchData[category];let colorsArr=[];const recursiveColors=(nextLevel,label)=>{for(const key in nextLevel){const level=nextLevel[key];level.value?colorsArr.push({label:`${label}${key}`,value:level.value,description:level.description}):recursiveColors(level,`${label}${key}.`)}};return recursiveColors(colorsObj,""),(0,jsx_runtime.jsxs)("div",{style:{fontSize:"0.875rem",fontFamily:"sans-serif",color:textColor},children:[(0,jsx_runtime.jsx)("h2",{children:category}),(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"16px",gridTemplateColumns:"repeat(auto-fill, 300px)"},children:colorsArr.map((color=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(ColorSwatch_ColorSwatch,{color:color.value,name:color.label,borderColor,textBackgroundColor,textColor}),color?.description?(0,jsx_runtime.jsx)("p",{style:{lineHeight:1.3},children:color?.description}):null]},color.label)))})]},category)}))})};try{ColorSwatchGroup_ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup_ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup_ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}var components_Text=__webpack_require__("./docs/components/Text/index.tsx");try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Wb:()=>_js__WEBPACK_IMPORTED_MODULE_0__.Wb});var _js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/js/index.ts")},"./src/js/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Wb:()=>lightTheme});var typography=__webpack_require__("./src/js/typography/index.ts");const colors={background:{default:"#FFFFFF",defaultHover:"#FAFAFA",defaultPressed:"#EBEBEB",alternative:"#F2F4F6",alternativeHover:"#EDEFF1",alternativePressed:"#DFE0E2",hover:"#00000005",pressed:"#00000014"},text:{default:"#24272A",alternative:"#535A61",muted:"#BBC0C5"},icon:{default:"#24272A",alternative:"#6A737D",muted:"#BBC0C5"},border:{default:"#BBC0C5",muted:"#D6D9DC"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#0000001A"},primary:{default:"#0376C9",defaultHover:"#0379CE",defaultPressed:"#036DB9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#BF5208",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",defaultHover:"#CD4250",defaultPressed:"#C63441",alternative:"#B92534",muted:"#D7384719",inverse:"#FFFFFF",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#BF5208",defaultHover:"#C2540A",defaultPressed:"#A24507",alternative:"#FFC70A",muted:"#BF520819",inverse:"#FFFFFF",disabled:"#FFD33D80"},success:{default:"#1C8234",defaultHover:"#208838",defaultPressed:"#1B7431",alternative:"#1C8234",muted:"#1C823419",inverse:"#FFFFFF",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},shadows={size:{xs:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:4},sm:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:8},md:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:16},lg:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:40}}},lightTheme={colors,typography:typography.c,shadows},colors_colors={background:{default:"#24272A",defaultHover:"#282B2E",defaultPressed:"#36383B",alternative:"#141618",alternativeHover:"#191B1D",alternativePressed:"#27292A",hover:"#FFFFFF05",pressed:"#FFFFFF14"},text:{default:"#FFFFFF",alternative:"#D6D9DC",muted:"#9FA6AE"},icon:{default:"#FFFFFF",alternative:"#BBC0C5",muted:"#9FA6AE"},border:{default:"#848C96",muted:"#3B4046"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#00000066"},primary:{default:"#1098FC",defaultHover:"#0092FA",defaultPressed:"#54B6FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#FF5263",defaultHover:"#FF4D58",defaultPressed:"#F9868E",alternative:"#E88F97",muted:"#FF526326",inverse:"#141618",disabled:"#D7384780",shadow:"#FF526366"},warning:{default:"#FFD33D",defaultHover:"#FFC60A",defaultPressed:"#FFEAA3D1",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",defaultHover:"#05B82F",defaultPressed:"#6AEC88",alternative:"#5DD879",muted:"#28A74526",inverse:"#141618",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},darkTheme_colors=(colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors);typography.c,lightTheme.colors},"./src/js/typography/fontFamilies.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{V:()=>fontFamilies});const fontFamilies={euclidCircularB:"Euclid Circular B"}},"./src/js/typography/fontSizes.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C:()=>fontSizes});const fontSizes={fontSize1:10,fontSize2:12,fontSize3:14,fontSize4:16,fontSize5:18,fontSize6:24,fontSize7:32,fontSize8:48}},"./src/js/typography/fontWeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{v:()=>fontWeights});const fontWeights={regular:"400",medium:"500",bold:"700"}},"./src/js/typography/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{c:()=>typography});var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),fontSizes=__webpack_require__("./src/js/typography/fontSizes.ts"),fontWeights=__webpack_require__("./src/js/typography/fontWeights.ts"),letterSpacing=__webpack_require__("./src/js/typography/letterSpacing.ts"),lineHeights=__webpack_require__("./src/js/typography/lineHeights.ts");const typography={sDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},sBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},lDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize8,lineHeight:lineHeights.t.lineHeight7,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1},lBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1}}},"./src/js/typography/letterSpacing.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>letterSpacing});const letterSpacing={letterSpacing0:0,letterSpacing1:.25}},"./src/js/typography/lineHeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{t:()=>lineHeights});const lineHeights={lineHeight1:16,lineHeight2:20,lineHeight3:22,lineHeight4:24,lineHeight5:32,lineHeight6:40,lineHeight7:56}},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/object-assign/index.js");var f=__webpack_require__("./node_modules/react/index.js"),g=60103;if(exports.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element"),exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,k){var b,d={},e=null,l=null;for(b in void 0!==k&&(e=""+k),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(l=a.ref),a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
\ No newline at end of file
diff --git a/docs-BrandColors-stories.304bfbee.iframe.bundle.js b/docs-BrandColors-stories.304bfbee.iframe.bundle.js
deleted file mode 100644
index 97953648..00000000
--- a/docs-BrandColors-stories.304bfbee.iframe.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[202],{"./docs/BrandColors.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DefaultStory:()=>DefaultStory,__namedExportsOrder:()=>__namedExportsOrder,default:()=>BrandColors_stories});__webpack_require__("./node_modules/react/index.js");var tokens=__webpack_require__("./src/figma/tokens.json"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",a:"a",strong:"strong",em:"em",ul:"ul",li:"li",h2:"h2",h3:"h3",pre:"pre",code:"code"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"brand-colors-first-tier",children:"Brand colors (first tier)"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"}),"."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["While these colors are fundamental to our design system, they ",(0,jsx_runtime.jsx)(_components.strong,{children:"should not"})," be used directly in most cases. Instead, they should be referenced via ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"}),", which form the second tier of our design tokens."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.em,{children:["The majority of our brand color progressions were generated using the ",(0,jsx_runtime.jsx)(_components.a,{href:"https://0to255.com/037dd6",target:"_blank",rel:"nofollow noopener noreferrer",children:"0to255"})," tool, which helps ensure smooth and consistent color transitions."]})}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#brand-colors",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Brand colors"})})}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#best-practices",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Best practices"})})}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#references",children:(0,jsx_runtime.jsx)(_components.strong,{children:"References"})})}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"brand-colors",children:"Brand colors"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:DefaultStory}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-do-use-brand-colors-when-the-color-should-remain-the-same-across-all-themes",children:["✅ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DO"}),": Use brand colors when the color should remain the same across all themes"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"fill: brandColors.white.white000;\nfill: var(--brand-colors-white-white000);\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-dont-use-brand-colors-without-checking-for-an-existing-theme-token-first",children:["❌ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DON'T"}),": Use brand colors without checking for an existing theme token first"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"background-color: brandColors.blue.blue500; // Brand color instead of theme.color.primary.default\nbackground-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default)\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-do-store-non-token-colors-in-a-global-file",children:["✅ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DO"}),": Store non-token colors in a global file"]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"// colors.js\nexport const customColors = {\n  myCustomColor: '#abc123',\n};\n\n// colors.css\n--custom-colors-my-custom-color: #abc123;\n\n// component.js\nimport { customColors } from './colors.js';\n\nbackground-color: customColors.myCustomColor;\nbackground-color: var(--custom-colors-my-custom-color);\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-dont-use-non-token-colors-directly-in-your-components",children:["❌ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DON'T"}),": Use non-token colors directly in your components"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"// Avoid\nbackground-color: #abc123; // Custom color not in design tokens or global file\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"http://www.0to255.com/037DD6",target:"_blank",rel:"nofollow noopener noreferrer",children:"0to255"}),": The tool we used to generate our color progressions."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Brand Colors Library"}),": Our internal Figma library for brand colors. Please note that this is for internal use only."]}),"\n"]})]})}const BrandColors=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)},BrandColors_stories={title:"Colors/Brand Colors",component:components.H4,parameters:{docs:{page:BrandColors}}},DefaultStory={render:()=>(0,jsx_runtime.jsx)(components.H4,{swatchData:tokens.CO.D2}),name:"Default"};DefaultStory.parameters={...DefaultStory.parameters,docs:{...DefaultStory.parameters?.docs,source:{originalSource:"{\n  render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,\n  name: 'Default'\n}",...DefaultStory.parameters?.docs?.source}}};const __namedExportsOrder=["DefaultStory"]}}]);
\ No newline at end of file
diff --git a/docs-BrandColors-stories.de5e03f7.iframe.bundle.js b/docs-BrandColors-stories.de5e03f7.iframe.bundle.js
new file mode 100644
index 00000000..5322be75
--- /dev/null
+++ b/docs-BrandColors-stories.de5e03f7.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[202],{"./docs/BrandColors.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DefaultStory:()=>DefaultStory,JS:()=>JS,__namedExportsOrder:()=>__namedExportsOrder,default:()=>BrandColors_stories});__webpack_require__("./node_modules/react/index.js");var tokens=__webpack_require__("./src/figma/tokens.json"),js=__webpack_require__("./src/js/index.ts"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",a:"a",strong:"strong",em:"em",ul:"ul",li:"li",h2:"h2",h3:"h3",pre:"pre",code:"code"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"brand-colors-first-tier",children:"Brand colors (first tier)"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"}),"."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["While these colors are fundamental to our design system, they ",(0,jsx_runtime.jsx)(_components.strong,{children:"should not"})," be used directly in most cases. Instead, they should be referenced via ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"}),", which form the second tier of our design tokens."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.em,{children:["The majority of our brand color progressions were generated using the ",(0,jsx_runtime.jsx)(_components.a,{href:"https://0to255.com/037dd6",target:"_blank",rel:"nofollow noopener noreferrer",children:"0to255"})," tool, which helps ensure smooth and consistent color transitions."]})}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#brand-colors",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Brand colors"})})}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#best-practices",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Best practices"})})}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#references",children:(0,jsx_runtime.jsx)(_components.strong,{children:"References"})})}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"brand-colors",children:"Brand colors"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:DefaultStory}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-do-use-brand-colors-when-the-color-should-remain-the-same-across-all-themes",children:["✅ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DO"}),": Use brand colors when the color should remain the same across all themes"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"fill: brandColors.white.white000;\nfill: var(--brand-colors-white-white000);\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-dont-use-brand-colors-without-checking-for-an-existing-theme-token-first",children:["❌ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DON'T"}),": Use brand colors without checking for an existing theme token first"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"background-color: brandColors.blue.blue500; // Brand color instead of theme.color.primary.default\nbackground-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default)\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-do-store-non-token-colors-in-a-global-file",children:["✅ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DO"}),": Store non-token colors in a global file"]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"// colors.js\nexport const customColors = {\n  myCustomColor: '#abc123',\n};\n\n// colors.css\n--custom-colors-my-custom-color: #abc123;\n\n// component.js\nimport { customColors } from './colors.js';\n\nbackground-color: customColors.myCustomColor;\nbackground-color: var(--custom-colors-my-custom-color);\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"-dont-use-non-token-colors-directly-in-your-components",children:["❌ ",(0,jsx_runtime.jsx)(_components.strong,{children:"DON'T"}),": Use non-token colors directly in your components"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-jsx",children:"// Avoid\nbackground-color: #abc123; // Custom color not in design tokens or global file\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"http://www.0to255.com/037DD6",target:"_blank",rel:"nofollow noopener noreferrer",children:"0to255"}),": The tool we used to generate our color progressions."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Brand Colors Library"}),": Our internal Figma library for brand colors. Please note that this is for internal use only."]}),"\n"]})]})}const BrandColors=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)},BrandColors_stories={title:"Colors/Brand Colors",component:components.H4,parameters:{docs:{page:BrandColors}}},DefaultStory={render:()=>(0,jsx_runtime.jsx)(components.H4,{swatchData:tokens.CO.D2}),name:"Default"},JS={render:()=>(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"16px",gridTemplateColumns:"repeat(auto-fill, 300px)"},children:Object.entries(js.Fz).map((_ref=>{let[name,color]=_ref;return(0,jsx_runtime.jsx)(components.bc,{color,name:`brandColor.${name}`},name)}))})};DefaultStory.parameters={...DefaultStory.parameters,docs:{...DefaultStory.parameters?.docs,source:{originalSource:"{\n  render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,\n  name: 'Default'\n}",...DefaultStory.parameters?.docs?.source}}},JS.parameters={...JS.parameters,docs:{...JS.parameters?.docs,source:{originalSource:"{\n  render: () => <div style={{\n    display: 'grid',\n    gap: '16px',\n    gridTemplateColumns: 'repeat(auto-fill, 300px)'\n  }}>\n      {/* Mapping through each brand color and rendering a ColorSwatch component for it */}\n      {Object.entries(brandColor).map(([name, color]) => <ColorSwatch key={name} color={color} name={`brandColor.${name}`} />)}\n    </div>\n}",...JS.parameters?.docs?.source}}};const __namedExportsOrder=["DefaultStory","JS"]}}]);
\ No newline at end of file
diff --git a/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js b/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js
deleted file mode 100644
index 177a0bca..00000000
--- a/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js.LICENSE.txt */
-(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[181],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/IntroductionColor.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>IntroductionColor_stories});__webpack_require__("./node_modules/react/index.js");var lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");const design_token_graphic_namespaceObject=__webpack_require__.p+"static/media/design.token.graphic.8d23ec03.svg";var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",a:"a",strong:"strong",ul:"ul",li:"li"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Colors / Introduction"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"color",children:"Color"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Color is used to express style and communicate meaning. We follow a 3 tiered system for color design tokens."}),"\n",(0,jsx_runtime.jsx)("div",{style:{textAlign:"center",backgroundColor:src.Wb.colors.background.alternative,padding:32},children:(0,jsx_runtime.jsx)("img",{width:"80%",src:design_token_graphic_namespaceObject})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"brand-colors-first-tier",children:"Brand colors (first tier)"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Brand colors are the foundation of our color system. They are primarily used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," and ",(0,jsx_runtime.jsx)(_components.strong,{children:"should not"})," be used directly in most component styles."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For more details, refer to the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brand-colors--docs",children:"brand colors"})," section."]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"theme-colors-second-tier",children:"Theme colors (second tier)"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. For most use cases, these function-based theme color tokens should be your first choice."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For more details, refer to the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," section"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"component-colors-third-tier",children:"Component colors (third tier)"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future"}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Learn more about our ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brand-colors--docs",children:"brand colors"})," or ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," section"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Brand Colors Library"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Light Theme Colors Library"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Dark Theme Colors Library"}),"(internal use only)"]}),"\n"]})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Colors / Introduction",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const IntroductionColor_stories=componentMeta,__namedExportsOrder=["__page"]},"./src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Wb:()=>_js__WEBPACK_IMPORTED_MODULE_0__.Wb});var _js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/js/index.ts")},"./src/js/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Wb:()=>lightTheme});var typography=__webpack_require__("./src/js/typography/index.ts");const colors={background:{default:"#FFFFFF",defaultHover:"#FAFAFA",defaultPressed:"#EBEBEB",alternative:"#F2F4F6",alternativeHover:"#EDEFF1",alternativePressed:"#DFE0E2",hover:"#00000005",pressed:"#00000014"},text:{default:"#24272A",alternative:"#535A61",muted:"#BBC0C5"},icon:{default:"#24272A",alternative:"#6A737D",muted:"#BBC0C5"},border:{default:"#BBC0C5",muted:"#D6D9DC"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#0000001A"},primary:{default:"#0376C9",defaultHover:"#0379CE",defaultPressed:"#036DB9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#BF5208",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",defaultHover:"#CD4250",defaultPressed:"#C63441",alternative:"#B92534",muted:"#D7384719",inverse:"#FFFFFF",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#BF5208",defaultHover:"#C2540A",defaultPressed:"#A24507",alternative:"#FFC70A",muted:"#BF520819",inverse:"#FFFFFF",disabled:"#FFD33D80"},success:{default:"#1C8234",defaultHover:"#208838",defaultPressed:"#1B7431",alternative:"#1C8234",muted:"#1C823419",inverse:"#FFFFFF",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FFFFFF",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},shadows={size:{xs:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:4},sm:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:8},md:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:16},lg:{shadowColor:colors.shadow.default,shadowOffset:{width:0,height:2},shadowOpacity:1,shadowRadius:40}}},lightTheme={colors,typography:typography.c,shadows},colors_colors={background:{default:"#24272A",defaultHover:"#282B2E",defaultPressed:"#36383B",alternative:"#141618",alternativeHover:"#191B1D",alternativePressed:"#27292A",hover:"#FFFFFF05",pressed:"#FFFFFF14"},text:{default:"#FFFFFF",alternative:"#D6D9DC",muted:"#9FA6AE"},icon:{default:"#FFFFFF",alternative:"#BBC0C5",muted:"#9FA6AE"},border:{default:"#848C96",muted:"#3B4046"},overlay:{default:"#00000099",inverse:"#FCFCFC",alternative:"#000000CC"},shadow:{default:"#00000066"},primary:{default:"#1098FC",defaultHover:"#0092FA",defaultPressed:"#54B6FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#FF5263",defaultHover:"#FF4D58",defaultPressed:"#F9868E",alternative:"#E88F97",muted:"#FF526326",inverse:"#141618",disabled:"#D7384780",shadow:"#FF526366"},warning:{default:"#FFD33D",defaultHover:"#FFC60A",defaultPressed:"#FFEAA3D1",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",defaultHover:"#05B82F",defaultPressed:"#6AEC88",alternative:"#5DD879",muted:"#28A74526",inverse:"#141618",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#141618",disabled:"#0376C980"},networks:{goerli:{default:"#1098FC",inverse:"#FCFCFC"},localhost:{default:"#BBC0C5",inverse:"#FCFCFC"},sepolia:{default:"#CFB5F0",inverse:"#FCFCFC"}},flask:{default:"#8B45B6",inverse:"#FCFCFC"}},darkTheme_colors=(colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors.shadow.default,colors_colors);typography.c,lightTheme.colors},"./src/js/typography/fontFamilies.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{V:()=>fontFamilies});const fontFamilies={euclidCircularB:"Euclid Circular B"}},"./src/js/typography/fontSizes.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C:()=>fontSizes});const fontSizes={fontSize1:10,fontSize2:12,fontSize3:14,fontSize4:16,fontSize5:18,fontSize6:24,fontSize7:32,fontSize8:48}},"./src/js/typography/fontWeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{v:()=>fontWeights});const fontWeights={regular:"400",medium:"500",bold:"700"}},"./src/js/typography/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{c:()=>typography});var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),fontSizes=__webpack_require__("./src/js/typography/fontSizes.ts"),fontWeights=__webpack_require__("./src/js/typography/fontWeights.ts"),letterSpacing=__webpack_require__("./src/js/typography/letterSpacing.ts"),lineHeights=__webpack_require__("./src/js/typography/lineHeights.ts");const typography={sDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},sBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing0},sBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},sBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize1,lineHeight:lineHeights.t.lineHeight1,letterSpacing:letterSpacing.r.letterSpacing1},lDisplayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize8,lineHeight:lineHeights.t.lineHeight7,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingLG:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize7,lineHeight:lineHeights.t.lineHeight6,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize6,lineHeight:lineHeights.t.lineHeight5,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lHeadingSMRegular:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyLGMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize5,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMD:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodyMDBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize4,lineHeight:lineHeights.t.lineHeight4,letterSpacing:letterSpacing.r.letterSpacing0},lBodySM:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodySMBold:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.bold,fontSize:fontSizes.C.fontSize3,lineHeight:lineHeights.t.lineHeight3,letterSpacing:letterSpacing.r.letterSpacing0},lBodyXS:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.regular,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1},lBodyXSMedium:{fontFamily:fontFamilies.V.euclidCircularB,fontWeight:fontWeights.v.medium,fontSize:fontSizes.C.fontSize2,lineHeight:lineHeights.t.lineHeight2,letterSpacing:letterSpacing.r.letterSpacing1}}},"./src/js/typography/letterSpacing.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{r:()=>letterSpacing});const letterSpacing={letterSpacing0:0,letterSpacing1:.25}},"./src/js/typography/lineHeights.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{t:()=>lineHeights});const lineHeights={lineHeight1:16,lineHeight2:20,lineHeight3:22,lineHeight4:24,lineHeight5:32,lineHeight6:40,lineHeight7:56}},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/object-assign/index.js");var f=__webpack_require__("./node_modules/react/index.js"),g=60103;if(exports.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element"),exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,k){var b,d={},e=null,l=null;for(b in void 0!==k&&(e=""+k),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(l=a.ref),a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
\ No newline at end of file
diff --git a/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js.LICENSE.txt b/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js.LICENSE.txt
deleted file mode 100644
index 1a0bfa64..00000000
--- a/docs-IntroductionColor-stories-mdx.19aa9cbc.iframe.bundle.js.LICENSE.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
diff --git a/docs-IntroductionColor-stories-mdx.935c7ed5.iframe.bundle.js b/docs-IntroductionColor-stories-mdx.935c7ed5.iframe.bundle.js
new file mode 100644
index 00000000..dd4418e6
--- /dev/null
+++ b/docs-IntroductionColor-stories-mdx.935c7ed5.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[181],{"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/IntroductionColor.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>IntroductionColor_stories});__webpack_require__("./node_modules/react/index.js");var lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");const design_token_graphic_namespaceObject=__webpack_require__.p+"static/media/design.token.graphic.8d23ec03.svg";var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",a:"a",strong:"strong",ul:"ul",li:"li"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Colors / Introduction"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"color",children:"Color"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Color is used to express style and communicate meaning. We follow a 3 tiered system for color design tokens."}),"\n",(0,jsx_runtime.jsx)("div",{style:{textAlign:"center",backgroundColor:src.Wb.colors.background.alternative,padding:32},children:(0,jsx_runtime.jsx)("img",{width:"80%",src:design_token_graphic_namespaceObject})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"brand-colors-first-tier",children:"Brand colors (first tier)"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Brand colors are the foundation of our color system. They are primarily used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," and ",(0,jsx_runtime.jsx)(_components.strong,{children:"should not"})," be used directly in most component styles."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For more details, refer to the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brand-colors--docs",children:"brand colors"})," section."]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"theme-colors-second-tier",children:"Theme colors (second tier)"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. For most use cases, these function-based theme color tokens should be your first choice."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For more details, refer to the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," section"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"component-colors-third-tier",children:"Component colors (third tier)"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future"}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Learn more about our ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brand-colors--docs",children:"brand colors"})," or ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-theme-colors--docs",children:"theme colors"})," section"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Brand Colors Library"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Light Theme Colors Library"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Dark Theme Colors Library"}),"(internal use only)"]}),"\n"]})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Colors / Introduction",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const IntroductionColor_stories=componentMeta,__namedExportsOrder=["__page"]}}]);
\ No newline at end of file
diff --git a/docs-Shadows-stories.2712ee2a.iframe.bundle.js b/docs-Shadows-stories.8be2d40c.iframe.bundle.js
similarity index 64%
rename from docs-Shadows-stories.2712ee2a.iframe.bundle.js
rename to docs-Shadows-stories.8be2d40c.iframe.bundle.js
index 55e4b763..7f3de4a1 100644
--- a/docs-Shadows-stories.2712ee2a.iframe.bundle.js
+++ b/docs-Shadows-stories.8be2d40c.iframe.bundle.js
@@ -1 +1 @@
-"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[740],{"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/Shadows.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Color:()=>Color,DefaultStory:()=>DefaultStory,ExampleUsage:()=>ExampleUsage,Size:()=>Size,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Shadows_stories});__webpack_require__("./node_modules/react/index.js");var js=__webpack_require__("./src/js/index.ts"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",code:"code",pre:"pre",ul:"ul",li:"li",a:"a"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Design Tokens/Shadows"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"shadows",children:"Shadows"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows in design are used to create depth and hierarchy. They can be used to differentiate between different elements, and to highlight interactive elements."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:DefaultStory}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows come in four different sizes: XS, SM, MD, and LG. The size of the shadow can be used to indicate the relative importance or prominence of an element."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:Size}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Size"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"XS"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.xs"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-xs)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"SM"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.sm"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-sm)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"MD"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.md"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-md)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"LG"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.lg"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-lg)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"color",children:"Color"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows can have three different colors: default (neutral), primary, and error/danger. The color of the shadow can be used to indicate the state or functionality of an element."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:Color}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Color"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"neutral"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.shadow.default"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-shadow-default)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"primary"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.primary.shadow"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-primary-shadow)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"danger"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.error.shadow"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-error-shadow)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"usage",children:"Usage"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows can be applied to various components to create depth and hierarchy. Here are some examples of how shadows can be used in different components:"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:ExampleUsage}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Component"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Card"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"cardShadow: {...shadows.size.xs }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Dropdown"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"dropdownShadow: { ...shadows.size.sm }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Toast"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"toastShadow: { ...shadows.size.md }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-md) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Modal"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"modalShadow: { ...shadows.size.lg }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-lg) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Button Primary Hover"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"buttonPrimaryHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Button Danger Hover"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"buttonDangerHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-error-shadow);"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The CSS-in-JS ",(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size"})," objects for React Native contain all the correct tokens for neutral shadows. For primary and error/danger shadows change the ",(0,jsx_runtime.jsx)(_components.code,{children:"shadowColor"})," key"]})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Example shape of the ",(0,jsx_runtime.jsx)(_components.code,{children:"xs"})," shadow size object from ",(0,jsx_runtime.jsx)(_components.code,{children:"shadows"})]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{children:"size: {\n    xs: {\n      shadowColor: colors.light.shadow.default,\n      shadowOffset: {\n        width: 0,\n        height: 2,\n      },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n    },\n    ...\n}\n\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/%5BColor%5D-Light-Theme?node-id=753%3A719",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Light Theme Colors Library(Shadows Page)"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/%5BColor%5D-Dark-Theme?node-id=522%3A1022",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Dark Theme Colors Library(Shadows Page)"}),"(internal use only)"]}),"\n"]})]})}const Shadows=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)},ShadowSwatch=_ref=>{let{children,style,size="xs",color="default"}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:100,backgroundColor:"var(--color-background-default)",boxShadow:"default"===color?`var(--shadow-size-${size}) var(--color-shadow-${color}`:`var(--shadow-size-${size}) var(--color-${color}-shadow`,borderRadius:"4px",display:"grid",alignContent:"center",justifyContent:"center",textAlign:"center",...style},children})};ShadowSwatch.displayName="ShadowSwatch";const Shadows_stories={title:"Shadows/Shadows",component:ShadowSwatch,parameters:{docs:{page:Shadows}},argTypes:{size:{control:"select",options:Object.keys(js.Wb.shadows.size)},color:{control:"select",options:["default","primary","error"]}}},DefaultStory={name:"Default",render:args=>(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:(0,jsx_runtime.jsx)(ShadowSwatch,{...args,children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Shadow"})})}),args:{color:"default",size:"xs"}},Size={render:args=>(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"xs",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"XS"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"sm",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"SM"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"md",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"MD"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"lg",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"LG"})})]}),args:{color:"default",size:"xs"}},Color={render:args=>(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{color:"default",size:args.size,children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Default"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:"primary",size:args.size,style:{backgroundColor:"var(--color-primary-default)",color:"var(--color-primary-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Primary"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:"error",size:args.size,style:{backgroundColor:"var(--color-error-default)",color:"var(--color-error-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Error/Danger"})})]}),args:{color:"default",size:"xs"}},ExampleUsage={render:()=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)",marginBottom:"64px"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-xs) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Card"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-sm) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Dropdown"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-md) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Toast"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-lg) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Modal"})})]}),(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--component-button-primary-shadow)",backgroundColor:"var(--color-primary-default)",color:"var(--color-primary-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Button Primary Hover"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--component-button-danger-shadow)",backgroundColor:"var(--color-error-default)",color:"var(--color-error-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Button Error/Danger Hover"})})]})]})};DefaultStory.parameters={...DefaultStory.parameters,docs:{...DefaultStory.parameters?.docs,source:{originalSource:"{\n  name: 'Default',\n  render: args => <div style={{\n    display: 'grid',\n    gap: '32px',\n    gridTemplateColumns: 'repeat(auto-fill, 200px)'\n  }}>\n      <ShadowSwatch {...args}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Shadow\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: 'default',\n    size: 'xs'\n  }\n}",...DefaultStory.parameters?.docs?.source}}},Size.parameters={...Size.parameters,docs:{...Size.parameters?.docs,source:{originalSource:'{\n  render: args => <div style={{\n    display: \'grid\',\n    gap: \'32px\',\n    gridTemplateColumns: \'repeat(auto-fill, 200px)\'\n  }}>\n      <ShadowSwatch color={args.color} size="xs">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          XS\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="sm">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          SM\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="md">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          MD\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="lg">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          LG\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: \'default\',\n    size: \'xs\'\n  }\n}',...Size.parameters?.docs?.source}}},Color.parameters={...Color.parameters,docs:{...Color.parameters?.docs,source:{originalSource:"{\n  render: args => <div style={{\n    display: 'grid',\n    gap: '32px',\n    gridTemplateColumns: 'repeat(auto-fill, 200px)'\n  }}>\n      <ShadowSwatch color=\"default\" size={args.size}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Default\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color=\"primary\" size={args.size} style={{\n      backgroundColor: 'var(--color-primary-default)',\n      color: 'var(--color-primary-inverse)'\n    }}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Primary\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color=\"error\" size={args.size} style={{\n      backgroundColor: 'var(--color-error-default)',\n      color: 'var(--color-error-inverse)'\n    }}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Error/Danger\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: 'default',\n    size: 'xs'\n  }\n}",...Color.parameters?.docs?.source}}},ExampleUsage.parameters={...ExampleUsage.parameters,docs:{...ExampleUsage.parameters?.docs,source:{originalSource:"{\n  render: () => <div>\n      <div style={{\n      display: 'grid',\n      gap: '32px',\n      gridTemplateColumns: 'repeat(auto-fill, 200px)',\n      marginBottom: '64px'\n    }}>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Card\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Dropdown\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Toast\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Modal\n          </Text>\n        </ShadowSwatch>\n      </div>\n      <div style={{\n      display: 'grid',\n      gap: '32px',\n      gridTemplateColumns: 'repeat(auto-fill, 200px)'\n    }}>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--component-button-primary-shadow)',\n        backgroundColor: 'var(--color-primary-default)',\n        color: 'var(--color-primary-inverse)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Button Primary Hover\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--component-button-danger-shadow)',\n        backgroundColor: 'var(--color-error-default)',\n        color: 'var(--color-error-inverse)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Button Error/Danger Hover\n          </Text>\n        </ShadowSwatch>\n      </div>\n    </div>\n}",...ExampleUsage.parameters?.docs?.source}}};const __namedExportsOrder=["DefaultStory","Size","Color","ExampleUsage"]}}]);
\ No newline at end of file
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[740],{"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/Shadows.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Color:()=>Color,DefaultStory:()=>DefaultStory,ExampleUsage:()=>ExampleUsage,Size:()=>Size,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Shadows_stories});__webpack_require__("./node_modules/react/index.js");var js=__webpack_require__("./src/js/index.ts"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",code:"code",pre:"pre",ul:"ul",li:"li",a:"a"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Design Tokens/Shadows"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"shadows",children:"Shadows"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows in design are used to create depth and hierarchy. They can be used to differentiate between different elements, and to highlight interactive elements."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:DefaultStory}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows come in four different sizes: XS, SM, MD, and LG. The size of the shadow can be used to indicate the relative importance or prominence of an element."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:Size}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Size"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"XS"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.xs"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-xs)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"SM"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.sm"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-sm)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"MD"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.md"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-md)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"LG"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size.lg"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--shadow-size-lg)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"color",children:"Color"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows can have three different colors: default (neutral), primary, and error/danger. The color of the shadow can be used to indicate the state or functionality of an element."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:Color}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Color"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"neutral"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.shadow.default"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-shadow-default)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"primary"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.primary.shadow"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-primary-shadow)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"danger"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"colors.error.shadow"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--color-error-shadow)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"usage",children:"Usage"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Shadows can be applied to various components to create depth and hierarchy. Here are some examples of how shadows can be used in different components:"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{of:ExampleUsage}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Component"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Card"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"cardShadow: {...shadows.size.xs }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-xs) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Dropdown"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"dropdownShadow: { ...shadows.size.sm }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Toast"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"toastShadow: { ...shadows.size.md }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-md) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Modal"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"modalShadow: { ...shadows.size.lg }"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-lg) var(--color-shadow-default);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Button Primary Hover"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"buttonPrimaryHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Button Danger Hover"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"buttonDangerHover: { ...shadows.size.sm, shadowColor: colors.primary.shadow}"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow: var(--shadow-size-sm) var(--color-error-shadow);"})})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The CSS-in-JS ",(0,jsx_runtime.jsx)(_components.code,{children:"shadows.size"})," objects for React Native contain all the correct tokens for neutral shadows. For primary and error/danger shadows change the ",(0,jsx_runtime.jsx)(_components.code,{children:"shadowColor"})," key"]})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Example shape of the ",(0,jsx_runtime.jsx)(_components.code,{children:"xs"})," shadow size object from ",(0,jsx_runtime.jsx)(_components.code,{children:"shadows"})]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{children:"size: {\n    xs: {\n      shadowColor: colors.light.shadow.default,\n      shadowOffset: {\n        width: 0,\n        height: 2,\n      },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n    },\n    ...\n}\n\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/%5BColor%5D-Light-Theme?node-id=753%3A719",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Light Theme Colors Library(Shadows Page)"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/%5BColor%5D-Dark-Theme?node-id=522%3A1022",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Dark Theme Colors Library(Shadows Page)"}),"(internal use only)"]}),"\n"]})]})}const Shadows=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)},ShadowSwatch=_ref=>{let{children,style,size="xs",color="default"}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:100,backgroundColor:"var(--color-background-default)",boxShadow:"default"===color?`var(--shadow-size-${size}) var(--color-shadow-${color}`:`var(--shadow-size-${size}) var(--color-${color}-shadow`,borderRadius:"4px",display:"grid",alignContent:"center",justifyContent:"center",textAlign:"center",...style},children})};ShadowSwatch.displayName="ShadowSwatch";const Shadows_stories={title:"Shadows/Shadows",component:ShadowSwatch,parameters:{docs:{page:Shadows}},argTypes:{size:{control:"select",options:Object.keys(js.Wb.shadows.size)},color:{control:"select",options:["default","primary","error"]}}},DefaultStory={name:"Default",render:args=>(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:(0,jsx_runtime.jsx)(ShadowSwatch,{...args,children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Shadow"})})}),args:{color:"default",size:"xs"}},Size={render:args=>(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"xs",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"XS"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"sm",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"SM"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"md",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"MD"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:args.color,size:"lg",children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"LG"})})]}),args:{color:"default",size:"xs"}},Color={render:args=>(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{color:"default",size:args.size,children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Default"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:"primary",size:args.size,style:{backgroundColor:"var(--color-primary-default)",color:"var(--color-primary-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Primary"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{color:"error",size:args.size,style:{backgroundColor:"var(--color-error-default)",color:"var(--color-error-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Error/Danger"})})]}),args:{color:"default",size:"xs"}},ExampleUsage={render:()=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)",marginBottom:"64px"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-xs) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Card"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-sm) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Dropdown"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-md) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Toast"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--shadow-size-lg) var(--color-shadow-default)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Modal"})})]}),(0,jsx_runtime.jsxs)("div",{style:{display:"grid",gap:"32px",gridTemplateColumns:"repeat(auto-fill, 200px)"},children:[(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--component-button-primary-shadow)",backgroundColor:"var(--color-primary-default)",color:"var(--color-primary-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Button Primary Hover"})}),(0,jsx_runtime.jsx)(ShadowSwatch,{style:{boxShadow:"var(--component-button-danger-shadow)",backgroundColor:"var(--color-error-default)",color:"var(--color-error-inverse)"},children:(0,jsx_runtime.jsx)(components.xv,{as:"p",style:{margin:0},children:"Button Error/Danger Hover"})})]})]})};DefaultStory.parameters={...DefaultStory.parameters,docs:{...DefaultStory.parameters?.docs,source:{originalSource:"{\n  name: 'Default',\n  render: args => <div style={{\n    display: 'grid',\n    gap: '32px',\n    gridTemplateColumns: 'repeat(auto-fill, 200px)'\n  }}>\n      <ShadowSwatch {...args}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Shadow\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: 'default',\n    size: 'xs'\n  }\n}",...DefaultStory.parameters?.docs?.source}}},Size.parameters={...Size.parameters,docs:{...Size.parameters?.docs,source:{originalSource:'{\n  render: args => <div style={{\n    display: \'grid\',\n    gap: \'32px\',\n    gridTemplateColumns: \'repeat(auto-fill, 200px)\'\n  }}>\n      <ShadowSwatch color={args.color} size="xs">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          XS\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="sm">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          SM\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="md">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          MD\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color={args.color} size="lg">\n        <Text as="p" style={{\n        margin: 0\n      }}>\n          LG\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: \'default\',\n    size: \'xs\'\n  }\n}',...Size.parameters?.docs?.source}}},Color.parameters={...Color.parameters,docs:{...Color.parameters?.docs,source:{originalSource:"{\n  render: args => <div style={{\n    display: 'grid',\n    gap: '32px',\n    gridTemplateColumns: 'repeat(auto-fill, 200px)'\n  }}>\n      <ShadowSwatch color=\"default\" size={args.size}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Default\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color=\"primary\" size={args.size} style={{\n      backgroundColor: 'var(--color-primary-default)',\n      color: 'var(--color-primary-inverse)'\n    }}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Primary\n        </Text>\n      </ShadowSwatch>\n      <ShadowSwatch color=\"error\" size={args.size} style={{\n      backgroundColor: 'var(--color-error-default)',\n      color: 'var(--color-error-inverse)'\n    }}>\n        <Text as=\"p\" style={{\n        margin: 0\n      }}>\n          Error/Danger\n        </Text>\n      </ShadowSwatch>\n    </div>,\n  args: {\n    color: 'default',\n    size: 'xs'\n  }\n}",...Color.parameters?.docs?.source}}},ExampleUsage.parameters={...ExampleUsage.parameters,docs:{...ExampleUsage.parameters?.docs,source:{originalSource:"{\n  render: () => <div>\n      <div style={{\n      display: 'grid',\n      gap: '32px',\n      gridTemplateColumns: 'repeat(auto-fill, 200px)',\n      marginBottom: '64px'\n    }}>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Card\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Dropdown\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Toast\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Modal\n          </Text>\n        </ShadowSwatch>\n      </div>\n      <div style={{\n      display: 'grid',\n      gap: '32px',\n      gridTemplateColumns: 'repeat(auto-fill, 200px)'\n    }}>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--component-button-primary-shadow)',\n        backgroundColor: 'var(--color-primary-default)',\n        color: 'var(--color-primary-inverse)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Button Primary Hover\n          </Text>\n        </ShadowSwatch>\n        <ShadowSwatch style={{\n        boxShadow: 'var(--component-button-danger-shadow)',\n        backgroundColor: 'var(--color-error-default)',\n        color: 'var(--color-error-inverse)'\n      }}>\n          <Text as=\"p\" style={{\n          margin: 0\n        }}>\n            Button Error/Danger Hover\n          </Text>\n        </ShadowSwatch>\n      </div>\n    </div>\n}",...ExampleUsage.parameters?.docs?.source}}};const __namedExportsOrder=["DefaultStory","Size","Color","ExampleUsage"]},"./docs/components/Text/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{x:()=>Text_Text});__webpack_require__("./node_modules/react/index.js");var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Text_Text=_ref=>{let{style,children,as}=_ref;const Component=as||"span";return(0,jsx_runtime.jsx)(Component,{style:{fontFamily:fontFamilies.V.euclidCircularB,...style},children})};Text_Text.displayName="Text";try{Text_Text.displayName="Text",Text_Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/Text.tsx#Text"]={docgenInfo:Text_Text.__docgenInfo,name:"Text",path:"docs/components/Text/Text.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/Text/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./docs/components/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{bc:()=>ColorSwatch_ColorSwatch,H4:()=>ColorSwatchGroup_ColorSwatchGroup,xv:()=>components_Text.x});__webpack_require__("./node_modules/react/index.js");var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ColorSwatch_ColorSwatch=_ref=>{let{color,borderColor=src.Wb.colors.border.muted,textBackgroundColor=src.Wb.colors.background.default,textColor=src.Wb.colors.text.default,name,...props}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:120,backgroundColor:color,border:`1px solid ${borderColor}`,display:"flex",flexDirection:"column-reverse",borderRadius:"8px"},...props,children:(0,jsx_runtime.jsxs)("div",{style:{backgroundColor:textBackgroundColor,padding:8,borderRadius:"0 0 8px 8px"},children:[(0,jsx_runtime.jsx)("strong",{style:{display:"block",marginBottom:"8px"},children:(0,jsx_runtime.jsx)("code",{children:`${name}`})}),(0,jsx_runtime.jsx)("code",{children:`${color}`})]})})};ColorSwatch_ColorSwatch.displayName="ColorSwatch";try{ColorSwatch_ColorSwatch.displayName="ColorSwatch",ColorSwatch_ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"]={docgenInfo:ColorSwatch_ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}const ColorSwatchGroup_ColorSwatchGroup=_ref=>{let{swatchData,borderColor,textBackgroundColor,textColor}=_ref;if(!swatchData)return(0,jsx_runtime.jsx)("div",{children:"No swatch data"});const swatchColorsArr=Object.keys(swatchData);return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:swatchColorsArr.map((category=>{const colorsObj=swatchData[category];let colorsArr=[];const recursiveColors=(nextLevel,label)=>{for(const key in nextLevel){const level=nextLevel[key];level.value?colorsArr.push({label:`${label}${key}`,value:level.value,description:level.description}):recursiveColors(level,`${label}${key}.`)}};return recursiveColors(colorsObj,""),(0,jsx_runtime.jsxs)("div",{style:{fontSize:"0.875rem",fontFamily:"sans-serif",color:textColor},children:[(0,jsx_runtime.jsx)("h2",{children:category}),(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"16px",gridTemplateColumns:"repeat(auto-fill, 300px)"},children:colorsArr.map((color=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(ColorSwatch_ColorSwatch,{color:color.value,name:color.label,borderColor,textBackgroundColor,textColor}),color?.description?(0,jsx_runtime.jsx)("p",{style:{lineHeight:1.3},children:color?.description}):null]},color.label)))})]},category)}))})};try{ColorSwatchGroup_ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup_ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup_ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}var components_Text=__webpack_require__("./docs/components/Text/index.tsx");try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}}}]);
\ No newline at end of file
diff --git a/docs-Typography-stories.85b7810b.iframe.bundle.js b/docs-Typography-stories.8852b668.iframe.bundle.js
similarity index 88%
rename from docs-Typography-stories.85b7810b.iframe.bundle.js
rename to docs-Typography-stories.8852b668.iframe.bundle.js
index 4c03398d..d1870364 100644
--- a/docs-Typography-stories.85b7810b.iframe.bundle.js
+++ b/docs-Typography-stories.8852b668.iframe.bundle.js
@@ -1 +1 @@
-"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[907],{"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/Typography.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{FontFamily:()=>FontFamily,FontWeight:()=>FontWeight,LargeScreen:()=>LargeScreen,LargeScreenCSS:()=>LargeScreenCSS,SmallScreen:()=>SmallScreen,SmallScreenCSS:()=>SmallScreenCSS,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Typography_stories});var react=__webpack_require__("./node_modules/react/index.js"),typography=__webpack_require__("./src/js/typography/index.ts"),fontSizes=__webpack_require__("./src/js/typography/fontSizes.ts"),lineHeights=__webpack_require__("./src/js/typography/lineHeights.ts"),fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),fontWeights=__webpack_require__("./src/js/typography/fontWeights.ts"),letterSpacing=__webpack_require__("./src/js/typography/letterSpacing.ts"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",strong:"strong",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code",h3:"h3",ul:"ul",li:"li",a:"a"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Typography / Introduction"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"typography",children:"Typography"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Good typography improves readability, legibility and prioritization of information."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"font-family",children:"Font Family"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The main font family used in MetaMask products is ",(0,jsx_runtime.jsx)(_components.strong,{children:"Euclid Circular B"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--font-family"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Font Family"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsx)(_components.tbody,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Euclid Circular B"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-family-euclid-circular-b)"})})]})})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"scale",children:"Scale"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["There are 2 sets of typography scales for MetaMask products. Both are based on a default base font size of ",(0,jsx_runtime.jsx)(_components.code,{children:"16px"}),". Responsive typography changes on the component level rather than changing the base font size globally. ",(0,jsx_runtime.jsx)(_components.strong,{children:"*REMS does not apply to React Native"})]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"small-screen",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Small screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For screens sizes ",(0,jsx_runtime.jsx)(_components.code,{children:"767px >"})," or smaller, use the small screen typography scale"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Key:"})," S: small screen L: large screen | name | font-weight(regular if omitted) | font-size/line-height | rems"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--small-screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Variation"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S DisplayMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingLG"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingSM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingSM Regular"})," (DEPRECATED)"]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyLG Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyXS Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyXS"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-letter-spacing)"})]})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The JS token format was initially intended for React Native. Therefore, ",(0,jsx_runtime.jsx)(_components.code,{children:"fontSize"})," and ",(0,jsx_runtime.jsx)(_components.code,{children:"lineHeight"})," use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications."]})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"large-screen",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Large screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For screens sizes ",(0,jsx_runtime.jsx)(_components.code,{children:"768px <"})," or larger, use the large screen typography scale"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Key:"})," S: small screen L: large screen | name | font-weight (regular if omitted)| font-size/line-height | rems"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--large-screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Variation"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L DisplayMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingLG"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingSM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingSM Regular"})," (DEPRECATED)"]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyLGMedium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyXS Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyXS"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-letter-spacing)"})]})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The JS token format was initially intended for React Native. Therefore, ",(0,jsx_runtime.jsx)(_components.code,{children:"fontSize"})," and ",(0,jsx_runtime.jsx)(_components.code,{children:"lineHeight"})," use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications."]})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"font-weight",children:"Font Weight"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["There are three available font weights: regular",(0,jsx_runtime.jsx)(_components.code,{children:"400"}),", medium",(0,jsx_runtime.jsx)(_components.code,{children:"700"})," and bold",(0,jsx_runtime.jsx)(_components.code,{children:"900"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--font-weight"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Font Weight"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:"Regular"}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-regular)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)("span",{style:{fontWeight:500},children:"Medium"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-medium)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Bold"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-bold)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/likmuA72JatXDKDChibHBG/%5BTypo%5D-Large-screen?node-id=2%3A134",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Typography (Large screen)"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/Na8UKll7g12UywIPGEVLvX/%5BTypo%5D-Small-screen?node-id=2%3A134",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Typography (Small screen)"}),"(internal use only)"]}),"\n"]})]})}const Typography_stories={title:"Typography/Typography",parameters:{docs:{page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)}}}},FontFamily=function(){const styles={displayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize7,lineHeight:`${lineHeights.t.lineHeight6}px`,fontWeight:fontWeights.v.regular,letterSpacing:letterSpacing.r.letterSpacing1}};for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:"Euclid Circular B"})})},SmallScreen=function(){const styles={displayMD:{fontFamily:typography.c.sDisplayMD.fontFamily,fontSize:typography.c.sDisplayMD.fontSize,lineHeight:`${typography.c.sDisplayMD.lineHeight}px`,fontWeight:typography.c.sDisplayMD.fontWeight},headingLG:{fontFamily:typography.c.sHeadingLG.fontFamily,fontSize:typography.c.sHeadingLG.fontSize,lineHeight:`${typography.c.sHeadingLG.lineHeight}px`,fontWeight:typography.c.sHeadingLG.fontWeight},headingMD:{fontFamily:typography.c.sHeadingMD.fontFamily,fontSize:typography.c.sHeadingMD.fontSize,lineHeight:`${typography.c.sHeadingMD.lineHeight}px`,fontWeight:typography.c.sHeadingMD.fontWeight},headingSM:{fontFamily:typography.c.sHeadingSM.fontFamily,fontSize:typography.c.sHeadingSM.fontSize,lineHeight:`${typography.c.sHeadingSM.lineHeight}px`,fontWeight:typography.c.sHeadingSM.fontWeight},headingSMRegular:{fontFamily:typography.c.sHeadingSMRegular.fontFamily,fontSize:typography.c.sHeadingSMRegular.fontSize,lineHeight:`${typography.c.sHeadingSMRegular.lineHeight}px`,fontWeight:typography.c.sHeadingSMRegular.fontWeight},bodyLGMedium:{fontFamily:typography.c.sBodyLGMedium.fontFamily,fontSize:typography.c.sBodyLGMedium.fontSize,lineHeight:`${typography.c.sBodyLGMedium.lineHeight}px`,fontWeight:typography.c.sBodyLGMedium.fontWeight},bodyMD:{fontFamily:typography.c.sBodyMD.fontFamily,fontSize:typography.c.sBodyMD.fontSize,lineHeight:`${typography.c.sBodyMD.lineHeight}px`,fontWeight:typography.c.sBodyMD.fontWeight},bodyMDMedium:{fontFamily:typography.c.sBodyMDMedium.fontFamily,fontSize:typography.c.sBodyMDMedium.fontSize,lineHeight:`${typography.c.sBodyMDMedium.lineHeight}px`,fontWeight:typography.c.sBodyMDMedium.fontWeight},bodyMDBold:{fontFamily:typography.c.sBodyMDBold.fontFamily,fontSize:typography.c.sBodyMDBold.fontSize,lineHeight:`${typography.c.sBodyMDBold.lineHeight}px`,fontWeight:typography.c.sBodyMDBold.fontWeight},bodySM:{fontFamily:typography.c.sBodySM.fontFamily,fontSize:typography.c.sBodySM.fontSize,lineHeight:`${typography.c.sBodySM.lineHeight}px`,fontWeight:typography.c.sBodySM.fontWeight},bodySMMedium:{fontFamily:typography.c.sBodySMMedium.fontFamily,fontSize:typography.c.sBodySMMedium.fontSize,lineHeight:`${typography.c.sBodySMMedium.lineHeight}px`,fontWeight:typography.c.sBodySMMedium.fontWeight},bodySMBold:{fontFamily:typography.c.sBodySMBold.fontFamily,fontSize:typography.c.sBodySMBold.fontSize,lineHeight:`${typography.c.sBodySMBold.lineHeight}px`,fontWeight:typography.c.sBodySMBold.fontWeight},bodyXS:{fontFamily:typography.c.sBodyXS.fontFamily,fontSize:typography.c.sBodyXS.fontSize,lineHeight:`${typography.c.sBodyXS.lineHeight}px`,fontWeight:typography.c.sBodyXS.fontWeight,letterSpacing:typography.c.sBodyXS.letterSpacing},bodyXSMedium:{fontFamily:typography.c.sBodyXSMedium.fontFamily,fontSize:typography.c.sBodyXSMedium.fontSize,lineHeight:`${typography.c.sBodyXSMedium.lineHeight}px`,fontWeight:typography.c.sBodyXSMedium.fontWeight,letterSpacing:typography.c.sBodyXSMedium.letterSpacing}};for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:`S DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h2",style:styles.headingLG,...args,children:`S HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.headingMD,...args,children:`S HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.headingSM,...args,children:`S HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize/16}rem`}),(0,jsx_runtime.jsxs)(components.xv,{as:"h4",style:styles.headingSMRegular,...args,children:[`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize/16}rem`," ",(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"})]}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.bodyLGMedium,...args,children:`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDBold,...args,children:`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDMedium,...args,children:`S BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMD,...args,children:`S BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMBold,...args,children:`S BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMMedium,...args,children:`S BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySM,...args,children:`S BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXSMedium,...args,children:`S BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXS,...args,children:`S BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize/16}rem`})]})},LargeScreen=function(){const styles={displayMD:{fontFamily:typography.c.lDisplayMD.fontFamily,fontSize:typography.c.lDisplayMD.fontSize,lineHeight:`${typography.c.lDisplayMD.lineHeight}px`,fontWeight:typography.c.lDisplayMD.fontWeight},headingLG:{fontFamily:typography.c.lHeadingLG.fontFamily,fontSize:typography.c.lHeadingLG.fontSize,lineHeight:`${typography.c.lHeadingLG.lineHeight}px`,fontWeight:typography.c.lHeadingLG.fontWeight},headingMD:{fontFamily:typography.c.lHeadingMD.fontFamily,fontSize:typography.c.lHeadingMD.fontSize,lineHeight:`${typography.c.lHeadingMD.lineHeight}px`,fontWeight:typography.c.lHeadingMD.fontWeight},headingSM:{fontFamily:typography.c.lHeadingSM.fontFamily,fontSize:typography.c.lHeadingSM.fontSize,lineHeight:`${typography.c.lHeadingSM.lineHeight}px`,fontWeight:typography.c.lHeadingSM.fontWeight},headingSMRegular:{fontFamily:typography.c.lHeadingSMRegular.fontFamily,fontSize:typography.c.lHeadingSMRegular.fontSize,lineHeight:`${typography.c.lHeadingSMRegular.lineHeight}px`,fontWeight:typography.c.lHeadingSMRegular.fontWeight},bodyLGMedium:{fontFamily:typography.c.lBodyLGMedium.fontFamily,fontSize:typography.c.lBodyLGMedium.fontSize,lineHeight:`${typography.c.lBodyLGMedium.lineHeight}px`,fontWeight:typography.c.lBodyLGMedium.fontWeight},bodyMDBold:{fontFamily:typography.c.lBodyMDBold.fontFamily,fontSize:typography.c.lBodyMDBold.fontSize,lineHeight:`${typography.c.lBodyMDBold.lineHeight}px`,fontWeight:typography.c.lBodyMDBold.fontWeight},bodyMDMedium:{fontFamily:typography.c.lBodyMDMedium.fontFamily,fontSize:typography.c.lBodyMDMedium.fontSize,lineHeight:`${typography.c.lBodyMDMedium.lineHeight}px`,fontWeight:typography.c.lBodyMDMedium.fontWeight},bodyMD:{fontFamily:typography.c.lBodyMD.fontFamily,fontSize:typography.c.lBodyMD.fontSize,lineHeight:`${typography.c.lBodyMD.lineHeight}px`,fontWeight:typography.c.lBodyMD.fontWeight},bodySMBold:{fontFamily:typography.c.lBodySMBold.fontFamily,fontSize:typography.c.lBodySMBold.fontSize,lineHeight:`${typography.c.lBodySMBold.lineHeight}px`,fontWeight:typography.c.lBodySMBold.fontWeight},bodySMMedium:{fontFamily:typography.c.lBodySMMedium.fontFamily,fontSize:typography.c.lBodySMMedium.fontSize,lineHeight:`${typography.c.lBodySMMedium.lineHeight}px`,fontWeight:typography.c.lBodySMMedium.fontWeight},bodySM:{fontFamily:typography.c.lBodySM.fontFamily,fontSize:typography.c.lBodySM.fontSize,lineHeight:`${typography.c.lBodySM.lineHeight}px`,fontWeight:typography.c.lBodySM.fontWeight},bodyXSMedium:{fontFamily:typography.c.lBodyXSMedium.fontFamily,fontSize:typography.c.lBodyXSMedium.fontSize,lineHeight:`${typography.c.lBodyXSMedium.lineHeight}px`,fontWeight:typography.c.lBodyXSMedium.fontWeight,letterSpacing:typography.c.lBodyXSMedium.letterSpacing},bodyXS:{fontFamily:typography.c.lBodyXS.fontFamily,fontSize:typography.c.lBodyXS.fontSize,lineHeight:`${typography.c.lBodyXS.lineHeight}px`,fontWeight:typography.c.lBodyXS.fontWeight,letterSpacing:typography.c.lBodyXS.letterSpacing}};for(var _len3=arguments.length,args=new Array(_len3),_key3=0;_key3<_len3;_key3++)args[_key3]=arguments[_key3];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:`L DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h2",style:styles.headingLG,...args,children:`L HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.headingMD,...args,children:`L HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.headingSM,...args,children:`L HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize/16}rem`}),(0,jsx_runtime.jsxs)(components.xv,{as:"h4",style:styles.headingSMRegular,...args,children:[`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize/16}rem`," ",(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"})]}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.bodyLGMedium,...args,children:`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDBold,...args,children:`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDMedium,...args,children:`L BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMD,...args,children:`L BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMBold,...args,children:`L BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMMedium,...args,children:`L BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySM,...args,children:`L BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXSMedium,...args,children:`L BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXS,...args,children:`L BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize/16}rem`})]})},FontWeight=function(){const styles={regular:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.regular},medium:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.medium},bold:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.bold}};for(var _len4=arguments.length,args=new Array(_len4),_key4=0;_key4<_len4;_key4++)args[_key4]=arguments[_key4];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.regular,...args,children:"Regular 400"}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.medium,...args,children:"Medium 500"}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.bold,...args,children:"Bold 700"})]})},SmallScreenCSS=function(){for(var _len5=arguments.length,args=new Array(_len5),_key5=0;_key5<_len5;_key5++)args[_key5]=arguments[_key5];const styles={DisplayMD:{fontFamily:"var(--typography-s-display-md-font-family)",fontSize:"var(--typography-s-display-md-font-size)",lineHeight:"var(--typography-s-display-md-line-height)",fontWeight:"var(--typography-s-display-md-font-weight)"},HeadingLG:{fontFamily:"var(--typography-s-heading-lg-font-family)",fontSize:"var(--typography-s-heading-lg-font-size)",lineHeight:"var(--typography-s-heading-lg-line-height)",fontWeight:"var(--typography-s-heading-lg-font-weight)"},HeadingMD:{fontFamily:"var(--typography-s-heading-md-font-family)",fontSize:"var(--typography-s-heading-md-font-size)",lineHeight:"var(--typography-s-heading-md-line-height)",fontWeight:"var(--typography-s-heading-md-font-weight)"},HeadingSM:{fontFamily:"var(--typography-s-heading-sm-font-family)",fontSize:"var(--typography-s-heading-sm-font-size)",lineHeight:"var(--typography-s-heading-sm-line-height)",fontWeight:"var(--typography-s-heading-sm-font-weight)"},"HeadingSM Regular":{fontFamily:"var(--typography-s-heading-sm-regular-font-family)",fontSize:"var(--typography-s-heading-sm-regular-font-size)",lineHeight:"var(--typography-s-heading-sm-regular-line-height)",fontWeight:"var(--typography-s-heading-sm-regular-font-weight)"},"BodyLG Medium":{fontFamily:"var(--typography-s-body-lg-medium-font-family)",fontSize:"var(--typography-s-body-lg-medium-font-size)",lineHeight:"var(--typography-s-body-lg-medium-line-height)",fontWeight:"var(--typography-s-body-lg-medium-font-weight)"},BodyMD:{fontFamily:"var(--typography-s-body-md-font-family)",fontSize:"var(--typography-s-body-md-font-size)",lineHeight:"var(--typography-s-body-md-line-height)",fontWeight:"var(--typography-s-body-md-font-weight)"},"BodyMD Medium":{fontFamily:"var(--typography-s-body-md-medium-font-family)",fontSize:"var(--typography-s-body-md-medium-font-size)",lineHeight:"var(--typography-s-body-md-medium-line-height)",fontWeight:"var(--typography-s-body-md-medium-font-weight)"},"BodyMD Bold":{fontFamily:"var(--typography-s-body-md-bold-font-family)",fontSize:"var(--typography-s-body-md-bold-font-size)",lineHeight:"var(--typography-s-body-md-bold-line-height)",fontWeight:"var(--typography-s-body-md-bold-font-weight)"},BodySM:{fontFamily:"var(--typography-s-body-sm-font-family)",fontSize:"var(--typography-s-body-sm-font-size)",lineHeight:"var(--typography-s-body-sm-line-height)",fontWeight:"var(--typography-s-body-sm-font-weight)"},"BodySM Medium":{fontFamily:"var(--typography-s-body-sm-medium-font-family)",fontSize:"var(--typography-s-body-sm-medium-font-size)",lineHeight:"var(--typography-s-body-sm-medium-line-height)",fontWeight:"var(--typography-s-body-sm-medium-font-weight)"},"BodySM Bold":{fontFamily:"var(--typography-s-body-sm-bold-font-family)",fontSize:"var(--typography-s-body-sm-bold-font-size)",lineHeight:"var(--typography-s-body-sm-bold-line-height)",fontWeight:"var(--typography-s-body-sm-bold-font-weight)"},BodyXS:{fontFamily:"var(--typography-s-body-xs-font-family)",fontSize:"var(--typography-s-body-xs-font-size)",lineHeight:"var(--typography-s-body-xs-line-height)",fontWeight:"var(--typography-s-body-xs-font-weight)",letterSpacing:"var(--typography-s-body-xs-letter-spacing)"},"BodyXS Medium":{fontFamily:"var(--typography-s-body-xs-medium-font-family)",fontSize:"var(--typography-s-body-xs-medium-font-size)",lineHeight:"var(--typography-s-body-xs-medium-line-height)",fontWeight:"var(--typography-s-body-xs-medium-font-weight)",letterSpacing:"var(--typography-s-body-xs-medium-letter-spacing)"}},getCssVar=variable=>{const strippedVar=variable.slice(4,-1);return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0,-3)};return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object.values(styles).map(((value,i)=>{const title=Object.getOwnPropertyNames(styles)[i];let tag="p";return i<=4&&(tag=`h${i+1}`),(0,react.createElement)(components.xv,{as:tag,style:value,...args,key:i},`S ${title} ${16*getCssVar(value.fontSize)}px/${16*getCssVar(value.lineHeight)}px ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `,"HeadingSM Regular"===title&&(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"}))}))})},LargeScreenCSS=function(){for(var _len6=arguments.length,args=new Array(_len6),_key6=0;_key6<_len6;_key6++)args[_key6]=arguments[_key6];const styles={DisplayMD:{fontFamily:"var(--typography-l-display-md-font-family)",fontSize:"var(--typography-l-display-md-font-size)",lineHeight:"var(--typography-l-display-md-line-height)",fontWeight:"var(--typography-l-display-md-font-weight)"},HeadingLG:{fontFamily:"var(--typography-l-heading-lg-font-family)",fontSize:"var(--typography-l-heading-lg-font-size)",lineHeight:"var(--typography-l-heading-lg-line-height)",fontWeight:"var(--typography-l-heading-lg-font-weight)"},HeadingMD:{fontFamily:"var(--typography-l-heading-md-font-family)",fontSize:"var(--typography-l-heading-md-font-size)",lineHeight:"var(--typography-l-heading-md-line-height)",fontWeight:"var(--typography-l-heading-md-font-weight)"},HeadingSM:{fontFamily:"var(--typography-l-heading-sm-font-family)",fontSize:"var(--typography-l-heading-sm-font-size)",lineHeight:"var(--typography-l-heading-sm-line-height)",fontWeight:"var(--typography-l-heading-sm-font-weight)"},"HeadingSM Regular":{fontFamily:"var(--typography-l-heading-sm-regular-font-family)",fontSize:"var(--typography-l-heading-sm-regular-font-size)",lineHeight:"var(--typography-l-heading-sm-regular-line-height)",fontWeight:"var(--typography-l-heading-sm-regular-font-weight)"},"BodyLG Medium":{fontFamily:"var(--typography-l-body-lg-medium-font-family)",fontSize:"var(--typography-l-body-lg-medium-font-size)",lineHeight:"var(--typography-l-body-lg-medium-line-height)",fontWeight:"var(--typography-l-body-lg-medium-font-weight)"},BodyMD:{fontFamily:"var(--typography-l-body-md-font-family)",fontSize:"var(--typography-l-body-md-font-size)",lineHeight:"var(--typography-l-body-md-line-height)",fontWeight:"var(--typography-l-body-md-font-weight)"},"BodyMD Medium":{fontFamily:"var(--typography-l-body-md-medium-font-family)",fontSize:"var(--typography-l-body-md-medium-font-size)",lineHeight:"var(--typography-l-body-md-medium-line-height)",fontWeight:"var(--typography-l-body-md-medium-font-weight)"},"BodyMD Bold":{fontFamily:"var(--typography-l-body-md-bold-font-family)",fontSize:"var(--typography-l-body-md-bold-font-size)",lineHeight:"var(--typography-l-body-md-bold-line-height)",fontWeight:"var(--typography-l-body-md-bold-font-weight)"},BodySM:{fontFamily:"var(--typography-l-body-sm-font-family)",fontSize:"var(--typography-l-body-sm-font-size)",lineHeight:"var(--typography-l-body-sm-line-height)",fontWeight:"var(--typography-l-body-sm-font-weight)"},"BodySM Medium":{fontFamily:"var(--typography-l-body-sm-medium-font-family)",fontSize:"var(--typography-l-body-sm-medium-font-size)",lineHeight:"var(--typography-l-body-sm-medium-line-height)",fontWeight:"var(--typography-l-body-sm-medium-font-weight)"},"BodySM Bold":{fontFamily:"var(--typography-l-body-sm-bold-font-family)",fontSize:"var(--typography-l-body-sm-bold-font-size)",lineHeight:"var(--typography-l-body-sm-bold-line-height)",fontWeight:"var(--typography-l-body-sm-bold-font-weight)"},BodyXS:{fontFamily:"var(--typography-l-body-xs-font-family)",fontSize:"var(--typography-l-body-xs-font-size)",lineHeight:"var(--typography-l-body-xs-line-height)",fontWeight:"var(--typography-l-body-xs-font-weight)",letterSpacing:"var(--typography-l-body-xs-letter-spacing)"},"BodyXS Medium":{fontFamily:"var(--typography-l-body-xs-medium-font-family)",fontSize:"var(--typography-l-body-xs-medium-font-size)",lineHeight:"var(--typography-l-body-xs-medium-line-height)",fontWeight:"var(--typography-l-body-xs-medium-font-weight)",letterSpacing:"var(--typography-l-body-xs-medium-letter-spacing)"}},getCssVar=variable=>{const strippedVar=variable.slice(4,-1);return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0,-3).trim()};return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object.values(styles).map(((value,i)=>{const title=Object.getOwnPropertyNames(styles)[i];let tag="p";return i<=4&&(tag=`h${i+1}`),(0,react.createElement)(components.xv,{as:tag,style:value,...args,key:i},`L ${title} ${16*getCssVar(value.fontSize)}px/${16*getCssVar(value.lineHeight)}px\n\n            ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `,"HeadingSM Regular"===title&&(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"}))}))})};FontFamily.parameters={...FontFamily.parameters,docs:{...FontFamily.parameters?.docs,source:{originalSource:'(...args) => {\n  const styles = {\n    displayMD: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize7,\n      lineHeight: `${lineHeights.lineHeight6}px`,\n      fontWeight: fontWeights.regular,\n      letterSpacing: letterSpacing.letterSpacing1\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        Euclid Circular B\n      </Text>\n    </>;\n}',...FontFamily.parameters?.docs?.source}}},SmallScreen.parameters={...SmallScreen.parameters,docs:{...SmallScreen.parameters?.docs,source:{originalSource:'(...args) => {\n  const smallScreenFontSizeBase = 16;\n  const styles = {\n    displayMD: {\n      fontFamily: typography.sDisplayMD.fontFamily,\n      fontSize: typography.sDisplayMD.fontSize,\n      lineHeight: `${typography.sDisplayMD.lineHeight}px`,\n      fontWeight: typography.sDisplayMD.fontWeight\n    },\n    headingLG: {\n      fontFamily: typography.sHeadingLG.fontFamily,\n      fontSize: typography.sHeadingLG.fontSize,\n      lineHeight: `${typography.sHeadingLG.lineHeight}px`,\n      fontWeight: typography.sHeadingLG.fontWeight\n    },\n    headingMD: {\n      fontFamily: typography.sHeadingMD.fontFamily,\n      fontSize: typography.sHeadingMD.fontSize,\n      lineHeight: `${typography.sHeadingMD.lineHeight}px`,\n      fontWeight: typography.sHeadingMD.fontWeight\n    },\n    headingSM: {\n      fontFamily: typography.sHeadingSM.fontFamily,\n      fontSize: typography.sHeadingSM.fontSize,\n      lineHeight: `${typography.sHeadingSM.lineHeight}px`,\n      fontWeight: typography.sHeadingSM.fontWeight\n    },\n    headingSMRegular: {\n      fontFamily: typography.sHeadingSMRegular.fontFamily,\n      fontSize: typography.sHeadingSMRegular.fontSize,\n      lineHeight: `${typography.sHeadingSMRegular.lineHeight}px`,\n      fontWeight: typography.sHeadingSMRegular.fontWeight\n    },\n    bodyLGMedium: {\n      fontFamily: typography.sBodyLGMedium.fontFamily,\n      fontSize: typography.sBodyLGMedium.fontSize,\n      lineHeight: `${typography.sBodyLGMedium.lineHeight}px`,\n      fontWeight: typography.sBodyLGMedium.fontWeight\n    },\n    bodyMD: {\n      fontFamily: typography.sBodyMD.fontFamily,\n      fontSize: typography.sBodyMD.fontSize,\n      lineHeight: `${typography.sBodyMD.lineHeight}px`,\n      fontWeight: typography.sBodyMD.fontWeight\n    },\n    bodyMDMedium: {\n      fontFamily: typography.sBodyMDMedium.fontFamily,\n      fontSize: typography.sBodyMDMedium.fontSize,\n      lineHeight: `${typography.sBodyMDMedium.lineHeight}px`,\n      fontWeight: typography.sBodyMDMedium.fontWeight\n    },\n    bodyMDBold: {\n      fontFamily: typography.sBodyMDBold.fontFamily,\n      fontSize: typography.sBodyMDBold.fontSize,\n      lineHeight: `${typography.sBodyMDBold.lineHeight}px`,\n      fontWeight: typography.sBodyMDBold.fontWeight\n    },\n    bodySM: {\n      fontFamily: typography.sBodySM.fontFamily,\n      fontSize: typography.sBodySM.fontSize,\n      lineHeight: `${typography.sBodySM.lineHeight}px`,\n      fontWeight: typography.sBodySM.fontWeight\n    },\n    bodySMMedium: {\n      fontFamily: typography.sBodySMMedium.fontFamily,\n      fontSize: typography.sBodySMMedium.fontSize,\n      lineHeight: `${typography.sBodySMMedium.lineHeight}px`,\n      fontWeight: typography.sBodySMMedium.fontWeight\n    },\n    bodySMBold: {\n      fontFamily: typography.sBodySMBold.fontFamily,\n      fontSize: typography.sBodySMBold.fontSize,\n      lineHeight: `${typography.sBodySMBold.lineHeight}px`,\n      fontWeight: typography.sBodySMBold.fontWeight\n    },\n    bodyXS: {\n      fontFamily: typography.sBodyXS.fontFamily,\n      fontSize: typography.sBodyXS.fontSize,\n      lineHeight: `${typography.sBodyXS.lineHeight}px`,\n      fontWeight: typography.sBodyXS.fontWeight,\n      letterSpacing: typography.sBodyXS.letterSpacing\n    },\n    bodyXSMedium: {\n      fontFamily: typography.sBodyXSMedium.fontFamily,\n      fontSize: typography.sBodyXSMedium.fontSize,\n      lineHeight: `${typography.sBodyXSMedium.lineHeight}px`,\n      fontWeight: typography.sBodyXSMedium.fontWeight,\n      letterSpacing: typography.sBodyXSMedium.letterSpacing\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        {`S DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h2" style={styles.headingLG} {...args}>\n        {`S HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h3" style={styles.headingMD} {...args}>\n        {`S HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSM} {...args}>\n        {`S HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSMRegular} {...args}>\n        {`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize / smallScreenFontSizeBase}rem`}{\' \'}\n        <span style={{\n        color: \'var(--color-error-default)\'\n      }}>DEPRECATED</span>\n      </Text>\n      <Text as="h4" style={styles.bodyLGMedium} {...args}>\n        {`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDBold} {...args}>\n        {`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDMedium} {...args}>\n        {`S BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMD} {...args}>\n        {`S BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMBold} {...args}>\n        {`S BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMMedium} {...args}>\n        {`S BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySM} {...args}>\n        {`S BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXSMedium} {...args}>\n        {`S BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXS} {...args}>\n        {`S BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n    </>;\n}',...SmallScreen.parameters?.docs?.source}}},LargeScreen.parameters={...LargeScreen.parameters,docs:{...LargeScreen.parameters?.docs,source:{originalSource:'(...args) => {\n  const largeScreenFontSizeBase = 16;\n  const styles = {\n    displayMD: {\n      fontFamily: typography.lDisplayMD.fontFamily,\n      fontSize: typography.lDisplayMD.fontSize,\n      lineHeight: `${typography.lDisplayMD.lineHeight}px`,\n      fontWeight: typography.lDisplayMD.fontWeight\n    },\n    headingLG: {\n      fontFamily: typography.lHeadingLG.fontFamily,\n      fontSize: typography.lHeadingLG.fontSize,\n      lineHeight: `${typography.lHeadingLG.lineHeight}px`,\n      fontWeight: typography.lHeadingLG.fontWeight\n    },\n    headingMD: {\n      fontFamily: typography.lHeadingMD.fontFamily,\n      fontSize: typography.lHeadingMD.fontSize,\n      lineHeight: `${typography.lHeadingMD.lineHeight}px`,\n      fontWeight: typography.lHeadingMD.fontWeight\n    },\n    headingSM: {\n      fontFamily: typography.lHeadingSM.fontFamily,\n      fontSize: typography.lHeadingSM.fontSize,\n      lineHeight: `${typography.lHeadingSM.lineHeight}px`,\n      fontWeight: typography.lHeadingSM.fontWeight\n    },\n    headingSMRegular: {\n      fontFamily: typography.lHeadingSMRegular.fontFamily,\n      fontSize: typography.lHeadingSMRegular.fontSize,\n      lineHeight: `${typography.lHeadingSMRegular.lineHeight}px`,\n      fontWeight: typography.lHeadingSMRegular.fontWeight\n    },\n    bodyLGMedium: {\n      fontFamily: typography.lBodyLGMedium.fontFamily,\n      fontSize: typography.lBodyLGMedium.fontSize,\n      lineHeight: `${typography.lBodyLGMedium.lineHeight}px`,\n      fontWeight: typography.lBodyLGMedium.fontWeight\n    },\n    bodyMDBold: {\n      fontFamily: typography.lBodyMDBold.fontFamily,\n      fontSize: typography.lBodyMDBold.fontSize,\n      lineHeight: `${typography.lBodyMDBold.lineHeight}px`,\n      fontWeight: typography.lBodyMDBold.fontWeight\n    },\n    bodyMDMedium: {\n      fontFamily: typography.lBodyMDMedium.fontFamily,\n      fontSize: typography.lBodyMDMedium.fontSize,\n      lineHeight: `${typography.lBodyMDMedium.lineHeight}px`,\n      fontWeight: typography.lBodyMDMedium.fontWeight\n    },\n    bodyMD: {\n      fontFamily: typography.lBodyMD.fontFamily,\n      fontSize: typography.lBodyMD.fontSize,\n      lineHeight: `${typography.lBodyMD.lineHeight}px`,\n      fontWeight: typography.lBodyMD.fontWeight\n    },\n    bodySMBold: {\n      fontFamily: typography.lBodySMBold.fontFamily,\n      fontSize: typography.lBodySMBold.fontSize,\n      lineHeight: `${typography.lBodySMBold.lineHeight}px`,\n      fontWeight: typography.lBodySMBold.fontWeight\n    },\n    bodySMMedium: {\n      fontFamily: typography.lBodySMMedium.fontFamily,\n      fontSize: typography.lBodySMMedium.fontSize,\n      lineHeight: `${typography.lBodySMMedium.lineHeight}px`,\n      fontWeight: typography.lBodySMMedium.fontWeight\n    },\n    bodySM: {\n      fontFamily: typography.lBodySM.fontFamily,\n      fontSize: typography.lBodySM.fontSize,\n      lineHeight: `${typography.lBodySM.lineHeight}px`,\n      fontWeight: typography.lBodySM.fontWeight\n    },\n    bodyXSMedium: {\n      fontFamily: typography.lBodyXSMedium.fontFamily,\n      fontSize: typography.lBodyXSMedium.fontSize,\n      lineHeight: `${typography.lBodyXSMedium.lineHeight}px`,\n      fontWeight: typography.lBodyXSMedium.fontWeight,\n      letterSpacing: typography.lBodyXSMedium.letterSpacing\n    },\n    bodyXS: {\n      fontFamily: typography.lBodyXS.fontFamily,\n      fontSize: typography.lBodyXS.fontSize,\n      lineHeight: `${typography.lBodyXS.lineHeight}px`,\n      fontWeight: typography.lBodyXS.fontWeight,\n      letterSpacing: typography.lBodyXS.letterSpacing\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        {`L DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h2" style={styles.headingLG} {...args}>\n        {`L HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h3" style={styles.headingMD} {...args}>\n        {`L HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSM} {...args}>\n        {`L HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSMRegular} {...args}>\n        {`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize / largeScreenFontSizeBase}rem`}{\' \'}\n        <span style={{\n        color: \'var(--color-error-default)\'\n      }}>DEPRECATED</span>\n      </Text>\n      <Text as="h4" style={styles.bodyLGMedium} {...args}>\n        {`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDBold} {...args}>\n        {`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDMedium} {...args}>\n        {`L BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMD} {...args}>\n        {`L BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMBold} {...args}>\n        {`L BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMMedium} {...args}>\n        {`L BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySM} {...args}>\n        {`L BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXSMedium} {...args}>\n        {`L BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXS} {...args}>\n        {`L BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n    </>;\n}',...LargeScreen.parameters?.docs?.source}}},FontWeight.parameters={...FontWeight.parameters,docs:{...FontWeight.parameters?.docs,source:{originalSource:'(...args) => {\n  const styles = {\n    regular: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.regular\n    },\n    medium: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.medium\n    },\n    bold: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.bold\n    }\n  };\n  return <>\n      <Text as="h3" style={styles.regular} {...args}>\n        Regular 400\n      </Text>\n      <Text as="h3" style={styles.medium} {...args}>\n        Medium 500\n      </Text>\n      <Text as="h3" style={styles.bold} {...args}>\n        Bold 700\n      </Text>\n    </>;\n}',...FontWeight.parameters?.docs?.source}}},SmallScreenCSS.parameters={...SmallScreenCSS.parameters,docs:{...SmallScreenCSS.parameters?.docs,source:{originalSource:"(...args) => {\n  const fontBase = 16;\n  const styles = {\n    DisplayMD: {\n      fontFamily: 'var(--typography-s-display-md-font-family)',\n      fontSize: 'var(--typography-s-display-md-font-size)',\n      lineHeight: 'var(--typography-s-display-md-line-height)',\n      fontWeight: 'var(--typography-s-display-md-font-weight)'\n    },\n    HeadingLG: {\n      fontFamily: 'var(--typography-s-heading-lg-font-family)',\n      fontSize: 'var(--typography-s-heading-lg-font-size)',\n      lineHeight: 'var(--typography-s-heading-lg-line-height)',\n      fontWeight: 'var(--typography-s-heading-lg-font-weight)'\n    },\n    HeadingMD: {\n      fontFamily: 'var(--typography-s-heading-md-font-family)',\n      fontSize: 'var(--typography-s-heading-md-font-size)',\n      lineHeight: 'var(--typography-s-heading-md-line-height)',\n      fontWeight: 'var(--typography-s-heading-md-font-weight)'\n    },\n    HeadingSM: {\n      fontFamily: 'var(--typography-s-heading-sm-font-family)',\n      fontSize: 'var(--typography-s-heading-sm-font-size)',\n      lineHeight: 'var(--typography-s-heading-sm-line-height)',\n      fontWeight: 'var(--typography-s-heading-sm-font-weight)'\n    },\n    'HeadingSM Regular': {\n      fontFamily: 'var(--typography-s-heading-sm-regular-font-family)',\n      fontSize: 'var(--typography-s-heading-sm-regular-font-size)',\n      lineHeight: 'var(--typography-s-heading-sm-regular-line-height)',\n      fontWeight: 'var(--typography-s-heading-sm-regular-font-weight)'\n    },\n    'BodyLG Medium': {\n      fontFamily: 'var(--typography-s-body-lg-medium-font-family)',\n      fontSize: 'var(--typography-s-body-lg-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-lg-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-lg-medium-font-weight)'\n    },\n    BodyMD: {\n      fontFamily: 'var(--typography-s-body-md-font-family)',\n      fontSize: 'var(--typography-s-body-md-font-size)',\n      lineHeight: 'var(--typography-s-body-md-line-height)',\n      fontWeight: 'var(--typography-s-body-md-font-weight)'\n    },\n    'BodyMD Medium': {\n      fontFamily: 'var(--typography-s-body-md-medium-font-family)',\n      fontSize: 'var(--typography-s-body-md-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-md-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-md-medium-font-weight)'\n    },\n    'BodyMD Bold': {\n      fontFamily: 'var(--typography-s-body-md-bold-font-family)',\n      fontSize: 'var(--typography-s-body-md-bold-font-size)',\n      lineHeight: 'var(--typography-s-body-md-bold-line-height)',\n      fontWeight: 'var(--typography-s-body-md-bold-font-weight)'\n    },\n    BodySM: {\n      fontFamily: 'var(--typography-s-body-sm-font-family)',\n      fontSize: 'var(--typography-s-body-sm-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-font-weight)'\n    },\n    'BodySM Medium': {\n      fontFamily: 'var(--typography-s-body-sm-medium-font-family)',\n      fontSize: 'var(--typography-s-body-sm-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-medium-font-weight)'\n    },\n    'BodySM Bold': {\n      fontFamily: 'var(--typography-s-body-sm-bold-font-family)',\n      fontSize: 'var(--typography-s-body-sm-bold-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-bold-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-bold-font-weight)'\n    },\n    BodyXS: {\n      fontFamily: 'var(--typography-s-body-xs-font-family)',\n      fontSize: 'var(--typography-s-body-xs-font-size)',\n      lineHeight: 'var(--typography-s-body-xs-line-height)',\n      fontWeight: 'var(--typography-s-body-xs-font-weight)',\n      letterSpacing: 'var(--typography-s-body-xs-letter-spacing)'\n    },\n    'BodyXS Medium': {\n      fontFamily: 'var(--typography-s-body-xs-medium-font-family)',\n      fontSize: 'var(--typography-s-body-xs-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-xs-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-xs-medium-font-weight)',\n      letterSpacing: 'var(--typography-s-body-xs-medium-letter-spacing)'\n    }\n  };\n  const getCssVar = variable => {\n    const strippedVar = variable.slice(4, -1);\n    return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0, -3);\n  };\n  return <>\n      {Object.values(styles).map((value, i) => {\n      const title = Object.getOwnPropertyNames(styles)[i];\n      let tag = 'p';\n      if (i <= 4) {\n        tag = `h${i + 1}`;\n      }\n      return <Text as={tag} style={value} {...args} key={i}>\n            {`S ${title} ${getCssVar(value.fontSize) * fontBase}px/${getCssVar(value.lineHeight) * fontBase}px ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `}\n            {title === 'HeadingSM Regular' && <span style={{\n          color: 'var(--color-error-default)'\n        }}>\n                DEPRECATED\n              </span>}\n          </Text>;\n    })}\n    </>;\n}",...SmallScreenCSS.parameters?.docs?.source}}},LargeScreenCSS.parameters={...LargeScreenCSS.parameters,docs:{...LargeScreenCSS.parameters?.docs,source:{originalSource:"(...args) => {\n  const fontBase = 16;\n  const styles = {\n    DisplayMD: {\n      fontFamily: 'var(--typography-l-display-md-font-family)',\n      fontSize: 'var(--typography-l-display-md-font-size)',\n      lineHeight: 'var(--typography-l-display-md-line-height)',\n      fontWeight: 'var(--typography-l-display-md-font-weight)'\n    },\n    HeadingLG: {\n      fontFamily: 'var(--typography-l-heading-lg-font-family)',\n      fontSize: 'var(--typography-l-heading-lg-font-size)',\n      lineHeight: 'var(--typography-l-heading-lg-line-height)',\n      fontWeight: 'var(--typography-l-heading-lg-font-weight)'\n    },\n    HeadingMD: {\n      fontFamily: 'var(--typography-l-heading-md-font-family)',\n      fontSize: 'var(--typography-l-heading-md-font-size)',\n      lineHeight: 'var(--typography-l-heading-md-line-height)',\n      fontWeight: 'var(--typography-l-heading-md-font-weight)'\n    },\n    HeadingSM: {\n      fontFamily: 'var(--typography-l-heading-sm-font-family)',\n      fontSize: 'var(--typography-l-heading-sm-font-size)',\n      lineHeight: 'var(--typography-l-heading-sm-line-height)',\n      fontWeight: 'var(--typography-l-heading-sm-font-weight)'\n    },\n    'HeadingSM Regular': {\n      fontFamily: 'var(--typography-l-heading-sm-regular-font-family)',\n      fontSize: 'var(--typography-l-heading-sm-regular-font-size)',\n      lineHeight: 'var(--typography-l-heading-sm-regular-line-height)',\n      fontWeight: 'var(--typography-l-heading-sm-regular-font-weight)'\n    },\n    'BodyLG Medium': {\n      fontFamily: 'var(--typography-l-body-lg-medium-font-family)',\n      fontSize: 'var(--typography-l-body-lg-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-lg-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-lg-medium-font-weight)'\n    },\n    BodyMD: {\n      fontFamily: 'var(--typography-l-body-md-font-family)',\n      fontSize: 'var(--typography-l-body-md-font-size)',\n      lineHeight: 'var(--typography-l-body-md-line-height)',\n      fontWeight: 'var(--typography-l-body-md-font-weight)'\n    },\n    'BodyMD Medium': {\n      fontFamily: 'var(--typography-l-body-md-medium-font-family)',\n      fontSize: 'var(--typography-l-body-md-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-md-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-md-medium-font-weight)'\n    },\n    'BodyMD Bold': {\n      fontFamily: 'var(--typography-l-body-md-bold-font-family)',\n      fontSize: 'var(--typography-l-body-md-bold-font-size)',\n      lineHeight: 'var(--typography-l-body-md-bold-line-height)',\n      fontWeight: 'var(--typography-l-body-md-bold-font-weight)'\n    },\n    BodySM: {\n      fontFamily: 'var(--typography-l-body-sm-font-family)',\n      fontSize: 'var(--typography-l-body-sm-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-font-weight)'\n    },\n    'BodySM Medium': {\n      fontFamily: 'var(--typography-l-body-sm-medium-font-family)',\n      fontSize: 'var(--typography-l-body-sm-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-medium-font-weight)'\n    },\n    'BodySM Bold': {\n      fontFamily: 'var(--typography-l-body-sm-bold-font-family)',\n      fontSize: 'var(--typography-l-body-sm-bold-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-bold-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-bold-font-weight)'\n    },\n    BodyXS: {\n      fontFamily: 'var(--typography-l-body-xs-font-family)',\n      fontSize: 'var(--typography-l-body-xs-font-size)',\n      lineHeight: 'var(--typography-l-body-xs-line-height)',\n      fontWeight: 'var(--typography-l-body-xs-font-weight)',\n      letterSpacing: 'var(--typography-l-body-xs-letter-spacing)'\n    },\n    'BodyXS Medium': {\n      fontFamily: 'var(--typography-l-body-xs-medium-font-family)',\n      fontSize: 'var(--typography-l-body-xs-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-xs-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-xs-medium-font-weight)',\n      letterSpacing: 'var(--typography-l-body-xs-medium-letter-spacing)'\n    }\n  };\n  const getCssVar = variable => {\n    const strippedVar = variable.slice(4, -1);\n    return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0, -3).trim();\n  };\n  return <>\n      {Object.values(styles).map((value, i) => {\n      const title = Object.getOwnPropertyNames(styles)[i];\n      let tag = 'p';\n      if (i <= 4) {\n        tag = `h${i + 1}`;\n      }\n      return <Text as={tag} style={value} {...args} key={i}>\n            {`L ${title} ${getCssVar(value.fontSize) * fontBase}px/${getCssVar(value.lineHeight) * fontBase}px\n\n            ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `}\n            {title === 'HeadingSM Regular' && <span style={{\n          color: 'var(--color-error-default)'\n        }}>\n                DEPRECATED\n              </span>}\n          </Text>;\n    })}\n    </>;\n}",...LargeScreenCSS.parameters?.docs?.source}}};const __namedExportsOrder=["FontFamily","SmallScreen","LargeScreen","FontWeight","SmallScreenCSS","LargeScreenCSS"]}}]);
\ No newline at end of file
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[907],{"./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>DocsRenderer});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.bD,a:_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Ct,..._storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.lO},ErrorBoundary=class extends react__WEBPACK_IMPORTED_MODULE_0__.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.WI;return new Promise(((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.l)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXProvider,{components},react__WEBPACK_IMPORTED_MODULE_0__.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,_storybook_react_dom_shim__WEBPACK_IMPORTED_MODULE_2__.K)(element)}}}},"./node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{UG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.UG,Xz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Xz,h_:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.h_,oG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oG});__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs")},"./docs/Typography.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{FontFamily:()=>FontFamily,FontWeight:()=>FontWeight,LargeScreen:()=>LargeScreen,LargeScreenCSS:()=>LargeScreenCSS,SmallScreen:()=>SmallScreen,SmallScreenCSS:()=>SmallScreenCSS,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Typography_stories});var react=__webpack_require__("./node_modules/react/index.js"),typography=__webpack_require__("./src/js/typography/index.ts"),fontSizes=__webpack_require__("./src/js/typography/fontSizes.ts"),lineHeights=__webpack_require__("./src/js/typography/lineHeights.ts"),fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),fontWeights=__webpack_require__("./src/js/typography/fontWeights.ts"),letterSpacing=__webpack_require__("./src/js/typography/letterSpacing.ts"),components=__webpack_require__("./docs/components/index.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",strong:"strong",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code",h3:"h3",ul:"ul",li:"li",a:"a"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"Typography / Introduction"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"typography",children:"Typography"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Good typography improves readability, legibility and prioritization of information."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"font-family",children:"Font Family"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The main font family used in MetaMask products is ",(0,jsx_runtime.jsx)(_components.strong,{children:"Euclid Circular B"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--font-family"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Font Family"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsx)(_components.tbody,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Euclid Circular B"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-family-euclid-circular-b)"})})]})})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"scale",children:"Scale"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["There are 2 sets of typography scales for MetaMask products. Both are based on a default base font size of ",(0,jsx_runtime.jsx)(_components.code,{children:"16px"}),". Responsive typography changes on the component level rather than changing the base font size globally. ",(0,jsx_runtime.jsx)(_components.strong,{children:"*REMS does not apply to React Native"})]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"small-screen",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Small screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For screens sizes ",(0,jsx_runtime.jsx)(_components.code,{children:"767px >"})," or smaller, use the small screen typography scale"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Key:"})," S: small screen L: large screen | name | font-weight(regular if omitted) | font-size/line-height | rems"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--small-screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Variation"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S DisplayMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sDisplayMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-display-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingLG"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingLG.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-lg-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingSM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"S HeadingSM Regular"})," (DEPRECATED)"]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sHeadingSMRegular.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-heading-sm-regular-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyLG Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyLGMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-lg-medium-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMDMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySMMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodySM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodySM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyXS Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXSMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"S BodyXS"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.sBodyXS.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-s-body-xs-letter-spacing)"})]})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The JS token format was initially intended for React Native. Therefore, ",(0,jsx_runtime.jsx)(_components.code,{children:"fontSize"})," and ",(0,jsx_runtime.jsx)(_components.code,{children:"lineHeight"})," use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications."]})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"large-screen",children:(0,jsx_runtime.jsx)(_components.strong,{children:"Large screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["For screens sizes ",(0,jsx_runtime.jsx)(_components.code,{children:"768px <"})," or larger, use the large screen typography scale"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Key:"})," S: small screen L: large screen | name | font-weight (regular if omitted)| font-size/line-height | rems"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--large-screen"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Variation"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L DisplayMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lDisplayMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-display-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingLG"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingLG.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-lg-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingSM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"L HeadingSM Regular"})," (DEPRECATED)"]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lHeadingSMRegular.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-heading-sm-regular-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyLGMedium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyLGMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-large-medium-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMDMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyMD"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyMD.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-md-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM Bold"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMBold.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySMMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-bold-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodySM"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodySM.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-sm-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyXS Medium"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXSMedium.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-letter-spacing)"})]})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"L BodyXS"})}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontFamily"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontWeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.fontSize"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.lineHeight"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"typography.lBodyXS.letterSpacing"})]}),(0,jsx_runtime.jsxs)(_components.td,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-family)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-weight)"}),(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-font-size)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-line-height)"})," ",(0,jsx_runtime.jsx)("br",{})," ",(0,jsx_runtime.jsx)(_components.code,{children:"var(--typography-l-body-xs-letter-spacing)"})]})]})]})]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["NOTE: The JS token format was initially intended for React Native. Therefore, ",(0,jsx_runtime.jsx)(_components.code,{children:"fontSize"})," and ",(0,jsx_runtime.jsx)(_components.code,{children:"lineHeight"})," use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications."]})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"font-weight",children:"Font Weight"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["There are three available font weights: regular",(0,jsx_runtime.jsx)(_components.code,{children:"400"}),", medium",(0,jsx_runtime.jsx)(_components.code,{children:"700"})," and bold",(0,jsx_runtime.jsx)(_components.code,{children:"900"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"typography-typography--font-weight"})}),"\n",(0,jsx_runtime.jsxs)(_components.table,{children:[(0,jsx_runtime.jsx)(_components.thead,{children:(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.th,{children:"Font Weight"}),(0,jsx_runtime.jsx)(_components.th,{children:"JS"}),(0,jsx_runtime.jsx)(_components.th,{children:"CSS"})]})}),(0,jsx_runtime.jsxs)(_components.tbody,{children:[(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:"Regular"}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-regular)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)("span",{style:{fontWeight:500},children:"Medium"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-medium)"})})]}),(0,jsx_runtime.jsxs)(_components.tr,{children:[(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Bold"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"Token not exported"})}),(0,jsx_runtime.jsx)(_components.td,{children:(0,jsx_runtime.jsx)(_components.code,{children:"var(--font-weight-bold)"})})]})]})]}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/likmuA72JatXDKDChibHBG/%5BTypo%5D-Large-screen?node-id=2%3A134",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Typography (Large screen)"}),"(internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/Na8UKll7g12UywIPGEVLvX/%5BTypo%5D-Small-screen?node-id=2%3A134",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma Typography (Small screen)"}),"(internal use only)"]}),"\n"]})]})}const Typography_stories={title:"Typography/Typography",parameters:{docs:{page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)}}}},FontFamily=function(){const styles={displayMD:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize7,lineHeight:`${lineHeights.t.lineHeight6}px`,fontWeight:fontWeights.v.regular,letterSpacing:letterSpacing.r.letterSpacing1}};for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:"Euclid Circular B"})})},SmallScreen=function(){const styles={displayMD:{fontFamily:typography.c.sDisplayMD.fontFamily,fontSize:typography.c.sDisplayMD.fontSize,lineHeight:`${typography.c.sDisplayMD.lineHeight}px`,fontWeight:typography.c.sDisplayMD.fontWeight},headingLG:{fontFamily:typography.c.sHeadingLG.fontFamily,fontSize:typography.c.sHeadingLG.fontSize,lineHeight:`${typography.c.sHeadingLG.lineHeight}px`,fontWeight:typography.c.sHeadingLG.fontWeight},headingMD:{fontFamily:typography.c.sHeadingMD.fontFamily,fontSize:typography.c.sHeadingMD.fontSize,lineHeight:`${typography.c.sHeadingMD.lineHeight}px`,fontWeight:typography.c.sHeadingMD.fontWeight},headingSM:{fontFamily:typography.c.sHeadingSM.fontFamily,fontSize:typography.c.sHeadingSM.fontSize,lineHeight:`${typography.c.sHeadingSM.lineHeight}px`,fontWeight:typography.c.sHeadingSM.fontWeight},headingSMRegular:{fontFamily:typography.c.sHeadingSMRegular.fontFamily,fontSize:typography.c.sHeadingSMRegular.fontSize,lineHeight:`${typography.c.sHeadingSMRegular.lineHeight}px`,fontWeight:typography.c.sHeadingSMRegular.fontWeight},bodyLGMedium:{fontFamily:typography.c.sBodyLGMedium.fontFamily,fontSize:typography.c.sBodyLGMedium.fontSize,lineHeight:`${typography.c.sBodyLGMedium.lineHeight}px`,fontWeight:typography.c.sBodyLGMedium.fontWeight},bodyMD:{fontFamily:typography.c.sBodyMD.fontFamily,fontSize:typography.c.sBodyMD.fontSize,lineHeight:`${typography.c.sBodyMD.lineHeight}px`,fontWeight:typography.c.sBodyMD.fontWeight},bodyMDMedium:{fontFamily:typography.c.sBodyMDMedium.fontFamily,fontSize:typography.c.sBodyMDMedium.fontSize,lineHeight:`${typography.c.sBodyMDMedium.lineHeight}px`,fontWeight:typography.c.sBodyMDMedium.fontWeight},bodyMDBold:{fontFamily:typography.c.sBodyMDBold.fontFamily,fontSize:typography.c.sBodyMDBold.fontSize,lineHeight:`${typography.c.sBodyMDBold.lineHeight}px`,fontWeight:typography.c.sBodyMDBold.fontWeight},bodySM:{fontFamily:typography.c.sBodySM.fontFamily,fontSize:typography.c.sBodySM.fontSize,lineHeight:`${typography.c.sBodySM.lineHeight}px`,fontWeight:typography.c.sBodySM.fontWeight},bodySMMedium:{fontFamily:typography.c.sBodySMMedium.fontFamily,fontSize:typography.c.sBodySMMedium.fontSize,lineHeight:`${typography.c.sBodySMMedium.lineHeight}px`,fontWeight:typography.c.sBodySMMedium.fontWeight},bodySMBold:{fontFamily:typography.c.sBodySMBold.fontFamily,fontSize:typography.c.sBodySMBold.fontSize,lineHeight:`${typography.c.sBodySMBold.lineHeight}px`,fontWeight:typography.c.sBodySMBold.fontWeight},bodyXS:{fontFamily:typography.c.sBodyXS.fontFamily,fontSize:typography.c.sBodyXS.fontSize,lineHeight:`${typography.c.sBodyXS.lineHeight}px`,fontWeight:typography.c.sBodyXS.fontWeight,letterSpacing:typography.c.sBodyXS.letterSpacing},bodyXSMedium:{fontFamily:typography.c.sBodyXSMedium.fontFamily,fontSize:typography.c.sBodyXSMedium.fontSize,lineHeight:`${typography.c.sBodyXSMedium.lineHeight}px`,fontWeight:typography.c.sBodyXSMedium.fontWeight,letterSpacing:typography.c.sBodyXSMedium.letterSpacing}};for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++)args[_key2]=arguments[_key2];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:`S DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h2",style:styles.headingLG,...args,children:`S HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.headingMD,...args,children:`S HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.headingSM,...args,children:`S HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize/16}rem`}),(0,jsx_runtime.jsxs)(components.xv,{as:"h4",style:styles.headingSMRegular,...args,children:[`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize/16}rem`," ",(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"})]}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.bodyLGMedium,...args,children:`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDBold,...args,children:`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDMedium,...args,children:`S BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMD,...args,children:`S BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMBold,...args,children:`S BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMMedium,...args,children:`S BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySM,...args,children:`S BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXSMedium,...args,children:`S BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXS,...args,children:`S BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize/16}rem`})]})},LargeScreen=function(){const styles={displayMD:{fontFamily:typography.c.lDisplayMD.fontFamily,fontSize:typography.c.lDisplayMD.fontSize,lineHeight:`${typography.c.lDisplayMD.lineHeight}px`,fontWeight:typography.c.lDisplayMD.fontWeight},headingLG:{fontFamily:typography.c.lHeadingLG.fontFamily,fontSize:typography.c.lHeadingLG.fontSize,lineHeight:`${typography.c.lHeadingLG.lineHeight}px`,fontWeight:typography.c.lHeadingLG.fontWeight},headingMD:{fontFamily:typography.c.lHeadingMD.fontFamily,fontSize:typography.c.lHeadingMD.fontSize,lineHeight:`${typography.c.lHeadingMD.lineHeight}px`,fontWeight:typography.c.lHeadingMD.fontWeight},headingSM:{fontFamily:typography.c.lHeadingSM.fontFamily,fontSize:typography.c.lHeadingSM.fontSize,lineHeight:`${typography.c.lHeadingSM.lineHeight}px`,fontWeight:typography.c.lHeadingSM.fontWeight},headingSMRegular:{fontFamily:typography.c.lHeadingSMRegular.fontFamily,fontSize:typography.c.lHeadingSMRegular.fontSize,lineHeight:`${typography.c.lHeadingSMRegular.lineHeight}px`,fontWeight:typography.c.lHeadingSMRegular.fontWeight},bodyLGMedium:{fontFamily:typography.c.lBodyLGMedium.fontFamily,fontSize:typography.c.lBodyLGMedium.fontSize,lineHeight:`${typography.c.lBodyLGMedium.lineHeight}px`,fontWeight:typography.c.lBodyLGMedium.fontWeight},bodyMDBold:{fontFamily:typography.c.lBodyMDBold.fontFamily,fontSize:typography.c.lBodyMDBold.fontSize,lineHeight:`${typography.c.lBodyMDBold.lineHeight}px`,fontWeight:typography.c.lBodyMDBold.fontWeight},bodyMDMedium:{fontFamily:typography.c.lBodyMDMedium.fontFamily,fontSize:typography.c.lBodyMDMedium.fontSize,lineHeight:`${typography.c.lBodyMDMedium.lineHeight}px`,fontWeight:typography.c.lBodyMDMedium.fontWeight},bodyMD:{fontFamily:typography.c.lBodyMD.fontFamily,fontSize:typography.c.lBodyMD.fontSize,lineHeight:`${typography.c.lBodyMD.lineHeight}px`,fontWeight:typography.c.lBodyMD.fontWeight},bodySMBold:{fontFamily:typography.c.lBodySMBold.fontFamily,fontSize:typography.c.lBodySMBold.fontSize,lineHeight:`${typography.c.lBodySMBold.lineHeight}px`,fontWeight:typography.c.lBodySMBold.fontWeight},bodySMMedium:{fontFamily:typography.c.lBodySMMedium.fontFamily,fontSize:typography.c.lBodySMMedium.fontSize,lineHeight:`${typography.c.lBodySMMedium.lineHeight}px`,fontWeight:typography.c.lBodySMMedium.fontWeight},bodySM:{fontFamily:typography.c.lBodySM.fontFamily,fontSize:typography.c.lBodySM.fontSize,lineHeight:`${typography.c.lBodySM.lineHeight}px`,fontWeight:typography.c.lBodySM.fontWeight},bodyXSMedium:{fontFamily:typography.c.lBodyXSMedium.fontFamily,fontSize:typography.c.lBodyXSMedium.fontSize,lineHeight:`${typography.c.lBodyXSMedium.lineHeight}px`,fontWeight:typography.c.lBodyXSMedium.fontWeight,letterSpacing:typography.c.lBodyXSMedium.letterSpacing},bodyXS:{fontFamily:typography.c.lBodyXS.fontFamily,fontSize:typography.c.lBodyXS.fontSize,lineHeight:`${typography.c.lBodyXS.lineHeight}px`,fontWeight:typography.c.lBodyXS.fontWeight,letterSpacing:typography.c.lBodyXS.letterSpacing}};for(var _len3=arguments.length,args=new Array(_len3),_key3=0;_key3<_len3;_key3++)args[_key3]=arguments[_key3];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h1",style:styles.displayMD,...args,children:`L DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h2",style:styles.headingLG,...args,children:`L HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.headingMD,...args,children:`L HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.headingSM,...args,children:`L HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize/16}rem`}),(0,jsx_runtime.jsxs)(components.xv,{as:"h4",style:styles.headingSMRegular,...args,children:[`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize/16}rem`," ",(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"})]}),(0,jsx_runtime.jsx)(components.xv,{as:"h4",style:styles.bodyLGMedium,...args,children:`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDBold,...args,children:`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMDMedium,...args,children:`L BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyMD,...args,children:`L BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMBold,...args,children:`L BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySMMedium,...args,children:`L BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodySM,...args,children:`L BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXSMedium,...args,children:`L BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize/16}rem`}),(0,jsx_runtime.jsx)(components.xv,{as:"p",style:styles.bodyXS,...args,children:`L BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize/16}rem`})]})},FontWeight=function(){const styles={regular:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.regular},medium:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.medium},bold:{fontFamily:fontFamilies.V.euclidCircularB,fontSize:fontSizes.C.fontSize4,lineHeight:`${lineHeights.t.lineHeight5}px`,fontWeight:fontWeights.v.bold}};for(var _len4=arguments.length,args=new Array(_len4),_key4=0;_key4<_len4;_key4++)args[_key4]=arguments[_key4];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.regular,...args,children:"Regular 400"}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.medium,...args,children:"Medium 500"}),(0,jsx_runtime.jsx)(components.xv,{as:"h3",style:styles.bold,...args,children:"Bold 700"})]})},SmallScreenCSS=function(){for(var _len5=arguments.length,args=new Array(_len5),_key5=0;_key5<_len5;_key5++)args[_key5]=arguments[_key5];const styles={DisplayMD:{fontFamily:"var(--typography-s-display-md-font-family)",fontSize:"var(--typography-s-display-md-font-size)",lineHeight:"var(--typography-s-display-md-line-height)",fontWeight:"var(--typography-s-display-md-font-weight)"},HeadingLG:{fontFamily:"var(--typography-s-heading-lg-font-family)",fontSize:"var(--typography-s-heading-lg-font-size)",lineHeight:"var(--typography-s-heading-lg-line-height)",fontWeight:"var(--typography-s-heading-lg-font-weight)"},HeadingMD:{fontFamily:"var(--typography-s-heading-md-font-family)",fontSize:"var(--typography-s-heading-md-font-size)",lineHeight:"var(--typography-s-heading-md-line-height)",fontWeight:"var(--typography-s-heading-md-font-weight)"},HeadingSM:{fontFamily:"var(--typography-s-heading-sm-font-family)",fontSize:"var(--typography-s-heading-sm-font-size)",lineHeight:"var(--typography-s-heading-sm-line-height)",fontWeight:"var(--typography-s-heading-sm-font-weight)"},"HeadingSM Regular":{fontFamily:"var(--typography-s-heading-sm-regular-font-family)",fontSize:"var(--typography-s-heading-sm-regular-font-size)",lineHeight:"var(--typography-s-heading-sm-regular-line-height)",fontWeight:"var(--typography-s-heading-sm-regular-font-weight)"},"BodyLG Medium":{fontFamily:"var(--typography-s-body-lg-medium-font-family)",fontSize:"var(--typography-s-body-lg-medium-font-size)",lineHeight:"var(--typography-s-body-lg-medium-line-height)",fontWeight:"var(--typography-s-body-lg-medium-font-weight)"},BodyMD:{fontFamily:"var(--typography-s-body-md-font-family)",fontSize:"var(--typography-s-body-md-font-size)",lineHeight:"var(--typography-s-body-md-line-height)",fontWeight:"var(--typography-s-body-md-font-weight)"},"BodyMD Medium":{fontFamily:"var(--typography-s-body-md-medium-font-family)",fontSize:"var(--typography-s-body-md-medium-font-size)",lineHeight:"var(--typography-s-body-md-medium-line-height)",fontWeight:"var(--typography-s-body-md-medium-font-weight)"},"BodyMD Bold":{fontFamily:"var(--typography-s-body-md-bold-font-family)",fontSize:"var(--typography-s-body-md-bold-font-size)",lineHeight:"var(--typography-s-body-md-bold-line-height)",fontWeight:"var(--typography-s-body-md-bold-font-weight)"},BodySM:{fontFamily:"var(--typography-s-body-sm-font-family)",fontSize:"var(--typography-s-body-sm-font-size)",lineHeight:"var(--typography-s-body-sm-line-height)",fontWeight:"var(--typography-s-body-sm-font-weight)"},"BodySM Medium":{fontFamily:"var(--typography-s-body-sm-medium-font-family)",fontSize:"var(--typography-s-body-sm-medium-font-size)",lineHeight:"var(--typography-s-body-sm-medium-line-height)",fontWeight:"var(--typography-s-body-sm-medium-font-weight)"},"BodySM Bold":{fontFamily:"var(--typography-s-body-sm-bold-font-family)",fontSize:"var(--typography-s-body-sm-bold-font-size)",lineHeight:"var(--typography-s-body-sm-bold-line-height)",fontWeight:"var(--typography-s-body-sm-bold-font-weight)"},BodyXS:{fontFamily:"var(--typography-s-body-xs-font-family)",fontSize:"var(--typography-s-body-xs-font-size)",lineHeight:"var(--typography-s-body-xs-line-height)",fontWeight:"var(--typography-s-body-xs-font-weight)",letterSpacing:"var(--typography-s-body-xs-letter-spacing)"},"BodyXS Medium":{fontFamily:"var(--typography-s-body-xs-medium-font-family)",fontSize:"var(--typography-s-body-xs-medium-font-size)",lineHeight:"var(--typography-s-body-xs-medium-line-height)",fontWeight:"var(--typography-s-body-xs-medium-font-weight)",letterSpacing:"var(--typography-s-body-xs-medium-letter-spacing)"}},getCssVar=variable=>{const strippedVar=variable.slice(4,-1);return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0,-3)};return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object.values(styles).map(((value,i)=>{const title=Object.getOwnPropertyNames(styles)[i];let tag="p";return i<=4&&(tag=`h${i+1}`),(0,react.createElement)(components.xv,{as:tag,style:value,...args,key:i},`S ${title} ${16*getCssVar(value.fontSize)}px/${16*getCssVar(value.lineHeight)}px ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `,"HeadingSM Regular"===title&&(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"}))}))})},LargeScreenCSS=function(){for(var _len6=arguments.length,args=new Array(_len6),_key6=0;_key6<_len6;_key6++)args[_key6]=arguments[_key6];const styles={DisplayMD:{fontFamily:"var(--typography-l-display-md-font-family)",fontSize:"var(--typography-l-display-md-font-size)",lineHeight:"var(--typography-l-display-md-line-height)",fontWeight:"var(--typography-l-display-md-font-weight)"},HeadingLG:{fontFamily:"var(--typography-l-heading-lg-font-family)",fontSize:"var(--typography-l-heading-lg-font-size)",lineHeight:"var(--typography-l-heading-lg-line-height)",fontWeight:"var(--typography-l-heading-lg-font-weight)"},HeadingMD:{fontFamily:"var(--typography-l-heading-md-font-family)",fontSize:"var(--typography-l-heading-md-font-size)",lineHeight:"var(--typography-l-heading-md-line-height)",fontWeight:"var(--typography-l-heading-md-font-weight)"},HeadingSM:{fontFamily:"var(--typography-l-heading-sm-font-family)",fontSize:"var(--typography-l-heading-sm-font-size)",lineHeight:"var(--typography-l-heading-sm-line-height)",fontWeight:"var(--typography-l-heading-sm-font-weight)"},"HeadingSM Regular":{fontFamily:"var(--typography-l-heading-sm-regular-font-family)",fontSize:"var(--typography-l-heading-sm-regular-font-size)",lineHeight:"var(--typography-l-heading-sm-regular-line-height)",fontWeight:"var(--typography-l-heading-sm-regular-font-weight)"},"BodyLG Medium":{fontFamily:"var(--typography-l-body-lg-medium-font-family)",fontSize:"var(--typography-l-body-lg-medium-font-size)",lineHeight:"var(--typography-l-body-lg-medium-line-height)",fontWeight:"var(--typography-l-body-lg-medium-font-weight)"},BodyMD:{fontFamily:"var(--typography-l-body-md-font-family)",fontSize:"var(--typography-l-body-md-font-size)",lineHeight:"var(--typography-l-body-md-line-height)",fontWeight:"var(--typography-l-body-md-font-weight)"},"BodyMD Medium":{fontFamily:"var(--typography-l-body-md-medium-font-family)",fontSize:"var(--typography-l-body-md-medium-font-size)",lineHeight:"var(--typography-l-body-md-medium-line-height)",fontWeight:"var(--typography-l-body-md-medium-font-weight)"},"BodyMD Bold":{fontFamily:"var(--typography-l-body-md-bold-font-family)",fontSize:"var(--typography-l-body-md-bold-font-size)",lineHeight:"var(--typography-l-body-md-bold-line-height)",fontWeight:"var(--typography-l-body-md-bold-font-weight)"},BodySM:{fontFamily:"var(--typography-l-body-sm-font-family)",fontSize:"var(--typography-l-body-sm-font-size)",lineHeight:"var(--typography-l-body-sm-line-height)",fontWeight:"var(--typography-l-body-sm-font-weight)"},"BodySM Medium":{fontFamily:"var(--typography-l-body-sm-medium-font-family)",fontSize:"var(--typography-l-body-sm-medium-font-size)",lineHeight:"var(--typography-l-body-sm-medium-line-height)",fontWeight:"var(--typography-l-body-sm-medium-font-weight)"},"BodySM Bold":{fontFamily:"var(--typography-l-body-sm-bold-font-family)",fontSize:"var(--typography-l-body-sm-bold-font-size)",lineHeight:"var(--typography-l-body-sm-bold-line-height)",fontWeight:"var(--typography-l-body-sm-bold-font-weight)"},BodyXS:{fontFamily:"var(--typography-l-body-xs-font-family)",fontSize:"var(--typography-l-body-xs-font-size)",lineHeight:"var(--typography-l-body-xs-line-height)",fontWeight:"var(--typography-l-body-xs-font-weight)",letterSpacing:"var(--typography-l-body-xs-letter-spacing)"},"BodyXS Medium":{fontFamily:"var(--typography-l-body-xs-medium-font-family)",fontSize:"var(--typography-l-body-xs-medium-font-size)",lineHeight:"var(--typography-l-body-xs-medium-line-height)",fontWeight:"var(--typography-l-body-xs-medium-font-weight)",letterSpacing:"var(--typography-l-body-xs-medium-letter-spacing)"}},getCssVar=variable=>{const strippedVar=variable.slice(4,-1);return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0,-3).trim()};return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object.values(styles).map(((value,i)=>{const title=Object.getOwnPropertyNames(styles)[i];let tag="p";return i<=4&&(tag=`h${i+1}`),(0,react.createElement)(components.xv,{as:tag,style:value,...args,key:i},`L ${title} ${16*getCssVar(value.fontSize)}px/${16*getCssVar(value.lineHeight)}px\n\n            ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `,"HeadingSM Regular"===title&&(0,jsx_runtime.jsx)("span",{style:{color:"var(--color-error-default)"},children:"DEPRECATED"}))}))})};FontFamily.parameters={...FontFamily.parameters,docs:{...FontFamily.parameters?.docs,source:{originalSource:'(...args) => {\n  const styles = {\n    displayMD: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize7,\n      lineHeight: `${lineHeights.lineHeight6}px`,\n      fontWeight: fontWeights.regular,\n      letterSpacing: letterSpacing.letterSpacing1\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        Euclid Circular B\n      </Text>\n    </>;\n}',...FontFamily.parameters?.docs?.source}}},SmallScreen.parameters={...SmallScreen.parameters,docs:{...SmallScreen.parameters?.docs,source:{originalSource:'(...args) => {\n  const smallScreenFontSizeBase = 16;\n  const styles = {\n    displayMD: {\n      fontFamily: typography.sDisplayMD.fontFamily,\n      fontSize: typography.sDisplayMD.fontSize,\n      lineHeight: `${typography.sDisplayMD.lineHeight}px`,\n      fontWeight: typography.sDisplayMD.fontWeight\n    },\n    headingLG: {\n      fontFamily: typography.sHeadingLG.fontFamily,\n      fontSize: typography.sHeadingLG.fontSize,\n      lineHeight: `${typography.sHeadingLG.lineHeight}px`,\n      fontWeight: typography.sHeadingLG.fontWeight\n    },\n    headingMD: {\n      fontFamily: typography.sHeadingMD.fontFamily,\n      fontSize: typography.sHeadingMD.fontSize,\n      lineHeight: `${typography.sHeadingMD.lineHeight}px`,\n      fontWeight: typography.sHeadingMD.fontWeight\n    },\n    headingSM: {\n      fontFamily: typography.sHeadingSM.fontFamily,\n      fontSize: typography.sHeadingSM.fontSize,\n      lineHeight: `${typography.sHeadingSM.lineHeight}px`,\n      fontWeight: typography.sHeadingSM.fontWeight\n    },\n    headingSMRegular: {\n      fontFamily: typography.sHeadingSMRegular.fontFamily,\n      fontSize: typography.sHeadingSMRegular.fontSize,\n      lineHeight: `${typography.sHeadingSMRegular.lineHeight}px`,\n      fontWeight: typography.sHeadingSMRegular.fontWeight\n    },\n    bodyLGMedium: {\n      fontFamily: typography.sBodyLGMedium.fontFamily,\n      fontSize: typography.sBodyLGMedium.fontSize,\n      lineHeight: `${typography.sBodyLGMedium.lineHeight}px`,\n      fontWeight: typography.sBodyLGMedium.fontWeight\n    },\n    bodyMD: {\n      fontFamily: typography.sBodyMD.fontFamily,\n      fontSize: typography.sBodyMD.fontSize,\n      lineHeight: `${typography.sBodyMD.lineHeight}px`,\n      fontWeight: typography.sBodyMD.fontWeight\n    },\n    bodyMDMedium: {\n      fontFamily: typography.sBodyMDMedium.fontFamily,\n      fontSize: typography.sBodyMDMedium.fontSize,\n      lineHeight: `${typography.sBodyMDMedium.lineHeight}px`,\n      fontWeight: typography.sBodyMDMedium.fontWeight\n    },\n    bodyMDBold: {\n      fontFamily: typography.sBodyMDBold.fontFamily,\n      fontSize: typography.sBodyMDBold.fontSize,\n      lineHeight: `${typography.sBodyMDBold.lineHeight}px`,\n      fontWeight: typography.sBodyMDBold.fontWeight\n    },\n    bodySM: {\n      fontFamily: typography.sBodySM.fontFamily,\n      fontSize: typography.sBodySM.fontSize,\n      lineHeight: `${typography.sBodySM.lineHeight}px`,\n      fontWeight: typography.sBodySM.fontWeight\n    },\n    bodySMMedium: {\n      fontFamily: typography.sBodySMMedium.fontFamily,\n      fontSize: typography.sBodySMMedium.fontSize,\n      lineHeight: `${typography.sBodySMMedium.lineHeight}px`,\n      fontWeight: typography.sBodySMMedium.fontWeight\n    },\n    bodySMBold: {\n      fontFamily: typography.sBodySMBold.fontFamily,\n      fontSize: typography.sBodySMBold.fontSize,\n      lineHeight: `${typography.sBodySMBold.lineHeight}px`,\n      fontWeight: typography.sBodySMBold.fontWeight\n    },\n    bodyXS: {\n      fontFamily: typography.sBodyXS.fontFamily,\n      fontSize: typography.sBodyXS.fontSize,\n      lineHeight: `${typography.sBodyXS.lineHeight}px`,\n      fontWeight: typography.sBodyXS.fontWeight,\n      letterSpacing: typography.sBodyXS.letterSpacing\n    },\n    bodyXSMedium: {\n      fontFamily: typography.sBodyXSMedium.fontFamily,\n      fontSize: typography.sBodyXSMedium.fontSize,\n      lineHeight: `${typography.sBodyXSMedium.lineHeight}px`,\n      fontWeight: typography.sBodyXSMedium.fontWeight,\n      letterSpacing: typography.sBodyXSMedium.letterSpacing\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        {`S DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h2" style={styles.headingLG} {...args}>\n        {`S HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h3" style={styles.headingMD} {...args}>\n        {`S HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSM} {...args}>\n        {`S HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSMRegular} {...args}>\n        {`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize / smallScreenFontSizeBase}rem`}{\' \'}\n        <span style={{\n        color: \'var(--color-error-default)\'\n      }}>DEPRECATED</span>\n      </Text>\n      <Text as="h4" style={styles.bodyLGMedium} {...args}>\n        {`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDBold} {...args}>\n        {`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDMedium} {...args}>\n        {`S BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMD} {...args}>\n        {`S BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMBold} {...args}>\n        {`S BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMMedium} {...args}>\n        {`S BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySM} {...args}>\n        {`S BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXSMedium} {...args}>\n        {`S BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXS} {...args}>\n        {`S BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize / smallScreenFontSizeBase}rem`}\n      </Text>\n    </>;\n}',...SmallScreen.parameters?.docs?.source}}},LargeScreen.parameters={...LargeScreen.parameters,docs:{...LargeScreen.parameters?.docs,source:{originalSource:'(...args) => {\n  const largeScreenFontSizeBase = 16;\n  const styles = {\n    displayMD: {\n      fontFamily: typography.lDisplayMD.fontFamily,\n      fontSize: typography.lDisplayMD.fontSize,\n      lineHeight: `${typography.lDisplayMD.lineHeight}px`,\n      fontWeight: typography.lDisplayMD.fontWeight\n    },\n    headingLG: {\n      fontFamily: typography.lHeadingLG.fontFamily,\n      fontSize: typography.lHeadingLG.fontSize,\n      lineHeight: `${typography.lHeadingLG.lineHeight}px`,\n      fontWeight: typography.lHeadingLG.fontWeight\n    },\n    headingMD: {\n      fontFamily: typography.lHeadingMD.fontFamily,\n      fontSize: typography.lHeadingMD.fontSize,\n      lineHeight: `${typography.lHeadingMD.lineHeight}px`,\n      fontWeight: typography.lHeadingMD.fontWeight\n    },\n    headingSM: {\n      fontFamily: typography.lHeadingSM.fontFamily,\n      fontSize: typography.lHeadingSM.fontSize,\n      lineHeight: `${typography.lHeadingSM.lineHeight}px`,\n      fontWeight: typography.lHeadingSM.fontWeight\n    },\n    headingSMRegular: {\n      fontFamily: typography.lHeadingSMRegular.fontFamily,\n      fontSize: typography.lHeadingSMRegular.fontSize,\n      lineHeight: `${typography.lHeadingSMRegular.lineHeight}px`,\n      fontWeight: typography.lHeadingSMRegular.fontWeight\n    },\n    bodyLGMedium: {\n      fontFamily: typography.lBodyLGMedium.fontFamily,\n      fontSize: typography.lBodyLGMedium.fontSize,\n      lineHeight: `${typography.lBodyLGMedium.lineHeight}px`,\n      fontWeight: typography.lBodyLGMedium.fontWeight\n    },\n    bodyMDBold: {\n      fontFamily: typography.lBodyMDBold.fontFamily,\n      fontSize: typography.lBodyMDBold.fontSize,\n      lineHeight: `${typography.lBodyMDBold.lineHeight}px`,\n      fontWeight: typography.lBodyMDBold.fontWeight\n    },\n    bodyMDMedium: {\n      fontFamily: typography.lBodyMDMedium.fontFamily,\n      fontSize: typography.lBodyMDMedium.fontSize,\n      lineHeight: `${typography.lBodyMDMedium.lineHeight}px`,\n      fontWeight: typography.lBodyMDMedium.fontWeight\n    },\n    bodyMD: {\n      fontFamily: typography.lBodyMD.fontFamily,\n      fontSize: typography.lBodyMD.fontSize,\n      lineHeight: `${typography.lBodyMD.lineHeight}px`,\n      fontWeight: typography.lBodyMD.fontWeight\n    },\n    bodySMBold: {\n      fontFamily: typography.lBodySMBold.fontFamily,\n      fontSize: typography.lBodySMBold.fontSize,\n      lineHeight: `${typography.lBodySMBold.lineHeight}px`,\n      fontWeight: typography.lBodySMBold.fontWeight\n    },\n    bodySMMedium: {\n      fontFamily: typography.lBodySMMedium.fontFamily,\n      fontSize: typography.lBodySMMedium.fontSize,\n      lineHeight: `${typography.lBodySMMedium.lineHeight}px`,\n      fontWeight: typography.lBodySMMedium.fontWeight\n    },\n    bodySM: {\n      fontFamily: typography.lBodySM.fontFamily,\n      fontSize: typography.lBodySM.fontSize,\n      lineHeight: `${typography.lBodySM.lineHeight}px`,\n      fontWeight: typography.lBodySM.fontWeight\n    },\n    bodyXSMedium: {\n      fontFamily: typography.lBodyXSMedium.fontFamily,\n      fontSize: typography.lBodyXSMedium.fontSize,\n      lineHeight: `${typography.lBodyXSMedium.lineHeight}px`,\n      fontWeight: typography.lBodyXSMedium.fontWeight,\n      letterSpacing: typography.lBodyXSMedium.letterSpacing\n    },\n    bodyXS: {\n      fontFamily: typography.lBodyXS.fontFamily,\n      fontSize: typography.lBodyXS.fontSize,\n      lineHeight: `${typography.lBodyXS.lineHeight}px`,\n      fontWeight: typography.lBodyXS.fontWeight,\n      letterSpacing: typography.lBodyXS.letterSpacing\n    }\n  };\n  return <>\n      <Text as="h1" style={styles.displayMD} {...args}>\n        {`L DisplayMD ${styles.displayMD.fontSize}px/${styles.displayMD.lineHeight} ${styles.displayMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h2" style={styles.headingLG} {...args}>\n        {`L HeadingLG ${styles.headingLG.fontSize}px/${styles.headingLG.lineHeight} ${styles.headingLG.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h3" style={styles.headingMD} {...args}>\n        {`L HeadingMD ${styles.headingMD.fontSize}px/${styles.headingMD.lineHeight} ${styles.headingMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSM} {...args}>\n        {`L HeadingSM ${styles.headingSM.fontSize}px/${styles.headingSM.lineHeight} ${styles.headingSM.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="h4" style={styles.headingSMRegular} {...args}>\n        {`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${styles.headingSMRegular.lineHeight} ${styles.headingSMRegular.fontSize / largeScreenFontSizeBase}rem`}{\' \'}\n        <span style={{\n        color: \'var(--color-error-default)\'\n      }}>DEPRECATED</span>\n      </Text>\n      <Text as="h4" style={styles.bodyLGMedium} {...args}>\n        {`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${styles.bodyLGMedium.lineHeight} ${styles.bodyLGMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDBold} {...args}>\n        {`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${styles.bodyMDBold.lineHeight} ${styles.bodyMDBold.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMDMedium} {...args}>\n        {`L BodyMD Medium ${styles.bodyMDMedium.fontSize}px/${styles.bodyMDMedium.lineHeight} ${styles.bodyMDMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyMD} {...args}>\n        {`L BodyMD ${styles.bodyMD.fontSize}px/${styles.bodyMD.lineHeight} ${styles.bodyMD.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMBold} {...args}>\n        {`L BodySM Bold ${styles.bodySMBold.fontSize}px/${styles.bodySMBold.lineHeight} ${styles.bodySMBold.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySMMedium} {...args}>\n        {`L BodySM Medium ${styles.bodySMMedium.fontSize}px/${styles.bodySMMedium.lineHeight} ${styles.bodySMMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodySM} {...args}>\n        {`L BodySM ${styles.bodySM.fontSize}px/${styles.bodySM.lineHeight} ${styles.bodySM.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXSMedium} {...args}>\n        {`L BodyXS Medium ${styles.bodyXSMedium.fontSize}px/${styles.bodyXSMedium.lineHeight} ${styles.bodyXSMedium.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n      <Text as="p" style={styles.bodyXS} {...args}>\n        {`L BodyXS ${styles.bodyXS.fontSize}px/${styles.bodyXS.lineHeight} ${styles.bodyXS.fontSize / largeScreenFontSizeBase}rem`}\n      </Text>\n    </>;\n}',...LargeScreen.parameters?.docs?.source}}},FontWeight.parameters={...FontWeight.parameters,docs:{...FontWeight.parameters?.docs,source:{originalSource:'(...args) => {\n  const styles = {\n    regular: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.regular\n    },\n    medium: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.medium\n    },\n    bold: {\n      fontFamily: fontFamilies.euclidCircularB,\n      fontSize: fontSizes.fontSize4,\n      lineHeight: `${lineHeights.lineHeight5}px`,\n      fontWeight: fontWeights.bold\n    }\n  };\n  return <>\n      <Text as="h3" style={styles.regular} {...args}>\n        Regular 400\n      </Text>\n      <Text as="h3" style={styles.medium} {...args}>\n        Medium 500\n      </Text>\n      <Text as="h3" style={styles.bold} {...args}>\n        Bold 700\n      </Text>\n    </>;\n}',...FontWeight.parameters?.docs?.source}}},SmallScreenCSS.parameters={...SmallScreenCSS.parameters,docs:{...SmallScreenCSS.parameters?.docs,source:{originalSource:"(...args) => {\n  const fontBase = 16;\n  const styles = {\n    DisplayMD: {\n      fontFamily: 'var(--typography-s-display-md-font-family)',\n      fontSize: 'var(--typography-s-display-md-font-size)',\n      lineHeight: 'var(--typography-s-display-md-line-height)',\n      fontWeight: 'var(--typography-s-display-md-font-weight)'\n    },\n    HeadingLG: {\n      fontFamily: 'var(--typography-s-heading-lg-font-family)',\n      fontSize: 'var(--typography-s-heading-lg-font-size)',\n      lineHeight: 'var(--typography-s-heading-lg-line-height)',\n      fontWeight: 'var(--typography-s-heading-lg-font-weight)'\n    },\n    HeadingMD: {\n      fontFamily: 'var(--typography-s-heading-md-font-family)',\n      fontSize: 'var(--typography-s-heading-md-font-size)',\n      lineHeight: 'var(--typography-s-heading-md-line-height)',\n      fontWeight: 'var(--typography-s-heading-md-font-weight)'\n    },\n    HeadingSM: {\n      fontFamily: 'var(--typography-s-heading-sm-font-family)',\n      fontSize: 'var(--typography-s-heading-sm-font-size)',\n      lineHeight: 'var(--typography-s-heading-sm-line-height)',\n      fontWeight: 'var(--typography-s-heading-sm-font-weight)'\n    },\n    'HeadingSM Regular': {\n      fontFamily: 'var(--typography-s-heading-sm-regular-font-family)',\n      fontSize: 'var(--typography-s-heading-sm-regular-font-size)',\n      lineHeight: 'var(--typography-s-heading-sm-regular-line-height)',\n      fontWeight: 'var(--typography-s-heading-sm-regular-font-weight)'\n    },\n    'BodyLG Medium': {\n      fontFamily: 'var(--typography-s-body-lg-medium-font-family)',\n      fontSize: 'var(--typography-s-body-lg-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-lg-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-lg-medium-font-weight)'\n    },\n    BodyMD: {\n      fontFamily: 'var(--typography-s-body-md-font-family)',\n      fontSize: 'var(--typography-s-body-md-font-size)',\n      lineHeight: 'var(--typography-s-body-md-line-height)',\n      fontWeight: 'var(--typography-s-body-md-font-weight)'\n    },\n    'BodyMD Medium': {\n      fontFamily: 'var(--typography-s-body-md-medium-font-family)',\n      fontSize: 'var(--typography-s-body-md-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-md-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-md-medium-font-weight)'\n    },\n    'BodyMD Bold': {\n      fontFamily: 'var(--typography-s-body-md-bold-font-family)',\n      fontSize: 'var(--typography-s-body-md-bold-font-size)',\n      lineHeight: 'var(--typography-s-body-md-bold-line-height)',\n      fontWeight: 'var(--typography-s-body-md-bold-font-weight)'\n    },\n    BodySM: {\n      fontFamily: 'var(--typography-s-body-sm-font-family)',\n      fontSize: 'var(--typography-s-body-sm-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-font-weight)'\n    },\n    'BodySM Medium': {\n      fontFamily: 'var(--typography-s-body-sm-medium-font-family)',\n      fontSize: 'var(--typography-s-body-sm-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-medium-font-weight)'\n    },\n    'BodySM Bold': {\n      fontFamily: 'var(--typography-s-body-sm-bold-font-family)',\n      fontSize: 'var(--typography-s-body-sm-bold-font-size)',\n      lineHeight: 'var(--typography-s-body-sm-bold-line-height)',\n      fontWeight: 'var(--typography-s-body-sm-bold-font-weight)'\n    },\n    BodyXS: {\n      fontFamily: 'var(--typography-s-body-xs-font-family)',\n      fontSize: 'var(--typography-s-body-xs-font-size)',\n      lineHeight: 'var(--typography-s-body-xs-line-height)',\n      fontWeight: 'var(--typography-s-body-xs-font-weight)',\n      letterSpacing: 'var(--typography-s-body-xs-letter-spacing)'\n    },\n    'BodyXS Medium': {\n      fontFamily: 'var(--typography-s-body-xs-medium-font-family)',\n      fontSize: 'var(--typography-s-body-xs-medium-font-size)',\n      lineHeight: 'var(--typography-s-body-xs-medium-line-height)',\n      fontWeight: 'var(--typography-s-body-xs-medium-font-weight)',\n      letterSpacing: 'var(--typography-s-body-xs-medium-letter-spacing)'\n    }\n  };\n  const getCssVar = variable => {\n    const strippedVar = variable.slice(4, -1);\n    return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0, -3);\n  };\n  return <>\n      {Object.values(styles).map((value, i) => {\n      const title = Object.getOwnPropertyNames(styles)[i];\n      let tag = 'p';\n      if (i <= 4) {\n        tag = `h${i + 1}`;\n      }\n      return <Text as={tag} style={value} {...args} key={i}>\n            {`S ${title} ${getCssVar(value.fontSize) * fontBase}px/${getCssVar(value.lineHeight) * fontBase}px ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `}\n            {title === 'HeadingSM Regular' && <span style={{\n          color: 'var(--color-error-default)'\n        }}>\n                DEPRECATED\n              </span>}\n          </Text>;\n    })}\n    </>;\n}",...SmallScreenCSS.parameters?.docs?.source}}},LargeScreenCSS.parameters={...LargeScreenCSS.parameters,docs:{...LargeScreenCSS.parameters?.docs,source:{originalSource:"(...args) => {\n  const fontBase = 16;\n  const styles = {\n    DisplayMD: {\n      fontFamily: 'var(--typography-l-display-md-font-family)',\n      fontSize: 'var(--typography-l-display-md-font-size)',\n      lineHeight: 'var(--typography-l-display-md-line-height)',\n      fontWeight: 'var(--typography-l-display-md-font-weight)'\n    },\n    HeadingLG: {\n      fontFamily: 'var(--typography-l-heading-lg-font-family)',\n      fontSize: 'var(--typography-l-heading-lg-font-size)',\n      lineHeight: 'var(--typography-l-heading-lg-line-height)',\n      fontWeight: 'var(--typography-l-heading-lg-font-weight)'\n    },\n    HeadingMD: {\n      fontFamily: 'var(--typography-l-heading-md-font-family)',\n      fontSize: 'var(--typography-l-heading-md-font-size)',\n      lineHeight: 'var(--typography-l-heading-md-line-height)',\n      fontWeight: 'var(--typography-l-heading-md-font-weight)'\n    },\n    HeadingSM: {\n      fontFamily: 'var(--typography-l-heading-sm-font-family)',\n      fontSize: 'var(--typography-l-heading-sm-font-size)',\n      lineHeight: 'var(--typography-l-heading-sm-line-height)',\n      fontWeight: 'var(--typography-l-heading-sm-font-weight)'\n    },\n    'HeadingSM Regular': {\n      fontFamily: 'var(--typography-l-heading-sm-regular-font-family)',\n      fontSize: 'var(--typography-l-heading-sm-regular-font-size)',\n      lineHeight: 'var(--typography-l-heading-sm-regular-line-height)',\n      fontWeight: 'var(--typography-l-heading-sm-regular-font-weight)'\n    },\n    'BodyLG Medium': {\n      fontFamily: 'var(--typography-l-body-lg-medium-font-family)',\n      fontSize: 'var(--typography-l-body-lg-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-lg-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-lg-medium-font-weight)'\n    },\n    BodyMD: {\n      fontFamily: 'var(--typography-l-body-md-font-family)',\n      fontSize: 'var(--typography-l-body-md-font-size)',\n      lineHeight: 'var(--typography-l-body-md-line-height)',\n      fontWeight: 'var(--typography-l-body-md-font-weight)'\n    },\n    'BodyMD Medium': {\n      fontFamily: 'var(--typography-l-body-md-medium-font-family)',\n      fontSize: 'var(--typography-l-body-md-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-md-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-md-medium-font-weight)'\n    },\n    'BodyMD Bold': {\n      fontFamily: 'var(--typography-l-body-md-bold-font-family)',\n      fontSize: 'var(--typography-l-body-md-bold-font-size)',\n      lineHeight: 'var(--typography-l-body-md-bold-line-height)',\n      fontWeight: 'var(--typography-l-body-md-bold-font-weight)'\n    },\n    BodySM: {\n      fontFamily: 'var(--typography-l-body-sm-font-family)',\n      fontSize: 'var(--typography-l-body-sm-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-font-weight)'\n    },\n    'BodySM Medium': {\n      fontFamily: 'var(--typography-l-body-sm-medium-font-family)',\n      fontSize: 'var(--typography-l-body-sm-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-medium-font-weight)'\n    },\n    'BodySM Bold': {\n      fontFamily: 'var(--typography-l-body-sm-bold-font-family)',\n      fontSize: 'var(--typography-l-body-sm-bold-font-size)',\n      lineHeight: 'var(--typography-l-body-sm-bold-line-height)',\n      fontWeight: 'var(--typography-l-body-sm-bold-font-weight)'\n    },\n    BodyXS: {\n      fontFamily: 'var(--typography-l-body-xs-font-family)',\n      fontSize: 'var(--typography-l-body-xs-font-size)',\n      lineHeight: 'var(--typography-l-body-xs-line-height)',\n      fontWeight: 'var(--typography-l-body-xs-font-weight)',\n      letterSpacing: 'var(--typography-l-body-xs-letter-spacing)'\n    },\n    'BodyXS Medium': {\n      fontFamily: 'var(--typography-l-body-xs-medium-font-family)',\n      fontSize: 'var(--typography-l-body-xs-medium-font-size)',\n      lineHeight: 'var(--typography-l-body-xs-medium-line-height)',\n      fontWeight: 'var(--typography-l-body-xs-medium-font-weight)',\n      letterSpacing: 'var(--typography-l-body-xs-medium-letter-spacing)'\n    }\n  };\n  const getCssVar = variable => {\n    const strippedVar = variable.slice(4, -1);\n    return getComputedStyle(document.documentElement).getPropertyValue(strippedVar).slice(0, -3).trim();\n  };\n  return <>\n      {Object.values(styles).map((value, i) => {\n      const title = Object.getOwnPropertyNames(styles)[i];\n      let tag = 'p';\n      if (i <= 4) {\n        tag = `h${i + 1}`;\n      }\n      return <Text as={tag} style={value} {...args} key={i}>\n            {`L ${title} ${getCssVar(value.fontSize) * fontBase}px/${getCssVar(value.lineHeight) * fontBase}px\n\n            ${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `}\n            {title === 'HeadingSM Regular' && <span style={{\n          color: 'var(--color-error-default)'\n        }}>\n                DEPRECATED\n              </span>}\n          </Text>;\n    })}\n    </>;\n}",...LargeScreenCSS.parameters?.docs?.source}}};const __namedExportsOrder=["FontFamily","SmallScreen","LargeScreen","FontWeight","SmallScreenCSS","LargeScreenCSS"]},"./docs/components/Text/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{x:()=>Text_Text});__webpack_require__("./node_modules/react/index.js");var fontFamilies=__webpack_require__("./src/js/typography/fontFamilies.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Text_Text=_ref=>{let{style,children,as}=_ref;const Component=as||"span";return(0,jsx_runtime.jsx)(Component,{style:{fontFamily:fontFamilies.V.euclidCircularB,...style},children})};Text_Text.displayName="Text";try{Text_Text.displayName="Text",Text_Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/Text.tsx#Text"]={docgenInfo:Text_Text.__docgenInfo,name:"Text",path:"docs/components/Text/Text.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/Text/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/Text/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./docs/components/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{bc:()=>ColorSwatch_ColorSwatch,H4:()=>ColorSwatchGroup_ColorSwatchGroup,xv:()=>components_Text.x});__webpack_require__("./node_modules/react/index.js");var src=__webpack_require__("./src/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ColorSwatch_ColorSwatch=_ref=>{let{color,borderColor=src.Wb.colors.border.muted,textBackgroundColor=src.Wb.colors.background.default,textColor=src.Wb.colors.text.default,name,...props}=_ref;return(0,jsx_runtime.jsx)("div",{style:{height:120,backgroundColor:color,border:`1px solid ${borderColor}`,display:"flex",flexDirection:"column-reverse",borderRadius:"8px"},...props,children:(0,jsx_runtime.jsxs)("div",{style:{backgroundColor:textBackgroundColor,padding:8,borderRadius:"0 0 8px 8px"},children:[(0,jsx_runtime.jsx)("strong",{style:{display:"block",marginBottom:"8px"},children:(0,jsx_runtime.jsx)("code",{children:`${name}`})}),(0,jsx_runtime.jsx)("code",{children:`${color}`})]})})};ColorSwatch_ColorSwatch.displayName="ColorSwatch";try{ColorSwatch_ColorSwatch.displayName="ColorSwatch",ColorSwatch_ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"]={docgenInfo:ColorSwatch_ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/ColorSwatch.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatch/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/ColorSwatch/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}const ColorSwatchGroup_ColorSwatchGroup=_ref=>{let{swatchData,borderColor,textBackgroundColor,textColor}=_ref;if(!swatchData)return(0,jsx_runtime.jsx)("div",{children:"No swatch data"});const swatchColorsArr=Object.keys(swatchData);return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:swatchColorsArr.map((category=>{const colorsObj=swatchData[category];let colorsArr=[];const recursiveColors=(nextLevel,label)=>{for(const key in nextLevel){const level=nextLevel[key];level.value?colorsArr.push({label:`${label}${key}`,value:level.value,description:level.description}):recursiveColors(level,`${label}${key}.`)}};return recursiveColors(colorsObj,""),(0,jsx_runtime.jsxs)("div",{style:{fontSize:"0.875rem",fontFamily:"sans-serif",color:textColor},children:[(0,jsx_runtime.jsx)("h2",{children:category}),(0,jsx_runtime.jsx)("div",{style:{display:"grid",gap:"16px",gridTemplateColumns:"repeat(auto-fill, 300px)"},children:colorsArr.map((color=>(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(ColorSwatch_ColorSwatch,{color:color.value,name:color.label,borderColor,textBackgroundColor,textColor}),color?.description?(0,jsx_runtime.jsx)("p",{style:{lineHeight:1.3},children:color?.description}):null]},color.label)))})]},category)}))})};try{ColorSwatchGroup_ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup_ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup_ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/ColorSwatchGroup/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}var components_Text=__webpack_require__("./docs/components/Text/index.tsx");try{ColorSwatch.displayName="ColorSwatch",ColorSwatch.__docgenInfo={description:"",displayName:"ColorSwatch",props:{color:{defaultValue:null,description:"The color of the swatch",name:"color",required:!1,type:{name:"string"}},textBackgroundColor:{defaultValue:{value:"lightTheme.colors.background.default"},description:"The color of text background that contains the name of the color defaults to lightTheme.colors.background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:{value:"lightTheme.colors.border.muted"},description:"The border color of the swatch defaults to lightTheme.colors.border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:{value:"lightTheme.colors.text.default"},description:"The color of the text defaults to lightTheme.colors.text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatch"]={docgenInfo:ColorSwatch.__docgenInfo,name:"ColorSwatch",path:"docs/components/index.tsx#ColorSwatch"})}catch(__react_docgen_typescript_loader_error){}try{ColorSwatchGroup.displayName="ColorSwatchGroup",ColorSwatchGroup.__docgenInfo={description:"",displayName:"ColorSwatchGroup",props:{swatchData:{defaultValue:null,description:"The color object",name:"swatchData",required:!0,type:{name:"{ [key: string]: ColorToken; }"}},textBackgroundColor:{defaultValue:null,description:"The color of text background that contains the name of the color defaults to background.default",name:"textBackgroundColor",required:!1,type:{name:"string"}},borderColor:{defaultValue:null,description:"The border color of the swatch defaults to border.muted",name:"borderColor",required:!1,type:{name:"string"}},textColor:{defaultValue:null,description:"The color of the text defaults to text.default",name:"textColor",required:!1,type:{name:"string"}},name:{defaultValue:null,description:"The name of the color",name:"name",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#ColorSwatchGroup"]={docgenInfo:ColorSwatchGroup.__docgenInfo,name:"ColorSwatchGroup",path:"docs/components/index.tsx#ColorSwatchGroup"})}catch(__react_docgen_typescript_loader_error){}try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{children:{defaultValue:null,description:"The children or content of the Text component",name:"children",required:!1,type:{name:"ReactChild"}},as:{defaultValue:null,description:"Polymorphic prop to change the html root element of the component",name:"as",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"The style prop of the Text component",name:"style",required:!1,type:{name:"object"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/components/index.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"docs/components/index.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}}}]);
\ No newline at end of file
diff --git a/iframe.html b/iframe.html
index e2768370..8a16ff30 100644
--- a/iframe.html
+++ b/iframe.html
@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.ff7c01e1.iframe.bundle.js';
+      import './runtime~main.8406e859.iframe.bundle.js';
       
       import './173.119b43fb.iframe.bundle.js';
       
-      import './main.038d4b05.iframe.bundle.js';</script></body></html>
\ No newline at end of file
+      import './main.f080dae0.iframe.bundle.js';</script></body></html>
\ No newline at end of file
diff --git a/index.json b/index.json
index bd000147..089a8f20 100644
--- a/index.json
+++ b/index.json
@@ -1 +1 @@
-{"v":4,"entries":{"getting-started-introduction--docs":{"id":"getting-started-introduction--docs","title":"Getting Started/Introduction","name":"Docs","importPath":"./docs/Introduction.stories.mdx","type":"docs","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[]},"colors-introduction--docs":{"id":"colors-introduction--docs","title":"Colors / Introduction","name":"Docs","importPath":"./docs/IntroductionColor.stories.mdx","type":"docs","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[]},"colors-brand-colors--docs":{"id":"colors-brand-colors--docs","title":"Colors/Brand Colors","name":"Docs","importPath":"./docs/BrandColors.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"colors-brand-colors--default-story":{"type":"story","id":"colors-brand-colors--default-story","name":"Default","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"]},"colors-theme-colors--docs":{"id":"colors-theme-colors--docs","title":"Colors/Theme Colors","name":"Docs","importPath":"./docs/ThemeColors.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"colors-theme-colors--light-theme-colors":{"type":"story","id":"colors-theme-colors--light-theme-colors","name":"Light Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"]},"colors-theme-colors--dark-theme-colors":{"type":"story","id":"colors-theme-colors--dark-theme-colors","name":"Dark Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"]},"shadows-shadows--docs":{"id":"shadows-shadows--docs","title":"Shadows/Shadows","name":"Docs","importPath":"./docs/Shadows.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"shadows-shadows--default-story":{"type":"story","id":"shadows-shadows--default-story","name":"Default","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--size":{"type":"story","id":"shadows-shadows--size","name":"Size","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--color":{"type":"story","id":"shadows-shadows--color","name":"Color","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--example-usage":{"type":"story","id":"shadows-shadows--example-usage","name":"Example Usage","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"typography-typography--docs":{"id":"typography-typography--docs","title":"Typography/Typography","name":"Docs","importPath":"./docs/Typography.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"typography-typography--font-family":{"type":"story","id":"typography-typography--font-family","name":"Font Family","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--small-screen":{"type":"story","id":"typography-typography--small-screen","name":"Small Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--large-screen":{"type":"story","id":"typography-typography--large-screen","name":"Large Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--font-weight":{"type":"story","id":"typography-typography--font-weight","name":"Font Weight","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--small-screen-css":{"type":"story","id":"typography-typography--small-screen-css","name":"Small Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--large-screen-css":{"type":"story","id":"typography-typography--large-screen-css","name":"Large Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"doc-components-text--docs":{"id":"doc-components-text--docs","title":"Doc components/Text","name":"Docs","importPath":"./docs/components/Text/Text.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"doc-components-text--default-story":{"type":"story","id":"doc-components-text--default-story","name":"Default","title":"Doc components/Text","importPath":"./docs/components/Text/Text.stories.tsx","tags":["story"]}}}
+{"v":4,"entries":{"getting-started-introduction--docs":{"id":"getting-started-introduction--docs","title":"Getting Started/Introduction","name":"Docs","importPath":"./docs/Introduction.stories.mdx","type":"docs","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[]},"colors-introduction--docs":{"id":"colors-introduction--docs","title":"Colors / Introduction","name":"Docs","importPath":"./docs/IntroductionColor.stories.mdx","type":"docs","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[]},"colors-brand-colors--docs":{"id":"colors-brand-colors--docs","title":"Colors/Brand Colors","name":"Docs","importPath":"./docs/BrandColors.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"colors-brand-colors--default-story":{"type":"story","id":"colors-brand-colors--default-story","name":"Default","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"]},"colors-brand-colors--js":{"type":"story","id":"colors-brand-colors--js","name":"JS","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"]},"colors-theme-colors--docs":{"id":"colors-theme-colors--docs","title":"Colors/Theme Colors","name":"Docs","importPath":"./docs/ThemeColors.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"colors-theme-colors--light-theme-colors":{"type":"story","id":"colors-theme-colors--light-theme-colors","name":"Light Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"]},"colors-theme-colors--dark-theme-colors":{"type":"story","id":"colors-theme-colors--dark-theme-colors","name":"Dark Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"]},"shadows-shadows--docs":{"id":"shadows-shadows--docs","title":"Shadows/Shadows","name":"Docs","importPath":"./docs/Shadows.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"shadows-shadows--default-story":{"type":"story","id":"shadows-shadows--default-story","name":"Default","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--size":{"type":"story","id":"shadows-shadows--size","name":"Size","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--color":{"type":"story","id":"shadows-shadows--color","name":"Color","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"shadows-shadows--example-usage":{"type":"story","id":"shadows-shadows--example-usage","name":"Example Usage","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"]},"typography-typography--docs":{"id":"typography-typography--docs","title":"Typography/Typography","name":"Docs","importPath":"./docs/Typography.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"typography-typography--font-family":{"type":"story","id":"typography-typography--font-family","name":"Font Family","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--small-screen":{"type":"story","id":"typography-typography--small-screen","name":"Small Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--large-screen":{"type":"story","id":"typography-typography--large-screen","name":"Large Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--font-weight":{"type":"story","id":"typography-typography--font-weight","name":"Font Weight","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--small-screen-css":{"type":"story","id":"typography-typography--small-screen-css","name":"Small Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"typography-typography--large-screen-css":{"type":"story","id":"typography-typography--large-screen-css","name":"Large Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"]},"doc-components-text--docs":{"id":"doc-components-text--docs","title":"Doc components/Text","name":"Docs","importPath":"./docs/components/Text/Text.stories.tsx","type":"docs","tags":["docs","autodocs"],"storiesImports":[]},"doc-components-text--default-story":{"type":"story","id":"doc-components-text--default-story","name":"Default","title":"Doc components/Text","importPath":"./docs/components/Text/Text.stories.tsx","tags":["story"]}}}
diff --git a/main.038d4b05.iframe.bundle.js b/main.f080dae0.iframe.bundle.js
similarity index 97%
rename from main.038d4b05.iframe.bundle.js
rename to main.f080dae0.iframe.bundle.js
index f7f71afb..890f6af3 100644
--- a/main.038d4b05.iframe.bundle.js
+++ b/main.f080dae0.iframe.bundle.js
@@ -1 +1 @@
-(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[179],{"./.storybook/preview.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{parameters:()=>parameters});var injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),fonts=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./docs/fonts/fonts.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(fonts.Z,options);fonts.Z.locals;var runtime_injectStylesIntoStyleTag=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),runtime_injectStylesIntoStyleTag_default=__webpack_require__.n(runtime_injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),design_tokens=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./src/css/design-tokens.css"),design_tokens_options={};design_tokens_options.styleTagTransform=styleTagTransform_default(),design_tokens_options.setAttributes=setAttributesWithoutAttributes_default(),design_tokens_options.insert=insertBySelector_default().bind(null,"head"),design_tokens_options.domAPI=styleDomAPI_default(),design_tokens_options.insertStyleElement=insertStyleElement_default();runtime_injectStylesIntoStyleTag_default()(design_tokens.Z,design_tokens_options);design_tokens.Z&&design_tokens.Z.locals&&design_tokens.Z.locals;const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},options:{storySort:{order:["Getting Started",["Introduction"],"Colors","Shadows","Typography","Doc Components"]}}}},"./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./src/css/design-tokens.css":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"/**\n * Brand Colors\n * Do not use \"--brand-colors\" in your code\n * Instead use the \"--color-\" variables to ensure\n * theme compatible styles\n */\n\n:root {\n  --brand-colors-white-white000: #ffffff;\n  --brand-colors-white-white010: #fcfcfc;\n  --brand-colors-black-black000: #000000;\n  --brand-colors-grey-grey030: #fafbfc;\n  --brand-colors-grey-grey040: #f2f4f6;\n  --brand-colors-grey-grey100: #d6d9dc;\n  --brand-colors-grey-grey200: #bbc0c5;\n  --brand-colors-grey-grey300: #9fa6ae;\n  --brand-colors-grey-grey400: #848c96;\n  --brand-colors-grey-grey500: #6a737d;\n  --brand-colors-grey-grey600: #535a61;\n  --brand-colors-grey-grey700: #3b4046;\n  --brand-colors-grey-grey750: #2e3339;\n  --brand-colors-grey-grey800: #24272a;\n  --brand-colors-grey-grey900: #141618;\n  --brand-colors-blue-blue000: #eaf6ff;\n  --brand-colors-blue-blue100: #a7d9fe;\n  --brand-colors-blue-blue200: #75c4fd;\n  --brand-colors-blue-blue300: #43aefc;\n  --brand-colors-blue-blue400: #1098fc;\n  --brand-colors-blue-blue500: #0376c9;\n  --brand-colors-blue-blue600: #0260a4;\n  --brand-colors-blue-blue700: #024272;\n  --brand-colors-blue-blue800: #01253f;\n  --brand-colors-blue-blue900: #00080d;\n  --brand-colors-orange-orange000: #fef5ef;\n  --brand-colors-orange-orange100: #fde2cf;\n  --brand-colors-orange-orange200: #fbc49d;\n  --brand-colors-orange-orange300: #faa66c;\n  --brand-colors-orange-orange400: #f8883b;\n  --brand-colors-orange-orange500: #f66a0a;\n  --brand-colors-orange-orange600: #bf5208;\n  --brand-colors-orange-orange700: #954005;\n  --brand-colors-orange-orange800: #632b04;\n  --brand-colors-orange-orange900: #321602;\n  --brand-colors-green-green000: #f3fcf5;\n  --brand-colors-green-green100: #d6ffdf;\n  --brand-colors-green-green200: #afecbd;\n  --brand-colors-green-green300: #86e29b;\n  --brand-colors-green-green400: #5dd879;\n  --brand-colors-green-green500: #28a745;\n  --brand-colors-green-green600: #1c8234;\n  --brand-colors-green-green700: #145523;\n  --brand-colors-green-green800: #0a2c12;\n  --brand-colors-green-green900: #041007;\n  --brand-colors-red-red000: #fcf2f3;\n  --brand-colors-red-red100: #f7d5d8;\n  --brand-colors-red-red200: #f1b9be;\n  --brand-colors-red-red300: #e88f97;\n  --brand-colors-red-red400: #e06470;\n  --brand-colors-red-red500: #d73847;\n  --brand-colors-red-red600: #b92534;\n  --brand-colors-red-red700: #8e1d28;\n  --brand-colors-red-red800: #64141c;\n  --brand-colors-red-red900: #3a0c10;\n  --brand-colors-purple-purple500: #8b45b6;\n  --brand-colors-violet-violet300: #cfb5f0;\n  --brand-colors-yellow-yellow000: #fffdf8;\n  --brand-colors-yellow-yellow100: #fefcde;\n  --brand-colors-yellow-yellow200: #fff2c5;\n  --brand-colors-yellow-yellow300: #ffeaa3;\n  --brand-colors-yellow-yellow400: #ffdf70;\n  --brand-colors-yellow-yellow500: #ffd33d;\n  --brand-colors-yellow-yellow600: #ffc70a;\n  /* typography */\n  /* font family */\n  --font-family-euclid-circular-b: 'Euclid Circular B', sans-serif;\n  --font-family-roboto: 'Roboto', sans-serif;\n  --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;\n  /* font sizes */\n  --font-size-base: 16px;\n  --font-size-1: 0.625rem;\n  --font-size-2: 0.75rem;\n  --font-size-3: 0.875rem;\n  --font-size-4: 1rem;\n  --font-size-5: 1.125rem;\n  --font-size-6: 1.5rem;\n  --font-size-7: 2rem;\n  --font-size-8: 3rem;\n  /* line heights */\n  --line-height-1: 1rem;\n  --line-height-2: 1.25rem;\n  --line-height-3: 1.375rem;\n  --line-height-4: 1.5rem;\n  --line-height-5: 2rem;\n  --line-height-6: 2.5rem;\n  --line-height-7: 3.5rem;\n  /* font weights */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-bold: 700;\n  /* letter spacing */\n  --letter-spacing-0: 0;\n  --letter-spacing-1: 2.5%;\n  /* typography scale small screen */\n  --typography-s-display-md-font-family: var(--font-family-sans);\n  --typography-s-display-md-font-size: var(--font-size-7);\n  --typography-s-display-md-line-height: var(--line-height-6);\n  --typography-s-display-md-font-weight: var(--font-weight-bold);\n  --typography-s-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-lg-font-family: var(--font-family-sans);\n  --typography-s-heading-lg-font-size: var(--font-size-6);\n  --typography-s-heading-lg-line-height: var(--line-height-5);\n  --typography-s-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-md-font-family: var(--font-family-sans);\n  --typography-s-heading-md-font-size: var(--font-size-5);\n  --typography-s-heading-md-line-height: var(--line-height-4);\n  --typography-s-heading-md-font-weight: var(--font-weight-bold);\n  --typography-s-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-sm-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-font-size: var(--font-size-4);\n  --typography-s-heading-sm-line-height: var(--line-height-4);\n  --typography-s-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-s-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-regular-font-size: var(--font-size-4);\n  --typography-s-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-s-body-lg-medium-font-size: var(--font-size-4);\n  --typography-s-body-lg-medium-line-height: var(--line-height-4);\n  --typography-s-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-regular-font-family: var(--font-family-sans);\n  --typography-s-body-lg-regular-font-size: var(--font-size-4);\n  --typography-s-body-lg-regular-line-height: var(--line-height-4);\n  --typography-s-body-lg-regular-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-bold-font-family: var(--font-family-sans);\n  --typography-s-body-md-bold-font-size: var(--font-size-3);\n  --typography-s-body-md-bold-line-height: var(--line-height-3);\n  --typography-s-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-medium-font-family: var(--font-family-sans);\n  --typography-s-body-md-medium-font-size: var(--font-size-3);\n  --typography-s-body-md-medium-line-height: var(--line-height-3);\n  --typography-s-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-font-family: var(--font-family-sans);\n  --typography-s-body-md-font-size: var(--font-size-3);\n  --typography-s-body-md-line-height: var(--line-height-3);\n  --typography-s-body-md-font-weight: var(--font-weight-regular);\n  --typography-s-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-s-body-sm-bold-font-size: var(--font-size-2);\n  --typography-s-body-sm-bold-line-height: var(--line-height-2);\n  --typography-s-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-s-body-sm-medium-font-size: var(--font-size-2);\n  --typography-s-body-sm-medium-line-height: var(--line-height-2);\n  --typography-s-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-font-family: var(--font-family-sans);\n  --typography-s-body-sm-font-size: var(--font-size-2);\n  --typography-s-body-sm-line-height: var(--line-height-2);\n  --typography-s-body-sm-font-weight: var(--font-weight-regular);\n  --typography-s-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-s-body-xs-medium-font-size: var(--font-size-1);\n  --typography-s-body-xs-medium-line-height: var(--line-height-1);\n  --typography-s-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-font-family: var(--font-family-sans);\n  --typography-s-body-xs-font-size: var(--font-size-1);\n  --typography-s-body-xs-line-height: var(--line-height-1);\n  --typography-s-body-xs-font-weight: var(--font-weight-regular);\n  --typography-s-body-xs-letter-spacing: var(--letter-spacing-0);\n\n  /* typography scale large screen */\n  --typography-l-display-md-font-family: var(--font-family-sans);\n  --typography-l-display-md-font-size: var(--font-size-8);\n  --typography-l-display-md-line-height: var(--line-height-7);\n  --typography-l-display-md-font-weight: var(--font-weight-medium);\n  --typography-l-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-lg-font-family: var(--font-family-sans);\n  --typography-l-heading-lg-font-size: var(--font-size-7);\n  --typography-l-heading-lg-line-height: var(--line-height-6);\n  --typography-l-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-md-font-family: var(--font-family-sans);\n  --typography-l-heading-md-font-size: var(--font-size-6);\n  --typography-l-heading-md-line-height: var(--line-height-5);\n  --typography-l-heading-md-font-weight: var(--font-weight-bold);\n  --typography-l-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-sm-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-font-size: var(--font-size-5);\n  --typography-l-heading-sm-line-height: var(--line-height-4);\n  --typography-l-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-l-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-regular-font-size: var(--font-size-5);\n  --typography-l-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-l-body-lg-medium-font-size: var(--font-size-5);\n  --typography-l-body-lg-medium-line-height: var(--line-height-4);\n  --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-bold-font-family: var(--font-family-sans);\n  --typography-l-body-md-bold-font-size: var(--font-size-4);\n  --typography-l-body-md-bold-line-height: var(--line-height-4);\n  --typography-l-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-medium-font-family: var(--font-family-sans);\n  --typography-l-body-md-medium-font-size: var(--font-size-4);\n  --typography-l-body-md-medium-line-height: var(--line-height-4);\n  --typography-l-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-font-family: var(--font-family-sans);\n  --typography-l-body-md-font-size: var(--font-size-4);\n  --typography-l-body-md-line-height: var(--line-height-4);\n  --typography-l-body-md-font-weight: var(--font-weight-regular);\n  --typography-l-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-l-body-sm-bold-font-size: var(--font-size-3);\n  --typography-l-body-sm-bold-line-height: var(--line-height-3);\n  --typography-l-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-l-body-sm-medium-font-size: var(--font-size-3);\n  --typography-l-body-sm-medium-line-height: var(--line-height-3);\n  --typography-l-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-font-family: var(--font-family-sans);\n  --typography-l-body-sm-font-size: var(--font-size-3);\n  --typography-l-body-sm-line-height: var(--line-height-3);\n  --typography-l-body-sm-font-weight: var(--font-weight-regular);\n  --typography-l-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-l-body-xs-medium-font-size: var(--font-size-2);\n  --typography-l-body-xs-medium-line-height: var(--line-height-2);\n  --typography-l-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-font-family: var(--font-family-sans);\n  --typography-l-body-xs-font-size: var(--font-size-2);\n  --typography-l-body-xs-line-height: var(--line-height-2);\n  --typography-l-body-xs-font-weight: var(--font-weight-regular);\n  --typography-l-body-xs-letter-spacing: var(--letter-spacing-0);\n  /* shadow */\n  --shadow-size-xs: 0 2px 4px 0;\n  --shadow-size-sm: 0 2px 8px 0;\n  --shadow-size-md: 0 2px 16px 0;\n  --shadow-size-lg: 0 2px 40px 0;\n}\n\n/*\n * Light Theme Colors\n * Use these css variables in your code.\n * This will insure theme compatibility\n */\n\n:root {\n  --color-background-default: var(--brand-colors-white-white000);\n  --color-background-default-hover: #fafafa;\n  --color-background-default-pressed: #ebebeb;\n  --color-background-alternative: var(--brand-colors-grey-grey040);\n  --color-background-alternative-hover: #edeff1;\n  --color-background-alternative-pressed: #dfe0e2;\n  --color-background-hover: #00000005;\n  --color-background-pressed: #00000014;\n  --color-text-default: var(--brand-colors-grey-grey800);\n  --color-text-alternative: var(--brand-colors-grey-grey600);\n  --color-text-muted: var(--brand-colors-grey-grey200);\n  --color-icon-default: var(--brand-colors-grey-grey800);\n  --color-icon-alternative: var(--brand-colors-grey-grey500);\n  --color-icon-muted: var(--brand-colors-grey-grey200);\n  --color-border-default: var(--brand-colors-grey-grey200);\n  --color-border-muted: var(--brand-colors-grey-grey100);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-shadow-default: #0000001a;\n  --color-primary-default: var(--brand-colors-blue-blue500);\n  --color-primary-default-hover: #0379ce;\n  --color-primary-default-pressed: #036db9;\n  --color-primary-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white000);\n  --color-primary-disabled: #0376c980;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange500);\n  --color-secondary-alternative: var(--brand-colors-orange-orange600);\n  --color-secondary-muted: #f66a0a19;\n  --color-secondary-inverse: var(--brand-colors-white-white000);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-default-hover: #cd4250;\n  --color-error-default-pressed: #c63441;\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white000);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange600);\n  --color-warning-default-hover: #c2540a;\n  --color-warning-default-pressed: #a24507;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #bf520819;\n  --color-warning-inverse: var(--brand-colors-white-white000);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green600);\n  --color-success-default-hover: #208838;\n  --color-success-default-pressed: #1b7431;\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #1c823419;\n  --color-success-inverse: var(--brand-colors-white-white000);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue500);\n  --color-info-alternative: var(--brand-colors-blue-blue600);\n  --color-info-muted: #0376c919;\n  --color-info-inverse: var(--brand-colors-white-white000);\n  --color-info-disabled: #0376c980;\n  --color-network-goerli-default: var(--brand-colors-blue-blue400);\n  --color-network-goerli-inverse: var(--brand-colors-white-white010);\n  --color-network-localhost-default: var(--brand-colors-grey-grey200);\n  --color-network-localhost-inverse: var(--brand-colors-white-white010);\n  --color-network-sepolia-default: var(--brand-colors-violet-violet300);\n  --color-network-sepolia-inverse: var(--brand-colors-white-white010);\n  --color-flask-default: var(--brand-colors-purple-purple500);\n  --color-flask-inverse: var(--brand-colors-white-white010);\n\n  /* Components */\n  /* button */\n  --component-button-primary-shadow: var(--shadow-size-sm)\n    var(--color-primary-shadow);\n  --component-button-danger-shadow: var(--shadow-size-sm)\n    var(--color-error-shadow);\n}\n\n/**\n * Dark Theme Colors\n * Colors for dark theme\n */\n\n[data-theme='dark'] {\n  --color-background-default: var(--brand-colors-grey-grey800);\n  --color-background-default-hover: #282b2e;\n  --color-background-default-pressed: #36383b;\n  --color-background-alternative: var(--brand-colors-grey-grey900);\n  --color-background-alternative-hover: #191b1d;\n  --color-background-alternative-pressed: #27292a;\n  --color-background-hover: #ffffff05;\n  --color-background-pressed: #ffffff14;\n  --color-text-default: var(--brand-colors-white-white000);\n  --color-text-alternative: var(--brand-colors-grey-grey100);\n  --color-text-muted: var(--brand-colors-grey-grey400);\n  --color-icon-default: var(--brand-colors-white-white000);\n  --color-icon-alternative: var(--brand-colors-grey-grey200);\n  --color-icon-muted: var(--brand-colors-grey-grey400);\n  --color-border-default: var(--brand-colors-grey-grey400);\n  --color-border-muted: var(--brand-colors-grey-grey700);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-shadow-default: #00000080;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-primary-default: var(--brand-colors-blue-blue400);\n  --color-primary-default-hover: #0092fa;\n  --color-primary-default-pressed: #54b6fc;\n  --color-primary-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-grey-grey900);\n  --color-primary-disabled: #1098fc80;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange400);\n  --color-secondary-alternative: var(--brand-colors-orange-orange300);\n  --color-secondary-muted: #f8883b26;\n  --color-secondary-inverse: var(--brand-colors-grey-grey900);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: #ff5263;\n  --color-error-default-hover: #ff4d58;\n  --color-error-default-pressed: #f9868e;\n  --color-error-alternative: var(--brand-colors-red-red300);\n  --color-error-muted: #ff526326;\n  --color-error-inverse: var(--brand-colors-grey-grey900);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #ff526366;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\n  --color-warning-default-hover: #ffc60a;\n  --color-warning-default-pressed: #ffeaa3d1;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow400);\n  --color-warning-muted: #ffd33d26;\n  --color-warning-inverse: var(--brand-colors-grey-grey900);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-default-hover: #05b82f;\n  --color-success-default-pressed: #6aec88;\n  --color-success-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-grey-grey900);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue400);\n  --color-info-alternative: var(--brand-colors-blue-blue300);\n  --color-info-muted: #1098fc26;\n  --color-info-inverse: var(--brand-colors-grey-grey900);\n  --color-info-disabled: #0376c980;\n}\n","",{version:3,sources:["webpack://./src/css/design-tokens.css"],names:[],mappings:"AAAA;;;;;EAKE;;AAEF;EACE,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,eAAe;EACf,gBAAgB;EAChB,gEAAgE;EAChE,0CAA0C;EAC1C,6DAA6D;EAC7D,eAAe;EACf,sBAAsB;EACtB,uBAAuB;EACvB,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,qBAAqB;EACrB,wBAAwB;EACxB,yBAAyB;EACzB,uBAAuB;EACvB,qBAAqB;EACrB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,uBAAuB;EACvB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,kCAAkC;EAClC,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;;EAEjE;;;IAGE;EACF,sEAAsE;EACtE,+DAA+D;EAC/D,mEAAmE;EACnE,yEAAyE;EACzE,yEAAyE;EACzE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,mEAAmE;EACnE,4DAA4D;EAC5D,gEAAgE;EAChE,qEAAqE;EACrE,sEAAsE;EACtE,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;;EAE9D,kCAAkC;EAClC,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,gEAAgE;EAChE,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;;EAEjE;;;IAGE;EACF,sEAAsE;EACtE,+DAA+D;EAC/D,mEAAmE;EACnE,yEAAyE;EACzE,yEAAyE;EACzE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,WAAW;EACX,6BAA6B;EAC7B,6BAA6B;EAC7B,8BAA8B;EAC9B,8BAA8B;AAChC;;AAEA;;;;EAIE;;AAEF;EACE,8DAA8D;EAC9D,yCAAyC;EACzC,2CAA2C;EAC3C,gEAAgE;EAChE,6CAA6C;EAC7C,+CAA+C;EAC/C,mCAAmC;EACnC,qCAAqC;EACrC,sDAAsD;EACtD,0DAA0D;EAC1D,oDAAoD;EACpD,sDAAsD;EACtD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,sDAAsD;EACtD,kCAAkC;EAClC,sCAAsC;EACtC,2DAA2D;EAC3D,iCAAiC;EACjC,yDAAyD;EACzD,sCAAsC;EACtC,wCAAwC;EACxC,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,oCAAoC;EACpC,sCAAsC;EACtC,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,sCAAsC;EACtC,wCAAwC;EACxC,iEAAiE;EACjE,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,2DAA2D;EAC3D,sCAAsC;EACtC,wCAAwC;EACxC,+DAA+D;EAC/D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,wDAAwD;EACxD,gCAAgC;EAChC,gEAAgE;EAChE,kEAAkE;EAClE,mEAAmE;EACnE,qEAAqE;EACrE,qEAAqE;EACrE,mEAAmE;EACnE,2DAA2D;EAC3D,yDAAyD;;EAEzD,eAAe;EACf,WAAW;EACX;+BAC6B;EAC7B;6BAC2B;AAC7B;;AAEA;;;EAGE;;AAEF;EACE,4DAA4D;EAC5D,yCAAyC;EACzC,2CAA2C;EAC3C,gEAAgE;EAChE,6CAA6C;EAC7C,+CAA+C;EAC/C,mCAAmC;EACnC,qCAAqC;EACrC,wDAAwD;EACxD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,sDAAsD;EACtD,kCAAkC;EAClC,sCAAsC;EACtC,iCAAiC;EACjC,2DAA2D;EAC3D,yDAAyD;EACzD,sCAAsC;EACtC,wCAAwC;EACxC,6DAA6D;EAC7D,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,2DAA2D;EAC3D,qCAAqC;EACrC,8BAA8B;EAC9B,oCAAoC;EACpC,sCAAsC;EACtC,yDAAyD;EACzD,8BAA8B;EAC9B,uDAAuD;EACvD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,sCAAsC;EACtC,0CAA0C;EAC1C,iEAAiE;EACjE,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,2DAA2D;EAC3D,sCAAsC;EACtC,wCAAwC;EACxC,+DAA+D;EAC/D,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,sDAAsD;EACtD,gCAAgC;AAClC",sourcesContent:["/**\n * Brand Colors\n * Do not use \"--brand-colors\" in your code\n * Instead use the \"--color-\" variables to ensure\n * theme compatible styles\n */\n\n:root {\n  --brand-colors-white-white000: #ffffff;\n  --brand-colors-white-white010: #fcfcfc;\n  --brand-colors-black-black000: #000000;\n  --brand-colors-grey-grey030: #fafbfc;\n  --brand-colors-grey-grey040: #f2f4f6;\n  --brand-colors-grey-grey100: #d6d9dc;\n  --brand-colors-grey-grey200: #bbc0c5;\n  --brand-colors-grey-grey300: #9fa6ae;\n  --brand-colors-grey-grey400: #848c96;\n  --brand-colors-grey-grey500: #6a737d;\n  --brand-colors-grey-grey600: #535a61;\n  --brand-colors-grey-grey700: #3b4046;\n  --brand-colors-grey-grey750: #2e3339;\n  --brand-colors-grey-grey800: #24272a;\n  --brand-colors-grey-grey900: #141618;\n  --brand-colors-blue-blue000: #eaf6ff;\n  --brand-colors-blue-blue100: #a7d9fe;\n  --brand-colors-blue-blue200: #75c4fd;\n  --brand-colors-blue-blue300: #43aefc;\n  --brand-colors-blue-blue400: #1098fc;\n  --brand-colors-blue-blue500: #0376c9;\n  --brand-colors-blue-blue600: #0260a4;\n  --brand-colors-blue-blue700: #024272;\n  --brand-colors-blue-blue800: #01253f;\n  --brand-colors-blue-blue900: #00080d;\n  --brand-colors-orange-orange000: #fef5ef;\n  --brand-colors-orange-orange100: #fde2cf;\n  --brand-colors-orange-orange200: #fbc49d;\n  --brand-colors-orange-orange300: #faa66c;\n  --brand-colors-orange-orange400: #f8883b;\n  --brand-colors-orange-orange500: #f66a0a;\n  --brand-colors-orange-orange600: #bf5208;\n  --brand-colors-orange-orange700: #954005;\n  --brand-colors-orange-orange800: #632b04;\n  --brand-colors-orange-orange900: #321602;\n  --brand-colors-green-green000: #f3fcf5;\n  --brand-colors-green-green100: #d6ffdf;\n  --brand-colors-green-green200: #afecbd;\n  --brand-colors-green-green300: #86e29b;\n  --brand-colors-green-green400: #5dd879;\n  --brand-colors-green-green500: #28a745;\n  --brand-colors-green-green600: #1c8234;\n  --brand-colors-green-green700: #145523;\n  --brand-colors-green-green800: #0a2c12;\n  --brand-colors-green-green900: #041007;\n  --brand-colors-red-red000: #fcf2f3;\n  --brand-colors-red-red100: #f7d5d8;\n  --brand-colors-red-red200: #f1b9be;\n  --brand-colors-red-red300: #e88f97;\n  --brand-colors-red-red400: #e06470;\n  --brand-colors-red-red500: #d73847;\n  --brand-colors-red-red600: #b92534;\n  --brand-colors-red-red700: #8e1d28;\n  --brand-colors-red-red800: #64141c;\n  --brand-colors-red-red900: #3a0c10;\n  --brand-colors-purple-purple500: #8b45b6;\n  --brand-colors-violet-violet300: #cfb5f0;\n  --brand-colors-yellow-yellow000: #fffdf8;\n  --brand-colors-yellow-yellow100: #fefcde;\n  --brand-colors-yellow-yellow200: #fff2c5;\n  --brand-colors-yellow-yellow300: #ffeaa3;\n  --brand-colors-yellow-yellow400: #ffdf70;\n  --brand-colors-yellow-yellow500: #ffd33d;\n  --brand-colors-yellow-yellow600: #ffc70a;\n  /* typography */\n  /* font family */\n  --font-family-euclid-circular-b: 'Euclid Circular B', sans-serif;\n  --font-family-roboto: 'Roboto', sans-serif;\n  --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;\n  /* font sizes */\n  --font-size-base: 16px;\n  --font-size-1: 0.625rem;\n  --font-size-2: 0.75rem;\n  --font-size-3: 0.875rem;\n  --font-size-4: 1rem;\n  --font-size-5: 1.125rem;\n  --font-size-6: 1.5rem;\n  --font-size-7: 2rem;\n  --font-size-8: 3rem;\n  /* line heights */\n  --line-height-1: 1rem;\n  --line-height-2: 1.25rem;\n  --line-height-3: 1.375rem;\n  --line-height-4: 1.5rem;\n  --line-height-5: 2rem;\n  --line-height-6: 2.5rem;\n  --line-height-7: 3.5rem;\n  /* font weights */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-bold: 700;\n  /* letter spacing */\n  --letter-spacing-0: 0;\n  --letter-spacing-1: 2.5%;\n  /* typography scale small screen */\n  --typography-s-display-md-font-family: var(--font-family-sans);\n  --typography-s-display-md-font-size: var(--font-size-7);\n  --typography-s-display-md-line-height: var(--line-height-6);\n  --typography-s-display-md-font-weight: var(--font-weight-bold);\n  --typography-s-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-lg-font-family: var(--font-family-sans);\n  --typography-s-heading-lg-font-size: var(--font-size-6);\n  --typography-s-heading-lg-line-height: var(--line-height-5);\n  --typography-s-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-md-font-family: var(--font-family-sans);\n  --typography-s-heading-md-font-size: var(--font-size-5);\n  --typography-s-heading-md-line-height: var(--line-height-4);\n  --typography-s-heading-md-font-weight: var(--font-weight-bold);\n  --typography-s-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-sm-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-font-size: var(--font-size-4);\n  --typography-s-heading-sm-line-height: var(--line-height-4);\n  --typography-s-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-s-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-regular-font-size: var(--font-size-4);\n  --typography-s-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-s-body-lg-medium-font-size: var(--font-size-4);\n  --typography-s-body-lg-medium-line-height: var(--line-height-4);\n  --typography-s-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-regular-font-family: var(--font-family-sans);\n  --typography-s-body-lg-regular-font-size: var(--font-size-4);\n  --typography-s-body-lg-regular-line-height: var(--line-height-4);\n  --typography-s-body-lg-regular-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-bold-font-family: var(--font-family-sans);\n  --typography-s-body-md-bold-font-size: var(--font-size-3);\n  --typography-s-body-md-bold-line-height: var(--line-height-3);\n  --typography-s-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-medium-font-family: var(--font-family-sans);\n  --typography-s-body-md-medium-font-size: var(--font-size-3);\n  --typography-s-body-md-medium-line-height: var(--line-height-3);\n  --typography-s-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-font-family: var(--font-family-sans);\n  --typography-s-body-md-font-size: var(--font-size-3);\n  --typography-s-body-md-line-height: var(--line-height-3);\n  --typography-s-body-md-font-weight: var(--font-weight-regular);\n  --typography-s-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-s-body-sm-bold-font-size: var(--font-size-2);\n  --typography-s-body-sm-bold-line-height: var(--line-height-2);\n  --typography-s-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-s-body-sm-medium-font-size: var(--font-size-2);\n  --typography-s-body-sm-medium-line-height: var(--line-height-2);\n  --typography-s-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-font-family: var(--font-family-sans);\n  --typography-s-body-sm-font-size: var(--font-size-2);\n  --typography-s-body-sm-line-height: var(--line-height-2);\n  --typography-s-body-sm-font-weight: var(--font-weight-regular);\n  --typography-s-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-s-body-xs-medium-font-size: var(--font-size-1);\n  --typography-s-body-xs-medium-line-height: var(--line-height-1);\n  --typography-s-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-font-family: var(--font-family-sans);\n  --typography-s-body-xs-font-size: var(--font-size-1);\n  --typography-s-body-xs-line-height: var(--line-height-1);\n  --typography-s-body-xs-font-weight: var(--font-weight-regular);\n  --typography-s-body-xs-letter-spacing: var(--letter-spacing-0);\n\n  /* typography scale large screen */\n  --typography-l-display-md-font-family: var(--font-family-sans);\n  --typography-l-display-md-font-size: var(--font-size-8);\n  --typography-l-display-md-line-height: var(--line-height-7);\n  --typography-l-display-md-font-weight: var(--font-weight-medium);\n  --typography-l-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-lg-font-family: var(--font-family-sans);\n  --typography-l-heading-lg-font-size: var(--font-size-7);\n  --typography-l-heading-lg-line-height: var(--line-height-6);\n  --typography-l-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-md-font-family: var(--font-family-sans);\n  --typography-l-heading-md-font-size: var(--font-size-6);\n  --typography-l-heading-md-line-height: var(--line-height-5);\n  --typography-l-heading-md-font-weight: var(--font-weight-bold);\n  --typography-l-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-sm-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-font-size: var(--font-size-5);\n  --typography-l-heading-sm-line-height: var(--line-height-4);\n  --typography-l-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-l-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-regular-font-size: var(--font-size-5);\n  --typography-l-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-l-body-lg-medium-font-size: var(--font-size-5);\n  --typography-l-body-lg-medium-line-height: var(--line-height-4);\n  --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-bold-font-family: var(--font-family-sans);\n  --typography-l-body-md-bold-font-size: var(--font-size-4);\n  --typography-l-body-md-bold-line-height: var(--line-height-4);\n  --typography-l-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-medium-font-family: var(--font-family-sans);\n  --typography-l-body-md-medium-font-size: var(--font-size-4);\n  --typography-l-body-md-medium-line-height: var(--line-height-4);\n  --typography-l-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-font-family: var(--font-family-sans);\n  --typography-l-body-md-font-size: var(--font-size-4);\n  --typography-l-body-md-line-height: var(--line-height-4);\n  --typography-l-body-md-font-weight: var(--font-weight-regular);\n  --typography-l-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-l-body-sm-bold-font-size: var(--font-size-3);\n  --typography-l-body-sm-bold-line-height: var(--line-height-3);\n  --typography-l-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-l-body-sm-medium-font-size: var(--font-size-3);\n  --typography-l-body-sm-medium-line-height: var(--line-height-3);\n  --typography-l-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-font-family: var(--font-family-sans);\n  --typography-l-body-sm-font-size: var(--font-size-3);\n  --typography-l-body-sm-line-height: var(--line-height-3);\n  --typography-l-body-sm-font-weight: var(--font-weight-regular);\n  --typography-l-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-l-body-xs-medium-font-size: var(--font-size-2);\n  --typography-l-body-xs-medium-line-height: var(--line-height-2);\n  --typography-l-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-font-family: var(--font-family-sans);\n  --typography-l-body-xs-font-size: var(--font-size-2);\n  --typography-l-body-xs-line-height: var(--line-height-2);\n  --typography-l-body-xs-font-weight: var(--font-weight-regular);\n  --typography-l-body-xs-letter-spacing: var(--letter-spacing-0);\n  /* shadow */\n  --shadow-size-xs: 0 2px 4px 0;\n  --shadow-size-sm: 0 2px 8px 0;\n  --shadow-size-md: 0 2px 16px 0;\n  --shadow-size-lg: 0 2px 40px 0;\n}\n\n/*\n * Light Theme Colors\n * Use these css variables in your code.\n * This will insure theme compatibility\n */\n\n:root {\n  --color-background-default: var(--brand-colors-white-white000);\n  --color-background-default-hover: #fafafa;\n  --color-background-default-pressed: #ebebeb;\n  --color-background-alternative: var(--brand-colors-grey-grey040);\n  --color-background-alternative-hover: #edeff1;\n  --color-background-alternative-pressed: #dfe0e2;\n  --color-background-hover: #00000005;\n  --color-background-pressed: #00000014;\n  --color-text-default: var(--brand-colors-grey-grey800);\n  --color-text-alternative: var(--brand-colors-grey-grey600);\n  --color-text-muted: var(--brand-colors-grey-grey200);\n  --color-icon-default: var(--brand-colors-grey-grey800);\n  --color-icon-alternative: var(--brand-colors-grey-grey500);\n  --color-icon-muted: var(--brand-colors-grey-grey200);\n  --color-border-default: var(--brand-colors-grey-grey200);\n  --color-border-muted: var(--brand-colors-grey-grey100);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-shadow-default: #0000001a;\n  --color-primary-default: var(--brand-colors-blue-blue500);\n  --color-primary-default-hover: #0379ce;\n  --color-primary-default-pressed: #036db9;\n  --color-primary-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white000);\n  --color-primary-disabled: #0376c980;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange500);\n  --color-secondary-alternative: var(--brand-colors-orange-orange600);\n  --color-secondary-muted: #f66a0a19;\n  --color-secondary-inverse: var(--brand-colors-white-white000);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-default-hover: #cd4250;\n  --color-error-default-pressed: #c63441;\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white000);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange600);\n  --color-warning-default-hover: #c2540a;\n  --color-warning-default-pressed: #a24507;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #bf520819;\n  --color-warning-inverse: var(--brand-colors-white-white000);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green600);\n  --color-success-default-hover: #208838;\n  --color-success-default-pressed: #1b7431;\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #1c823419;\n  --color-success-inverse: var(--brand-colors-white-white000);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue500);\n  --color-info-alternative: var(--brand-colors-blue-blue600);\n  --color-info-muted: #0376c919;\n  --color-info-inverse: var(--brand-colors-white-white000);\n  --color-info-disabled: #0376c980;\n  --color-network-goerli-default: var(--brand-colors-blue-blue400);\n  --color-network-goerli-inverse: var(--brand-colors-white-white010);\n  --color-network-localhost-default: var(--brand-colors-grey-grey200);\n  --color-network-localhost-inverse: var(--brand-colors-white-white010);\n  --color-network-sepolia-default: var(--brand-colors-violet-violet300);\n  --color-network-sepolia-inverse: var(--brand-colors-white-white010);\n  --color-flask-default: var(--brand-colors-purple-purple500);\n  --color-flask-inverse: var(--brand-colors-white-white010);\n\n  /* Components */\n  /* button */\n  --component-button-primary-shadow: var(--shadow-size-sm)\n    var(--color-primary-shadow);\n  --component-button-danger-shadow: var(--shadow-size-sm)\n    var(--color-error-shadow);\n}\n\n/**\n * Dark Theme Colors\n * Colors for dark theme\n */\n\n[data-theme='dark'] {\n  --color-background-default: var(--brand-colors-grey-grey800);\n  --color-background-default-hover: #282b2e;\n  --color-background-default-pressed: #36383b;\n  --color-background-alternative: var(--brand-colors-grey-grey900);\n  --color-background-alternative-hover: #191b1d;\n  --color-background-alternative-pressed: #27292a;\n  --color-background-hover: #ffffff05;\n  --color-background-pressed: #ffffff14;\n  --color-text-default: var(--brand-colors-white-white000);\n  --color-text-alternative: var(--brand-colors-grey-grey100);\n  --color-text-muted: var(--brand-colors-grey-grey400);\n  --color-icon-default: var(--brand-colors-white-white000);\n  --color-icon-alternative: var(--brand-colors-grey-grey200);\n  --color-icon-muted: var(--brand-colors-grey-grey400);\n  --color-border-default: var(--brand-colors-grey-grey400);\n  --color-border-muted: var(--brand-colors-grey-grey700);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-shadow-default: #00000080;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-primary-default: var(--brand-colors-blue-blue400);\n  --color-primary-default-hover: #0092fa;\n  --color-primary-default-pressed: #54b6fc;\n  --color-primary-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-grey-grey900);\n  --color-primary-disabled: #1098fc80;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange400);\n  --color-secondary-alternative: var(--brand-colors-orange-orange300);\n  --color-secondary-muted: #f8883b26;\n  --color-secondary-inverse: var(--brand-colors-grey-grey900);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: #ff5263;\n  --color-error-default-hover: #ff4d58;\n  --color-error-default-pressed: #f9868e;\n  --color-error-alternative: var(--brand-colors-red-red300);\n  --color-error-muted: #ff526326;\n  --color-error-inverse: var(--brand-colors-grey-grey900);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #ff526366;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\n  --color-warning-default-hover: #ffc60a;\n  --color-warning-default-pressed: #ffeaa3d1;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow400);\n  --color-warning-muted: #ffd33d26;\n  --color-warning-inverse: var(--brand-colors-grey-grey900);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-default-hover: #05b82f;\n  --color-success-default-pressed: #6aec88;\n  --color-success-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-grey-grey900);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue400);\n  --color-info-alternative: var(--brand-colors-blue-blue300);\n  --color-info-muted: #1098fc26;\n  --color-info-inverse: var(--brand-colors-grey-grey900);\n  --color-info-disabled: #0376c980;\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),external_STORYBOOK_MODULE_CHANNELS_=__webpack_require__("@storybook/channels");const importers=[async path=>{if(!/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(2);return __webpack_require__("./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(2);return __webpack_require__("./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}];const channel=(0,external_STORYBOOK_MODULE_CHANNELS_.createBrowserChannel)({page:"preview"});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),"DEVELOPMENT"===external_STORYBOOK_MODULE_GLOBAL_.global.CONFIG_TYPE&&(window.__STORYBOOK_SERVER_CHANNEL__=channel);const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:async function importFn(path){for(let i=0;i<importers.length;i++){const moduleExports=await(x=()=>importers[i](path),x());if(moduleExports)return moduleExports}var x},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/react/dist/entry-preview.mjs"),__webpack_require__("./node_modules/@storybook/react/dist/entry-preview-docs.mjs"),__webpack_require__("./node_modules/@storybook/addon-links/dist/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.js"),__webpack_require__("./node_modules/@storybook/addon-a11y/dist/preview.js"),__webpack_require__("./.storybook/preview.js")])})},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./docs/fonts/fonts.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/css-loader/dist/runtime/getUrl.js"),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__),_Roboto_Roboto_Thin_ttf__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./docs/fonts/Roboto/Roboto-Thin.ttf"),_Roboto_Roboto_Light_ttf__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./docs/fonts/Roboto/Roboto-Light.ttf"),_Roboto_Roboto_Regular_ttf__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./docs/fonts/Roboto/Roboto-Regular.ttf"),_Roboto_Roboto_Medium_ttf__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./docs/fonts/Roboto/Roboto-Medium.ttf"),_Roboto_Roboto_Bold_ttf__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./docs/fonts/Roboto/Roboto-Bold.ttf"),_Roboto_Roboto_Black_ttf__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./docs/fonts/Roboto/Roboto-Black.ttf"),_Euclid_EuclidCircularB_Regular_WebXL_ttf__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf"),_Euclid_EuclidCircularB_RegularItalic_WebXL_ttf__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf"),_Euclid_EuclidCircularB_Medium_ttf__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Medium.ttf"),_Euclid_EuclidCircularB_Bold_WebXL_ttf__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf"),___CSS_LOADER_EXPORT___=_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()),___CSS_LOADER_URL_REPLACEMENT_0___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Thin_ttf__WEBPACK_IMPORTED_MODULE_3__),___CSS_LOADER_URL_REPLACEMENT_1___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Light_ttf__WEBPACK_IMPORTED_MODULE_4__),___CSS_LOADER_URL_REPLACEMENT_2___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Regular_ttf__WEBPACK_IMPORTED_MODULE_5__),___CSS_LOADER_URL_REPLACEMENT_3___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Medium_ttf__WEBPACK_IMPORTED_MODULE_6__),___CSS_LOADER_URL_REPLACEMENT_4___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Bold_ttf__WEBPACK_IMPORTED_MODULE_7__),___CSS_LOADER_URL_REPLACEMENT_5___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Black_ttf__WEBPACK_IMPORTED_MODULE_8__),___CSS_LOADER_URL_REPLACEMENT_6___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Regular_WebXL_ttf__WEBPACK_IMPORTED_MODULE_9__),___CSS_LOADER_URL_REPLACEMENT_7___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_RegularItalic_WebXL_ttf__WEBPACK_IMPORTED_MODULE_10__),___CSS_LOADER_URL_REPLACEMENT_8___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Medium_ttf__WEBPACK_IMPORTED_MODULE_11__),___CSS_LOADER_URL_REPLACEMENT_9___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Bold_WebXL_ttf__WEBPACK_IMPORTED_MODULE_12__);___CSS_LOADER_EXPORT___.push([module.id,'@font-face{font-family:"Roboto";font-style:normal;font-weight:100;src:local("Roboto Thin"),local("Roboto-Thin"),url('+___CSS_LOADER_URL_REPLACEMENT_0___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url('+___CSS_LOADER_URL_REPLACEMENT_1___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url('+___CSS_LOADER_URL_REPLACEMENT_2___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url('+___CSS_LOADER_URL_REPLACEMENT_3___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url('+___CSS_LOADER_URL_REPLACEMENT_4___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:900;src:local("Roboto Black"),local("Roboto-Black"),url('+___CSS_LOADER_URL_REPLACEMENT_5___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:400;src:url('+___CSS_LOADER_URL_REPLACEMENT_6___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:italic;font-weight:400;src:url('+___CSS_LOADER_URL_REPLACEMENT_7___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:500;src:url('+___CSS_LOADER_URL_REPLACEMENT_8___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:700;src:url('+___CSS_LOADER_URL_REPLACEMENT_9___+') format("truetype")}',"",{version:3,sources:["webpack://./docs/fonts/fonts.scss"],names:[],mappings:"AAAA,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,wGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,0GAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,sGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,4GAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,wGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,0GAAA,CAIF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA",sourcesContent:["@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 100;\n  src: local('Roboto Thin'), local('Roboto-Thin'),\n    url('Roboto/Roboto-Thin.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 300;\n  src: local('Roboto Light'), local('Roboto-Light'),\n    url('Roboto/Roboto-Light.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Roboto'), local('Roboto-Regular'),\n    url('Roboto/Roboto-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 500;\n  src: local('Roboto Medium'), local('Roboto-Medium'),\n    url('Roboto/Roboto-Medium.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Roboto Bold'), local('Roboto-Bold'),\n    url('Roboto/Roboto-Bold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 900;\n  src: local('Roboto Black'), local('Roboto-Black'),\n    url('Roboto/Roboto-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 400;\n  src: url('Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: italic;\n  font-weight: 400;\n  src: url('Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 500;\n  src: url('Euclid/EuclidCircularB-Medium.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 700;\n  src: url('Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./docs/BrandColors.stories":["./docs/BrandColors.stories.tsx",719,948,706,202],"./docs/BrandColors.stories.tsx":["./docs/BrandColors.stories.tsx",719,948,706,202],"./docs/Shadows.stories":["./docs/Shadows.stories.tsx",719,948,740],"./docs/Shadows.stories.tsx":["./docs/Shadows.stories.tsx",719,948,740],"./docs/ThemeColors.stories":["./docs/ThemeColors.stories.tsx",719,948,706,880],"./docs/ThemeColors.stories.tsx":["./docs/ThemeColors.stories.tsx",719,948,706,880],"./docs/Typography.stories":["./docs/Typography.stories.tsx",719,948,907],"./docs/Typography.stories.tsx":["./docs/Typography.stories.tsx",719,948,907],"./docs/components/Text/Text.stories":["./docs/components/Text/Text.stories.tsx",341],"./docs/components/Text/Text.stories.tsx":["./docs/components/Text/Text.stories.tsx",341]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./docs/Introduction.stories.mdx":["./docs/Introduction.stories.mdx",719,385],"./docs/IntroductionColor.stories.mdx":["./docs/IntroductionColor.stories.mdx",719,181]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackAsyncContext},"./docs/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Bold-WebXL.0caa0b1b.ttf"},"./docs/fonts/Euclid/EuclidCircularB-Medium.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Medium.04ee8a97.ttf"},"./docs/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Regular-WebXL.72f41bcc.ttf"},"./docs/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-RegularItalic-WebXL.baf24c2c.ttf"},"./docs/fonts/Roboto/Roboto-Black.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Black.07a21e85.ttf"},"./docs/fonts/Roboto/Roboto-Bold.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Bold.c13d0c4f.ttf"},"./docs/fonts/Roboto/Roboto-Light.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Light.00fc594b.ttf"},"./docs/fonts/Roboto/Roboto-Medium.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Medium.58a88fef.ttf"},"./docs/fonts/Roboto/Roboto-Regular.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Regular.d08b3cc8.ttf"},"./docs/fonts/Roboto/Roboto-Thin.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Thin.59115760.ttf"},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/global":module=>{"use strict";module.exports=__STORYBOOK_MODULE_GLOBAL__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__}},__webpack_require__=>{__webpack_require__.O(0,[173],(()=>{return moduleId="./storybook-config-entry.js",__webpack_require__(__webpack_require__.s=moduleId);var moduleId}));__webpack_require__.O()}]);
\ No newline at end of file
+(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[179],{"./.storybook/preview.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{parameters:()=>parameters});var injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),fonts=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./docs/fonts/fonts.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(fonts.Z,options);fonts.Z.locals;var runtime_injectStylesIntoStyleTag=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),runtime_injectStylesIntoStyleTag_default=__webpack_require__.n(runtime_injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),design_tokens=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./src/css/design-tokens.css"),design_tokens_options={};design_tokens_options.styleTagTransform=styleTagTransform_default(),design_tokens_options.setAttributes=setAttributesWithoutAttributes_default(),design_tokens_options.insert=insertBySelector_default().bind(null,"head"),design_tokens_options.domAPI=styleDomAPI_default(),design_tokens_options.insertStyleElement=insertStyleElement_default();runtime_injectStylesIntoStyleTag_default()(design_tokens.Z,design_tokens_options);design_tokens.Z&&design_tokens.Z.locals&&design_tokens.Z.locals;const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},options:{storySort:{order:["Getting Started",["Introduction"],"Colors","Shadows","Typography","Doc Components"]}}}},"./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./src/css/design-tokens.css":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_storybook_builder_webpack5_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"/**\n * Brand Colors\n * Do not use \"--brand-colors\" in your code\n * Instead use the \"--color-\" variables to ensure\n * theme compatible styles\n */\n\n:root {\n  --brand-colors-white-white000: #ffffff;\n  --brand-colors-white-white010: #fcfcfc;\n  --brand-colors-black-black000: #000000;\n  --brand-colors-grey-grey030: #fafbfc;\n  --brand-colors-grey-grey040: #f2f4f6;\n  --brand-colors-grey-grey100: #d6d9dc;\n  --brand-colors-grey-grey200: #bbc0c5;\n  --brand-colors-grey-grey300: #9fa6ae;\n  --brand-colors-grey-grey400: #848c96;\n  --brand-colors-grey-grey500: #6a737d;\n  --brand-colors-grey-grey600: #535a61;\n  --brand-colors-grey-grey700: #3b4046;\n  --brand-colors-grey-grey750: #2e3339;\n  --brand-colors-grey-grey800: #24272a;\n  --brand-colors-grey-grey900: #141618;\n  --brand-colors-blue-blue000: #eaf6ff;\n  --brand-colors-blue-blue100: #a7d9fe;\n  --brand-colors-blue-blue200: #75c4fd;\n  --brand-colors-blue-blue300: #43aefc;\n  --brand-colors-blue-blue400: #1098fc;\n  --brand-colors-blue-blue500: #0376c9;\n  --brand-colors-blue-blue600: #0260a4;\n  --brand-colors-blue-blue700: #024272;\n  --brand-colors-blue-blue800: #01253f;\n  --brand-colors-blue-blue900: #00080d;\n  --brand-colors-orange-orange000: #fef5ef;\n  --brand-colors-orange-orange100: #fde2cf;\n  --brand-colors-orange-orange200: #fbc49d;\n  --brand-colors-orange-orange300: #faa66c;\n  --brand-colors-orange-orange400: #f8883b;\n  --brand-colors-orange-orange500: #f66a0a;\n  --brand-colors-orange-orange600: #bf5208;\n  --brand-colors-orange-orange700: #954005;\n  --brand-colors-orange-orange800: #632b04;\n  --brand-colors-orange-orange900: #321602;\n  --brand-colors-green-green000: #f3fcf5;\n  --brand-colors-green-green100: #d6ffdf;\n  --brand-colors-green-green200: #afecbd;\n  --brand-colors-green-green300: #86e29b;\n  --brand-colors-green-green400: #5dd879;\n  --brand-colors-green-green500: #28a745;\n  --brand-colors-green-green600: #1c8234;\n  --brand-colors-green-green700: #145523;\n  --brand-colors-green-green800: #0a2c12;\n  --brand-colors-green-green900: #041007;\n  --brand-colors-red-red000: #fcf2f3;\n  --brand-colors-red-red100: #f7d5d8;\n  --brand-colors-red-red200: #f1b9be;\n  --brand-colors-red-red300: #e88f97;\n  --brand-colors-red-red400: #e06470;\n  --brand-colors-red-red500: #d73847;\n  --brand-colors-red-red600: #b92534;\n  --brand-colors-red-red700: #8e1d28;\n  --brand-colors-red-red800: #64141c;\n  --brand-colors-red-red900: #3a0c10;\n  --brand-colors-purple-purple500: #8b45b6;\n  --brand-colors-violet-violet300: #cfb5f0;\n  --brand-colors-yellow-yellow000: #fffdf8;\n  --brand-colors-yellow-yellow100: #fefcde;\n  --brand-colors-yellow-yellow200: #fff2c5;\n  --brand-colors-yellow-yellow300: #ffeaa3;\n  --brand-colors-yellow-yellow400: #ffdf70;\n  --brand-colors-yellow-yellow500: #ffd33d;\n  --brand-colors-yellow-yellow600: #ffc70a;\n  /* typography */\n  /* font family */\n  --font-family-euclid-circular-b: 'Euclid Circular B', sans-serif;\n  --font-family-roboto: 'Roboto', sans-serif;\n  --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;\n  /* font sizes */\n  --font-size-base: 16px;\n  --font-size-1: 0.625rem;\n  --font-size-2: 0.75rem;\n  --font-size-3: 0.875rem;\n  --font-size-4: 1rem;\n  --font-size-5: 1.125rem;\n  --font-size-6: 1.5rem;\n  --font-size-7: 2rem;\n  --font-size-8: 3rem;\n  /* line heights */\n  --line-height-1: 1rem;\n  --line-height-2: 1.25rem;\n  --line-height-3: 1.375rem;\n  --line-height-4: 1.5rem;\n  --line-height-5: 2rem;\n  --line-height-6: 2.5rem;\n  --line-height-7: 3.5rem;\n  /* font weights */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-bold: 700;\n  /* letter spacing */\n  --letter-spacing-0: 0;\n  --letter-spacing-1: 2.5%;\n  /* typography scale small screen */\n  --typography-s-display-md-font-family: var(--font-family-sans);\n  --typography-s-display-md-font-size: var(--font-size-7);\n  --typography-s-display-md-line-height: var(--line-height-6);\n  --typography-s-display-md-font-weight: var(--font-weight-bold);\n  --typography-s-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-lg-font-family: var(--font-family-sans);\n  --typography-s-heading-lg-font-size: var(--font-size-6);\n  --typography-s-heading-lg-line-height: var(--line-height-5);\n  --typography-s-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-md-font-family: var(--font-family-sans);\n  --typography-s-heading-md-font-size: var(--font-size-5);\n  --typography-s-heading-md-line-height: var(--line-height-4);\n  --typography-s-heading-md-font-weight: var(--font-weight-bold);\n  --typography-s-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-sm-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-font-size: var(--font-size-4);\n  --typography-s-heading-sm-line-height: var(--line-height-4);\n  --typography-s-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-s-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-regular-font-size: var(--font-size-4);\n  --typography-s-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-s-body-lg-medium-font-size: var(--font-size-4);\n  --typography-s-body-lg-medium-line-height: var(--line-height-4);\n  --typography-s-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-regular-font-family: var(--font-family-sans);\n  --typography-s-body-lg-regular-font-size: var(--font-size-4);\n  --typography-s-body-lg-regular-line-height: var(--line-height-4);\n  --typography-s-body-lg-regular-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-bold-font-family: var(--font-family-sans);\n  --typography-s-body-md-bold-font-size: var(--font-size-3);\n  --typography-s-body-md-bold-line-height: var(--line-height-3);\n  --typography-s-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-medium-font-family: var(--font-family-sans);\n  --typography-s-body-md-medium-font-size: var(--font-size-3);\n  --typography-s-body-md-medium-line-height: var(--line-height-3);\n  --typography-s-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-font-family: var(--font-family-sans);\n  --typography-s-body-md-font-size: var(--font-size-3);\n  --typography-s-body-md-line-height: var(--line-height-3);\n  --typography-s-body-md-font-weight: var(--font-weight-regular);\n  --typography-s-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-s-body-sm-bold-font-size: var(--font-size-2);\n  --typography-s-body-sm-bold-line-height: var(--line-height-2);\n  --typography-s-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-s-body-sm-medium-font-size: var(--font-size-2);\n  --typography-s-body-sm-medium-line-height: var(--line-height-2);\n  --typography-s-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-font-family: var(--font-family-sans);\n  --typography-s-body-sm-font-size: var(--font-size-2);\n  --typography-s-body-sm-line-height: var(--line-height-2);\n  --typography-s-body-sm-font-weight: var(--font-weight-regular);\n  --typography-s-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-s-body-xs-medium-font-size: var(--font-size-1);\n  --typography-s-body-xs-medium-line-height: var(--line-height-1);\n  --typography-s-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-font-family: var(--font-family-sans);\n  --typography-s-body-xs-font-size: var(--font-size-1);\n  --typography-s-body-xs-line-height: var(--line-height-1);\n  --typography-s-body-xs-font-weight: var(--font-weight-regular);\n  --typography-s-body-xs-letter-spacing: var(--letter-spacing-0);\n\n  /* typography scale large screen */\n  --typography-l-display-md-font-family: var(--font-family-sans);\n  --typography-l-display-md-font-size: var(--font-size-8);\n  --typography-l-display-md-line-height: var(--line-height-7);\n  --typography-l-display-md-font-weight: var(--font-weight-medium);\n  --typography-l-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-lg-font-family: var(--font-family-sans);\n  --typography-l-heading-lg-font-size: var(--font-size-7);\n  --typography-l-heading-lg-line-height: var(--line-height-6);\n  --typography-l-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-md-font-family: var(--font-family-sans);\n  --typography-l-heading-md-font-size: var(--font-size-6);\n  --typography-l-heading-md-line-height: var(--line-height-5);\n  --typography-l-heading-md-font-weight: var(--font-weight-bold);\n  --typography-l-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-sm-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-font-size: var(--font-size-5);\n  --typography-l-heading-sm-line-height: var(--line-height-4);\n  --typography-l-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-l-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-regular-font-size: var(--font-size-5);\n  --typography-l-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-l-body-lg-medium-font-size: var(--font-size-5);\n  --typography-l-body-lg-medium-line-height: var(--line-height-4);\n  --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-bold-font-family: var(--font-family-sans);\n  --typography-l-body-md-bold-font-size: var(--font-size-4);\n  --typography-l-body-md-bold-line-height: var(--line-height-4);\n  --typography-l-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-medium-font-family: var(--font-family-sans);\n  --typography-l-body-md-medium-font-size: var(--font-size-4);\n  --typography-l-body-md-medium-line-height: var(--line-height-4);\n  --typography-l-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-font-family: var(--font-family-sans);\n  --typography-l-body-md-font-size: var(--font-size-4);\n  --typography-l-body-md-line-height: var(--line-height-4);\n  --typography-l-body-md-font-weight: var(--font-weight-regular);\n  --typography-l-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-l-body-sm-bold-font-size: var(--font-size-3);\n  --typography-l-body-sm-bold-line-height: var(--line-height-3);\n  --typography-l-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-l-body-sm-medium-font-size: var(--font-size-3);\n  --typography-l-body-sm-medium-line-height: var(--line-height-3);\n  --typography-l-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-font-family: var(--font-family-sans);\n  --typography-l-body-sm-font-size: var(--font-size-3);\n  --typography-l-body-sm-line-height: var(--line-height-3);\n  --typography-l-body-sm-font-weight: var(--font-weight-regular);\n  --typography-l-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-l-body-xs-medium-font-size: var(--font-size-2);\n  --typography-l-body-xs-medium-line-height: var(--line-height-2);\n  --typography-l-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-font-family: var(--font-family-sans);\n  --typography-l-body-xs-font-size: var(--font-size-2);\n  --typography-l-body-xs-line-height: var(--line-height-2);\n  --typography-l-body-xs-font-weight: var(--font-weight-regular);\n  --typography-l-body-xs-letter-spacing: var(--letter-spacing-0);\n  /* shadow */\n  --shadow-size-xs: 0 2px 4px 0;\n  --shadow-size-sm: 0 2px 8px 0;\n  --shadow-size-md: 0 2px 16px 0;\n  --shadow-size-lg: 0 2px 40px 0;\n}\n\n/*\n * Light Theme Colors\n * Use these css variables in your code.\n * This will insure theme compatibility\n */\n\n:root {\n  --color-background-default: var(--brand-colors-white-white000);\n  --color-background-default-hover: #fafafa;\n  --color-background-default-pressed: #ebebeb;\n  --color-background-alternative: var(--brand-colors-grey-grey040);\n  --color-background-alternative-hover: #edeff1;\n  --color-background-alternative-pressed: #dfe0e2;\n  --color-background-hover: #00000005;\n  --color-background-pressed: #00000014;\n  --color-text-default: var(--brand-colors-grey-grey800);\n  --color-text-alternative: var(--brand-colors-grey-grey600);\n  --color-text-muted: var(--brand-colors-grey-grey200);\n  --color-icon-default: var(--brand-colors-grey-grey800);\n  --color-icon-alternative: var(--brand-colors-grey-grey500);\n  --color-icon-muted: var(--brand-colors-grey-grey200);\n  --color-border-default: var(--brand-colors-grey-grey200);\n  --color-border-muted: var(--brand-colors-grey-grey100);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-shadow-default: #0000001a;\n  --color-primary-default: var(--brand-colors-blue-blue500);\n  --color-primary-default-hover: #0379ce;\n  --color-primary-default-pressed: #036db9;\n  --color-primary-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white000);\n  --color-primary-disabled: #0376c980;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange500);\n  --color-secondary-alternative: var(--brand-colors-orange-orange600);\n  --color-secondary-muted: #f66a0a19;\n  --color-secondary-inverse: var(--brand-colors-white-white000);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-default-hover: #cd4250;\n  --color-error-default-pressed: #c63441;\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white000);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange600);\n  --color-warning-default-hover: #c2540a;\n  --color-warning-default-pressed: #a24507;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #bf520819;\n  --color-warning-inverse: var(--brand-colors-white-white000);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green600);\n  --color-success-default-hover: #208838;\n  --color-success-default-pressed: #1b7431;\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #1c823419;\n  --color-success-inverse: var(--brand-colors-white-white000);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue500);\n  --color-info-alternative: var(--brand-colors-blue-blue600);\n  --color-info-muted: #0376c919;\n  --color-info-inverse: var(--brand-colors-white-white000);\n  --color-info-disabled: #0376c980;\n  --color-network-goerli-default: var(--brand-colors-blue-blue400);\n  --color-network-goerli-inverse: var(--brand-colors-white-white010);\n  --color-network-localhost-default: var(--brand-colors-grey-grey200);\n  --color-network-localhost-inverse: var(--brand-colors-white-white010);\n  --color-network-sepolia-default: var(--brand-colors-violet-violet300);\n  --color-network-sepolia-inverse: var(--brand-colors-white-white010);\n  --color-flask-default: var(--brand-colors-purple-purple500);\n  --color-flask-inverse: var(--brand-colors-white-white010);\n\n  /* Components */\n  /* button */\n  --component-button-primary-shadow: var(--shadow-size-sm)\n    var(--color-primary-shadow);\n  --component-button-danger-shadow: var(--shadow-size-sm)\n    var(--color-error-shadow);\n}\n\n/**\n * Dark Theme Colors\n * Colors for dark theme\n */\n\n[data-theme='dark'] {\n  --color-background-default: var(--brand-colors-grey-grey800);\n  --color-background-default-hover: #282b2e;\n  --color-background-default-pressed: #36383b;\n  --color-background-alternative: var(--brand-colors-grey-grey900);\n  --color-background-alternative-hover: #191b1d;\n  --color-background-alternative-pressed: #27292a;\n  --color-background-hover: #ffffff05;\n  --color-background-pressed: #ffffff14;\n  --color-text-default: var(--brand-colors-white-white000);\n  --color-text-alternative: var(--brand-colors-grey-grey100);\n  --color-text-muted: var(--brand-colors-grey-grey400);\n  --color-icon-default: var(--brand-colors-white-white000);\n  --color-icon-alternative: var(--brand-colors-grey-grey200);\n  --color-icon-muted: var(--brand-colors-grey-grey400);\n  --color-border-default: var(--brand-colors-grey-grey400);\n  --color-border-muted: var(--brand-colors-grey-grey700);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-shadow-default: #00000080;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-primary-default: var(--brand-colors-blue-blue400);\n  --color-primary-default-hover: #0092fa;\n  --color-primary-default-pressed: #54b6fc;\n  --color-primary-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-grey-grey900);\n  --color-primary-disabled: #1098fc80;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange400);\n  --color-secondary-alternative: var(--brand-colors-orange-orange300);\n  --color-secondary-muted: #f8883b26;\n  --color-secondary-inverse: var(--brand-colors-grey-grey900);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: #ff5263;\n  --color-error-default-hover: #ff4d58;\n  --color-error-default-pressed: #f9868e;\n  --color-error-alternative: var(--brand-colors-red-red300);\n  --color-error-muted: #ff526326;\n  --color-error-inverse: var(--brand-colors-grey-grey900);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #ff526366;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\n  --color-warning-default-hover: #ffc60a;\n  --color-warning-default-pressed: #ffeaa3d1;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow400);\n  --color-warning-muted: #ffd33d26;\n  --color-warning-inverse: var(--brand-colors-grey-grey900);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-default-hover: #05b82f;\n  --color-success-default-pressed: #6aec88;\n  --color-success-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-grey-grey900);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue400);\n  --color-info-alternative: var(--brand-colors-blue-blue300);\n  --color-info-muted: #1098fc26;\n  --color-info-inverse: var(--brand-colors-grey-grey900);\n  --color-info-disabled: #0376c980;\n}\n","",{version:3,sources:["webpack://./src/css/design-tokens.css"],names:[],mappings:"AAAA;;;;;EAKE;;AAEF;EACE,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,oCAAoC;EACpC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,wCAAwC;EACxC,eAAe;EACf,gBAAgB;EAChB,gEAAgE;EAChE,0CAA0C;EAC1C,6DAA6D;EAC7D,eAAe;EACf,sBAAsB;EACtB,uBAAuB;EACvB,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,qBAAqB;EACrB,wBAAwB;EACxB,yBAAyB;EACzB,uBAAuB;EACvB,qBAAqB;EACrB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,uBAAuB;EACvB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,kCAAkC;EAClC,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;;EAEjE;;;IAGE;EACF,sEAAsE;EACtE,+DAA+D;EAC/D,mEAAmE;EACnE,yEAAyE;EACzE,yEAAyE;EACzE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,mEAAmE;EACnE,4DAA4D;EAC5D,gEAAgE;EAChE,qEAAqE;EACrE,sEAAsE;EACtE,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;;EAE9D,kCAAkC;EAClC,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,gEAAgE;EAChE,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;EACjE,8DAA8D;EAC9D,uDAAuD;EACvD,2DAA2D;EAC3D,8DAA8D;EAC9D,iEAAiE;;EAEjE;;;IAGE;EACF,sEAAsE;EACtE,+DAA+D;EAC/D,mEAAmE;EACnE,yEAAyE;EACzE,yEAAyE;EACzE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,gEAAgE;EAChE,yDAAyD;EACzD,6DAA6D;EAC7D,gEAAgE;EAChE,mEAAmE;EACnE,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,kEAAkE;EAClE,2DAA2D;EAC3D,+DAA+D;EAC/D,oEAAoE;EACpE,qEAAqE;EACrE,2DAA2D;EAC3D,oDAAoD;EACpD,wDAAwD;EACxD,8DAA8D;EAC9D,8DAA8D;EAC9D,WAAW;EACX,6BAA6B;EAC7B,6BAA6B;EAC7B,8BAA8B;EAC9B,8BAA8B;AAChC;;AAEA;;;;EAIE;;AAEF;EACE,8DAA8D;EAC9D,yCAAyC;EACzC,2CAA2C;EAC3C,gEAAgE;EAChE,6CAA6C;EAC7C,+CAA+C;EAC/C,mCAAmC;EACnC,qCAAqC;EACrC,sDAAsD;EACtD,0DAA0D;EAC1D,oDAAoD;EACpD,sDAAsD;EACtD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,sDAAsD;EACtD,kCAAkC;EAClC,sCAAsC;EACtC,2DAA2D;EAC3D,iCAAiC;EACjC,yDAAyD;EACzD,sCAAsC;EACtC,wCAAwC;EACxC,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,oCAAoC;EACpC,sCAAsC;EACtC,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,sCAAsC;EACtC,wCAAwC;EACxC,iEAAiE;EACjE,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,2DAA2D;EAC3D,sCAAsC;EACtC,wCAAwC;EACxC,+DAA+D;EAC/D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,wDAAwD;EACxD,gCAAgC;EAChC,gEAAgE;EAChE,kEAAkE;EAClE,mEAAmE;EACnE,qEAAqE;EACrE,qEAAqE;EACrE,mEAAmE;EACnE,2DAA2D;EAC3D,yDAAyD;;EAEzD,eAAe;EACf,WAAW;EACX;+BAC6B;EAC7B;6BAC2B;AAC7B;;AAEA;;;EAGE;;AAEF;EACE,4DAA4D;EAC5D,yCAAyC;EACzC,2CAA2C;EAC3C,gEAAgE;EAChE,6CAA6C;EAC7C,+CAA+C;EAC/C,mCAAmC;EACnC,qCAAqC;EACrC,wDAAwD;EACxD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,0DAA0D;EAC1D,oDAAoD;EACpD,wDAAwD;EACxD,sDAAsD;EACtD,kCAAkC;EAClC,sCAAsC;EACtC,iCAAiC;EACjC,2DAA2D;EAC3D,yDAAyD;EACzD,sCAAsC;EACtC,wCAAwC;EACxC,6DAA6D;EAC7D,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,2DAA2D;EAC3D,qCAAqC;EACrC,8BAA8B;EAC9B,oCAAoC;EACpC,sCAAsC;EACtC,yDAAyD;EACzD,8BAA8B;EAC9B,uDAAuD;EACvD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,sCAAsC;EACtC,0CAA0C;EAC1C,iEAAiE;EACjE,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,2DAA2D;EAC3D,sCAAsC;EACtC,wCAAwC;EACxC,+DAA+D;EAC/D,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,sDAAsD;EACtD,gCAAgC;AAClC",sourcesContent:["/**\n * Brand Colors\n * Do not use \"--brand-colors\" in your code\n * Instead use the \"--color-\" variables to ensure\n * theme compatible styles\n */\n\n:root {\n  --brand-colors-white-white000: #ffffff;\n  --brand-colors-white-white010: #fcfcfc;\n  --brand-colors-black-black000: #000000;\n  --brand-colors-grey-grey030: #fafbfc;\n  --brand-colors-grey-grey040: #f2f4f6;\n  --brand-colors-grey-grey100: #d6d9dc;\n  --brand-colors-grey-grey200: #bbc0c5;\n  --brand-colors-grey-grey300: #9fa6ae;\n  --brand-colors-grey-grey400: #848c96;\n  --brand-colors-grey-grey500: #6a737d;\n  --brand-colors-grey-grey600: #535a61;\n  --brand-colors-grey-grey700: #3b4046;\n  --brand-colors-grey-grey750: #2e3339;\n  --brand-colors-grey-grey800: #24272a;\n  --brand-colors-grey-grey900: #141618;\n  --brand-colors-blue-blue000: #eaf6ff;\n  --brand-colors-blue-blue100: #a7d9fe;\n  --brand-colors-blue-blue200: #75c4fd;\n  --brand-colors-blue-blue300: #43aefc;\n  --brand-colors-blue-blue400: #1098fc;\n  --brand-colors-blue-blue500: #0376c9;\n  --brand-colors-blue-blue600: #0260a4;\n  --brand-colors-blue-blue700: #024272;\n  --brand-colors-blue-blue800: #01253f;\n  --brand-colors-blue-blue900: #00080d;\n  --brand-colors-orange-orange000: #fef5ef;\n  --brand-colors-orange-orange100: #fde2cf;\n  --brand-colors-orange-orange200: #fbc49d;\n  --brand-colors-orange-orange300: #faa66c;\n  --brand-colors-orange-orange400: #f8883b;\n  --brand-colors-orange-orange500: #f66a0a;\n  --brand-colors-orange-orange600: #bf5208;\n  --brand-colors-orange-orange700: #954005;\n  --brand-colors-orange-orange800: #632b04;\n  --brand-colors-orange-orange900: #321602;\n  --brand-colors-green-green000: #f3fcf5;\n  --brand-colors-green-green100: #d6ffdf;\n  --brand-colors-green-green200: #afecbd;\n  --brand-colors-green-green300: #86e29b;\n  --brand-colors-green-green400: #5dd879;\n  --brand-colors-green-green500: #28a745;\n  --brand-colors-green-green600: #1c8234;\n  --brand-colors-green-green700: #145523;\n  --brand-colors-green-green800: #0a2c12;\n  --brand-colors-green-green900: #041007;\n  --brand-colors-red-red000: #fcf2f3;\n  --brand-colors-red-red100: #f7d5d8;\n  --brand-colors-red-red200: #f1b9be;\n  --brand-colors-red-red300: #e88f97;\n  --brand-colors-red-red400: #e06470;\n  --brand-colors-red-red500: #d73847;\n  --brand-colors-red-red600: #b92534;\n  --brand-colors-red-red700: #8e1d28;\n  --brand-colors-red-red800: #64141c;\n  --brand-colors-red-red900: #3a0c10;\n  --brand-colors-purple-purple500: #8b45b6;\n  --brand-colors-violet-violet300: #cfb5f0;\n  --brand-colors-yellow-yellow000: #fffdf8;\n  --brand-colors-yellow-yellow100: #fefcde;\n  --brand-colors-yellow-yellow200: #fff2c5;\n  --brand-colors-yellow-yellow300: #ffeaa3;\n  --brand-colors-yellow-yellow400: #ffdf70;\n  --brand-colors-yellow-yellow500: #ffd33d;\n  --brand-colors-yellow-yellow600: #ffc70a;\n  /* typography */\n  /* font family */\n  --font-family-euclid-circular-b: 'Euclid Circular B', sans-serif;\n  --font-family-roboto: 'Roboto', sans-serif;\n  --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;\n  /* font sizes */\n  --font-size-base: 16px;\n  --font-size-1: 0.625rem;\n  --font-size-2: 0.75rem;\n  --font-size-3: 0.875rem;\n  --font-size-4: 1rem;\n  --font-size-5: 1.125rem;\n  --font-size-6: 1.5rem;\n  --font-size-7: 2rem;\n  --font-size-8: 3rem;\n  /* line heights */\n  --line-height-1: 1rem;\n  --line-height-2: 1.25rem;\n  --line-height-3: 1.375rem;\n  --line-height-4: 1.5rem;\n  --line-height-5: 2rem;\n  --line-height-6: 2.5rem;\n  --line-height-7: 3.5rem;\n  /* font weights */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-bold: 700;\n  /* letter spacing */\n  --letter-spacing-0: 0;\n  --letter-spacing-1: 2.5%;\n  /* typography scale small screen */\n  --typography-s-display-md-font-family: var(--font-family-sans);\n  --typography-s-display-md-font-size: var(--font-size-7);\n  --typography-s-display-md-line-height: var(--line-height-6);\n  --typography-s-display-md-font-weight: var(--font-weight-bold);\n  --typography-s-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-lg-font-family: var(--font-family-sans);\n  --typography-s-heading-lg-font-size: var(--font-size-6);\n  --typography-s-heading-lg-line-height: var(--line-height-5);\n  --typography-s-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-md-font-family: var(--font-family-sans);\n  --typography-s-heading-md-font-size: var(--font-size-5);\n  --typography-s-heading-md-line-height: var(--line-height-4);\n  --typography-s-heading-md-font-weight: var(--font-weight-bold);\n  --typography-s-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-heading-sm-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-font-size: var(--font-size-4);\n  --typography-s-heading-sm-line-height: var(--line-height-4);\n  --typography-s-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-s-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-s-heading-sm-regular-font-size: var(--font-size-4);\n  --typography-s-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-s-body-lg-medium-font-size: var(--font-size-4);\n  --typography-s-body-lg-medium-line-height: var(--line-height-4);\n  --typography-s-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-lg-regular-font-family: var(--font-family-sans);\n  --typography-s-body-lg-regular-font-size: var(--font-size-4);\n  --typography-s-body-lg-regular-line-height: var(--line-height-4);\n  --typography-s-body-lg-regular-font-weight: var(--font-weight-medium);\n  --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-bold-font-family: var(--font-family-sans);\n  --typography-s-body-md-bold-font-size: var(--font-size-3);\n  --typography-s-body-md-bold-line-height: var(--line-height-3);\n  --typography-s-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-medium-font-family: var(--font-family-sans);\n  --typography-s-body-md-medium-font-size: var(--font-size-3);\n  --typography-s-body-md-medium-line-height: var(--line-height-3);\n  --typography-s-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-md-font-family: var(--font-family-sans);\n  --typography-s-body-md-font-size: var(--font-size-3);\n  --typography-s-body-md-line-height: var(--line-height-3);\n  --typography-s-body-md-font-weight: var(--font-weight-regular);\n  --typography-s-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-s-body-sm-bold-font-size: var(--font-size-2);\n  --typography-s-body-sm-bold-line-height: var(--line-height-2);\n  --typography-s-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-s-body-sm-medium-font-size: var(--font-size-2);\n  --typography-s-body-sm-medium-line-height: var(--line-height-2);\n  --typography-s-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-sm-font-family: var(--font-family-sans);\n  --typography-s-body-sm-font-size: var(--font-size-2);\n  --typography-s-body-sm-line-height: var(--line-height-2);\n  --typography-s-body-sm-font-weight: var(--font-weight-regular);\n  --typography-s-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-s-body-xs-medium-font-size: var(--font-size-1);\n  --typography-s-body-xs-medium-line-height: var(--line-height-1);\n  --typography-s-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-s-body-xs-font-family: var(--font-family-sans);\n  --typography-s-body-xs-font-size: var(--font-size-1);\n  --typography-s-body-xs-line-height: var(--line-height-1);\n  --typography-s-body-xs-font-weight: var(--font-weight-regular);\n  --typography-s-body-xs-letter-spacing: var(--letter-spacing-0);\n\n  /* typography scale large screen */\n  --typography-l-display-md-font-family: var(--font-family-sans);\n  --typography-l-display-md-font-size: var(--font-size-8);\n  --typography-l-display-md-line-height: var(--line-height-7);\n  --typography-l-display-md-font-weight: var(--font-weight-medium);\n  --typography-l-display-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-lg-font-family: var(--font-family-sans);\n  --typography-l-heading-lg-font-size: var(--font-size-7);\n  --typography-l-heading-lg-line-height: var(--line-height-6);\n  --typography-l-heading-lg-font-weight: var(--font-weight-bold);\n  --typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-md-font-family: var(--font-family-sans);\n  --typography-l-heading-md-font-size: var(--font-size-6);\n  --typography-l-heading-md-line-height: var(--line-height-5);\n  --typography-l-heading-md-font-weight: var(--font-weight-bold);\n  --typography-l-heading-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-heading-sm-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-font-size: var(--font-size-5);\n  --typography-l-heading-sm-line-height: var(--line-height-4);\n  --typography-l-heading-sm-font-weight: var(--font-weight-bold);\n  --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);\n\n  /**\n   * @deprecated [#1] since version 1.9 [#2].\n   * [#3] Will be deleted in version 2.0.\n   */\n  --typography-l-heading-sm-regular-font-family: var(--font-family-sans);\n  --typography-l-heading-sm-regular-font-size: var(--font-size-5);\n  --typography-l-heading-sm-regular-line-height: var(--line-height-4);\n  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);\n  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-lg-medium-font-family: var(--font-family-sans);\n  --typography-l-body-lg-medium-font-size: var(--font-size-5);\n  --typography-l-body-lg-medium-line-height: var(--line-height-4);\n  --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-bold-font-family: var(--font-family-sans);\n  --typography-l-body-md-bold-font-size: var(--font-size-4);\n  --typography-l-body-md-bold-line-height: var(--line-height-4);\n  --typography-l-body-md-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-medium-font-family: var(--font-family-sans);\n  --typography-l-body-md-medium-font-size: var(--font-size-4);\n  --typography-l-body-md-medium-line-height: var(--line-height-4);\n  --typography-l-body-md-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-md-font-family: var(--font-family-sans);\n  --typography-l-body-md-font-size: var(--font-size-4);\n  --typography-l-body-md-line-height: var(--line-height-4);\n  --typography-l-body-md-font-weight: var(--font-weight-regular);\n  --typography-l-body-md-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-bold-font-family: var(--font-family-sans);\n  --typography-l-body-sm-bold-font-size: var(--font-size-3);\n  --typography-l-body-sm-bold-line-height: var(--line-height-3);\n  --typography-l-body-sm-bold-font-weight: var(--font-weight-bold);\n  --typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-medium-font-family: var(--font-family-sans);\n  --typography-l-body-sm-medium-font-size: var(--font-size-3);\n  --typography-l-body-sm-medium-line-height: var(--line-height-3);\n  --typography-l-body-sm-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-sm-font-family: var(--font-family-sans);\n  --typography-l-body-sm-font-size: var(--font-size-3);\n  --typography-l-body-sm-line-height: var(--line-height-3);\n  --typography-l-body-sm-font-weight: var(--font-weight-regular);\n  --typography-l-body-sm-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-medium-font-family: var(--font-family-sans);\n  --typography-l-body-xs-medium-font-size: var(--font-size-2);\n  --typography-l-body-xs-medium-line-height: var(--line-height-2);\n  --typography-l-body-xs-medium-font-weight: var(--font-weight-medium);\n  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0);\n  --typography-l-body-xs-font-family: var(--font-family-sans);\n  --typography-l-body-xs-font-size: var(--font-size-2);\n  --typography-l-body-xs-line-height: var(--line-height-2);\n  --typography-l-body-xs-font-weight: var(--font-weight-regular);\n  --typography-l-body-xs-letter-spacing: var(--letter-spacing-0);\n  /* shadow */\n  --shadow-size-xs: 0 2px 4px 0;\n  --shadow-size-sm: 0 2px 8px 0;\n  --shadow-size-md: 0 2px 16px 0;\n  --shadow-size-lg: 0 2px 40px 0;\n}\n\n/*\n * Light Theme Colors\n * Use these css variables in your code.\n * This will insure theme compatibility\n */\n\n:root {\n  --color-background-default: var(--brand-colors-white-white000);\n  --color-background-default-hover: #fafafa;\n  --color-background-default-pressed: #ebebeb;\n  --color-background-alternative: var(--brand-colors-grey-grey040);\n  --color-background-alternative-hover: #edeff1;\n  --color-background-alternative-pressed: #dfe0e2;\n  --color-background-hover: #00000005;\n  --color-background-pressed: #00000014;\n  --color-text-default: var(--brand-colors-grey-grey800);\n  --color-text-alternative: var(--brand-colors-grey-grey600);\n  --color-text-muted: var(--brand-colors-grey-grey200);\n  --color-icon-default: var(--brand-colors-grey-grey800);\n  --color-icon-alternative: var(--brand-colors-grey-grey500);\n  --color-icon-muted: var(--brand-colors-grey-grey200);\n  --color-border-default: var(--brand-colors-grey-grey200);\n  --color-border-muted: var(--brand-colors-grey-grey100);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-shadow-default: #0000001a;\n  --color-primary-default: var(--brand-colors-blue-blue500);\n  --color-primary-default-hover: #0379ce;\n  --color-primary-default-pressed: #036db9;\n  --color-primary-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white000);\n  --color-primary-disabled: #0376c980;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange500);\n  --color-secondary-alternative: var(--brand-colors-orange-orange600);\n  --color-secondary-muted: #f66a0a19;\n  --color-secondary-inverse: var(--brand-colors-white-white000);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-default-hover: #cd4250;\n  --color-error-default-pressed: #c63441;\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white000);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange600);\n  --color-warning-default-hover: #c2540a;\n  --color-warning-default-pressed: #a24507;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #bf520819;\n  --color-warning-inverse: var(--brand-colors-white-white000);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green600);\n  --color-success-default-hover: #208838;\n  --color-success-default-pressed: #1b7431;\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #1c823419;\n  --color-success-inverse: var(--brand-colors-white-white000);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue500);\n  --color-info-alternative: var(--brand-colors-blue-blue600);\n  --color-info-muted: #0376c919;\n  --color-info-inverse: var(--brand-colors-white-white000);\n  --color-info-disabled: #0376c980;\n  --color-network-goerli-default: var(--brand-colors-blue-blue400);\n  --color-network-goerli-inverse: var(--brand-colors-white-white010);\n  --color-network-localhost-default: var(--brand-colors-grey-grey200);\n  --color-network-localhost-inverse: var(--brand-colors-white-white010);\n  --color-network-sepolia-default: var(--brand-colors-violet-violet300);\n  --color-network-sepolia-inverse: var(--brand-colors-white-white010);\n  --color-flask-default: var(--brand-colors-purple-purple500);\n  --color-flask-inverse: var(--brand-colors-white-white010);\n\n  /* Components */\n  /* button */\n  --component-button-primary-shadow: var(--shadow-size-sm)\n    var(--color-primary-shadow);\n  --component-button-danger-shadow: var(--shadow-size-sm)\n    var(--color-error-shadow);\n}\n\n/**\n * Dark Theme Colors\n * Colors for dark theme\n */\n\n[data-theme='dark'] {\n  --color-background-default: var(--brand-colors-grey-grey800);\n  --color-background-default-hover: #282b2e;\n  --color-background-default-pressed: #36383b;\n  --color-background-alternative: var(--brand-colors-grey-grey900);\n  --color-background-alternative-hover: #191b1d;\n  --color-background-alternative-pressed: #27292a;\n  --color-background-hover: #ffffff05;\n  --color-background-pressed: #ffffff14;\n  --color-text-default: var(--brand-colors-white-white000);\n  --color-text-alternative: var(--brand-colors-grey-grey100);\n  --color-text-muted: var(--brand-colors-grey-grey400);\n  --color-icon-default: var(--brand-colors-white-white000);\n  --color-icon-alternative: var(--brand-colors-grey-grey200);\n  --color-icon-muted: var(--brand-colors-grey-grey400);\n  --color-border-default: var(--brand-colors-grey-grey400);\n  --color-border-muted: var(--brand-colors-grey-grey700);\n  --color-overlay-default: #00000099;\n  --color-overlay-alternative: #000000cc;\n  --color-shadow-default: #00000080;\n  --color-overlay-inverse: var(--brand-colors-white-white010);\n  --color-primary-default: var(--brand-colors-blue-blue400);\n  --color-primary-default-hover: #0092fa;\n  --color-primary-default-pressed: #54b6fc;\n  --color-primary-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-grey-grey900);\n  --color-primary-disabled: #1098fc80;\n  --color-primary-shadow: #0376c933;\n  --color-secondary-default: var(--brand-colors-orange-orange400);\n  --color-secondary-alternative: var(--brand-colors-orange-orange300);\n  --color-secondary-muted: #f8883b26;\n  --color-secondary-inverse: var(--brand-colors-grey-grey900);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: #ff5263;\n  --color-error-default-hover: #ff4d58;\n  --color-error-default-pressed: #f9868e;\n  --color-error-alternative: var(--brand-colors-red-red300);\n  --color-error-muted: #ff526326;\n  --color-error-inverse: var(--brand-colors-grey-grey900);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #ff526366;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\n  --color-warning-default-hover: #ffc60a;\n  --color-warning-default-pressed: #ffeaa3d1;\n  --color-warning-alternative: var(--brand-colors-yellow-yellow400);\n  --color-warning-muted: #ffd33d26;\n  --color-warning-inverse: var(--brand-colors-grey-grey900);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-default-hover: #05b82f;\n  --color-success-default-pressed: #6aec88;\n  --color-success-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-grey-grey900);\n  --color-success-disabled: #28a74580;\n  --color-info-default: var(--brand-colors-blue-blue400);\n  --color-info-alternative: var(--brand-colors-blue-blue300);\n  --color-info-muted: #1098fc26;\n  --color-info-inverse: var(--brand-colors-grey-grey900);\n  --color-info-disabled: #0376c980;\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),external_STORYBOOK_MODULE_CHANNELS_=__webpack_require__("@storybook/channels");const importers=[async path=>{if(!/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(2);return __webpack_require__("./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(2);return __webpack_require__("./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}];const channel=(0,external_STORYBOOK_MODULE_CHANNELS_.createBrowserChannel)({page:"preview"});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),"DEVELOPMENT"===external_STORYBOOK_MODULE_GLOBAL_.global.CONFIG_TYPE&&(window.__STORYBOOK_SERVER_CHANNEL__=channel);const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:async function importFn(path){for(let i=0;i<importers.length;i++){const moduleExports=await(x=()=>importers[i](path),x());if(moduleExports)return moduleExports}var x},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/react/dist/entry-preview.mjs"),__webpack_require__("./node_modules/@storybook/react/dist/entry-preview-docs.mjs"),__webpack_require__("./node_modules/@storybook/addon-links/dist/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.js"),__webpack_require__("./node_modules/@storybook/addon-a11y/dist/preview.js"),__webpack_require__("./.storybook/preview.js")])})},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./docs/fonts/fonts.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/css-loader/dist/runtime/getUrl.js"),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__),_Roboto_Roboto_Thin_ttf__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./docs/fonts/Roboto/Roboto-Thin.ttf"),_Roboto_Roboto_Light_ttf__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./docs/fonts/Roboto/Roboto-Light.ttf"),_Roboto_Roboto_Regular_ttf__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./docs/fonts/Roboto/Roboto-Regular.ttf"),_Roboto_Roboto_Medium_ttf__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./docs/fonts/Roboto/Roboto-Medium.ttf"),_Roboto_Roboto_Bold_ttf__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./docs/fonts/Roboto/Roboto-Bold.ttf"),_Roboto_Roboto_Black_ttf__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./docs/fonts/Roboto/Roboto-Black.ttf"),_Euclid_EuclidCircularB_Regular_WebXL_ttf__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf"),_Euclid_EuclidCircularB_RegularItalic_WebXL_ttf__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf"),_Euclid_EuclidCircularB_Medium_ttf__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Medium.ttf"),_Euclid_EuclidCircularB_Bold_WebXL_ttf__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./docs/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf"),___CSS_LOADER_EXPORT___=_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()),___CSS_LOADER_URL_REPLACEMENT_0___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Thin_ttf__WEBPACK_IMPORTED_MODULE_3__),___CSS_LOADER_URL_REPLACEMENT_1___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Light_ttf__WEBPACK_IMPORTED_MODULE_4__),___CSS_LOADER_URL_REPLACEMENT_2___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Regular_ttf__WEBPACK_IMPORTED_MODULE_5__),___CSS_LOADER_URL_REPLACEMENT_3___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Medium_ttf__WEBPACK_IMPORTED_MODULE_6__),___CSS_LOADER_URL_REPLACEMENT_4___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Bold_ttf__WEBPACK_IMPORTED_MODULE_7__),___CSS_LOADER_URL_REPLACEMENT_5___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Roboto_Roboto_Black_ttf__WEBPACK_IMPORTED_MODULE_8__),___CSS_LOADER_URL_REPLACEMENT_6___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Regular_WebXL_ttf__WEBPACK_IMPORTED_MODULE_9__),___CSS_LOADER_URL_REPLACEMENT_7___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_RegularItalic_WebXL_ttf__WEBPACK_IMPORTED_MODULE_10__),___CSS_LOADER_URL_REPLACEMENT_8___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Medium_ttf__WEBPACK_IMPORTED_MODULE_11__),___CSS_LOADER_URL_REPLACEMENT_9___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_Euclid_EuclidCircularB_Bold_WebXL_ttf__WEBPACK_IMPORTED_MODULE_12__);___CSS_LOADER_EXPORT___.push([module.id,'@font-face{font-family:"Roboto";font-style:normal;font-weight:100;src:local("Roboto Thin"),local("Roboto-Thin"),url('+___CSS_LOADER_URL_REPLACEMENT_0___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url('+___CSS_LOADER_URL_REPLACEMENT_1___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url('+___CSS_LOADER_URL_REPLACEMENT_2___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url('+___CSS_LOADER_URL_REPLACEMENT_3___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url('+___CSS_LOADER_URL_REPLACEMENT_4___+') format("truetype")}@font-face{font-family:"Roboto";font-style:normal;font-weight:900;src:local("Roboto Black"),local("Roboto-Black"),url('+___CSS_LOADER_URL_REPLACEMENT_5___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:400;src:url('+___CSS_LOADER_URL_REPLACEMENT_6___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:italic;font-weight:400;src:url('+___CSS_LOADER_URL_REPLACEMENT_7___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:500;src:url('+___CSS_LOADER_URL_REPLACEMENT_8___+') format("truetype")}@font-face{font-family:"Euclid Circular B";font-style:normal;font-weight:700;src:url('+___CSS_LOADER_URL_REPLACEMENT_9___+') format("truetype")}',"",{version:3,sources:["webpack://./docs/fonts/fonts.scss"],names:[],mappings:"AAAA,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,wGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,0GAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,sGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,4GAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,wGAAA,CAIF,WACE,oBAAA,CACA,iBAAA,CACA,eAAA,CACA,0GAAA,CAIF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA,CAGF,WACE,+BAAA,CACA,iBAAA,CACA,eAAA,CACA,8DAAA",sourcesContent:["@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 100;\n  src: local('Roboto Thin'), local('Roboto-Thin'),\n    url('Roboto/Roboto-Thin.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 300;\n  src: local('Roboto Light'), local('Roboto-Light'),\n    url('Roboto/Roboto-Light.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Roboto'), local('Roboto-Regular'),\n    url('Roboto/Roboto-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 500;\n  src: local('Roboto Medium'), local('Roboto-Medium'),\n    url('Roboto/Roboto-Medium.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Roboto Bold'), local('Roboto-Bold'),\n    url('Roboto/Roboto-Bold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 900;\n  src: local('Roboto Black'), local('Roboto-Black'),\n    url('Roboto/Roboto-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 400;\n  src: url('Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: italic;\n  font-weight: 400;\n  src: url('Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 500;\n  src: url('Euclid/EuclidCircularB-Medium.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Euclid Circular B';\n  font-style: normal;\n  font-weight: 700;\n  src: url('Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./docs/BrandColors.stories":["./docs/BrandColors.stories.tsx",719,432,11,202],"./docs/BrandColors.stories.tsx":["./docs/BrandColors.stories.tsx",719,432,11,202],"./docs/Shadows.stories":["./docs/Shadows.stories.tsx",719,432,740],"./docs/Shadows.stories.tsx":["./docs/Shadows.stories.tsx",719,432,740],"./docs/ThemeColors.stories":["./docs/ThemeColors.stories.tsx",719,432,11,880],"./docs/ThemeColors.stories.tsx":["./docs/ThemeColors.stories.tsx",719,432,11,880],"./docs/Typography.stories":["./docs/Typography.stories.tsx",719,432,907],"./docs/Typography.stories.tsx":["./docs/Typography.stories.tsx",719,432,907],"./docs/components/Text/Text.stories":["./docs/components/Text/Text.stories.tsx",341],"./docs/components/Text/Text.stories.tsx":["./docs/components/Text/Text.stories.tsx",341]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./docs/Introduction.stories.mdx":["./docs/Introduction.stories.mdx",719,385],"./docs/IntroductionColor.stories.mdx":["./docs/IntroductionColor.stories.mdx",719,432,181]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./. lazy recursive ^\\.\\/.*$ include: (?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackAsyncContext},"./docs/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Bold-WebXL.0caa0b1b.ttf"},"./docs/fonts/Euclid/EuclidCircularB-Medium.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Medium.04ee8a97.ttf"},"./docs/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-Regular-WebXL.72f41bcc.ttf"},"./docs/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/EuclidCircularB-RegularItalic-WebXL.baf24c2c.ttf"},"./docs/fonts/Roboto/Roboto-Black.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Black.07a21e85.ttf"},"./docs/fonts/Roboto/Roboto-Bold.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Bold.c13d0c4f.ttf"},"./docs/fonts/Roboto/Roboto-Light.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Light.00fc594b.ttf"},"./docs/fonts/Roboto/Roboto-Medium.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Medium.58a88fef.ttf"},"./docs/fonts/Roboto/Roboto-Regular.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Regular.d08b3cc8.ttf"},"./docs/fonts/Roboto/Roboto-Thin.ttf":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/Roboto-Thin.59115760.ttf"},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/global":module=>{"use strict";module.exports=__STORYBOOK_MODULE_GLOBAL__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__}},__webpack_require__=>{__webpack_require__.O(0,[173],(()=>{return moduleId="./storybook-config-entry.js",__webpack_require__(__webpack_require__.s=moduleId);var moduleId}));__webpack_require__.O()}]);
\ No newline at end of file
diff --git a/project.json b/project.json
index ab7cf5b8..dcdff2b1 100644
--- a/project.json
+++ b/project.json
@@ -1 +1 @@
-{"generatedAt":1706121453506,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.21"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.6.10","storybookVersionSpecifier":"^7.6.10","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.10"},"@storybook/react":{"version":"7.6.10"},"@storybook/react-webpack5":{"version":"7.6.10"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.10"}},"addons":{"@storybook/addon-links":{"version":"7.6.10"},"@storybook/addon-essentials":{"version":"7.6.10"},"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-a11y":{"version":"7.6.10"},"@storybook/addon-mdx-gfm":{"version":"7.6.10"}}}
+{"generatedAt":1706121644224,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.21"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.6.10","storybookVersionSpecifier":"^7.6.10","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.10"},"@storybook/react":{"version":"7.6.10"},"@storybook/react-webpack5":{"version":"7.6.10"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.10"}},"addons":{"@storybook/addon-links":{"version":"7.6.10"},"@storybook/addon-essentials":{"version":"7.6.10"},"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-a11y":{"version":"7.6.10"},"@storybook/addon-mdx-gfm":{"version":"7.6.10"}}}
diff --git a/runtime~main.8406e859.iframe.bundle.js b/runtime~main.8406e859.iframe.bundle.js
new file mode 100644
index 00000000..7af430a9
--- /dev/null
+++ b/runtime~main.8406e859.iframe.bundle.js
@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({181:"docs-IntroductionColor-stories-mdx",202:"docs-BrandColors-stories",341:"docs-components-Text-Text-stories",385:"docs-Introduction-stories-mdx",740:"docs-Shadows-stories",880:"docs-ThemeColors-stories",907:"docs-Typography-stories"}[chunkId]||chunkId)+"."+{11:"2c22e7ef",115:"9774694b",181:"935c7ed5",202:"de5e03f7",341:"d6fef0f4",385:"211c1228",426:"b9191c34",432:"b338d721",433:"4e85ea27",607:"dda89155",670:"c3506f37",719:"48fdcbb4",729:"ab705b55",740:"8be2d40c",797:"26013dc4",880:"f74a8038",907:"8852b668"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@metamask/design-tokens:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@metamask/design-tokens:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
\ No newline at end of file
diff --git a/runtime~main.ff7c01e1.iframe.bundle.js b/runtime~main.ff7c01e1.iframe.bundle.js
deleted file mode 100644
index 1280c1c2..00000000
--- a/runtime~main.ff7c01e1.iframe.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({181:"docs-IntroductionColor-stories-mdx",202:"docs-BrandColors-stories",341:"docs-components-Text-Text-stories",385:"docs-Introduction-stories-mdx",740:"docs-Shadows-stories",880:"docs-ThemeColors-stories",907:"docs-Typography-stories"}[chunkId]||chunkId)+"."+{115:"9774694b",181:"19aa9cbc",202:"304bfbee",341:"d6fef0f4",385:"211c1228",426:"b9191c34",433:"4e85ea27",607:"dda89155",670:"c3506f37",706:"fd484d5d",719:"48fdcbb4",729:"ab705b55",740:"2712ee2a",797:"26013dc4",880:"f74a8038",907:"85b7810b",948:"e8ffb950"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@metamask/design-tokens:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@metamask/design-tokens:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
\ No newline at end of file
diff --git a/stories.json b/stories.json
index 88b86f90..d0571e8e 100644
--- a/stories.json
+++ b/stories.json
@@ -1 +1 @@
-{"v":3,"stories":{"getting-started-introduction--docs":{"id":"getting-started-introduction--docs","title":"Getting Started/Introduction","name":"Docs","importPath":"./docs/Introduction.stories.mdx","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[],"kind":"Getting Started/Introduction","story":"Docs","parameters":{"__id":"getting-started-introduction--docs","docsOnly":true,"fileName":"./docs/Introduction.stories.mdx"}},"colors-introduction--docs":{"id":"colors-introduction--docs","title":"Colors / Introduction","name":"Docs","importPath":"./docs/IntroductionColor.stories.mdx","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[],"kind":"Colors / Introduction","story":"Docs","parameters":{"__id":"colors-introduction--docs","docsOnly":true,"fileName":"./docs/IntroductionColor.stories.mdx"}},"colors-brand-colors--docs":{"id":"colors-brand-colors--docs","title":"Colors/Brand Colors","name":"Docs","importPath":"./docs/BrandColors.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Colors/Brand Colors","story":"Docs","parameters":{"__id":"colors-brand-colors--docs","docsOnly":true,"fileName":"./docs/BrandColors.stories.tsx"}},"colors-brand-colors--default-story":{"id":"colors-brand-colors--default-story","name":"Default","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"],"kind":"Colors/Brand Colors","story":"Default","parameters":{"__id":"colors-brand-colors--default-story","docsOnly":false,"fileName":"./docs/BrandColors.stories.tsx"}},"colors-theme-colors--docs":{"id":"colors-theme-colors--docs","title":"Colors/Theme Colors","name":"Docs","importPath":"./docs/ThemeColors.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Colors/Theme Colors","story":"Docs","parameters":{"__id":"colors-theme-colors--docs","docsOnly":true,"fileName":"./docs/ThemeColors.stories.tsx"}},"colors-theme-colors--light-theme-colors":{"id":"colors-theme-colors--light-theme-colors","name":"Light Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"],"kind":"Colors/Theme Colors","story":"Light Theme Colors","parameters":{"__id":"colors-theme-colors--light-theme-colors","docsOnly":false,"fileName":"./docs/ThemeColors.stories.tsx"}},"colors-theme-colors--dark-theme-colors":{"id":"colors-theme-colors--dark-theme-colors","name":"Dark Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"],"kind":"Colors/Theme Colors","story":"Dark Theme Colors","parameters":{"__id":"colors-theme-colors--dark-theme-colors","docsOnly":false,"fileName":"./docs/ThemeColors.stories.tsx"}},"shadows-shadows--docs":{"id":"shadows-shadows--docs","title":"Shadows/Shadows","name":"Docs","importPath":"./docs/Shadows.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Shadows/Shadows","story":"Docs","parameters":{"__id":"shadows-shadows--docs","docsOnly":true,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--default-story":{"id":"shadows-shadows--default-story","name":"Default","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Default","parameters":{"__id":"shadows-shadows--default-story","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--size":{"id":"shadows-shadows--size","name":"Size","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Size","parameters":{"__id":"shadows-shadows--size","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--color":{"id":"shadows-shadows--color","name":"Color","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Color","parameters":{"__id":"shadows-shadows--color","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--example-usage":{"id":"shadows-shadows--example-usage","name":"Example Usage","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Example Usage","parameters":{"__id":"shadows-shadows--example-usage","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"typography-typography--docs":{"id":"typography-typography--docs","title":"Typography/Typography","name":"Docs","importPath":"./docs/Typography.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Typography/Typography","story":"Docs","parameters":{"__id":"typography-typography--docs","docsOnly":true,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--font-family":{"id":"typography-typography--font-family","name":"Font Family","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Font Family","parameters":{"__id":"typography-typography--font-family","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--small-screen":{"id":"typography-typography--small-screen","name":"Small Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Small Screen","parameters":{"__id":"typography-typography--small-screen","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--large-screen":{"id":"typography-typography--large-screen","name":"Large Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Large Screen","parameters":{"__id":"typography-typography--large-screen","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--font-weight":{"id":"typography-typography--font-weight","name":"Font Weight","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Font Weight","parameters":{"__id":"typography-typography--font-weight","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--small-screen-css":{"id":"typography-typography--small-screen-css","name":"Small Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Small Screen CSS","parameters":{"__id":"typography-typography--small-screen-css","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--large-screen-css":{"id":"typography-typography--large-screen-css","name":"Large Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Large Screen CSS","parameters":{"__id":"typography-typography--large-screen-css","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"doc-components-text--docs":{"id":"doc-components-text--docs","title":"Doc components/Text","name":"Docs","importPath":"./docs/components/Text/Text.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Doc components/Text","story":"Docs","parameters":{"__id":"doc-components-text--docs","docsOnly":true,"fileName":"./docs/components/Text/Text.stories.tsx"}},"doc-components-text--default-story":{"id":"doc-components-text--default-story","name":"Default","title":"Doc components/Text","importPath":"./docs/components/Text/Text.stories.tsx","tags":["story"],"kind":"Doc components/Text","story":"Default","parameters":{"__id":"doc-components-text--default-story","docsOnly":false,"fileName":"./docs/components/Text/Text.stories.tsx"}}}}
+{"v":3,"stories":{"getting-started-introduction--docs":{"id":"getting-started-introduction--docs","title":"Getting Started/Introduction","name":"Docs","importPath":"./docs/Introduction.stories.mdx","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[],"kind":"Getting Started/Introduction","story":"Docs","parameters":{"__id":"getting-started-introduction--docs","docsOnly":true,"fileName":"./docs/Introduction.stories.mdx"}},"colors-introduction--docs":{"id":"colors-introduction--docs","title":"Colors / Introduction","name":"Docs","importPath":"./docs/IntroductionColor.stories.mdx","tags":["stories-mdx","stories-mdx-docsOnly","docs"],"storiesImports":[],"kind":"Colors / Introduction","story":"Docs","parameters":{"__id":"colors-introduction--docs","docsOnly":true,"fileName":"./docs/IntroductionColor.stories.mdx"}},"colors-brand-colors--docs":{"id":"colors-brand-colors--docs","title":"Colors/Brand Colors","name":"Docs","importPath":"./docs/BrandColors.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Colors/Brand Colors","story":"Docs","parameters":{"__id":"colors-brand-colors--docs","docsOnly":true,"fileName":"./docs/BrandColors.stories.tsx"}},"colors-brand-colors--default-story":{"id":"colors-brand-colors--default-story","name":"Default","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"],"kind":"Colors/Brand Colors","story":"Default","parameters":{"__id":"colors-brand-colors--default-story","docsOnly":false,"fileName":"./docs/BrandColors.stories.tsx"}},"colors-brand-colors--js":{"id":"colors-brand-colors--js","name":"JS","title":"Colors/Brand Colors","importPath":"./docs/BrandColors.stories.tsx","tags":["story"],"kind":"Colors/Brand Colors","story":"JS","parameters":{"__id":"colors-brand-colors--js","docsOnly":false,"fileName":"./docs/BrandColors.stories.tsx"}},"colors-theme-colors--docs":{"id":"colors-theme-colors--docs","title":"Colors/Theme Colors","name":"Docs","importPath":"./docs/ThemeColors.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Colors/Theme Colors","story":"Docs","parameters":{"__id":"colors-theme-colors--docs","docsOnly":true,"fileName":"./docs/ThemeColors.stories.tsx"}},"colors-theme-colors--light-theme-colors":{"id":"colors-theme-colors--light-theme-colors","name":"Light Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"],"kind":"Colors/Theme Colors","story":"Light Theme Colors","parameters":{"__id":"colors-theme-colors--light-theme-colors","docsOnly":false,"fileName":"./docs/ThemeColors.stories.tsx"}},"colors-theme-colors--dark-theme-colors":{"id":"colors-theme-colors--dark-theme-colors","name":"Dark Theme Colors","title":"Colors/Theme Colors","importPath":"./docs/ThemeColors.stories.tsx","tags":["story"],"kind":"Colors/Theme Colors","story":"Dark Theme Colors","parameters":{"__id":"colors-theme-colors--dark-theme-colors","docsOnly":false,"fileName":"./docs/ThemeColors.stories.tsx"}},"shadows-shadows--docs":{"id":"shadows-shadows--docs","title":"Shadows/Shadows","name":"Docs","importPath":"./docs/Shadows.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Shadows/Shadows","story":"Docs","parameters":{"__id":"shadows-shadows--docs","docsOnly":true,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--default-story":{"id":"shadows-shadows--default-story","name":"Default","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Default","parameters":{"__id":"shadows-shadows--default-story","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--size":{"id":"shadows-shadows--size","name":"Size","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Size","parameters":{"__id":"shadows-shadows--size","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--color":{"id":"shadows-shadows--color","name":"Color","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Color","parameters":{"__id":"shadows-shadows--color","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"shadows-shadows--example-usage":{"id":"shadows-shadows--example-usage","name":"Example Usage","title":"Shadows/Shadows","importPath":"./docs/Shadows.stories.tsx","tags":["story"],"kind":"Shadows/Shadows","story":"Example Usage","parameters":{"__id":"shadows-shadows--example-usage","docsOnly":false,"fileName":"./docs/Shadows.stories.tsx"}},"typography-typography--docs":{"id":"typography-typography--docs","title":"Typography/Typography","name":"Docs","importPath":"./docs/Typography.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Typography/Typography","story":"Docs","parameters":{"__id":"typography-typography--docs","docsOnly":true,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--font-family":{"id":"typography-typography--font-family","name":"Font Family","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Font Family","parameters":{"__id":"typography-typography--font-family","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--small-screen":{"id":"typography-typography--small-screen","name":"Small Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Small Screen","parameters":{"__id":"typography-typography--small-screen","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--large-screen":{"id":"typography-typography--large-screen","name":"Large Screen","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Large Screen","parameters":{"__id":"typography-typography--large-screen","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--font-weight":{"id":"typography-typography--font-weight","name":"Font Weight","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Font Weight","parameters":{"__id":"typography-typography--font-weight","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--small-screen-css":{"id":"typography-typography--small-screen-css","name":"Small Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Small Screen CSS","parameters":{"__id":"typography-typography--small-screen-css","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"typography-typography--large-screen-css":{"id":"typography-typography--large-screen-css","name":"Large Screen CSS","title":"Typography/Typography","importPath":"./docs/Typography.stories.tsx","tags":["story"],"kind":"Typography/Typography","story":"Large Screen CSS","parameters":{"__id":"typography-typography--large-screen-css","docsOnly":false,"fileName":"./docs/Typography.stories.tsx"}},"doc-components-text--docs":{"id":"doc-components-text--docs","title":"Doc components/Text","name":"Docs","importPath":"./docs/components/Text/Text.stories.tsx","tags":["docs","autodocs"],"storiesImports":[],"kind":"Doc components/Text","story":"Docs","parameters":{"__id":"doc-components-text--docs","docsOnly":true,"fileName":"./docs/components/Text/Text.stories.tsx"}},"doc-components-text--default-story":{"id":"doc-components-text--default-story","name":"Default","title":"Doc components/Text","importPath":"./docs/components/Text/Text.stories.tsx","tags":["story"],"kind":"Doc components/Text","story":"Default","parameters":{"__id":"doc-components-text--default-story","docsOnly":false,"fileName":"./docs/components/Text/Text.stories.tsx"}}}}