@salesforce-ux/design-system 2.25.3 → 2.25.4

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

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=function(e){function t(t){for(var n,r,i=t[0],o=t[1],c=t[2],m=0,b=[];m<i.length;m++)r=i[m],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&b.push(l[r][0]),l[r]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return s.push.apply(s,c||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=r(r.s=a[0]))}return e}var n={},l={73:0},s=[];function r(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=n,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=o;return s.push([744,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},744:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return me})),a.d(t,"getContents",(function(){return be}));var n=a(0),l=a.n(n),s=a(4),r=a(2),i=a(27),o=a(15),c=a(14),d=a(39),m=a(3),b=a.n(m),h=a(5),u=a.n(h),f=a(10),p=a(64),E=a(12);function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function w(e,t){return(w=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function O(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=j(e);if(t){var l=j(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return g(this,a)}}function g(e,t){if(t&&("object"===v(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return T(e)}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var I=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__group"},e.children)};I.propTypes={children:b.a.node};var S=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__container"},e.children)};S.propTypes={children:b.a.node};var x=function(e){return l.a.createElement("ul",{className:u()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};x.propTypes={children:b.a.node,isHidden:b.a.bool};var _=function(e){return l.a.createElement("li",{className:u()("slds-tabs-mobile__item")},e.children)};_.propTypes={children:b.a.node};var N=function(e){return l.a.createElement(E.a,{isFullWidth:!0,onClick:e.onClick},l.a.createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l.a.createElement(f.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};N.propTypes={onClick:b.a.func,summary:b.a.string};var C=function(e){return l.a.createElement(p.c,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible||!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children||"A panel body accepts any layout or component")};C.propTypes={hidePanel:b.a.func,isVisible:b.a.bool,title:b.a.string,children:b.a.node};var k=function(e){return l.a.createElement(S,null,l.a.createElement(x,{isHidden:!0},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three"}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:!0},l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Three"}))),l.a.createElement("div",null," Any content can be here "),l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Four"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Five"})))),l.a.createElement(C,{title:"Item 2 Panel"}),l.a.createElement(C,{title:"Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 1 Panel"}),l.a.createElement(C,{title:"Nested Item 2 Panel"}),l.a.createElement(C,{title:"Nested Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 4 Panel"}),l.a.createElement(C,{title:"Nested Item 5 Panel"}))},P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&w(e,t)}(r,e);var t,a,n,s=O(r);function r(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r),(t=s.call(this,e)).hidePanel=t.hidePanel.bind(T(t)),t.state={visiblePanelIdx:-1},t}return t=r,(a=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic||this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic||this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return l.a.createElement(S,null,l.a.createElement(x,{isHidden:-1!==e},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&y(t.prototype,a),n&&y(t,n),Object.defineProperty(t,"prototype",{writable:!1}),r}(n.Component);P.propTypes={visiblePanelIdx:b.a.number,isStatic:b.a.bool};var A=P,U=a(30),W=a(34),H=a(11),M=a(171),B=a(9),L=a(118),V=a(13),F=function(e){return l.a.createElement(U.a,{selectedIndex:e.selectedIndex},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};F.propTypes={selectedIndex:b.a.number,itemOneContent:b.a.node},F.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var D=function(){return l.a.createElement(F,{itemOneContent:l.a.createElement(L.a,null)})},R=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(q,null)))))},z=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Cases",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Products",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Price Books",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Contacts",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(J,null)))))},q=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},"Accounts"),l.a.createElement(B.g,{title:"Approvals"},"Approvals"),l.a.createElement(B.g,{title:"Lead"},"Leads")))},J=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(B.g,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(B.g,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},G=function(){return l.a.createElement(U.a,{isCard:!0,selectedIndex:0},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,{hasCardBoundary:!0},l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},K=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(H.a,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},Y=function(e){return l.a.createElement(U.a,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Y.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Y.defaultProps={showHeader:!1,withHeader:!1};var $=function(e){return l.a.createElement(U.a,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};$.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},$.defaultProps={showHeader:!1,withHeader:!1};var Q=function(e){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,{withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content"))))};Q.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Q.defaultProps={showHeader:!0,withHeader:!0};U.a,U.a.Item,U.a.Item,U.a.Item;var X=a(48),Z=a(119),ee=a(1),te=s.c.a,ae=s.c.code,ne=s.c.h2,le=s.c.h3,se=s.c.h4,re=s.c.h5,ie=s.c.li,oe=s.c.p,ce=s.c.strong,de=s.c.ul,me=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),Object(n.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 200px;"},Object(n.createElement)(F,null)),ne({id:"About-Tabs"},"About Tabs"),oe({},"The default tab set style encapsulates everything that is underneath it without enclosing it visually. Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets."),le({id:"Implementation"},"Implementation"),se({id:"Markup"},"Markup"),oe({},"The following markup is crucial for Accessibility"),de({},ie({},"Selected tab’s anchor has ",ae({},'aria-selected="true"'),", all other tabs’ anchors have ",ae({},'aria-selected="false"')),ie({},"Selected tab’s anchor has ",ae({},'tabindex="0"'),", all other tabs have ",ae({},'tabindex="-1"')),ie({},"Each tab’s anchor has an ",ae({},"aria-controls")," attribute whose value is the id of the associated ",ae({},'<div role="tabpanel">')),ie({},"Each tab panel has an ",ae({},"aria-labelledby")," attribute whose value is the id of its associated ",ae({},'<a role="tab">'))),se({id:"Keyboard-Interactions"},"Keyboard Interactions"),de({},ie({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),ie({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),ie({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),ie({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),se({id:"JavaScript-Needs"},"JavaScript Needs"),oe({},"The active tab has two markup requirements:"),de({},ie({},"The ",ae({},".slds-active")," class should be placed on the ",ae({},"li")," with ",ae({},".slds-tabs_{variant}__item"),"."),ie({},"The corresponding ",ae({},".slds-tabs_{variant}__content")," container receives ",ae({},".slds-show"),"."),ie({},"In order to achieve the focus state styling, apply ",ae({},".slds-has-focus")," to the parent ",ae({},"li"),".")),oe({},"Inactive ",ae({},".slds-tabs_{variant}__content")," containers receive ",ae({},".slds-hide"),"."),oe({},"When the user clicks a different tab, move the ",ae({},".slds-active")," class and toggle the ",ae({},".slds-hide"),"/",ae({},".slds-show")," classes."),le({id:"Accessibility"},"Accessibility"),oe({},"Tabbed UIs have three parts with specific ",ce({},"ARIA")," role requirements:"),de({},ie({},"The tab list, which should have ",ae({},'role="tablist"')),ie({},"The tabs in that list, which should each be an ",ae({},'<a role="tab">')," anchor wrapped in a ",ae({},'<li role="presentation">')," list item"),ie({},"The tab panels, which display each tab’s content and should each have ",ae({},'role="tabpanel"'))),ne({id:"Base"},"Base"),Object(n.createElement)(o.a,{title:"Tabs Base"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(F,null))),ne({id:"Size-Modifiers"},"Size Modifiers"),oe({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",ae({},"slds-tabs_medium")," or ",ae({},"slds-tabs_large")," to the ",ae({},"slds-tabs_default")," element."),le({id:"Medium"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)(Y,null))),le({id:"Large"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)($,null))),ne({id:"With-Header"},"With Header"),Object(n.createElement)(o.a,{title:"Tabs with Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Q,null))),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The header can be visually hidden but still accessible to screen readers by applying ",Object(n.createElement)("code",null,"slds-assistive-text")," to the ",Object(n.createElement)("code",null,"slds-tabs_default__header")," element.")),le({id:"Medium-2"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Y,{withHeader:!0,showHeader:!0}))),le({id:"Large-2"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)($,{withHeader:!0,showHeader:!0}))),ne({id:"With-Overflow"},"With Overflow"),oe({},"The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation."),Object(n.createElement)(o.a,{title:"Tabs Overflowing"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(R,null))),Object(n.createElement)(c.a,{type:"note",header:"Implementation Guidelines"},Object(n.createElement)("p",null,"The ",Object(n.createElement)("code",null,"slds-dropdown__list")," element requires a",Object(n.createElement)("code",null,"slds-dropdown_length-with-icon-10")," class, where 10 is the maximum number of items that will be visible before having to scroll.")),ne({id:"With-Icon"},"With Icon"),oe({},"Icons can be used with tabs to help users differentiate among them."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(z,null))),ne({id:"With-Error"},"With Error"),oe({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(K,null))),ne({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),oe({},"If nesting tabs within tabs, the second set should be rendered as ",te({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),Object(n.createElement)(o.a,{title:"Tabs with Nested Scoped Tabs"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(D,null))),ne({id:"Subtabs"},"Subtabs"),oe({},"Subtabs are used to provide an additional level of navigation below the ",te({href:"/components/global-navigation"},"Global Navigation")," Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.e)),le({id:"Expected-Behavior"},"Expected Behavior"),de({},ie({},"The first tab within the Subtab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed."),ie({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",de({},ie({},"When opening the first additional sub-navigation tab, a new tab bar is inserted containing both the default tab and the new sub-navigation tab."))),ie({},"All subtabs are closed when the parent navigation item is closed."),ie({},"Subtabs can optionally include a tab menu for additional controls.")),le({id:"With-Focus"},"With Focus"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-has-focus")),le({id:"With-Borders"},"With Borders"),oe({},"To add borders on either side of the subtab, add the classes ",ae({},"slds-border_right")," and ",ae({},"slds-border_left"),", as needed, to the ",ae({},"<li>")," with class ",ae({},"slds-sub-tabs__item"),"."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-borders")),le({id:"With-Tab-Actions"},"With Tab Actions"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-menu")),le({id:"Status-Options"},"Status Options"),se({id:"Unsaved-Tab"},"Unsaved Tab"),oe({},"Unsaved tabs receive a blue asterisk on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-unsaved")),Object(n.createElement)(c.a,{header:"Additional Tag for Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",Object(n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," should read ",Object(n.createElement)("b",null,'"Tab Not Saved"'),".")),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),se({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),oe({},"The following examples of subtab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),oe({},"You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:"),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),oe({},"Upon clearing the status on a given tab, you should clear the message from the live region."),se({id:"Unread-Tab"},"Unread Tab"),oe({},"Unread tabs receive a red dot on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unread")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),Object(n.createElement)("ol",{className:"slds-list_ordered"},Object(n.createElement)("li",null,"The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",Object(n.createElement)("b",null,'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".'),Object(n.createElement)("li",null,"The hidden live region as described above, should have its content updated to ",Object(n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity",role:"img"})),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),se({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),oe({},"Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unsaved")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),se({id:"Warning-Tab"},"Warning Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",ae({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),re({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unsaved")),re({id:"Unread-Warning-Tab"},"Unread Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unread")),se({id:"Error-Tab"},"Error Tab"),oe({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",ae({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab has broken an SLA agreement, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),re({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unsaved")),re({id:"Unread-Error-Tab"},"Unread Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unread")),se({id:"Success-Tab"},"Success Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, you can use the ",ae({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab it was cleared from"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),re({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unsaved")),re({id:"Unread-Success-Tab"},"Unread Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unread")),le({id:"With-Overflow-Tab"},"With Overflow Tab"),oe({},"Overflowing subtabs are contained in a More dropdown."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"overflow-tabs")),se({id:"Overflow-Tab-Open"},"Overflow Tab Open"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-open")),se({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unread-overflow-tabs-open")),se({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-overflow-tabs-open")),se({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-unread-overflow-tabs-open")),se({id:"Success-Overflow-Tab"},"Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success")),se({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success-unread-unsaved")),se({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning")),se({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning-unread-unsaved")),se({id:"Error-Overflow-Tab"},"Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error")),se({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error-unread-unsaved")),ne({id:"Vertical"},"Vertical"),oe({},"To use vertical tabs, check out the ",te({href:"../vertical-tabs"},"Vertical Tabs")," component."),Object(n.createElement)(o.a,{title:"Tabs as Vertical"},Z.a),ne({id:"As-a-Card"},"As a Card"),oe({},"To style tabs as a card, add the class ",ae({},"slds-tabs_card")," to the ",ae({},"<div>")," with the class ",ae({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),Object(n.createElement)(o.a,{title:"Tabs as a Card"},Object(n.createElement)(r.a,{demoStyles:"height: 600px;"},Object(n.createElement)(G,null))),ne({id:"On-Mobile"},"On Mobile"),oe({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),oe({},"Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left."),Object(n.createElement)(c.a,{header:"Focus Management",type:"a11y"},Object(n.createElement)("p",null,"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.")),Object(n.createElement)(o.a,{title:"Tabs Mobile Base"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,null))),le({id:"Accessibility-2"},"Accessibility"),oe({},ce({},"Visibility")),de({},ie({},"The panels should have ",ae({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),ie({},"The tabs should have ",ae({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),oe({},ce({},"Focus Management")),oe({},"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed."),oe({},ce({},"Assistive Text")),oe({},"The title and assistive text for the panel's back button text should read \"Collapse $&123;heading text&125;” so it stays contextual to the tab that was clicked on."),le({id:"Panel-Open"},"Panel Open"),oe({},'When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.'),Object(n.createElement)(o.a,{title:"Tabs Mobile Drilled-in"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,{visiblePanelIdx:0,isStatic:!0}))),le({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),oe({},"When there are two or more immediately adjacent tab sets on mobile, use the ",ae({},"slds-tabs_mobile__group")," class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists."),Object(n.createElement)(o.a,{title:"Tabs Mobile Adjacent Stacked"},Object(n.createElement)(r.a,null,Object(n.createElement)(I,null,Object(n.createElement)(A,{isStatic:!0}),Object(n.createElement)(A,{isStatic:!0,startingIdx:3})))),le({id:"Nested-Tab-Sets"},"Nested Tab Sets"),Object(n.createElement)(o.a,{title:"Tabs Mobile Nested"},Object(n.createElement)(r.a,{demoStyles:"height: 300px;"},Object(n.createElement)(k,null))),ne({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"tabs",type:"component"}))},be=function(){return Object(s.a)(me())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=function(e){function t(t){for(var n,r,i=t[0],o=t[1],c=t[2],m=0,b=[];m<i.length;m++)r=i[m],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&b.push(l[r][0]),l[r]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return s.push.apply(s,c||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=r(r.s=a[0]))}return e}var n={},l={73:0},s=[];function r(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=n,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=o;return s.push([744,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},744:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return me})),a.d(t,"getContents",(function(){return be}));var n=a(0),l=a.n(n),s=a(4),r=a(2),i=a(27),o=a(15),c=a(14),d=a(39),m=a(3),b=a.n(m),h=a(5),u=a.n(h),f=a(10),p=a(64),E=a(12);function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function w(e,t){return(w=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function O(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=j(e);if(t){var l=j(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return g(this,a)}}function g(e,t){if(t&&("object"===v(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return T(e)}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var I=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__group"},e.children)};I.propTypes={children:b.a.node};var S=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__container"},e.children)};S.propTypes={children:b.a.node};var x=function(e){return l.a.createElement("ul",{className:u()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};x.propTypes={children:b.a.node,isHidden:b.a.bool};var _=function(e){return l.a.createElement("li",{className:u()("slds-tabs-mobile__item")},e.children)};_.propTypes={children:b.a.node};var N=function(e){return l.a.createElement(E.a,{isFullWidth:!0,onClick:e.onClick},l.a.createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l.a.createElement(f.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};N.propTypes={onClick:b.a.func,summary:b.a.string};var C=function(e){return l.a.createElement(p.c,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible||!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children||"A panel body accepts any layout or component")};C.propTypes={hidePanel:b.a.func,isVisible:b.a.bool,title:b.a.string,children:b.a.node};var k=function(e){return l.a.createElement(S,null,l.a.createElement(x,{isHidden:!0},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three"}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:!0},l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Three"}))),l.a.createElement("div",null," Any content can be here "),l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Four"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Five"})))),l.a.createElement(C,{title:"Item 2 Panel"}),l.a.createElement(C,{title:"Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 1 Panel"}),l.a.createElement(C,{title:"Nested Item 2 Panel"}),l.a.createElement(C,{title:"Nested Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 4 Panel"}),l.a.createElement(C,{title:"Nested Item 5 Panel"}))},P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&w(e,t)}(r,e);var t,a,n,s=O(r);function r(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r),(t=s.call(this,e)).hidePanel=t.hidePanel.bind(T(t)),t.state={visiblePanelIdx:-1},t}return t=r,(a=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic||this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic||this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return l.a.createElement(S,null,l.a.createElement(x,{isHidden:-1!==e},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&y(t.prototype,a),n&&y(t,n),Object.defineProperty(t,"prototype",{writable:!1}),r}(n.Component);P.propTypes={visiblePanelIdx:b.a.number,isStatic:b.a.bool};var A=P,U=a(31),W=a(35),H=a(11),M=a(171),B=a(9),L=a(118),V=a(13),F=function(e){return l.a.createElement(U.a,{selectedIndex:e.selectedIndex},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};F.propTypes={selectedIndex:b.a.number,itemOneContent:b.a.node},F.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var D=function(){return l.a.createElement(F,{itemOneContent:l.a.createElement(L.a,null)})},R=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(q,null)))))},z=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Cases",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Products",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Price Books",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Contacts",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(J,null)))))},q=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},"Accounts"),l.a.createElement(B.g,{title:"Approvals"},"Approvals"),l.a.createElement(B.g,{title:"Lead"},"Leads")))},J=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(B.g,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(B.g,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},G=function(){return l.a.createElement(U.a,{isCard:!0,selectedIndex:0},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,{hasCardBoundary:!0},l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},K=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(H.a,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},Y=function(e){return l.a.createElement(U.a,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Y.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Y.defaultProps={showHeader:!1,withHeader:!1};var $=function(e){return l.a.createElement(U.a,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};$.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},$.defaultProps={showHeader:!1,withHeader:!1};var Q=function(e){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,{withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content"))))};Q.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Q.defaultProps={showHeader:!0,withHeader:!0};U.a,U.a.Item,U.a.Item,U.a.Item;var X=a(48),Z=a(119),ee=a(1),te=s.c.a,ae=s.c.code,ne=s.c.h2,le=s.c.h3,se=s.c.h4,re=s.c.h5,ie=s.c.li,oe=s.c.p,ce=s.c.strong,de=s.c.ul,me=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),Object(n.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 200px;"},Object(n.createElement)(F,null)),ne({id:"About-Tabs"},"About Tabs"),oe({},"The default tab set style encapsulates everything that is underneath it without enclosing it visually. Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets."),le({id:"Implementation"},"Implementation"),se({id:"Markup"},"Markup"),oe({},"The following markup is crucial for Accessibility"),de({},ie({},"Selected tab’s anchor has ",ae({},'aria-selected="true"'),", all other tabs’ anchors have ",ae({},'aria-selected="false"')),ie({},"Selected tab’s anchor has ",ae({},'tabindex="0"'),", all other tabs have ",ae({},'tabindex="-1"')),ie({},"Each tab’s anchor has an ",ae({},"aria-controls")," attribute whose value is the id of the associated ",ae({},'<div role="tabpanel">')),ie({},"Each tab panel has an ",ae({},"aria-labelledby")," attribute whose value is the id of its associated ",ae({},'<a role="tab">'))),se({id:"Keyboard-Interactions"},"Keyboard Interactions"),de({},ie({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),ie({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),ie({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),ie({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),se({id:"JavaScript-Needs"},"JavaScript Needs"),oe({},"The active tab has two markup requirements:"),de({},ie({},"The ",ae({},".slds-active")," class should be placed on the ",ae({},"li")," with ",ae({},".slds-tabs_{variant}__item"),"."),ie({},"The corresponding ",ae({},".slds-tabs_{variant}__content")," container receives ",ae({},".slds-show"),"."),ie({},"In order to achieve the focus state styling, apply ",ae({},".slds-has-focus")," to the parent ",ae({},"li"),".")),oe({},"Inactive ",ae({},".slds-tabs_{variant}__content")," containers receive ",ae({},".slds-hide"),"."),oe({},"When the user clicks a different tab, move the ",ae({},".slds-active")," class and toggle the ",ae({},".slds-hide"),"/",ae({},".slds-show")," classes."),le({id:"Accessibility"},"Accessibility"),oe({},"Tabbed UIs have three parts with specific ",ce({},"ARIA")," role requirements:"),de({},ie({},"The tab list, which should have ",ae({},'role="tablist"')),ie({},"The tabs in that list, which should each be an ",ae({},'<a role="tab">')," anchor wrapped in a ",ae({},'<li role="presentation">')," list item"),ie({},"The tab panels, which display each tab’s content and should each have ",ae({},'role="tabpanel"'))),ne({id:"Base"},"Base"),Object(n.createElement)(o.a,{title:"Tabs Base"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(F,null))),ne({id:"Size-Modifiers"},"Size Modifiers"),oe({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",ae({},"slds-tabs_medium")," or ",ae({},"slds-tabs_large")," to the ",ae({},"slds-tabs_default")," element."),le({id:"Medium"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)(Y,null))),le({id:"Large"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)($,null))),ne({id:"With-Header"},"With Header"),Object(n.createElement)(o.a,{title:"Tabs with Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Q,null))),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The header can be visually hidden but still accessible to screen readers by applying ",Object(n.createElement)("code",null,"slds-assistive-text")," to the ",Object(n.createElement)("code",null,"slds-tabs_default__header")," element.")),le({id:"Medium-2"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Y,{withHeader:!0,showHeader:!0}))),le({id:"Large-2"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)($,{withHeader:!0,showHeader:!0}))),ne({id:"With-Overflow"},"With Overflow"),oe({},"The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation."),Object(n.createElement)(o.a,{title:"Tabs Overflowing"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(R,null))),Object(n.createElement)(c.a,{type:"note",header:"Implementation Guidelines"},Object(n.createElement)("p",null,"The ",Object(n.createElement)("code",null,"slds-dropdown__list")," element requires a",Object(n.createElement)("code",null,"slds-dropdown_length-with-icon-10")," class, where 10 is the maximum number of items that will be visible before having to scroll.")),ne({id:"With-Icon"},"With Icon"),oe({},"Icons can be used with tabs to help users differentiate among them."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(z,null))),ne({id:"With-Error"},"With Error"),oe({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(K,null))),ne({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),oe({},"If nesting tabs within tabs, the second set should be rendered as ",te({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),Object(n.createElement)(o.a,{title:"Tabs with Nested Scoped Tabs"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(D,null))),ne({id:"Subtabs"},"Subtabs"),oe({},"Subtabs are used to provide an additional level of navigation below the ",te({href:"/components/global-navigation"},"Global Navigation")," Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.e)),le({id:"Expected-Behavior"},"Expected Behavior"),de({},ie({},"The first tab within the Subtab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed."),ie({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",de({},ie({},"When opening the first additional sub-navigation tab, a new tab bar is inserted containing both the default tab and the new sub-navigation tab."))),ie({},"All subtabs are closed when the parent navigation item is closed."),ie({},"Subtabs can optionally include a tab menu for additional controls.")),le({id:"With-Focus"},"With Focus"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-has-focus")),le({id:"With-Borders"},"With Borders"),oe({},"To add borders on either side of the subtab, add the classes ",ae({},"slds-border_right")," and ",ae({},"slds-border_left"),", as needed, to the ",ae({},"<li>")," with class ",ae({},"slds-sub-tabs__item"),"."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-borders")),le({id:"With-Tab-Actions"},"With Tab Actions"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-menu")),le({id:"Status-Options"},"Status Options"),se({id:"Unsaved-Tab"},"Unsaved Tab"),oe({},"Unsaved tabs receive a blue asterisk on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-unsaved")),Object(n.createElement)(c.a,{header:"Additional Tag for Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",Object(n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," should read ",Object(n.createElement)("b",null,'"Tab Not Saved"'),".")),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),se({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),oe({},"The following examples of subtab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),oe({},"You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:"),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),oe({},"Upon clearing the status on a given tab, you should clear the message from the live region."),se({id:"Unread-Tab"},"Unread Tab"),oe({},"Unread tabs receive a red dot on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unread")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),Object(n.createElement)("ol",{className:"slds-list_ordered"},Object(n.createElement)("li",null,"The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",Object(n.createElement)("b",null,'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".'),Object(n.createElement)("li",null,"The hidden live region as described above, should have its content updated to ",Object(n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity",role:"img"})),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),se({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),oe({},"Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unsaved")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),se({id:"Warning-Tab"},"Warning Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",ae({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),re({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unsaved")),re({id:"Unread-Warning-Tab"},"Unread Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unread")),se({id:"Error-Tab"},"Error Tab"),oe({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",ae({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab has broken an SLA agreement, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),re({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unsaved")),re({id:"Unread-Error-Tab"},"Unread Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unread")),se({id:"Success-Tab"},"Success Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, you can use the ",ae({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab it was cleared from"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),re({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unsaved")),re({id:"Unread-Success-Tab"},"Unread Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unread")),le({id:"With-Overflow-Tab"},"With Overflow Tab"),oe({},"Overflowing subtabs are contained in a More dropdown."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"overflow-tabs")),se({id:"Overflow-Tab-Open"},"Overflow Tab Open"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-open")),se({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unread-overflow-tabs-open")),se({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-overflow-tabs-open")),se({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-unread-overflow-tabs-open")),se({id:"Success-Overflow-Tab"},"Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success")),se({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success-unread-unsaved")),se({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning")),se({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning-unread-unsaved")),se({id:"Error-Overflow-Tab"},"Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error")),se({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error-unread-unsaved")),ne({id:"Vertical"},"Vertical"),oe({},"To use vertical tabs, check out the ",te({href:"../vertical-tabs"},"Vertical Tabs")," component."),Object(n.createElement)(o.a,{title:"Tabs as Vertical"},Z.a),ne({id:"As-a-Card"},"As a Card"),oe({},"To style tabs as a card, add the class ",ae({},"slds-tabs_card")," to the ",ae({},"<div>")," with the class ",ae({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),Object(n.createElement)(o.a,{title:"Tabs as a Card"},Object(n.createElement)(r.a,{demoStyles:"height: 600px;"},Object(n.createElement)(G,null))),ne({id:"On-Mobile"},"On Mobile"),oe({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),oe({},"Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left."),Object(n.createElement)(c.a,{header:"Focus Management",type:"a11y"},Object(n.createElement)("p",null,"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.")),Object(n.createElement)(o.a,{title:"Tabs Mobile Base"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,null))),le({id:"Accessibility-2"},"Accessibility"),oe({},ce({},"Visibility")),de({},ie({},"The panels should have ",ae({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),ie({},"The tabs should have ",ae({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),oe({},ce({},"Focus Management")),oe({},"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed."),oe({},ce({},"Assistive Text")),oe({},"The title and assistive text for the panel's back button text should read \"Collapse $&123;heading text&125;” so it stays contextual to the tab that was clicked on."),le({id:"Panel-Open"},"Panel Open"),oe({},'When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.'),Object(n.createElement)(o.a,{title:"Tabs Mobile Drilled-in"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,{visiblePanelIdx:0,isStatic:!0}))),le({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),oe({},"When there are two or more immediately adjacent tab sets on mobile, use the ",ae({},"slds-tabs_mobile__group")," class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists."),Object(n.createElement)(o.a,{title:"Tabs Mobile Adjacent Stacked"},Object(n.createElement)(r.a,null,Object(n.createElement)(I,null,Object(n.createElement)(A,{isStatic:!0}),Object(n.createElement)(A,{isStatic:!0,startingIdx:3})))),le({id:"Nested-Tab-Sets"},"Nested Tab Sets"),Object(n.createElement)(o.a,{title:"Tabs Mobile Nested"},Object(n.createElement)(r.a,{demoStyles:"height: 300px;"},Object(n.createElement)(k,null))),ne({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"tabs",type:"component"}))},be=function(){return Object(s.a)(me())}}});

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

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tooltips/docs.mdx.js"]=function(e){function t(t){for(var o,r,a=t[0],c=t[1],s=t[2],b=0,d=[];b<a.length;b++)r=a[b],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&d.push(i[r][0]),i[r]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(e[o]=c[o]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,s||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,a=1;a<n.length;a++){var c=n[a];0!==i[c]&&(o=!1)}o&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var o={},i={78:0},l=[];function r(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var s=0;s<a.length;s++)t(a[s]);var u=c;return l.push([623,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},623:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return h})),n.d(t,"getContents",(function(){return g}));var o=n(0),i=n(4),l=n(2),r=n(28),a=n(45),c=(n(14),n(39)),s=n(50),u=n(1),b=i.c.a,d=i.c.code,f=i.c.h2,p=i.c.h3,m=i.c.p,h=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Tooltip is a short message giving non-essential, contextual information, activated by hover, focus, or click. It can't be focused or contain focusable content."),Object(o.createElement)(l.a,{exampleOnly:!0,demoStyles:" padding-left: 1rem; padding-top: 1rem; position: relative; "},Object(u.f)(s.c,"button-icon")),f({id:"About-Tooltips"},"About Tooltips"),m({},"Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, ",d({},".slds-nubbin_left"),", ",d({},".slds-nubbin_left-top"),", ",d({},".slds-nubbin_left-bottom"),", ",d({},".slds-nubbin_top-left"),", ",d({},".slds-nubbin_top-right"),", ",d({},".slds-nubbin_right-top"),", ",d({},".slds-nubbin_right-bottom"),", ",d({},".slds-nubbin_bottom-left"),", ",d({},".slds-nubbin_bottom-right"),"."),m({},"Learn more about how to use them at the ",b({href:"/components/popovers/#flavor-nubbins"},"Nubbins documentation"),"."),p({id:"Accessibility"},"Accessibility"),m({},"Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the ",d({},"aria-describedby")," attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content."),m({},"When using a link as the focusable element to show a tooltip, add a ",d({},"<div>")," at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add ",d({},"aria-hidden='true'")," to this element, and ensure that the link text itself matches the text within this ",d({},"<div>"),"."),f({id:"Base"},"Base"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.b)),f({id:"Examples"},"Examples"),p({id:"As-an-icon-link"},"As an icon link"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 6.75rem; position: relative; "},Object(u.f)(s.c,"link")),p({id:"As-a-Button-Icon"},"As a Button Icon"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button-icon")),p({id:"As-a-Button"},"As a Button"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button")),f({id:"Modifiers"},"Modifiers"),p({id:"Motion"},"Motion"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Bottom To Top"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"bottom-to-top"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Top To Bottom"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"top-to-bottom"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Right To Left"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"right-to-left"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Left To Right"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"left-to-right")))),p({id:"Toggle"},"Toggle"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Rise"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"rise"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Fall"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"fall")))),f({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(c.a,{name:"tooltips",type:"component"}))},g=function(){return Object(i.a)(h())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tooltips/docs.mdx.js"]=function(e){function t(t){for(var o,r,a=t[0],c=t[1],s=t[2],b=0,d=[];b<a.length;b++)r=a[b],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&d.push(i[r][0]),i[r]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(e[o]=c[o]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,s||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,a=1;a<n.length;a++){var c=n[a];0!==i[c]&&(o=!1)}o&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var o={},i={78:0},l=[];function r(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var s=0;s<a.length;s++)t(a[s]);var u=c;return l.push([623,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},623:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return h})),n.d(t,"getContents",(function(){return g}));var o=n(0),i=n(4),l=n(2),r=n(29),a=n(45),c=(n(14),n(39)),s=n(50),u=n(1),b=i.c.a,d=i.c.code,f=i.c.h2,p=i.c.h3,m=i.c.p,h=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Tooltip is a short message giving non-essential, contextual information, activated by hover, focus, or click. It can't be focused or contain focusable content."),Object(o.createElement)(l.a,{exampleOnly:!0,demoStyles:" padding-left: 1rem; padding-top: 1rem; position: relative; "},Object(u.f)(s.c,"button-icon")),f({id:"About-Tooltips"},"About Tooltips"),m({},"Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, ",d({},".slds-nubbin_left"),", ",d({},".slds-nubbin_left-top"),", ",d({},".slds-nubbin_left-bottom"),", ",d({},".slds-nubbin_top-left"),", ",d({},".slds-nubbin_top-right"),", ",d({},".slds-nubbin_right-top"),", ",d({},".slds-nubbin_right-bottom"),", ",d({},".slds-nubbin_bottom-left"),", ",d({},".slds-nubbin_bottom-right"),"."),m({},"Learn more about how to use them at the ",b({href:"/components/popovers/#flavor-nubbins"},"Nubbins documentation"),"."),p({id:"Accessibility"},"Accessibility"),m({},"Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the ",d({},"aria-describedby")," attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content."),m({},"When using a link as the focusable element to show a tooltip, add a ",d({},"<div>")," at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add ",d({},"aria-hidden='true'")," to this element, and ensure that the link text itself matches the text within this ",d({},"<div>"),"."),f({id:"Base"},"Base"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.b)),f({id:"Examples"},"Examples"),p({id:"As-an-icon-link"},"As an icon link"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 6.75rem; position: relative; "},Object(u.f)(s.c,"link")),p({id:"As-a-Button-Icon"},"As a Button Icon"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button-icon")),p({id:"As-a-Button"},"As a Button"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button")),f({id:"Modifiers"},"Modifiers"),p({id:"Motion"},"Motion"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Bottom To Top"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"bottom-to-top"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Top To Bottom"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"top-to-bottom"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Right To Left"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"right-to-left"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Left To Right"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"left-to-right")))),p({id:"Toggle"},"Toggle"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Rise"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"rise"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Fall"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"fall")))),f({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(c.a,{name:"tooltips",type:"component"}))},g=function(){return Object(i.a)(h())}}});

