https://zendeskgarden-v8.netlify.app/component---src-pages-patterns-save-mdx-6aa39a76eec3ec6e38ff.js
1"use strict";(self.webpackChunk_zendeskgarden_website=self.webpackChunk_zendeskgarden_website||[]).push([[9422],{97253:function(e,a,t){t.d(a,{l:function(){return s}});var n=t(67294),l=t(45697),r=t.n(l);const s=function(e){let{duration:a=1250,delayMS:t=750,loop:l=!0}=void 0===e?{}:e;const[r,s]=(0,n.useState)(0),[o,i]=(0,n.useState)(!1);return(0,n.useLayoutEffect)((()=>{let e,n,r,o=!1;const c=()=>{o||(e=requestAnimationFrame(m))},m=()=>{s(Date.now()-n),c()},p=()=>{o||(r=setTimeout((()=>{cancelAnimationFrame(e),s(Date.now()-n),l&&p()}),a),n=Date.now(),i(!0),c())},d=setTimeout(p,t);return()=>{o=!0,clearTimeout(d),clearTimeout(r),cancelAnimationFrame(e)}}),[a,t,l]),{elapsed:Math.min(1,r/a),delayMS:t,delayComplete:o}},o=e=>{let{children:a,render:t=a,...l}=e;return n.createElement(n.Fragment,null,t(s(l)))};o.defaultProps={duration:1250,delayMS:750,loop:!0},o.propTypes={children:r().func,render:r().func,duration:r().number,loop:r().bool,delayMS:r().number}},38856:function(e,a,t){t.d(a,{b:function(){return v}});var n=t(67294),l=t(45697),r=t.n(l),s=t(12788),o=t(97253),i=t(22445);const c=(0,s.keyframes)(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]),m=(0,s.keyframes)(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]),p=(0,s.keyframes)(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);var d=t(86361);const g=s.default.circle.attrs({cy:36,r:9}).withConfig({displayName:"StyledDots__StyledDotsCircle",componentId:"sc-1ltah7e-0"})([""]);g.defaultProps={theme:d.Z};const f=(e,a)=>(0,s.css)(["animation:"," ","ms linear infinite;"],e,a.duration),h=(0,s.default)(g).attrs({cx:9}).withConfig({displayName:"StyledDots__StyledDotsCircleOne",componentId:"sc-1ltah7e-1"})(["",";"],(e=>f(c,e)));h.defaultProps={theme:d.Z};const u=(0,s.default)(g).attrs((()=>({cx:40}))).withConfig({displayName:"StyledDots__StyledDotsCircleTwo",componentId:"sc-1ltah7e-2"})(["",";"],(e=>f(m,e)));u.defaultProps={theme:d.Z};const b=(0,s.default)(g).attrs((()=>({cx:71}))).withConfig({displayName:"StyledDots__StyledDotsCircleThree",componentId:"sc-1ltah7e-3"})(["",";"],(e=>f(p,e)));b.defaultProps={theme:d.Z};var A=t(32912),w=t(92554);const v=(0,n.forwardRef)(((e,a)=>{let{size:t,color:l,duration:r,delayMS:c,...m}=e;const p=(0,n.useContext)(s.ThemeContext),d=(0,i.k)(p),g=(0,n.useRef)(null);if(d&&null===g.current){const e=d.createElementNS("http://www.w3.org/2000/svg","svg");g.current="transform"in e}const{delayComplete:f}=(0,o.l)({duration:r,delayMS:c,loop:!0}),v=(0,n.useRef)(null),x=(0,n.useRef)(null),E=(0,n.useRef)(null);return(0,n.useEffect)((()=>
1{if(!g.current&&f){const e=[window.getComputedStyle(v.current).getPropertyValue("transform"),window.getComputedStyle(x.current).getPropertyValue("transform"),window.getComputedStyle(E.current).getPropertyValue("transform")];v.current.setAttribute("transform",e[0]),x.current.setAttribute("transform",e[1]),E.current.setAttribute("transform",e[2])}})),f||0===c?n.createElement(w.b,Object.assign({ref:a,fontSize:t,color:l,width:"80",height:"72",dataGardenId:"loaders.dots"},m),n.createElement("g",{fill:"currentColor"},n.createElement(h,{duration:r,ref:v}),n.createElement(u,{duration:r,ref:x}),n.createElement(b,{duration:r,ref:E}))):n.createElement(A.N,{fontSize:t},"Â ")}));v.displayName="Dots",v.propTypes={size:r().any,duration:r().number,color:r().string,delayMS:r().number},v.defaultProps={size:"inherit",color:"inherit",duration:1250,delayMS:750}},32912:function(e,a,t){t.d(a,{N:function(){return o}});var n=t(12788),l=t(93835),r=t(86361);const s="loaders.loading_placeholder",o=n.default.div.attrs({"data-garden-id":s,"data-garden-version":"8.76.9",role:"progressbar"}).withConfig({displayName:"StyledLoadingPlaceholder",componentId:"sc-x3bwsx-0"})(["display:inline-block;width:",";height:",";font-size:",";",""],(e=>e.width||"1em"),(e=>e.height||"0.9em"),(e=>e.fontSize),(e=>(0,l.Z)(s,e)));o.defaultProps={theme:r.Z}},92554:function(e,a,t){t.d(a,{b:function(){return s}});var n=t(12788),l=t(93835),r=t(86361);const s=n.default.svg.attrs((e=>({"data-garden-version":"8.76.9",xmlns:"http://www.w3.org/2000/svg",width:e.width,height:e.height,focusable:"false",viewBox:`0 0 ${e.width} ${e.height}`,role:"img"}))).withConfig({displayName:"StyledSVG",componentId:"sc-1xtc3kx-0"})(["width:",";height:",";color:",";font-size:",";",";"],(e=>e.containerWidth||"1em"),(e=>e.containerHeight||"0.9em"),(e=>e.color||"inherit"),(e=>e.fontSize||"inherit"),(e=>(0,l.Z)(e.dataGardenId,e)));s.defaultProps={theme:r.Z}},21397:function(e,a,t){t.r(a),t.d(a,{Head:function(){return i}});var n=t(11151),l=t(67294),r=t(65900),s=t(92916),o=t(68037);function i(e){return l.createElement(r.HJ,e)}function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ol:"ol",li:"li",strong:"strong",p:"p",ul:"ul",h4:"h4",code:"code",hr:"hr"},(0,n.a)(),e.components),{CodeExample:t,BestPractice:r,Do:i,Dont:c,ImageFigure:p}=a;return r||m("BestPractice",!0),t||m("CodeExample",!0),i||m("Do",!0),c||m("Dont",!0),p||m("ImageFigure",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"anatomy",style:{position:"relative"}},l.createElement(a.a,{href:"#anatomy","aria-label":"anatomy permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Anatomy"),"\n",l.createElement(a.h3,{id:"action-footer",style:{position:"relative"}},l.createElement(a.a,{href:"#action-footer","aria-label":"action footer permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Action footer"),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.4%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABg0lEQVR42pVT20rDQBAN9kFBBL/DdwXFQqWC/+CLf9Ef8Tf8Al+1vijYVhEjtAVFbJvekjV7TXKc3YZSi/YycJhNspw5c2bilSsV1FstZACYUBDKQGmNJE2xKLIsm8KG1gZxzOHtnV/g/uUVnW4Av9lGN+iDc4GYcwghJ5ASXAg6C0ilXE7/KejtFMuo1hswdDGMIozDkAg5jCGlSlNl7aor+m7P9r3NCwhPcdd4RpokGI5DDIYjUqSmba0b3nauUFEbYyK0CgyRWwUWCZ2X+fmLcPOw5Agl+fbV6SLoD9AjHycIMKIi1rdVtXobB0Xc1uruwZo/VZbn+WkuJSwQ4c1jDSxi6PQCNxA7AEnkdihre1iYUTiMYjAuIXXi9lGbZOEe2kitesomsd3YlvePibDhPkZcIZbG4ZtgiNBenkWaE/m+7zppNZtgjOG93XI/hLd1dIJqTji/W7P+zSN1m5DB0I4OmMTl9Rs++jG83dIZ7eHTn4SrRELkoTC4evhEL5L4AdnAjYCb12A8AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern anatomy"\n title=""\n src="/static/19129e2c8a9cc2ca5e50adf715b0e692/1263b/patterns-save-anatomy-action-footer.png"\n srcset="/static/19129e2c8a9cc2ca5e50adf715b0e692/86700/patterns-save-anatomy-action-footer.png 250w,\n/static/19129e2c8a9cc2ca5e50adf715b0e692/0eb09/patterns-save-anatomy-action-footer.png 500w,\n/static/19129e2c8a9cc2ca5e50adf715b0e692/1263b/patterns-save-anatomy-action-footer.png 1000w,\n/static/19129e2c8a9cc2ca5e50adf715b0e692/6ffd1/patterns-save-anatomy-action-footer.png 1500w,\n/static/19129e2c8a9cc2ca5e50adf715b0e692/f97d7/patterns-save-anatomy-action-footer.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"The ",l.createElement(a.strong,null,"Save")," button is the ",l.createElement(a.a,{href:"/components/button#type"},"primary button")," on a page, placed at the end\nof all form inputs"),"\n",l.createElement(a.li,null,"The ",l.createElement(a.strong,null,"Cancel")," button is a ",l.createElement(a.a,{href:"/components/button#type"},"basic button"),", left of the Save button"),"\n",l.createElement(a.li,null,"In a ",l.createElement(a.a,{href:"/components/chrome#footer"},"page footer"),", the Save and Cancel buttons remain fixed"),"\n"),"\n",l.createElement(a.h3,{id:"saving-changes",style:{position:"relative"}},l.createElement(a.a,{href:"#saving-changes","aria-label":"saving changes permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Saving changes"),"\n",l.createElement(a.p,null,"Saving applies to a page or view."),"\n",l.createElement(a.p,null,"Always ",l.createElement(a.a,{href:"/patterns/buttons#disabled"},"enable")," the Save button for users to trigger an action even if\nthere are no new changes to save."),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"If there are tabs, save all data per tab"),"\n",l.createElement(a.li,null,"If the page or tab has an indication of the last edit date, that timestamp should update"),"\n",l.createElement(a.li,null,"After changes are saved, show a loader inside the Save button if saving takes time, and ignore\ntrigger actions for the duration"),"\n",l.createElement(a.li,null,"Ensure a custom, translated label for the loader is provided on implementation"),"\n"),"\n","\n",l.createElement(t,{code:o.Z},l.createElement(s.Z)),"\n",l.createElement(a.h3,{id:"notifications",style:{position:"relative"}}
1,l.createElement(a.a,{href:"#notifications","aria-label":"notifications permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Notifications"),"\n",l.createElement(a.h4,{id:"successful-save",style:{position:"relative"}},l.createElement(a.a,{href:"#successful-save","aria-label":"successful save permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Successful save"),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.4%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABkUlEQVR42pWTT0rDQBTGg10oiOA53CsoFioVvIMbb9GbeAuv4ErrpgvbqkUXrQu1bZo2/zOZyST5fDOJUiRCOvAxk0nm97733sRodzoYTCbIAQSxQCwkRJIgzTJUjTiOkaap/j7Lc+R5rvcTKRGGEYyDyyv0Rq+Ymxbexu8wrSUYixExRod5Ic71syTQ6GWE6XQG03fw6SzhRoE2EAsBQVBjr9lGdzCEpA3P9+F6HgHpML0UIkGSKKm10GvlnJHLMGI0UyBaK4UkBSbgOR6Gz8gouu16WNkOORI6jZ90NhnGbulQUASXgMqZSi0jJ0qqXv/VsxK4fdzSQE51m81NWMsVFlTHQhYcCsIp3bpeja2jJu77g6KDVPxfZ+Wcl52sm77RIODdYx+BH2C+sHRDVAM4wVVTNq5hY82h7UcIGAdPUn0fE5nWBmWZykKlfHhKwKHe9JlAxKVWSJKyuMB1hHI2dk7O0C2B2Z9urtevSupPScmZHQpc347xsWIw9lsXdA+fKoF1hgJ6TOKm94WFz/ENgLuNEx/kiCwAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern success notification"\n title=""\n src="/static/c4eb5977dc0171138c3d2cf2a72acbad/1263b/patterns-save-anatomy-success-notification.png"\n srcset="/static/c4eb5977dc0171138c3d2cf2a72acbad/86700/patterns-save-anatomy-success-notification.png 250w,\n/static/c4eb5977dc0171138c3d2cf2a72acbad/0eb09/patterns-save-anatomy-success-notification.png 500w,\n/static/c4eb5977dc0171138c3d2cf2a72acbad/1263b/patterns-save-anatomy-success-notification.png 1000w,\n/static/c4eb5977dc0171138c3d2cf2a72acbad/6ffd1/patterns-save-anatomy-success-notification.png 1500w,\n/static/c4eb5977dc0171138c3d2cf2a72acbad/f97d7/patterns-save-anatomy-success-notification.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"A success ",l.createElement(a.a,{href:"/components/notifications"},"notification")," appears at the top right of the screen\nindicating changes have been saved"),"\n"),"\n",l.createElement(r,null,l.createElement(i,{imageIsFreeForm:!0,imageSource:e.data.saveSuccessDo.childFile.childImageSharp.gatsbyImageData},l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Use transient notifications to confirm saving actions"),"\n")),l.createElement(c,{imageIsFreeForm:!0,imageSource:e.data.saveSuccessDont.childFile.childImageSharp.gatsbyImageData},l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Do not place actions inside notifications as it is transient and inaccessible"),"\n"))),"\n",l.createElement(a.h2,{id:"states",style:{position:"relative"}},l.createElement(a.a,{href:"#states","aria-label":"states permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"States"),"\n",l.createElement(a.h3,{id:"save-errors",style:{position:"relative"}},l.createElement(a.a,{href:"#save-errors","aria-label":"save errors permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.
1638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Save errors"),"\n",l.createElement(a.p,null,"Errors can be presented in a variety of ways, depending on the issue."),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.4%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABgklEQVR42o1Ty0oDMRQd6kJBBL/DvQVFpVLEf3DjX/RP/At/wZW2Lrqw04IipUUQkWnptPPMJJnkeJNptYqOc+FwE2Zy7jm5N06z1YI7HkMDiBgH4xJcCORKoSy01p8wIYREkqRw9i4u0X18gudN8Tx6gTedIWUMSZqCUTZrlmVFJmSc26z+KOjsHDfRdvsQ9OMiCDCfL2wlmefgXEBKaatz+i7Eai9KCE/OcO8OjGawIEQWRpApKSAyOoXRcEgFElQNZ5sUdkghTOU4gSbi9Siz9yvh5kEDd70+QlL27k0QRDFZD7EIC8SkztybrkpYqx8RoWs3URwjIsKYlBqYdUYNUWvd/Jdwo36M2wcXnA76iwB5rqxFMzZKFSR6ieqEPUPIMfPnVpnprlFmrFYNU9yYcGr7X5b9iCFMOQ24QJAKOy56TWEZVk6crcNTtKkpdtqp0/nSbmFZfXsRP2HuNidlfsxxdTPC64xeym7jHJ3+YCm7+niswhAGqcR19w2TMMMHzqOOdqxvL7cAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern error single field"\n title=""\n src="/static/6568cf8f8ac6380f232bca4b075af210/1263b/patterns-save-errors.png"\n srcset="/static/6568cf8f8ac6380f232bca4b075af210/86700/patterns-save-errors.png 250w,\n/static/6568cf8f8ac6380f232bca4b075af210/0eb09/patterns-save-errors.png 500w,\n/static/6568cf8f8ac6380f232bca4b075af210/1263b/patterns-save-errors.png 1000w,\n/static/6568cf8f8ac6380f232bca4b075af210/6ffd1/patterns-save-errors.png 1500w,\n/static/6568cf8f8ac6380f232bca4b075af210/f97d7/patterns-save-errors.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"Show validation errors inline if the Save button is actioned but something is wrong"),"\n"),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.4%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABiklEQVR42pWT30oCQRTGF7soqKDn6L6gSDAMeoduegvfpLfoFbrKDOoiV0EtyihNQ0r37+zOzs58ndldRUnNDnycmYvzO9+ZP0axVILZbkMpwA04wkiARxFiKbEsFBWMpSOiOt9nMHbPznHXaKL/OUDr+RX9wRf8IAALQgQhJ6U52fOQGkYIaB3H8xsa2/kiKmYdkDFC10Xk+YlCxwV3vcl+vBa+3nuQQswHbuVPcKuBlg2r+Qir0YLdegJ7e4cajoCRNSOls+1g2Ouj0+1Oxp8ANxOHNdBc8Lo9uAQKaXx4jA7VA8jpPHGahjH22+H6QQHlqglBQJs6a3FaQ1/KgrGWhZHbzydAkGtBjpTuKmIoLbo5TI2zEnCNgNcPJjgduGPR+cQE0u4mUqlWBCfAMgF1iDhzNAOUSZO/xpdSJaVGbu8oG1khoich6c0p7XJaBEsysFDIsrFxeIybai11yIK0eOoXLJMkxeRs6HFcXL2g800/ZadwikqtntmW/75VDbSZwOX9BwZOiB+BlYysXdle8gAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern multiple errors"\n title=""\n src="/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/1263b/patterns-save-validation-alert.png"\n srcset="/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/86700/patterns-save-validation-alert.png 250w,\n/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/0eb09/patterns-save-validation-alert.png 500w,\n/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/1263b/patterns-save-validation-alert.png 1000w,\n/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/6ffd1/patterns-save-validation-alert.png 1500w,\n/static/f0aff3df9b4b0b70cfbdc7ec3550cba1/f97d7/patterns-save-validation-alert.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"An error ",l.createElement(a.a,{href:"/components/alerts#type"},"alert")," that summarizes the errors at the top of the page improves\nscreen reader accessibility"),"\n"),"\n",l.createElement(a.h3,{id:"unsaved-changes",style:{position:"relative"}},l.createElement(a.a,{href:"#unsaved-changes","aria-label":"unsaved changes permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Unsaved changes"),"\n",l.createElement(a.p,null,"If a user navigates away from a page, tab or stepper flow before applying changes, use an Unsaved\nchanges modal."),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 62.4%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3klEQVR42qVT204TYRDu2yBccOUNclOIURsoPdjdbffUExTljgtegGBijKgvQEhQqpBqCNJQoLTQg/ACJigJyYYXoC0X9Pg5/9/tQisaiX/y5Z+dmf2+2ZlZ2/1H43DLIQTC05CCMUihGPwc09z3r2DvSMEp2AZHHsMVCEJQo/AQsahPWgl/I1AizyATev22/gcjmPDrloJXCcNNAk/pZgLM7sBjom13xLtJbfdMQqY2IWlYePUWmcMCNpMppPYyyOaLOMgVkc0VuP8g/w0ZsvNHx3jx+h28JKpEn/9eIfsEhzeAlfg62KnVamg2m+g9jXqdYlVus1ynoEKdnLkm7Buyw2kSPvFIWFqJ8+SLUgnlcgWVyiXZZVSvqqg1WvhxeobTM4PnLH/4+GdCjZxjPtmqsNVqoU7VGIaBBtnsLBXOMff5J2bXTvD1ewmf1hMYE5RbCCUdARqKU1Qx/3KR+lXk/WPYSu3SnUVqP4tEMo3VjR28/7KNrXSO+v2GD66rh50K2YPIpxwhAY0GpMNF4BOmuIvglYPwKSEONm1Bi1qr4+8lZAGRFpsHWJK5Z0z9JuRIG237emXUKMvna2NvT/lG2XeFQIU89IXh0+lPGRge/S9CP29VDA4xAkGP4Re+eEH/2GLXSQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern Unsaved changes"\n title=""\n src="/static/7dee8269fd0ae99989c0347ab4b9264a/1263b/patterns-save-unsaved-changes.png"\n srcset="/static/7dee8269fd0ae99989c0347ab4b9264a/86700/patterns-save-unsaved-changes.png 250w,\n/static/7dee8269fd0ae99989c0347ab4b9264a/0eb09/patterns-save-unsaved-changes.png 500w,\n/static/7dee8269fd0ae99989c0347ab4b9264a/1263b/patterns-save-unsaved-changes.png 1000w,\n/static/7dee8269fd0ae99989c0347ab4b9264a/6ffd1/patterns-save-unsaved-changes.png 1500w,\n/static/7dee8269fd0ae99989c0347ab4b9264a/f97d7/patterns-save-unsaved-changes.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Leave without saving")," reverts all values on the page to the last saved state without reloading the\npage"),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Go back")," returns to the previous view without discarding changes and reloading the page"),"\n"),"\n",l.createElement(a.h3,{id:"canceling-changes",style:{position:"relative"}},l.createElement(a.a,{href:"#canceling-changes","aria-label":"canceling changes permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Canceling changes"),"\n",l.createElement(a.p,null,l.createElement(a.strong,null,"Cancel")," actively discards changes the user made and dismisses the current view. Cancel should never\nclear the form, or clear changes and reload the page. This increases the risk of accidental data loss."),"\n",l.createElement(a.h2,{id:"workflows",style:{position:"relative"}},l.createElement(a.a,{href:"#workflows","aria-label":"workflows permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.
1638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Workflows"),"\n",l.createElement(a.h3,{id:"basic-form",style:{position:"relative"}},l.createElement(a.a,{href:"#basic-form","aria-label":"basic form permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Basic form"),"\n",l.createElement(a.p,null,l.createElement(a.a,{href:"https://drive.google.com/file/d/1L99ZenUxZ4BIAR3DVU-VcQk46ym4Owpa/view"},"Watch video")),"\n",l.createElement(a.h3,{id:"tabs",style:{position:"relative"}},l.createElement(a.a,{href:"#tabs","aria-label":"tabs permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Tabs"),"\n",l.createElement(a.p,null,l.createElement(a.a,{href:"https://drive.google.com/file/d/18be1JMbsHBDSoEHmmZZ6r-O91MgtAvC3/view"},"Watch video")),"\n",l.createElement(a.h2,{id:"localization--internationalization",style:{position:"relative"}},l.createElement(a.a,{href:"#localization--internationalization","aria-label":"localization internationalization permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Localization & internationalization"),"\n",l.createElement(a.h3,{id:"rtl-right-to-left",style:{position:"relative"}},l.createElement(a.a,{href:"#rtl-right-to-left","aria-label":"rtl right to left permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.
1638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"RTL (right-to-left)"),"\n",l.createElement(a.p,null,"For RTL languages, the layout of the interface is mirrored."),"\n",l.createElement(p,{caption:"Arabic RTL notification example",imgAlt:"Arabic RTL notification example",imageSource:e.data.saveLocalizationArabic.childFile.childImageSharp.gatsbyImageData}),"\n",l.createElement(a.h2,{id:"accessibility",style:{position:"relative"}},l.createElement(a.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Accessibility"),"\n",l.createElement(a.h3,{id:"tabbing-order",style:{position:"relative"}},l.createElement(a.a,{href:"#tabbing-order","aria-label":"tabbing order permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Tabbing order"),"\n",l.createElement(a.h4,{id:"basic-form-left-to-right",style:{position:"relative"}},l.createElement(a.a,{href:"#basic-form-left-to-right","aria-label":"basic form left to right permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Basic form (left-to-right)"),"\n",l.createElement(a.p,null,"For the main content area."),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 79.2%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2ElEQVR42q1Uy27TQBT1H5TuQKJd8h2tkNogFZAKYsH/IJZ8CH8CGzY0jps0tmloYzuJnXienvHhjuMKuaoqB3Glozszks+ce89cewfn7zAax3BhTQ0ra9R1Czqj9HffYLu/H0IIXM9+w/vw+RP8bzOsrgRuJmssfpaQUsFYg8eiewkJsRZaV/BevP8IP4xwczvHZBojWy3B6TbGGBh34LTmKEvWZKfErSvz8IXe81dv4U8jiJKjyElhtgKntbtR5hq6rBq1piIQiTt3+aGyG8Kng9cYBiHYXCCNV8gIPFWoS+pLWEEvbVsjeoX3bPAG/iTEJi2Rp2tSZKA2mkBknNZcQy4J11U/wv2XA1wMw6bMeZIiSRdIkwwJwe3zYg2xUVCJ6aXU2zs6wfAyAhSaD620XShyUdRN7qXwyfEpLiZTLOZL3M4SsIKcLCX4RkAUElYTod2+v16Ee8cn8IOI1ABZVpLT9GSoh4x6x2IFnZndTHElj8ZUMpnJyAjFDCRBkDmGSq2rnkwdwuhu9OxWSYvaYufoEtp/YGjn3bZz/l8Iuy4fnWJEs+zCUMn3h/5R0N9JUa+LK4nvPxbIxgLe4dk5gvhXq3A3A2p6UqKokEcKX74GCEZr/AFqxcIzPxcJmgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern action footer focus"\n title=""\n src="/static/e8b8c66314e6d85dae4a1fb168e82384/1263b/patterns-save-action-footer-focus.png"\n srcset="/static/e8b8c66314e6d85dae4a1fb168e82384/86700/patterns-save-action-footer-focus.png 250w,\n/static/e8b8c66314e6d85dae4a1fb168e82384/0eb09/patterns-save-action-footer-focus.png 500w,\n/static/e8b8c66314e6d85dae4a1fb168e82384/1263b/patterns-save-action-footer-focus.png 1000w,\n/static/e8b8c66314e6d85dae4a1fb168e82384/6ffd1/patterns-save-action-footer-focus.png 1500w,\n/static/e8b8c66314e6d85dae4a1fb168e82384/f97d7/patterns-save-action-footer-focus.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"Breadcrumb, âShopâ"),"\n",l.createElement(a.li,null,"Breadcrumb, âCustomizeâ"),"\n",l.createElement(a.li,null,"Input, âSection name requiredâ"),"\n",l.createElement(a.li,null,"Input, âDescription requiredâ"),"\n",l.createElement(a.li,null,"File Upload, âDrag files here or click to uploadâ"),"\n",l.createElement(a.li,null,"Button, âCancelâ"),"\n",l.createElement(a.li,null,"Button, âSaveâ"),"\n"),"\n",l.createElement(a.h4,{id:"basic-form-validation",style:{position:"relative"}},l.createElement(a.a,{href:"#basic-form-validation","aria-label":"basic form validation permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Basic form validation"),"\n",l.createElement(a.p,null,"Screen readers will read the alert message at the top of the page to summarise all errors\non the page or view."),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 79.2%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB50lEQVR42p1U227TQBD1HwBvSCBe+Y1WSG2RuIjbC7+DeOZD+BRekBB14jaNTSE0Js6u471417t7GDtOiwIphpWOPLbXZ8+ZGU9099kLJF/O0S4fAsJAbC+tNb5+myF69eYt0os5pLZYlJKuBrUxcM7hurV9gPce1jaI7r98jdE0w4xIT9MMebGEqmsi1pBKrUGxkLKLNb0TUqHZcWB05+FTJEREO2FXFRqC5SXMksFVFUH0WMdeUEx7grV/Jrx9+BgnLWHBwD7HYJ+OUcZjqOwcgdSC8d9Bh0HpHYRHT3qFZC3PIb7PYBkRmZqg6LkE5BZIJXYpvPXgCHGSQi1r8B8CbF5BMwOvA9SZhV24vggYtKIbewcYnaZAZWEWlKNVS+bhladcOfh6INOG8ObeIeJJClEIVISOrPYdkTctPBruoLPeYvibwv0DxKO0u3E+dB+EDXzPQcS2cAMJO8tUFBXQMEU21/n7FU6t1Q62fHw2BaO2yec5TNuP1PGG/hbbNJdKhxdlnwhPUkiuMb/g4AW1T2kghUE11ZdVvtZq2MyBjeWELFPOV8xC8KZDVTbUj1Rl9R9VHreN3RbF+atpMmTquAAjHMpJjQ8fCywmGtG9R8+vxpf/NzXBBmhywjODd+8TJOMVfgJza7/4ZIitdQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern validation alert focus"\n title=""\n src="/static/0bb172f9e5bff28ab2e2259452137bc0/1263b/patterns-save-validation-alert-focus.png"\n srcset="/static/0bb172f9e5bff28ab2e2259452137bc0/86700/patterns-save-validation-alert-focus.png 250w,\n/static/0bb172f9e5bff28ab2e2259452137bc0/0eb09/patterns-save-validation-alert-focus.png 500w,\n/static/0bb172f9e5bff28ab2e2259452137bc0/1263b/patterns-save-validation-alert-focus.png 1000w,\n/static/0bb172f9e5bff28ab2e2259452137bc0/6ffd1/patterns-save-validation-alert-focus.png 1500w,\n/static/0bb172f9e5bff28ab2e2259452137bc0/f97d7/patterns-save-validation-alert-focus.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"Input, âSection name required, enter a section nameâ"),"\n",l.createElement(a.li,null,"Input, âDescription required, enter a descriptionâ"),"\n",l.createElement(a.li,null,"File Upload, âDrag files here or click to uploadâ"),"\n",l.createElement(a.li,null,"Button, âCancelâ"),"\n",l.createElement(a.li,null,"Button, âSaveâ"),"\n"),"\n",l.createElement(a.h4,{id:"unsaved-changes-1",style:{position:"relative"}},l.createElement(a.a,{href:"#unsaved-changes-1","aria-label":"unsaved changes 1 permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Unsaved changes"),"\n",l.createElement(a.p,null,"Focus will be trapped inside the modals interactive elements until the user actions those elements,\npresses ",l.createElement(a.code,null,"esc")," or clicks outside the modal."),"\n",l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1000px; margin-bottom: 20px;"\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 79.2%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACAUlEQVR42q2USU/bQBTH/XWglCuHFqoWWoEKbRJncewEnJ1yaA8kVGpZ0iScEd+AY8XSJBS+AYhKHLghgdRDRdsTUBE5hODl3zeTGMpSwjbSzx7b49+8eW9soaXjOVxKCHJ4EP5Q4tb4BmIQA2EIbT2vIQYjdCMOT3+MnyW1xk2l7B2h9ckLOClCdzAMlxyCJxjlszXifxMKLe1dXCjRIC+jP8ofsBQ0JHQxTcKDx508h1JdJlKfReqmfIhXQSvyqrFLhO2dPEK2DDflcvBdCu/Hs0iNfjphhDGWOWWcSGYQTyThOycVmh8940K2hG6HD/OFr2Btb38f5fIhLHZBB9M0YRgmdKJq6DB+AJ9nFtEnBRCIvDkVNtWFgegQXrplfCkuceFBqQRNK3OppmlcaDej3l8oLqPXo/B3z0Yoq7xq3U4fDaoJdd2AaVmwDAvVioHD78dYW9/FwrdfmFvdwfbGEQrzJPSSMDJ0MUKFwu4R/ZjNF7nwqFolqQ79WMfBbgWl3xUsr/zE9OIWpvKbWNn4g3xhqRbh+SWzKiuUQw9VOf52mIqQwfCHNJIfJ4g0RojUaBoTmSxyuUlkszmk6czGsmKeKYottD89e+tcBkuNg+FX4STsPXul8Fob+h8aCm+Lwie4J6GkJvBKjvCfi/CQvuW7CJmM/aGeugbgUKL4C+Kz7fqXLg4gAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Save pattern Unsaved changes focus"\n title=""\n src="/static/da37439d6d4460da121422efd390f699/1263b/patterns-save-unsaved-changes-focus.png"\n srcset="/static/da37439d6d4460da121422efd390f699/86700/patterns-save-unsaved-changes-focus.png 250w,\n/static/da37439d6d4460da121422efd390f699/0eb09/patterns-save-unsaved-changes-focus.png 500w,\n/static/da37439d6d4460da121422efd390f699/1263b/patterns-save-unsaved-changes-focus.png 1000w,\n/static/da37439d6d4460da121422efd390f699/6ffd1/patterns-save-unsaved-changes-focus.png 1500w,\n/static/da37439d6d4460da121422efd390f699/f97d7/patterns-save-unsaved-changes-focus.png 2000w"\n sizes="(max-width: 1000px) 100vw, 1000px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </span>'}}),"\n",l.createElement(a.ol,null,"\n",l.createElement(a.li,null,"Button, âGo backâ"),"\n",l.createElement(a.li,null,"Button, âLeave without savingâ"),"\n",l.createElement(a.li,null,"Icon button, âClose modalâ"),"\n"),"\n",l.createElement(a.h4,{id:"additional-resources",style:{position:"relative"}},l.createElement(a.a,{href:"#additional-resources","aria-label":"additional resources permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Additional resources"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.a,{href:"https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html"},"https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html")),"\n",l.createElement(a.li,null,l.createElement(a.a,{href:"https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html"},"https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html")),"\n",l.createElement(a.li,null,l.createElement(a.a,{href:"https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html"},"https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html")),"\n"),"\n",l.createElement(a.hr),"\n",l.createElement(a.h2,{id:"feedback",style:{position:"relative"}},l.createElement(a.a,{href:"#feedback","aria-label":"feedback permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
1\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Feedback"),"\n",l.createElement(a.p,null,"Help improve this page. ",l.createElement(a.a,{href:"https://forms.gle/VFD799SvNfs2yiFC7"},"Give us your feedback")))}function m(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e={}){const{wrapper:a}=Object.assign({},(0,n.a)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},92916:function(e,a,t){var n=t(67294),l=t(12788),r=t(48812),s=t(59921),o=t(23720),i=t(38856);a.Z=()=>{const e=(0,n.useContext)(l.ThemeContext),a=(0,n.useRef)(null),[t,c]=(0,n.useState)(!1);return(0,n.useEffect)((()=>{const e=a.current;!t&&e&&(e.style.width=`${e.clientWidth}px`);const n=setTimeout((()=>{c(!t)}),2e3);return()=>{clearTimeout(n),t&&e&&(e.style.width="")}}),[t]),n.createElement(r.X,null,n.createElement(s.J,{textAlign:"center"},n.createElement(o.z,{isPrimary:!0,ref:a},t?n.createElement(i.b,{delayMS:0,"aria-label":"Save",size:5*e.space.base}):"Save")))}},68037:function(e,a){a.Z="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React, { useContext, useEffect, useRef, useState } from 'react';\nimport { ThemeContext } from 'styled-components';\nimport { Row, Col } from '@zendeskgarden/react-grid';\nimport { Button } from '@zendeskgarden/react-buttons';\nimport { Dots } from '@zendeskgarden/react-loaders';\n\nconst ButtonPatternInteraction = () => {\n const themeContext = useContext(ThemeContext);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [isLoading, setIsLoading] = useState(false);\n\n useEffect(() => {\n const buttonElement = buttonRef.current;\n\n if (!isLoading && buttonElement) {\n buttonElement.style.width = `${buttonElement.clientWidth}px`;\n }\n\n const timeout = setTimeout(() => {\n setIsLoading(!isLoading);\n }, 2000);\n\n return () => {\n clearTimeout(timeout);\n\n if (isLoading && buttonElement) {\n buttonElement.style.width = '';\n }\n };\n }, [isLoading]);\n\n return (\n <Row>\n <Col textAlign=\"center\">\n <Button isPrimary ref={buttonRef}>\n {isLoading ? (\n <Dots delayMS={0} aria-label=\"Save\" size={themeContext.space.base * 5} />\n ) : (\n 'Save'\n )}\n </Button>\n </Col>\n </Row>\n );\n};\n\nexport default ButtonPatternInteraction;\n"}}]); 2//# sourceMappingURL=component---src-pages-patterns-save-mdx-6aa39a76eec3ec6e38ff.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.