npm - @salesforce-ux/design-system - Versions diffs - 2.266.0-beta.3 → 2.266.0-beta.4 - Mend

@salesforce-ux/design-system 2.266.0-beta.3 → 2.266.0-beta.4

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

Files changed (975) hide show

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,a,l={4608:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Le},getElement:function(){return Ae}});var l=a(1594),n=a.n(l),s=a(5671),r=a(6547),i=(a(7675),a(1374)),o=a(5619),c=a(3011),d=a(5384),m=a(8347),u=a(6955),h=a(3589),b=a(1369),E=a.n(b),p=function(e){return n().createElement("article",{className:E()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?n().createElement("div",{className:"slds-media__figure"},e.media):null,n().createElement("div",{className:"slds-media__body"},e.actions?n().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title\|\|"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title\|\|"Title")),n().createElement("div",{className:"slds-shrink-none"},n().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"}))):n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title\|\|"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title\|\|"Title")),n().createElement("div",{className:"slds-tile__detail"},e.children?e.children:n().createElement(f,null))))},f=function(e){return n().createElement("dl",{className:"slds-list_horizontal slds-wrap"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},y=a(8522),g=a(4187),v=a.n(g),_=a(6482),w=a(5006),N=a(885),C=a(538);function x(e){return x="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},x(e)}function k(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,l)}return a}function A(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?k(Object(a),!0).forEach(function(t){L(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):k(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function L(e,t,a){return(t=function(e){var t=function(e){if("object"!=x(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=x(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==x(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var T=n().createContext({isActionableMode:!1});v().string,v().node;var R=function(e){var t=E()("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 n().createElement("table",A(A({"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&&L({},"aria-labelledby",e.ariaLabelledBy)),e.ariaLabel&&L({},"aria-label",e.ariaLabel)),e.children)};R.displayName="Table",R.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 n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:v().node,isHidden:v().bool};var O=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};O.displayName="THeadTr",O.propTypes={children:v().node};var M=function(e){var t,a=(0,l.useContext)(T).isActionableMode,s=E()({"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":a});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection\|\|"none"),t),className:s,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};M.displayName="ColumnTh",M.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 n().createElement("div",{className:E()("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 W=function(e){var t=_.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};W.displayName="ResizeControl",W.propTypes={label:v().string.isRequired,tabIndex:v().oneOf(["0","-1"])};var D=function(e){var t=(0,l.useContext)(T).isActionableMode,a=t?"0":"-1",s=function(){return n().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,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(C.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:a,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),s()):n().createElement("div",{className:"slds-th__action"},s()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().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&&n().createElement(W,{label:e.columnName+" column width"\|\|0,tabIndex:a}))};D.displayName="InteractiveColumnHeader",D.propTypes={columnName:v().string.isRequired,columnHeaderIcons:v().array,hasMenu:v().bool,isResizable:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending"])},D.defaultProps={isResizable:!0,isSortable:!0};var H=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().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})))};H.displayName="SelectAllColumnHeader",H.propTypes={checked:v().bool};var j=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",a=e.mainColumnWidth\|\|null;return n().createElement(S,{isHidden:e.isHidden},n().createElement(O,null,e.hasErrorColumn?n().createElement(M,{style:{width:"3.75rem"}},n().createElement(I,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(M,{isDataTable:!e.hasSingleRowSelect\|\|!e.isHidden,isRightAligned:!e.hasErrorColumn\|\|null,style:{width:t}},e.hasSingleRowSelect\|\|e.isHidden?n().createElement(I,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(H,{checked:e.selectAll})),e.columns.map(function(t,l){return n().createElement(M,{key:l,"aria-label":t,hasFocus:0===l?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===l?e.sortDirection:null,style:{width:0===l&&e.singleColumnWidth?e.singleColumnWidth:a}},n().createElement(D,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===l?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(M,{style:{width:"3.25rem"}},n().createElement(I,{columnName:"Actions",isAssistiveText:!0}))))};j.displayName="AdvancedDataTableHead",j.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"])},j.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var P=function(e){return n().createElement("tbody",null,e.children)};P.displayName="TBody",P.propTypes={children:v().node};var z=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:E()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};z.displayName="TBodyTr",z.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 B=function(e){var t=(0,l.useContext)(T).isActionableMode,a=E()({"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 n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()\|\|null,className:a\|\|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)};B.displayName="Td",B.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,l.useContext)(T).isActionableMode,a=E()({"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 n().createElement("th",{className:a\|\|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 V=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().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}):n().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}))};V.displayName="SelectRowCell",V.propTypes={checked:v().bool,hasSingleRowSelect:v().bool,index:v().number.isRequired,inputTabIndex:v().oneOf(["0","-1"])};var q=function(e){var t=e.rowName,a=(0,l.useContext)(T).isActionableMode;return n().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:a?"0":"-1",title:"More actions for ".concat(t)})};q.displayName="RowActionsCell",q.propTypes={rowName:v().string.isRequired};var Z=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:E()("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")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};Z.displayName="ErrorCell",Z.propTypes={hasError:v().bool,index:v().number.isRequired};var X=function(e){var t=e.hasWrap,a=e.cellText,s=e.cellLink,r=(0,l.useContext)(T).isActionableMode;return n().createElement("div",{className:E()(t?"slds-line-clamp":"slds-truncate"),title:a},s?n().createElement("a",{href:"#",tabIndex:r?"0":"-1",onClick:function(e){e.preventDefault()}},a):a)};X.displayName="ReadOnlyCell",X.propTypes={cellLink:v().bool,cellText:v().string.isRequired,hasWrap:v().bool};var $=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().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):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:E()("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&&n().createElement(J,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};$.displayName="EditableCell",$.propTypes={buttonText:v().string.isRequired,cellLink:v().bool,cellText:v().string.isRequired,hasError:(0,_.VY)("showEdit",v().bool),index:v().number,isLocked:v().bool,isRequired:(0,_.VY)("showEdit",v().bool),showEdit:v().bool};var J=function(e){return n().createElement(w.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:E()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().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?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};J.displayName="EditPopover",J.propTypes={hasError:v().bool,isRequired:v().bool};var Y=a(8542),Q=function(e){return n().createElement("svg",{className:"slds-illustration__svg",viewBox:"0 0 454 182","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},n().createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},n().createElement("g",{transform:"translate(-73.000000, -110.000000)"},n().createElement("g",null,n().createElement("g",{transform:"translate(75.000000, 240.000000)"},n().createElement("polyline",{vectorEffect:"non-scaling-stroke",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",transform:"translate(375.250000, 18.000000) scale(-1, 1) translate(-375.250000, -18.000000) ",points:"335.5 36 380 0 415 27"}),n().createElement("polyline",{vectorEffect:"non-scaling-stroke",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",transform:"translate(324.500000, 22.500000) scale(-1, 1) translate(-324.500000, -22.500000) ",points:"303 18 313.5 9 346 36"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,36.5 L450,36.5",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M406.04276,9.26543454 L413,32.7461193 L400.495829,23.8448556 L404.113561,9.30802252 C404.246938,8.772085 404.789525,8.44574518 405.325462,8.57912213 C405.669253,8.66468028 405.942114,8.9257539 406.04276,9.26543454 Z",className:"slds-illustration__fill-secondary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M311.962964,11.4391572 L318,33 L306.770218,23.1063642 L310.037036,11.4391572 C310.185948,10.9073269 310.7378,10.5969106 311.26963,10.7458231 C311.605963,10.8399963 311.868791,11.1028246 311.962964,11.4391572 Z",className:"slds-illustration__fill-secondary",transform:"translate(312.385109, 21.626882) scale(-1, 1) translate(-312.385109, -21.626882) "})),n().createElement("g",{transform:"translate(83.000000, 173.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18,27.5 L83.0004985,27.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,27.5 L8,27.5"})),n().createElement("g",{transform:"translate(274.000000, 111.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18,27.5 L83.0004985,27.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,27.5 L8,27.5"})),n().createElement("g",{transform:"translate(115.000000, 191.000000)"},n().createElement("g",{transform:"translate(148.000000, 32.000000) scale(-1, 1) translate(-148.000000, -32.000000) translate(116.000000, 0.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M25,53 C25,55.76 22.76125,58 20,58 C17.24,58 15,55.76 15,53 C15,50.24 17.24,48 20,48 C22.76125,48 25,50.24 25,53 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M8,58 C6.34130214,58 5,59.344354 5,61 C5,62.655646 6.34130214,64 8,64 C9.65717192,64 11,62.655646 11,61 C11,59.344354 9.65717192,58 8,58"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M43.2932416,0 C35.2856577,0 28.3128049,4.40586521 24.6382957,10.9184604 C22.0889739,9.11222859 18.9814709,8.03886643 15.6213524,8.03886643 C6.99160591,8.03886643 0,15.0367986 0,23.6690948 C0,32.302472 6.99160591,39.3004042 15.6213524,39.3004042 C15.8077805,39.3004042 15.9920023,39.2777047 16.1806367,39.2712191 C19.0013272,43.3344299 23.6918145,46 29.011083,46 C32.7848734,46 36.2475826,44.6596485 38.9469293,42.4296926 C40.3512074,42.7193815 41.8051261,42.8739543 43.2932416,42.8739543 C55.1275661,42.8739543 64,33.4569038 64,21.6185732 C64,9.77916158 55.1275661,0 43.2932416,0 Z"})),n().createElement("g",{transform:"translate(0.000000, 18.000000)"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M90.5057553,53.0538038 C90.5057553,53.0538038 116.215483,58.0701972 145.433002,58.0701972 C174.650521,58.0701972 204.505755,53.0538038 204.505755,53.0538038 C204.505755,53.0538038 192.222862,60.6378663 185.905056,63.0258453 C179.58725,65.4138243 166.637272,67.3671811 166.637272,67.3671811 C166.637272,67.3671811 153.865271,70.7987363 147.505755,70.9374424 C141.14624,71.0761485 132.54218,68.1108222 132.54218,68.1108222 L106.786672,63.0258453 L90.5057553,53.0538038 Z",className:"slds-illustration__fill-primary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M84.8198266,43.3368404 C84.8198266,43.3368404 99.4457512,70.425365 147.915957,70.425365 C196.386164,70.425365 214.819827,43.3368404 214.819827,43.3368404",className:"slds-illustration__stroke-primary",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M73,49.5 L88,49.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M211,49.5 L226,49.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M142.74548,0 L153.650377,2.22044605e-16 C154.478804,8.05656105e-16 155.150377,0.671572875 155.150377,1.5 L155.150377,2.98261094 C155.150377,3.11136765 155.100706,3.2351613 155.01171,3.32820944 L146.234757,12.5047677 L155.209827,12.5047677 C156.038254,12.5047677 156.709827,13.1763405 156.709827,14.0047677 L156.709827,14.4270108 C156.709827,15.2554379 156.038254,15.9270108 155.209827,15.9270108 L141.888626,15.9270108 C141.060199,15.9270108 140.388626,15.2554379 140.388626,14.4270108 L140.388626,12.8248256 C140.388626,12.696109 140.438265,12.5723507 140.527212,12.4793109 L149.20663,3.40051458 L142.74548,3.40051458 C141.917053,3.40051458 141.24548,2.7289417 141.24548,1.90051458 L141.24548,1.5 C141.24548,0.671572875 141.917053,1.52179594e-16 142.74548,0 Z",className:"slds-illustration__fill-primary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M20,81.5 L390,81.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,81.5 L12,81.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}))),n().createElement("g",{transform:"translate(175.500000, 153.000000)"},n().createElement("g",{transform:"translate(0.000000, 7.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.3444016,2.17529966 L32.8957957,84.445825 C33.0753185,85.5357082 32.3373256,86.5647651 31.2474424,86.7442879 C31.1399954,86.7619863 31.0312825,86.7708798 30.9223876,86.7708798 L2.12566435,86.7708798 C1.02109485,86.7708798 0.125664347,85.8754493 0.125664347,84.7708798 C0.125664347,84.6486417 0.136870913,84.526661 0.159143349,84.4064691 L15.4044726,2.13594377 C15.6057311,1.04986421 16.6493247,0.332574998 17.7354043,0.533833473 C18.5639901,0.687376483 19.2074411,1.34381197 19.3444016,2.17529966 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"17 0.709590879 34 94.5 -1.82254212e-12 94.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,8.09449405 C17,92.0999502 17,135.036706 17,136.904762 C17,135.036706 17,92.0999502 17,8.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,64.2334004 C24.3333333,71.7198767 28,75.6881307 28,76.1381623 C28,75.6881307 24.3333333,71.7198767 17,64.2334004 Z",strokeLinejoin:"round",transform:"translate(22.500000, 70.185781) scale(-1, 1) translate(-22.500000, -70.185781) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M8,50.2334004 C14,57.05321 17,60.6881307 17,61.1381623 C17,60.6881307 14,57.05321 8,50.2334004 Z",strokeLinejoin:"round"}))),n().createElement("g",{transform:"translate(307.500000, 135.000000)"},n().createElement("g",{transform:"translate(0.000000, 2.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29.524032,0.669921875 L55.6419593,108.305728 C55.9024257,109.379148 55.2433964,110.460477 54.1699762,110.720943 C54.0155692,110.75841 53.8572476,110.777344 53.69836,110.777344 L2.40272523,110.777344 C1.29815573,110.777344 0.402725233,109.881913 0.402725233,108.777344 C0.402725233,108.601258 0.42597945,108.425943 0.471884777,108.255946 L29.524032,0.669921875 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"29 0 56.572466 112.5 0 112.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,6.09449405 C29,103.433283 29,153.036706 29,154.904762 C29,153.036706 29,103.433283 29,6.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,74.2334004 C41,87.05321 47,93.6881307 47,94.1381623 C47,93.6881307 41,87.05321 29,74.2334004 Z",strokeLinejoin:"round",transform:"translate(38.000000, 84.185781) scale(-1, 1) translate(-38.000000, -84.185781) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M14,61.2334004 C24,72.7198767 29,78.6881307 29,79.1381623 C29,78.6881307 24,72.7198767 14,61.2334004 Z",strokeLinejoin:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,48.2334004 C36.3333333,57.05321 40,61.6881307 40,62.1381623 C40,61.6881307 36.3333333,57.05321 29,48.2334004 Z",strokeLinejoin:"round",transform:"translate(34.500000, 55.185781) scale(-1, 1) translate(-34.500000, -55.185781) "}))),n().createElement("g",{transform:"translate(347.500000, 166.000000)"},n().createElement("g",{transform:"translate(0.000000, 4.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.3444016,2.17529966 L32.8957957,84.445825 C33.0753185,85.5357082 32.3373256,86.5647651 31.2474424,86.7442879 C31.1399954,86.7619863 31.0312825,86.7708798 30.9223876,86.7708798 L2.12566435,86.7708798 C1.02109485,86.7708798 0.125664347,85.8754493 0.125664347,84.7708798 C0.125664347,84.6486417 0.136870913,84.526661 0.159143349,84.4064691 L15.4044726,2.13594377 C15.6057311,1.04986421 16.6493247,0.332574998 17.7354043,0.533833473 C18.5639901,0.687376483 19.2074411,1.34381197 19.3444016,2.17529966 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"17 0.709590879 34 91.5 -1.82254212e-12 91.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,5.09449405 C17,83.0999502 17,123.036706 17,124.904762 C17,123.036706 17,83.0999502 17,5.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,61.2334004 C24.3333333,68.7198767 28,72.6881307 28,73.1381623 C28,72.6881307 24.3333333,68.7198767 17,61.2334004 Z",strokeLinejoin:"round",transform:"translate(22.500000, 67.185781) scale(-1, 1) translate(-22.500000, -67.185781) "}))),n().createElement("g",{transform:"translate(392.000000, 184.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("g",{transform:"translate(31.713442, 25.088326) rotate(-15.000000) translate(-31.713442, -25.088326) translate(4.713442, 6.588326)"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M31.0360707,3.43528591 C31.0360707,3.43528591 40.5802283,0.671893051 42.6488424,10.6908663",transform:"translate(36.842457, 6.888440) rotate(41.000000) translate(-36.842457, -6.888440) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M40.4282002,10.1797377 C40.4282002,10.1797377 49.9723578,7.4163448 52.0409719,17.435318",transform:"translate(46.234586, 13.632892) scale(-1, 1) rotate(-41.000000) translate(-46.234586, -13.632892) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0.730284783,29.5865514 C0.730284783,29.5865514 10.2744424,26.8231586 12.3430565,36.8421318"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M12.7302848,29.5865514 C12.7302848,29.5865514 22.2744424,26.8231586 24.3430565,36.8421318",transform:"translate(18.536671, 33.039705) scale(-1, 1) translate(-18.536671, -33.039705) "})))))))},U=function(e){return n().createElement("div",{className:E()("slds-illustration",e.large?"slds-illustration_large":"slds-illustration_small")},e.children)},G=function(e){return n().createElement("div",{className:"slds-text-longform"},e.heading&&n().createElement("h3",{className:"slds-text-heading_medium"},e.heading),e.message&&e.secondaryCTA&&n().createElement("p",{className:"slds-text-body_regular"},e.message," ",n().createElement("a",{href:"#",className:"slds-truncate",title:e.secondaryCTA,onClick:function(e){return e.preventDefault()}},e.secondaryCTA)),e.message&&!e.secondaryCTA&&n().createElement("p",{className:"slds-text-body_regular"},e.message))},K=n().createElement("button",{className:"slds-button slds-button_neutral"},"New"),ee=n().createElement(R,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},n().createElement(S,null,n().createElement(O,null,n().createElement(M,null,n().createElement(I,{columnName:"Name"})),n().createElement(M,null,n().createElement(I,{columnName:"Company"})),n().createElement(M,null,n().createElement(I,{columnName:"Title"})),n().createElement(M,null,n().createElement(I,{columnName:"Email"})))),n().createElement(P,null,n().createElement(z,null,n().createElement(F,null,n().createElement(X,{cellLink:!0,cellText:"Amy Choi"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"Company One"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"Director of Operations"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"adam@company.com"}))))),te=n().createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),ae=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts (1)",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,null,ee),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))},le=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts (3)",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},te),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))},ne=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))))},se=[{id:"default",label:"Default",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],re=[{id:"empty",label:"Empty",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null),n().createElement(c.wL,null))},{id:"empty-illustration",label:"Empty with illustration",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Tasks",href:!0,symbol:"task"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(U,null,n().createElement(Q,null),n().createElement(G,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Tasks",href:!0,symbol:"task"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(Y.y$,{className:"slds-spinner_small"})))}],ie=[{id:"related-list-table",label:"With data-table",element:n().createElement(ae,null)},{id:"related-list-tiles",label:"With tiles",element:n().createElement(le,null)},{id:"nested-cards",label:"Nested cards",element:n().createElement(ne,null)},{id:"with-no-header",label:"With no header",element:n().createElement(c.Ay,null,n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,className:"slds-assistive-text"}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account"}),n().createElement(c.bw,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null))},{id:"has-footer",label:"Has footer",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"This is a nested card with no styling (default)"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().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:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null,"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],oe=a(9623),ce=function(e){return n().createElement("div",{className:"slds-einstein-header__actions"},n().createElement(oe.e2,null,n().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),n().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},de=function(e){return n().createElement("div",{className:E()("slds-grid slds-einstein-header",e.className)},e.closeButton?n().createElement(u.A,{className:E()("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,n().createElement("header",{className:E()("slds-media slds-media_center slds-has-flexi-truncate")},n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle\|\|"Einstein"},e.hasLink?n().createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle\|\|"Einstein",onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")):n().createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")))),n().createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&n().createElement(ce,null))},me=function(e){return n().createElement(c.Ay,null,n().createElement(de,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},ue=n().createElement(me,null),he=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:n().createElement(me,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:n().createElement(me,{hasIcon:!0,hasActions:!0})}],be=a(2537),Ee=[{id:"default",label:"Default",element:n().createElement("div",{className:"slds-card-wrapper"},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))))}],pe=(be.A,be.A.Item,c.Ay,c.aR,c.bw,c.wL,c.Ay,c.aR,c.bw,c.wL,be.A.Item,be.A.Item,be.A,be.A.Item,c.Ay,c.aR,c.bw,c.wL,c.Ay,c.aR,c.bw,c.wL,be.A.Item,be.A.Item,a(9285)),fe=a(6390),ye=s.XB.a,ge=s.XB.code,ve=s.XB.em,_e=s.XB.h2,we=s.XB.h3,Ne=s.XB.h4,Ce=s.XB.h5,xe=s.XB.p,ke=s.XB.strong,Ae=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),(0,l.createElement)(r.A,{exampleOnly:!0},(0,_.NO)(se)),_e({id:"About-Cards"},"About Cards"),xe({},"To initialize a card, apply the ",ge({},"slds-card")," class to an ",ge({},"<article>")," element."),we({id:"Accessibility"},"Accessibility"),xe({},"Cards should use an underlying ",ge({},"<article>")," element to maintain usability for some screen reader users."),xe({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),xe({},"The card heading level should follow the DOM structure of the page. We are using ",ge({},"h2")," as the default heading level for examples, but real world use will dictate the correct level based on the surrounding elements."),we({id:"Mobile"},"Mobile"),(0,l.createElement)(pe.s9,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},(0,_.NO)(se)),_e({id:"Base-Card-Structure"},"Base Card Structure"),xe({},"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,l.createElement)(r.A,null,(0,_.NO)(se)),we({id:"Header"},"Header"),xe({},"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,l.createElement)(i.A,{title:"Cards Header"},(0,l.createElement)(r.A,null,(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Ne({id:"With-no-header"},"With no header"),xe({},"The card header can be removed from the HTML to prevent the card header from displaying."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"with-no-header")),xe({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",ge({},"slds-assistive-text")," to the ",ge({},"slds-card__header")," element."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"visibly-hidden-card-header")),Ne({id:"Actions-row"},"Actions row"),xe({},"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,l.createElement)(i.A,{title:"Cards Single Action"},(0,l.createElement)(r.A,null,(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),Ce({id:"Multiple-actions"},"Multiple actions"),(0,l.createElement)(i.A,{title:"Cards Multiple Actions"},(0,l.createElement)(r.A,{demoStyles:"height: 10rem;"},(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,l.createElement)(d.hu,{position:"right"})})))),we({id:"Body"},"Body"),xe({},"The card body accommodates any layout or design, as long as its a grouping of related information."),(0,l.createElement)(o.A,{type:"note",header:"Styling Note"},(0,l.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,l.createElement)("code",null,"slds-card__body_inner")," class on the ",(0,l.createElement)("code",null,"slds-card__body")," element.")),Ne({id:"Default-without-padding"},"Default without padding"),xe({},"For an example of when to use the default behavior, see the ",ye({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"body-has-no-padding")),Ne({id:"With-padding"},"With padding"),xe({},"For an example of when to use the ",ge({},"slds-card__body_inner")," class, see the ",ye({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"body-has-padding")),we({id:"Footer"},"Footer"),xe({},"The card footer is optional and should ",ve({},ke({},"only")),' have a "View All" link that takes a user to the object list view.'),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Note"},(0,l.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,l.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The examples in this documentation use the ",(0,l.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",(0,l.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.")),Ne({id:"With-no-footer"},"With no footer"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"has-no-footer")),Ne({id:"With-a-footer"},"With a footer"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"has-footer")),_e({id:"Examples"},"Examples"),we({id:"Empty"},"Empty"),xe({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Ne({id:"Collapsed"},"Collapsed"),(0,l.createElement)(r.A,null,(0,_.NO)(re,"empty")),Ne({id:"With-Illustration"},"With Illustration"),xe({},"Alternatively, a card can be represented with no data by using an ",ye({href:"/components/illustration"},"illustration")," in the card body."),(0,l.createElement)(r.A,null,(0,_.NO)(re,"empty-illustration")),we({id:"Loading"},"Loading"),xe({},"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,l.createElement)(r.A,null,(0,_.NO)(re,"loading")),we({id:"With-a-Data-Table"},"With a Data Table"),xe({},"Placing a data table inside of an ",ge({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"related-list-table")),we({id:"With-Tiles"},"With Tiles"),xe({},"Placing contact tiles inside of an ",ge({},"slds-card__body")," is an example of using ",ge({},"slds-card__body_inner")," to apply additional padding to the card body content."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"related-list-tiles")),(0,l.createElement)(pe.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},(0,_.NO)(ie,"related-list-tiles")),_e({id:"Layout"},"Layout"),we({id:"Nested-Cards"},"Nested Cards"),xe({},"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 ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element."),Ne({id:"No-styling"},"No styling"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"nested-no-boundary")),Ne({id:"With-card-styling"},"With card styling"),xe({},"Adding ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"nested-with-boundary")),we({id:"Wrapped-Cards"},"Wrapped Cards"),xe({},"To combine several cards into a single card look, wrap the cards using ",ge({},"slds-card-wrapper"),". Similar to the nested cards, adding ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(r.A,null,(0,_.NO)(Ee)),_e({id:"Einstein-Theming"},"Einstein Theming"),xe({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),(0,l.createElement)(r.A,null,(0,_.NO)(ue)),we({id:"With-an-Icon"},"With an Icon"),(0,l.createElement)(r.A,null,(0,_.NO)(he,"einstein-with-icon")),we({id:"With-Actions"},"With Actions"),(0,l.createElement)(r.A,null,(0,_.NO)(he,"einstein-with-icon-and-actions")),(0,l.createElement)(pe.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},(0,_.NO)(he,"einstein-with-icon-and-actions")),_e({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,l.createElement)(fe.A,{name:"cards",type:"component"}))},Le=function(){return(0,s.Qr)(Ae())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={id:e,exports:{}};return l[e](a,a.exports,s),a.exports}s.m=l,s.amdO={},e=[],s.O=function(t,a,l,n){if(!a){var r=1/0;for(d=0;d<e.length;d++){a=e[d][0],l=e[d][1],n=e[d][2];for(var i=!0,o=0;o<a.length;o++)1&n&&!(r>=n)\|\|!Object.keys(s.O).every(function(e){return s.O[e](a[o])})?(i=!1,n<r&&(r=n)):a.splice(o--,1);if(i){e.splice(d--,1);var c=l();void 0!==c&&(t=c)}}return t}n=n\|\|0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[a,l,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},s.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var r={};t=t\|\|[null,a({}),a([]),a(a)];for(var i=2&l&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=a(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},s.d(n,r),n},s.d=function(e,t){for(var a in t)s.o(t,a)&&!s.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7272,function(){var e={7272:0};s.O.j=function(t){return 0===e[t]};var t=function(t,a){var l,n,r=a[0],i=a[1],o=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(l in i)s.o(i,l)&&(s.m[l]=i[l]);if(o)var d=o(s)}for(t&&t(a);c<r.length;c++)n=r[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),s.nc=void 0;var r=s.O(void 0,[3540],function(){return s(4608)});r=s.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=r}();
1	+ var SLDS;!function(){"use strict";var e,t,a,l={4608:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Le},getElement:function(){return Ae}});var l=a(1594),n=a.n(l),s=a(5671),r=a(6547),i=(a(7675),a(1374)),o=a(5619),c=a(3011),d=a(5384),m=a(8347),u=a(6955),h=a(3589),b=a(1369),E=a.n(b),p=function(e){return n().createElement("article",{className:E()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?n().createElement("div",{className:"slds-media__figure"},e.media):null,n().createElement("div",{className:"slds-media__body"},e.actions?n().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title\|\|"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title\|\|"Title")),n().createElement("div",{className:"slds-shrink-none"},n().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"}))):n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title\|\|"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title\|\|"Title")),n().createElement("div",{className:"slds-tile__detail"},e.children?e.children:n().createElement(f,null))))},f=function(e){return n().createElement("dl",{className:"slds-list_horizontal slds-wrap"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},y=a(8522),g=a(4187),v=a.n(g),_=a(6482),w=a(5006),N=a(885),C=a(538);function x(e){return x="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},x(e)}function k(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,l)}return a}function A(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?k(Object(a),!0).forEach(function(t){L(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):k(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function L(e,t,a){return(t=function(e){var t=function(e){if("object"!=x(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=x(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==x(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var T=n().createContext({isActionableMode:!1});v().string,v().node;var R=function(e){var t=E()("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 n().createElement("table",A(A({"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&&L({},"aria-labelledby",e.ariaLabelledBy)),e.ariaLabel&&L({},"aria-label",e.ariaLabel)),e.children)};R.displayName="Table",R.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 n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:v().node,isHidden:v().bool};var O=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};O.displayName="THeadTr",O.propTypes={children:v().node};var M=function(e){var t,a=(0,l.useContext)(T).isActionableMode,s=E()({"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":a});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection\|\|"none"),t),className:s,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};M.displayName="ColumnTh",M.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 n().createElement("div",{className:E()("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 W=function(e){var t=_.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};W.displayName="ResizeControl",W.propTypes={label:v().string.isRequired,tabIndex:v().oneOf(["0","-1"])};var D=function(e){var t=(0,l.useContext)(T).isActionableMode,a=t?"0":"-1",s=function(){return n().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,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(C.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:a,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),s()):n().createElement("div",{className:"slds-th__action"},s()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().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&&n().createElement(W,{label:e.columnName+" column width"\|\|0,tabIndex:a}))};D.displayName="InteractiveColumnHeader",D.propTypes={columnName:v().string.isRequired,columnHeaderIcons:v().array,hasMenu:v().bool,isResizable:v().bool,isSortable:v().bool,sortDirection:v().oneOf(["ascending","descending"])},D.defaultProps={isResizable:!0,isSortable:!0};var H=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().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})))};H.displayName="SelectAllColumnHeader",H.propTypes={checked:v().bool};var j=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",a=e.mainColumnWidth\|\|null;return n().createElement(S,{isHidden:e.isHidden},n().createElement(O,null,e.hasErrorColumn?n().createElement(M,{style:{width:"3.75rem"}},n().createElement(I,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(M,{isDataTable:!e.hasSingleRowSelect\|\|!e.isHidden,isRightAligned:!e.hasErrorColumn\|\|null,style:{width:t}},e.hasSingleRowSelect\|\|e.isHidden?n().createElement(I,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(H,{checked:e.selectAll})),e.columns.map(function(t,l){return n().createElement(M,{key:l,"aria-label":t,hasFocus:0===l?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===l?e.sortDirection:null,style:{width:0===l&&e.singleColumnWidth?e.singleColumnWidth:a}},n().createElement(D,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===l?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(M,{style:{width:"3.25rem"}},n().createElement(I,{columnName:"Actions",isAssistiveText:!0}))))};j.displayName="AdvancedDataTableHead",j.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"])},j.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var P=function(e){return n().createElement("tbody",null,e.children)};P.displayName="TBody",P.propTypes={children:v().node};var z=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:E()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};z.displayName="TBodyTr",z.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 B=function(e){var t=(0,l.useContext)(T).isActionableMode,a=E()({"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 n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()\|\|null,className:a\|\|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)};B.displayName="Td",B.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,l.useContext)(T).isActionableMode,a=E()({"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 n().createElement("th",{className:a\|\|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 V=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().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}):n().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}))};V.displayName="SelectRowCell",V.propTypes={checked:v().bool,hasSingleRowSelect:v().bool,index:v().number.isRequired,inputTabIndex:v().oneOf(["0","-1"])};var q=function(e){var t=e.rowName,a=(0,l.useContext)(T).isActionableMode;return n().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:a?"0":"-1",title:"More actions for ".concat(t)})};q.displayName="RowActionsCell",q.propTypes={rowName:v().string.isRequired};var Z=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:E()("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")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};Z.displayName="ErrorCell",Z.propTypes={hasError:v().bool,index:v().number.isRequired};var X=function(e){var t=e.hasWrap,a=e.cellText,s=e.cellLink,r=(0,l.useContext)(T).isActionableMode;return n().createElement("div",{className:E()(t?"slds-line-clamp":"slds-truncate"),title:a},s?n().createElement("a",{href:"#",tabIndex:r?"0":"-1",onClick:function(e){e.preventDefault()}},a):a)};X.displayName="ReadOnlyCell",X.propTypes={cellLink:v().bool,cellText:v().string.isRequired,hasWrap:v().bool};var $=function(e){var t=(0,l.useContext)(T).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().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):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:E()("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&&n().createElement(J,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};$.displayName="EditableCell",$.propTypes={buttonText:v().string.isRequired,cellLink:v().bool,cellText:v().string.isRequired,hasError:(0,_.VY)("showEdit",v().bool),index:v().number,isLocked:v().bool,isRequired:(0,_.VY)("showEdit",v().bool),showEdit:v().bool};var J=function(e){return n().createElement(w.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:E()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().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?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};J.displayName="EditPopover",J.propTypes={hasError:v().bool,isRequired:v().bool};var Y=a(8542),Q=function(e){return n().createElement("svg",{className:"slds-illustration__svg",viewBox:"0 0 454 182","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},n().createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},n().createElement("g",{transform:"translate(-73.000000, -110.000000)"},n().createElement("g",null,n().createElement("g",{transform:"translate(75.000000, 240.000000)"},n().createElement("polyline",{vectorEffect:"non-scaling-stroke",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",transform:"translate(375.250000, 18.000000) scale(-1, 1) translate(-375.250000, -18.000000) ",points:"335.5 36 380 0 415 27"}),n().createElement("polyline",{vectorEffect:"non-scaling-stroke",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",transform:"translate(324.500000, 22.500000) scale(-1, 1) translate(-324.500000, -22.500000) ",points:"303 18 313.5 9 346 36"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,36.5 L450,36.5",className:"slds-illustration__stroke-secondary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M406.04276,9.26543454 L413,32.7461193 L400.495829,23.8448556 L404.113561,9.30802252 C404.246938,8.772085 404.789525,8.44574518 405.325462,8.57912213 C405.669253,8.66468028 405.942114,8.9257539 406.04276,9.26543454 Z",className:"slds-illustration__fill-secondary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M311.962964,11.4391572 L318,33 L306.770218,23.1063642 L310.037036,11.4391572 C310.185948,10.9073269 310.7378,10.5969106 311.26963,10.7458231 C311.605963,10.8399963 311.868791,11.1028246 311.962964,11.4391572 Z",className:"slds-illustration__fill-secondary",transform:"translate(312.385109, 21.626882) scale(-1, 1) translate(-312.385109, -21.626882) "})),n().createElement("g",{transform:"translate(83.000000, 173.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18,27.5 L83.0004985,27.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,27.5 L8,27.5"})),n().createElement("g",{transform:"translate(274.000000, 111.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18,27.5 L83.0004985,27.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,27.5 L8,27.5"})),n().createElement("g",{transform:"translate(115.000000, 191.000000)"},n().createElement("g",{transform:"translate(148.000000, 32.000000) scale(-1, 1) translate(-148.000000, -32.000000) translate(116.000000, 0.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M25,53 C25,55.76 22.76125,58 20,58 C17.24,58 15,55.76 15,53 C15,50.24 17.24,48 20,48 C22.76125,48 25,50.24 25,53 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M8,58 C6.34130214,58 5,59.344354 5,61 C5,62.655646 6.34130214,64 8,64 C9.65717192,64 11,62.655646 11,61 C11,59.344354 9.65717192,58 8,58"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M43.2932416,0 C35.2856577,0 28.3128049,4.40586521 24.6382957,10.9184604 C22.0889739,9.11222859 18.9814709,8.03886643 15.6213524,8.03886643 C6.99160591,8.03886643 0,15.0367986 0,23.6690948 C0,32.302472 6.99160591,39.3004042 15.6213524,39.3004042 C15.8077805,39.3004042 15.9920023,39.2777047 16.1806367,39.2712191 C19.0013272,43.3344299 23.6918145,46 29.011083,46 C32.7848734,46 36.2475826,44.6596485 38.9469293,42.4296926 C40.3512074,42.7193815 41.8051261,42.8739543 43.2932416,42.8739543 C55.1275661,42.8739543 64,33.4569038 64,21.6185732 C64,9.77916158 55.1275661,0 43.2932416,0 Z"})),n().createElement("g",{transform:"translate(0.000000, 18.000000)"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M90.5057553,53.0538038 C90.5057553,53.0538038 116.215483,58.0701972 145.433002,58.0701972 C174.650521,58.0701972 204.505755,53.0538038 204.505755,53.0538038 C204.505755,53.0538038 192.222862,60.6378663 185.905056,63.0258453 C179.58725,65.4138243 166.637272,67.3671811 166.637272,67.3671811 C166.637272,67.3671811 153.865271,70.7987363 147.505755,70.9374424 C141.14624,71.0761485 132.54218,68.1108222 132.54218,68.1108222 L106.786672,63.0258453 L90.5057553,53.0538038 Z",className:"slds-illustration__fill-primary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M84.8198266,43.3368404 C84.8198266,43.3368404 99.4457512,70.425365 147.915957,70.425365 C196.386164,70.425365 214.819827,43.3368404 214.819827,43.3368404",className:"slds-illustration__stroke-primary",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M73,49.5 L88,49.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M211,49.5 L226,49.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M142.74548,0 L153.650377,2.22044605e-16 C154.478804,8.05656105e-16 155.150377,0.671572875 155.150377,1.5 L155.150377,2.98261094 C155.150377,3.11136765 155.100706,3.2351613 155.01171,3.32820944 L146.234757,12.5047677 L155.209827,12.5047677 C156.038254,12.5047677 156.709827,13.1763405 156.709827,14.0047677 L156.709827,14.4270108 C156.709827,15.2554379 156.038254,15.9270108 155.209827,15.9270108 L141.888626,15.9270108 C141.060199,15.9270108 140.388626,15.2554379 140.388626,14.4270108 L140.388626,12.8248256 C140.388626,12.696109 140.438265,12.5723507 140.527212,12.4793109 L149.20663,3.40051458 L142.74548,3.40051458 C141.917053,3.40051458 141.24548,2.7289417 141.24548,1.90051458 L141.24548,1.5 C141.24548,0.671572875 141.917053,1.52179594e-16 142.74548,0 Z",className:"slds-illustration__fill-primary"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M20,81.5 L390,81.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0,81.5 L12,81.5",className:"slds-illustration__stroke-primary",strokeWidth:"3",strokeLinecap:"round"}))),n().createElement("g",{transform:"translate(175.500000, 153.000000)"},n().createElement("g",{transform:"translate(0.000000, 7.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.3444016,2.17529966 L32.8957957,84.445825 C33.0753185,85.5357082 32.3373256,86.5647651 31.2474424,86.7442879 C31.1399954,86.7619863 31.0312825,86.7708798 30.9223876,86.7708798 L2.12566435,86.7708798 C1.02109485,86.7708798 0.125664347,85.8754493 0.125664347,84.7708798 C0.125664347,84.6486417 0.136870913,84.526661 0.159143349,84.4064691 L15.4044726,2.13594377 C15.6057311,1.04986421 16.6493247,0.332574998 17.7354043,0.533833473 C18.5639901,0.687376483 19.2074411,1.34381197 19.3444016,2.17529966 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"17 0.709590879 34 94.5 -1.82254212e-12 94.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,8.09449405 C17,92.0999502 17,135.036706 17,136.904762 C17,135.036706 17,92.0999502 17,8.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,64.2334004 C24.3333333,71.7198767 28,75.6881307 28,76.1381623 C28,75.6881307 24.3333333,71.7198767 17,64.2334004 Z",strokeLinejoin:"round",transform:"translate(22.500000, 70.185781) scale(-1, 1) translate(-22.500000, -70.185781) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M8,50.2334004 C14,57.05321 17,60.6881307 17,61.1381623 C17,60.6881307 14,57.05321 8,50.2334004 Z",strokeLinejoin:"round"}))),n().createElement("g",{transform:"translate(307.500000, 135.000000)"},n().createElement("g",{transform:"translate(0.000000, 2.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29.524032,0.669921875 L55.6419593,108.305728 C55.9024257,109.379148 55.2433964,110.460477 54.1699762,110.720943 C54.0155692,110.75841 53.8572476,110.777344 53.69836,110.777344 L2.40272523,110.777344 C1.29815573,110.777344 0.402725233,109.881913 0.402725233,108.777344 C0.402725233,108.601258 0.42597945,108.425943 0.471884777,108.255946 L29.524032,0.669921875 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"29 0 56.572466 112.5 0 112.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,6.09449405 C29,103.433283 29,153.036706 29,154.904762 C29,153.036706 29,103.433283 29,6.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,74.2334004 C41,87.05321 47,93.6881307 47,94.1381623 C47,93.6881307 41,87.05321 29,74.2334004 Z",strokeLinejoin:"round",transform:"translate(38.000000, 84.185781) scale(-1, 1) translate(-38.000000, -84.185781) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M14,61.2334004 C24,72.7198767 29,78.6881307 29,79.1381623 C29,78.6881307 24,72.7198767 14,61.2334004 Z",strokeLinejoin:"round"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M29,48.2334004 C36.3333333,57.05321 40,61.6881307 40,62.1381623 C40,61.6881307 36.3333333,57.05321 29,48.2334004 Z",strokeLinejoin:"round",transform:"translate(34.500000, 55.185781) scale(-1, 1) translate(-34.500000, -55.185781) "}))),n().createElement("g",{transform:"translate(347.500000, 166.000000)"},n().createElement("g",{transform:"translate(0.000000, 4.000000)",className:"slds-illustration__fill-secondary"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.3444016,2.17529966 L32.8957957,84.445825 C33.0753185,85.5357082 32.3373256,86.5647651 31.2474424,86.7442879 C31.1399954,86.7619863 31.0312825,86.7708798 30.9223876,86.7708798 L2.12566435,86.7708798 C1.02109485,86.7708798 0.125664347,85.8754493 0.125664347,84.7708798 C0.125664347,84.6486417 0.136870913,84.526661 0.159143349,84.4064691 L15.4044726,2.13594377 C15.6057311,1.04986421 16.6493247,0.332574998 17.7354043,0.533833473 C18.5639901,0.687376483 19.2074411,1.34381197 19.3444016,2.17529966 Z"})),n().createElement("g",{className:"slds-illustration__stroke-primary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("polygon",{vectorEffect:"non-scaling-stroke",strokeLinejoin:"round",points:"17 0.709590879 34 91.5 -1.82254212e-12 91.5"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,5.09449405 C17,83.0999502 17,123.036706 17,124.904762 C17,123.036706 17,83.0999502 17,5.09449405 Z"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17,61.2334004 C24.3333333,68.7198767 28,72.6881307 28,73.1381623 C28,72.6881307 24.3333333,68.7198767 17,61.2334004 Z",strokeLinejoin:"round",transform:"translate(22.500000, 67.185781) scale(-1, 1) translate(-22.500000, -67.185781) "}))),n().createElement("g",{transform:"translate(392.000000, 184.000000)",className:"slds-illustration__stroke-secondary",strokeLinecap:"round",strokeWidth:"3"},n().createElement("g",{transform:"translate(31.713442, 25.088326) rotate(-15.000000) translate(-31.713442, -25.088326) translate(4.713442, 6.588326)"},n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M31.0360707,3.43528591 C31.0360707,3.43528591 40.5802283,0.671893051 42.6488424,10.6908663",transform:"translate(36.842457, 6.888440) rotate(41.000000) translate(-36.842457, -6.888440) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M40.4282002,10.1797377 C40.4282002,10.1797377 49.9723578,7.4163448 52.0409719,17.435318",transform:"translate(46.234586, 13.632892) scale(-1, 1) rotate(-41.000000) translate(-46.234586, -13.632892) "}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M0.730284783,29.5865514 C0.730284783,29.5865514 10.2744424,26.8231586 12.3430565,36.8421318"}),n().createElement("path",{vectorEffect:"non-scaling-stroke",d:"M12.7302848,29.5865514 C12.7302848,29.5865514 22.2744424,26.8231586 24.3430565,36.8421318",transform:"translate(18.536671, 33.039705) scale(-1, 1) translate(-18.536671, -33.039705) "})))))))},U=function(e){return n().createElement("div",{className:E()("slds-illustration",e.large?"slds-illustration_large":"slds-illustration_small")},e.children)},G=function(e){return n().createElement("div",{className:"slds-text-longform"},e.heading&&n().createElement("h3",{className:"slds-text-heading_medium"},e.heading),e.message&&e.secondaryCTA&&n().createElement("p",{className:"slds-text-body_regular"},e.message," ",n().createElement("a",{href:"#",className:"slds-truncate",title:e.secondaryCTA,onClick:function(e){return e.preventDefault()}},e.secondaryCTA)),e.message&&!e.secondaryCTA&&n().createElement("p",{className:"slds-text-body_regular"},e.message))},K=n().createElement("button",{className:"slds-button slds-button_neutral"},"New"),ee=n().createElement(R,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},n().createElement(S,null,n().createElement(O,null,n().createElement(M,null,n().createElement(I,{columnName:"Name"})),n().createElement(M,null,n().createElement(I,{columnName:"Company"})),n().createElement(M,null,n().createElement(I,{columnName:"Title"})),n().createElement(M,null,n().createElement(I,{columnName:"Email"})))),n().createElement(P,null,n().createElement(z,null,n().createElement(F,null,n().createElement(X,{cellLink:!0,cellText:"Amy Choi"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"Company One"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"Director of Operations"})),n().createElement(B,{type:"advanced"},n().createElement(X,{cellText:"adam@company.com"}))))),te=n().createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n().createElement(p,{actions:!0,className:"slds-card__tile",media:n().createElement(y.b$,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),ae=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts (1)",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,null,ee),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))},le=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts (3)",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},te),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))},ne=function(e){return n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:K}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts")))))},se=[{id:"default",label:"Default",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],re=[{id:"empty",label:"Empty",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null),n().createElement(c.wL,null))},{id:"empty-illustration",label:"Empty with illustration",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Tasks",href:!0,symbol:"task"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(U,null,n().createElement(Q,null),n().createElement(G,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Tasks",href:!0,symbol:"task"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(Y.y$,{className:"slds-spinner_small"})))}],ie=[{id:"related-list-table",label:"With data-table",element:n().createElement(ae,null)},{id:"related-list-tiles",label:"With tiles",element:n().createElement(le,null)},{id:"nested-cards",label:"Nested cards",element:n().createElement(ne,null)},{id:"with-no-header",label:"With no header",element:n().createElement(c.Ay,null,n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,className:"slds-assistive-text"}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account"}),n().createElement(c.bw,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null))},{id:"has-footer",label:"Has footer",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"This is a nested card with no styling (default)"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Card Header",href:!0,symbol:"account"}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().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:n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Accounts",href:!0,symbol:"account",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null,"Anything can go into the card body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],oe=a(9623),ce=function(e){return n().createElement("div",{className:"slds-einstein-header__actions"},n().createElement(oe.e2,null,n().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),n().createElement(u.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},de=function(e){return n().createElement("div",{className:E()("slds-grid slds-einstein-header",e.className)},e.closeButton?n().createElement(u.A,{className:E()("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,n().createElement("header",{className:E()("slds-media slds-media_center slds-has-flexi-truncate")},n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle\|\|"Einstein"},e.hasLink?n().createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle\|\|"Einstein",onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")):n().createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")))),n().createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&n().createElement(ce,null))},me=function(e){return n().createElement(c.Ay,null,n().createElement(de,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),n().createElement(c.bw,{hasPadding:!0},"Card Body"),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},ue=n().createElement(me,null),he=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:n().createElement(me,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:n().createElement(me,{hasIcon:!0,hasActions:!0})}],be=a(2537),Ee=[{id:"default",label:"Default",element:n().createElement("div",{className:"slds-card-wrapper"},n().createElement(c.Ay,null,n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))),n().createElement(c.Ay,{hasCardBoundary:!0},n().createElement(c.aR,{title:"Contacts",href:!0,symbol:"contact",action:n().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n().createElement(c.bw,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n().createElement(c.wL,null,"View All ",n().createElement("span",{className:"slds-assistive-text"},"Contacts"))))}],pe=(be.A,be.A.Item,c.Ay,c.aR,c.bw,c.wL,c.Ay,c.aR,c.bw,c.wL,be.A.Item,be.A.Item,be.A,be.A.Item,c.Ay,c.aR,c.bw,c.wL,c.Ay,c.aR,c.bw,c.wL,be.A.Item,be.A.Item,a(9285)),fe=a(6390),ye=s.XB.a,ge=s.XB.code,ve=s.XB.em,_e=s.XB.h2,we=s.XB.h3,Ne=s.XB.h4,Ce=s.XB.h5,xe=s.XB.p,ke=s.XB.strong,Ae=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),(0,l.createElement)(r.A,{exampleOnly:!0},(0,_.NO)(se)),_e({id:"About-Cards"},"About Cards"),xe({},"To initialize a card, apply the ",ge({},"slds-card")," class to an ",ge({},"<article>")," element."),we({id:"Accessibility"},"Accessibility"),xe({},"Cards should use an underlying ",ge({},"<article>")," element to maintain usability for some screen reader users."),xe({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),xe({},"The card heading level should follow the DOM structure of the page. We are using ",ge({},"h2")," as the default heading level for examples, but real world use will dictate the correct level based on the surrounding elements."),we({id:"Mobile"},"Mobile"),(0,l.createElement)(pe.s9,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},(0,_.NO)(se)),_e({id:"Base-Card-Structure"},"Base Card Structure"),xe({},"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,l.createElement)(r.A,null,(0,_.NO)(se)),we({id:"Header"},"Header"),xe({},"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,l.createElement)(i.A,{title:"Cards Header"},(0,l.createElement)(r.A,null,(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Ne({id:"With-no-header"},"With no header"),xe({},"The card header can be removed from the HTML to prevent the card header from displaying."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"with-no-header")),xe({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",ge({},"slds-assistive-text")," to the ",ge({},"slds-card__header")," element."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"visibly-hidden-card-header")),Ne({id:"Actions-row"},"Actions row"),xe({},"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,l.createElement)(i.A,{title:"Cards Single Action"},(0,l.createElement)(r.A,null,(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),Ce({id:"Multiple-actions"},"Multiple actions"),(0,l.createElement)(i.A,{title:"Cards Multiple Actions"},(0,l.createElement)(r.A,{demoStyles:"height: 10rem;"},(0,l.createElement)(c.Ay,null,(0,l.createElement)(c.aR,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:(0,l.createElement)(d.hu,{position:"right"})})))),we({id:"Body"},"Body"),xe({},"The card body accommodates any layout or design, as long as its a grouping of related information."),(0,l.createElement)(o.A,{type:"note",header:"Styling Note"},(0,l.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,l.createElement)("code",null,"slds-card__body_inner")," class on the ",(0,l.createElement)("code",null,"slds-card__body")," element.")),Ne({id:"Default-without-padding"},"Default without padding"),xe({},"For an example of when to use the default behavior, see the ",ye({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"body-has-no-padding")),Ne({id:"With-padding"},"With padding"),xe({},"For an example of when to use the ",ge({},"slds-card__body_inner")," class, see the ",ye({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"body-has-padding")),we({id:"Footer"},"Footer"),xe({},"The card footer is optional and should ",ve({},ke({},"only")),' have a "View All" link that takes a user to the object list view.'),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Note"},(0,l.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,l.createElement)(o.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The examples in this documentation use the ",(0,l.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",(0,l.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.")),Ne({id:"With-no-footer"},"With no footer"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"has-no-footer")),Ne({id:"With-a-footer"},"With a footer"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"has-footer")),_e({id:"Examples"},"Examples"),we({id:"Empty"},"Empty"),xe({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Ne({id:"Collapsed"},"Collapsed"),(0,l.createElement)(r.A,null,(0,_.NO)(re,"empty")),Ne({id:"With-Illustration"},"With Illustration"),xe({},"Alternatively, a card can be represented with no data by using an ",ye({href:"/components/illustration"},"illustration")," in the card body."),(0,l.createElement)(r.A,null,(0,_.NO)(re,"empty-illustration")),we({id:"Loading"},"Loading"),xe({},"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,l.createElement)(r.A,null,(0,_.NO)(re,"loading")),we({id:"With-a-Data-Table"},"With a Data Table"),xe({},"Placing a data table inside of an ",ge({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"related-list-table")),we({id:"With-Tiles"},"With Tiles"),xe({},"Placing contact tiles inside of an ",ge({},"slds-card__body")," is an example of using ",ge({},"slds-card__body_inner")," to apply additional padding to the card body content."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"related-list-tiles")),(0,l.createElement)(pe.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},(0,_.NO)(ie,"related-list-tiles")),_e({id:"Layout"},"Layout"),we({id:"Nested-Cards"},"Nested Cards"),xe({},"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 ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element."),Ne({id:"No-styling"},"No styling"),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"nested-no-boundary")),Ne({id:"With-card-styling"},"With card styling"),xe({},"Adding ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(r.A,null,(0,_.NO)(ie,"nested-with-boundary")),we({id:"Wrapped-Cards"},"Wrapped Cards"),xe({},"To combine several cards into a single card look, wrap the cards using ",ge({},"slds-card-wrapper"),". Similar to the nested cards, adding ",ge({},"slds-card_boundary")," to the ",ge({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(r.A,null,(0,_.NO)(Ee)),_e({id:"Einstein-Theming"},"Einstein Theming"),xe({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),(0,l.createElement)(r.A,null,(0,_.NO)(ue)),we({id:"With-an-Icon"},"With an Icon"),(0,l.createElement)(r.A,null,(0,_.NO)(he,"einstein-with-icon")),we({id:"With-Actions"},"With Actions"),(0,l.createElement)(r.A,null,(0,_.NO)(he,"einstein-with-icon-and-actions")),(0,l.createElement)(pe.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},(0,_.NO)(he,"einstein-with-icon-and-actions")),_e({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,l.createElement)(fe.A,{name:"cards",type:"component"}))},Le=function(){return(0,s.Qr)(Ae())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={id:e,exports:{}};return l[e](a,a.exports,s),a.exports}s.m=l,s.amdO={},e=[],s.O=function(t,a,l){if(!a){for(var n=0;n<e.length;n++){a=e[n][0],l=e[n][1];for(var r=!0,i=0;i<a.length;i++)s.O.j(a[i])?a.splice(i--,1):r=!1;if(r){e.splice(n--,1);var o=l();void 0!==o&&(t=o)}}return t}e.push([a,l])},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},s.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var r={};t=t\|\|[null,a({}),a([]),a(a)];for(var i=2&l&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=a(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},s.d(n,r),n},s.d=function(e,t){for(var a in t)s.o(t,a)&&!s.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7272,function(){var e={7272:0};s.O.j=function(t){return 0===e[t]};var t=function(t,a){var l,n,r=a[0],i=a[1],o=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(l in i)s.o(i,l)&&(s.m[l]=i[l]);if(o)var d=o(s)}for(t&&t(a);c<r.length;c++)n=r[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),s.nc=void 0;var r=s.O(void 0,[3540],function(){return s(4608)});r=s.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=r}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,a,n={3265:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return D},getElement:function(){return I}});var n=a(1594),r=a.n(n),i=a(5671),o=a(6547),l=a(7675),s=a(5619),c=a(1374),u=a(6955),d=a(1369),p=a.n(d),f=a(6333),b=a.n(f);function m(e){return m="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},m(e)}function h(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,v(n.key),n)}}function v(e){var t=function(e){if("object"!=m(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=m(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==m(t)?t:t+""}function y(e,t){return y=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},y(e,t)}function _(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(_=function(){return!!e})()}function E(e){return E=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},E(e)}var g=function(e){return r().createElement("li",{className:"slds-carousel__indicator",role:"presentation"},r().createElement("a",{id:e.id,className:p()("slds-carousel__indicator-action",e.isActive&&"slds-is-active",e.className),href:"#",role:"tab",tabIndex:e.isActive?"0":"-1","aria-selected":e.isActive?"true":"false","aria-controls":e.contentId,title:e.title,onClick:function(e){return e.preventDefault()}},r().createElement("span",{className:"slds-assistive-text"},e.title)))},w=function(e){return r().createElement("div",{id:e.id,className:p()("slds-carousel__panel",e.className),role:"tabpanel",hidden:!e.isActive,"aria-labelledby":e.indicatorId},r().createElement("a",{href:"#",className:"slds-carousel__panel-action slds-text-link_reset",tabIndex:e.isActive?"0":"-1",onClick:function(e){return e.preventDefault()}},r().createElement("div",{className:"slds-carousel__image"},r().createElement("img",{src:e.src,alt:e.title})),r().createElement("div",{className:"slds-carousel__content"},r().createElement("h2",{className:"slds-carousel__content-title"},e.title),r().createElement("p",null,e.description))))},A=function(e){return r().createElement("span",{className:"slds-carousel__autoplay"},r().createElement(u.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:e.stop?"right":"pause","aria-controls":e["aria-controls"],"aria-pressed":e.stop,disabled:e.disabled,title:"Stop auto-play",assistiveText:"Stop auto-play"}))},x=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,a){return t=E(t),function(e,t){if(t&&("object"==m(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,_()?Reflect.construct(t,a\|\|[],E(e).constructor):t.apply(e,a))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&y(e,t)}(t,e),a=t,(n=[{key:"render",value:function(){var e=b()("content-id-"),t=b()("content-id-"),a=b()("content-id-"),n=b()("indicator-id-"),i=b()("indicator-id-"),o=b()("indicator-id-");return r().createElement("div",{className:p()("slds-carousel",this.props.className)},r().createElement("div",{className:"slds-carousel__stage"},this.props.autoPlay&&r().createElement(A,{stop:"stop"===this.props.autoPlay}),r().createElement("div",{className:"slds-carousel__panels",style:{transform:"translateX(-".concat(100*(this.props.panelActive-3),"%)")}},r().createElement(w,{isActive:"1"===this.props.panelActive,id:e,indicatorId:n,title:"Visit App Exchange",description:"Extend Salesforce with the #1 business marketplace.",src:"/assets/images/carousel/carousel-01.jpg"}),r().createElement(w,{isActive:"2"===this.props.panelActive,id:t,indicatorId:i,title:"Click to Customize",description:"Use the Object Manager to add fields, build layouts, and more.",src:"/assets/images/carousel/carousel-02.jpg"}),r().createElement(w,{isActive:"3"===this.props.panelActive,id:a,indicatorId:o,title:"Download SalesforceA",description:"Get the mobile app that's just for Salesforce admins.",src:"/assets/images/carousel/carousel-03.jpg"})),r().createElement("ul",{className:"slds-carousel__indicators",role:"tablist"},r().createElement(g,{isActive:"1"===this.props.panelActive,id:n,contentId:e,title:"Visit App Exchange tab"}),r().createElement(g,{isActive:"2"===this.props.panelActive,id:i,contentId:t,title:"Click to Customize tab"}),r().createElement(g,{isActive:"3"===this.props.panelActive,id:o,contentId:a,title:"Download SalesforceA tab"}))))}}])&&h(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component),S=x,O=i.XB.code,N=i.XB.h2,j=i.XB.h3,P=i.XB.h4,k=i.XB.li,C=i.XB.p,T=i.XB.ul,I=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A carousel allows multiple pieces of featured content to occupy an allocated amount of space."),(0,n.createElement)(o.A,{exampleOnly:!0,demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"2",autoPlay:!0})),N({id:"About-Carousel"},"About Carousel"),C({},"A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time."),j({id:"Accessibility"},"Accessibility"),C({},"A Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:"),T({},k({},"The tab list, which should have ",O({},'role="tablist"')),k({},"The tabs in that list, which should each be an ",O({},'<a role="tab">')," anchor wrapped in a ",O({},'<li role="presentation">')," list item"),k({},"The tab panels, which display each tab’s content and should each have ",O({},'role="tabpanel"'))),P({id:"Markup"},"Markup"),T({},k({},"Selected tab’s anchor has ",O({},'aria-selected="true"'),", all other tabs’ anchors have ",O({},'aria-selected="false"')),k({},"Selected tab’s anchor has ",O({},'tabindex="0"'),", all other tabs have ",O({},'tabindex="-1"')),k({},"Each tab’s anchor has an ",O({},"aria-controls")," attribute whose value is the id of the associated ",O({},'<div role="tabpanel">')),k({},"Each tab panel has an ",O({},"aria-labelledby")," attribute whose value is the id of its associated ",O({},'<a role="tab">')),k({},"Each tab panel has an ",O({},"hidden")," attribute whose value is toggled based on which panel is visible"),k({},"When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set")),P({id:"Keyboard-Interactions"},"Keyboard Interactions"),T({},k({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),k({},"Tab key, when focus is before the tab list, moves focus to the selected tab panel"),k({},"Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements"),k({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset")),N({id:"Base"},"Base"),(0,n.createElement)(c.A,{title:"carousel"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"1",autoPlay:!0}))),N({id:"Navigating-between-panels"},"Navigating between panels"),C({},"You are able to navigate between panels but interacting with the ",O({},"slds-carousel__indicator")," elements that sit below the panel."),j({id:"Panel-1-active"},"Panel 1 active"),(0,n.createElement)(c.A,{title:"carousel-panel-transition-panel-1"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"1",autoPlay:!0}))),j({id:"Panel-2-active"},"Panel 2 active"),(0,n.createElement)(c.A,{title:"carousel-panel-transition-panel-2"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"2",autoPlay:!0}))),(0,n.createElement)(l.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-carousel"},(0,n.createElement)("div",{className:"slds-carousel__stage"},(0,n.createElement)("div",{className:"slds-carousel__panels",style:{transform:"translateX(-100%)"}},(0,n.createElement)("div",{id:"content-id-01",className:"slds-carousel__panel","aria-hidden":"false",role:"tabpanel","aria-labelledby":"indicator-id-01",tabIndex:"-1"},"..."),(0,n.createElement)("div",{id:"content-id-02",className:"slds-carousel__panel","aria-hidden":"true",role:"tabpanel","aria-labelledby":"indicator-id-02",tabIndex:"0"},"...")),(0,n.createElement)("ul",{className:"slds-carousel__indicators",role:"tablist"},(0,n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},(0,n.createElement)("a",{id:"indicator-id-01",className:"slds-carousel__indicator-action",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"-1","aria-selected":"false","aria-controls":"content-id-01",title:"Visit App Exchange tab"},"...")),(0,n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},(0,n.createElement)("a",{id:"indicator-id-02",className:"slds-carousel__indicator-action slds-is-active",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"0","aria-selected":"true","aria-controls":"content-id-02",title:"Click to Customize tab"},"...")))))),(0,n.createElement)(s.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"A panel becomes visible by toggling the ",(0,n.createElement)("code",null,"aria-hidden")," attribute from ",(0,n.createElement)("code",null,"false")," to ",(0,n.createElement)("code",null,"true")," on the ",(0,n.createElement)("code",null,"slds-carousel__panel")," element. When a panel becomes active, the `tabindex` of the other non-visible panels should be set to -1 while the active panel remains at 0.")),C({},"When a panel becomes active, apply an inline style to ",O({},"slds-carousel__panel")," to move the panels left to right. We do this by updating the location of the panel on its Y axis using transforms. The first panel should be ",O({},"transform: translateX(0%)")," but when any preceding panel becomes active it can be subtracted by 100%, moving 100% of each panel to the left. For example, panel 1 would be visible at ",O({},"transform: translateX(0%)"),", while panel 3 would be visible at ",O({},"transform: translateX(-200%)"),"."),C({},"When making the ",O({},"slds-carousel__panel")," active, the indicator should be updated with the ",O({},"slds-is-active")," class. This provides visual feedback showing which carousel panel is active."),N({id:"Auto-play"},"Auto-play"),C({},"If the Carousel is set to auto-play, a pause button is required to be first in the HTML before the tab set."),(0,n.createElement)(s.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"When that pause button is interacted with, the ",(0,n.createElement)("code",null,"aria-pressed")," role needs to be toggled to ",(0,n.createElement)("code",null,"true"),".")),(0,n.createElement)(c.A,{title:"carousel-autoplay"},(0,n.createElement)(l.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-carousel"},(0,n.createElement)("div",{className:"slds-carousel__stage"},(0,n.createElement)(A,{stop:!0}),(0,n.createElement)("div",{className:"slds-carousel__panels"},"..."))))))},D=function(){return(0,i.Qr)(I())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},r={};function i(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={id:e,exports:{}};return n[e](a,a.exports,i),a.exports}i.m=n,i.amdO={},e=[],i.O=function(t,a,n,r){if(!a){var o=1/0;for(u=0;u<e.length;u++){a=e[u][0],n=e[u][1],r=e[u][2];for(var l=!0,s=0;s<a.length;s++)1&r&&!(o>=r)\|\|!Object.keys(i.O).every(function(e){return i.O[e](a[s])})?(l=!1,r<o&&(o=r)):a.splice(s--,1);if(l){e.splice(u--,1);var c=n();void 0!==c&&(t=c)}}return t}r=r\|\|0;for(var u=e.length;u>0&&e[u-1][2]>r;u--)e[u]=e[u-1];e[u]=[a,n,r]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,i.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 r=Object.create(null);i.r(r);var o={};t=t\|\|[null,a({}),a([]),a(a)];for(var l=2&n&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=a(l))Object.getOwnPropertyNames(l).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},i.d(r,o),r},i.d=function(e,t){for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2045,function(){var e={2045:0};i.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,r,o=a[0],l=a[1],s=a[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(n in l)i.o(l,n)&&(i.m[n]=l[n]);if(s)var u=s(i)}for(t&&t(a);c<o.length;c++)r=o[c],i.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return i.O(u)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(3265)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/carousel/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,a,n={3265:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return D},getElement:function(){return I}});var n=a(1594),r=a.n(n),i=a(5671),o=a(6547),l=a(7675),s=a(5619),c=a(1374),u=a(6955),d=a(1369),p=a.n(d),f=a(6333),b=a.n(f);function m(e){return m="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},m(e)}function h(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,v(n.key),n)}}function v(e){var t=function(e){if("object"!=m(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=m(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==m(t)?t:t+""}function y(e,t){return y=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},y(e,t)}function _(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(_=function(){return!!e})()}function E(e){return E=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},E(e)}var g=function(e){return r().createElement("li",{className:"slds-carousel__indicator",role:"presentation"},r().createElement("a",{id:e.id,className:p()("slds-carousel__indicator-action",e.isActive&&"slds-is-active",e.className),href:"#",role:"tab",tabIndex:e.isActive?"0":"-1","aria-selected":e.isActive?"true":"false","aria-controls":e.contentId,title:e.title,onClick:function(e){return e.preventDefault()}},r().createElement("span",{className:"slds-assistive-text"},e.title)))},w=function(e){return r().createElement("div",{id:e.id,className:p()("slds-carousel__panel",e.className),role:"tabpanel",hidden:!e.isActive,"aria-labelledby":e.indicatorId},r().createElement("a",{href:"#",className:"slds-carousel__panel-action slds-text-link_reset",tabIndex:e.isActive?"0":"-1",onClick:function(e){return e.preventDefault()}},r().createElement("div",{className:"slds-carousel__image"},r().createElement("img",{src:e.src,alt:e.title})),r().createElement("div",{className:"slds-carousel__content"},r().createElement("h2",{className:"slds-carousel__content-title"},e.title),r().createElement("p",null,e.description))))},A=function(e){return r().createElement("span",{className:"slds-carousel__autoplay"},r().createElement(u.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:e.stop?"right":"pause","aria-controls":e["aria-controls"],"aria-pressed":e.stop,disabled:e.disabled,title:"Stop auto-play",assistiveText:"Stop auto-play"}))},x=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,a){return t=E(t),function(e,t){if(t&&("object"==m(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,_()?Reflect.construct(t,a\|\|[],E(e).constructor):t.apply(e,a))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&y(e,t)}(t,e),a=t,(n=[{key:"render",value:function(){var e=b()("content-id-"),t=b()("content-id-"),a=b()("content-id-"),n=b()("indicator-id-"),i=b()("indicator-id-"),o=b()("indicator-id-");return r().createElement("div",{className:p()("slds-carousel",this.props.className)},r().createElement("div",{className:"slds-carousel__stage"},this.props.autoPlay&&r().createElement(A,{stop:"stop"===this.props.autoPlay}),r().createElement("div",{className:"slds-carousel__panels",style:{transform:"translateX(-".concat(100*(this.props.panelActive-3),"%)")}},r().createElement(w,{isActive:"1"===this.props.panelActive,id:e,indicatorId:n,title:"Visit App Exchange",description:"Extend Salesforce with the #1 business marketplace.",src:"/assets/images/carousel/carousel-01.jpg"}),r().createElement(w,{isActive:"2"===this.props.panelActive,id:t,indicatorId:i,title:"Click to Customize",description:"Use the Object Manager to add fields, build layouts, and more.",src:"/assets/images/carousel/carousel-02.jpg"}),r().createElement(w,{isActive:"3"===this.props.panelActive,id:a,indicatorId:o,title:"Download SalesforceA",description:"Get the mobile app that's just for Salesforce admins.",src:"/assets/images/carousel/carousel-03.jpg"})),r().createElement("ul",{className:"slds-carousel__indicators",role:"tablist"},r().createElement(g,{isActive:"1"===this.props.panelActive,id:n,contentId:e,title:"Visit App Exchange tab"}),r().createElement(g,{isActive:"2"===this.props.panelActive,id:i,contentId:t,title:"Click to Customize tab"}),r().createElement(g,{isActive:"3"===this.props.panelActive,id:o,contentId:a,title:"Download SalesforceA tab"}))))}}])&&h(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component),S=x,O=i.XB.code,N=i.XB.h2,j=i.XB.h3,P=i.XB.h4,k=i.XB.li,C=i.XB.p,T=i.XB.ul,I=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A carousel allows multiple pieces of featured content to occupy an allocated amount of space."),(0,n.createElement)(o.A,{exampleOnly:!0,demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"2",autoPlay:!0})),N({id:"About-Carousel"},"About Carousel"),C({},"A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time."),j({id:"Accessibility"},"Accessibility"),C({},"A Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:"),T({},k({},"The tab list, which should have ",O({},'role="tablist"')),k({},"The tabs in that list, which should each be an ",O({},'<a role="tab">')," anchor wrapped in a ",O({},'<li role="presentation">')," list item"),k({},"The tab panels, which display each tab’s content and should each have ",O({},'role="tabpanel"'))),P({id:"Markup"},"Markup"),T({},k({},"Selected tab’s anchor has ",O({},'aria-selected="true"'),", all other tabs’ anchors have ",O({},'aria-selected="false"')),k({},"Selected tab’s anchor has ",O({},'tabindex="0"'),", all other tabs have ",O({},'tabindex="-1"')),k({},"Each tab’s anchor has an ",O({},"aria-controls")," attribute whose value is the id of the associated ",O({},'<div role="tabpanel">')),k({},"Each tab panel has an ",O({},"aria-labelledby")," attribute whose value is the id of its associated ",O({},'<a role="tab">')),k({},"Each tab panel has an ",O({},"hidden")," attribute whose value is toggled based on which panel is visible"),k({},"When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set")),P({id:"Keyboard-Interactions"},"Keyboard Interactions"),T({},k({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),k({},"Tab key, when focus is before the tab list, moves focus to the selected tab panel"),k({},"Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements"),k({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset")),N({id:"Base"},"Base"),(0,n.createElement)(c.A,{title:"carousel"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"1",autoPlay:!0}))),N({id:"Navigating-between-panels"},"Navigating between panels"),C({},"You are able to navigate between panels but interacting with the ",O({},"slds-carousel__indicator")," elements that sit below the panel."),j({id:"Panel-1-active"},"Panel 1 active"),(0,n.createElement)(c.A,{title:"carousel-panel-transition-panel-1"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"1",autoPlay:!0}))),j({id:"Panel-2-active"},"Panel 2 active"),(0,n.createElement)(c.A,{title:"carousel-panel-transition-panel-2"},(0,n.createElement)(o.A,{demoStyles:"width: 480px; max-width: 100%;"},(0,n.createElement)(S,{panelActive:"2",autoPlay:!0}))),(0,n.createElement)(l.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-carousel"},(0,n.createElement)("div",{className:"slds-carousel__stage"},(0,n.createElement)("div",{className:"slds-carousel__panels",style:{transform:"translateX(-100%)"}},(0,n.createElement)("div",{id:"content-id-01",className:"slds-carousel__panel","aria-hidden":"false",role:"tabpanel","aria-labelledby":"indicator-id-01",tabIndex:"-1"},"..."),(0,n.createElement)("div",{id:"content-id-02",className:"slds-carousel__panel","aria-hidden":"true",role:"tabpanel","aria-labelledby":"indicator-id-02",tabIndex:"0"},"...")),(0,n.createElement)("ul",{className:"slds-carousel__indicators",role:"tablist"},(0,n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},(0,n.createElement)("a",{id:"indicator-id-01",className:"slds-carousel__indicator-action",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"-1","aria-selected":"false","aria-controls":"content-id-01",title:"Visit App Exchange tab"},"...")),(0,n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},(0,n.createElement)("a",{id:"indicator-id-02",className:"slds-carousel__indicator-action slds-is-active",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"0","aria-selected":"true","aria-controls":"content-id-02",title:"Click to Customize tab"},"...")))))),(0,n.createElement)(s.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"A panel becomes visible by toggling the ",(0,n.createElement)("code",null,"aria-hidden")," attribute from ",(0,n.createElement)("code",null,"false")," to ",(0,n.createElement)("code",null,"true")," on the ",(0,n.createElement)("code",null,"slds-carousel__panel")," element. When a panel becomes active, the `tabindex` of the other non-visible panels should be set to -1 while the active panel remains at 0.")),C({},"When a panel becomes active, apply an inline style to ",O({},"slds-carousel__panel")," to move the panels left to right. We do this by updating the location of the panel on its Y axis using transforms. The first panel should be ",O({},"transform: translateX(0%)")," but when any preceding panel becomes active it can be subtracted by 100%, moving 100% of each panel to the left. For example, panel 1 would be visible at ",O({},"transform: translateX(0%)"),", while panel 3 would be visible at ",O({},"transform: translateX(-200%)"),"."),C({},"When making the ",O({},"slds-carousel__panel")," active, the indicator should be updated with the ",O({},"slds-is-active")," class. This provides visual feedback showing which carousel panel is active."),N({id:"Auto-play"},"Auto-play"),C({},"If the Carousel is set to auto-play, a pause button is required to be first in the HTML before the tab set."),(0,n.createElement)(s.A,{header:"Accessibility",type:"a11y"},(0,n.createElement)("p",null,"When that pause button is interacted with, the ",(0,n.createElement)("code",null,"aria-pressed")," role needs to be toggled to ",(0,n.createElement)("code",null,"true"),".")),(0,n.createElement)(c.A,{title:"carousel-autoplay"},(0,n.createElement)(l.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-carousel"},(0,n.createElement)("div",{className:"slds-carousel__stage"},(0,n.createElement)(A,{stop:!0}),(0,n.createElement)("div",{className:"slds-carousel__panels"},"..."))))))},D=function(){return(0,i.Qr)(I())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},r={};function i(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={id:e,exports:{}};return n[e](a,a.exports,i),a.exports}i.m=n,i.amdO={},e=[],i.O=function(t,a,n){if(!a){for(var r=0;r<e.length;r++){a=e[r][0],n=e[r][1];for(var o=!0,l=0;l<a.length;l++)i.O.j(a[l])?a.splice(l--,1):o=!1;if(o){e.splice(r--,1);var s=n();void 0!==s&&(t=s)}}return t}e.push([a,n])},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,i.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 r=Object.create(null);i.r(r);var o={};t=t\|\|[null,a({}),a([]),a(a)];for(var l=2&n&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=a(l))Object.getOwnPropertyNames(l).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},i.d(r,o),r},i.d=function(e,t){for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2045,function(){var e={2045:0};i.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,r,o=a[0],l=a[1],s=a[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(n in l)i.o(l,n)&&(i.m[n]=l[n]);if(s)var u=s(i)}for(t&&t(a);c<o.length;c++)r=o[c],i.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return i.O(u)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(3265)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/carousel/docs.mdx.js"]=o}();