package/__internal/chunked/docs/ui/components/vertical-tabs/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],l=t[2],b=0,d=[];b<r.length;b++)i=r[b],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&d.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(h&&h(t);d.length;)d.shift()();return s.push.apply(s,l||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==o[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},o={83:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=r.push.bind(r);r.push=t,r=r.slice();for(var l=0;l<r.length;l++)t(r[l]);var h=c;return s.push([629,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},629:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return m})),a.d(t,"getContents",(function(){return v}));var n=a(0),o=a(4),s=a(2),i=(a(28),a(45),a(14),a(119)),r=a(1),c=o.c.code,l=o.c.h2,h=o.c.h3,b=o.c.h4,d=o.c.li,u=o.c.p,f=o.c.strong,p=o.c.ul,m=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A component that shows groups of content, separated into tabs, and controlled by the tabs"),Object(n.createElement)(s.a,{exampleOnly:!0},Object(r.f)(i.b,"with-icons")),l({id:"About-Vertical-Tabs"},"About Vertical Tabs"),u({},"The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time."),u({},"This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space."),h({id:"Implementation"},"Implementation"),u({},"The Tab Component has the following markup requirements:"),p({},d({},"The ",c({},".slds-is-active")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that is active (its content is being shown)."),d({},"The ",c({},".slds-has-focus")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that has focus."),d({},"The ",c({},".slds-show")," modifier class is required on the ",c({},".slds-vertical-tabs__content")," element that is being shown (their tab label is selected)."),d({},"The ",c({},".slds-hide")," modifier class is required on all ",c({},".slds-vertical-tabs__content")," elements that are not being shown (their tab label is not selected)."),d({},"If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__left-icon"),". If you require an icon or badge to the right of the label, you can wrap the element in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__right-icon"),".")),h({id:"Accessibility"},"Accessibility"),u({},"Vertical Tabbed UIs have three parts with specific ",f({},"ARIA")," roles, markup and interactions:"),b({id:"ARIA-Roles"},"ARIA Roles"),p({},d({},"The tab list, which should have ",c({},'role="tablist"')),d({},"The tabs in that list, which should each be an ",c({},'<a role="tab">')," anchor wrapped in a ",c({},'<li role="presentation">')," li"),d({},"The tab panels, which display each tab's content and should each have ",c({},'role="tabpanel"'))),b({id:"Markup"},"Markup"),p({},d({},"Selected tab’s anchor has ",c({},'aria-selected="true"'),", all other tabs’ anchors have ",c({},'aria-selected="false"')),d({},"Selected tab’s anchor has ",c({},'tabindex="0"'),", all other tabs have ",c({},'tabindex="-1"')),d({},"Each tab’s anchor has an ",c({},"aria-controls")," attribute whose value is the id of the associated ",c({},'<div role="tabpanel">')),d({},"Each tab panel has an ",c({},"aria-labelledby")," attribute whose value is the id of its associated ",c({},'<a role="tab">'))),b({id:"Keyboard-Interactions"},"Keyboard Interactions"),p({},d({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),d({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),d({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),d({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus to the selected tab")),l({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(r.f)(i.a)),l({id:"Examples"},"Examples"),h({id:"With-Icons"},"With Icons"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-icons")),h({id:"With-Badges"},"With Badges"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-badges")),l({id:"Modifiers"},"Modifiers"),h({id:"Interactions"},"Interactions"),b({id:"Item-Focus"},"Item Focus"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.b,"item-focus")),b({id:"Item-Active"},"Item Active"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.a)))},v=function(){return Object(o.a)(m())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],l=t[2],b=0,d=[];b<r.length;b++)i=r[b],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&d.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(h&&h(t);d.length;)d.shift()();return s.push.apply(s,l||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==o[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},o={83:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=r.push.bind(r);r.push=t,r=r.slice();for(var l=0;l<r.length;l++)t(r[l]);var h=c;return s.push([629,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},629:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return m})),a.d(t,"getContents",(function(){return v}));var n=a(0),o=a(4),s=a(2),i=(a(29),a(45),a(14),a(119)),r=a(1),c=o.c.code,l=o.c.h2,h=o.c.h3,b=o.c.h4,d=o.c.li,u=o.c.p,f=o.c.strong,p=o.c.ul,m=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A component that shows groups of content, separated into tabs, and controlled by the tabs"),Object(n.createElement)(s.a,{exampleOnly:!0},Object(r.f)(i.b,"with-icons")),l({id:"About-Vertical-Tabs"},"About Vertical Tabs"),u({},"The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time."),u({},"This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space."),h({id:"Implementation"},"Implementation"),u({},"The Tab Component has the following markup requirements:"),p({},d({},"The ",c({},".slds-is-active")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that is active (its content is being shown)."),d({},"The ",c({},".slds-has-focus")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that has focus."),d({},"The ",c({},".slds-show")," modifier class is required on the ",c({},".slds-vertical-tabs__content")," element that is being shown (their tab label is selected)."),d({},"The ",c({},".slds-hide")," modifier class is required on all ",c({},".slds-vertical-tabs__content")," elements that are not being shown (their tab label is not selected)."),d({},"If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__left-icon"),". If you require an icon or badge to the right of the label, you can wrap the element in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__right-icon"),".")),h({id:"Accessibility"},"Accessibility"),u({},"Vertical Tabbed UIs have three parts with specific ",f({},"ARIA")," roles, markup and interactions:"),b({id:"ARIA-Roles"},"ARIA Roles"),p({},d({},"The tab list, which should have ",c({},'role="tablist"')),d({},"The tabs in that list, which should each be an ",c({},'<a role="tab">')," anchor wrapped in a ",c({},'<li role="presentation">')," li"),d({},"The tab panels, which display each tab's content and should each have ",c({},'role="tabpanel"'))),b({id:"Markup"},"Markup"),p({},d({},"Selected tab’s anchor has ",c({},'aria-selected="true"'),", all other tabs’ anchors have ",c({},'aria-selected="false"')),d({},"Selected tab’s anchor has ",c({},'tabindex="0"'),", all other tabs have ",c({},'tabindex="-1"')),d({},"Each tab’s anchor has an ",c({},"aria-controls")," attribute whose value is the id of the associated ",c({},'<div role="tabpanel">')),d({},"Each tab panel has an ",c({},"aria-labelledby")," attribute whose value is the id of its associated ",c({},'<a role="tab">'))),b({id:"Keyboard-Interactions"},"Keyboard Interactions"),p({},d({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),d({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),d({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),d({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus to the selected tab")),l({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(r.f)(i.a)),l({id:"Examples"},"Examples"),h({id:"With-Icons"},"With Icons"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-icons")),h({id:"With-Badges"},"With Badges"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-badges")),l({id:"Modifiers"},"Modifiers"),h({id:"Interactions"},"Interactions"),b({id:"Item-Focus"},"Item Focus"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.b,"item-focus")),b({id:"Item-Active"},"Item Active"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.a)))},v=function(){return Object(o.a)(m())}}});

