@salesforce-ux/design-system 2.30.3 → 2.30.6

package/README.md

@@ -1,5 +1,5 @@
 # Lightning Design System 
-# Version: 2.30.3 
+# Version: 2.30.6 
 # Salesforce Lightning Design System 1
 
 Welcome to [Salesforce Lightning Design System 1](https://v1.lightningdesignsystem.com) brought to you by Salesforce UX](https://linkedin.com/showcase/salesforce-designers).

package/RELEASENOTES.general.md

@@ -1,6 +1,18 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.30.6 - June 10, 2026
+
+- Added an inheritance fix for the progress indicator button with a deprecated blueprint and legacy story
+
+## 2.30.5 - May 26, 2026
+
+- Fixed binary content handling for `copyIcons` and `copySwatches` build tasks to prevent corruption of PNG icons and `.clr` swatch files
+
+## 2.30.4 - May 22, 2026
+
+- Fixed styling for buttons with icons
+
 ## 2.30.3 - April 21, 2026
 
 - Updated `@salesforce-ux/icons` to version `v10.15.2`

package/RELEASENOTES.md

@@ -1,5 +1,18 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
+
+## Release 2.30.6 - June 10, 2026
+
+- Added an inheritance fix for the progress indicator button with a deprecated blueprint and legacy story
+
+## Release 2.30.5 - May 26, 2026
+
+- Fixed binary content handling for `copyIcons` and `copySwatches` build tasks to prevent corruption of PNG icons and `.clr` swatch files
+
+## Release 2.30.4 - May 22, 2026
+
+- Fixed styling for buttons with icons
+
 ## Release 2.30.3 - April 21, 2026
 
 - Updated `@salesforce-ux/icons` to version `v10.15.2`

package/__internal/chunked/docs/ui/components/buttons/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,n,s={340:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return R},getElement:function(){return M}});var s=n(1594),l=n.n(s),a=n(5671),o=n(6547),r=(n(3212),n(5619)),i=n(8342),c=n(9825),u=n(8347),d=[{id:"default",label:"Default",element:l().createElement(c.$n,{isNeutral:!0},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}],h=(c.$n,u.A,[{id:"with-icon-right",label:"With right icon",element:l().createElement(c.$n,{isNeutral:!0},"Button Neutral",l().createElement(u.A,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))}]),b=n(7412),m=n.n(b),f=n(942),p=n.n(f);function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var s,l,a,o,r=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(s=a.call(n)).done)&&(r.push(s.value),r.length!==t);i=!0);}catch(e){c=!0,l=e}finally{try{if(!i&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw l}}return r}}(e,t)||function(e,t){if(e){if("string"==typeof e)return v(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,s=Array(t);n<t;n++)s[n]=e[n];return s}var g=function(e){var t=e.className,n=e.disabled,a=e.isNotSelected,o=e.isSelected,r=e.isSelectedClicked,i=y((0,s.useState)(void 0!==a&&!1===Boolean(a)||o||r),2),d=i[0],h=i[1],b=y((0,s.useState)(r),2),m=b[0],f=b[1];return l().createElement(c.$n,{className:p()("slds-button_stateful",t,{"slds-not-selected":!d,"slds-is-selected":d&&!m,"slds-is-selected-clicked":d&&m}),disabled:n,"aria-live":"assertive","aria-pressed":Boolean(d).toString(),isNeutral:!0,onBlur:function(){return f(!1)},onFocus:function(){return f(!0)},onClick:function(){return h(!d)}},l().createElement("span",{className:"slds-text-not-selected"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),"Follow"),l().createElement("span",{className:"slds-text-selected"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),"Following"),l().createElement("span",{className:"slds-text-selected-focus"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"close"}),"Unfollow"))};g.propTypes={className:m().string,disabled:m().bool,isNotSelected:m().bool,isSelected:m().bool,isSelectedClicked:m().bool};var w=l().createElement(g,{isNeutral:!0,isNotSelected:!0}),_=[{id:"disabled",label:"disabled",element:l().createElement(g,{isNotSelected:!0,disabled:!0})},{id:"selected",label:"Selected",element:l().createElement(g,{isNeutral:!0,isSelected:!0})},{id:"selected-clicked",label:"Selected and Clicked",element:l().createElement(g,{isNeutral:!0,isSelectedClicked:!0})}];function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,s=Array(t);n<t;n++)s[n]=e[n];return s}var N=function(e){return l().createElement("span",{className:"slds-text-not-pressed"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),e.children)};N.propTypes={children:m().string.isRequired};var S=function(e){return l().createElement("span",{className:"slds-text-pressed"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),e.children)};S.propTypes={children:m().string.isRequired};var O=function(e){var t,n,a=e.isDisabled,o=e.isPressed,r=(t=(0,s.useState)(o),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var s,l,a,o,r=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(s=a.call(n)).done)&&(r.push(s.value),r.length!==t);i=!0);}catch(e){c=!0,l=e}finally{try{if(!i&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw l}}return r}}(t,n)||function(e,t){if(e){if("string"==typeof e)return E(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?E(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),i=r[0],u=r[1];return l().createElement(c.$n,{isNeutral:!0,className:p()("slds-button_dual-stateful",{"slds-is-pressed":i}),disabled:a,"aria-live":"assertive","aria-pressed":Boolean(i).toString(),onClick:function(){return u(!i)}},l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))};O.propTypes={isDisabled:m().bool,isPressed:m().bool};var k=[{id:"default",label:"Default",element:l().createElement(O,null,l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))}],A=[{id:"pressed",label:"pressed",element:l().createElement(O,{isPressed:!0},l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))}],x=n(806),T=n(9285),B=a.XB.a,K=a.XB.code,j=a.XB.em,D=a.XB.h2,C=a.XB.h3,I=a.XB.li,P=a.XB.p,F=a.XB.strong,L=a.XB.ul,M=function(){return(0,s.createElement)(a.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"Buttons are clickable items used to perform an action."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.Ay),(0,x.NO)(c.K1,"neutral"),(0,x.NO)(c.K1,"brand"),(0,x.NO)(c.K1,"outline-brand"),(0,x.NO)(c.K1,"destructive"),(0,x.NO)(c.K1,"text-destructive"),(0,x.NO)(c.K1,"success"))),D({id:"About-Buttons"},"About Buttons"),P({},"Buttons should be used in situations where users might need to:"),L({},I({},"submit a form"),I({},"begin a new task"),I({},"trigger a new UI element to appear on the page"),I({},"specify a new or next step in a process")),C({id:"Button-vs.-Link"},"Button vs. Link"),P({},"The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:"),L({},I({},"Use a ",F({},"link")," when you’re ",F({},"navigating to another place"),', such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.'),I({},"Use ",F({},"buttons")," when you are ",F({},"performing an action"),', such as: "submit," "merge," "create new," "upload," etc.'),I({},"An action is almost ",F({},"always")," on the same page")),C({id:"Accessibility"},"Accessibility"),P({},'If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link ',K({},"<a>"),". Everything else is a ",K({},"<button>"),"."),P({},"The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job."),P({},"If you absolutely cannot use a ",K({},"<button />")," element for an action and instead need to use an ",K({},"<a />"),", you are required to do 2 things:"),L({},I({},"Add ",K({},'role="button"')," attribute to the ",K({},"<a />")," to make the element announce itself as a ",K({},"button")," element."),I({},"Add a JavaScript event handler for when the user presses the space key. This is because a ",K({},"button")," element will respond by default to both the enter and space keys being pressed, but an ",K({},"<a />")," element will not.")),P({},"Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.K1,"base-link"),(0,x.NO)(c.K1,"neutral-link"),(0,x.NO)(c.K1,"brand-link"),(0,x.NO)(c.K1,"outline-brand-link"),(0,x.NO)(c.K1,"destructive-link"),(0,x.NO)(c.K1,"text-destructive-link"),(0,x.NO)(c.K1,"success-link"))),C({id:"Links-that-look-like-Buttons"},"Links that look like Buttons"),P({},'Use these with caution - dictation software users may not be able to properly identify these actions, as they can say "show buttons" and these won\'t highlight since they are semantically links, even though they may look like buttons.'),C({id:"Mobile"},"Mobile"),(0,s.createElement)(T.s9,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,s.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for buttons"},(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.K1,"base-link"),(0,x.NO)(c.K1,"neutral-link"),(0,x.NO)(c.K1,"brand-link"),(0,x.NO)(c.K1,"outline-brand-link"),(0,x.NO)(c.K1,"destructive-link"),(0,x.NO)(c.K1,"text-destructive-link"),(0,x.NO)(c.K1,"success-link"))),D({id:"Base"},"Base"),P({},"The base ",K({},"slds-button")," looks like a plain text link. It removes all the styling of the native button."),P({},"The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.Ay)),D({id:"Variations"},"Variations"),C({id:"Neutral"},"Neutral"),P({},"Add the ",K({},"slds-button_neutral")," class to create a neutral button."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"neutral")),C({id:"Brand"},"Brand"),P({},"To create the brand button, add the ",K({},"slds-button_brand")," class to the ",K({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),P({},"The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action."),P({},"Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"brand")),C({id:"Outline-Brand"},"Outline Brand"),P({},"To create the outline brand button, add the ",K({},"slds-button_outline-brand")," class to the ",K({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"outline-brand")),C({id:"Inverse"},"Inverse"),P({},"Use the inverse button on dark backgrounds. Add the ",K({},"slds-button_inverse")," class to the ",K({},"slds-button")," class."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"inverse")),C({id:"Destructive"},"Destructive"),P({},"To create the destructive button, add the ",K({},"slds-button_destructive")," class to the ",K({},"slds-button")," class."),P({},"This button is used to indicate a destructive action to the user, like permanently erasing data."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"destructive")),C({id:"Text-Destructive"},"Text Destructive"),P({},"To create the text destructive button, add the ",K({},"slds-button_text-destructive")," class to the ",K({},"slds-button")," class."),P({},"This button is used to indicate a destructive action to the user, like permanently erasing data. Use this version when the ",B({href:"#Destructive"},"Destructive")," button would be too distracting to the experience."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"text-destructive")),C({id:"Success"},"Success"),P({},"To create the success button, add the ",K({},"slds-button_success")," class to the ",K({},"slds-button")," class."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"success")),D({id:"Disabled"},"Disabled"),P({},"Use a disabled attribute when a button can’t be clicked. To create a disabled button, append the ",K({},"disabled")," attribute to the button."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.xP,"disabled"),(0,x.NO)(c.xP,"neutral-disabled"),(0,x.NO)(c.xP,"brand-disabled"),(0,x.NO)(c.xP,"outline-brand-disabled"),(0,x.NO)(c.xP,"destructive-disabled"),(0,x.NO)(c.xP,"text-destructive-disabled"),(0,x.NO)(c.xP,"success-disabled"))),D({id:"With-Icons"},"With Icons"),P({},"The SVG, element, or icon inside the button receives the ",K({},"slds-button__icon")," class. You can position the icon on the left or the right using ",K({},"slds-button__icon_left")," or ",K({},"slds-button__icon_right"),", which applies the correct amount of space between the icon and the text."),C({id:"Left-Icon"},"Left Icon"),(0,s.createElement)(o.A,null,(0,x.NO)(d)),(0,s.createElement)(T.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"button icons"}),(0,s.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for buttons with left icon"},(0,x.NO)(d)),C({id:"Right-Icon"},"Right Icon"),(0,s.createElement)(o.A,null,(0,x.NO)(h,"with-icon-right")),D({id:"Stateful"},"Stateful"),P({},"Stateful buttons have three states: not selected (default), selected and focused, and selected with hover state."),P({},"The stateful button requires the ",K({},"slds-button_stateful")," class and the ",K({},"slds-button_neutral")," class in addition to the ",K({},"slds-button")," class. Stateful buttons are only used with the neutral variation."),P({},"The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the ",K({},"slds-button__icon_left")," class setting the icon on the left."),(0,s.createElement)(r.A,{type:"a11y",header:"Accessibility Requirement"},(0,s.createElement)("p",null,"The stateful button should have ",(0,s.createElement)("code",null,'aria-pressed="true"')," or ",(0,s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',(0,s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",(0,s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",(0,s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",(0,s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),(0,s.createElement)(r.A,{type:"note",header:"JavaScript Requirement"},(0,s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the class from ",(0,s.createElement)("code",null,"slds-not-selected")," to"," ",(0,s.createElement)("code",null,"slds-is-selected-clicked"),". As soon as focus leaves the button, use JavaScript to toggle the class from ",(0,s.createElement)("code",null,"slds-is-selected-clicked")," to ",(0,s.createElement)("code",null,"slds-is-selected"),".")),C({id:"Not-Selected"},"Not Selected"),P({},"Stateful button uses the class ",K({},"slds-not-selected")," in its initial state."),(0,s.createElement)(o.A,null,(0,x.NO)(w)),C({id:"Selected-and-Focused"},"Selected and Focused"),P({},"When selected and still focused, stateful button uses the class ",K({},"slds-is-selected-clicked"),"."),(0,s.createElement)(o.A,null,(0,x.NO)(_,"selected-clicked")),C({id:"Selected-with-Hover-State"},"Selected with Hover State"),P({},"Once selected and blurred (user moved focus away from the button), stateful button uses the class ",K({},"slds-is-selected"),"."),(0,s.createElement)(o.A,null,(0,x.NO)(_,"selected")),D({id:"Dual-Stateful-Button"},"Dual Stateful Button"),P({},"Dual Stateful buttons have two states, similar to a ",B({href:"/accessibility/patterns/togglebutton/#site-main-content"},"Toggle Button"),": not pressed (default), and pressed."),P({},"The Dual Stateful button requires the ",K({},"slds-button_dual-stateful")," class, along with a combination of the ",K({},"slds-button")," and ",K({},"slds-button_neutral")," classes. While Dual Stateful buttons are only used with the neutral Button variation, the pressed state changes the button ",j({},"style")," to that of the Brand variation."),P({},"The button contains two spans. Each span contains display text and a corresponding SVG icon with the class ",K({},"slds-button__icon-left")," and has classes that hide or show the contents. By default, the first span with the class ",K({},"slds-text-is-not-pressed")," is displayed; when the class ",K({},"slds-is-pressed")," is applied to the parent button, the span with the class ",K({},"slds-text-is-pressed")," is displayed."),(0,s.createElement)(r.A,{type:"a11y",header:"Accessibility Requirement"},(0,s.createElement)("p",null,"The stateful button should have ",(0,s.createElement)("code",null,'aria-pressed="true"')," or ",(0,s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',(0,s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",(0,s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",(0,s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",(0,s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),(0,s.createElement)(r.A,{type:"note",header:"JavaScript Requirement"},(0,s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the ",(0,s.createElement)("code",null,"slds-is-pressed")," class on or off, depending on the previous state. Remember, only the pressed state requires this class.")),C({id:"Not-Pressed"},"Not Pressed"),(0,s.createElement)(o.A,null,(0,x.NO)(k)),C({id:"Pressed"},"Pressed"),P({},"To display the pressed state, use the class ",K({},"slds-is-pressed")," on the ",K({},"<button>")," element."),(0,s.createElement)(o.A,null,(0,x.NO)(A,"pressed")),D({id:"Sizing"},"Sizing"),C({id:"Stretch"},"Stretch"),P({},"To allow the button's width to take up the entire width available, apply the ",K({},"slds-button_stretch")," class to the button."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"stretch")),C({id:"Full-Width"},"Full Width"),P({},"Creates a full width button with styling resets"),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"full-width")),D({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,s.createElement)(i.A,{name:"buttons",type:"component"}))},R=function(){return(0,a.Qr)(M())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return s[e](n,n.exports,a),n.exports}a.m=s,a.amdO={},e=[],a.O=function(t,n,s,l){if(!n){var o=1/0;for(u=0;u<e.length;u++){n=e[u][0],s=e[u][1],l=e[u][2];for(var r=!0,i=0;i<n.length;i++)(!1&l||o>=l)&&Object.keys(a.O).every(function(e){return a.O[e](n[i])})?n.splice(i--,1):(r=!1,l<o&&(o=l));if(r){e.splice(u--,1);var c=s();void 0!==c&&(t=c)}}return t}l=l||0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,s,l]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var l=Object.create(null);a.r(l);var o={};t=t||[null,n({}),n([]),n(n)];for(var r=2&s&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(l,o),l},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=6302,function(){var e={6302:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var s,l,o=n[0],r=n[1],i=n[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(s in r)a.o(r,s)&&(a.m[s]=r[s]);if(i)var u=i(a)}for(t&&t(n);c<o.length;c++)l=o[c],a.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return a.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(340)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/buttons/docs.mdx.js"]=o}();
+var SLDS;!function(){"use strict";var e,t,n,s={340:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return R},getElement:function(){return M}});var s=n(1594),l=n.n(s),a=n(5671),o=n(6547),r=(n(3212),n(5619)),i=n(8342),c=n(9825),u=n(8347),d=[{id:"default",label:"Default",element:l().createElement(c.$n,{isNeutral:!0},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}],h=(c.$n,u.A,[{id:"with-icon-right",label:"With right icon",element:l().createElement(c.$n,{isNeutral:!0},"Button Neutral",l().createElement(u.A,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))},{id:"icon-only",label:"Icon only",element:l().createElement(c.$n,{isNeutral:!0},l().createElement(u.A,{className:"slds-button__icon",sprite:"utility",symbol:"download"}))}]),b=n(7412),m=n.n(b),f=n(942),p=n.n(f);function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var s,l,a,o,r=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(s=a.call(n)).done)&&(r.push(s.value),r.length!==t);i=!0);}catch(e){c=!0,l=e}finally{try{if(!i&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw l}}return r}}(e,t)||function(e,t){if(e){if("string"==typeof e)return v(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,s=Array(t);n<t;n++)s[n]=e[n];return s}var g=function(e){var t=e.className,n=e.disabled,a=e.isNotSelected,o=e.isSelected,r=e.isSelectedClicked,i=y((0,s.useState)(void 0!==a&&!1===Boolean(a)||o||r),2),d=i[0],h=i[1],b=y((0,s.useState)(r),2),m=b[0],f=b[1];return l().createElement(c.$n,{className:p()("slds-button_stateful",t,{"slds-not-selected":!d,"slds-is-selected":d&&!m,"slds-is-selected-clicked":d&&m}),disabled:n,"aria-live":"assertive","aria-pressed":Boolean(d).toString(),isNeutral:!0,onBlur:function(){return f(!1)},onFocus:function(){return f(!0)},onClick:function(){return h(!d)}},l().createElement("span",{className:"slds-text-not-selected"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),"Follow"),l().createElement("span",{className:"slds-text-selected"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),"Following"),l().createElement("span",{className:"slds-text-selected-focus"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"close"}),"Unfollow"))};g.propTypes={className:m().string,disabled:m().bool,isNotSelected:m().bool,isSelected:m().bool,isSelectedClicked:m().bool};var w=l().createElement(g,{isNeutral:!0,isNotSelected:!0}),_=[{id:"disabled",label:"disabled",element:l().createElement(g,{isNotSelected:!0,disabled:!0})},{id:"selected",label:"Selected",element:l().createElement(g,{isNeutral:!0,isSelected:!0})},{id:"selected-clicked",label:"Selected and Clicked",element:l().createElement(g,{isNeutral:!0,isSelectedClicked:!0})}];function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,s=Array(t);n<t;n++)s[n]=e[n];return s}var N=function(e){return l().createElement("span",{className:"slds-text-not-pressed"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),e.children)};N.propTypes={children:m().string.isRequired};var S=function(e){return l().createElement("span",{className:"slds-text-pressed"},l().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),e.children)};S.propTypes={children:m().string.isRequired};var O=function(e){var t,n,a=e.isDisabled,o=e.isPressed,r=(t=(0,s.useState)(o),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var s,l,a,o,r=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(s=a.call(n)).done)&&(r.push(s.value),r.length!==t);i=!0);}catch(e){c=!0,l=e}finally{try{if(!i&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw l}}return r}}(t,n)||function(e,t){if(e){if("string"==typeof e)return E(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?E(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),i=r[0],u=r[1];return l().createElement(c.$n,{isNeutral:!0,className:p()("slds-button_dual-stateful",{"slds-is-pressed":i}),disabled:a,"aria-live":"assertive","aria-pressed":Boolean(i).toString(),onClick:function(){return u(!i)}},l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))};O.propTypes={isDisabled:m().bool,isPressed:m().bool};var k=[{id:"default",label:"Default",element:l().createElement(O,null,l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))}],A=[{id:"pressed",label:"pressed",element:l().createElement(O,{isPressed:!0},l().createElement(N,null,"Follow"),l().createElement(S,null,"Following"))}],x=n(806),T=n(9285),B=a.XB.a,K=a.XB.code,j=a.XB.em,D=a.XB.h2,I=a.XB.h3,C=a.XB.li,P=a.XB.p,F=a.XB.strong,L=a.XB.ul,M=function(){return(0,s.createElement)(a.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"Buttons are clickable items used to perform an action."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.Ay),(0,x.NO)(c.K1,"neutral"),(0,x.NO)(c.K1,"brand"),(0,x.NO)(c.K1,"outline-brand"),(0,x.NO)(c.K1,"destructive"),(0,x.NO)(c.K1,"text-destructive"),(0,x.NO)(c.K1,"success"))),D({id:"About-Buttons"},"About Buttons"),P({},"Buttons should be used in situations where users might need to:"),L({},C({},"submit a form"),C({},"begin a new task"),C({},"trigger a new UI element to appear on the page"),C({},"specify a new or next step in a process")),I({id:"Button-vs.-Link"},"Button vs. Link"),P({},"The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:"),L({},C({},"Use a ",F({},"link")," when you’re ",F({},"navigating to another place"),', such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.'),C({},"Use ",F({},"buttons")," when you are ",F({},"performing an action"),', such as: "submit," "merge," "create new," "upload," etc.'),C({},"An action is almost ",F({},"always")," on the same page")),I({id:"Accessibility"},"Accessibility"),P({},'If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link ',K({},"<a>"),". Everything else is a ",K({},"<button>"),"."),P({},"The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job."),P({},"If you absolutely cannot use a ",K({},"<button />")," element for an action and instead need to use an ",K({},"<a />"),", you are required to do 2 things:"),L({},C({},"Add ",K({},'role="button"')," attribute to the ",K({},"<a />")," to make the element announce itself as a ",K({},"button")," element."),C({},"Add a JavaScript event handler for when the user presses the space key. This is because a ",K({},"button")," element will respond by default to both the enter and space keys being pressed, but an ",K({},"<a />")," element will not.")),P({},"Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.K1,"base-link"),(0,x.NO)(c.K1,"neutral-link"),(0,x.NO)(c.K1,"brand-link"),(0,x.NO)(c.K1,"outline-brand-link"),(0,x.NO)(c.K1,"destructive-link"),(0,x.NO)(c.K1,"text-destructive-link"),(0,x.NO)(c.K1,"success-link"))),I({id:"Links-that-look-like-Buttons"},"Links that look like Buttons"),P({},'Use these with caution - dictation software users may not be able to properly identify these actions, as they can say "show buttons" and these won\'t highlight since they are semantically links, even though they may look like buttons.'),I({id:"Mobile"},"Mobile"),(0,s.createElement)(T.s9,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,s.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for buttons"},(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.K1,"base-link"),(0,x.NO)(c.K1,"neutral-link"),(0,x.NO)(c.K1,"brand-link"),(0,x.NO)(c.K1,"outline-brand-link"),(0,x.NO)(c.K1,"destructive-link"),(0,x.NO)(c.K1,"text-destructive-link"),(0,x.NO)(c.K1,"success-link"))),D({id:"Base"},"Base"),P({},"The base ",K({},"slds-button")," looks like a plain text link. It removes all the styling of the native button."),P({},"The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.Ay)),D({id:"Variations"},"Variations"),I({id:"Neutral"},"Neutral"),P({},"Add the ",K({},"slds-button_neutral")," class to create a neutral button."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"neutral")),I({id:"Brand"},"Brand"),P({},"To create the brand button, add the ",K({},"slds-button_brand")," class to the ",K({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),P({},"The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action."),P({},"Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"brand")),I({id:"Outline-Brand"},"Outline Brand"),P({},"To create the outline brand button, add the ",K({},"slds-button_outline-brand")," class to the ",K({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"outline-brand")),I({id:"Inverse"},"Inverse"),P({},"Use the inverse button on dark backgrounds. Add the ",K({},"slds-button_inverse")," class to the ",K({},"slds-button")," class."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"inverse")),I({id:"Destructive"},"Destructive"),P({},"To create the destructive button, add the ",K({},"slds-button_destructive")," class to the ",K({},"slds-button")," class."),P({},"This button is used to indicate a destructive action to the user, like permanently erasing data."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"destructive")),I({id:"Text-Destructive"},"Text Destructive"),P({},"To create the text destructive button, add the ",K({},"slds-button_text-destructive")," class to the ",K({},"slds-button")," class."),P({},"This button is used to indicate a destructive action to the user, like permanently erasing data. Use this version when the ",B({href:"#Destructive"},"Destructive")," button would be too distracting to the experience."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"text-destructive")),I({id:"Success"},"Success"),P({},"To create the success button, add the ",K({},"slds-button_success")," class to the ",K({},"slds-button")," class."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"success")),D({id:"Disabled"},"Disabled"),P({},"Use a disabled attribute when a button can’t be clicked. To create a disabled button, append the ",K({},"disabled")," attribute to the button."),(0,s.createElement)(o.A,null,(0,s.createElement)(s.Fragment,null,(0,x.NO)(c.xP,"disabled"),(0,x.NO)(c.xP,"neutral-disabled"),(0,x.NO)(c.xP,"brand-disabled"),(0,x.NO)(c.xP,"outline-brand-disabled"),(0,x.NO)(c.xP,"destructive-disabled"),(0,x.NO)(c.xP,"text-destructive-disabled"),(0,x.NO)(c.xP,"success-disabled"))),D({id:"With-Icons"},"With Icons"),P({},"The SVG, element, or icon inside the button receives the ",K({},"slds-button__icon")," class. You can position the icon on the left or the right using ",K({},"slds-button__icon_left")," or ",K({},"slds-button__icon_right"),", which applies the correct amount of space between the icon and the text."),I({id:"Left-Icon"},"Left Icon"),(0,s.createElement)(o.A,null,(0,x.NO)(d)),(0,s.createElement)(T.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"button icons"}),(0,s.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for buttons with left icon"},(0,x.NO)(d)),I({id:"Right-Icon"},"Right Icon"),(0,s.createElement)(o.A,null,(0,x.NO)(h,"with-icon-right")),D({id:"Stateful"},"Stateful"),P({},"Stateful buttons have three states: not selected (default), selected and focused, and selected with hover state."),P({},"The stateful button requires the ",K({},"slds-button_stateful")," class and the ",K({},"slds-button_neutral")," class in addition to the ",K({},"slds-button")," class. Stateful buttons are only used with the neutral variation."),P({},"The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the ",K({},"slds-button__icon_left")," class setting the icon on the left."),(0,s.createElement)(r.A,{type:"a11y",header:"Accessibility Requirement"},(0,s.createElement)("p",null,"The stateful button should have ",(0,s.createElement)("code",null,'aria-pressed="true"')," or ",(0,s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',(0,s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",(0,s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",(0,s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",(0,s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),(0,s.createElement)(r.A,{type:"note",header:"JavaScript Requirement"},(0,s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the class from ",(0,s.createElement)("code",null,"slds-not-selected")," to"," ",(0,s.createElement)("code",null,"slds-is-selected-clicked"),". As soon as focus leaves the button, use JavaScript to toggle the class from ",(0,s.createElement)("code",null,"slds-is-selected-clicked")," to ",(0,s.createElement)("code",null,"slds-is-selected"),".")),I({id:"Not-Selected"},"Not Selected"),P({},"Stateful button uses the class ",K({},"slds-not-selected")," in its initial state."),(0,s.createElement)(o.A,null,(0,x.NO)(w)),I({id:"Selected-and-Focused"},"Selected and Focused"),P({},"When selected and still focused, stateful button uses the class ",K({},"slds-is-selected-clicked"),"."),(0,s.createElement)(o.A,null,(0,x.NO)(_,"selected-clicked")),I({id:"Selected-with-Hover-State"},"Selected with Hover State"),P({},"Once selected and blurred (user moved focus away from the button), stateful button uses the class ",K({},"slds-is-selected"),"."),(0,s.createElement)(o.A,null,(0,x.NO)(_,"selected")),D({id:"Dual-Stateful-Button"},"Dual Stateful Button"),P({},"Dual Stateful buttons have two states, similar to a ",B({href:"/accessibility/patterns/togglebutton/#site-main-content"},"Toggle Button"),": not pressed (default), and pressed."),P({},"The Dual Stateful button requires the ",K({},"slds-button_dual-stateful")," class, along with a combination of the ",K({},"slds-button")," and ",K({},"slds-button_neutral")," classes. While Dual Stateful buttons are only used with the neutral Button variation, the pressed state changes the button ",j({},"style")," to that of the Brand variation."),P({},"The button contains two spans. Each span contains display text and a corresponding SVG icon with the class ",K({},"slds-button__icon-left")," and has classes that hide or show the contents. By default, the first span with the class ",K({},"slds-text-is-not-pressed")," is displayed; when the class ",K({},"slds-is-pressed")," is applied to the parent button, the span with the class ",K({},"slds-text-is-pressed")," is displayed."),(0,s.createElement)(r.A,{type:"a11y",header:"Accessibility Requirement"},(0,s.createElement)("p",null,"The stateful button should have ",(0,s.createElement)("code",null,'aria-pressed="true"')," or ",(0,s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',(0,s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",(0,s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",(0,s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",(0,s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),(0,s.createElement)(r.A,{type:"note",header:"JavaScript Requirement"},(0,s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the ",(0,s.createElement)("code",null,"slds-is-pressed")," class on or off, depending on the previous state. Remember, only the pressed state requires this class.")),I({id:"Not-Pressed"},"Not Pressed"),(0,s.createElement)(o.A,null,(0,x.NO)(k)),I({id:"Pressed"},"Pressed"),P({},"To display the pressed state, use the class ",K({},"slds-is-pressed")," on the ",K({},"<button>")," element."),(0,s.createElement)(o.A,null,(0,x.NO)(A,"pressed")),D({id:"Sizing"},"Sizing"),I({id:"Stretch"},"Stretch"),P({},"To allow the button's width to take up the entire width available, apply the ",K({},"slds-button_stretch")," class to the button."),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"stretch")),I({id:"Full-Width"},"Full Width"),P({},"Creates a full width button with styling resets"),(0,s.createElement)(o.A,{toggleCode:!1},(0,x.NO)(c.K1,"full-width")),D({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,s.createElement)(i.A,{name:"buttons",type:"component"}))},R=function(){return(0,a.Qr)(M())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return s[e](n,n.exports,a),n.exports}a.m=s,a.amdO={},e=[],a.O=function(t,n,s,l){if(!n){var o=1/0;for(u=0;u<e.length;u++){n=e[u][0],s=e[u][1],l=e[u][2];for(var r=!0,i=0;i<n.length;i++)(!1&l||o>=l)&&Object.keys(a.O).every(function(e){return a.O[e](n[i])})?n.splice(i--,1):(r=!1,l<o&&(o=l));if(r){e.splice(u--,1);var c=s();void 0!==c&&(t=c)}}return t}l=l||0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,s,l]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var l=Object.create(null);a.r(l);var o={};t=t||[null,n({}),n([]),n(n)];for(var r=2&s&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(l,o),l},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=6302,function(){var e={6302:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var s,l,o=n[0],r=n[1],i=n[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(s in r)a.o(r,s)&&(a.m[s]=r[s]);if(i)var u=i(a)}for(t&&t(n);c<o.length;c++)l=o[c],a.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return a.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(340)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/buttons/docs.mdx.js"]=o}();

package/__internal/chunked/docs/ui/components/progress-indicator/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,r,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6874:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return w},getElement:function(){return x}});var l=r(1594),n=r.n(l),a=r(5671),s=r(6547),c=r(3212),i=r(1374),o=r(5619),d=r(942),p=r.n(d),m=r(4216),u=r(8347),E=r(1766),h=r(4231),v=function(e){return n().createElement("div",{className:p()("slds-progress",e.className)},n().createElement("ol",{className:"slds-progress__list"},e.children),n().createElement(h.z,{className:"slds-progress-bar_x-small",value:e.value}))},g=function(e){return n().createElement("li",{className:p()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?n().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},n().createElement(u.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),n().createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?n().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},n().createElement(u.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),n().createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):n().createElement("div",{className:"slds-progress__marker",tabIndex:"0"},n().createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},S=(m.m_,E.zs,E.aF,E.rQ,E.$m,E.jl,r(2870)),f=r(9285),b=a.XB.code,_=a.XB.h2,y=a.XB.h3,A=a.XB.p,x=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A progress indicator component communicates to the user the progress of a particular process."),(0,l.createElement)(s.A,{exampleOnly:!0},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5"))),_({id:"About-Progress-Indicator"},"About Progress Indicator"),y({id:"Implementation-Requirements"},"Implementation Requirements"),A({},"The ",b({},"slds-progress-bar")," accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the ",b({},"div")," with class ",b({},"slds-progress-bar__value")," using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators."),y({id:"Accessibility"},"Accessibility"),A({},"As the percentage of completion changes, be sure to update the ",b({},"aria-valuenow")," property on the ",b({},"<div>")," with ",b({},'class="slds-progress-bar"'),", as well as the ",b({},"slds-assistive-text")," ",b({},"<span>"),"."),(0,l.createElement)(c.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-progress-bar slds-progress-bar_x-small","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"50",role:"progressbar"},(0,l.createElement)("span",{className:"slds-progress-bar__value",style:{width:"50%"}},(0,l.createElement)("span",{className:"slds-assistive-text"},"Progress: 50%")))),y({id:"Mobile"},"Mobile"),(0,l.createElement)(f.s9,{patternSpecificText:"progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,l.createElement)(s.A,{frameOnly:!0,frameTitle:"Example mobile styles for progress indicators"},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5"))),_({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Progress Indicator Base Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"0"},(0,l.createElement)(g,{active:!0},"Step 1"),(0,l.createElement)(g,null,"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),_({id:"Horizontal"},"Horizontal"),y({id:"Active-Step"},"Active Step"),A({},"When a step becomes active, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-is-active"),"."),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step is active, be sure to append "- Active" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 1 - Active"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Active Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"0"},(0,l.createElement)(g,{active:!0},"Step 1"),(0,l.createElement)(g,null,"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Completed-Step"},"Completed Step"),A({},"When the step is completed, the ",b({},".slds-is-active")," class should be replaced with the class ",b({},".slds-is-completed")," on ",b({},".slds-progress__item"),". At that point, the ",b({},".slds-progress__item"),' element will receive a "success" icon, providing feedback that the step has been completed.'),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step is completed, be sure to append "- Completed" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 2 - Completed"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Done Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Error-in-a-Step"},"Error in a Step"),A({},"When an error has occurred on a step, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-has-error"),"."),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step has an error, be sure to append "- Error" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 3 - Error"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Done Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{error:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Step-Title-Tooltip"},"Step Title Tooltip"),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,"The name of the step should be included with the ",(0,l.createElement)("code",null,"slds-assistive-text")," class as the inner text of the step's ",(0,l.createElement)("code",null,"div")," so that it is available to screen readers.")),(0,l.createElement)(i.A,{title:"Progress Indicator Tooltip Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)("div",{style:{padding:"3.5rem 1rem 0"}},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")),(0,l.createElement)(m.m_,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"1rem",left:"calc(50% + 6px)",transform:"translateX(-50%)"}},"Verify Email")))),y({id:"In-a-Modal"},"In a Modal"),(0,l.createElement)(i.A,{title:"Progress Indicator Horizontal in Modal"},(0,l.createElement)(s.A,{isViewport:!0,demoStyles:"height: 640px;"},(0,l.createElement)("div",null,(0,l.createElement)(E.zs,null,(0,l.createElement)(E.aF,{className:"slds-modal_large","aria-labelledby":"header43"},(0,l.createElement)(E.rQ,null,(0,l.createElement)("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),(0,l.createElement)(E.$m,{className:"slds-grow slds-p-around_medium"}),(0,l.createElement)(E.jl,{className:"slds-grid slds-grid_align-spread"},(0,l.createElement)("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),(0,l.createElement)(v,{className:"slds-progress_shade",value:"25"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{active:!0},"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")),(0,l.createElement)("button",{className:"slds-button slds-button_brand"},"Save"))))))),y({id:"On-a-Gray-Background"},"On a Gray Background"),(0,l.createElement)(i.A,{title:"Progress Indicator Horizontal Gray Background"},(0,l.createElement)(s.A,{demoStyles:"background-color: #F3F2F2; padding: 1rem;"},(0,l.createElement)(v,{className:"slds-progress_shade",value:"25"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{active:!0},"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),_({id:"Vertical"},"Vertical"),A({},"To display a vertical progress indicator, the ",b({},"<div>")," with class ",b({},".slds-progress")," should also get the class ",b({},".slds-progress_vertical"),". The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip."),(0,l.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use ",(0,l.createElement)("code",null,"<button>")," for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use ",(0,l.createElement)("code",null,"<div>"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Green-Success"},"Green Success"),A({},"To create a green completed step, the ",b({},".slds-progress__item")," element should also receive the ",b({},".slds-is-completed")," class. In addition, the ",b({},"<span>")," with class ",b({},".slds-progress__marker_icon")," should also get the class ",b({},"slds-progress__marker_icon-success"),"."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical Success"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0,hasSuccessMarker:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Error-in-a-Step-2"},"Error in a Step"),A({},"When an error has occurred on a step, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-has-error"),"."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical Success"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{error:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Multiline-Step-Titles"},"Multiline Step Titles"),A({},"The vertical progress indicator also supports multiline step descriptions."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae."),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))))},w=function(){return(0,a.Qr)(x())}}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return l[e](r,r.exports,a),r.exports}a.m=l,a.amdO={},e=[],a.O=function(t,r,l,n){if(!r){var s=1/0;for(d=0;d<e.length;d++){r=e[d][0],l=e[d][1],n=e[d][2];for(var c=!0,i=0;i<r.length;i++)(!1&n||s>=n)&&Object.keys(a.O).every(function(e){return a.O[e](r[i])})?r.splice(i--,1):(c=!1,n<s&&(s=n));if(c){e.splice(d--,1);var o=l();void 0!==o&&(t=o)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[r,l,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);a.r(n);var s={};t=t||[null,r({}),r([]),r(r)];for(var c=2&l&&e;("object"==typeof c||"function"==typeof c)&&!~t.indexOf(c);c=r(c))Object.getOwnPropertyNames(c).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(n,s),n},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4586,function(){var e={4586:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var l,n,s=r[0],c=r[1],i=r[2],o=0;if(s.some(function(t){return 0!==e[t]})){for(l in c)a.o(c,l)&&(a.m[l]=c[l]);if(i)var d=i(a)}for(t&&t(r);o<s.length;o++)n=s[o],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var s=a.O(void 0,[3540],function(){return a(6874)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/progress-indicator/docs.mdx.js"]=s}();
+var SLDS;!function(){"use strict";var e,t,r,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6874:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return w},getElement:function(){return x}});var l=r(1594),n=r.n(l),a=r(5671),s=r(6547),c=r(3212),i=r(1374),o=r(5619),d=r(942),p=r.n(d),m=(r(6955),r(4216)),u=r(8347),E=r(1766),h=r(4231),v=function(e){return n().createElement("div",{className:p()("slds-progress",e.className)},n().createElement("ol",{className:"slds-progress__list"},e.children),n().createElement(h.z,{className:"slds-progress-bar_x-small",value:e.value}))},g=function(e){return n().createElement("li",{className:p()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?n().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},n().createElement(u.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),n().createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?n().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},n().createElement(u.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),n().createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):n().createElement("div",{className:"slds-progress__marker",tabIndex:"0"},n().createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},S=(m.m_,E.zs,E.aF,E.rQ,E.$m,E.jl,r(2870)),f=r(9285),b=a.XB.code,_=a.XB.h2,y=a.XB.h3,A=a.XB.p,x=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A progress indicator component communicates to the user the progress of a particular process."),(0,l.createElement)(s.A,{exampleOnly:!0},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5"))),_({id:"About-Progress-Indicator"},"About Progress Indicator"),y({id:"Implementation-Requirements"},"Implementation Requirements"),A({},"The ",b({},"slds-progress-bar")," accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the ",b({},"div")," with class ",b({},"slds-progress-bar__value")," using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators."),y({id:"Accessibility"},"Accessibility"),A({},"As the percentage of completion changes, be sure to update the ",b({},"aria-valuenow")," property on the ",b({},"<div>")," with ",b({},'class="slds-progress-bar"'),", as well as the ",b({},"slds-assistive-text")," ",b({},"<span>"),"."),(0,l.createElement)(c.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-progress-bar slds-progress-bar_x-small","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"50",role:"progressbar"},(0,l.createElement)("span",{className:"slds-progress-bar__value",style:{width:"50%"}},(0,l.createElement)("span",{className:"slds-assistive-text"},"Progress: 50%")))),y({id:"Mobile"},"Mobile"),(0,l.createElement)(f.s9,{patternSpecificText:"progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,l.createElement)(s.A,{frameOnly:!0,frameTitle:"Example mobile styles for progress indicators"},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5"))),_({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Progress Indicator Base Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"0"},(0,l.createElement)(g,{active:!0},"Step 1"),(0,l.createElement)(g,null,"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),_({id:"Horizontal"},"Horizontal"),y({id:"Active-Step"},"Active Step"),A({},"When a step becomes active, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-is-active"),"."),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step is active, be sure to append "- Active" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 1 - Active"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Active Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"0"},(0,l.createElement)(g,{active:!0},"Step 1"),(0,l.createElement)(g,null,"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Completed-Step"},"Completed Step"),A({},"When the step is completed, the ",b({},".slds-is-active")," class should be replaced with the class ",b({},".slds-is-completed")," on ",b({},".slds-progress__item"),". At that point, the ",b({},".slds-progress__item"),' element will receive a "success" icon, providing feedback that the step has been completed.'),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step is completed, be sure to append "- Completed" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 2 - Completed"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Done Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Error-in-a-Step"},"Error in a Step"),A({},"When an error has occurred on a step, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-has-error"),"."),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,'When a step has an error, be sure to append "- Error" to the hidden text in the ',(0,l.createElement)("code",null,"<span>")," with class ",(0,l.createElement)("code",null,"slds-assistive-text"),", such as ",(0,l.createElement)("code",null,"Step 3 - Error"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Done Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{error:!0},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),y({id:"Step-Title-Tooltip"},"Step Title Tooltip"),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Requirements"},(0,l.createElement)("p",null,"The name of the step should be included with the ",(0,l.createElement)("code",null,"slds-assistive-text")," class as the inner text of the step's ",(0,l.createElement)("code",null,"div")," so that it is available to screen readers.")),(0,l.createElement)(i.A,{title:"Progress Indicator Tooltip Horizontal"},(0,l.createElement)(s.A,null,(0,l.createElement)("div",{style:{padding:"3.5rem 1rem 0"}},(0,l.createElement)(v,{value:"50"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{done:!0},"Step 2"),(0,l.createElement)(g,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")),(0,l.createElement)(m.m_,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"1rem",left:"calc(50% + 6px)",transform:"translateX(-50%)"}},"Verify Email")))),y({id:"In-a-Modal"},"In a Modal"),(0,l.createElement)(i.A,{title:"Progress Indicator Horizontal in Modal"},(0,l.createElement)(s.A,{isViewport:!0,demoStyles:"height: 640px;"},(0,l.createElement)("div",null,(0,l.createElement)(E.zs,null,(0,l.createElement)(E.aF,{className:"slds-modal_large","aria-labelledby":"header43"},(0,l.createElement)(E.rQ,null,(0,l.createElement)("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),(0,l.createElement)(E.$m,{className:"slds-grow slds-p-around_medium"}),(0,l.createElement)(E.jl,{className:"slds-grid slds-grid_align-spread"},(0,l.createElement)("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),(0,l.createElement)(v,{className:"slds-progress_shade",value:"25"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{active:!0},"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")),(0,l.createElement)("button",{className:"slds-button slds-button_brand"},"Save"))))))),y({id:"On-a-Gray-Background"},"On a Gray Background"),(0,l.createElement)(i.A,{title:"Progress Indicator Horizontal Gray Background"},(0,l.createElement)(s.A,{demoStyles:"background-color: #F3F2F2; padding: 1rem;"},(0,l.createElement)(v,{className:"slds-progress_shade",value:"25"},(0,l.createElement)(g,{done:!0},"Step 1"),(0,l.createElement)(g,{active:!0},"Step 2"),(0,l.createElement)(g,null,"Step 3"),(0,l.createElement)(g,null,"Step 4"),(0,l.createElement)(g,null,"Step 5")))),_({id:"Vertical"},"Vertical"),A({},"To display a vertical progress indicator, the ",b({},"<div>")," with class ",b({},".slds-progress")," should also get the class ",b({},".slds-progress_vertical"),". The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip."),(0,l.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use ",(0,l.createElement)("code",null,"<button>")," for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use ",(0,l.createElement)("code",null,"<div>"),".")),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Green-Success"},"Green Success"),A({},"To create a green completed step, the ",b({},".slds-progress__item")," element should also receive the ",b({},".slds-is-completed")," class. In addition, the ",b({},"<span>")," with class ",b({},".slds-progress__marker_icon")," should also get the class ",b({},"slds-progress__marker_icon-success"),"."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical Success"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0,hasSuccessMarker:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Error-in-a-Step-2"},"Error in a Step"),A({},"When an error has occurred on a step, the ",b({},"<div>")," with class ",b({},".slds-progress__item")," should also get the class ",b({},".slds-has-error"),"."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical Success"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{error:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3"),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))),y({id:"Multiline-Step-Titles"},"Multiline Step Titles"),A({},"The vertical progress indicator also supports multiline step descriptions."),(0,l.createElement)(i.A,{title:"Progress Indicator Vertical"},(0,l.createElement)(s.A,null,(0,l.createElement)(S.ke,{value:"25"},(0,l.createElement)(S.pn,{done:!0},"Step 1"),(0,l.createElement)(S.pn,{active:!0},"Step 2"),(0,l.createElement)(S.pn,null,"Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae."),(0,l.createElement)(S.pn,null,"Step 4"),(0,l.createElement)(S.pn,null,"Step 5")))))},w=function(){return(0,a.Qr)(x())}}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return l[e](r,r.exports,a),r.exports}a.m=l,a.amdO={},e=[],a.O=function(t,r,l,n){if(!r){var s=1/0;for(d=0;d<e.length;d++){r=e[d][0],l=e[d][1],n=e[d][2];for(var c=!0,i=0;i<r.length;i++)(!1&n||s>=n)&&Object.keys(a.O).every(function(e){return a.O[e](r[i])})?r.splice(i--,1):(c=!1,n<s&&(s=n));if(c){e.splice(d--,1);var o=l();void 0!==o&&(t=o)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[r,l,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);a.r(n);var s={};t=t||[null,r({}),r([]),r(r)];for(var c=2&l&&e;("object"==typeof c||"function"==typeof c)&&!~t.indexOf(c);c=r(c))Object.getOwnPropertyNames(c).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(n,s),n},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4586,function(){var e={4586:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var l,n,s=r[0],c=r[1],i=r[2],o=0;if(s.some(function(t){return 0!==e[t]})){for(l in c)a.o(c,l)&&(a.m[l]=c[l]);if(i)var d=i(a)}for(t&&t(r);o<s.length;o++)n=s[o],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var s=a.O(void 0,[3540],function(){return a(6874)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/progress-indicator/docs.mdx.js"]=s}();

