npm - @salesforce-ux/design-system - Versions diffs - 2.29.0 → 2.29.2 - Mend

@salesforce-ux/design-system 2.29.0 → 2.29.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (803) hide show

package/__internal/chunked/docs/ui/components/setup-assistant/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9238:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return oe},getElement:function(){return ae}});var r=n(1594),s=n.n(r),i=n(5671),a=n(6547),o=(n(3212),n(1374)),l=n(5619),c=n(942),u=n.n(c),d=n(9382),m=n(6955),p=function(e){return s().createElement("div",{className:u()("slds-summary-detail",e.className)},e.children)},f=function(e){return s().createElement("div",{hidden:!e.isOpen,className:u()("slds-summary-detail__content",e.className),id:e.referenceId},e.children)},b=function(e){return s().createElement("div",{className:u()("slds-summary-detail__title",e.className)},e.children)},h=function(e){return s().createElement(m.A,{className:u()("slds-m-right_x-small",e.className),iconClassName:"slds-summary-detail__action-icon",symbol:"switch",title:"Toggle details for ".concat(e.summaryTitle),assistiveText:"Toggle details for ".concat(e.summaryTitle),"aria-controls":e.referenceId,"aria-expanded":e.isOpen?"true":"false"})},g=(d.Ex,d.Ex,n(7412)),y=n.n(g),v=n(538),E=n(9825),_=n(806),O=function(e){return s().createElement("div",{className:u()("slds-form-element",e.className)},e.children)},S=function(e){return s().createElement("label",{className:u()("slds-checkbox_toggle slds-grid",e.className),htmlFor:e.id},e.children)},w=function(e){return s().createElement("span",{className:u()("slds-form-element__label","slds-m-bottom_none",{"slds-assistive-text":e.isBare})},e.children)},x=function(e){return s().createElement("input",{name:e.uniqueId,value:e.uniqueId,type:"checkbox",role:"switch",disabled:e.disabled,defaultChecked:e.checked,"aria-describedby":e.uniqueId})},N=function(e){return s().createElement("span",{id:e.uniqueId,className:u()("slds-checkbox_faux_container",e.className)},s().createElement("span",{className:"slds-checkbox_faux"}),s().createElement("span",{className:u()("slds-checkbox_on",e.className)},e.labelTextOn\|\|"Enabled"),s().createElement("span",{className:u()("slds-checkbox_off",e.className)},e.labelTextOff\|\|"Disabled"))},k=function(e){var t=_.Ay.uniqueId("checkbox-toggle-");return s().createElement(O,null,s().createElement(S,null,s().createElement(w,{isBare:e.isBare},e.title\|\|"Toggle Label"),s().createElement(x,{uniqueId:t,checked:e.checked,disabled:e.disabled}),s().createElement(N,{uniqueId:t,labelTextOn:e.labelTextOn,labelTextOff:e.labelTextOff})))},P=n(1314);function T(e){return T="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},T(e)}function A(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,j(r.key),r)}}function j(e){var t=function(e){if("object"!=T(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function B(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(B=function(){return!!e})()}function C(e){return C=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},C(e)}function I(e,t){return I=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},I(e,t)}var q=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=C(t),function(e,t){if(t&&("object"==T(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)}(e,B()?Reflect.construct(t,n\|\|[],C(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&I(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=this.props,t=e.title,n=e.description,r=e.action,i=e.duration,a=e.stepProgress,o=e.isActiveStep,l=e.referenceId,c=e.isOpen,d=r&&("button"===r.type?s().createElement(E.$n,{isOutlineBrand:!0},r.title):"toggle"===r.type?s().createElement(k,{title:r.title,isBare:!0,checked:r.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r.title)),m=a&&(a.isComplete?s().createElement(P.A,{className:"slds-progress-ring_large",percent:100,isComplete:!0},s().createElement(v.eX,{symbol:"check",title:"Complete",assistiveText:"Complete"})):s().createElement(P.A,{className:"slds-progress-ring_large",percent:o?a.percentage:0,isActiveStep:o,isFilling:!0},a.number)),p=s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-setup-assistant__step-summary-content slds-media__body"},s().createElement("h3",{className:"slds-setup-assistant__step-summary-title slds-text-heading_small"},l?s().createElement(E.$n,{className:"slds-button_reset","aria-controls":l,"aria-expanded":c?"true":"false"},t):t),s().createElement("p",null,n)),s().createElement("div",{className:"slds-media__figure slds-media__figure_reverse"},d,i&&s().createElement("p",{className:u()("slds-text-align_right","slds-text-color_weak",{"slds-p-top_medium":r})},i)));return s().createElement("div",{className:"slds-setup-assistant__step-summary"},a?s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},m),s().createElement("div",{className:"slds-media__body slds-m-top_x-small"},p)):p)}}],r&&A(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);q.propTypes={title:y().string.isRequired,description:y().string.isRequired,action:y().object,duration:y().string,stepProgress:y().object,isActiveStep:y().bool},q.defaultProps={title:"Configure user settings for this org",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."};var L=q,z=n(2870);y().oneOf(["info","success","warning","error"]),y().node;var D=function(e){var t=e.children,n=e.theme;return s().createElement("div",{className:u()("slds-scoped-notification slds-media slds-media_center",e.theme&&"slds-scoped-notification_"+e.theme),role:"status"},s().createElement("div",{className:"slds-media__figure"},s().createElement(v.eX,{title:"information",className:u()("slds-icon_small",n&&"light"===n&&"slds-icon-text-default"),assistiveText:"information",symbol:"info"})),s().createElement("div",{className:"slds-media__body"},t))};function R(e){return R="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},R(e)}function H(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,U(r.key),r)}}function U(e){var t=function(e){if("object"!=R(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=R(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==R(t)?t:t+""}function F(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(F=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},V(e)}function X(e,t){return X=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},X(e,t)}D.propTypes={children:y().node,theme:y().oneOf(["light","dark"])};var M=[{complete:!0,title:"Turn on Lightning for all users.",action:{type:"toggle",title:"Turn on Lightning for all users",checked:!0}},{active:!0,title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",action:{type:"link",title:"View in Trailhead"}},{title:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"}}],J=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=V(t),function(e,t){if(t&&("object"==R(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)}(e,F()?Reflect.construct(t,n\|\|[],V(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&X(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=u()("slds-setup-assistant__step-detail",this.props.className);return s().createElement("div",{className:e},s().createElement(z.ke,{value:"50",hasBorders:!0,hasSuccessBar:!0},M.map(function(e,t){return s().createElement(z.pn,{key:"progress-step-".concat(t),done:e.complete,hasSuccessMarker:e.complete,active:e.active,assistiveText:e.title},s().createElement("div",{className:"slds-size_3-of-4"},e.title),s().createElement("div",{className:"slds-grid slds-grid_align-end slds-size_1-of-4"},(n=e.action)&&"button"===n.type?s().createElement(E.$n,{isOutlineBrand:!0},n.title):"toggle"===n.type?s().createElement(k,{title:n.title,isBare:!0,checked:n.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},n.title)));var n})),s().createElement(D,{theme:"light"},s().createElement("p",null,"It looks as if duplicates exist for this lead."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates"))))}}],r&&H(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);J.propTypes={className:y().string};var W=J,$=n(4231),Y=function(e){var t=_.Ay.uniqueId("progress-bar-label-id-");return s().createElement("div",{className:e.className},s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-p-bottom_x-small",id:t},s().createElement("span",null,e.label),s().createElement("span",{"aria-hidden":"true"},s().createElement("strong",null,"".concat(e.value,"% Complete")))),s().createElement($.z,{className:u()(e.barClassName),value:e.value,"aria-labelledby":t,isSuccess:e.isSuccess}))},Q=($.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,[{title:"Add Users to Your Org",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"},duration:"4 mins",stepProgress:{isComplete:!0,number:"1"}},{title:"Create Profiles for Your Users",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Profiles"},stepProgress:{isComplete:!1,number:"2",percentage:33},isActiveStep:!0,isOpen:!0},{title:"Learn How to Use Profiles to Control Visibility",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"View on Trailhead"},duration:"15 mins",stepProgress:{isComplete:!0,number:"3",percentage:"0"}},{title:"Turn On Tracking for Profiles",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"toggle",title:"Turn on tracking for profiles"},stepProgress:{isComplete:!1,number:"4",percentage:"0"}},{title:"Setup Einstein Visibility for Admins",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"Watch Video"},stepProgress:{isComplete:!1,number:"5",percentage:"0"}}]),G=function(e){return s().createElement("li",{className:"slds-setup-assistant__item"},s().createElement("article",{className:"slds-setup-assistant__step"},e.children))},K=function(e){return s().createElement("ol",{className:"slds-setup-assistant"},e.children)},Z=function(e){var t=e.isBase,n=e.stepsHaveProgress,r=e.stepsAreExpandable;return s().createElement(K,null,t&&function(e,t){return e.map(function(e,n){return s().createElement(G,{key:"base-step-".concat(e.title,"-").concat(t,"-").concat(n)},s().createElement(L,{title:e.title,stepProgress:t&&e.stepProgress,action:e.action,duration:e.duration}))})}(Q,n),r&&Q.map(function(e,t){return s().createElement(G,{key:"expand-step-".concat(e.title,"-").concat(t)},s().createElement(p,{className:u()({"slds-is-open":e.isOpen})},s().createElement(h,{className:"slds-m-top_x-small",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen,summaryTitle:e.title}),s().createElement("div",{className:"slds-container_fluid"},s().createElement(b,null,s().createElement(L,{title:e.title,isActiveStep:e.isActiveStep,stepProgress:e.stepProgress,duration:e.duration\|\|"10 mins",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen})),s().createElement(f,{referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen},s().createElement(W,null)))))}))},ee=function(e){return s().createElement("section",{className:"slds-card"},s().createElement("header",{className:"slds-theme_shade slds-p-around_medium slds-m-bottom_small"},s().createElement(Y,{barClassName:"slds-progress-bar_circular",label:"Complete all the steps below to finish setting up Einstein Visibility",value:"50"})),s().createElement(s().Fragment,null,e.children))},te=i.XB.a,ne=i.XB.h2,re=i.XB.li,se=i.XB.p,ie=i.XB.ul,ae=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Setup Assistant provides Administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform. It provides a prescriptive and detailed guide for learning, configuring, and importing data which can take hours to days."),(0,r.createElement)(a.A,{exampleOnly:!0},(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0})),ne({id:"About-Setup-Assistant"},"About Setup Assistant"),se({},"Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos."),ie({},re({},"The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant)."),re({},"Use links to navigate to Trailheads, articles, Help & Training documentation, and videos."),re({},"Use the Outline Brand Button to open LSF or configuration pages."),re({},"Estimated time is optional.")),ne({id:"Base"},"Base"),se({},"Basic list of learning and task links that do not require progress tracking and do not have sequential steps."),(0,r.createElement)(o.A,{title:"Setup Assistant Base"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0}))),ne({id:"With-Step-Progress"},"With Step Progress"),se({},"List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the ",te({href:"../progress-ring"},"Progress Ring")," component."),(0,r.createElement)(o.A,{title:"Setup Assistant Base steps with Progress"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0}))),ne({id:"Hub-with-Expandable-Steps"},"Hub with Expandable Steps"),se({},"Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional."),se({},"Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps."),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title include"," ",(0,r.createElement)("code",null,"aria-controls=[uniqueId]")," where the ",(0,r.createElement)("code",null,"uniqueId")," matches the "," ",(0,r.createElement)("code",null,"id")," on the"," ",(0,r.createElement)("code",null,"<div>")," with ",(0,r.createElement)("code",null,'class="slds-summary-detail__content"'),".")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{stepsAreExpandable:!0}))),ne({id:"In-a-Card"},"In a Card"),se({},"If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the ",te({href:"../progress-bar"},"Descriptive Progress Bar")),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using the"," ",(0,r.createElement)("code",null,"slds-assistive-text")," class.")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(ee,null,(0,r.createElement)(Z,{stepsAreExpandable:!0})))))},oe=function(){return(0,i.Qr)(ae())}}},s={};function i(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,s){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],r=e[u][1],s=e[u][2];for(var o=!0,l=0;l<n.length;l++)(!1&s\|\|a>=s)&&Object.keys(i.O).every(function(e){return i.O[e](n[l])})?n.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(u--,1);var c=r();void 0!==c&&(t=c)}}return t}s=s\|\|0;for(var u=e.length;u>0&&e[u-1][2]>s;u--)e[u]=e[u-1];e[u]=[n,r,s]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var s=Object.create(null);i.r(s);var a={};t=t\|\|[null,n({}),n([]),n(n)];for(var o=2&r&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(s,a),s},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=5997,function(){var e={5997:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,s,a=n[0],o=n[1],l=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(r in o)i.o(o,r)&&(i.m[r]=o[r]);if(l)var u=l(i)}for(t&&t(n);c<a.length;c++)s=a[c],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(9238)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/setup-assistant/docs.mdx.js"]=a}();
1	+ var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9238:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return oe},getElement:function(){return ae}});var r=n(1594),s=n.n(r),i=n(5671),a=n(6547),o=(n(3212),n(1374)),l=n(5619),c=n(942),u=n.n(c),d=n(9382),m=n(6955),p=function(e){return s().createElement("div",{className:u()("slds-summary-detail",e.className)},e.children)},f=function(e){return s().createElement("div",{hidden:!e.isOpen,className:u()("slds-summary-detail__content",e.className),id:e.referenceId},e.children)},b=function(e){return s().createElement("div",{className:u()("slds-summary-detail__title",e.className)},e.children)},h=function(e){return s().createElement(m.A,{className:u()("slds-m-right_x-small",e.className),iconClassName:"slds-summary-detail__action-icon",symbol:"switch",title:"Toggle details for ".concat(e.summaryTitle),assistiveText:"Toggle details for ".concat(e.summaryTitle),"aria-controls":e.referenceId,"aria-expanded":e.isOpen?"true":"false"})},g=(d.Ex,d.Ex,n(4187)),y=n.n(g),v=n(538),E=n(9825),_=n(806),O=function(e){return s().createElement("div",{className:u()("slds-form-element",e.className)},e.children)},S=function(e){return s().createElement("label",{className:u()("slds-checkbox_toggle slds-grid",e.className),htmlFor:e.id},e.children)},w=function(e){return s().createElement("span",{className:u()("slds-form-element__label","slds-m-bottom_none",{"slds-assistive-text":e.isBare})},e.children)},x=function(e){return s().createElement("input",{name:e.uniqueId,value:e.uniqueId,type:"checkbox",role:"switch",disabled:e.disabled,defaultChecked:e.checked,"aria-describedby":e.uniqueId})},N=function(e){return s().createElement("span",{id:e.uniqueId,className:u()("slds-checkbox_faux_container",e.className)},s().createElement("span",{className:"slds-checkbox_faux"}),s().createElement("span",{className:u()("slds-checkbox_on",e.className)},e.labelTextOn\|\|"Enabled"),s().createElement("span",{className:u()("slds-checkbox_off",e.className)},e.labelTextOff\|\|"Disabled"))},k=function(e){var t=_.Ay.uniqueId("checkbox-toggle-");return s().createElement(O,null,s().createElement(S,null,s().createElement(w,{isBare:e.isBare},e.title\|\|"Toggle Label"),s().createElement(x,{uniqueId:t,checked:e.checked,disabled:e.disabled}),s().createElement(N,{uniqueId:t,labelTextOn:e.labelTextOn,labelTextOff:e.labelTextOff})))},P=n(1314);function T(e){return T="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},T(e)}function A(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,j(r.key),r)}}function j(e){var t=function(e){if("object"!=T(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function B(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(B=function(){return!!e})()}function C(e){return C=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},C(e)}function I(e,t){return I=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},I(e,t)}var q=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=C(t),function(e,t){if(t&&("object"==T(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)}(e,B()?Reflect.construct(t,n\|\|[],C(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&I(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=this.props,t=e.title,n=e.description,r=e.action,i=e.duration,a=e.stepProgress,o=e.isActiveStep,l=e.referenceId,c=e.isOpen,d=r&&("button"===r.type?s().createElement(E.$n,{isOutlineBrand:!0},r.title):"toggle"===r.type?s().createElement(k,{title:r.title,isBare:!0,checked:r.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r.title)),m=a&&(a.isComplete?s().createElement(P.A,{className:"slds-progress-ring_large",percent:100,isComplete:!0},s().createElement(v.eX,{symbol:"check",title:"Complete",assistiveText:"Complete"})):s().createElement(P.A,{className:"slds-progress-ring_large",percent:o?a.percentage:0,isActiveStep:o,isFilling:!0},a.number)),p=s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-setup-assistant__step-summary-content slds-media__body"},s().createElement("h3",{className:"slds-setup-assistant__step-summary-title slds-text-heading_small"},l?s().createElement(E.$n,{className:"slds-button_reset","aria-controls":l,"aria-expanded":c?"true":"false"},t):t),s().createElement("p",null,n)),s().createElement("div",{className:"slds-media__figure slds-media__figure_reverse"},d,i&&s().createElement("p",{className:u()("slds-text-align_right","slds-text-color_weak",{"slds-p-top_medium":r})},i)));return s().createElement("div",{className:"slds-setup-assistant__step-summary"},a?s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},m),s().createElement("div",{className:"slds-media__body slds-m-top_x-small"},p)):p)}}],r&&A(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);q.propTypes={title:y().string.isRequired,description:y().string.isRequired,action:y().object,duration:y().string,stepProgress:y().object,isActiveStep:y().bool},q.defaultProps={title:"Configure user settings for this org",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."};var L=q,z=n(2870);y().oneOf(["info","success","warning","error"]),y().node;var D=function(e){var t=e.children,n=e.theme;return s().createElement("div",{className:u()("slds-scoped-notification slds-media slds-media_center",e.theme&&"slds-scoped-notification_"+e.theme),role:"status"},s().createElement("div",{className:"slds-media__figure"},s().createElement(v.eX,{title:"information",className:u()("slds-icon_small",n&&"light"===n&&"slds-icon-text-default"),assistiveText:"information",symbol:"info"})),s().createElement("div",{className:"slds-media__body"},t))};function R(e){return R="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},R(e)}function H(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,U(r.key),r)}}function U(e){var t=function(e){if("object"!=R(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=R(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==R(t)?t:t+""}function F(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(F=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},V(e)}function X(e,t){return X=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},X(e,t)}D.propTypes={children:y().node,theme:y().oneOf(["light","dark"])};var M=[{complete:!0,title:"Turn on Lightning for all users.",action:{type:"toggle",title:"Turn on Lightning for all users",checked:!0}},{active:!0,title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",action:{type:"link",title:"View in Trailhead"}},{title:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"}}],J=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=V(t),function(e,t){if(t&&("object"==R(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)}(e,F()?Reflect.construct(t,n\|\|[],V(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&X(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=u()("slds-setup-assistant__step-detail",this.props.className);return s().createElement("div",{className:e},s().createElement(z.ke,{value:"50",hasBorders:!0,hasSuccessBar:!0},M.map(function(e,t){return s().createElement(z.pn,{key:"progress-step-".concat(t),done:e.complete,hasSuccessMarker:e.complete,active:e.active,assistiveText:e.title},s().createElement("div",{className:"slds-size_3-of-4"},e.title),s().createElement("div",{className:"slds-grid slds-grid_align-end slds-size_1-of-4"},(n=e.action)&&"button"===n.type?s().createElement(E.$n,{isOutlineBrand:!0},n.title):"toggle"===n.type?s().createElement(k,{title:n.title,isBare:!0,checked:n.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},n.title)));var n})),s().createElement(D,{theme:"light"},s().createElement("p",null,"It looks as if duplicates exist for this lead."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates"))))}}],r&&H(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);J.propTypes={className:y().string};var W=J,$=n(4231),Y=function(e){var t=_.Ay.uniqueId("progress-bar-label-id-");return s().createElement("div",{className:e.className},s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-p-bottom_x-small",id:t},s().createElement("span",null,e.label),s().createElement("span",{"aria-hidden":"true"},s().createElement("strong",null,"".concat(e.value,"% Complete")))),s().createElement($.z,{className:u()(e.barClassName),value:e.value,"aria-labelledby":t,isSuccess:e.isSuccess}))},Q=($.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,[{title:"Add Users to Your Org",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"},duration:"4 mins",stepProgress:{isComplete:!0,number:"1"}},{title:"Create Profiles for Your Users",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Profiles"},stepProgress:{isComplete:!1,number:"2",percentage:33},isActiveStep:!0,isOpen:!0},{title:"Learn How to Use Profiles to Control Visibility",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"View on Trailhead"},duration:"15 mins",stepProgress:{isComplete:!0,number:"3",percentage:"0"}},{title:"Turn On Tracking for Profiles",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"toggle",title:"Turn on tracking for profiles"},stepProgress:{isComplete:!1,number:"4",percentage:"0"}},{title:"Setup Einstein Visibility for Admins",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"Watch Video"},stepProgress:{isComplete:!1,number:"5",percentage:"0"}}]),G=function(e){return s().createElement("li",{className:"slds-setup-assistant__item"},s().createElement("article",{className:"slds-setup-assistant__step"},e.children))},K=function(e){return s().createElement("ol",{className:"slds-setup-assistant"},e.children)},Z=function(e){var t=e.isBase,n=e.stepsHaveProgress,r=e.stepsAreExpandable;return s().createElement(K,null,t&&function(e,t){return e.map(function(e,n){return s().createElement(G,{key:"base-step-".concat(e.title,"-").concat(t,"-").concat(n)},s().createElement(L,{title:e.title,stepProgress:t&&e.stepProgress,action:e.action,duration:e.duration}))})}(Q,n),r&&Q.map(function(e,t){return s().createElement(G,{key:"expand-step-".concat(e.title,"-").concat(t)},s().createElement(p,{className:u()({"slds-is-open":e.isOpen})},s().createElement(h,{className:"slds-m-top_x-small",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen,summaryTitle:e.title}),s().createElement("div",{className:"slds-container_fluid"},s().createElement(b,null,s().createElement(L,{title:e.title,isActiveStep:e.isActiveStep,stepProgress:e.stepProgress,duration:e.duration\|\|"10 mins",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen})),s().createElement(f,{referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen},s().createElement(W,null)))))}))},ee=function(e){return s().createElement("section",{className:"slds-card"},s().createElement("header",{className:"slds-theme_shade slds-p-around_medium slds-m-bottom_small"},s().createElement(Y,{barClassName:"slds-progress-bar_circular",label:"Complete all the steps below to finish setting up Einstein Visibility",value:"50"})),s().createElement(s().Fragment,null,e.children))},te=i.XB.a,ne=i.XB.h2,re=i.XB.li,se=i.XB.p,ie=i.XB.ul,ae=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Setup Assistant provides Administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform. It provides a prescriptive and detailed guide for learning, configuring, and importing data which can take hours to days."),(0,r.createElement)(a.A,{exampleOnly:!0},(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0})),ne({id:"About-Setup-Assistant"},"About Setup Assistant"),se({},"Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos."),ie({},re({},"The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant)."),re({},"Use links to navigate to Trailheads, articles, Help & Training documentation, and videos."),re({},"Use the Outline Brand Button to open LSF or configuration pages."),re({},"Estimated time is optional.")),ne({id:"Base"},"Base"),se({},"Basic list of learning and task links that do not require progress tracking and do not have sequential steps."),(0,r.createElement)(o.A,{title:"Setup Assistant Base"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0}))),ne({id:"With-Step-Progress"},"With Step Progress"),se({},"List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the ",te({href:"../progress-ring"},"Progress Ring")," component."),(0,r.createElement)(o.A,{title:"Setup Assistant Base steps with Progress"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0}))),ne({id:"Hub-with-Expandable-Steps"},"Hub with Expandable Steps"),se({},"Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional."),se({},"Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps."),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title include"," ",(0,r.createElement)("code",null,"aria-controls=[uniqueId]")," where the ",(0,r.createElement)("code",null,"uniqueId")," matches the "," ",(0,r.createElement)("code",null,"id")," on the"," ",(0,r.createElement)("code",null,"<div>")," with ",(0,r.createElement)("code",null,'class="slds-summary-detail__content"'),".")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{stepsAreExpandable:!0}))),ne({id:"In-a-Card"},"In a Card"),se({},"If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the ",te({href:"../progress-bar"},"Descriptive Progress Bar")),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using the"," ",(0,r.createElement)("code",null,"slds-assistive-text")," class.")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(ee,null,(0,r.createElement)(Z,{stepsAreExpandable:!0})))))},oe=function(){return(0,i.Qr)(ae())}}},s={};function i(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,s){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],r=e[u][1],s=e[u][2];for(var o=!0,l=0;l<n.length;l++)(!1&s\|\|a>=s)&&Object.keys(i.O).every(function(e){return i.O[e](n[l])})?n.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(u--,1);var c=r();void 0!==c&&(t=c)}}return t}s=s\|\|0;for(var u=e.length;u>0&&e[u-1][2]>s;u--)e[u]=e[u-1];e[u]=[n,r,s]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var s=Object.create(null);i.r(s);var a={};t=t\|\|[null,n({}),n([]),n(n)];for(var o=2&r&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(s,a),s},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=5997,function(){var e={5997:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,s,a=n[0],o=n[1],l=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(r in o)i.o(o,r)&&(i.m[r]=o[r]);if(l)var u=l(i)}for(t&&t(n);c<a.length;c++)s=a[c],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(9238)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/setup-assistant/docs.mdx.js"]=a}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,a,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9920:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Ve},getElement:function(){return Le}});var n=a(1594),l=a.n(n),s=a(5671),i=a(6547),r=a(3212),o=a(1374),b=a(5619),c=a(8342),d=a(7412),m=a.n(d),u=a(942),h=a.n(u),p=a(8347),E=a(6333),v=a.n(E),I=a(6955);function f(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}var w=function(e){return l().createElement("div",{className:h()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},y=function(e){var t=e.children;return l().createElement("div",{className:"slds-panel__header-actions"},t)},g=function(e){var t=e.symbol,a=e.handleVisibility,n=e.title,s=h()({"slds-panel__back":"back"===t\|\|"chevronleft"===t,"slds-panel__close":"close"===t});return l().createElement(I.A,{key:"panel-header-close-button",className:s,symbol:t,size:"small",assistiveText:"Collapse ".concat(n),title:"Collapse ".concat(n),onClick:a})};g.propTypes={symbol:m().oneOf(["back","chevronleft","close"]),handleVisibility:m().func,title:m().string};var T=function(e){return l().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},A=function(e){var t="close",a=l().createElement(l().Fragment,null,l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(a=e.isInvokedByTab?l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title})):l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),l().createElement("div",{className:h()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:a)},C=function(e){var t=e.title,a=e.closeSymbol,n=e.hasCenterTitle,s=e.customHeader;return l().createElement("div",{className:h()("slds-panel__header",n&&"slds-panel__header_align-center",s&&"slds-panel__header_custom")},s\|\|l().createElement(l().Fragment,null,l().createElement(T,{title:t}),l().createElement(g,{title:t,symbol:a})))};C.propTypes={title:m().string,closeSymbol:m().string,hasCenterTitle:m().bool,customHeader:m().node},C.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var O=function(e){return l().createElement("div",{className:"slds-panel__body"},e.children)},_=function(e){var t=e.size,a=e.title,n=e.docked,s=e.invoke,i=e.drawer,r=e.isVisible,o=void 0===r\|\|r,b=e.handleVisibility,c=e.customHeader,d=e.children,m=e.isAnimated,u=e.hasCenterTitle,h=e.isInvokedByTab,p=e.iconBack,E=e.headerActions,v=e.headerSlot,I=e.id;return l().createElement(w,{docked:n,drawer:i,size:t,invoke:s,isVisible:o,isAnimated:m,id:I},v\|\|l().createElement(A,{title:a,docked:n,invoke:s,customHeader:c,handleVisibility:b,hasCenterTitle:u,isInvokedByTab:h,iconBack:p,headerActions:E}),l().createElement(O,null,d))};_.propTypes={size:m().oneOf(["small","medium","large","x-large","full"]),docked:m().oneOf(["left","right","bottom"]),invoke:m().oneOf(["drill-in","toggle"]),hasCenterTitle:m().bool,isInvokedByTab:m().bool,iconBack:m().string,headerActions:m().node,headerSlot:m().node,id:m().string},_.defaultProps={iconBack:"chevronleft"};var N=_,S=function(e){var t,a,s=e.size,i=e.title,r=e.docked,o=e.invoke,b=e.drawer,c=e.hasCenterTitle,d=e.icon,m=e.iconTitle,u=e.children,p=(t=(0,n.useState)(!0),a=2,function(e){if(Array.isArray(e))return e}(t)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=a){var n,l,s,i,r=[],o=!0,b=!1;try{if(s=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;o=!1}else for(;!(o=(n=s.call(a)).done)&&(r.push(n.value),r.length!==t);o=!0);}catch(e){b=!0,l=e}finally{try{if(!o&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(b)throw l}}return r}}(t,a)\|\|function(e,t){if(e){if("string"==typeof e)return f(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a\|\|"Set"===a?Array.from(e):"Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a)?f(e,t):void 0}}(t,a)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=p[0],w=p[1],y=v()("example-unique-id-"),g=h()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===r}),T=function(){return w(!E)},A={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===r&&"row-reverse"};return l().createElement(l().Fragment,null,l().createElement("header",{className:g,style:{zIndex:"1"}},l().createElement(I.A,{theme:"neutral",selected:E,symbol:d,title:m,className:"slds-button_icon-border",onClick:T,"aria-expanded":E,"aria-controls":y,"aria-pressed":E})),l().createElement("div",{className:"demo-only-element",style:A},l().createElement(_,{isVisible:E,size:s,title:i,docked:r,invoke:o,drawer:b,handleVisibility:T,hasCenterTitle:c,id:y},u),l().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};S.propTypes={size:m().string,title:m().string,docked:m().string,invoke:m().string,drawer:m().bool,hasCenterTitle:m().bool,icon:m().string,iconTitle:m().string,children:m().node},S.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"};var x=a(9825);function P(e){return P="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},P(e)}function k(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,U(n.key),n)}}function U(e){var t=function(e){if("object"!=P(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=P(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==P(t)?t:t+""}function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},V(e)}function W(e,t){return W=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},W(e,t)}var H=function(e){return l().createElement("div",{className:"slds-tabs-mobile__group"},e.children)};H.propTypes={children:m().node};var B=function(e){return l().createElement("div",{className:"slds-tabs-mobile__container"},e.children)};B.propTypes={children:m().node};var j=function(e){return l().createElement("ul",{className:h()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};j.propTypes={children:m().node,isHidden:m().bool};var z=function(e){return l().createElement("li",{className:h()("slds-tabs-mobile__item")},e.children)};z.propTypes={children:m().node};var M=function(e){return l().createElement(x.$n,{isFullWidth:!0,onClick:e.onClick},l().createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l().createElement(p.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};M.propTypes={onClick:m().func,summary:m().string};var F=function(e){return l().createElement(N,{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")};F.propTypes={hidePanel:m().func,isVisible:m().bool,title:m().string,children:m().node};var D=function(e){return l().createElement(B,null,l().createElement(j,{isHidden:!0},l().createElement(z,null,l().createElement(M,{summary:"Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Item Three"}))),l().createElement(F,{title:"Item 1 Panel",isVisible:!0},l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Three"}))),l().createElement("div",null," Any content can be here "),l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item Four"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Five"})))),l().createElement(F,{title:"Item 2 Panel"}),l().createElement(F,{title:"Item 3 Panel"}),l().createElement(F,{title:"Nested Item 1 Panel"}),l().createElement(F,{title:"Nested Item 2 Panel"}),l().createElement(F,{title:"Nested Item 3 Panel"}),l().createElement(F,{title:"Nested Item 4 Panel"}),l().createElement(F,{title:"Nested Item 5 Panel"}))},$=function(e){function t(e){var a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(a=function(e,t,a){return t=V(t),function(e,t){if(t&&("object"==P(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)}(e,L()?Reflect.construct(t,a\|\|[],V(e).constructor):t.apply(e,a))}(this,t,[e])).hidePanel=a.hidePanel.bind(a),a.state={visiblePanelIdx:-1},a}return 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)}(t,e),a=t,(n=[{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().createElement(B,null,l().createElement(j,{isHidden:-1!==e},l().createElement(z,null,l().createElement(M,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l().createElement(z,null,l().createElement(M,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l().createElement(z,null,l().createElement(M,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l().createElement(F,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&k(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component);$.propTypes={visiblePanelIdx:m().number,isStatic:m().bool};var R=$,X=a(2537),q=a(8522),J=a(538),K=a(807),G=a(4760),Q=function(e){return l().createElement(X.A,{flavor:"scoped",selectedIndex:e.selectedIndex\|\|0},l().createElement(X.A.Item,{title:"Item One",id:"tab-scoped-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-scoped-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-scoped-3"},"Item Three Content"))},Y=a(3011),Z=function(e){return l().createElement(X.A,{selectedIndex:e.selectedIndex},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Z.propTypes={selectedIndex:m().number,itemOneContent:m().node},Z.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var ee=function(){return l().createElement(Z,{itemOneContent:l().createElement(Q,null)})},te=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Item Five",id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(ne,null)))))},ae=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Opportunities",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Cases",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Products",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Price Books",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Contacts",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(le,null)))))},ne=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},"Accounts"),l().createElement(G.Dr,{title:"Approvals"},"Approvals"),l().createElement(G.Dr,{title:"Lead"},"Leads")))},le=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Accounts"))),l().createElement(G.Dr,{title:"Approvals"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Approvals"))),l().createElement(G.Dr,{title:"Lead"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Leads")))))},se=function(){return l().createElement(X.A,{isCard:!0,selectedIndex:0},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,{hasCardBoundary:!0},l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to illustrate how",l().createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts")))),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},ie=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l().createElement(J.eX,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l().createElement("h2",null,"Item Two Content - Has Error")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content"))))},re=function(e){return l().createElement(X.A,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};re.propTypes={showHeader:m().bool,withHeader:m().bool},re.defaultProps={showHeader:!1,withHeader:!1};var oe=function(e){return l().createElement(X.A,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};oe.propTypes={showHeader:m().bool,withHeader:m().bool},oe.defaultProps={showHeader:!1,withHeader:!1};var be=function(e){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,{withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content"))))};be.propTypes={showHeader:m().bool,withHeader:m().bool},be.defaultProps={showHeader:!0,withHeader:!0};var ce=l().createElement(Z,null),de=[{id:"size-medium",label:"Size - Medium",element:l().createElement(re,null)},{id:"size-medium-with-header",label:"Size - Medium - With Header",element:l().createElement(re,{withHeader:!0,showHeader:!0})},{id:"size-large",label:"Size - Large",element:l().createElement(oe,null)},{id:"size-large-with-header",label:"Size - Large - With Header",element:l().createElement(oe,{withHeader:!0,showHeader:!0})},{id:"overflow",label:"Overflowing Items",element:l().createElement(te,null)},{id:"overflow-icons",label:"Overflowing Items with Icons",element:l().createElement(ae,null)},{id:"error",label:"Tabs With Error inside of content",element:l().createElement(ie,null)},{id:"nested",label:"With Nested Scoped Tabs",element:l().createElement(ee,null)},{id:"with-header",label:"With Header",element:l().createElement(be,null)},{id:"with-invisible-header",label:"With Invisible Header",element:l().createElement(be,{showHeader:!1})},{id:"card-look",label:"Tab Card-look",element:l().createElement(se,null)},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --sds-c-tabs-list-sizing-border: 5px;\n --sds-c-tabs-list-color-border: red;\n --sds-c-tabs-item-color-border-hover: pink;\n --sds-c-tabs-item-color-border-active: purple;\n --sds-c-tabs-item-text-color: red;\n --sds-c-tabs-item-text-color-active: purple;\n ",storybookStyles:!0,element:l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))}],me=a(5794),ue=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center",{"slds-active":e.active,"slds-has-error":"error"===e.statusLevel,"slds-has-focus":e.hasFocus,"slds-has-notification":e.hasNotification,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved},e.className),role:"presentation"},l().createElement("a",{"aria-controls":e.tabPanelId,"aria-selected":e.active?"true":"false",className:"slds-tabs_default__link slds-p-horizontal_xx-small",href:"#",id:e.tabItemId,role:"tab",tabIndex:e.active?"0":"-1",title:e.title,onClick:function(e){return e.preventDefault()}},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.hasNotification&&l().createElement(me.VK,null)),e.hasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:e.symbol}),l().createElement("span",{className:h()("slds-truncate",e.pinned?"slds-assistive-text":null),title:e.title},e.title)),e.menuIcon?l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none","true"===e.actionOverflow?"slds-is-open":null)},l().createElement(I.A,{"aria-haspopup":"true",assistiveText:"Actions for "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"chevrondown",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,title:"Actions for "+e.title})):null,l().createElement("div",{className:h()("slds-col_bump-left slds-p-left_none slds-p-right_none",e.pinned?"slds-assistive-text":null)},l().createElement(I.A,{assistiveText:"Close "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"close",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,title:"Close "+e.title})))};ue.displayName="Subtab",ue.propTypes={actionOverflow:m().string,active:m().bool,statusLevel:m().oneOf(["error","success","warning"]),className:m().string,hasFocus:m().bool,hasIcon:m().bool,hasNotification:m().bool,itemUnsaved:m().bool,menuIcon:m().bool,pinned:m().bool,symbol:m().string,tabItemId:m().string.isRequired,tabPanelId:m().string.isRequired,title:m().string},ue.defaultProps={hasIcon:!0,title:"Subtab Name"};var he=function(e){return l().createElement("div",{className:"slds-tabs_default slds-sub-tabs"},e.children)};he.displayName="Subtabs",he.propTypes={children:m().node};var pe=function(e){return l().createElement("ul",{className:"slds-tabs_default__nav",role:"tablist"},e.children)};pe.displayName="SubtabList",pe.propTypes={children:m().node};var Ee=function(e){return l().createElement("div",{"aria-labelledby":e.tabId,className:h()("slds-tabs_default__content",{"slds-show":e.isVisible,"slds-hide":!e.isVisible}),id:e.id,role:"tabpanel"},e.children)};Ee.displayName="SubtabPanel",Ee.propTypes={children:m().node,isVisible:m().bool,id:m().string,tabId:m().string};var ve=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item","slds-sub-tabs__item","slds-tabs_default__overflow-button",{"slds-has-error":"error"===e.statusLevel,"slds-has-notification":e.itemUnread,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved}),role:"presentation"},l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click",e.isOpen&&"slds-is-open")},l().createElement(x.$n,{"aria-haspopup":"true",title:"More Tab Items",role:"tab"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,{title:"Tab(s) within menu not saved"}),e.itemUnread&&l().createElement(me.VK,null)),l().createElement("span",{className:"slds-truncate",title:"More Tabs"},"More ",l().createElement("span",{className:"slds-assistive-text"},"Tabs")),l().createElement(p.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_right",sprite:"utility",symbol:"chevrondown"})),l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,null,l().createElement(G.Dr,{className:"slds-has-notification",statusLevel:e.statusLevel,title:"Chat - Customer"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.itemUnread&&l().createElement(me.VK,null)),e.itemHasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:"live_chat"}),l().createElement("span",null,"error"===e.statusLevel?"SLA Violation":"warning"===e.statusLevel?"SLA 0.30":"Chat - Customer")),l().createElement(G.Dr,{title:"Overflow Tab Item"},l().createElement(me.$7,null),l().createElement(me.Px,null),l().createElement("span",null,"Overflow Tab Item"))))))};ve.displayName="SubtabOverflow",ve.propTypes={statusLevel:m().oneOf(["error","success","warning"]),isOpen:m().bool,itemHasIcon:m().bool,itemUnread:m().bool,itemUnsaved:m().bool},ve.defaultProps={itemHasIcon:!0};var Ie=[{id:"default",label:"Default",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],fe=[{id:"subtabs-has-focus",label:"Tab - Focus",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,hasFocus:!0,id:"subtab-01",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content")),script:"\n document.getElementById('subtab-01').focus()\n "},{id:"subtabs-borders",label:"With Borders",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,className:"slds-border_right slds-border_left",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{className:"slds-border_right",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-menu",label:"Tab - Action Overflow",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,menuIcon:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{menuIcon:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-unsaved",label:"Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"}),l().createElement(pe,null,l().createElement(ue,{active:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread",label:"Unread Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved",label:"Unread Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success",label:"Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unsaved",label:"Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread",label:"Unread Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread-unsaved",label:"Unread and Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning",label:"Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unsaved",label:"Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread",label:"Unread Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread-unsaved",label:"Unread and Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error",label:"Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unsaved",label:"Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread",label:"Unread Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread-unsaved",label:"Unread and Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs",label:"Overflow Tabs",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,null)),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-open",label:"Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread-overflow-tabs-open",label:"Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-overflow-tabs-open",label:"Unsaved Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-open",label:"Unsaved Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-without-icons-open",label:"Unsaved Unread Overflow Tabs without Icons - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasIcon:!1,hasNotification:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemHasIcon:!1,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success",label:"Overflow Tabs - Success",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success-unread-unsaved",label:"Overflow Tabs - Success Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning",label:"Overflow Tabs - Warning",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning-unread-unsaved",label:"Overflow Tabs - Warning Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error",label:"Overflow Tabs - Error",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error-unread-unsaved",label:"Overflow Tabs - Error Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],we=a(3785),ye=a(796),ge=l().createElement(we.A,{tabs:ye.pw}),Te=(we.A,ye.vb,we.A,ye.nz,we.A,ye.pw,a(806)),Ae=s.XB.a,Ce=s.XB.code,Oe=s.XB.h2,_e=s.XB.h3,Ne=s.XB.h4,Se=s.XB.h5,xe=s.XB.li,Pe=s.XB.p,ke=s.XB.strong,Ue=s.XB.ul,Le=function(){return(0,n.createElement)(s.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),(0,n.createElement)(i.A,{exampleOnly:!0,demoStyles:"height: 200px;"},(0,Te.NO)(ce)),Oe({id:"About-Tabs"},"About Tabs"),Pe({},"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."),_e({id:"Implementation"},"Implementation"),Ne({id:"Markup"},"Markup"),Pe({},"The following markup is crucial for Accessibility"),Ue({},xe({},"Selected tab’s anchor has ",Ce({},'aria-selected="true"'),", all other tabs’ anchors have ",Ce({},'aria-selected="false"')),xe({},"Selected tab’s anchor has ",Ce({},'tabindex="0"'),", all other tabs have ",Ce({},'tabindex="-1"')),xe({},"Each tab’s anchor has an ",Ce({},"aria-controls")," attribute whose value is the id of the associated ",Ce({},'<div role="tabpanel">')),xe({},"Each tab panel has an ",Ce({},"aria-labelledby")," attribute whose value is the id of its associated ",Ce({},'<a role="tab">'))),Ne({id:"Keyboard-Interactions"},"Keyboard Interactions"),Ue({},xe({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),xe({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),xe({},"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"),xe({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),Ne({id:"JavaScript-Needs"},"JavaScript Needs"),Pe({},"The active tab has two markup requirements:"),Ue({},xe({},"The ",Ce({},".slds-active")," class should be placed on the ",Ce({},"li")," with ",Ce({},".slds-tabs_{variant}__item"),"."),xe({},"The corresponding ",Ce({},".slds-tabs_{variant}__content")," container receives ",Ce({},".slds-show"),"."),xe({},"In order to achieve the focus state styling, apply ",Ce({},".slds-has-focus")," to the parent ",Ce({},"li"),".")),Pe({},"Inactive ",Ce({},".slds-tabs_{variant}__content")," containers receive ",Ce({},".slds-hide"),"."),Pe({},"When the user clicks a different tab, move the ",Ce({},".slds-active")," class and toggle the ",Ce({},".slds-hide"),"/",Ce({},".slds-show")," classes."),_e({id:"Accessibility"},"Accessibility"),Pe({},"Tabbed UIs have three parts with specific ",ke({},"ARIA")," role requirements:"),Ue({},xe({},"The tab list, which should have ",Ce({},'role="tablist"')),xe({},"The tabs in that list, which should each be an ",Ce({},'<a role="tab">')," anchor wrapped in a ",Ce({},'<li role="presentation">')," list item"),xe({},"The tab panels, which display each tab’s content and should each have ",Ce({},'role="tabpanel"'))),Oe({id:"Base"},"Base"),(0,n.createElement)(o.A,{title:"Tabs Base"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(ce))),Oe({id:"Size-Modifiers"},"Size Modifiers"),Pe({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",Ce({},"slds-tabs_medium")," or ",Ce({},"slds-tabs_large")," to the ",Ce({},"slds-tabs_default")," element."),_e({id:"Medium"},"Medium"),(0,n.createElement)(o.A,{title:"Tabs with Medium sizing modifier"},(0,n.createElement)(i.A,null,(0,Te.NO)(de,"size-medium"))),_e({id:"Large"},"Large"),(0,n.createElement)(o.A,{title:"Tabs with Large sizing modifier"},(0,n.createElement)(i.A,null,(0,Te.NO)(de,"size-large"))),Oe({id:"With-Header"},"With Header"),(0,n.createElement)(o.A,{title:"Tabs with Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"with-header"))),(0,n.createElement)(b.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The header can be visually hidden but still accessible to screen readers by applying"," ",(0,n.createElement)("code",null,"slds-assistive-text")," to the ",(0,n.createElement)("code",null,"slds-tabs_default__header")," element.")),_e({id:"Medium-2"},"Medium"),(0,n.createElement)(o.A,{title:"Tabs with Medium Size Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"size-medium-with-header"))),_e({id:"Large-2"},"Large"),(0,n.createElement)(o.A,{title:"Tabs with Large Size Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"size-large-with-header"))),Oe({id:"With-Overflow"},"With Overflow"),Pe({},"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."),(0,n.createElement)(o.A,{title:"Tabs Overflowing"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"overflow"))),(0,n.createElement)(b.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The overflow tab should have a ",(0,n.createElement)("code",null,'role="tab"')," to ensure screen readers properly announce it as a tab, keeping it consistent with the number of tabs visible to sighted users.")),(0,n.createElement)(b.A,{type:"note",header:"Implementation Guidelines"},(0,n.createElement)("p",null,"The ",(0,n.createElement)("code",null,"slds-dropdown__list")," element requires a",(0,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.")),Oe({id:"With-Icon"},"With Icon"),Pe({},"Icons can be used with tabs to help users differentiate among them."),(0,n.createElement)(o.A,{title:"Tabs With Icons"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"overflow-icons"))),Oe({id:"With-Error"},"With Error"),Pe({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),(0,n.createElement)(o.A,{title:"Tabs With Icons"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"error"))),Oe({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),Pe({},"If nesting tabs within tabs, the second set should be rendered as ",Ae({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),(0,n.createElement)(o.A,{title:"Tabs with Nested Scoped Tabs"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"nested"))),Oe({id:"Subtabs"},"Subtabs"),Pe({},"Subtabs are used to provide an additional level of navigation below the ",Ae({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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(Ie)),_e({id:"Expected-Behavior"},"Expected Behavior"),Ue({},xe({},"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."),xe({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",Ue({},xe({},"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."))),xe({},"All subtabs are closed when the parent navigation item is closed."),xe({},"Subtabs can optionally include a tab menu for additional controls.")),_e({id:"With-Focus"},"With Focus"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-has-focus")),_e({id:"With-Borders"},"With Borders"),Pe({},"To add borders on either side of the subtab, add the classes ",Ce({},"slds-border_right")," and ",Ce({},"slds-border_left"),", as needed, to the ",Ce({},"<li>")," with class ",Ce({},"slds-sub-tabs__item"),"."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-borders")),_e({id:"With-Tab-Actions"},"With Tab Actions"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-menu")),_e({id:"Status-Options"},"Status Options"),Ne({id:"Unsaved-Tab"},"Unsaved Tab"),Pe({},"Unsaved tabs receive a blue asterisk on the tab."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-unsaved")),(0,n.createElement)(b.A,{header:"Additional Tag for Accessibility",type:"a11y"},(0,n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",(0,n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",(0,n.createElement)("code",null,"title")," attribute and ",(0,n.createElement)("code",null,"aria-label")," should read"," ",(0,n.createElement)("b",null,'"Tab Not Saved"'),".")),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),Ne({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),Pe({},"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."),Pe({},"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:"),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),Pe({},"Upon clearing the status on a given tab, you should clear the message from the live region."),Ne({id:"Unread-Tab"},"Unread Tab"),Pe({},"Unread tabs receive a red dot on the tab."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"unread")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),(0,n.createElement)("ol",{className:"slds-list_ordered"},(0,n.createElement)("li",null,"The ",(0,n.createElement)("code",null,"title")," attribute and ",(0,n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",(0,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".'),(0,n.createElement)("li",null,"The hidden live region as described above, should have its content updated to"," ",(0,n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity",role:"img"})),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),Ne({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"unsaved")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),Ne({id:"Warning-Tab"},"Warning Tab"),Pe({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",Ce({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),Se({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning-unsaved")),Se({id:"Unread-Warning-Tab"},"Unread Warning Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning-unread")),Ne({id:"Error-Tab"},"Error Tab"),Pe({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",Ce({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),Se({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error-unsaved")),Se({id:"Unread-Error-Tab"},"Unread Error Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error-unread")),Ne({id:"Success-Tab"},"Success Tab"),Pe({},"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 ",Ce({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),Se({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success-unsaved")),Se({id:"Unread-Success-Tab"},"Unread Success Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success-unread")),_e({id:"With-Overflow-Tab"},"With Overflow Tab"),Pe({},"Overflowing subtabs are contained in a More dropdown."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"overflow-tabs")),Ne({id:"Overflow-Tab-Open"},"Overflow Tab Open"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-open")),Ne({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unread-overflow-tabs-open")),Ne({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unsaved-overflow-tabs-open")),Ne({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unsaved-unread-overflow-tabs-open")),Ne({id:"Success-Overflow-Tab"},"Success Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-success")),Ne({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-success-unread-unsaved")),Ne({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-warning")),Ne({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-warning-unread-unsaved")),Ne({id:"Error-Overflow-Tab"},"Error Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-error")),Ne({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-error-unread-unsaved")),Oe({id:"Vertical"},"Vertical"),Pe({},"To use vertical tabs, check out the ",Ae({href:"../vertical-tabs"},"Vertical Tabs")," component."),(0,n.createElement)(o.A,{title:"Tabs as Vertical"},ge),Oe({id:"As-a-Card"},"As a Card"),Pe({},"To style tabs as a card, add the class ",Ce({},"slds-tabs_card")," to the ",Ce({},"<div>")," with the class ",Ce({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),(0,n.createElement)(o.A,{title:"Tabs as a Card"},(0,n.createElement)(i.A,{demoStyles:"height: 600px;"},(0,Te.NO)(de,"card-look"))),Oe({id:"On-Mobile"},"On Mobile"),Pe({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),Pe({},"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."),(0,n.createElement)(b.A,{header:"Focus Management",type:"a11y"},(0,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.")),(0,n.createElement)(o.A,{title:"Tabs Mobile Base"},(0,n.createElement)(i.A,null,(0,n.createElement)(R,null))),_e({id:"Accessibility-2"},"Accessibility"),Pe({},ke({},"Visibility")),Ue({},xe({},"The panels should have ",Ce({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),xe({},"The tabs should have ",Ce({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),Pe({},ke({},"Focus Management")),Pe({},"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."),Pe({},ke({},"Assistive Text")),Pe({},"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."),_e({id:"Panel-Open"},"Panel Open"),Pe({},'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.'),(0,n.createElement)(o.A,{title:"Tabs Mobile Drilled-in"},(0,n.createElement)(i.A,null,(0,n.createElement)(R,{visiblePanelIdx:0,isStatic:!0}))),_e({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),Pe({},"When there are two or more immediately adjacent tab sets on mobile, use the ",Ce({},"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."),(0,n.createElement)(o.A,{title:"Tabs Mobile Adjacent Stacked"},(0,n.createElement)(i.A,null,(0,n.createElement)(H,null,(0,n.createElement)(R,{isStatic:!0}),(0,n.createElement)(R,{isStatic:!0,startingIdx:3})))),_e({id:"Nested-Tab-Sets"},"Nested Tab Sets"),(0,n.createElement)(o.A,{title:"Tabs Mobile Nested"},(0,n.createElement)(i.A,{demoStyles:"height: 300px;"},(0,n.createElement)(D,null))),Oe({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(c.A,{name:"tabs",type:"component"}))},Ve=function(){return(0,s.Qr)(Le())}}},l={};function s(e){var t=l[e];if(void 0!==t)return t.exports;var a=l[e]={id:e,exports:{}};return n[e](a,a.exports,s),a.exports}s.m=n,s.amdO={},e=[],s.O=function(t,a,n,l){if(!a){var i=1/0;for(c=0;c<e.length;c++){a=e[c][0],n=e[c][1],l=e[c][2];for(var r=!0,o=0;o<a.length;o++)(!1&l\|\|i>=l)&&Object.keys(s.O).every(function(e){return s.O[e](a[o])})?a.splice(o--,1):(r=!1,l<i&&(i=l));if(r){e.splice(c--,1);var b=n();void 0!==b&&(t=b)}}return t}l=l\|\|0;for(var c=e.length;c>0&&e[c-1][2]>l;c--)e[c]=e[c-1];e[c]=[a,n,l]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},a=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var l=Object.create(null);s.r(l);var i={};t=t\|\|[null,a({}),a([]),a(a)];for(var r=2&n&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=a(r))Object.getOwnPropertyNames(r).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(l,i),l},s.d=function(e,t){for(var a in t)s.o(t,a)&&!s.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=523,function(){var e={523:0};s.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,l,i=a[0],r=a[1],o=a[2],b=0;if(i.some(function(t){return 0!==e[t]})){for(n in r)s.o(r,n)&&(s.m[n]=r[n]);if(o)var c=o(s)}for(t&&t(a);b<i.length;b++)l=i[b],s.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return s.O(c)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(9920)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=i}();
1	+ var SLDS;!function(){"use strict";var e,t,a,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9920:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Ve},getElement:function(){return Le}});var n=a(1594),l=a.n(n),s=a(5671),i=a(6547),r=a(3212),o=a(1374),b=a(5619),c=a(8342),d=a(4187),m=a.n(d),u=a(942),h=a.n(u),p=a(8347),E=a(6333),v=a.n(E),I=a(6955);function f(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}var w=function(e){return l().createElement("div",{className:h()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},y=function(e){var t=e.children;return l().createElement("div",{className:"slds-panel__header-actions"},t)},g=function(e){var t=e.symbol,a=e.handleVisibility,n=e.title,s=h()({"slds-panel__back":"back"===t\|\|"chevronleft"===t,"slds-panel__close":"close"===t});return l().createElement(I.A,{key:"panel-header-close-button",className:s,symbol:t,size:"small",assistiveText:"Collapse ".concat(n),title:"Collapse ".concat(n),onClick:a})};g.propTypes={symbol:m().oneOf(["back","chevronleft","close"]),handleVisibility:m().func,title:m().string};var T=function(e){return l().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},A=function(e){var t="close",a=l().createElement(l().Fragment,null,l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(a=e.isInvokedByTab?l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title})):l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),l().createElement("div",{className:h()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:a)},C=function(e){var t=e.title,a=e.closeSymbol,n=e.hasCenterTitle,s=e.customHeader;return l().createElement("div",{className:h()("slds-panel__header",n&&"slds-panel__header_align-center",s&&"slds-panel__header_custom")},s\|\|l().createElement(l().Fragment,null,l().createElement(T,{title:t}),l().createElement(g,{title:t,symbol:a})))};C.propTypes={title:m().string,closeSymbol:m().string,hasCenterTitle:m().bool,customHeader:m().node},C.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var O=function(e){return l().createElement("div",{className:"slds-panel__body"},e.children)},_=function(e){var t=e.size,a=e.title,n=e.docked,s=e.invoke,i=e.drawer,r=e.isVisible,o=void 0===r\|\|r,b=e.handleVisibility,c=e.customHeader,d=e.children,m=e.isAnimated,u=e.hasCenterTitle,h=e.isInvokedByTab,p=e.iconBack,E=e.headerActions,v=e.headerSlot,I=e.id;return l().createElement(w,{docked:n,drawer:i,size:t,invoke:s,isVisible:o,isAnimated:m,id:I},v\|\|l().createElement(A,{title:a,docked:n,invoke:s,customHeader:c,handleVisibility:b,hasCenterTitle:u,isInvokedByTab:h,iconBack:p,headerActions:E}),l().createElement(O,null,d))};_.propTypes={size:m().oneOf(["small","medium","large","x-large","full"]),docked:m().oneOf(["left","right","bottom"]),invoke:m().oneOf(["drill-in","toggle"]),hasCenterTitle:m().bool,isInvokedByTab:m().bool,iconBack:m().string,headerActions:m().node,headerSlot:m().node,id:m().string},_.defaultProps={iconBack:"chevronleft"};var N=_,S=function(e){var t,a,s=e.size,i=e.title,r=e.docked,o=e.invoke,b=e.drawer,c=e.hasCenterTitle,d=e.icon,m=e.iconTitle,u=e.children,p=(t=(0,n.useState)(!0),a=2,function(e){if(Array.isArray(e))return e}(t)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=a){var n,l,s,i,r=[],o=!0,b=!1;try{if(s=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;o=!1}else for(;!(o=(n=s.call(a)).done)&&(r.push(n.value),r.length!==t);o=!0);}catch(e){b=!0,l=e}finally{try{if(!o&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(b)throw l}}return r}}(t,a)\|\|function(e,t){if(e){if("string"==typeof e)return f(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a\|\|"Set"===a?Array.from(e):"Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a)?f(e,t):void 0}}(t,a)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=p[0],w=p[1],y=v()("example-unique-id-"),g=h()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===r}),T=function(){return w(!E)},A={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===r&&"row-reverse"};return l().createElement(l().Fragment,null,l().createElement("header",{className:g,style:{zIndex:"1"}},l().createElement(I.A,{theme:"neutral",selected:E,symbol:d,title:m,className:"slds-button_icon-border",onClick:T,"aria-expanded":E,"aria-controls":y,"aria-pressed":E})),l().createElement("div",{className:"demo-only-element",style:A},l().createElement(_,{isVisible:E,size:s,title:i,docked:r,invoke:o,drawer:b,handleVisibility:T,hasCenterTitle:c,id:y},u),l().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};S.propTypes={size:m().string,title:m().string,docked:m().string,invoke:m().string,drawer:m().bool,hasCenterTitle:m().bool,icon:m().string,iconTitle:m().string,children:m().node},S.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"};var x=a(9825);function P(e){return P="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},P(e)}function k(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,U(n.key),n)}}function U(e){var t=function(e){if("object"!=P(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=P(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==P(t)?t:t+""}function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},V(e)}function W(e,t){return W=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},W(e,t)}var H=function(e){return l().createElement("div",{className:"slds-tabs-mobile__group"},e.children)};H.propTypes={children:m().node};var B=function(e){return l().createElement("div",{className:"slds-tabs-mobile__container"},e.children)};B.propTypes={children:m().node};var j=function(e){return l().createElement("ul",{className:h()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};j.propTypes={children:m().node,isHidden:m().bool};var z=function(e){return l().createElement("li",{className:h()("slds-tabs-mobile__item")},e.children)};z.propTypes={children:m().node};var M=function(e){return l().createElement(x.$n,{isFullWidth:!0,onClick:e.onClick},l().createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l().createElement(p.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};M.propTypes={onClick:m().func,summary:m().string};var F=function(e){return l().createElement(N,{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")};F.propTypes={hidePanel:m().func,isVisible:m().bool,title:m().string,children:m().node};var D=function(e){return l().createElement(B,null,l().createElement(j,{isHidden:!0},l().createElement(z,null,l().createElement(M,{summary:"Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Item Three"}))),l().createElement(F,{title:"Item 1 Panel",isVisible:!0},l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Three"}))),l().createElement("div",null," Any content can be here "),l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item Four"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Five"})))),l().createElement(F,{title:"Item 2 Panel"}),l().createElement(F,{title:"Item 3 Panel"}),l().createElement(F,{title:"Nested Item 1 Panel"}),l().createElement(F,{title:"Nested Item 2 Panel"}),l().createElement(F,{title:"Nested Item 3 Panel"}),l().createElement(F,{title:"Nested Item 4 Panel"}),l().createElement(F,{title:"Nested Item 5 Panel"}))},$=function(e){function t(e){var a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(a=function(e,t,a){return t=V(t),function(e,t){if(t&&("object"==P(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)}(e,L()?Reflect.construct(t,a\|\|[],V(e).constructor):t.apply(e,a))}(this,t,[e])).hidePanel=a.hidePanel.bind(a),a.state={visiblePanelIdx:-1},a}return 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)}(t,e),a=t,(n=[{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().createElement(B,null,l().createElement(j,{isHidden:-1!==e},l().createElement(z,null,l().createElement(M,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l().createElement(z,null,l().createElement(M,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l().createElement(z,null,l().createElement(M,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l().createElement(F,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&k(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component);$.propTypes={visiblePanelIdx:m().number,isStatic:m().bool};var R=$,X=a(2537),q=a(8522),J=a(538),K=a(807),G=a(4760),Q=function(e){return l().createElement(X.A,{flavor:"scoped",selectedIndex:e.selectedIndex\|\|0},l().createElement(X.A.Item,{title:"Item One",id:"tab-scoped-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-scoped-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-scoped-3"},"Item Three Content"))},Y=a(3011),Z=function(e){return l().createElement(X.A,{selectedIndex:e.selectedIndex},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Z.propTypes={selectedIndex:m().number,itemOneContent:m().node},Z.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var ee=function(){return l().createElement(Z,{itemOneContent:l().createElement(Q,null)})},te=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Item Five",id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(ne,null)))))},ae=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Opportunities",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Cases",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Products",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Price Books",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Contacts",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(le,null)))))},ne=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},"Accounts"),l().createElement(G.Dr,{title:"Approvals"},"Approvals"),l().createElement(G.Dr,{title:"Lead"},"Leads")))},le=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Accounts"))),l().createElement(G.Dr,{title:"Approvals"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Approvals"))),l().createElement(G.Dr,{title:"Lead"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Leads")))))},se=function(){return l().createElement(X.A,{isCard:!0,selectedIndex:0},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,{hasCardBoundary:!0},l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to illustrate how",l().createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts")))),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},ie=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l().createElement(J.eX,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l().createElement("h2",null,"Item Two Content - Has Error")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content"))))},re=function(e){return l().createElement(X.A,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};re.propTypes={showHeader:m().bool,withHeader:m().bool},re.defaultProps={showHeader:!1,withHeader:!1};var oe=function(e){return l().createElement(X.A,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};oe.propTypes={showHeader:m().bool,withHeader:m().bool},oe.defaultProps={showHeader:!1,withHeader:!1};var be=function(e){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,{withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content"))))};be.propTypes={showHeader:m().bool,withHeader:m().bool},be.defaultProps={showHeader:!0,withHeader:!0};var ce=l().createElement(Z,null),de=[{id:"size-medium",label:"Size - Medium",element:l().createElement(re,null)},{id:"size-medium-with-header",label:"Size - Medium - With Header",element:l().createElement(re,{withHeader:!0,showHeader:!0})},{id:"size-large",label:"Size - Large",element:l().createElement(oe,null)},{id:"size-large-with-header",label:"Size - Large - With Header",element:l().createElement(oe,{withHeader:!0,showHeader:!0})},{id:"overflow",label:"Overflowing Items",element:l().createElement(te,null)},{id:"overflow-icons",label:"Overflowing Items with Icons",element:l().createElement(ae,null)},{id:"error",label:"Tabs With Error inside of content",element:l().createElement(ie,null)},{id:"nested",label:"With Nested Scoped Tabs",element:l().createElement(ee,null)},{id:"with-header",label:"With Header",element:l().createElement(be,null)},{id:"with-invisible-header",label:"With Invisible Header",element:l().createElement(be,{showHeader:!1})},{id:"card-look",label:"Tab Card-look",element:l().createElement(se,null)},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --sds-c-tabs-list-sizing-border: 5px;\n --sds-c-tabs-list-color-border: red;\n --sds-c-tabs-item-color-border-hover: pink;\n --sds-c-tabs-item-color-border-active: purple;\n --sds-c-tabs-item-text-color: red;\n --sds-c-tabs-item-text-color-active: purple;\n ",storybookStyles:!0,element:l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))}],me=a(5794),ue=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center",{"slds-active":e.active,"slds-has-error":"error"===e.statusLevel,"slds-has-focus":e.hasFocus,"slds-has-notification":e.hasNotification,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved},e.className),role:"presentation"},l().createElement("a",{"aria-controls":e.tabPanelId,"aria-selected":e.active?"true":"false",className:"slds-tabs_default__link slds-p-horizontal_xx-small",href:"#",id:e.tabItemId,role:"tab",tabIndex:e.active?"0":"-1",title:e.title,onClick:function(e){return e.preventDefault()}},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.hasNotification&&l().createElement(me.VK,null)),e.hasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:e.symbol}),l().createElement("span",{className:h()("slds-truncate",e.pinned?"slds-assistive-text":null),title:e.title},e.title)),e.menuIcon?l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none","true"===e.actionOverflow?"slds-is-open":null)},l().createElement(I.A,{"aria-haspopup":"true",assistiveText:"Actions for "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"chevrondown",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,title:"Actions for "+e.title})):null,l().createElement("div",{className:h()("slds-col_bump-left slds-p-left_none slds-p-right_none",e.pinned?"slds-assistive-text":null)},l().createElement(I.A,{assistiveText:"Close "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"close",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,title:"Close "+e.title})))};ue.displayName="Subtab",ue.propTypes={actionOverflow:m().string,active:m().bool,statusLevel:m().oneOf(["error","success","warning"]),className:m().string,hasFocus:m().bool,hasIcon:m().bool,hasNotification:m().bool,itemUnsaved:m().bool,menuIcon:m().bool,pinned:m().bool,symbol:m().string,tabItemId:m().string.isRequired,tabPanelId:m().string.isRequired,title:m().string},ue.defaultProps={hasIcon:!0,title:"Subtab Name"};var he=function(e){return l().createElement("div",{className:"slds-tabs_default slds-sub-tabs"},e.children)};he.displayName="Subtabs",he.propTypes={children:m().node};var pe=function(e){return l().createElement("ul",{className:"slds-tabs_default__nav",role:"tablist"},e.children)};pe.displayName="SubtabList",pe.propTypes={children:m().node};var Ee=function(e){return l().createElement("div",{"aria-labelledby":e.tabId,className:h()("slds-tabs_default__content",{"slds-show":e.isVisible,"slds-hide":!e.isVisible}),id:e.id,role:"tabpanel"},e.children)};Ee.displayName="SubtabPanel",Ee.propTypes={children:m().node,isVisible:m().bool,id:m().string,tabId:m().string};var ve=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item","slds-sub-tabs__item","slds-tabs_default__overflow-button",{"slds-has-error":"error"===e.statusLevel,"slds-has-notification":e.itemUnread,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved}),role:"presentation"},l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click",e.isOpen&&"slds-is-open")},l().createElement(x.$n,{"aria-haspopup":"true",title:"More Tab Items",role:"tab"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,{title:"Tab(s) within menu not saved"}),e.itemUnread&&l().createElement(me.VK,null)),l().createElement("span",{className:"slds-truncate",title:"More Tabs"},"More ",l().createElement("span",{className:"slds-assistive-text"},"Tabs")),l().createElement(p.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_right",sprite:"utility",symbol:"chevrondown"})),l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,null,l().createElement(G.Dr,{className:"slds-has-notification",statusLevel:e.statusLevel,title:"Chat - Customer"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.itemUnread&&l().createElement(me.VK,null)),e.itemHasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:"live_chat"}),l().createElement("span",null,"error"===e.statusLevel?"SLA Violation":"warning"===e.statusLevel?"SLA 0.30":"Chat - Customer")),l().createElement(G.Dr,{title:"Overflow Tab Item"},l().createElement(me.$7,null),l().createElement(me.Px,null),l().createElement("span",null,"Overflow Tab Item"))))))};ve.displayName="SubtabOverflow",ve.propTypes={statusLevel:m().oneOf(["error","success","warning"]),isOpen:m().bool,itemHasIcon:m().bool,itemUnread:m().bool,itemUnsaved:m().bool},ve.defaultProps={itemHasIcon:!0};var Ie=[{id:"default",label:"Default",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],fe=[{id:"subtabs-has-focus",label:"Tab - Focus",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,hasFocus:!0,id:"subtab-01",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content")),script:"\n document.getElementById('subtab-01').focus()\n "},{id:"subtabs-borders",label:"With Borders",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,className:"slds-border_right slds-border_left",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{className:"slds-border_right",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-menu",label:"Tab - Action Overflow",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,menuIcon:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{menuIcon:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-unsaved",label:"Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"}),l().createElement(pe,null,l().createElement(ue,{active:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread",label:"Unread Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved",label:"Unread Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success",label:"Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unsaved",label:"Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread",label:"Unread Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread-unsaved",label:"Unread and Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning",label:"Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unsaved",label:"Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread",label:"Unread Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread-unsaved",label:"Unread and Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error",label:"Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unsaved",label:"Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread",label:"Unread Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread-unsaved",label:"Unread and Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs",label:"Overflow Tabs",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,null)),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-open",label:"Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread-overflow-tabs-open",label:"Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-overflow-tabs-open",label:"Unsaved Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-open",label:"Unsaved Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-without-icons-open",label:"Unsaved Unread Overflow Tabs without Icons - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasIcon:!1,hasNotification:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemHasIcon:!1,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success",label:"Overflow Tabs - Success",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success-unread-unsaved",label:"Overflow Tabs - Success Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning",label:"Overflow Tabs - Warning",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning-unread-unsaved",label:"Overflow Tabs - Warning Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error",label:"Overflow Tabs - Error",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error-unread-unsaved",label:"Overflow Tabs - Error Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],we=a(3785),ye=a(796),ge=l().createElement(we.A,{tabs:ye.pw}),Te=(we.A,ye.vb,we.A,ye.nz,we.A,ye.pw,a(806)),Ae=s.XB.a,Ce=s.XB.code,Oe=s.XB.h2,_e=s.XB.h3,Ne=s.XB.h4,Se=s.XB.h5,xe=s.XB.li,Pe=s.XB.p,ke=s.XB.strong,Ue=s.XB.ul,Le=function(){return(0,n.createElement)(s.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),(0,n.createElement)(i.A,{exampleOnly:!0,demoStyles:"height: 200px;"},(0,Te.NO)(ce)),Oe({id:"About-Tabs"},"About Tabs"),Pe({},"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."),_e({id:"Implementation"},"Implementation"),Ne({id:"Markup"},"Markup"),Pe({},"The following markup is crucial for Accessibility"),Ue({},xe({},"Selected tab’s anchor has ",Ce({},'aria-selected="true"'),", all other tabs’ anchors have ",Ce({},'aria-selected="false"')),xe({},"Selected tab’s anchor has ",Ce({},'tabindex="0"'),", all other tabs have ",Ce({},'tabindex="-1"')),xe({},"Each tab’s anchor has an ",Ce({},"aria-controls")," attribute whose value is the id of the associated ",Ce({},'<div role="tabpanel">')),xe({},"Each tab panel has an ",Ce({},"aria-labelledby")," attribute whose value is the id of its associated ",Ce({},'<a role="tab">'))),Ne({id:"Keyboard-Interactions"},"Keyboard Interactions"),Ue({},xe({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),xe({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),xe({},"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"),xe({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),Ne({id:"JavaScript-Needs"},"JavaScript Needs"),Pe({},"The active tab has two markup requirements:"),Ue({},xe({},"The ",Ce({},".slds-active")," class should be placed on the ",Ce({},"li")," with ",Ce({},".slds-tabs_{variant}__item"),"."),xe({},"The corresponding ",Ce({},".slds-tabs_{variant}__content")," container receives ",Ce({},".slds-show"),"."),xe({},"In order to achieve the focus state styling, apply ",Ce({},".slds-has-focus")," to the parent ",Ce({},"li"),".")),Pe({},"Inactive ",Ce({},".slds-tabs_{variant}__content")," containers receive ",Ce({},".slds-hide"),"."),Pe({},"When the user clicks a different tab, move the ",Ce({},".slds-active")," class and toggle the ",Ce({},".slds-hide"),"/",Ce({},".slds-show")," classes."),_e({id:"Accessibility"},"Accessibility"),Pe({},"Tabbed UIs have three parts with specific ",ke({},"ARIA")," role requirements:"),Ue({},xe({},"The tab list, which should have ",Ce({},'role="tablist"')),xe({},"The tabs in that list, which should each be an ",Ce({},'<a role="tab">')," anchor wrapped in a ",Ce({},'<li role="presentation">')," list item"),xe({},"The tab panels, which display each tab’s content and should each have ",Ce({},'role="tabpanel"'))),Oe({id:"Base"},"Base"),(0,n.createElement)(o.A,{title:"Tabs Base"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(ce))),Oe({id:"Size-Modifiers"},"Size Modifiers"),Pe({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",Ce({},"slds-tabs_medium")," or ",Ce({},"slds-tabs_large")," to the ",Ce({},"slds-tabs_default")," element."),_e({id:"Medium"},"Medium"),(0,n.createElement)(o.A,{title:"Tabs with Medium sizing modifier"},(0,n.createElement)(i.A,null,(0,Te.NO)(de,"size-medium"))),_e({id:"Large"},"Large"),(0,n.createElement)(o.A,{title:"Tabs with Large sizing modifier"},(0,n.createElement)(i.A,null,(0,Te.NO)(de,"size-large"))),Oe({id:"With-Header"},"With Header"),(0,n.createElement)(o.A,{title:"Tabs with Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"with-header"))),(0,n.createElement)(b.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The header can be visually hidden but still accessible to screen readers by applying"," ",(0,n.createElement)("code",null,"slds-assistive-text")," to the ",(0,n.createElement)("code",null,"slds-tabs_default__header")," element.")),_e({id:"Medium-2"},"Medium"),(0,n.createElement)(o.A,{title:"Tabs with Medium Size Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"size-medium-with-header"))),_e({id:"Large-2"},"Large"),(0,n.createElement)(o.A,{title:"Tabs with Large Size Header"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"size-large-with-header"))),Oe({id:"With-Overflow"},"With Overflow"),Pe({},"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."),(0,n.createElement)(o.A,{title:"Tabs Overflowing"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"overflow"))),(0,n.createElement)(b.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The overflow tab should have a ",(0,n.createElement)("code",null,'role="tab"')," to ensure screen readers properly announce it as a tab, keeping it consistent with the number of tabs visible to sighted users.")),(0,n.createElement)(b.A,{type:"note",header:"Implementation Guidelines"},(0,n.createElement)("p",null,"The ",(0,n.createElement)("code",null,"slds-dropdown__list")," element requires a",(0,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.")),Oe({id:"With-Icon"},"With Icon"),Pe({},"Icons can be used with tabs to help users differentiate among them."),(0,n.createElement)(o.A,{title:"Tabs With Icons"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"overflow-icons"))),Oe({id:"With-Error"},"With Error"),Pe({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),(0,n.createElement)(o.A,{title:"Tabs With Icons"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"error"))),Oe({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),Pe({},"If nesting tabs within tabs, the second set should be rendered as ",Ae({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),(0,n.createElement)(o.A,{title:"Tabs with Nested Scoped Tabs"},(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(de,"nested"))),Oe({id:"Subtabs"},"Subtabs"),Pe({},"Subtabs are used to provide an additional level of navigation below the ",Ae({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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(Ie)),_e({id:"Expected-Behavior"},"Expected Behavior"),Ue({},xe({},"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."),xe({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",Ue({},xe({},"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."))),xe({},"All subtabs are closed when the parent navigation item is closed."),xe({},"Subtabs can optionally include a tab menu for additional controls.")),_e({id:"With-Focus"},"With Focus"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-has-focus")),_e({id:"With-Borders"},"With Borders"),Pe({},"To add borders on either side of the subtab, add the classes ",Ce({},"slds-border_right")," and ",Ce({},"slds-border_left"),", as needed, to the ",Ce({},"<li>")," with class ",Ce({},"slds-sub-tabs__item"),"."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-borders")),_e({id:"With-Tab-Actions"},"With Tab Actions"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-menu")),_e({id:"Status-Options"},"Status Options"),Ne({id:"Unsaved-Tab"},"Unsaved Tab"),Pe({},"Unsaved tabs receive a blue asterisk on the tab."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"subtabs-unsaved")),(0,n.createElement)(b.A,{header:"Additional Tag for Accessibility",type:"a11y"},(0,n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",(0,n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",(0,n.createElement)("code",null,"title")," attribute and ",(0,n.createElement)("code",null,"aria-label")," should read"," ",(0,n.createElement)("b",null,'"Tab Not Saved"'),".")),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),Ne({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),Pe({},"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."),Pe({},"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:"),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),Pe({},"Upon clearing the status on a given tab, you should clear the message from the live region."),Ne({id:"Unread-Tab"},"Unread Tab"),Pe({},"Unread tabs receive a red dot on the tab."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"unread")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),(0,n.createElement)("ol",{className:"slds-list_ordered"},(0,n.createElement)("li",null,"The ",(0,n.createElement)("code",null,"title")," attribute and ",(0,n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",(0,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".'),(0,n.createElement)("li",null,"The hidden live region as described above, should have its content updated to"," ",(0,n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity",role:"img"})),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),Ne({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"unsaved")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),Ne({id:"Warning-Tab"},"Warning Tab"),Pe({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",Ce({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),Se({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning-unsaved")),Se({id:"Unread-Warning-Tab"},"Unread Warning Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"warning-unread")),Ne({id:"Error-Tab"},"Error Tab"),Pe({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",Ce({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),Se({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error-unsaved")),Se({id:"Unread-Error-Tab"},"Unread Error Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"error-unread")),Ne({id:"Success-Tab"},"Success Tab"),Pe({},"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 ",Ce({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),Pe({},"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."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success")),(0,n.createElement)(b.A,{header:"Accessibility",type:"a11y"},(0,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 ",(0,n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),Se({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success-unsaved")),Se({id:"Unread-Success-Tab"},"Unread Success Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"success-unread")),_e({id:"With-Overflow-Tab"},"With Overflow Tab"),Pe({},"Overflowing subtabs are contained in a More dropdown."),(0,n.createElement)(i.A,{demoStyles:"height: 100px;"},(0,Te.NO)(fe,"overflow-tabs")),Ne({id:"Overflow-Tab-Open"},"Overflow Tab Open"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-open")),Ne({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unread-overflow-tabs-open")),Ne({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unsaved-overflow-tabs-open")),Ne({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"unsaved-unread-overflow-tabs-open")),Ne({id:"Success-Overflow-Tab"},"Success Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-success")),Ne({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-success-unread-unsaved")),Ne({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-warning")),Ne({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-warning-unread-unsaved")),Ne({id:"Error-Overflow-Tab"},"Error Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-error")),Ne({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),(0,n.createElement)(i.A,{demoStyles:"height: 200px;"},(0,Te.NO)(fe,"overflow-tabs-error-unread-unsaved")),Oe({id:"Vertical"},"Vertical"),Pe({},"To use vertical tabs, check out the ",Ae({href:"../vertical-tabs"},"Vertical Tabs")," component."),(0,n.createElement)(o.A,{title:"Tabs as Vertical"},ge),Oe({id:"As-a-Card"},"As a Card"),Pe({},"To style tabs as a card, add the class ",Ce({},"slds-tabs_card")," to the ",Ce({},"<div>")," with the class ",Ce({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),(0,n.createElement)(o.A,{title:"Tabs as a Card"},(0,n.createElement)(i.A,{demoStyles:"height: 600px;"},(0,Te.NO)(de,"card-look"))),Oe({id:"On-Mobile"},"On Mobile"),Pe({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),Pe({},"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."),(0,n.createElement)(b.A,{header:"Focus Management",type:"a11y"},(0,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.")),(0,n.createElement)(o.A,{title:"Tabs Mobile Base"},(0,n.createElement)(i.A,null,(0,n.createElement)(R,null))),_e({id:"Accessibility-2"},"Accessibility"),Pe({},ke({},"Visibility")),Ue({},xe({},"The panels should have ",Ce({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),xe({},"The tabs should have ",Ce({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),Pe({},ke({},"Focus Management")),Pe({},"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."),Pe({},ke({},"Assistive Text")),Pe({},"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."),_e({id:"Panel-Open"},"Panel Open"),Pe({},'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.'),(0,n.createElement)(o.A,{title:"Tabs Mobile Drilled-in"},(0,n.createElement)(i.A,null,(0,n.createElement)(R,{visiblePanelIdx:0,isStatic:!0}))),_e({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),Pe({},"When there are two or more immediately adjacent tab sets on mobile, use the ",Ce({},"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."),(0,n.createElement)(o.A,{title:"Tabs Mobile Adjacent Stacked"},(0,n.createElement)(i.A,null,(0,n.createElement)(H,null,(0,n.createElement)(R,{isStatic:!0}),(0,n.createElement)(R,{isStatic:!0,startingIdx:3})))),_e({id:"Nested-Tab-Sets"},"Nested Tab Sets"),(0,n.createElement)(o.A,{title:"Tabs Mobile Nested"},(0,n.createElement)(i.A,{demoStyles:"height: 300px;"},(0,n.createElement)(D,null))),Oe({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(c.A,{name:"tabs",type:"component"}))},Ve=function(){return(0,s.Qr)(Le())}}},l={};function s(e){var t=l[e];if(void 0!==t)return t.exports;var a=l[e]={id:e,exports:{}};return n[e](a,a.exports,s),a.exports}s.m=n,s.amdO={},e=[],s.O=function(t,a,n,l){if(!a){var i=1/0;for(c=0;c<e.length;c++){a=e[c][0],n=e[c][1],l=e[c][2];for(var r=!0,o=0;o<a.length;o++)(!1&l\|\|i>=l)&&Object.keys(s.O).every(function(e){return s.O[e](a[o])})?a.splice(o--,1):(r=!1,l<i&&(i=l));if(r){e.splice(c--,1);var b=n();void 0!==b&&(t=b)}}return t}l=l\|\|0;for(var c=e.length;c>0&&e[c-1][2]>l;c--)e[c]=e[c-1];e[c]=[a,n,l]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},a=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var l=Object.create(null);s.r(l);var i={};t=t\|\|[null,a({}),a([]),a(a)];for(var r=2&n&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=a(r))Object.getOwnPropertyNames(r).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(l,i),l},s.d=function(e,t){for(var a in t)s.o(t,a)&&!s.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=523,function(){var e={523:0};s.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,l,i=a[0],r=a[1],o=a[2],b=0;if(i.some(function(t){return 0!==e[t]})){for(n in r)s.o(r,n)&&(s.m[n]=r[n]);if(o)var c=o(s)}for(t&&t(a);b<i.length;b++)l=i[b],s.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return s.O(c)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(9920)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=i}();

package/__internal/chunked/docs/ui/components/textarea/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,r,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},2517:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return N},getElement:function(){return j}});var n=r(1594),a=r.n(n),l=r(5671),o=r(6547),i=r(9741),u=r(8342),s=r(806),c=(r(5619),r(~~7412~~)),d=r.n(c),f=r(942),m=r.n(f),b=r(2711);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(null,arguments)}var v="Textarea Label",y="textarea-id-01",h=function(e){return a().createElement("textarea",p({},e,{id:e.id\|\|y,className:m()("slds-textarea",e.className),placeholder:e.placeholder}))};h.propTypes={id:d().string,className:d().string,placeholder:d().string},h.defaultProps={placeholder:"Placeholder text…"};var g=[{id:"default",label:"Default",element:a().createElement(b.ZS,{labelContent:v,inputId:y},a().createElement(h,{id:y}))}],O=[{id:"disabled",label:"Disabled",element:a().createElement(b.ZS,{labelContent:v,inputId:y},a().createElement(h,{id:y,disabled:!0}))},{id:"required",label:"Required",element:a().createElement(b.ZS,{labelContent:v,inputId:y,isRequired:!0},a().createElement(h,{id:y,required:!0}))},{id:"error",label:"Error",element:a().createElement(b.ZS,{hasError:!0,labelContent:v,inputId:y,isRequired:!0,errorId:"error-01",inlineMessage:"Enter a value."},a().createElement(h,{id:y,required:!0,"aria-describedby":"error-01"}))},{id:"read-only",label:"Read only",element:a().createElement(b.GN,null,a().createElement("span",{className:"slds-form-element__label"},"Textarea Label"),a().createElement(b.qz,{className:"slds-border_bottom"},a().createElement("div",{className:"slds-form-element__static"},a().createElement("p",null,"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum."))))}],E=l.XB.code,S=l.XB.h2,_=l.XB.h3,x=l.XB.p,j=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Textarea inputs are used for freeform data entry."),(0,n.createElement)(o.A,{exampleOnly:!0},(0,s.NO)(O,"required")),S({id:"About-Textarea"},"About Textarea"),x({},"You can style the HTML ",E({},"<textarea>")," element to align with the Salesforce brand by using the class ",E({},".slds-textarea")," on the ",E({},"<textarea>")," element."),_({id:"Accessibility"},"Accessibility"),x({},"All form elements marked as required with an * must have an accompanying legend."),x({},"Example:\n",(0,n.createElement)(i.A,null)),S({id:"Base"},"Base"),(0,n.createElement)(o.A,null,(0,s.NO)(g)),S({id:"States"},"States"),_({id:"Disabled"},"Disabled"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"disabled")),_({id:"Required"},"Required"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"required")),_({id:"Error"},"Error"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"error")),_({id:"Read-only"},"Read only"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"read-only")),S({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(u.A,{name:"textarea",type:"component"}))},N=function(){return(0,l.Qr)(j())}},5206:function(e){e.exports=ReactDOM}},a={};function l(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={id:e,exports:{}};return n[e](r,r.exports,l),r.exports}l.m=n,l.amdO={},e=[],l.O=function(t,r,n,a){if(!r){var o=1/0;for(c=0;c<e.length;c++){r=e[c][0],n=e[c][1],a=e[c][2];for(var i=!0,u=0;u<r.length;u++)(!1&a\|\|o>=a)&&Object.keys(l.O).every(function(e){return l.O[e](r[u])})?r.splice(u--,1):(i=!1,a<o&&(o=a));if(i){e.splice(c--,1);var s=n();void 0!==s&&(t=s)}}return t}a=a\|\|0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[r,n,a]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);l.r(a);var o={};t=t\|\|[null,r({}),r([]),r(r)];for(var i=2&n&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},l.d(a,o),a},l.d=function(e,t){for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=2053,function(){var e={2053:0};l.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,a,o=r[0],i=r[1],u=r[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(n in i)l.o(i,n)&&(l.m[n]=i[n]);if(u)var c=u(l)}for(t&&t(r);s<o.length;s++)a=o[s],l.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return l.O(c)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),l.nc=void 0;var o=l.O(void 0,[3540],function(){return l(2517)});o=l.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/textarea/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,r,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},2517:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return N},getElement:function(){return j}});var n=r(1594),a=r.n(n),l=r(5671),o=r(6547),i=r(9741),u=r(8342),s=r(806),c=(r(5619),r(4187)),d=r.n(c),f=r(942),m=r.n(f),b=r(2711);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(null,arguments)}var v="Textarea Label",y="textarea-id-01",h=function(e){return a().createElement("textarea",p({},e,{id:e.id\|\|y,className:m()("slds-textarea",e.className),placeholder:e.placeholder}))};h.propTypes={id:d().string,className:d().string,placeholder:d().string},h.defaultProps={placeholder:"Placeholder text…"};var g=[{id:"default",label:"Default",element:a().createElement(b.ZS,{labelContent:v,inputId:y},a().createElement(h,{id:y}))}],O=[{id:"disabled",label:"Disabled",element:a().createElement(b.ZS,{labelContent:v,inputId:y},a().createElement(h,{id:y,disabled:!0}))},{id:"required",label:"Required",element:a().createElement(b.ZS,{labelContent:v,inputId:y,isRequired:!0},a().createElement(h,{id:y,required:!0}))},{id:"error",label:"Error",element:a().createElement(b.ZS,{hasError:!0,labelContent:v,inputId:y,isRequired:!0,errorId:"error-01",inlineMessage:"Enter a value."},a().createElement(h,{id:y,required:!0,"aria-describedby":"error-01"}))},{id:"read-only",label:"Read only",element:a().createElement(b.GN,null,a().createElement("span",{className:"slds-form-element__label"},"Textarea Label"),a().createElement(b.qz,{className:"slds-border_bottom"},a().createElement("div",{className:"slds-form-element__static"},a().createElement("p",null,"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum."))))}],E=l.XB.code,S=l.XB.h2,_=l.XB.h3,x=l.XB.p,j=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Textarea inputs are used for freeform data entry."),(0,n.createElement)(o.A,{exampleOnly:!0},(0,s.NO)(O,"required")),S({id:"About-Textarea"},"About Textarea"),x({},"You can style the HTML ",E({},"<textarea>")," element to align with the Salesforce brand by using the class ",E({},".slds-textarea")," on the ",E({},"<textarea>")," element."),_({id:"Accessibility"},"Accessibility"),x({},"All form elements marked as required with an * must have an accompanying legend."),x({},"Example:\n",(0,n.createElement)(i.A,null)),S({id:"Base"},"Base"),(0,n.createElement)(o.A,null,(0,s.NO)(g)),S({id:"States"},"States"),_({id:"Disabled"},"Disabled"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"disabled")),_({id:"Required"},"Required"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"required")),_({id:"Error"},"Error"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"error")),_({id:"Read-only"},"Read only"),(0,n.createElement)(o.A,null,(0,s.NO)(O,"read-only")),S({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(u.A,{name:"textarea",type:"component"}))},N=function(){return(0,l.Qr)(j())}},5206:function(e){e.exports=ReactDOM}},a={};function l(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={id:e,exports:{}};return n[e](r,r.exports,l),r.exports}l.m=n,l.amdO={},e=[],l.O=function(t,r,n,a){if(!r){var o=1/0;for(c=0;c<e.length;c++){r=e[c][0],n=e[c][1],a=e[c][2];for(var i=!0,u=0;u<r.length;u++)(!1&a\|\|o>=a)&&Object.keys(l.O).every(function(e){return l.O[e](r[u])})?r.splice(u--,1):(i=!1,a<o&&(o=a));if(i){e.splice(c--,1);var s=n();void 0!==s&&(t=s)}}return t}a=a\|\|0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[r,n,a]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);l.r(a);var o={};t=t\|\|[null,r({}),r([]),r(r)];for(var i=2&n&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},l.d(a,o),a},l.d=function(e,t){for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=2053,function(){var e={2053:0};l.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,a,o=r[0],i=r[1],u=r[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(n in i)l.o(i,n)&&(l.m[n]=i[n]);if(u)var c=u(l)}for(t&&t(r);s<o.length;s++)a=o[s],l.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return l.O(c)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),l.nc=void 0;var o=l.O(void 0,[3540],function(){return l(2517)});o=l.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/textarea/docs.mdx.js"]=o}();