package/__internal/chunked/docs/ui/components/visual-picker/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=function(e){function a(a){for(var t,c,r=a[0],m=a[1],i=a[2],d=0,u=[];d<r.length;d++)c=r[d],Object.prototype.hasOwnProperty.call(s,c)&&s[c]&&u.push(s[c][0]),s[c]=0;for(t in m)Object.prototype.hasOwnProperty.call(m,t)&&(e[t]=m[t]);for(o&&o(a);u.length;)u.shift()();return n.push.apply(n,i||[]),l()}function l(){for(var e,a=0;a<n.length;a++){for(var l=n[a],t=!0,r=1;r<l.length;r++){var m=l[r];0!==s[m]&&(t=!1)}t&&(n.splice(a--,1),e=c(c.s=l[0]))}return e}var t={},s={84:0},n=[];function c(a){if(t[a])return t[a].exports;var l=t[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=t,c.d=function(e,a,l){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)c.d(l,t,function(a){return e[a]}.bind(null,t));return l},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],m=r.push.bind(r);r.push=a,r=r.slice();for(var i=0;i<r.length;i++)a(r[i]);var o=m;return n.push([727,0]),l()}({0:function(e,a){e.exports=React},20:function(e,a){e.exports=ReactDOM},22:function(e,a){e.exports=JSBeautify},727:function(e,a,l){"use strict";l.r(a),l.d(a,"getElement",(function(){return L})),l.d(a,"getContents",(function(){return A}));var t=l(0),s=l.n(t),n=l(4),c=l(2),r=l(1),m=l(10),i=l(5),o=l.n(i),d=l(35),u=l(8),b=l(11),p=function(e){return s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},e.label)},E=function(e){var a=e.name,l=(e.id,e.hasIcon),t=e.type,n=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,b=e.checked,p=e.disabled,E=e.className,h=r.d.uniqueId("visual-picker-");return s.a.createElement("div",{className:o()("slds-visual-picker",{"slds-visual-picker_large":"large"===d,"slds-visual-picker_medium":"medium"===d,"slds-visual-picker_small":"small"===d},E)},s.a.createElement("input",{type:t,id:h,value:h,name:a,defaultChecked:b,disabled:p}),s.a.createElement("label",{htmlFor:h},l?s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},s.a.createElement("span",{className:"slds-is-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),s.a.createElement("span",{className:"slds-is-not-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:o()("slds-icon slds-icon-"+n+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===n}),sprite:n||"action",symbol:c})))):s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?s.a.createElement("span",{className:"slds-visual-picker__body"},i):null,l?null:s.a.createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},s.a.createElement(m.a,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var a=e.children,l=e.type,t=e.sprite,n=e.hasIcon,c=r.d.uniqueId("example-unique-name-"),m=s.a.Children.map(a,(function(e){return s.a.isValidElement(e)?s.a.cloneElement(e,{name:c,type:l,sprite:n&&t,hasIcon:n}):e}));return s.a.createElement(s.a.Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var _=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],x=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{disabled:!0,symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],f=[{id:"base_small",label:"Small base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"small"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"large"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"small"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"small"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"medium"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"medium"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"large"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"large"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"large"}))))}],g=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Professional"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete service CRM for teams of any size")],k=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Enterprise"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Everything you need to take support to the next level")],y=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Unlimited"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete support with enterprise-grade customization")],v=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],N=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",disabled:!0,label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],S=function(e){var a=e.symbol||"knowledge_base",l=e.icon||s.a.createElement(b.a,{className:"slds-icon-text-default",symbol:a,title:!1,assistiveText:!1});return s.a.createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},s.a.createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},l),s.a.createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},O=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"demo-only",style:{width:"24rem"}},s.a.createElement(S,{symbol:"knowledge_base"},s.a.createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),s.a.createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base")))}],j=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],w=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],C=n.c.h2,z=n.c.h3,D=n.c.h4,I=n.c.p,L=function(){return Object(t.createElement)(n.b,{},Object(t.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),Object(t.createElement)(c.a,{exampleOnly:!0},Object(r.f)(f,"checkbox-group")),C({id:"Coverable-Content"},"Coverable Content"),z({id:"Base"},"Base"),I({},"Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below."),D({id:"Small"},"Small"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_small")),D({id:"Medium"},"Medium"),Object(t.createElement)(c.a,null,Object(r.f)(_)),D({id:"Large"},"Large"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_large")),z({id:"States"},"States"),D({id:"Disabled"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(x,"disabled")),z({id:"Checkbox-Examples"},"Checkbox Examples"),I({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),D({id:"Small-Checkboxes"},"Small Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_small")),D({id:"Medium-Checkboxes"},"Medium Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group")),D({id:"Large-Checkboxes"},"Large Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_large")),C({id:"Non-Coverable-Content"},"Non Coverable Content"),z({id:"Base-2"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(v)),z({id:"States-2"},"States"),D({id:"Disabled-2"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(N,"disabled")),C({id:"Link"},"Link"),Object(t.createElement)(c.a,null,Object(r.f)(O)),C({id:"Vertical"},"Vertical"),z({id:"Base-3"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(j)),z({id:"States-3"},"States"),D({id:"Disabled-3"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(w,"disabled")))},A=function(){return Object(n.a)(L())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=function(e){function a(a){for(var t,c,r=a[0],m=a[1],i=a[2],d=0,u=[];d<r.length;d++)c=r[d],Object.prototype.hasOwnProperty.call(s,c)&&s[c]&&u.push(s[c][0]),s[c]=0;for(t in m)Object.prototype.hasOwnProperty.call(m,t)&&(e[t]=m[t]);for(o&&o(a);u.length;)u.shift()();return n.push.apply(n,i||[]),l()}function l(){for(var e,a=0;a<n.length;a++){for(var l=n[a],t=!0,r=1;r<l.length;r++){var m=l[r];0!==s[m]&&(t=!1)}t&&(n.splice(a--,1),e=c(c.s=l[0]))}return e}var t={},s={84:0},n=[];function c(a){if(t[a])return t[a].exports;var l=t[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=t,c.d=function(e,a,l){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)c.d(l,t,function(a){return e[a]}.bind(null,t));return l},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],m=r.push.bind(r);r.push=a,r=r.slice();for(var i=0;i<r.length;i++)a(r[i]);var o=m;return n.push([727,0]),l()}({0:function(e,a){e.exports=React},20:function(e,a){e.exports=ReactDOM},22:function(e,a){e.exports=JSBeautify},727:function(e,a,l){"use strict";l.r(a),l.d(a,"getElement",(function(){return L})),l.d(a,"getContents",(function(){return A}));var t=l(0),s=l.n(t),n=l(4),c=l(2),r=l(1),m=l(10),i=l(5),o=l.n(i),d=l(36),u=l(8),b=l(11),p=function(e){return s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},e.label)},E=function(e){var a=e.name,l=(e.id,e.hasIcon),t=e.type,n=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,b=e.checked,p=e.disabled,E=e.className,h=r.d.uniqueId("visual-picker-");return s.a.createElement("div",{className:o()("slds-visual-picker",{"slds-visual-picker_large":"large"===d,"slds-visual-picker_medium":"medium"===d,"slds-visual-picker_small":"small"===d},E)},s.a.createElement("input",{type:t,id:h,value:h,name:a,defaultChecked:b,disabled:p}),s.a.createElement("label",{htmlFor:h},l?s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},s.a.createElement("span",{className:"slds-is-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),s.a.createElement("span",{className:"slds-is-not-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:o()("slds-icon slds-icon-"+n+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===n}),sprite:n||"action",symbol:c})))):s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?s.a.createElement("span",{className:"slds-visual-picker__body"},i):null,l?null:s.a.createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},s.a.createElement(m.a,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var a=e.children,l=e.type,t=e.sprite,n=e.hasIcon,c=r.d.uniqueId("example-unique-name-"),m=s.a.Children.map(a,(function(e){return s.a.isValidElement(e)?s.a.cloneElement(e,{name:c,type:l,sprite:n&&t,hasIcon:n}):e}));return s.a.createElement(s.a.Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var _=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],x=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{disabled:!0,symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],f=[{id:"base_small",label:"Small base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"small"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"large"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"small"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"small"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"medium"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"medium"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"large"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"large"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"large"}))))}],g=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Professional"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete service CRM for teams of any size")],k=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Enterprise"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Everything you need to take support to the next level")],y=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Unlimited"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete support with enterprise-grade customization")],v=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],N=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",disabled:!0,label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],S=function(e){var a=e.symbol||"knowledge_base",l=e.icon||s.a.createElement(b.a,{className:"slds-icon-text-default",symbol:a,title:!1,assistiveText:!1});return s.a.createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},s.a.createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},l),s.a.createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},O=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"demo-only",style:{width:"24rem"}},s.a.createElement(S,{symbol:"knowledge_base"},s.a.createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),s.a.createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base")))}],j=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],w=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],C=n.c.h2,z=n.c.h3,D=n.c.h4,I=n.c.p,L=function(){return Object(t.createElement)(n.b,{},Object(t.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),Object(t.createElement)(c.a,{exampleOnly:!0},Object(r.f)(f,"checkbox-group")),C({id:"Coverable-Content"},"Coverable Content"),z({id:"Base"},"Base"),I({},"Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below."),D({id:"Small"},"Small"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_small")),D({id:"Medium"},"Medium"),Object(t.createElement)(c.a,null,Object(r.f)(_)),D({id:"Large"},"Large"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_large")),z({id:"States"},"States"),D({id:"Disabled"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(x,"disabled")),z({id:"Checkbox-Examples"},"Checkbox Examples"),I({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),D({id:"Small-Checkboxes"},"Small Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_small")),D({id:"Medium-Checkboxes"},"Medium Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group")),D({id:"Large-Checkboxes"},"Large Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_large")),C({id:"Non-Coverable-Content"},"Non Coverable Content"),z({id:"Base-2"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(v)),z({id:"States-2"},"States"),D({id:"Disabled-2"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(N,"disabled")),C({id:"Link"},"Link"),Object(t.createElement)(c.a,null,Object(r.f)(O)),C({id:"Vertical"},"Vertical"),z({id:"Base-3"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(j)),z({id:"States-3"},"States"),D({id:"Disabled-3"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(w,"disabled")))},A=function(){return Object(n.a)(L())}}});