package/__internal/chunked/showcase/ui/components/buttons/with-icon/example.jsx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var t,e={876:function(t,e,n){n.r(e),n.d(e,{examples:function(){return a},states:function(){return l}});var o=n(1594),r=n.n(o),i=n(8347),u=n(9825);e.default=[{id:"default",label:"Default",element:r().createElement(u.Button,{isNeutral:!0},r().createElement(i.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}];var l=[{id:"disabled",label:"Disabled",element:r().createElement(u.Button,{isNeutral:!0,disabled:!0},r().createElement(i.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}],a=[{id:"with-icon-right",label:"With right icon",element:r().createElement(u.Button,{isNeutral:!0},"Button Neutral",r().createElement(i.A,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))}]},1594:function(t){t.exports=React}},n={};function o(t){var r=n[t];if(void 0!==r)return r.exports;var i=n[t]={exports:{}};return e[t](i,i.exports,o),i.exports}o.m=e,o.amdO={},t=[],o.O=function(e,n,r,i){if(!n){var u=1/0;for(c=0;c<t.length;c++){n=t[c][0],r=t[c][1],i=t[c][2];for(var l=!0,a=0;a<n.length;a++)(!1&i||u>=i)&&Object.keys(o.O).every(function(t){return o.O[t](n[a])})?n.splice(a--,1):(l=!1,i<u&&(u=i));if(l){t.splice(c--,1);var s=r();void 0!==s&&(e=s)}}return e}i=i||0;for(var c=t.length;c>0&&t[c-1][2]>i;c--)t[c]=t[c-1];t[c]=[n,r,i]},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,{a:e}),e},o.d=function(t,e){for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.j=1592,function(){var t={518:0,1117:0,1252:0,1578:0,1592:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};o.O.j=function(e){return 0===t[e]};var e=function(e,n){var r,i,u=n[0],l=n[1],a=n[2],s=0;if(u.some(function(e){return 0!==t[e]})){for(r in l)o.o(l,r)&&(o.m[r]=l[r]);if(a)var c=a(o)}for(e&&e(n);s<u.length;s++)i=u[s],o.o(t,i)&&t[i]&&t[i][0](),t[i]=0;return o.O(c)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(e.bind(null,0)),n.push=e.bind(null,n.push.bind(n))}(),o.nc=void 0;var r=o.O(void 0,[6790],function(){return o(876)});r=o.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/buttons/with-icon/example.jsx.js"]=r}();
+var SLDS;!function(){"use strict";var t,e={876:function(t,e,n){n.r(e),n.d(e,{examples:function(){return a},states:function(){return u}});var o=n(1594),r=n.n(o),i=n(8347),l=n(9825);e.default=[{id:"default",label:"Default",element:r().createElement(l.Button,{isNeutral:!0},r().createElement(i.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}];var u=[{id:"disabled",label:"Disabled",element:r().createElement(l.Button,{isNeutral:!0,disabled:!0},r().createElement(i.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral")}],a=[{id:"with-icon-right",label:"With right icon",element:r().createElement(l.Button,{isNeutral:!0},"Button Neutral",r().createElement(i.A,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))},{id:"icon-only",label:"Icon only",element:r().createElement(l.Button,{isNeutral:!0},r().createElement(i.A,{className:"slds-button__icon",sprite:"utility",symbol:"download"}))}]},1594:function(t){t.exports=React}},n={};function o(t){var r=n[t];if(void 0!==r)return r.exports;var i=n[t]={exports:{}};return e[t](i,i.exports,o),i.exports}o.m=e,o.amdO={},t=[],o.O=function(e,n,r,i){if(!n){var l=1/0;for(c=0;c<t.length;c++){n=t[c][0],r=t[c][1],i=t[c][2];for(var u=!0,a=0;a<n.length;a++)(!1&i||l>=i)&&Object.keys(o.O).every(function(t){return o.O[t](n[a])})?n.splice(a--,1):(u=!1,i<l&&(l=i));if(u){t.splice(c--,1);var s=r();void 0!==s&&(e=s)}}return e}i=i||0;for(var c=t.length;c>0&&t[c-1][2]>i;c--)t[c]=t[c-1];t[c]=[n,r,i]},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,{a:e}),e},o.d=function(t,e){for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.j=1592,function(){var t={518:0,1117:0,1252:0,1578:0,1592:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};o.O.j=function(e){return 0===t[e]};var e=function(e,n){var r,i,l=n[0],u=n[1],a=n[2],s=0;if(l.some(function(e){return 0!==t[e]})){for(r in u)o.o(u,r)&&(o.m[r]=u[r]);if(a)var c=a(o)}for(e&&e(n);s<l.length;s++)i=l[s],o.o(t,i)&&t[i]&&t[i][0](),t[i]=0;return o.O(c)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(e.bind(null,0)),n.push=e.bind(null,n.push.bind(n))}(),o.nc=void 0;var r=o.O(void 0,[6790],function(){return o(876)});r=o.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/buttons/with-icon/example.jsx.js"]=r}();

package/__internal/chunked/showcase/ui/components/progress-indicator/base/example.jsx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},8683:function(e,t,l){l.r(t),l.d(t,{Progress:function(){return i},Step:function(){return u},examples:function(){return E},states:function(){return p}});var n=l(1594),a=l.n(n),r=l(942),s=l.n(r),c=l(4216),o=l(8347),m=l(1766),d=l(4231),i=function(e){return a().createElement("div",{className:s()("slds-progress",e.className)},a().createElement("ol",{className:"slds-progress__list"},e.children),a().createElement(d.z,{className:"slds-progress-bar_x-small",value:e.value}))},u=function(e){return a().createElement("li",{className:s()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?a().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},a().createElement(o.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),a().createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?a().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},a().createElement(o.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),a().createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):a().createElement("div",{className:"slds-progress__marker",tabIndex:"0"},a().createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))};t.default=[{id:"default",label:"Default",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(i,{value:"0"},a().createElement(u,{active:!0},"Step 1"),a().createElement(u,null,"Step 2"),a().createElement(u,null,"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")))}];var p=[{id:"next-step",label:"Next Step",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(i,{value:"25"},a().createElement(u,{done:!0},"Step 1"),a().createElement(u,{active:!0},"Step 2"),a().createElement(u,null,"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")))},{id:"has-error",label:"Step - Error",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(i,{value:"25"},a().createElement(u,{done:!0},"Step 1"),a().createElement(u,{error:!0},"Step 2"),a().createElement(u,null,"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")))},{id:"tooltip",label:"Tooltip",element:a().createElement("div",{className:"demo-only",style:{padding:"3rem 1rem 0"}},a().createElement(i,{value:"50"},a().createElement(u,{done:!0},"Step 1"),a().createElement(u,{done:!0},"Step 2"),a().createElement(u,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")),a().createElement(c.Tooltip,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"0px",left:"calc(50% + 7px)",transform:"translateX(-50%)"}},"Verify Email"))}],E=[{id:"modal",label:"In a modal",element:a().createElement("div",{className:"demo-only",style:{height:"640px"}},a().createElement(m.Backdrop,null,a().createElement(m.Modal,{className:"slds-modal_large","aria-labelledby":"header43"},a().createElement(m.ModalHeader,null,a().createElement("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),a().createElement(m.ModalContent,{className:"slds-grow slds-p-around_medium"}),a().createElement(m.ModalFooter,{className:"slds-grid slds-grid_align-spread"},a().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),a().createElement(i,{className:"slds-progress_shade",value:"25"},a().createElement(u,{done:!0},"Step 1"),a().createElement(u,{active:!0},"Step 2"),a().createElement(u,null,"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")),a().createElement("button",{className:"slds-button slds-button_brand"},"Save")))))},{id:"shade",label:"On a gray background",element:a().createElement("div",{className:"demo-only",style:{background:"#F3F2F2",padding:"1rem"}},a().createElement(i,{className:"slds-progress_shade",value:"25"},a().createElement(u,{done:!0},"Step 1"),a().createElement(u,{active:!0},"Step 2"),a().createElement(u,null,"Step 3"),a().createElement(u,null,"Step 4"),a().createElement(u,null,"Step 5")))}]}},l={};function n(e){var a=l[e];if(void 0!==a)return a.exports;var r=l[e]={exports:{}};return t[e](r,r.exports,n),r.exports}n.m=t,n.amdO={},e=[],n.O=function(t,l,a,r){if(!l){var s=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],r=e[d][2];for(var c=!0,o=0;o<l.length;o++)(!1&r||s>=r)&&Object.keys(n.O).every(function(e){return n.O[e](l[o])})?l.splice(o--,1):(c=!1,r<s&&(s=r));if(c){e.splice(d--,1);var m=a();void 0!==m&&(t=m)}}return t}r=r||0;for(var d=e.length;d>0&&e[d-1][2]>r;d--)e[d]=e[d-1];e[d]=[l,a,r]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=2233,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2233:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,r,s=l[0],c=l[1],o=l[2],m=0;if(s.some(function(t){return 0!==e[t]})){for(a in c)n.o(c,a)&&(n.m[a]=c[a]);if(o)var d=o(n)}for(t&&t(l);m<s.length;m++)r=s[m],n.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return n.O(d)},l=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),n.nc=void 0;var a=n.O(void 0,[6790],function(){return n(8683)});a=n.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/progress-indicator/base/example.jsx.js"]=a}();
+var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},8683:function(e,t,l){l.r(t),l.d(t,{LegacyStep:function(){return E},Progress:function(){return u},Step:function(){return p},examples:function(){return v},states:function(){return b}});var r=l(1594),a=l.n(r),s=l(942),n=l.n(s),c=l(6955),o=l(4216),i=l(8347),d=l(1766),m=l(4231),u=function(e){return a().createElement("div",{className:n()("slds-progress",e.className)},a().createElement("ol",{className:"slds-progress__list"},e.children),a().createElement(m.z,{className:"slds-progress-bar_x-small",value:e.value}))},p=function(e){return a().createElement("li",{className:n()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?a().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},a().createElement(i.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),a().createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?a().createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},a().createElement(i.A,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),a().createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):a().createElement("div",{className:"slds-progress__marker",tabIndex:"0"},a().createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},E=function(e){return a().createElement("li",{className:n()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?a().createElement(c.A,{className:"slds-progress__marker slds-progress__marker_icon",symbol:"success","aria-describedby":e["aria-describedby"],assistiveText:e.done?e.children+" - Completed":null,title:e.done?e.children+" - Completed":null}):e.error?a().createElement(c.A,{className:"slds-progress__marker slds-progress__marker_icon",symbol:"error","aria-describedby":e["aria-describedby"],assistiveText:e.error?e.children+" - Error":null,title:e.error?e.children+" - Error":null}):a().createElement("button",{className:"slds-button slds-progress__marker","aria-describedby":e["aria-describedby"]},a().createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))};t.default=[{id:"default",label:"Default",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(u,{value:"0"},a().createElement(p,{active:!0},"Step 1"),a().createElement(p,null,"Step 2"),a().createElement(p,null,"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")))}];var b=[{id:"next-step",label:"Next Step",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(u,{value:"25"},a().createElement(p,{done:!0},"Step 1"),a().createElement(p,{active:!0},"Step 2"),a().createElement(p,null,"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")))},{id:"has-error",label:"Step - Error",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(u,{value:"25"},a().createElement(p,{done:!0},"Step 1"),a().createElement(p,{error:!0},"Step 2"),a().createElement(p,null,"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")))},{id:"tooltip",label:"Tooltip",element:a().createElement("div",{className:"demo-only",style:{padding:"3rem 1rem 0"}},a().createElement(u,{value:"50"},a().createElement(p,{done:!0},"Step 1"),a().createElement(p,{done:!0},"Step 2"),a().createElement(p,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")),a().createElement(o.Tooltip,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"0px",left:"calc(50% + 7px)",transform:"translateX(-50%)"}},"Verify Email"))}],v=[{id:"modal",label:"In a modal",element:a().createElement("div",{className:"demo-only",style:{height:"640px"}},a().createElement(d.Backdrop,null,a().createElement(d.Modal,{className:"slds-modal_large","aria-labelledby":"header43"},a().createElement(d.ModalHeader,null,a().createElement("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),a().createElement(d.ModalContent,{className:"slds-grow slds-p-around_medium"}),a().createElement(d.ModalFooter,{className:"slds-grid slds-grid_align-spread"},a().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),a().createElement(u,{className:"slds-progress_shade",value:"25"},a().createElement(p,{done:!0},"Step 1"),a().createElement(p,{active:!0},"Step 2"),a().createElement(p,null,"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")),a().createElement("button",{className:"slds-button slds-button_brand"},"Save")))))},{id:"shade",label:"On a gray background",element:a().createElement("div",{className:"demo-only",style:{background:"#F3F2F2",padding:"1rem"}},a().createElement(u,{className:"slds-progress_shade",value:"25"},a().createElement(p,{done:!0},"Step 1"),a().createElement(p,{active:!0},"Step 2"),a().createElement(p,null,"Step 3"),a().createElement(p,null,"Step 4"),a().createElement(p,null,"Step 5")))},{id:"legacy",label:"Legacy Markers",element:a().createElement("div",{className:"demo-only",style:{padding:"1rem"}},a().createElement(u,{value:"25"},a().createElement(E,{done:!0,"aria-describedby":"step-1-tooltip"},"Step 1"),a().createElement(E,{active:!0,"aria-describedby":"step-2-tooltip"},"Step 2"),a().createElement(E,{"aria-describedby":"step-3-tooltip"},"Step 3"),a().createElement(E,{"aria-describedby":"step-4-tooltip"},"Step 4"),a().createElement(E,{"aria-describedby":"step-5-tooltip"},"Step 5")))}]}},l={};function r(e){var a=l[e];if(void 0!==a)return a.exports;var s=l[e]={exports:{}};return t[e](s,s.exports,r),s.exports}r.m=t,r.amdO={},e=[],r.O=function(t,l,a,s){if(!l){var n=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],s=e[d][2];for(var c=!0,o=0;o<l.length;o++)(!1&s||n>=s)&&Object.keys(r.O).every(function(e){return r.O[e](l[o])})?l.splice(o--,1):(c=!1,s<n&&(n=s));if(c){e.splice(d--,1);var i=a();void 0!==i&&(t=i)}}return t}s=s||0;for(var d=e.length;d>0&&e[d-1][2]>s;d--)e[d]=e[d-1];e[d]=[l,a,s]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=2233,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2233:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};r.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,s,n=l[0],c=l[1],o=l[2],i=0;if(n.some(function(t){return 0!==e[t]})){for(a in c)r.o(c,a)&&(r.m[a]=c[a]);if(o)var d=o(r)}for(t&&t(l);i<n.length;i++)s=n[i],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(d)},l=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),r.nc=void 0;var a=r.O(void 0,[6790],function(){return r(8683)});a=r.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/progress-indicator/base/example.jsx.js"]=a}();