@salesforce-ux/design-system 2.30.3 → 2.264.0-beta.1

package/__internal/chunked/docs/ui/components/builder-header/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,r,n={1594:function(e){e.exports=React},1869:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return Ee},getElement:function(){return ve}});var n=r(1594),o=r.n(n),a=r(5671),s=r(6547),i=r(5619),l=r(806),c=r(7412),u=r.n(c),d=r(6333),m=r.n(d),p=r(8347),f=r(6955),b=r(5206),h=r.n(b),y=r(3062),v=r(9249),E=r(6515);function g(e){return g="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},g(e)}function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function _(e,t,r){return(t=function(e){var t=function(e){if("object"!=g(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=g(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==g(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return T(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?T(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var N=function(){return o().createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",o().createElement(E.A,{title:"Learn More"},"Learn more."))},x=function(e){var t=e.activeError,r=e.assistiveText,a=e.children,s=e.isWarning,i=e.isError,l=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,f=(0,n.useRef)(),b=(0,n.useRef)(),E=S((0,n.useState)(),2),g=E[0],T=E[1],x=S((0,n.useState)(!1),2),O=x[0],D=x[1],A=S((0,n.useState)(!1),2),j=A[0],k=A[1],P=function(){f.current.focus(),D(!0)},C=function(){f.current.focus(),D(!1),k(!1),l(c)};(0,n.useEffect)(function(){function e(e){var t=W.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}});var W=new Map([[27,function(){O&&C()}],[9,function(e){if(O){k(!0);var t=b.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),r=t[0],n=t[t.length-1];if(!e.shiftKey&&document.activeElement!==r)return r.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==n&&(n.focus(),e.preventDefault())}}]]);(0,n.useEffect)(function(){var e=f.current,t=function(){T({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}},[]),(0,n.useEffect)(function(){t&&P()},[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach(function(t){_(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({position:"absolute"},g),M=m()("example-unique-id-");return o().createElement(o().Fragment,null,n.Children.only(a)&&o().cloneElement(a,{size:u,feedback:p,symbol:p,assistiveText:r,title:d,onClick:function(){O?C():P()},onBlur:function(){j||(D(!1),l(c))},innerRef:f}),O&&h().createPortal(o().createElement(y.AM,{isWarning:s,isError:i,headingId:M,style:B,onClose:C,header:o().createElement(v.R5,{headingId:M,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:b,nubbinPosition:"top right"},o().createElement(N,null)),document.body))},O=(0,l.D)(!1,function(e,t,r){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")}),D=(0,l.D)(!0,function(e,t,r){var n=["Button","ButtonIcon"];o().Children.forEach(e[t],function(e){if(!n.includes(e.type.name))throw new Error("".concat(r," child should be one of the type: ").concat(n.join(", ")))})});x.propTypes={activeError:O,assistiveText:u().string,children:D,isWarning:u().bool,isError:u().bool,parentCallback:u().func,parentCallbackData:u().node,size:u().string,type:u().string};var A=x,j=r(538),k=r(4216),P=r(4760);function C(e){return C="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},C(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,I(n.key),n)}}function M(e,t,r){return t&&B(e.prototype,t),r&&B(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e){var t=function(e){if("object"!=C(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=C(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==C(t)?t:t+""}function L(e,t,r){return t=V(t),function(e,t){if(t&&("object"==C(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,R()?Reflect.construct(t,r||[],V(e).constructor):t.apply(e,r))}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=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){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&&H(e,t)}function H(e,t){return H=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},H(e,t)}function z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return U(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?U(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function U(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var F=function(){return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return o().createElement(P.W1,{className:"slds-dropdown_right slds-dropdown_actions"},o().createElement(P.cO,{ariaLabel:"Show More"},o().createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),o().createElement(P.Dr,null,"Menu Item One"),o().createElement(P.Dr,null,"Menu Item Two"),o().createElement(P.Dr,null,"Menu Item Three")))},q=function(e){return o().createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},o().createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&o().createElement(K,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},K=function(e){var t=e.openDropDown,r=e.symbol;return o().createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},o().createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:r,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),o().createElement(j.eX,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&o().createElement(J,null))};K.propTypes={openDropDown:u().bool,symbol:u().string},K.defaultProps={openDropDown:!1};var $=function(e){var t=e.label;return o().createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},o().createElement("h1",{className:"slds-builder-header__item-label"},o().createElement("span",{className:"slds-truncate",title:t},t)))};$.propTypes={label:u().string},$.defaultProps={label:"Page Type"};var Q=function(e){var t=e.hasBackTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)},"aria-describedby":a&&f,title:"Back"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};Q.propTypes={hasBackTooltip:u().bool};var Y=function(e){return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u().string};var Z=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},ee=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},te=function(e){var t=e.hasStatusTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement(o().Fragment,null,a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),o().createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":a&&f,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)}},"Inactive - Modified 1 day ago"))};te.propTypes={hasStatusTooltip:u().bool};var re=function(e){var t=e.hasStatus,r=e.hasStatusTooltip,a=e.hasWarning,s=e.hasError,i=[];a&&i.push("warning"),s&&i.push("error");var l=z((0,n.useState)(!1),2),c=l[0],u=l[1],d=function(){s&&u(!0)},m=function(e){u(e)};return o().createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&o().createElement(te,{hasStatusTooltip:r}),Array.isArray(i)&&i.length>0&&i.map(function(e,t){var r="warning"===e,n="error"===e;return o().createElement(A,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:r,isError:n,activeError:c&&n,parentCallback:m,parentCallbackData:!1},o().createElement(f.A,null))}),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},o().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),o().createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};re.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var ne=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,r=e.hasStatusTooltip,n=e.hasWarning,a=e.hasError;return o().createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},o().createElement(Z,null),o().createElement(ee,null),o().createElement(re,{hasStatus:t,hasStatusTooltip:r,hasWarning:n,hasError:a}))}}])}(n.Component);ne.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var oe=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,r=e.docName,n=e.showDropDown,a=e.openDropDown,s=e.hasBackTooltip,i=e.hasStatus,l=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return o().createElement("div",{className:"slds-builder-header_container"},o().createElement("header",{className:"slds-builder-header"},o().createElement(Q,{hasBackTooltip:s}),o().createElement(F,null),o().createElement(q,{showDropDown:n,openDropDown:a}),o().createElement($,{label:r}),o().createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},o().createElement(G,{symbol:"settings"}),o().createElement(Y,null))),t&&o().createElement(ne,{hasStatus:i,hasStatusTooltip:l,hasWarning:c,hasError:u}))}}])}(n.Component);oe.propTypes={showToolbar:u().bool,docName:u().string,showDropDown:u().bool,openDropDown:u().bool,hasBackTooltip:u().bool,hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool},oe.defaultProps={showDropDown:!0};var ae=oe,se="height: 220px; position: relative;",ie=o().createElement(ae,{showDropDown:!0}),le=[{id:"menu-open",label:"Menu open",isOpen:!0,element:o().createElement(ae,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:o().createElement(ae,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:o().createElement(ae,{hasBackTooltip:!0})}],ce=o().createElement(ae,{showToolbar:!0}),ue=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:o().createElement(ae,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:o().createElement(ae,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:o().createElement(ae,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:o().createElement(ae,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],de=a.XB.a,me=a.XB.h2,pe=a.XB.h3,fe=a.XB.h4,be=a.XB.li,he=a.XB.p,ye=a.XB.ul,ve=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),(0,n.createElement)(s.A,{exampleOnly:!0,isViewport:!0,demoStyles:se},(0,l.NO)(ce)),me({id:"About-Builder-Header"},"About Builder Header"),he({},"To learn more about the Builder pattern in general, check out our ",de({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",de({href:"/guidelines/builder/header/"},"Builder Header"),"."),me({id:"Base"},"Base"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ie)),me({id:"With-open-dropdown-menu"},"With open dropdown menu"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"menu-open")),me({id:"With-tooltip"},"With tooltip"),he({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The back action's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"has-tooltip")),me({id:"Variations"},"Variations"),pe({id:"With-a-Truncated-Name"},"With a Truncated Name"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"with-truncation")),pe({id:"With-a-Toolbar"},"With a Toolbar"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ce)),pe({id:"With-Status-text"},"With Status text"),he({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),he({},"A status text can include:"),ye({},be({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),be({},"Action, plus Last Modified Time, represented with ",de({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),he({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The status text's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text")),pe({id:"With-Alert"},"With Alert"),he({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",(0,n.createElement)("strong",null,"close button")," or"," ",(0,n.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),fe({id:"Warning"},"Warning"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning")),fe({id:"Error"},"Error"),he({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-error")),fe({id:"Warning-and-Error"},"Warning and Error"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning-and-error")))},Ee=function(){return(0,a.Qr)(ve())}},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.amdO={},e=[],a.O=function(t,r,n,o){if(!r){var s=1/0;for(u=0;u<e.length;u++){r=e[u][0],n=e[u][1],o=e[u][2];for(var i=!0,l=0;l<r.length;l++)(!1&o||s>=o)&&Object.keys(a.O).every(function(e){return a.O[e](r[l])})?r.splice(l--,1):(i=!1,o<s&&(s=o));if(i){e.splice(u--,1);var c=n();void 0!==c&&(t=c)}}return t}o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[r,n,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,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 o=Object.create(null);a.r(o);var s={};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){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(o,s),o},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=7878,function(){var e={7878:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,o,s=r[0],i=r[1],l=r[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(n in i)a.o(i,n)&&(a.m[n]=i[n]);if(l)var u=l(a)}for(t&&t(r);c<s.length;c++)o=s[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(u)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var s=a.O(void 0,[3540],function(){return a(1869)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=s}();
+var SLDS;!function(){"use strict";var e,t,r,n={1594:function(e){e.exports=React},1869:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return Ee},getElement:function(){return ve}});var n=r(1594),o=r.n(n),a=r(5671),s=r(6547),i=r(5619),l=r(806),c=r(7412),u=r.n(c),d=r(6333),m=r.n(d),p=r(8347),f=r(6955),b=r(5206),h=r.n(b),y=r(3062),v=r(9249),E=r(6515);function g(e){return g="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},g(e)}function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function _(e,t,r){return(t=function(e){var t=function(e){if("object"!=g(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=g(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==g(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return T(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?T(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var N=function(){return o().createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",o().createElement(E.A,{title:"Learn More"},"Learn more."))},x=function(e){var t=e.activeError,r=e.assistiveText,a=e.children,s=e.isWarning,i=e.isError,l=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,f=(0,n.useRef)(),b=(0,n.useRef)(),E=S((0,n.useState)(),2),g=E[0],T=E[1],x=S((0,n.useState)(!1),2),O=x[0],D=x[1],A=S((0,n.useState)(!1),2),j=A[0],k=A[1],P=function(){f.current.focus(),D(!0)},C=function(){f.current.focus(),D(!1),k(!1),l(c)};(0,n.useEffect)(function(){function e(e){var t=W.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}});var W=new Map([[27,function(){O&&C()}],[9,function(e){if(O){k(!0);var t=b.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),r=t[0],n=t[t.length-1];if(!e.shiftKey&&document.activeElement!==r)return r.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==n&&(n.focus(),e.preventDefault())}}]]);(0,n.useEffect)(function(){var e=f.current,t=function(){T({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}},[]),(0,n.useEffect)(function(){t&&P()},[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach(function(t){_(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({position:"absolute"},g),M=m()("example-unique-id-");return o().createElement(o().Fragment,null,n.Children.only(a)&&o().cloneElement(a,{size:u,feedback:p,symbol:p,assistiveText:r,title:d,onClick:function(){O?C():P()},onBlur:function(){j||(D(!1),l(c))},innerRef:f}),O&&h().createPortal(o().createElement(y.AM,{isWarning:s,isError:i,headingId:M,style:B,onClose:C,header:o().createElement(v.R5,{headingId:M,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:b,nubbinPosition:"top right"},o().createElement(N,null)),document.body))},O=(0,l.D)(!1,function(e,t,r){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")}),D=(0,l.D)(!0,function(e,t,r){var n=["Button","ButtonIcon"];o().Children.forEach(e[t],function(e){if(!n.includes(e.type.name))throw new Error("".concat(r," child should be one of the type: ").concat(n.join(", ")))})});x.propTypes={activeError:O,assistiveText:u().string,children:D,isWarning:u().bool,isError:u().bool,parentCallback:u().func,parentCallbackData:u().node,size:u().string,type:u().string};var A=x,j=r(538),k=r(4216),P=r(4760);function C(e){return C="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},C(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,I(n.key),n)}}function M(e,t,r){return t&&B(e.prototype,t),r&&B(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e){var t=function(e){if("object"!=C(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=C(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==C(t)?t:t+""}function L(e,t,r){return t=V(t),function(e,t){if(t&&("object"==C(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,R()?Reflect.construct(t,r||[],V(e).constructor):t.apply(e,r))}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=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){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&&H(e,t)}function H(e,t){return H=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},H(e,t)}function z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return U(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?U(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function U(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var F=function(){return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return o().createElement(P.W1,{className:"slds-dropdown_right slds-dropdown_actions"},o().createElement(P.cO,{ariaLabel:"Show More"},o().createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),o().createElement(P.Dr,null,"Menu Item One"),o().createElement(P.Dr,null,"Menu Item Two"),o().createElement(P.Dr,null,"Menu Item Three")))},q=function(e){return o().createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},o().createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&o().createElement(K,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},K=function(e){var t=e.openDropDown,r=e.symbol;return o().createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},o().createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:r,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),o().createElement(j.eX,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&o().createElement(J,null))};K.propTypes={openDropDown:u().bool,symbol:u().string},K.defaultProps={openDropDown:!1};var $=function(e){var t=e.label;return o().createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},o().createElement("h1",{className:"slds-builder-header__item-label"},o().createElement("span",{className:"slds-truncate",title:t},t)))};$.propTypes={label:u().string},$.defaultProps={label:"Page Type"};var Q=function(e){var t=e.hasBackTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)},"aria-describedby":a&&f,title:"Back"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};Q.propTypes={hasBackTooltip:u().bool};var Y=function(e){return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u().string};var Z=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},ee=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},te=function(e){var t=e.hasStatusTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement(o().Fragment,null,a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),o().createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":a&&f,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)}},"Inactive - Modified 1 day ago"))};te.propTypes={hasStatusTooltip:u().bool};var re=function(e){var t=e.hasStatus,r=e.hasStatusTooltip,a=e.hasWarning,s=e.hasError,i=[];a&&i.push("warning"),s&&i.push("error");var l=z((0,n.useState)(!1),2),c=l[0],u=l[1],d=function(){s&&u(!0)},m=function(e){u(e)};return o().createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&o().createElement(te,{hasStatusTooltip:r}),Array.isArray(i)&&i.length>0&&i.map(function(e,t){var r="warning"===e,n="error"===e;return o().createElement(A,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:r,isError:n,activeError:c&&n,parentCallback:m,parentCallbackData:!1},o().createElement(f.A,null))}),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},o().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," Run"),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),o().createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};re.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var ne=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,r=e.hasStatusTooltip,n=e.hasWarning,a=e.hasError;return o().createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},o().createElement(Z,null),o().createElement(ee,null),o().createElement(re,{hasStatus:t,hasStatusTooltip:r,hasWarning:n,hasError:a}))}}])}(n.Component);ne.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var oe=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,r=e.docName,n=e.showDropDown,a=e.openDropDown,s=e.hasBackTooltip,i=e.hasStatus,l=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return o().createElement("div",{className:"slds-builder-header_container"},o().createElement("header",{className:"slds-builder-header"},o().createElement(Q,{hasBackTooltip:s}),o().createElement(F,null),o().createElement(q,{showDropDown:n,openDropDown:a}),o().createElement($,{label:r}),o().createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},o().createElement(G,{symbol:"settings"}),o().createElement(Y,null))),t&&o().createElement(ne,{hasStatus:i,hasStatusTooltip:l,hasWarning:c,hasError:u}))}}])}(n.Component);oe.propTypes={showToolbar:u().bool,docName:u().string,showDropDown:u().bool,openDropDown:u().bool,hasBackTooltip:u().bool,hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool},oe.defaultProps={showDropDown:!0};var ae=oe,se="height: 220px; position: relative;",ie=o().createElement(ae,{showDropDown:!0}),le=[{id:"menu-open",label:"Menu open",isOpen:!0,element:o().createElement(ae,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:o().createElement(ae,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:o().createElement(ae,{hasBackTooltip:!0})}],ce=o().createElement(ae,{showToolbar:!0}),ue=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:o().createElement(ae,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:o().createElement(ae,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:o().createElement(ae,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:o().createElement(ae,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],de=a.XB.a,me=a.XB.h2,pe=a.XB.h3,fe=a.XB.h4,be=a.XB.li,he=a.XB.p,ye=a.XB.ul,ve=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),(0,n.createElement)(s.A,{exampleOnly:!0,isViewport:!0,demoStyles:se},(0,l.NO)(ce)),me({id:"About-Builder-Header"},"About Builder Header"),he({},"To learn more about the Builder pattern in general, check out our ",de({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",de({href:"/guidelines/builder/header/"},"Builder Header"),"."),me({id:"Base"},"Base"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ie)),me({id:"With-open-dropdown-menu"},"With open dropdown menu"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"menu-open")),me({id:"With-tooltip"},"With tooltip"),he({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The back action's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"has-tooltip")),me({id:"Variations"},"Variations"),pe({id:"With-a-Truncated-Name"},"With a Truncated Name"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"with-truncation")),pe({id:"With-a-Toolbar"},"With a Toolbar"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ce)),pe({id:"With-Status-text"},"With Status text"),he({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),he({},"A status text can include:"),ye({},be({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),be({},"Action, plus Last Modified Time, represented with ",de({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),he({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The status text's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text")),pe({id:"With-Alert"},"With Alert"),he({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",(0,n.createElement)("strong",null,"close button")," or"," ",(0,n.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),fe({id:"Warning"},"Warning"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning")),fe({id:"Error"},"Error"),he({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-error")),fe({id:"Warning-and-Error"},"Warning and Error"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning-and-error")))},Ee=function(){return(0,a.Qr)(ve())}},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.amdO={},e=[],a.O=function(t,r,n,o){if(!r){var s=1/0;for(u=0;u<e.length;u++){r=e[u][0],n=e[u][1],o=e[u][2];for(var i=!0,l=0;l<r.length;l++)(!1&o||s>=o)&&Object.keys(a.O).every(function(e){return a.O[e](r[l])})?r.splice(l--,1):(i=!1,o<s&&(s=o));if(i){e.splice(u--,1);var c=n();void 0!==c&&(t=c)}}return t}o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[r,n,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,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 o=Object.create(null);a.r(o);var s={};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){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(o,s),o},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=7878,function(){var e={7878:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,o,s=r[0],i=r[1],l=r[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(n in i)a.o(i,n)&&(a.m[n]=i[n]);if(l)var u=l(a)}for(t&&t(r);c<s.length;c++)o=s[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(u)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var s=a.O(void 0,[3540],function(){return a(1869)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=s}();

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

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5662:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Le},getElement:function(){return Se}});var a=l(1594),s=l.n(a),n=l(5671),i=l(6547),r=(l(3212),l(1374)),o=l(5619),d=l(3011),c=l(5384),m=l(8347),u=l(6955),h=l(3589),b=l(942),p=l.n(b),E=function(e){return s().createElement("article",{className:p()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?s().createElement("div",{className:"slds-media__figure"},e.media):null,s().createElement("div",{className:"slds-media__body"},e.actions?s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-shrink-none"},s().createElement(u.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint",symbol:"down","aria-haspopup":"true",assistiveText:"More options",title:"More options"}))):s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-tile__detail"},e.children?e.children:s().createElement(y,null))))},y=function(e){return s().createElement("dl",{className:"slds-list_horizontal slds-wrap"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},f=(m.A,h.Sc,m.A,m.A,m.A,l(8522)),g=l(7412),v=l.n(g),w=l(806),_=l(5006),N=l(885),x=l(538);function A(e){return A="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},A(e)}function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)({}).hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},T.apply(null,arguments)}function C(e,t,l){return(t=function(e){var t=function(e){if("object"!=A(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=A(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==A(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var R=s().createContext({isActionableMode:!1});v().string,v().node;var k=function(e){var t=p()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return s().createElement("table",T({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&C({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&C({},"aria-label",e.ariaLabel)),e.children)};k.displayName="Table",k.propTypes={ariaLabel:v().string,ariaLabelledBy:v().string,children:v().node,hasCellBuffer:v().bool,hasHiddenHeader:v().bool,hasNoCellFocus:v().bool,hasNoRowHover:v().bool,isBordered:v().bool,isColBordered:v().bool,isEditable:v().bool,isFixedLayout:v().bool,isResizable:v().bool,isResponsive:v().bool,isResponsiveStacked:v().bool,isStriped:v().bool,selectionType:v().oneOf(["multiple","single"]),style:v().object,type:v().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:v().bool};var S=function(e){return s().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:v().node,isHidden:v().bool};var L=function(e){return s().createElement("tr",{className:"slds-line-height_reset"},e.children)};L.displayName="THeadTr",L.propTypes={children:v().node};var O=function(e){var t,l=(0,a.useContext)(R).isActionableMode,n=p()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return s().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection||"none"),t),className:n,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};O.displayName="ColumnTh",O.propTypes={"aria-label":v().string,children:v().node,hasFocus:v().bool,hasMenu:v().bool,isResizable:v().bool,isRightAligned:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending","none"]),style:v().object,hasWrap:v().bool,isDataTable:v().bool};var I=function(e){return s().createElement("div",{className:p()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};I.displayName="ColumnHeader",I.propTypes={columnName:v().string.isRequired,id:v().string,isAssistiveText:v().bool,isFixedCell:v().bool},I.defaultProps={columnName:"Column Name",isDataTable:v().bool};var D=function(e){var t=w.Ay.uniqueId("cell-resize-handle-");return s().createElement("div",{className:"slds-resizable"},s().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),s().createElement("span",{className:"slds-resizable__handle"},s().createElement("span",{className:"slds-resizable__divider"})))};D.displayName="ResizeControl",D.propTypes={label:v().string.isRequired,tabIndex:v().oneOf(["0","-1"])};var H=function(e){var t=(0,a.useContext)(R).isActionableMode,l=t?"0":"-1",n=function(){return s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,s().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&s().createElement(x.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return s().createElement(s().Fragment,null,e.isSortable?s().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-assistive-text"},"Sort by: "),n()):s().createElement("div",{className:"slds-th__action"},n()),e.sortDirection&&s().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&s().createElement(u.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&s().createElement(D,{label:e.columnName+" column width"||0,tabIndex:l}))};H.displayName="InteractiveColumnHeader",H.propTypes={columnName:v().string.isRequired,columnHeaderIcons:v().array,hasMenu:v().bool,isResizable:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending"])},H.defaultProps={isResizable:!0,isSortable:!0};var W=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("div",{className:"slds-th__action slds-th__action_form"},s().createElement(h.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header",isDataTable:!0})))};W.displayName="SelectAllColumnHeader",W.propTypes={checked:v().bool};var z=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth||null;return s().createElement(S,{isHidden:e.isHidden},s().createElement(L,null,e.hasErrorColumn?s().createElement(O,{style:{width:"3.75rem"}},s().createElement(I,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&s().createElement(O,{isDataTable:!e.hasSingleRowSelect||!e.isHidden,isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?s().createElement(I,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):s().createElement(W,{checked:e.selectAll})),e.columns.map(function(t,a){return s().createElement(O,{key:a,"aria-label":t,hasFocus:0===a?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null,style:{width:0===a&&e.singleColumnWidth?e.singleColumnWidth:l}},s().createElement(H,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null}))}),e.hasRowLevelActions&&s().createElement(O,{style:{width:"3.25rem"}},s().createElement(I,{columnName:"Actions",isAssistiveText:!0}))))};z.displayName="AdvancedDataTableHead",z.propTypes={columnHeaderIcons:v().array,columns:v().array.isRequired,hasErrorColumn:v().bool,hasFocus:v().bool,hasMenus:v().bool,hasNoRowSelection:v().bool,hasRowLevelActions:v().bool,hasSingleRowSelect:v().bool,isHidden:v().bool,isResizable:v().bool,isSortable:v().bool,mainColumnWidth:v().string,selectAll:v().bool,singleColumnWidth:v().string,sortDirection:v().oneOf(["ascending","descending","none"])},z.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var M=function(e){return s().createElement("tbody",null,e.children)};M.displayName="TBody",M.propTypes={children:v().node};var B=function(e){return s().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:p()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};B.displayName="TBodyTr",B.propTypes={children:v().node,isExpanded:v().bool,isSelected:v().bool,isTopAligned:v().bool,level:v().string,positionWithinLevel:v().string,numberOfItemsAtLevel:v().string,tabIndex:v().oneOf(["0","-1"])};var P=function(e){var t=(0,a.useContext)(R).isActionableMode,l=p()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()||null,className:l||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};P.displayName="Td",P.propTypes={children:v().node,"data-label":v().string,hasError:v().bool,hasFocus:v().bool,isEditable:v().bool,isEdited:v().bool,isEditing:v().bool,isErrorCell:v().bool,isLocked:v().bool,isRightAligned:v().bool,isShrunken:v().bool,style:v().object,tabIndex:v().oneOf(["0","-1"]),type:v().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:v().bool};var F=function(e){var t=(0,a.useContext)(R).isActionableMode,l=p()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("th",{className:l||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};F.displayName="RowTh",F.propTypes={children:v().node,"data-label":v().string,hasFocus:v().bool,isEditable:v().bool,tabIndex:v().oneOf(["0","-1"]),type:v().oneOf(["base","advanced","treegrid"]),isItemHovered:v().bool,hasWrap:v().bool};var j=function(e){return s().createElement(s().Fragment,null,e.hasSingleRowSelect?s().createElement(N.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):s().createElement(h.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};j.displayName="SelectRowCell",j.propTypes={checked:v().bool,hasSingleRowSelect:v().bool,index:v().number.isRequired,inputTabIndex:v().oneOf(["0","-1"])};var q=function(e){var t=e.rowName,l=(0,a.useContext)(R).isActionableMode;return s().createElement(u.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};q.displayName="RowActionsCell",q.propTypes={rowName:v().string.isRequired};var V=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:p()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),s().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};V.displayName="ErrorCell",V.propTypes={hasError:v().bool,index:v().number.isRequired};var X=function(e){var t=e.hasWrap,l=e.cellText,n=e.cellLink,i=(0,a.useContext)(R).isActionableMode;return s().createElement("div",{className:p()(t?"slds-line-clamp":"slds-truncate"),title:l},n?s().createElement("a",{href:"#",tabIndex:i?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};X.displayName="ReadOnlyCell",X.propTypes={cellLink:v().bool,cellText:v().string.isRequired,hasWrap:v().bool};var J=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?s().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):s().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),s().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:p()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&s().createElement($,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&s().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};J.displayName="EditableCell",J.propTypes={buttonText:v().string.isRequired,cellLink:v().bool,cellText:v().string.isRequired,hasError:(0,w.VY)("showEdit",v().bool),index:v().number,isLocked:v().bool,isRequired:(0,w.VY)("showEdit",v().bool),showEdit:v().bool};var $=function(e){return s().createElement(_.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},s().createElement("div",{className:p()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},s().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?s().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,s().createElement("span",{className:"slds-assistive-text"},"Company")),s().createElement("div",{className:"slds-form-element__control slds-grow"},s().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?s().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};$.displayName="EditPopover",$.propTypes={hasError:v().bool,isRequired:v().bool};var Y=l(8542),U=l(302),Q=l(3352),G=l(4042),K=l(6491),Z=l(7283),ee=function(e){return s().createElement("div",{className:p()("slds-illustration",e.large?"slds-illustration_large":"slds-illustration_small")},e.children)},te=function(e){return s().createElement("div",{className:"slds-text-longform"},e.heading&&s().createElement("h3",{className:"slds-text-heading_medium"},e.heading),e.message&&e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message," ",s().createElement("a",{href:"#",className:"slds-truncate",title:e.secondaryCTA,onClick:function(e){return e.preventDefault()}},e.secondaryCTA)),e.message&&!e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message))},le=(U.ch,U.TJ,U.Le,U.hn,U.uT,Q.o,Q.M,G.m,G.r,K.eq,K.CL,K._2,K.Ui,K.pq,Z.k5,Z.II,Z.R1,Z.yx,Z.lN,Z.is,U.ch,s().createElement("button",{className:"slds-button slds-button_neutral"},"New")),ae=s().createElement(k,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},s().createElement(S,null,s().createElement(L,null,s().createElement(O,null,s().createElement(I,{columnName:"Name"})),s().createElement(O,null,s().createElement(I,{columnName:"Company"})),s().createElement(O,null,s().createElement(I,{columnName:"Title"})),s().createElement(O,null,s().createElement(I,{columnName:"Email"})))),s().createElement(M,null,s().createElement(B,null,s().createElement(F,null,s().createElement(X,{cellLink:!0,cellText:"Amy Choi"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"Company One"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"Director of Operations"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"adam@company.com"}))))),se=s().createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),ne=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts (1)",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,null,ae),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},ie=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts (3)",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},se),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},re=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))))},oe=[{id:"default",label:"Default",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],de=[{id:"empty",label:"Empty",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null),s().createElement(d.wL,null))},{id:"empty-illustration",label:"Empty with illustration",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(ee,null,s().createElement(U.hn,null),s().createElement(te,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(Y.y$,{className:"slds-spinner_small"})))}],ce=[{id:"related-list-table",label:"With data-table",element:s().createElement(ne,null)},{id:"related-list-tiles",label:"With tiles",element:s().createElement(ie,null)},{id:"nested-cards",label:"Nested cards",element:s().createElement(re,null)},{id:"with-no-header",label:"With no header",element:s().createElement(d.Ay,null,s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,className:"slds-assistive-text"}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(d.bw,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null))},{id:"has-footer",label:"Has footer",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"This is a nested card with no styling (default)"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n      --slds-c-card-color-background: #f3f3f3;\n      --slds-c-card-radius-border: 8px;\n      --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n      --slds-c-card-spacing-block-start: 1.5rem;\n      --slds-c-card-spacing-block-end: 0.5rem;\n      --slds-c-card-spacing-inline: 1rem;\n      --slds-c-card-title-font-size: 1.5rem;\n      --slds-c-card-header-spacing-block-start: 0;\n      --slds-c-card-header-spacing-inline-start: 1.5rem;\n      --slds-c-card-header-spacing-inline-end: 1.5rem;\n      --slds-c-card-body-spacing-inline-start: 1.5rem;\n      --slds-c-card-body-spacing-inline-end: 1.5rem;\n      --slds-c-card-body-spacing-block-end: 1rem;\n      --slds-c-card-footer-spacing-block-start: 0.5rem;\n      --slds-c-card-footer-spacing-block-end: 0;\n      --slds-c-card-footer-spacing-inline-start: 1.5rem;\n      --slds-c-card-footer-spacing-inline-end: 1.5rem;\n      --slds-c-card-footer-font-size: 0.75rem;\n      --slds-c-card-footer-text-align: right;\n    ",storybookStyles:!0,element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null,"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],me=l(9623),ue=function(e){return s().createElement("div",{className:"slds-einstein-header__actions"},s().createElement(me.e2,null,s().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),s().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},he=function(e){return s().createElement("div",{className:p()("slds-grid slds-einstein-header",e.className)},e.closeButton?s().createElement(u.A,{className:p()("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,s().createElement("header",{className:p()("slds-media slds-media_center slds-has-flexi-truncate")},s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle||"Einstein"},e.hasLink?s().createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle||"Einstein",onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")):s().createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")))),s().createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&s().createElement(ue,null))},be=function(e){return s().createElement(d.Ay,null,s().createElement(he,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null,"View All"," ",s().createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},pe=s().createElement(be,null),Ee=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:s().createElement(be,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:s().createElement(be,{hasIcon:!0,hasActions:!0})}],ye=l(2537),fe=[{id:"default",label:"Default",element:s().createElement("div",{className:"slds-card-wrapper"},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))))}],ge=(ye.A,ye.A.Item,d.Ay,d.aR,d.bw,d.wL,d.Ay,d.aR,d.bw,d.wL,ye.A.Item,ye.A.Item,ye.A,ye.A.Item,d.Ay,d.aR,d.bw,d.wL,d.Ay,d.aR,d.bw,d.wL,ye.A.Item,ye.A.Item,l(9285)),ve=l(8342),we=n.XB.a,_e=n.XB.code,Ne=n.XB.em,xe=n.XB.h2,Ae=n.XB.h3,Te=n.XB.h4,Ce=n.XB.h5,Re=n.XB.p,ke=n.XB.strong,Se=function(){return(0,a.createElement)(n.Ay,{},(0,a.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),(0,a.createElement)(i.A,{exampleOnly:!0},(0,w.NO)(oe)),xe({id:"About-Cards"},"About Cards"),Re({},"To initialize a card, apply the ",_e({},"slds-card")," class to an ",_e({},"<article>")," element."),Ae({id:"Accessibility"},"Accessibility"),Re({},"Cards should use an underlying ",_e({},"<article>")," element to maintain usability for some screen reader users."),Re({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),Re({},"The card heading level should follow the DOM structure of the page. We are using ",_e({},"h2")," as the default heading level for examples, but real world use will dictate the correct level based on the surrounding elements."),Ae({id:"Mobile"},"Mobile"),(0,a.createElement)(ge.s9,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},(0,w.NO)(oe)),xe({id:"Base-Card-Structure"},"Base Card Structure"),Re({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),(0,a.createElement)(i.A,null,(0,w.NO)(oe)),Ae({id:"Header"},"Header"),Re({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),(0,a.createElement)(r.A,{title:"Cards Header"},(0,a.createElement)(i.A,null,(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Te({id:"With-no-header"},"With no header"),Re({},"The card header can be removed from the HTML to prevent the card header from displaying."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"with-no-header")),Re({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",_e({},"slds-assistive-text")," to the ",_e({},"slds-card__header")," element."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"visibly-hidden-card-header")),Te({id:"Actions-row"},"Actions row"),Re({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),Ce({id:"Single-action"},"Single action"),(0,a.createElement)(r.A,{title:"Cards Single Action"},(0,a.createElement)(i.A,null,(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,a.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),Ce({id:"Multiple-actions"},"Multiple actions"),(0,a.createElement)(r.A,{title:"Cards Multiple Actions"},(0,a.createElement)(i.A,{demoStyles:"height: 10rem;"},(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,a.createElement)(c.hu,{position:"right"})})))),Ae({id:"Body"},"Body"),Re({},"The card body accommodates any layout or design, as long as its a grouping of related information."),(0,a.createElement)(o.A,{type:"note",header:"Styling Note"},(0,a.createElement)("p",null,"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",(0,a.createElement)("code",null,"slds-card__body_inner")," class on the ",(0,a.createElement)("code",null,"slds-card__body")," element.")),Te({id:"Default-without-padding"},"Default without padding"),Re({},"For an example of when to use the default behavior, see the ",we({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"body-has-no-padding")),Te({id:"With-padding"},"With padding"),Re({},"For an example of when to use the ",_e({},"slds-card__body_inner")," class, see the ",we({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"body-has-padding")),Ae({id:"Footer"},"Footer"),Re({},"The card footer is optional and should ",Ne({},ke({},"only")),' have a "View All" link that takes a user to the object list view.'),(0,a.createElement)(o.A,{type:"a11y",header:"Accessibility Note"},(0,a.createElement)("p",null,"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.")),(0,a.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,a.createElement)("p",null,"The examples in this documentation use the ",(0,a.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",(0,a.createElement)("code",null,"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),Te({id:"With-no-footer"},"With no footer"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"has-no-footer")),Te({id:"With-a-footer"},"With a footer"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"has-footer")),xe({id:"Examples"},"Examples"),Ae({id:"Empty"},"Empty"),Re({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Te({id:"Collapsed"},"Collapsed"),(0,a.createElement)(i.A,null,(0,w.NO)(de,"empty")),Te({id:"With-Illustration"},"With Illustration"),Re({},"Alternatively, a card can be represented with no data by using an ",we({href:"/components/illustration"},"illustration")," in the card body."),(0,a.createElement)(i.A,null,(0,w.NO)(de,"empty-illustration")),Ae({id:"Loading"},"Loading"),Re({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),(0,a.createElement)(i.A,null,(0,w.NO)(de,"loading")),Ae({id:"With-a-Data-Table"},"With a Data Table"),Re({},"Placing a data table inside of an ",_e({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"related-list-table")),Ae({id:"With-Tiles"},"With Tiles"),Re({},"Placing contact tiles inside of an ",_e({},"slds-card__body")," is an example of using ",_e({},"slds-card__body_inner")," to apply additional padding to the card body content."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"related-list-tiles")),(0,a.createElement)(ge.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},(0,w.NO)(ce,"related-list-tiles")),xe({id:"Layout"},"Layout"),Ae({id:"Nested-Cards"},"Nested Cards"),Re({},"When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element."),Te({id:"No-styling"},"No styling"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"nested-no-boundary")),Te({id:"With-card-styling"},"With card styling"),Re({},"Adding ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element will give you back the card styling."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"nested-with-boundary")),Ae({id:"Wrapped-Cards"},"Wrapped Cards"),Re({},"To combine several cards into a single card look, wrap the cards using ",_e({},"slds-card-wrapper"),". Similar to the nested cards, adding ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element will give you back the card styling."),(0,a.createElement)(i.A,null,(0,w.NO)(fe)),xe({id:"Einstein-Theming"},"Einstein Theming"),Re({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),(0,a.createElement)(i.A,null,(0,w.NO)(pe)),Ae({id:"With-an-Icon"},"With an Icon"),(0,a.createElement)(i.A,null,(0,w.NO)(Ee,"einstein-with-icon")),Ae({id:"With-Actions"},"With Actions"),(0,a.createElement)(i.A,null,(0,w.NO)(Ee,"einstein-with-icon-and-actions")),(0,a.createElement)(ge.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},(0,w.NO)(Ee,"einstein-with-icon-and-actions")),xe({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,a.createElement)(ve.A,{name:"cards",type:"component"}))},Le=function(){return(0,n.Qr)(Se())}}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var l=s[e]={id:e,exports:{}};return a[e](l,l.exports,n),l.exports}n.m=a,n.amdO={},e=[],n.O=function(t,l,a,s){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],a=e[c][1],s=e[c][2];for(var r=!0,o=0;o<l.length;o++)(!1&s||i>=s)&&Object.keys(n.O).every(function(e){return n.O[e](l[o])})?l.splice(o--,1):(r=!1,s<i&&(i=s));if(r){e.splice(c--,1);var d=a();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[l,a,s]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var s=Object.create(null);n.r(s);var i={};t=t||[null,l({}),l([]),l(l)];for(var r=2&a&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},n.d(s,i),s},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=7272,function(){var e={7272:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,s,i=l[0],r=l[1],o=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(a in r)n.o(r,a)&&(n.m[a]=r[a]);if(o)var c=o(n)}for(t&&t(l);d<i.length;d++)s=i[d],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),n.nc=void 0;var i=n.O(void 0,[3540],function(){return n(5662)});i=n.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=i}();
+var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5662:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Le},getElement:function(){return Se}});var a=l(1594),s=l.n(a),n=l(5671),i=l(6547),r=(l(3212),l(1374)),o=l(5619),d=l(3011),c=l(5384),m=l(8347),u=l(6955),h=l(3589),b=l(942),p=l.n(b),E=function(e){return s().createElement("article",{className:p()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?s().createElement("div",{className:"slds-media__figure"},e.media):null,s().createElement("div",{className:"slds-media__body"},e.actions?s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-shrink-none"},s().createElement(u.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint",symbol:"down","aria-haspopup":"true",assistiveText:"More options",title:"More options"}))):s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-tile__detail"},e.children?e.children:s().createElement(y,null))))},y=function(e){return s().createElement("dl",{className:"slds-list_horizontal slds-wrap"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},f=(m.A,h.Sc,m.A,m.A,m.A,l(8522)),g=l(7412),v=l.n(g),w=l(806),_=l(5006),N=l(885),x=l(538);function A(e){return A="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},A(e)}function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)({}).hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},T.apply(null,arguments)}function C(e,t,l){return(t=function(e){var t=function(e){if("object"!=A(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=A(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==A(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var R=s().createContext({isActionableMode:!1});v().string,v().node;var k=function(e){var t=p()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return s().createElement("table",T({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&C({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&C({},"aria-label",e.ariaLabel)),e.children)};k.displayName="Table",k.propTypes={ariaLabel:v().string,ariaLabelledBy:v().string,children:v().node,hasCellBuffer:v().bool,hasHiddenHeader:v().bool,hasNoCellFocus:v().bool,hasNoRowHover:v().bool,isBordered:v().bool,isColBordered:v().bool,isEditable:v().bool,isFixedLayout:v().bool,isResizable:v().bool,isResponsive:v().bool,isResponsiveStacked:v().bool,isStriped:v().bool,selectionType:v().oneOf(["multiple","single"]),style:v().object,type:v().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:v().bool};var S=function(e){return s().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:v().node,isHidden:v().bool};var L=function(e){return s().createElement("tr",{className:"slds-line-height_reset"},e.children)};L.displayName="THeadTr",L.propTypes={children:v().node};var O=function(e){var t,l=(0,a.useContext)(R).isActionableMode,n=p()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return s().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection||"none"),t),className:n,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};O.displayName="ColumnTh",O.propTypes={"aria-label":v().string,children:v().node,hasFocus:v().bool,hasMenu:v().bool,isResizable:v().bool,isRightAligned:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending","none"]),style:v().object,hasWrap:v().bool,isDataTable:v().bool};var I=function(e){return s().createElement("div",{className:p()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};I.displayName="ColumnHeader",I.propTypes={columnName:v().string.isRequired,id:v().string,isAssistiveText:v().bool,isFixedCell:v().bool},I.defaultProps={columnName:"Column Name",isDataTable:v().bool};var D=function(e){var t=w.Ay.uniqueId("cell-resize-handle-");return s().createElement("div",{className:"slds-resizable"},s().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),s().createElement("span",{className:"slds-resizable__handle"},s().createElement("span",{className:"slds-resizable__divider"})))};D.displayName="ResizeControl",D.propTypes={label:v().string.isRequired,tabIndex:v().oneOf(["0","-1"])};var H=function(e){var t=(0,a.useContext)(R).isActionableMode,l=t?"0":"-1",n=function(){return s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,s().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&s().createElement(x.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return s().createElement(s().Fragment,null,e.isSortable?s().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-assistive-text"},"Sort by: "),n()):s().createElement("div",{className:"slds-th__action"},n()),e.sortDirection&&s().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&s().createElement(u.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&s().createElement(D,{label:e.columnName+" column width"||0,tabIndex:l}))};H.displayName="InteractiveColumnHeader",H.propTypes={columnName:v().string.isRequired,columnHeaderIcons:v().array,hasMenu:v().bool,isResizable:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending"])},H.defaultProps={isResizable:!0,isSortable:!0};var W=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("div",{className:"slds-th__action slds-th__action_form"},s().createElement(h.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header",isDataTable:!0})))};W.displayName="SelectAllColumnHeader",W.propTypes={checked:v().bool};var z=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth||null;return s().createElement(S,{isHidden:e.isHidden},s().createElement(L,null,e.hasErrorColumn?s().createElement(O,{style:{width:"3.75rem"}},s().createElement(I,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&s().createElement(O,{isDataTable:!e.hasSingleRowSelect||!e.isHidden,isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?s().createElement(I,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):s().createElement(W,{checked:e.selectAll})),e.columns.map(function(t,a){return s().createElement(O,{key:a,"aria-label":t,hasFocus:0===a?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null,style:{width:0===a&&e.singleColumnWidth?e.singleColumnWidth:l}},s().createElement(H,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null}))}),e.hasRowLevelActions&&s().createElement(O,{style:{width:"3.25rem"}},s().createElement(I,{columnName:"Actions",isAssistiveText:!0}))))};z.displayName="AdvancedDataTableHead",z.propTypes={columnHeaderIcons:v().array,columns:v().array.isRequired,hasErrorColumn:v().bool,hasFocus:v().bool,hasMenus:v().bool,hasNoRowSelection:v().bool,hasRowLevelActions:v().bool,hasSingleRowSelect:v().bool,isHidden:v().bool,isResizable:v().bool,isSortable:v().bool,mainColumnWidth:v().string,selectAll:v().bool,singleColumnWidth:v().string,sortDirection:v().oneOf(["ascending","descending","none"])},z.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var M=function(e){return s().createElement("tbody",null,e.children)};M.displayName="TBody",M.propTypes={children:v().node};var B=function(e){return s().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:p()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};B.displayName="TBodyTr",B.propTypes={children:v().node,isExpanded:v().bool,isSelected:v().bool,isTopAligned:v().bool,level:v().string,positionWithinLevel:v().string,numberOfItemsAtLevel:v().string,tabIndex:v().oneOf(["0","-1"])};var P=function(e){var t=(0,a.useContext)(R).isActionableMode,l=p()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()||null,className:l||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};P.displayName="Td",P.propTypes={children:v().node,"data-label":v().string,hasError:v().bool,hasFocus:v().bool,isEditable:v().bool,isEdited:v().bool,isEditing:v().bool,isErrorCell:v().bool,isLocked:v().bool,isRightAligned:v().bool,isShrunken:v().bool,style:v().object,tabIndex:v().oneOf(["0","-1"]),type:v().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:v().bool};var F=function(e){var t=(0,a.useContext)(R).isActionableMode,l=p()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("th",{className:l||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};F.displayName="RowTh",F.propTypes={children:v().node,"data-label":v().string,hasFocus:v().bool,isEditable:v().bool,tabIndex:v().oneOf(["0","-1"]),type:v().oneOf(["base","advanced","treegrid"]),isItemHovered:v().bool,hasWrap:v().bool};var j=function(e){return s().createElement(s().Fragment,null,e.hasSingleRowSelect?s().createElement(N.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):s().createElement(h.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};j.displayName="SelectRowCell",j.propTypes={checked:v().bool,hasSingleRowSelect:v().bool,index:v().number.isRequired,inputTabIndex:v().oneOf(["0","-1"])};var q=function(e){var t=e.rowName,l=(0,a.useContext)(R).isActionableMode;return s().createElement(u.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};q.displayName="RowActionsCell",q.propTypes={rowName:v().string.isRequired};var V=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:p()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),s().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};V.displayName="ErrorCell",V.propTypes={hasError:v().bool,index:v().number.isRequired};var X=function(e){var t=e.hasWrap,l=e.cellText,n=e.cellLink,i=(0,a.useContext)(R).isActionableMode;return s().createElement("div",{className:p()(t?"slds-line-clamp":"slds-truncate"),title:l},n?s().createElement("a",{href:"#",tabIndex:i?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};X.displayName="ReadOnlyCell",X.propTypes={cellLink:v().bool,cellText:v().string.isRequired,hasWrap:v().bool};var J=function(e){var t=(0,a.useContext)(R).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?s().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):s().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),s().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:p()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&s().createElement($,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&s().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};J.displayName="EditableCell",J.propTypes={buttonText:v().string.isRequired,cellLink:v().bool,cellText:v().string.isRequired,hasError:(0,w.VY)("showEdit",v().bool),index:v().number,isLocked:v().bool,isRequired:(0,w.VY)("showEdit",v().bool),showEdit:v().bool};var $=function(e){return s().createElement(_.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},s().createElement("div",{className:p()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},s().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?s().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,s().createElement("span",{className:"slds-assistive-text"},"Company")),s().createElement("div",{className:"slds-form-element__control slds-grow"},s().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?s().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};$.displayName="EditPopover",$.propTypes={hasError:v().bool,isRequired:v().bool};var Y=l(8542),U=l(302),Q=l(3352),G=l(4042),K=l(6491),Z=l(7283),ee=function(e){return s().createElement("div",{className:p()("slds-illustration",e.large?"slds-illustration_large":"slds-illustration_small")},e.children)},te=function(e){return s().createElement("div",{className:"slds-text-longform"},e.heading&&s().createElement("h3",{className:"slds-text-heading_medium"},e.heading),e.message&&e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message," ",s().createElement("a",{href:"#",className:"slds-truncate",title:e.secondaryCTA,onClick:function(e){return e.preventDefault()}},e.secondaryCTA)),e.message&&!e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message))},le=(U.ch,U.TJ,U.Le,U.hn,U.uT,Q.o,Q.M,G.m,G.r,K.eq,K.CL,K._2,K.Ui,K.pq,Z.k5,Z.II,Z.R1,Z.yx,Z.lN,Z.is,U.ch,s().createElement("button",{className:"slds-button slds-button_neutral"},"New")),ae=s().createElement(k,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},s().createElement(S,null,s().createElement(L,null,s().createElement(O,null,s().createElement(I,{columnName:"Name"})),s().createElement(O,null,s().createElement(I,{columnName:"Company"})),s().createElement(O,null,s().createElement(I,{columnName:"Title"})),s().createElement(O,null,s().createElement(I,{columnName:"Email"})))),s().createElement(M,null,s().createElement(B,null,s().createElement(F,null,s().createElement(X,{cellLink:!0,cellText:"Amy Choi"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"Company One"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"Director of Operations"})),s().createElement(P,{type:"advanced"},s().createElement(X,{cellText:"adam@company.com"}))))),se=s().createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(E,{actions:!0,className:"slds-card__tile",media:s().createElement(f.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),ne=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts (1)",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,null,ae),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},ie=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts (3)",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},se),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},re=function(e){return s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:le}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))))},oe=[{id:"default",label:"Default",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],de=[{id:"empty",label:"Empty",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null),s().createElement(d.wL,null))},{id:"empty-illustration",label:"Empty with illustration",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(ee,null,s().createElement(U.hn,null),s().createElement(te,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(Y.y$,{className:"slds-spinner_small"})))}],ce=[{id:"related-list-table",label:"With data-table",element:s().createElement(ne,null)},{id:"related-list-tiles",label:"With tiles",element:s().createElement(ie,null)},{id:"nested-cards",label:"Nested cards",element:s().createElement(re,null)},{id:"with-no-header",label:"With no header",element:s().createElement(d.Ay,null,s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,className:"slds-assistive-text"}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(d.bw,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null))},{id:"has-footer",label:"Has footer",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"This is a nested card with no styling (default)"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n      --slds-c-card-color-background: #f3f3f3;\n      --slds-c-card-radius-border: 8px;\n      --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n      --slds-c-card-spacing-block-start: 1.5rem;\n      --slds-c-card-spacing-block-end: 0.5rem;\n      --slds-c-card-spacing-inline: 1rem;\n      --slds-c-card-title-font-size: 1.5rem;\n      --slds-c-card-header-spacing-block-start: 0;\n      --slds-c-card-header-spacing-inline-start: 1.5rem;\n      --slds-c-card-header-spacing-inline-end: 1.5rem;\n      --slds-c-card-body-spacing-inline-start: 1.5rem;\n      --slds-c-card-body-spacing-inline-end: 1.5rem;\n      --slds-c-card-body-spacing-block-end: 1rem;\n      --slds-c-card-footer-spacing-block-start: 0.5rem;\n      --slds-c-card-footer-spacing-block-end: 0;\n      --slds-c-card-footer-spacing-inline-start: 1.5rem;\n      --slds-c-card-footer-spacing-inline-end: 1.5rem;\n      --slds-c-card-footer-font-size: 0.75rem;\n      --slds-c-card-footer-text-align: right;\n    ",storybookStyles:!0,element:s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null,"Anything can go into the card body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],me=l(9623),ue=function(e){return s().createElement("div",{className:"slds-einstein-header__actions"},s().createElement(me.e2,null,s().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),s().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},he=function(e){return s().createElement("div",{className:p()("slds-grid slds-einstein-header",e.className)},e.closeButton?s().createElement(u.A,{className:p()("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,s().createElement("header",{className:p()("slds-media slds-media_center slds-has-flexi-truncate")},s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle||"Einstein"},e.hasLink?s().createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle||"Einstein",onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")):s().createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")))),s().createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&s().createElement(ue,null))},be=function(e){return s().createElement(d.Ay,null,s().createElement(he,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),s().createElement(d.bw,{hasPadding:!0},"Card Body"),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},pe=s().createElement(be,null),Ee=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:s().createElement(be,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:s().createElement(be,{hasIcon:!0,hasActions:!0})}],ye=l(2537),fe=[{id:"default",label:"Default",element:s().createElement("div",{className:"slds-card-wrapper"},s().createElement(d.Ay,null,s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(d.Ay,{hasCardBoundary:!0},s().createElement(d.aR,{title:"Contacts",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(d.bw,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(d.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))))}],ge=(ye.A,ye.A.Item,d.Ay,d.aR,d.bw,d.wL,d.Ay,d.aR,d.bw,d.wL,ye.A.Item,ye.A.Item,ye.A,ye.A.Item,d.Ay,d.aR,d.bw,d.wL,d.Ay,d.aR,d.bw,d.wL,ye.A.Item,ye.A.Item,l(9285)),ve=l(8342),we=n.XB.a,_e=n.XB.code,Ne=n.XB.em,xe=n.XB.h2,Ae=n.XB.h3,Te=n.XB.h4,Ce=n.XB.h5,Re=n.XB.p,ke=n.XB.strong,Se=function(){return(0,a.createElement)(n.Ay,{},(0,a.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),(0,a.createElement)(i.A,{exampleOnly:!0},(0,w.NO)(oe)),xe({id:"About-Cards"},"About Cards"),Re({},"To initialize a card, apply the ",_e({},"slds-card")," class to an ",_e({},"<article>")," element."),Ae({id:"Accessibility"},"Accessibility"),Re({},"Cards should use an underlying ",_e({},"<article>")," element to maintain usability for some screen reader users."),Re({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),Re({},"The card heading level should follow the DOM structure of the page. We are using ",_e({},"h2")," as the default heading level for examples, but real world use will dictate the correct level based on the surrounding elements."),Ae({id:"Mobile"},"Mobile"),(0,a.createElement)(ge.s9,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},(0,w.NO)(oe)),xe({id:"Base-Card-Structure"},"Base Card Structure"),Re({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),(0,a.createElement)(i.A,null,(0,w.NO)(oe)),Ae({id:"Header"},"Header"),Re({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),(0,a.createElement)(r.A,{title:"Cards Header"},(0,a.createElement)(i.A,null,(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Te({id:"With-no-header"},"With no header"),Re({},"The card header can be removed from the HTML to prevent the card header from displaying."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"with-no-header")),Re({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",_e({},"slds-assistive-text")," to the ",_e({},"slds-card__header")," element."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"visibly-hidden-card-header")),Te({id:"Actions-row"},"Actions row"),Re({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),Ce({id:"Single-action"},"Single action"),(0,a.createElement)(r.A,{title:"Cards Single Action"},(0,a.createElement)(i.A,null,(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,a.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),Ce({id:"Multiple-actions"},"Multiple actions"),(0,a.createElement)(r.A,{title:"Cards Multiple Actions"},(0,a.createElement)(i.A,{demoStyles:"height: 10rem;"},(0,a.createElement)(d.Ay,null,(0,a.createElement)(d.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,a.createElement)(c.hu,{position:"right"})})))),Ae({id:"Body"},"Body"),Re({},"The card body accommodates any layout or design, as long as its a grouping of related information."),(0,a.createElement)(o.A,{type:"note",header:"Styling Note"},(0,a.createElement)("p",null,"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",(0,a.createElement)("code",null,"slds-card__body_inner")," class on the ",(0,a.createElement)("code",null,"slds-card__body")," element.")),Te({id:"Default-without-padding"},"Default without padding"),Re({},"For an example of when to use the default behavior, see the ",we({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"body-has-no-padding")),Te({id:"With-padding"},"With padding"),Re({},"For an example of when to use the ",_e({},"slds-card__body_inner")," class, see the ",we({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"body-has-padding")),Ae({id:"Footer"},"Footer"),Re({},"The card footer is optional and should ",Ne({},ke({},"only")),' have a "View All" link that takes a user to the object list view.'),(0,a.createElement)(o.A,{type:"a11y",header:"Accessibility Note"},(0,a.createElement)("p",null,"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.")),(0,a.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,a.createElement)("p",null,"The examples in this documentation use the ",(0,a.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",(0,a.createElement)("code",null,"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),Te({id:"With-no-footer"},"With no footer"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"has-no-footer")),Te({id:"With-a-footer"},"With a footer"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"has-footer")),xe({id:"Examples"},"Examples"),Ae({id:"Empty"},"Empty"),Re({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Te({id:"Collapsed"},"Collapsed"),(0,a.createElement)(i.A,null,(0,w.NO)(de,"empty")),Te({id:"With-Illustration"},"With Illustration"),Re({},"Alternatively, a card can be represented with no data by using an ",we({href:"/components/illustration"},"illustration")," in the card body."),(0,a.createElement)(i.A,null,(0,w.NO)(de,"empty-illustration")),Ae({id:"Loading"},"Loading"),Re({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),(0,a.createElement)(i.A,null,(0,w.NO)(de,"loading")),Ae({id:"With-a-Data-Table"},"With a Data Table"),Re({},"Placing a data table inside of an ",_e({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"related-list-table")),Ae({id:"With-Tiles"},"With Tiles"),Re({},"Placing contact tiles inside of an ",_e({},"slds-card__body")," is an example of using ",_e({},"slds-card__body_inner")," to apply additional padding to the card body content."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"related-list-tiles")),(0,a.createElement)(ge.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},(0,w.NO)(ce,"related-list-tiles")),xe({id:"Layout"},"Layout"),Ae({id:"Nested-Cards"},"Nested Cards"),Re({},"When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element."),Te({id:"No-styling"},"No styling"),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"nested-no-boundary")),Te({id:"With-card-styling"},"With card styling"),Re({},"Adding ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element will give you back the card styling."),(0,a.createElement)(i.A,null,(0,w.NO)(ce,"nested-with-boundary")),Ae({id:"Wrapped-Cards"},"Wrapped Cards"),Re({},"To combine several cards into a single card look, wrap the cards using ",_e({},"slds-card-wrapper"),". Similar to the nested cards, adding ",_e({},"slds-card_boundary")," to the ",_e({},"slds-card")," element will give you back the card styling."),(0,a.createElement)(i.A,null,(0,w.NO)(fe)),xe({id:"Einstein-Theming"},"Einstein Theming"),Re({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),(0,a.createElement)(i.A,null,(0,w.NO)(pe)),Ae({id:"With-an-Icon"},"With an Icon"),(0,a.createElement)(i.A,null,(0,w.NO)(Ee,"einstein-with-icon")),Ae({id:"With-Actions"},"With Actions"),(0,a.createElement)(i.A,null,(0,w.NO)(Ee,"einstein-with-icon-and-actions")),(0,a.createElement)(ge.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),(0,a.createElement)(i.A,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},(0,w.NO)(Ee,"einstein-with-icon-and-actions")),xe({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,a.createElement)(ve.A,{name:"cards",type:"component"}))},Le=function(){return(0,n.Qr)(Se())}}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var l=s[e]={id:e,exports:{}};return a[e](l,l.exports,n),l.exports}n.m=a,n.amdO={},e=[],n.O=function(t,l,a,s){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],a=e[c][1],s=e[c][2];for(var r=!0,o=0;o<l.length;o++)(!1&s||i>=s)&&Object.keys(n.O).every(function(e){return n.O[e](l[o])})?l.splice(o--,1):(r=!1,s<i&&(i=s));if(r){e.splice(c--,1);var d=a();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[l,a,s]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var s=Object.create(null);n.r(s);var i={};t=t||[null,l({}),l([]),l(l)];for(var r=2&a&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},n.d(s,i),s},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=7272,function(){var e={7272:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,s,i=l[0],r=l[1],o=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(a in r)n.o(r,a)&&(n.m[a]=r[a]);if(o)var c=o(n)}for(t&&t(l);d<i.length;d++)s=i[d],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),n.nc=void 0;var i=n.O(void 0,[3540],function(){return n(5662)});i=n.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=i}();