diff --git a/11.81786988.iframe.bundle.js b/11.81786988.iframe.bundle.js
new file mode 100644
index 00000000..e57b9e63
--- /dev/null
+++ b/11.81786988.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":"#C65507","description":"(HEX: #C65507)","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":"#1E7E34","description":"(HEX: #1E7E34)","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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)","type":"color"},"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"}},"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":"#C65507","description":"(orange600: #C65507) [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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)","type":"color"},"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"}},"warning":{"default":{"value":"#F66A0A","description":"(orange500: #F66A0A) For low-mid level alert elements. Used for text, background, icon or border","type":"color"},"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":"#FFD33D19","description":"(yellow500: #FFD33D 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) 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"}},"success":{"default":{"value":"#28A745","description":"(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#1E7E34","description":"(green600: #1E7E34) [DEPRECATED] (green600: #1E7E34) success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#28A74519","description":"(green500: #28A74519 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border","type":"color"},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border","type":"color"},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)","type":"color"},"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"}},"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":"#D73847","description":"(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#E06470","description":"(red400: #E06470) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#D7384726","description":"(red500: #D73847 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)","type":"color"},"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"}},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border","type":"color"},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border","type":"color"},"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/244.d9d3a62a.iframe.bundle.js b/244.d9d3a62a.iframe.bundle.js
new file mode 100644
index 00000000..23fe9672
--- /dev/null
+++ b/244.d9d3a62a.iframe.bundle.js
@@ -0,0 +1,2 @@
+/*! For license information please see 244.d9d3a62a.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[244],{"./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/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")},"./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",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#C65507",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",alternative:"#B92534",muted:"#D7384719",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#F66A0A",alternative:"#FFC70A",muted:"#FFD33D19",inverse:"#FCFCFC",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#1E7E34",muted:"#28A74519",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",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",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#D73847",alternative:"#E06470",muted:"#D7384726",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#FFD33D",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#5DD879",muted:"#28A74526",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",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/974.0fb44297.iframe.bundle.js.LICENSE.txt b/244.d9d3a62a.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from 974.0fb44297.iframe.bundle.js.LICENSE.txt
rename to 244.d9d3a62a.iframe.bundle.js.LICENSE.txt
diff --git a/706.aba8ab90.iframe.bundle.js b/706.aba8ab90.iframe.bundle.js
deleted file mode 100644
index 247c2d92..00000000
--- a/706.aba8ab90.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":"#C65507","description":"(HEX: #C65507)","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":"#1E7E34","description":"(HEX: #1E7E34)","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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)","type":"color"},"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"}},"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":"#C65507","description":"(orange600: #C65507) [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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)","type":"color"},"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"}},"warning":{"default":{"value":"#F66A0A","description":"(orange500: #F66A0A) For low-mid level alert elements. Used for text, background, icon or border","type":"color"},"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":"#FFD33D19","description":"(yellow500: #FFD33D 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) 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"}},"success":{"default":{"value":"#28A745","description":"(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#1E7E34","description":"(green600: #1E7E34) [DEPRECATED] (green600: #1E7E34) success.alternative should be used as an alternative to success.default for things such as hover states","type":"color"},"muted":{"value":"#28A74519","description":"(green500: #28A74519 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border","type":"color"},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border","type":"color"},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)","type":"color"},"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"}},"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":"#D73847","description":"(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border","type":"color"},"alternative":{"value":"#E06470","description":"(red400: #E06470) For the \\"pressed\\" state of interactive danger/critical elements","type":"color"},"muted":{"value":"#D7384726","description":"(red500: #D73847 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)","type":"color"},"inverse":{"value":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)","type":"color"},"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"}},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border","type":"color"},"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"}},"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":"#FCFCFC","description":"(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border","type":"color"},"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/974.0fb44297.iframe.bundle.js b/974.0fb44297.iframe.bundle.js
deleted file mode 100644
index c069de23..00000000
--- a/974.0fb44297.iframe.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see 974.0fb44297.iframe.bundle.js.LICENSE.txt */
-(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[974],{"./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/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/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",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#C65507",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",alternative:"#B92534",muted:"#D7384719",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#F66A0A",alternative:"#FFC70A",muted:"#FFD33D19",inverse:"#FCFCFC",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#1E7E34",muted:"#28A74519",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",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",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#D73847",alternative:"#E06470",muted:"#D7384726",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#FFD33D",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#5DD879",muted:"#28A74526",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",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.0de26f4d.iframe.bundle.js b/docs-IntroductionColor-stories-mdx.0de26f4d.iframe.bundle.js
deleted file mode 100644
index bd214585..00000000
--- a/docs-IntroductionColor-stories-mdx.0de26f4d.iframe.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see docs-IntroductionColor-stories-mdx.0de26f4d.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/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",h3:"h3",strong:"strong",a:"a",ul:"ul",li:"li",code:"code"},(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."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"token-tiers",children:"Token Tiers"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"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)("br",{}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"brand-colors-first-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Brand colors"})," (first tier)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["These colors ",(0,jsx_runtime.jsx)(_components.strong,{children:"SHOULD NOT"})," be used in your component styles directly. They are used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"}),". Brand colors are used to keep track of all colors used in our app. See ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brandcolors--default-story",children:"Brand Colors"})]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"theme-colors-second-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Theme Colors"})," (second tier)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["These colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose. See ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"})]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"component-colors-third-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Component colors"})," (third tier)"]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Another level of abstraction is component colors that you can use at a component specific level. We do not currently provide any component tier colors but that may change in future."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"takeaways",children:"Takeaways"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:["Do not use static HEX values in your code. Use the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"}),". If one does not exist for your use case ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens/issues/new",target:"_blank",rel:"nofollow noopener noreferrer",children:"create an issue"})," and tag it with a ",(0,jsx_runtime.jsx)(_components.code,{children:"color"})," label."]}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:"Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token."}),"\n"]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"next--theme-colors",children:["Next 👉 ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"})]}),"\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/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",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",disabled:"#0376C980",shadow:"#0376C933"},secondary:{default:"#F66A0A",alternative:"#C65507",muted:"#F66A0A19",inverse:"#FCFCFC",disabled:"#F66A0A80"},error:{default:"#D73847",alternative:"#B92534",muted:"#D7384719",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#F66A0A",alternative:"#FFC70A",muted:"#FFD33D19",inverse:"#FCFCFC",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#1E7E34",muted:"#28A74519",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#0376C9",alternative:"#0260A4",muted:"#0376C919",inverse:"#FCFCFC",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",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",disabled:"#1098FC80",shadow:"#1098FC66"},secondary:{default:"#F8883B",alternative:"#FAA66C",muted:"#F8883B26",inverse:"#FCFCFC",disabled:"#F8883B80"},error:{default:"#D73847",alternative:"#E06470",muted:"#D7384726",inverse:"#FCFCFC",disabled:"#D7384780",shadow:"#D7384766"},warning:{default:"#FFD33D",alternative:"#FFDF70",muted:"#FFD33D26",inverse:"#141618",disabled:"#FFD33D80"},success:{default:"#28A745",alternative:"#5DD879",muted:"#28A74526",inverse:"#FCFCFC",disabled:"#28A74580"},info:{default:"#1098FC",alternative:"#43AEFC",muted:"#1098FC26",inverse:"#FCFCFC",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.0de26f4d.iframe.bundle.js.LICENSE.txt b/docs-IntroductionColor-stories-mdx.0de26f4d.iframe.bundle.js.LICENSE.txt
deleted file mode 100644
index 1a0bfa64..00000000
--- a/docs-IntroductionColor-stories-mdx.0de26f4d.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.f05bbeaa.iframe.bundle.js b/docs-IntroductionColor-stories-mdx.f05bbeaa.iframe.bundle.js
new file mode 100644
index 00000000..0e7e396b
--- /dev/null
+++ b/docs-IntroductionColor-stories-mdx.f05bbeaa.iframe.bundle.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[181],{"./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",h3:"h3",strong:"strong",a:"a",ul:"ul",li:"li",code:"code"},(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."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"token-tiers",children:"Token Tiers"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"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)("br",{}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"brand-colors-first-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Brand colors"})," (first tier)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["These colors ",(0,jsx_runtime.jsx)(_components.strong,{children:"SHOULD NOT"})," be used in your component styles directly. They are used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"}),". Brand colors are used to keep track of all colors used in our app. See ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-brandcolors--default-story",children:"Brand Colors"})]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"theme-colors-second-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Theme Colors"})," (second tier)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["These colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose. See ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"})]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"component-colors-third-tier",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Component colors"})," (third tier)"]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Another level of abstraction is component colors that you can use at a component specific level. We do not currently provide any component tier colors but that may change in future."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"takeaways",children:"Takeaways"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:["Do not use static HEX values in your code. Use the ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"}),". If one does not exist for your use case ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens/issues/new",target:"_blank",rel:"nofollow noopener noreferrer",children:"create an issue"})," and tag it with a ",(0,jsx_runtime.jsx)(_components.code,{children:"color"})," label."]}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:"Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token."}),"\n"]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"next--theme-colors",children:["Next 👉 ",(0,jsx_runtime.jsx)(_components.a,{href:"/docs/colors-themecolors--light-theme-colors",children:"Theme Colors"})]}),"\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/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.f5ce614c.iframe.bundle.js b/docs-Shadows-stories.f83a1926.iframe.bundle.js
similarity index 65%
rename from docs-Shadows-stories.f5ce614c.iframe.bundle.js
rename to docs-Shadows-stories.f83a1926.iframe.bundle.js
index 8d4a037e..be27852d 100644
--- a/docs-Shadows-stories.f5ce614c.iframe.bundle.js
+++ b/docs-Shadows-stories.f83a1926.iframe.bundle.js
@@ -1 +1 @@
-"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[740],{"./node_modules/@storybook/addon-links/dist/react/index.mjs":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{var external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),external_STORYBOOK_MODULE_CORE_EVENTS_=__webpack_require__("@storybook/core-events"),dist=__webpack_require__("./node_modules/@storybook/csf/dist/index.mjs"),{document:chunk_6GSMXRCY_document,HTMLElement}=external_STORYBOOK_MODULE_GLOBAL_.global;var chunk_6GSMXRCY_navigate=params=>external_STORYBOOK_MODULE_PREVIEW_API_.addons.getChannel().emit(external_STORYBOOK_MODULE_CORE_EVENTS_.SELECT_STORY,params),hrefTo=(title,name)=>new Promise((resolve=>{let{location}=chunk_6GSMXRCY_document,query=function parseQuery(queryString){let query={},pairs=("?"===queryString[0]?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"")}return query}(location.search),existingId=[].concat(query.id)[0],titleToLink=title||existingId.split("--",2)[0],path=`/story/${(0,dist.KK)(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,"");resolve(`${location.origin+sbPath}?${Object.entries({path}).map((item=>`${item[0]}=${item[1]}`)).join("&")}`)})),linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),chunk_6GSMXRCY_navigate({kind,story}))},hasListener=!1,off=()=>{hasListener&&(hasListener=!1,chunk_6GSMXRCY_document.removeEventListener("click",linksListener))},react=((0,external_STORYBOOK_MODULE_PREVIEW_API_.makeDecorator)({name:"withLinks",parameterName:"links",wrapper:(getStory,context)=>(hasListener||(hasListener=!0,chunk_6GSMXRCY_document.addEventListener("click",linksListener)),external_STORYBOOK_MODULE_PREVIEW_API_.addons.getChannel().once(external_STORYBOOK_MODULE_CORE_EVENTS_.STORY_CHANGED,off),getStory(context))}),__webpack_require__("./node_modules/react/index.js")),LinkTo=class extends react.PureComponent{constructor(){super(...arguments),this.state={href:"/"},this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href})}},this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&chunk_6GSMXRCY_navigate({title,name})}}componentDidMount(){this.updateHref()}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref()}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return react.createElement("a",{href,onClick:e=>((e,cb=(_e=>{}))=>{(e=>!(0!==e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey))(e)&&(e.preventDefault(),cb(e))})(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0}},"./docs/Shadows.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Color:()=>Color,ExampleUsage:()=>ExampleUsage,Shadow:()=>Shadow,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");__webpack_require__("./node_modules/@storybook/addon-links/dist/react/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 convey elevation of elements on a surface"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--shadow"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"There are 4 different sizes of shadow in MetaMask."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--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:"As well as the neutral colors for shadow 2 other colors exist that are used for the primary and error/danger button hover states"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--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:"example-usage",children:"Example usage"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Using both size and color tokens, different shadows can be applied to components."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--example-usage"})}),"\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_stories={title:"Shadows/Shadows",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)}}},argTypes:{size:{control:"select",options:Object.keys(js.Wb.shadows.size)},color:{control:"select",options:["default","primary","error"]}},args:{color:"default",size:"xs"}},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 Shadow=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"})})});Shadow.displayName="Shadow";const Size=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"})})]});Size.displayName="Size";const Color=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"})})]});Color.displayName="Color";const ExampleUsage=()=>(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"})})]})]});ExampleUsage.displayName="ExampleUsage",Shadow.parameters={...Shadow.parameters,docs:{...Shadow.parameters?.docs,source:{originalSource:"args => {\n  return <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}",...Shadow.parameters?.docs?.source}}},Size.parameters={...Size.parameters,docs:{...Size.parameters?.docs,source:{originalSource:'args => {\n  return <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}',...Size.parameters?.docs?.source}}},Color.parameters={...Color.parameters,docs:{...Color.parameters?.docs,source:{originalSource:"args => {\n  return <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}",...Color.parameters?.docs?.source}}},ExampleUsage.parameters={...ExampleUsage.parameters,docs:{...ExampleUsage.parameters?.docs,source:{originalSource:"() => {\n  return <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=["Shadow","Size","Color","ExampleUsage"];try{Shadow.displayName="Shadow",Shadow.__docgenInfo={description:"",displayName:"Shadow",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Shadow"]={docgenInfo:Shadow.__docgenInfo,name:"Shadow",path:"docs/Shadows.stories.tsx#Shadow"})}catch(__react_docgen_typescript_loader_error){}try{Size.displayName="Size",Size.__docgenInfo={description:"",displayName:"Size",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Size"]={docgenInfo:Size.__docgenInfo,name:"Size",path:"docs/Shadows.stories.tsx#Size"})}catch(__react_docgen_typescript_loader_error){}try{Color.displayName="Color",Color.__docgenInfo={description:"",displayName:"Color",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Color"]={docgenInfo:Color.__docgenInfo,name:"Color",path:"docs/Shadows.stories.tsx#Color"})}catch(__react_docgen_typescript_loader_error){}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunk_metamask_design_tokens=self.webpackChunk_metamask_design_tokens||[]).push([[740],{"./node_modules/@storybook/addon-links/dist/react/index.mjs":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{var external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),external_STORYBOOK_MODULE_CORE_EVENTS_=__webpack_require__("@storybook/core-events"),dist=__webpack_require__("./node_modules/@storybook/csf/dist/index.mjs"),{document:chunk_6GSMXRCY_document,HTMLElement}=external_STORYBOOK_MODULE_GLOBAL_.global;var chunk_6GSMXRCY_navigate=params=>external_STORYBOOK_MODULE_PREVIEW_API_.addons.getChannel().emit(external_STORYBOOK_MODULE_CORE_EVENTS_.SELECT_STORY,params),hrefTo=(title,name)=>new Promise((resolve=>{let{location}=chunk_6GSMXRCY_document,query=function parseQuery(queryString){let query={},pairs=("?"===queryString[0]?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"")}return query}(location.search),existingId=[].concat(query.id)[0],titleToLink=title||existingId.split("--",2)[0],path=`/story/${(0,dist.KK)(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,"");resolve(`${location.origin+sbPath}?${Object.entries({path}).map((item=>`${item[0]}=${item[1]}`)).join("&")}`)})),linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),chunk_6GSMXRCY_navigate({kind,story}))},hasListener=!1,off=()=>{hasListener&&(hasListener=!1,chunk_6GSMXRCY_document.removeEventListener("click",linksListener))},react=((0,external_STORYBOOK_MODULE_PREVIEW_API_.makeDecorator)({name:"withLinks",parameterName:"links",wrapper:(getStory,context)=>(hasListener||(hasListener=!0,chunk_6GSMXRCY_document.addEventListener("click",linksListener)),external_STORYBOOK_MODULE_PREVIEW_API_.addons.getChannel().once(external_STORYBOOK_MODULE_CORE_EVENTS_.STORY_CHANGED,off),getStory(context))}),__webpack_require__("./node_modules/react/index.js")),LinkTo=class extends react.PureComponent{constructor(){super(...arguments),this.state={href:"/"},this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href})}},this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&chunk_6GSMXRCY_navigate({title,name})}}componentDidMount(){this.updateHref()}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref()}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return react.createElement("a",{href,onClick:e=>((e,cb=(_e=>{}))=>{(e=>!(0!==e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey))(e)&&(e.preventDefault(),cb(e))})(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0}},"./docs/Shadows.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Color:()=>Color,ExampleUsage:()=>ExampleUsage,Shadow:()=>Shadow,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");__webpack_require__("./node_modules/@storybook/addon-links/dist/react/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 convey elevation of elements on a surface"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--shadow"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"There are 4 different sizes of shadow in MetaMask."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--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:"As well as the neutral colors for shadow 2 other colors exist that are used for the primary and error/danger button hover states"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--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:"example-usage",children:"Example usage"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Using both size and color tokens, different shadows can be applied to components."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{id:"shadows-shadows--example-usage"})}),"\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_stories={title:"Shadows/Shadows",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)}}},argTypes:{size:{control:"select",options:Object.keys(js.Wb.shadows.size)},color:{control:"select",options:["default","primary","error"]}},args:{color:"default",size:"xs"}},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 Shadow=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"})})});Shadow.displayName="Shadow";const Size=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"})})]});Size.displayName="Size";const Color=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"})})]});Color.displayName="Color";const ExampleUsage=()=>(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"})})]})]});ExampleUsage.displayName="ExampleUsage",Shadow.parameters={...Shadow.parameters,docs:{...Shadow.parameters?.docs,source:{originalSource:"args => {\n  return <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}",...Shadow.parameters?.docs?.source}}},Size.parameters={...Size.parameters,docs:{...Size.parameters?.docs,source:{originalSource:'args => {\n  return <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}',...Size.parameters?.docs?.source}}},Color.parameters={...Color.parameters,docs:{...Color.parameters?.docs,source:{originalSource:"args => {\n  return <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}",...Color.parameters?.docs?.source}}},ExampleUsage.parameters={...ExampleUsage.parameters,docs:{...ExampleUsage.parameters?.docs,source:{originalSource:"() => {\n  return <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=["Shadow","Size","Color","ExampleUsage"];try{Shadow.displayName="Shadow",Shadow.__docgenInfo={description:"",displayName:"Shadow",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Shadow"]={docgenInfo:Shadow.__docgenInfo,name:"Shadow",path:"docs/Shadows.stories.tsx#Shadow"})}catch(__react_docgen_typescript_loader_error){}try{Size.displayName="Size",Size.__docgenInfo={description:"",displayName:"Size",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Size"]={docgenInfo:Size.__docgenInfo,name:"Size",path:"docs/Shadows.stories.tsx#Size"})}catch(__react_docgen_typescript_loader_error){}try{Color.displayName="Color",Color.__docgenInfo={description:"",displayName:"Color",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["docs/Shadows.stories.tsx#Color"]={docgenInfo:Color.__docgenInfo,name:"Color",path:"docs/Shadows.stories.tsx#Color"})}catch(__react_docgen_typescript_loader_error){}},"./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 9d1f103a..0fc3a39b 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.49ab05ec.iframe.bundle.js';
+      import './runtime~main.c06a1c07.iframe.bundle.js';
       
       import './173.d2821095.iframe.bundle.js';
       
-      import './main.6d16cf92.iframe.bundle.js';</script></body></html>
\ No newline at end of file
+      import './main.bca65608.iframe.bundle.js';</script></body></html>
\ No newline at end of file
diff --git a/main.6d16cf92.iframe.bundle.js b/main.bca65608.iframe.bundle.js
similarity index 92%
rename from main.6d16cf92.iframe.bundle.js
rename to main.bca65608.iframe.bundle.js
index ea53f10f..38901135 100644
--- a/main.6d16cf92.iframe.bundle.js
+++ b/main.bca65608.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","Installation"]]}}}},"./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: #c65507;\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: #1e7e34;\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-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white010);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange500);\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #ffd33d19;\n  --color-warning-inverse: var(--brand-colors-white-white010);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #28a74519;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white010);\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-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white-white010);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red400);\n  --color-error-muted: #d7384726;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\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-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white-white010);\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,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,iEAAiE;EACjE,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,2DAA2D;EAC3D,+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,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,iEAAiE;EACjE,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,2DAA2D;EAC3D,+DAA+D;EAC/D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,wDAAwD;EACxD,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: #c65507;\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: #1e7e34;\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-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white010);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange500);\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #ffd33d19;\n  --color-warning-inverse: var(--brand-colors-white-white010);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #28a74519;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white010);\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-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white-white010);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red400);\n  --color-error-muted: #d7384726;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\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-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white-white010);\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",497,974,706,202],"./docs/BrandColors.stories.tsx":["./docs/BrandColors.stories.tsx",497,974,706,202],"./docs/Shadows.stories":["./docs/Shadows.stories.tsx",497,974,740],"./docs/Shadows.stories.tsx":["./docs/Shadows.stories.tsx",497,974,740],"./docs/ThemeColors.stories":["./docs/ThemeColors.stories.tsx",497,974,706,880],"./docs/ThemeColors.stories.tsx":["./docs/ThemeColors.stories.tsx",497,974,706,880],"./docs/Typography.stories":["./docs/Typography.stories.tsx",497,974,706,907],"./docs/Typography.stories.tsx":["./docs/Typography.stories.tsx",497,974,706,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",497,385],"./docs/IntroductionColor.stories.mdx":["./docs/IntroductionColor.stories.mdx",497,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","Installation"]]}}}},"./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: #c65507;\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: #1e7e34;\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-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white010);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange500);\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #ffd33d19;\n  --color-warning-inverse: var(--brand-colors-white-white010);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #28a74519;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white010);\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-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white-white010);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red400);\n  --color-error-muted: #d7384726;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\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-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white-white010);\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,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,iEAAiE;EACjE,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,2DAA2D;EAC3D,+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,6DAA6D;EAC7D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,iCAAiC;EACjC,+DAA+D;EAC/D,mEAAmE;EACnE,kCAAkC;EAClC,6DAA6D;EAC7D,qCAAqC;EACrC,qDAAqD;EACrD,yDAAyD;EACzD,8BAA8B;EAC9B,yDAAyD;EACzD,iCAAiC;EACjC,+BAA+B;EAC/B,6DAA6D;EAC7D,iEAAiE;EACjE,gCAAgC;EAChC,yDAAyD;EACzD,mCAAmC;EACnC,2DAA2D;EAC3D,+DAA+D;EAC/D,gCAAgC;EAChC,2DAA2D;EAC3D,mCAAmC;EACnC,sDAAsD;EACtD,0DAA0D;EAC1D,6BAA6B;EAC7B,wDAAwD;EACxD,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: #c65507;\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: #1e7e34;\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-alternative: var(--brand-colors-blue-blue600);\n  --color-primary-muted: #0376c919;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white010);\n  --color-secondary-disabled: #f66a0a80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red600);\n  --color-error-muted: #d7384719;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-orange-orange500);\n  --color-warning-alternative: var(--brand-colors-yellow-yellow600);\n  --color-warning-muted: #ffd33d19;\n  --color-warning-inverse: var(--brand-colors-white-white010);\n  --color-warning-disabled: #ffd33d80;\n  --color-success-default: var(--brand-colors-green-green500);\n  --color-success-alternative: var(--brand-colors-green-green500);\n  --color-success-muted: #28a74519;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white010);\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-alternative: var(--brand-colors-blue-blue300);\n  --color-primary-muted: #1098fc26;\n  --color-primary-inverse: var(--brand-colors-white-white010);\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-white-white010);\n  --color-secondary-disabled: #f8883b80;\n  --color-error-default: var(--brand-colors-red-red500);\n  --color-error-alternative: var(--brand-colors-red-red400);\n  --color-error-muted: #d7384726;\n  --color-error-inverse: var(--brand-colors-white-white010);\n  --color-error-disabled: #d7384780;\n  --color-error-shadow: #d7384766;\n  --color-warning-default: var(--brand-colors-yellow-yellow500);\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-alternative: var(--brand-colors-green-green400);\n  --color-success-muted: #28a74526;\n  --color-success-inverse: var(--brand-colors-white-white010);\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-white-white010);\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",497,244,11,202],"./docs/BrandColors.stories.tsx":["./docs/BrandColors.stories.tsx",497,244,11,202],"./docs/Shadows.stories":["./docs/Shadows.stories.tsx",497,244,740],"./docs/Shadows.stories.tsx":["./docs/Shadows.stories.tsx",497,244,740],"./docs/ThemeColors.stories":["./docs/ThemeColors.stories.tsx",497,244,11,880],"./docs/ThemeColors.stories.tsx":["./docs/ThemeColors.stories.tsx",497,244,11,880],"./docs/Typography.stories":["./docs/Typography.stories.tsx",497,244,11,907],"./docs/Typography.stories.tsx":["./docs/Typography.stories.tsx",497,244,11,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",497,385],"./docs/IntroductionColor.stories.mdx":["./docs/IntroductionColor.stories.mdx",497,244,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 3715f3c5..38d63fff 100644
--- a/project.json
+++ b/project.json
@@ -1 +1 @@
-{"generatedAt":1705454378797,"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.4","storybookVersionSpecifier":"^7.5.0","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.4"},"@storybook/react":{"version":"7.6.4"},"@storybook/react-webpack5":{"version":"7.6.4"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.4"}},"addons":{"@storybook/addon-links":{"version":"7.6.4"},"@storybook/addon-essentials":{"version":"7.6.4"},"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-a11y":{"version":"7.6.4"},"@storybook/addon-mdx-gfm":{"version":"7.6.4"}}}
+{"generatedAt":1705596451242,"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.4","storybookVersionSpecifier":"^7.5.0","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.4"},"@storybook/react":{"version":"7.6.4"},"@storybook/react-webpack5":{"version":"7.6.4"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.4"}},"addons":{"@storybook/addon-links":{"version":"7.6.4"},"@storybook/addon-essentials":{"version":"7.6.4"},"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-a11y":{"version":"7.6.4"},"@storybook/addon-mdx-gfm":{"version":"7.6.4"}}}
diff --git a/runtime~main.49ab05ec.iframe.bundle.js b/runtime~main.49ab05ec.iframe.bundle.js
deleted file mode 100644
index edfe23ef..00000000
--- a/runtime~main.49ab05ec.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:"deec3ff3",181:"0de26f4d",202:"71ec6e2b",341:"d6fef0f4",385:"ea9780c4",426:"b9191c34",433:"4e85ea27",497:"351ba4b6",607:"dda89155",670:"c3506f37",706:"aba8ab90",729:"ab705b55",740:"f5ce614c",797:"26013dc4",880:"e1aa970e",907:"159db782",974:"0fb44297"}[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.c06a1c07.iframe.bundle.js b/runtime~main.c06a1c07.iframe.bundle.js
new file mode 100644
index 00000000..c9f3d586
--- /dev/null
+++ b/runtime~main.c06a1c07.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:"81786988",115:"deec3ff3",181:"f05bbeaa",202:"71ec6e2b",244:"d9d3a62a",341:"d6fef0f4",385:"ea9780c4",426:"b9191c34",433:"4e85ea27",497:"351ba4b6",607:"dda89155",670:"c3506f37",729:"ab705b55",740:"f83a1926",797:"26013dc4",880:"e1aa970e",907:"159db782"}[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