package/__internal/chunked/docs/ui/components/welcome-mat/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/welcome-mat/docs.mdx.js"]=function(e){function t(t){for(var r,a,i=t[0],c=t[1],s=t[2],m=0,p=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(u&&u(t);p.length;)p.shift()();return l.push.apply(l,s||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,i=1;i<n.length;i++){var c=n[i];0!==o[c]&&(r=!1)}r&&(l.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={85:0},l=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var u=c;return l.push([715,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},715:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return xe})),n.d(t,"getContents",(function(){return Pe}));var r=n(0),o=n.n(r),l=n(4),a=n(3),i=n.n(a),c=n(12),s=n(31),u=n(8),m=function(e){return o.a.createElement("div",{className:"demo-only",style:{height:"800px"}},e.children)};m.propTypes={children:i.a.node.isRequired};var p=function(){return o.a.createElement(r.Fragment,null,o.a.createElement(c.a,{isBrand:!0},"Learn More"),o.a.createElement("div",{className:"slds-m-top_large"},o.a.createElement(u.b,null,o.a.createElement(s.a,{label:"Don't show this again"}))))},d=function(e){return o.a.createElement("h2",{className:"slds-welcome-mat__info-title",id:e.labelId},e.children)};d.propTypes={labelId:i.a.string.isRequired,children:i.a.string.isRequired};var f=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-description slds-text-longform"},e.children)};f.propTypes={children:i.a.node.isRequired};var h=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-actions"},o.a.createElement(p,null))};h.propTypes={children:i.a.node};var b=function(e){var t=e.labelId,n=e.headline,l=e.description,a=e.actions;return o.a.createElement(r.Fragment,null,o.a.createElement(d,{labelId:t},n),o.a.createElement(f,null,l),o.a.createElement(h,null,a))};b.propTypes={labelId:i.a.string.isRequired,headline:i.a.string.isRequired,description:i.a.object,actions:i.a.object},b.defaultProps={headline:"The Lightning Experience is here!",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var y=n(5),v=n.n(y),w=n(1),g=n(21),_=n(11),E=n(149);function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function j(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function S(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function T(e,t){return(T=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=I(e);if(t){var o=I(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return P(this,n)}}function P(e,t){if(t&&("object"===O(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function I(e){return(I=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var R=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&T(e,t)}(i,e);var t,n,l,a=x(i);function i(){return j(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.tile,n=e.isInfoOnly,l=t.completed,a=v()("slds-welcome-mat__tile",{"slds-welcome-mat__tile_complete":l,"slds-welcome-mat__tile_info-only":n}),i=function(){return o.a.createElement(r.Fragment,null,o.a.createElement("div",{className:v()("slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center")},o.a.createElement("div",{className:"slds-welcome-mat__tile-figure"},o.a.createElement("div",{className:"slds-welcome-mat__tile-icon-container"},o.a.createElement(_.a,{className:"slds-icon-text-default",symbol:t.symbol,title:!1,assistiveText:!1}),!n&&o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check",symbol:"check"})))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("div",{className:"slds-welcome-mat__tile-body"},o.a.createElement("h3",{className:"slds-welcome-mat__tile-title"},t.title),o.a.createElement("p",{className:"slds-welcome-mat__tile-description"},t.description))))};return o.a.createElement("li",{className:a},n?o.a.createElement("div",{className:"slds-media"},i()):o.a.createElement("a",{href:"#",className:"slds-box slds-box_link slds-media",onClick:function(e){return e.preventDefault()}},i()))}}])&&S(t.prototype,n),l&&S(t,l),Object.defineProperty(t,"prototype",{writable:!1}),i}(o.a.Component);R.propTypes={tile:i.a.object.isRequired},R.defaultProps={tile:{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",completed:!1}};var k=R,C=n(60);function N(e){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function L(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function q(e,t){return(q=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function D(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=B(e);if(t){var o=B(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return M(this,n)}}function M(e,t){if(t&&("object"===N(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function B(e){return(B=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var A=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&q(e,t)}(a,e);var t,n,r,l=D(a);function a(){return L(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=e.description,a=t/n*100;return o.a.createElement(o.a.Fragment,null,o.a.createElement(d,{labelId:r},"The Lightning Experience is here!"),o.a.createElement(f,null,l),o.a.createElement("div",{className:"slds-welcome-mat__info-progress"},o.a.createElement("p",null,o.a.createElement("strong",null,t,"/",n," units completed"))),o.a.createElement(C.a,{value:a,className:"slds-progress-bar_circular"}))}}])&&W(t.prototype,n),r&&W(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);A.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired,description:i.a.element.isRequired},A.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var z=A;function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function J(e,t){return(J=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function H(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=Y(e);if(t){var o=Y(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return K(this,n)}}function K(e,t){if(t&&("object"===V(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var $=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&J(e,t)}(a,e);var t,n,r,l=H(a);function a(){return F(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"renderTiles",value:function(e){var t=this.props,n=t.tiles,r=t.isInfoOnly;return n.filter((function(t){return(t.completed||!1)===e})).map((function(e,t){return o.a.createElement(k,{key:"".concat(w.d.uniqueId("welcome-mat-"),"-").concat(t),tile:e,isInfoOnly:r})}))}},{key:"completeTileCount",value:function(){var e=this.props.tiles;return e?e.filter((function(e){return!0===e.completed})).length:0}},{key:"totalTileCount",value:function(){var e=this.props.tiles;return e?e.length:0}},{key:"render",value:function(){var e=this.props,t=e.content,n=e.isInfoOnly,r=e.tiles,l=w.d.uniqueId("welcome-mat-"),a="".concat(l,"-label"),i="".concat(l,"-content"),c=v()("slds-welcome-mat",{"slds-welcome-mat_info-only":n,"slds-welcome-mat_splash":!r}),s=v()("slds-welcome-mat__info",{"slds-size_1-of-2":!!r,"slds-size_1-of-1":!r}),u=v()("slds-welcome-mat__tiles slds-size_1-of-2",{"slds-welcome-mat__tiles_info-only":n});return o.a.createElement(g.b,{className:"slds-modal_small","aria-labelledby":a},o.a.createElement(g.e,{className:"slds-modal__header_empty"}),o.a.createElement(g.c,{id:i},o.a.createElement("div",{className:c},o.a.createElement("div",{className:"slds-welcome-mat__content slds-grid"},o.a.createElement("div",{className:s,tabindex:"0",role:"region"},o.a.createElement("div",{className:"slds-welcome-mat__info-content"},t({complete:this.completeTileCount(),total:this.totalTileCount(),labelId:a}))),r&&r.length>0?o.a.createElement("ul",{className:u},this.renderTiles(!0),this.renderTiles(!1)):null))))}}])&&U(t.prototype,n),r&&U(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(r.Component);$.propTypes={tiles:i.a.arrayOf(i.a.shape({symbol:i.a.string.isRequired,title:i.a.string.isRequired,description:i.a.string.isRequired,completed:i.a.bool})),content:i.a.func.isRequired,isInfoOnly:i.a.bool},$.defaultProps={tiles:[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r})}};var G=$;function Q(e){return function(e){if(Array.isArray(e))return X(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return X(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Z=[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],ee=[Object.assign({},Z[0],{completed:!0}),Object.assign({},Z[1],{completed:!0})].concat(Q(Z.slice(2))),te=Q(ee).concat(Z.slice(2)),ne=o.a.createElement(g.a,null,o.a.createElement(G,null)),re=[{id:"default",label:"Default (Base)",demoStyles:"height: 800px;",element:ne},{id:"with-completed-tiles",label:"With Completed Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:ee}))},{id:"with-overflowing-tiles",label:"With Overflowing Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te}))},{id:"with-overflowing-tiles-and-long-description",label:"With Overflowing Tiles and Long Description",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r,description:o.a.createElement(o.a.Fragment,null,o.a.createElement("p",null,"Integer nibh libero, pulvinar sed libero et, rhoncus convallis purus. Sed faucibus nibh vel arcu vestibulum, nec commodo sapien tincidunt. In dignissim faucibus ipsum, nec placerat dui pulvinar a mi nec lectus feugiat vel arcu rhoncus convallis, nibh libero."),o.a.createElement("p",null,"Sed vestibulum dui ac diam suscipit vehicula. Nam vestibulum mi nec lectus feugiat euismod. Phasellus in suscipit est."),o.a.createElement("p",null,"Morbi facilisis aliquet dapibus. Morbi ac leo viverra, cursus nibh eget, ultrices mauris. Integer pharetra, lorem ac hendrerit vulputate, sem elit luctus metus, sit amet vehicula justo ex at sem."))})}}))}];function oe(e){return(oe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function le(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ae(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function ie(e,t){return(ie=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ce(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=ue(e);if(t){var o=ue(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return se(this,n)}}function se(e,t){if(t&&("object"===oe(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function ue(e){return(ue=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var me=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&ie(e,t)}(a,e);var t,n,r,l=ce(a);function a(){return le(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=t/n*100,a=100===l,i=a?o.a.createElement("p",null,"Cha-ching! You earned the badge."):o.a.createElement("p",null,t,"/",n," units completed");return o.a.createElement(o.a.Fragment,null,o.a.createElement("h2",{id:r,className:"slds-welcome-mat__info-title"},"The Lightning Experience is here!"),o.a.createElement("p",{className:"slds-welcome-mat__info-description slds-text-longform"},"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes."),o.a.createElement("div",{className:v()("slds-welcome-mat__info-progress",{"slds-welcome-mat__info-progress_complete":a})},o.a.createElement("div",{className:"slds-welcome-mat__info-badge-container"},o.a.createElement("img",{className:"slds-welcome-mat__info-badge",src:"/assets/images/welcome-mat/trailhead_badge@2x.png",width:"50",height:"50",alt:""}),o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check slds-icon_xx-small",symbol:"check"})),o.a.createElement("p",null,o.a.createElement("strong",null,"Lightning Explorer")),i),a?o.a.createElement(c.a,{isBrand:!0},"View on your Trailblazer Profile"):o.a.createElement(C.a,{value:l,className:"slds-progress-bar_circular"}))}}])&&ae(t.prototype,n),r&&ae(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);me.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired},me.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1"};var pe=me,de=[];G.defaultProps.tiles.forEach((function(e){de.push(Object.assign({},e,{completed:!0}))}));var fe=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}})),he=[{id:"default",label:"Default (Trailhead)",demoStyles:"height: 800px;",element:fe},{id:"trailhead-complete",label:"Trailhead Complete",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:de,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}}))}],be=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},tiles:null})),ye=[{id:"default",label:"Default (Splash)",demoStyles:"height: 800px;",element:be}],ve=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},isInfoOnly:!0})),we=[{id:"default",label:"Default (Info Only)",demoStyles:"height: 800px;",element:ve}],ge=(n(15),n(2)),_e=l.c.code,Ee=l.c.h2,Oe=l.c.h3,je=l.c.li,Se=l.c.p,Te=l.c.ul,xe=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic."),Object(r.createElement)(ge.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Ee({id:"About-Welcome-Mat"},"About Welcome Mat"),Te({},je({},"Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs."),je({},"The Welcome Mat consists of two sections, the informational left pane and the actionable right pane."),je({},"The left pane should be used to educate users as to the theme of the content displayed in the right pane."),je({},"Icon choices, colors, and tile content can be customized to fit your experience.")),Ee({id:"Base"},"Base"),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(re,"default")),Ee({id:"Examples"},"Examples"),Oe({id:"With-Completed-Steps"},"With Completed Steps"),Se({},"As users complete items in the list, the list updates to show as completed."),Se({},"As tiles are completed, they move to the bottom of the list, and get a modifier class of ",_e({},"slds-welcome-mat__tile_complete"),"."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Oe({id:"Trailhead-Connected"},"Trailhead Connected"),Se({},"The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat."),Se({},"Only Trailhead connected mats may have the Trailhead font for the header."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(he,"default")),Oe({id:"Trailhead-Connected-Complete"},"Trailhead Connected - Complete"),Se({},"When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page."),Se({},"When a class of ",_e({},"slds-welcome-mat__info-progress_complete")," is added to the ",_e({},".slds-welcome-mat__info-progress")," element, the complete check mark will appear with the Trailhead badge."),Se({},"Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(he,"trailhead-complete")},Object(w.f)(he,"trailhead-complete")),Oe({id:"Info-only"},"Info-only"),Se({},'In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the ',_e({},"<a>")," tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows."),Se({},"The tile container background changes from gray to white, which is done by applying the modifier class of ",_e({},"slds-welcome-mat__tiles_info-only")," to the ",_e({},"slds-welcome-mat__tiles")," element. Since the tiles aren't actionable, also apply the modifier class of ",_e({},"slds-welcome-mat__tile-info-only")," to each ",_e({},"slds-welcome-mat__tile")," element."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(we,"default")},Object(w.f)(we,"default")),Oe({id:"Splash"},"Splash"),Se({},"The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(ye,"default")},Object(w.f)(ye,"default")))},Pe=function(){return Object(l.a)(xe())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/welcome-mat/docs.mdx.js"]=function(e){function t(t){for(var r,a,i=t[0],c=t[1],s=t[2],m=0,p=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(u&&u(t);p.length;)p.shift()();return l.push.apply(l,s||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,i=1;i<n.length;i++){var c=n[i];0!==o[c]&&(r=!1)}r&&(l.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={85:0},l=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var u=c;return l.push([715,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},715:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return xe})),n.d(t,"getContents",(function(){return Pe}));var r=n(0),o=n.n(r),l=n(4),a=n(3),i=n.n(a),c=n(12),s=n(32),u=n(8),m=function(e){return o.a.createElement("div",{className:"demo-only",style:{height:"800px"}},e.children)};m.propTypes={children:i.a.node.isRequired};var p=function(){return o.a.createElement(r.Fragment,null,o.a.createElement(c.a,{isBrand:!0},"Learn More"),o.a.createElement("div",{className:"slds-m-top_large"},o.a.createElement(u.b,null,o.a.createElement(s.a,{label:"Don't show this again"}))))},d=function(e){return o.a.createElement("h2",{className:"slds-welcome-mat__info-title",id:e.labelId},e.children)};d.propTypes={labelId:i.a.string.isRequired,children:i.a.string.isRequired};var f=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-description slds-text-longform"},e.children)};f.propTypes={children:i.a.node.isRequired};var h=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-actions"},o.a.createElement(p,null))};h.propTypes={children:i.a.node};var b=function(e){var t=e.labelId,n=e.headline,l=e.description,a=e.actions;return o.a.createElement(r.Fragment,null,o.a.createElement(d,{labelId:t},n),o.a.createElement(f,null,l),o.a.createElement(h,null,a))};b.propTypes={labelId:i.a.string.isRequired,headline:i.a.string.isRequired,description:i.a.object,actions:i.a.object},b.defaultProps={headline:"The Lightning Experience is here!",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var y=n(5),v=n.n(y),w=n(1),g=n(21),_=n(11),E=n(149);function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function j(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function S(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function T(e,t){return(T=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=I(e);if(t){var o=I(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return P(this,n)}}function P(e,t){if(t&&("object"===O(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function I(e){return(I=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var R=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&T(e,t)}(i,e);var t,n,l,a=x(i);function i(){return j(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.tile,n=e.isInfoOnly,l=t.completed,a=v()("slds-welcome-mat__tile",{"slds-welcome-mat__tile_complete":l,"slds-welcome-mat__tile_info-only":n}),i=function(){return o.a.createElement(r.Fragment,null,o.a.createElement("div",{className:v()("slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center")},o.a.createElement("div",{className:"slds-welcome-mat__tile-figure"},o.a.createElement("div",{className:"slds-welcome-mat__tile-icon-container"},o.a.createElement(_.a,{className:"slds-icon-text-default",symbol:t.symbol,title:!1,assistiveText:!1}),!n&&o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check",symbol:"check"})))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("div",{className:"slds-welcome-mat__tile-body"},o.a.createElement("h3",{className:"slds-welcome-mat__tile-title"},t.title),o.a.createElement("p",{className:"slds-welcome-mat__tile-description"},t.description))))};return o.a.createElement("li",{className:a},n?o.a.createElement("div",{className:"slds-media"},i()):o.a.createElement("a",{href:"#",className:"slds-box slds-box_link slds-media",onClick:function(e){return e.preventDefault()}},i()))}}])&&S(t.prototype,n),l&&S(t,l),Object.defineProperty(t,"prototype",{writable:!1}),i}(o.a.Component);R.propTypes={tile:i.a.object.isRequired},R.defaultProps={tile:{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",completed:!1}};var k=R,C=n(60);function N(e){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function L(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function q(e,t){return(q=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function D(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=B(e);if(t){var o=B(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return M(this,n)}}function M(e,t){if(t&&("object"===N(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function B(e){return(B=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var A=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&q(e,t)}(a,e);var t,n,r,l=D(a);function a(){return L(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=e.description,a=t/n*100;return o.a.createElement(o.a.Fragment,null,o.a.createElement(d,{labelId:r},"The Lightning Experience is here!"),o.a.createElement(f,null,l),o.a.createElement("div",{className:"slds-welcome-mat__info-progress"},o.a.createElement("p",null,o.a.createElement("strong",null,t,"/",n," units completed"))),o.a.createElement(C.a,{value:a,className:"slds-progress-bar_circular"}))}}])&&W(t.prototype,n),r&&W(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);A.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired,description:i.a.element.isRequired},A.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var z=A;function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function J(e,t){return(J=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function H(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=Y(e);if(t){var o=Y(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return K(this,n)}}function K(e,t){if(t&&("object"===V(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var $=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&J(e,t)}(a,e);var t,n,r,l=H(a);function a(){return F(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"renderTiles",value:function(e){var t=this.props,n=t.tiles,r=t.isInfoOnly;return n.filter((function(t){return(t.completed||!1)===e})).map((function(e,t){return o.a.createElement(k,{key:"".concat(w.d.uniqueId("welcome-mat-"),"-").concat(t),tile:e,isInfoOnly:r})}))}},{key:"completeTileCount",value:function(){var e=this.props.tiles;return e?e.filter((function(e){return!0===e.completed})).length:0}},{key:"totalTileCount",value:function(){var e=this.props.tiles;return e?e.length:0}},{key:"render",value:function(){var e=this.props,t=e.content,n=e.isInfoOnly,r=e.tiles,l=w.d.uniqueId("welcome-mat-"),a="".concat(l,"-label"),i="".concat(l,"-content"),c=v()("slds-welcome-mat",{"slds-welcome-mat_info-only":n,"slds-welcome-mat_splash":!r}),s=v()("slds-welcome-mat__info",{"slds-size_1-of-2":!!r,"slds-size_1-of-1":!r}),u=v()("slds-welcome-mat__tiles slds-size_1-of-2",{"slds-welcome-mat__tiles_info-only":n});return o.a.createElement(g.b,{className:"slds-modal_small","aria-labelledby":a},o.a.createElement(g.e,{className:"slds-modal__header_empty"}),o.a.createElement(g.c,{id:i},o.a.createElement("div",{className:c},o.a.createElement("div",{className:"slds-welcome-mat__content slds-grid"},o.a.createElement("div",{className:s,tabindex:"0",role:"region"},o.a.createElement("div",{className:"slds-welcome-mat__info-content"},t({complete:this.completeTileCount(),total:this.totalTileCount(),labelId:a}))),r&&r.length>0?o.a.createElement("ul",{className:u},this.renderTiles(!0),this.renderTiles(!1)):null))))}}])&&U(t.prototype,n),r&&U(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(r.Component);$.propTypes={tiles:i.a.arrayOf(i.a.shape({symbol:i.a.string.isRequired,title:i.a.string.isRequired,description:i.a.string.isRequired,completed:i.a.bool})),content:i.a.func.isRequired,isInfoOnly:i.a.bool},$.defaultProps={tiles:[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r})}};var G=$;function Q(e){return function(e){if(Array.isArray(e))return X(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return X(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Z=[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],ee=[Object.assign({},Z[0],{completed:!0}),Object.assign({},Z[1],{completed:!0})].concat(Q(Z.slice(2))),te=Q(ee).concat(Z.slice(2)),ne=o.a.createElement(g.a,null,o.a.createElement(G,null)),re=[{id:"default",label:"Default (Base)",demoStyles:"height: 800px;",element:ne},{id:"with-completed-tiles",label:"With Completed Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:ee}))},{id:"with-overflowing-tiles",label:"With Overflowing Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te}))},{id:"with-overflowing-tiles-and-long-description",label:"With Overflowing Tiles and Long Description",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r,description:o.a.createElement(o.a.Fragment,null,o.a.createElement("p",null,"Integer nibh libero, pulvinar sed libero et, rhoncus convallis purus. Sed faucibus nibh vel arcu vestibulum, nec commodo sapien tincidunt. In dignissim faucibus ipsum, nec placerat dui pulvinar a mi nec lectus feugiat vel arcu rhoncus convallis, nibh libero."),o.a.createElement("p",null,"Sed vestibulum dui ac diam suscipit vehicula. Nam vestibulum mi nec lectus feugiat euismod. Phasellus in suscipit est."),o.a.createElement("p",null,"Morbi facilisis aliquet dapibus. Morbi ac leo viverra, cursus nibh eget, ultrices mauris. Integer pharetra, lorem ac hendrerit vulputate, sem elit luctus metus, sit amet vehicula justo ex at sem."))})}}))}];function oe(e){return(oe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function le(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ae(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function ie(e,t){return(ie=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ce(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=ue(e);if(t){var o=ue(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return se(this,n)}}function se(e,t){if(t&&("object"===oe(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function ue(e){return(ue=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var me=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&ie(e,t)}(a,e);var t,n,r,l=ce(a);function a(){return le(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=t/n*100,a=100===l,i=a?o.a.createElement("p",null,"Cha-ching! You earned the badge."):o.a.createElement("p",null,t,"/",n," units completed");return o.a.createElement(o.a.Fragment,null,o.a.createElement("h2",{id:r,className:"slds-welcome-mat__info-title"},"The Lightning Experience is here!"),o.a.createElement("p",{className:"slds-welcome-mat__info-description slds-text-longform"},"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes."),o.a.createElement("div",{className:v()("slds-welcome-mat__info-progress",{"slds-welcome-mat__info-progress_complete":a})},o.a.createElement("div",{className:"slds-welcome-mat__info-badge-container"},o.a.createElement("img",{className:"slds-welcome-mat__info-badge",src:"/assets/images/welcome-mat/trailhead_badge@2x.png",width:"50",height:"50",alt:""}),o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check slds-icon_xx-small",symbol:"check"})),o.a.createElement("p",null,o.a.createElement("strong",null,"Lightning Explorer")),i),a?o.a.createElement(c.a,{isBrand:!0},"View on your Trailblazer Profile"):o.a.createElement(C.a,{value:l,className:"slds-progress-bar_circular"}))}}])&&ae(t.prototype,n),r&&ae(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);me.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired},me.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1"};var pe=me,de=[];G.defaultProps.tiles.forEach((function(e){de.push(Object.assign({},e,{completed:!0}))}));var fe=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}})),he=[{id:"default",label:"Default (Trailhead)",demoStyles:"height: 800px;",element:fe},{id:"trailhead-complete",label:"Trailhead Complete",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:de,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}}))}],be=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},tiles:null})),ye=[{id:"default",label:"Default (Splash)",demoStyles:"height: 800px;",element:be}],ve=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},isInfoOnly:!0})),we=[{id:"default",label:"Default (Info Only)",demoStyles:"height: 800px;",element:ve}],ge=(n(15),n(2)),_e=l.c.code,Ee=l.c.h2,Oe=l.c.h3,je=l.c.li,Se=l.c.p,Te=l.c.ul,xe=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic."),Object(r.createElement)(ge.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Ee({id:"About-Welcome-Mat"},"About Welcome Mat"),Te({},je({},"Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs."),je({},"The Welcome Mat consists of two sections, the informational left pane and the actionable right pane."),je({},"The left pane should be used to educate users as to the theme of the content displayed in the right pane."),je({},"Icon choices, colors, and tile content can be customized to fit your experience.")),Ee({id:"Base"},"Base"),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(re,"default")),Ee({id:"Examples"},"Examples"),Oe({id:"With-Completed-Steps"},"With Completed Steps"),Se({},"As users complete items in the list, the list updates to show as completed."),Se({},"As tiles are completed, they move to the bottom of the list, and get a modifier class of ",_e({},"slds-welcome-mat__tile_complete"),"."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Oe({id:"Trailhead-Connected"},"Trailhead Connected"),Se({},"The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat."),Se({},"Only Trailhead connected mats may have the Trailhead font for the header."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(he,"default")),Oe({id:"Trailhead-Connected-Complete"},"Trailhead Connected - Complete"),Se({},"When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page."),Se({},"When a class of ",_e({},"slds-welcome-mat__info-progress_complete")," is added to the ",_e({},".slds-welcome-mat__info-progress")," element, the complete check mark will appear with the Trailhead badge."),Se({},"Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(he,"trailhead-complete")},Object(w.f)(he,"trailhead-complete")),Oe({id:"Info-only"},"Info-only"),Se({},'In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the ',_e({},"<a>")," tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows."),Se({},"The tile container background changes from gray to white, which is done by applying the modifier class of ",_e({},"slds-welcome-mat__tiles_info-only")," to the ",_e({},"slds-welcome-mat__tiles")," element. Since the tiles aren't actionable, also apply the modifier class of ",_e({},"slds-welcome-mat__tile-info-only")," to each ",_e({},"slds-welcome-mat__tile")," element."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(we,"default")},Object(w.f)(we,"default")),Oe({id:"Splash"},"Splash"),Se({},"The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(ye,"default")},Object(w.f)(ye,"default")))},Pe=function(){return Object(l.a)(xe())}}});