npm - @salesforce-ux/design-system - Versions diffs - 2.264.0-beta.3 → 2.264.1 - Mend

@salesforce-ux/design-system 2.264.0-beta.3 → 2.264.1

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 (694) hide show

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,s={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5723:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return G},getElement:function(){return Y}});var s=l(1594),n=l.n(s),a=l(5671),o=l(6547),i=(l(3212),l(5619)),r=l(2436),d=l(9582),c=l(5006),m=l(8347),u=(c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,l(6955)),p=function(e){return n().createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},n().createElement(u.A,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),n().createElement("div",{id:"popover-body-id",className:"slds-popover__body"},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!")))},b=[{context:"Nubbins",id:"left",label:"Nubbin Left",element:n().createElement(p,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:n().createElement(p,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:n().createElement(p,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:n().createElement(p,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:n().createElement(p,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:n().createElement(p,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:n().createElement(p,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:n().createElement(p,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:n().createElement(p,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:n().createElement(p,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:n().createElement(p,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:n().createElement(p,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:n().createElement(p,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:n().createElement(p,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:n().createElement(p,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:n().createElement(p,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:n().createElement(p,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:n().createElement(p,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:n().createElement(p,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:n().createElement(p,{nubbinPosition:"bottom-right-corner"})}],h=l(9249),E=l(3062),f=l(806),g=f.Ay.uniqueId("dialog-heading-id-"),_=[{context:"Warning",id:"warning-default",label:"Warning – default",element:n().createElement(E.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:g,bodyClassName:"slds-popover_warning__body",header:n().createElement(h.R5,{headingId:g,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],N=[{context:"Warning",id:"with-top-nubbin",label:"Warning With Top Nubbin",element:n().createElement(E.AM,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:g,header:n().createElement(h.R5,{headingId:g,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer",label:"Warning With Footer",element:n().createElement(E.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:g,header:n().createElement(h.R5,{headingId:g,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:n().createElement(h.Jk,{isNeutral:!0}),closeButton:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer-brand-button",label:"Warning With Footer containing Brand button",element:n().createElement(E.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:g,header:n().createElement(h.R5,{headingId:g,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:n().createElement(h.Jk,{isBrand:!0}),closeButton:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],v=f.Ay.uniqueId("dialog-heading-id-"),x=function(e){return n().createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},n().createElement("h2",{id:v,className:"slds-text-heading_medium"},e.title))},y=function(e){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?n().createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?n().createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?n().createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?n().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?n().createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},A=[{context:"Walkthrough",id:"walkthrough-default",label:"Walkthrough default [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],k=[{context:"Walkthrough",id:"micro-setup-dark",label:"Micro Setup [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-alternate-dark",label:"Micro Setup - Alternate [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-in-page-dark",label:"Micro Setup - In Page [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_bottom",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-inline-form-dark",label:"Micro Setup - Inline Form [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),n().createElement("div",{className:"slds-form-element slds-p-top_small"},n().createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),n().createElement("div",{className:"slds-form-element__control"},n().createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",id:"action-popover-dark",label:"Action Popover [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-heading-dark",label:"Action Popover - With Heading [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:v,className:"slds-text-heading_small"},"Action title"),n().createElement("p",null,"Text that describes the action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-with-link-dark",label:"Action Popover - With Link [dark]",element:n().createElement(E.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:v,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:v,className:"slds-text-heading_small"},"Action title"),n().createElement("p",null,"Text that describes the action"),n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-alternate",label:"Deprecated – Micro Setup - Alternate",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-in-page",label:"Deprecated – Micro Setup - In Page",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-inline-form",label:"Deprecated – Micro Setup - Inline Form",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:v,header:n().createElement(x,{title:"Walkthrough title"}),footer:n().createElement(y,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),n().createElement("div",{className:"slds-form-element slds-p-top_small"},n().createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),n().createElement("div",{className:"slds-form-element__control"},n().createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",deprecated:!0,id:"action-popover",label:"Deprecated – Action Popover",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-heading",label:"Deprecated – Action Popover - With Heading",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:v,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:v,className:"slds-text-heading_small"},"Action title"),n().createElement("p",null,"Text that describes the action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-with-link",label:"Deprecated – Action Popover - With Link",element:n().createElement(E.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:v,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:v,className:"slds-text-heading_small"},"Action title"),n().createElement("p",null,"Text that describes the action"),n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),n().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],w=f.Ay.uniqueId("dialog-heading-id-"),P=[{context:"Feature",id:"feature-default",label:"Feature default [dark]",element:n().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__body"},n().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],B=[{context:"Feature",id:"icon-text-dark",label:"With icon and text [dark]",element:n().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",id:"icon-header-text-link-dark",label:"With icon, header, text, and link [dark]",element:n().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",id:"icon-header-text-dark",label:"With icon, header, and text [dark]",element:n().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",id:"icon-header-text-footer-dark",label:"With icon, header, text, and footer [dark]",element:n().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:w,footer:n().createElement(y,{learnMoreButton:!0}),closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-text",label:"Deprecated – With icon and text",element:n().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-link",label:"Deprecated – With icon, header, text, and link",element:n().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",deprecated:!0,id:"icon-header-text",label:"Deprecated – With icon, header, and text",element:n().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-footer",label:"Deprecated – With icon, header, text, and footer",element:n().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,footer:n().createElement(y,{learnMoreButton:!0}),closeButton:!0,inverse:!0},n().createElement("div",{className:"slds-media"},n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],S=l(7852),W=n().createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},n().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),n().createElement("span",{className:"slds-assistive-text"},"Opportunities")),O=n().createElement("span",{className:"slds-icon_container slds-icon-standard-case"},n().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),n().createElement("span",{className:"slds-assistive-text"},"Cases")),M=function(){return n().createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},D=[{id:"panels-default",label:"Panels – default",element:n().createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},n().createElement(u.A,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),n().createElement("div",{className:"slds-popover__header"},n().createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},n().createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},n().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),n().createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},n().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n().createElement("dl",null,n().createElement("dt",null,n().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),n().createElement("dd",null,n().createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),n().createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),n().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n().createElement("dl",null,n().createElement("dt",null,n().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),n().createElement("dd",null,n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),n().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n().createElement("dl",null,n().createElement("dt",null,n().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),n().createElement("dd",null,n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),n().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n().createElement("dl",null,n().createElement("dt",null,n().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),n().createElement("dd",null,n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),n().createElement("div",{className:"slds-popover__body"},n().createElement("dl",{className:"slds-popover__body-list"},n().createElement("dt",{className:"slds-m-bottom_small"},n().createElement(S.A,{figureLeft:W,flavor:"center"},n().createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),n().createElement("dd",{className:"slds-m-top_x-small"},n().createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),n().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),n().createElement("dd",{className:"slds-m-top_x-small"},n().createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),n().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),n().createElement(M,null)),n().createElement("dl",{className:"slds-popover__body-list"},n().createElement("dt",{className:"slds-m-bottom_small"},n().createElement(S.A,{figureLeft:O,flavor:"center"},n().createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),n().createElement("dd",{className:"slds-m-top_x-small"},n().createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),n().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),n().createElement(M,null))))}],L=l(942),T=l.n(L),C="height: 13rem;",F=f.Ay.uniqueId("dialog-heading-id-"),I=function(e){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&n().createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&n().createElement("span",{className:"slds-popover_prompt__action-link"},n().createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&n().createElement("button",{className:"slds-button slds-button_brand"},e.brandButtonLabel))},q=function(e){var t={"slds-popover_prompt_top":"top"===e.position,"slds-popover_prompt_top-right":"top-right"===e.position,"slds-popover_prompt_top-left":"top-left"===e.position,"slds-popover_prompt_bottom":"bottom"===e.position,"slds-popover_prompt_bottom-left":"bottom-left"===e.position,"slds-popover_prompt_bottom-right":"bottom-right"===e.position};return n().createElement(c.AM,{className:T()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:F,footer:e.showFooter&&n().createElement(I,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},n().createElement("div",{className:"slds-media"},e.symbol&&n().createElement("div",{className:"slds-media__figure"},n().createElement("span",{className:"slds-icon_container",title:e.assistiveText},n().createElement(m.A,{className:T()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),n().createElement("span",{className:"slds-assistive-text"},e.assistiveText))),n().createElement("div",{className:"slds-media__body"},n().createElement("h2",{id:F,className:"slds-popover_prompt__heading"},"Prompt title"),n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},R=[{context:"Prompt",id:"prompt-default",label:"Prompt – default",element:n().createElement(q,{symbol:"prompt"})}],j=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-left"})},{context:"Prompt",id:"brand-with-footer",label:"Prompt: branded with footer",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",position:"top",showFooter:!0,className:"slds-popover_brand",iconClassName:"slds-popover__icon"})},{context:"Prompt",id:"brand-without-footer",label:"Prompt: branded without footer",demoStyles:C,storybookStyles:!0,element:n().createElement(q,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],z=l(8342),J=a.XB.code,H=a.XB.h2,K=a.XB.h3,V=a.XB.h4,X=a.XB.li,$=a.XB.p,Q=a.XB.strong,U=a.XB.ul,Y=function(){return(0,s.createElement)(a.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element."),(0,s.createElement)(o.A,{exampleOnly:!0},(0,f.NO)(b,"bottom")),H({id:"About-Popovers"},"About Popovers"),$({},"A popover is used to display contextual information to the user."),$({},"A popover can accept the following nubbin position classes, ",J({},".slds-nubbin_left"),", ",J({},".slds-nubbin_left-top"),", ",J({},".slds-nubbin_left-bottom"),", ",J({},".slds-nubbin_top-left"),", ",J({},".slds-nubbin_top-right"),", ",J({},".slds-nubbin_right-top"),", ",J({},".slds-nubbin_right-bottom"),", ",J({},".slds-nubbin_bottom-left"),", ",J({},".slds-nubbin_bottom-right"),"."),K({id:"Accessibility"},"Accessibility"),V({id:"Notable-features"},"Notable features"),U({},X({},"Popovers ",Q({},"must")," come with a triggering button"),X({},"They ",Q({},"must")," have at least one focusable element inside"),X({},"They ",Q({},"should")," be implemented as a keyboard focus trap"),X({},"When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there"),X({},"Pressing the Escape the key as well as clicking the close button should close the Popover"),X({},"User focus should be placed back on the triggering button when the popover is closed")),$({},"Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present ",Q({},"in addition")," and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You ",Q({},"should not")," move a user's focus without their expressed intent."),V({id:"Notable-attributes"},"Notable attributes"),U({},X({},"The Popover element should have ",J({},'role="dialog"')," applied"),X({},"The ",J({},"dialog")," should be labelled, this can be achieved in two ways:",U({},X({},"Apply the ",J({},"aria-labelledby")," attribute to the ",J({},"dialog")," element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the ",J({},"dialog"),")"),X({},"If no Heading element is present, use the ",J({},"aria-label")," attribute and set the value to be a meaningful title of the ",J({},"dialog")))),X({},"The triggering element should have ",J({},'aria-haspopup="dialog"'))),H({id:"Base"},"Base"),(0,s.createElement)(o.A,null,(0,f.NO)(c.Ay)),K({id:"With-Header"},"With Header"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"header")),K({id:"With-Footer"},"With Footer"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"footer")),K({id:"With-Badge"},"With Badge"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"badge")),K({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"scrolling")),H({id:"Widths"},"Widths"),K({id:"Small"},"Small"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"width-small")),K({id:"Medium"},"Medium"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"width-medium")),K({id:"Large"},"Large"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"width-large")),K({id:"Full-Width"},"Full Width"),(0,s.createElement)(o.A,null,(0,f.NO)(c.K1,"width-full-width")),H({id:"Nubbins"},"Nubbins"),K({id:"Left"},"Left"),(0,s.createElement)(d.A,null,(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Left"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"left"))),(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Left Top"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"left-top"))),(0,s.createElement)(r.A,{columnCount:"1"},(0,s.createElement)("strong",null,"Left Bottom"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"left-bottom")))),K({id:"Right"},"Right"),(0,s.createElement)(d.A,null,(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Right"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"right"))),(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Right Top"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"right-top"))),(0,s.createElement)(r.A,{columnCount:"1"},(0,s.createElement)("strong",null,"Right Bottom"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"right-bottom")))),K({id:"Top"},"Top"),(0,s.createElement)(d.A,null,(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Top"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"top"))),(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Top Left"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"top-left"))),(0,s.createElement)(r.A,{columnCount:"1"},(0,s.createElement)("strong",null,"Top Right"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"top-right")))),K({id:"Bottom"},"Bottom"),(0,s.createElement)(d.A,null,(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Bottom"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"bottom"))),(0,s.createElement)(r.A,null,(0,s.createElement)("strong",null,"Bottom Left"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"bottom-left"))),(0,s.createElement)(r.A,{columnCount:"1"},(0,s.createElement)("strong",null,"Bottom Right"),(0,s.createElement)(o.A,null,(0,f.NO)(b,"bottom-right")))),H({id:"Feedback-States"},"Feedback States"),K({id:"Error"},"Error"),(0,s.createElement)(o.A,null,(0,f.NO)(h.Ay)),V({id:"With-Footer-2"},"With Footer"),(0,s.createElement)(o.A,null,(0,f.NO)(h.K1,"with-footer")),V({id:"With-Bullet-List"},"With Bullet List"),(0,s.createElement)(o.A,null,(0,f.NO)(h.K1,"with-bullet-list")),K({id:"Warning"},"Warning"),(0,s.createElement)(o.A,null,(0,f.NO)(_)),V({id:"With-Footer-3"},"With Footer"),(0,s.createElement)(o.A,null,(0,f.NO)(N,"with-footer")),H({id:"Examples"},"Examples"),K({id:"Walkthrough"},"Walkthrough"),(0,s.createElement)(o.A,null,(0,f.NO)(A)),V({id:"Micro-Setup"},"Micro Setup"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"micro-setup-dark")),V({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"micro-setup-alternate-dark")),V({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"micro-setup-in-page-dark")),V({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"micro-setup-inline-form-dark")),V({id:"Action"},"Action"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"action-popover-dark")),V({id:"Action-With-Heading"},"Action - With Heading"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"action-popover-heading-dark")),V({id:"Action-With-Link"},"Action - With Link"),(0,s.createElement)(o.A,null,(0,f.NO)(k,"action-popover-with-link-dark")),K({id:"Feature"},"Feature"),(0,s.createElement)(o.A,null,(0,f.NO)(P)),V({id:"With-icon-and-text"},"With icon and text"),(0,s.createElement)(o.A,null,(0,f.NO)(B,"icon-text-dark")),V({id:"With-icon-header-and-text"},"With icon, header, and text"),(0,s.createElement)(o.A,null,(0,f.NO)(B,"icon-header-text-dark")),V({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),(0,s.createElement)(o.A,null,(0,f.NO)(B,"icon-header-text-link-dark")),V({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),(0,s.createElement)(o.A,null,(0,f.NO)(B,"icon-header-text-footer-dark")),K({id:"Record-Preview-Panel"},"Record Preview Panel"),(0,s.createElement)(o.A,null,(0,f.NO)(D)),K({id:"Prompt"},"Prompt"),(0,s.createElement)(o.A,null,(0,f.NO)(R)),V({id:"Positioned-top-left"},"Positioned top left"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"top-left")),V({id:"Positioned-top-center"},"Positioned top center"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"top-center")),V({id:"Positioned-top-right"},"Positioned top right"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"top-right")),V({id:"Positioned-bottom-right"},"Positioned bottom right"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"bottom-right")),V({id:"Positioned-bottom-center"},"Positioned bottom center"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"bottom-center")),V({id:"Positioned-bottom-left"},"Positioned bottom left"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"bottom-left")),V({id:"With-brand-color-and-footer"},"With brand color and footer"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"brand-with-footer")),V({id:"With-brand-color-no-footer"},"With brand color - no footer"),(0,s.createElement)(o.A,{demoStyles:"height: 250px;"},(0,f.NO)(j,"brand-without-footer")),H({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,s.createElement)(i.A,{header:"A Note About z-index"},(0,s.createElement)("p",null,"By default, Popovers use the ",(0,s.createElement)("code",null,"$z-index-dialog")," (",(0,s.createElement)("a",{href:"/design-tokens/#category-z-index"},"value of 6000"),") token. This allows the Popover to appear above the element that triggered it, and in the vast majority of cases should work well out of the box. However, depending on where the Popover code lives when it's triggered, layout issues could arise."),(0,s.createElement)("p",null,"For this particular use case, the ",(0,s.createElement)("code",null,"--slds-c-popover-position-zindex")," ",(0,s.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",(0,s.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),(0,s.createElement)(z.A,{name:"popovers",type:"component"}))},G=function(){return(0,a.Qr)(Y())}}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return s[e](l,l.exports,a),l.exports}a.m=s,a.amdO={},e=[],a.O=function(t,l,s,n){if(!l){var o=1/0;for(c=0;c<e.length;c++){l=e[c][0],s=e[c][1],n=e[c][2];for(var i=!0,r=0;r<l.length;r++)(!1&n\|\|o>=n)&&Object.keys(a.O).every(function(e){return a.O[e](l[r])})?l.splice(r--,1):(i=!1,n<o&&(o=n));if(i){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}n=n\|\|0;for(var c=e.length;c>0&&e[c-1][2]>n;c--)e[c]=e[c-1];e[c]=[l,s,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var n=Object.create(null);a.r(n);var o={};t=t\|\|[null,l({}),l([]),l(l)];for(var i=2&s&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=l(i))Object.getOwnPropertyNames(i).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(n,o),n},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=5637,function(){var e={5637:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,n,o=l[0],i=l[1],r=l[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(s in i)a.o(i,s)&&(a.m[s]=i[s]);if(r)var c=r(a)}for(t&&t(l);d<o.length;d++)n=o[d],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(5723)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/popovers/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5723:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return ee},getElement:function(){return Z}});var n=l(1594),s=l.n(n),o=l(5671),a=l(6547),i=(l(3212),l(5619)),r=l(2436),d=l(9582),c=l(5006),m=l(8347),u=(c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,c.AM,l(6955)),p=function(e){return s().createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},s().createElement(u.A,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s().createElement("div",{id:"popover-body-id",className:"slds-popover__body"},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!")))},b=[{context:"Nubbins",id:"left",label:"Nubbin Left",element:s().createElement(p,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:s().createElement(p,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:s().createElement(p,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:s().createElement(p,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:s().createElement(p,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:s().createElement(p,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:s().createElement(p,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:s().createElement(p,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:s().createElement(p,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:s().createElement(p,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:s().createElement(p,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:s().createElement(p,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:s().createElement(p,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:s().createElement(p,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:s().createElement(p,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:s().createElement(p,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:s().createElement(p,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:s().createElement(p,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:s().createElement(p,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:s().createElement(p,{nubbinPosition:"bottom-right-corner"})}],h=[{context:"Nubbins Logical",id:"start",label:"Nubbin Start",element:s().createElement(p,{nubbinPosition:"start"})},{context:"Nubbins Logical",id:"start-top",label:"Nubbin Start (top)",element:s().createElement(p,{nubbinPosition:"start-top"})},{context:"Nubbins Logical",id:"start-bottom",label:"Nubbin Start (bottom)",element:s().createElement(p,{nubbinPosition:"start-bottom"})},{context:"Nubbins Logical",id:"top-start",label:"Nubbin Top (start)",element:s().createElement(p,{nubbinPosition:"top-start"})},{context:"Nubbins Logical",id:"top-end",label:"Nubbin Top (end)",element:s().createElement(p,{nubbinPosition:"top-end"})},{context:"Nubbins Logical",id:"end",label:"Nubbin End",element:s().createElement(p,{nubbinPosition:"end"})},{context:"Nubbins Logical",id:"end-top",label:"Nubbin End (top)",element:s().createElement(p,{nubbinPosition:"end-top"})},{context:"Nubbins Logical",id:"end-bottom",label:"Nubbin End (bottom)",element:s().createElement(p,{nubbinPosition:"end-bottom"})},{context:"Nubbins Logical",id:"bottom-start",label:"Nubbin Bottom (start)",element:s().createElement(p,{nubbinPosition:"bottom-start"})},{context:"Nubbins Logical",id:"bottom-end",label:"Nubbin Bottom (end)",element:s().createElement(p,{nubbinPosition:"bottom-end"})}],E=l(9249),f=l(3062),g=l(806),_=g.Ay.uniqueId("dialog-heading-id-"),N=[{context:"Warning",id:"warning-default",label:"Warning – default",element:s().createElement(f.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:_,bodyClassName:"slds-popover_warning__body",header:s().createElement(E.R5,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],v=[{context:"Warning",id:"with-top-nubbin",label:"Warning With Top Nubbin",element:s().createElement(f.AM,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:_,header:s().createElement(E.R5,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer",label:"Warning With Footer",element:s().createElement(f.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s().createElement(E.R5,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s().createElement(E.Jk,{isNeutral:!0}),closeButton:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer-brand-button",label:"Warning With Footer containing Brand button",element:s().createElement(f.AM,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s().createElement(E.R5,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s().createElement(E.Jk,{isBrand:!0}),closeButton:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],x=g.Ay.uniqueId("dialog-heading-id-"),y=function(e){return s().createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},s().createElement("h2",{id:x,className:"slds-text-heading_medium"},e.title))},A=function(e){return s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?s().createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?s().createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?s().createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?s().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?s().createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},k=[{context:"Walkthrough",id:"walkthrough-default",label:"Walkthrough default [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],w=[{context:"Walkthrough",id:"micro-setup-dark",label:"Micro Setup [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-alternate-dark",label:"Micro Setup - Alternate [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-in-page-dark",label:"Micro Setup - In Page [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_bottom",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",id:"micro-setup-inline-form-dark",label:"Micro Setup - Inline Form [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s().createElement("div",{className:"slds-form-element slds-p-top_small"},s().createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s().createElement("div",{className:"slds-form-element__control"},s().createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",id:"action-popover-dark",label:"Action Popover [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-heading-dark",label:"Action Popover - With Heading [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s().createElement("p",null,"Text that describes the action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-with-link-dark",label:"Action Popover - With Link [dark]",element:s().createElement(f.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s().createElement("p",null,"Text that describes the action"),s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-alternate",label:"Deprecated – Micro Setup - Alternate",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-in-page",label:"Deprecated – Micro Setup - In Page",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-inline-form",label:"Deprecated – Micro Setup - Inline Form",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s().createElement(y,{title:"Walkthrough title"}),footer:s().createElement(A,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s().createElement("div",{className:"slds-form-element slds-p-top_small"},s().createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s().createElement("div",{className:"slds-form-element__control"},s().createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",deprecated:!0,id:"action-popover",label:"Deprecated – Action Popover",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-heading",label:"Deprecated – Action Popover - With Heading",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s().createElement("p",null,"Text that describes the action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-with-link",label:"Deprecated – Action Popover - With Link",element:s().createElement(f.AM,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s().createElement("p",null,"Text that describes the action"),s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s().createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],P=g.Ay.uniqueId("dialog-heading-id-"),S=[{context:"Feature",id:"feature-default",label:"Feature default [dark]",element:s().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__body"},s().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],B=[{context:"Feature",id:"icon-text-dark",label:"With icon and text [dark]",element:s().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",id:"icon-header-text-link-dark",label:"With icon, header, text, and link [dark]",element:s().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:P,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",id:"icon-header-text-dark",label:"With icon, header, and text [dark]",element:s().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:P,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",id:"icon-header-text-footer-dark",label:"With icon, header, text, and footer [dark]",element:s().createElement(c.AM,{className:"slds-popover_dark slds-nubbin_left",headingId:P,footer:s().createElement(A,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-text",label:"Deprecated – With icon and text",element:s().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-link",label:"Deprecated – With icon, header, text, and link",element:s().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:P,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",deprecated:!0,id:"icon-header-text",label:"Deprecated – With icon, header, and text",element:s().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:P,closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-footer",label:"Deprecated – With icon, header, text, and footer",element:s().createElement(c.AM,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:P,footer:s().createElement(A,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s().createElement(m.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s().createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:P,className:"slds-text-heading_small"},"Feature title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],O=l(7852),L=s().createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},s().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),s().createElement("span",{className:"slds-assistive-text"},"Opportunities")),W=s().createElement("span",{className:"slds-icon_container slds-icon-standard-case"},s().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),s().createElement("span",{className:"slds-assistive-text"},"Cases")),M=function(){return s().createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},D=[{id:"panels-default",label:"Panels – default",element:s().createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},s().createElement(u.A,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s().createElement("div",{className:"slds-popover__header"},s().createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},s().createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},s().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),s().createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s().createElement("dl",null,s().createElement("dt",null,s().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),s().createElement("dd",null,s().createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),s().createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),s().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s().createElement("dl",null,s().createElement("dt",null,s().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),s().createElement("dd",null,s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),s().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s().createElement("dl",null,s().createElement("dt",null,s().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),s().createElement("dd",null,s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),s().createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s().createElement("dl",null,s().createElement("dt",null,s().createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),s().createElement("dd",null,s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),s().createElement("div",{className:"slds-popover__body"},s().createElement("dl",{className:"slds-popover__body-list"},s().createElement("dt",{className:"slds-m-bottom_small"},s().createElement(O.A,{figureLeft:L,flavor:"center"},s().createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),s().createElement("dd",{className:"slds-m-top_x-small"},s().createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),s().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),s().createElement("dd",{className:"slds-m-top_x-small"},s().createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s().createElement(M,null)),s().createElement("dl",{className:"slds-popover__body-list"},s().createElement("dt",{className:"slds-m-bottom_small"},s().createElement(O.A,{figureLeft:W,flavor:"center"},s().createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),s().createElement("dd",{className:"slds-m-top_x-small"},s().createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s().createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s().createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s().createElement(M,null))))}],T=l(942),C=l.n(T),F="height: 13rem;",I=g.Ay.uniqueId("dialog-heading-id-"),q=function(e){return s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&s().createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&s().createElement("span",{className:"slds-popover_prompt__action-link"},s().createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&s().createElement("button",{className:"slds-button slds-button_brand"},e.brandButtonLabel))},R=function(e){var t={"slds-popover_prompt_top":"top"===e.position,"slds-popover_prompt_top-right":"top-right"===e.position,"slds-popover_prompt_top-left":"top-left"===e.position,"slds-popover_prompt_bottom":"bottom"===e.position,"slds-popover_prompt_bottom-left":"bottom-left"===e.position,"slds-popover_prompt_bottom-right":"bottom-right"===e.position};return s().createElement(c.AM,{className:C()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:I,footer:e.showFooter&&s().createElement(q,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},s().createElement("div",{className:"slds-media"},e.symbol&&s().createElement("div",{className:"slds-media__figure"},s().createElement("span",{className:"slds-icon_container",title:e.assistiveText},s().createElement(m.A,{className:C()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),s().createElement("span",{className:"slds-assistive-text"},e.assistiveText))),s().createElement("div",{className:"slds-media__body"},s().createElement("h2",{id:I,className:"slds-popover_prompt__heading"},"Prompt title"),s().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},j=[{context:"Prompt",id:"prompt-default",label:"Prompt – default",element:s().createElement(R,{symbol:"prompt"})}],z=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",showFooter:!0,position:"bottom-left"})},{context:"Prompt",id:"brand-with-footer",label:"Prompt: branded with footer",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",position:"top",showFooter:!0,className:"slds-popover_brand",iconClassName:"slds-popover__icon"})},{context:"Prompt",id:"brand-without-footer",label:"Prompt: branded without footer",demoStyles:F,storybookStyles:!0,element:s().createElement(R,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],J=l(8342),H=o.XB.a,K=o.XB.code,X=o.XB.h2,V=o.XB.h3,$=o.XB.h4,U=o.XB.li,Q=o.XB.p,Y=o.XB.strong,G=o.XB.ul,Z=function(){return(0,n.createElement)(o.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element."),(0,n.createElement)(a.A,{exampleOnly:!0},(0,g.NO)(b,"bottom")),X({id:"About-Popovers"},"About Popovers"),Q({},"A popover is used to display contextual information to the user."),Q({},"A popover can accept two families of nubbin position classes: ",Y({},"physical")," (pinned to the same visual edge in all layouts) and ",Y({},"logical")," (flip automatically in right-to-left layouts). See ",H({href:"#Nubbins"},"Nubbins")," for the physical family and ",H({href:"#Nubbins-(Logical)"},"Nubbins (Logical)")," for the auto-flipping family."),Q({},"Physical: ",K({},".slds-nubbin_left"),", ",K({},".slds-nubbin_left-top"),", ",K({},".slds-nubbin_left-bottom"),", ",K({},".slds-nubbin_top-left"),", ",K({},".slds-nubbin_top-right"),", ",K({},".slds-nubbin_right-top"),", ",K({},".slds-nubbin_right-bottom"),", ",K({},".slds-nubbin_bottom-left"),", ",K({},".slds-nubbin_bottom-right"),"."),Q({},"Logical: ",K({},".slds-nubbin_start"),", ",K({},".slds-nubbin_start-top"),", ",K({},".slds-nubbin_start-bottom"),", ",K({},".slds-nubbin_end"),", ",K({},".slds-nubbin_end-top"),", ",K({},".slds-nubbin_end-bottom"),", ",K({},".slds-nubbin_top-start"),", ",K({},".slds-nubbin_top-end"),", ",K({},".slds-nubbin_bottom-start"),", ",K({},".slds-nubbin_bottom-end"),"."),V({id:"Accessibility"},"Accessibility"),$({id:"Notable-features"},"Notable features"),G({},U({},"Popovers ",Y({},"must")," come with a triggering button"),U({},"They ",Y({},"must")," have at least one focusable element inside"),U({},"They ",Y({},"should")," be implemented as a keyboard focus trap"),U({},"When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there"),U({},"Pressing the Escape the key as well as clicking the close button should close the Popover"),U({},"User focus should be placed back on the triggering button when the popover is closed")),Q({},"Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present ",Y({},"in addition")," and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You ",Y({},"should not")," move a user's focus without their expressed intent."),$({id:"Notable-attributes"},"Notable attributes"),G({},U({},"The Popover element should have ",K({},'role="dialog"')," applied"),U({},"The ",K({},"dialog")," should be labelled, this can be achieved in two ways:",G({},U({},"Apply the ",K({},"aria-labelledby")," attribute to the ",K({},"dialog")," element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the ",K({},"dialog"),")"),U({},"If no Heading element is present, use the ",K({},"aria-label")," attribute and set the value to be a meaningful title of the ",K({},"dialog")))),U({},"The triggering element should have ",K({},'aria-haspopup="dialog"'))),X({id:"Base"},"Base"),(0,n.createElement)(a.A,null,(0,g.NO)(c.Ay)),V({id:"With-Header"},"With Header"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"header")),V({id:"With-Footer"},"With Footer"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"footer")),V({id:"With-Badge"},"With Badge"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"badge")),V({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"scrolling")),X({id:"Widths"},"Widths"),V({id:"Small"},"Small"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"width-small")),V({id:"Medium"},"Medium"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"width-medium")),V({id:"Large"},"Large"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"width-large")),V({id:"Full-Width"},"Full Width"),(0,n.createElement)(a.A,null,(0,g.NO)(c.K1,"width-full-width")),X({id:"Nubbins"},"Nubbins"),V({id:"Left"},"Left"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Left"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"left"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Left Top"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"left-top"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Left Bottom"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"left-bottom")))),V({id:"Right"},"Right"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Right"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"right"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Right Top"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"right-top"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Right Bottom"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"right-bottom")))),V({id:"Top"},"Top"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Top"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"top"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Top Left"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"top-left"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Top Right"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"top-right")))),V({id:"Bottom"},"Bottom"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Bottom"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"bottom"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Bottom Left"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"bottom-left"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Bottom Right"),(0,n.createElement)(a.A,null,(0,g.NO)(b,"bottom-right")))),X({id:"Nubbins-(Logical)"},"Nubbins (Logical)"),Q({},"Logical nubbin classes use CSS logical properties (",K({},"inset-inline-start")," / ",K({},"inset-inline-end"),") that flip automatically in right-to-left (RTL) layouts. Use these when you want the nubbin to mirror based on reading direction."),V({id:"Start"},"Start"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Start"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"start"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Start Top"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"start-top"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Start Bottom"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"start-bottom")))),V({id:"End"},"End"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"End"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"end"))),(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"End Top"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"end-top"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"End Bottom"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"end-bottom")))),V({id:"Top-2"},"Top"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Top Start"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"top-start"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Top End"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"top-end")))),V({id:"Bottom-2"},"Bottom"),(0,n.createElement)(d.A,null,(0,n.createElement)(r.A,null,(0,n.createElement)("strong",null,"Bottom Start"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"bottom-start"))),(0,n.createElement)(r.A,{columnCount:"1"},(0,n.createElement)("strong",null,"Bottom End"),(0,n.createElement)(a.A,null,(0,g.NO)(h,"bottom-end")))),X({id:"Feedback-States"},"Feedback States"),V({id:"Error"},"Error"),(0,n.createElement)(a.A,null,(0,g.NO)(E.Ay)),$({id:"With-Footer-2"},"With Footer"),(0,n.createElement)(a.A,null,(0,g.NO)(E.K1,"with-footer")),$({id:"With-Bullet-List"},"With Bullet List"),(0,n.createElement)(a.A,null,(0,g.NO)(E.K1,"with-bullet-list")),V({id:"Warning"},"Warning"),(0,n.createElement)(a.A,null,(0,g.NO)(N)),$({id:"With-Footer-3"},"With Footer"),(0,n.createElement)(a.A,null,(0,g.NO)(v,"with-footer")),X({id:"Examples"},"Examples"),V({id:"Walkthrough"},"Walkthrough"),(0,n.createElement)(a.A,null,(0,g.NO)(k)),$({id:"Micro-Setup"},"Micro Setup"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"micro-setup-dark")),$({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"micro-setup-alternate-dark")),$({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"micro-setup-in-page-dark")),$({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"micro-setup-inline-form-dark")),$({id:"Action"},"Action"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"action-popover-dark")),$({id:"Action-With-Heading"},"Action - With Heading"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"action-popover-heading-dark")),$({id:"Action-With-Link"},"Action - With Link"),(0,n.createElement)(a.A,null,(0,g.NO)(w,"action-popover-with-link-dark")),V({id:"Feature"},"Feature"),(0,n.createElement)(a.A,null,(0,g.NO)(S)),$({id:"With-icon-and-text"},"With icon and text"),(0,n.createElement)(a.A,null,(0,g.NO)(B,"icon-text-dark")),$({id:"With-icon-header-and-text"},"With icon, header, and text"),(0,n.createElement)(a.A,null,(0,g.NO)(B,"icon-header-text-dark")),$({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),(0,n.createElement)(a.A,null,(0,g.NO)(B,"icon-header-text-link-dark")),$({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),(0,n.createElement)(a.A,null,(0,g.NO)(B,"icon-header-text-footer-dark")),V({id:"Record-Preview-Panel"},"Record Preview Panel"),(0,n.createElement)(a.A,null,(0,g.NO)(D)),V({id:"Prompt"},"Prompt"),(0,n.createElement)(a.A,null,(0,g.NO)(j)),$({id:"Positioned-top-left"},"Positioned top left"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"top-left")),$({id:"Positioned-top-center"},"Positioned top center"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"top-center")),$({id:"Positioned-top-right"},"Positioned top right"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"top-right")),$({id:"Positioned-bottom-right"},"Positioned bottom right"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"bottom-right")),$({id:"Positioned-bottom-center"},"Positioned bottom center"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"bottom-center")),$({id:"Positioned-bottom-left"},"Positioned bottom left"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"bottom-left")),$({id:"With-brand-color-and-footer"},"With brand color and footer"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"brand-with-footer")),$({id:"With-brand-color-no-footer"},"With brand color - no footer"),(0,n.createElement)(a.A,{demoStyles:"height: 250px;"},(0,g.NO)(z,"brand-without-footer")),X({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(i.A,{header:"A Note About z-index"},(0,n.createElement)("p",null,"By default, Popovers use the ",(0,n.createElement)("code",null,"$z-index-dialog")," (",(0,n.createElement)("a",{href:"/design-tokens/#category-z-index"},"value of 6000"),") token. This allows the Popover to appear above the element that triggered it, and in the vast majority of cases should work well out of the box. However, depending on where the Popover code lives when it's triggered, layout issues could arise."),(0,n.createElement)("p",null,"For this particular use case, the ",(0,n.createElement)("code",null,"--slds-c-popover-position-zindex")," ",(0,n.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",(0,n.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),(0,n.createElement)(J.A,{name:"popovers",type:"component"}))},ee=function(){return(0,o.Qr)(Z())}}},s={};function o(e){var t=s[e];if(void 0!==t)return t.exports;var l=s[e]={id:e,exports:{}};return n[e](l,l.exports,o),l.exports}o.m=n,o.amdO={},e=[],o.O=function(t,l,n,s){if(!l){var a=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],s=e[c][2];for(var i=!0,r=0;r<l.length;r++)(!1&s\|\|a>=s)&&Object.keys(o.O).every(function(e){return o.O[e](l[r])})?l.splice(r--,1):(i=!1,s<a&&(a=s));if(i){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}s=s\|\|0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[l,n,s]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.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 s=Object.create(null);o.r(s);var a={};t=t\|\|[null,l({}),l([]),l(l)];for(var i=2&n&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=l(i))Object.getOwnPropertyNames(i).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},o.d(s,a),s},o.d=function(e,t){for(var l in t)o.o(t,l)&&!o.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=5637,function(){var e={5637:0};o.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,s,a=l[0],i=l[1],r=l[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(n in i)o.o(i,n)&&(o.m[n]=i[n]);if(r)var c=r(o)}for(t&&t(l);d<a.length;d++)s=a[d],o.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return o.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),o.nc=void 0;var a=o.O(void 0,[3540],function(){return o(5723)});a=o.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/popovers/docs.mdx.js"]=a}();

package/__internal/chunked/docs/ui/components/radio-button-group/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,r,t,n={887:function(e,r,t){t.r(r),t.d(r,{getContents:function(){return j},getElement:function(){return N}});var n=t(1594),a=t.n(n),i=t(5671),o=t(6547),l=(t(3212),t(5619),t(9741)),d=t(806),u=t(9285),c=t(942),s=t.n(c),f=t(6333),m=t.n(f),b=t(2711),p=t(885),h=function(e){return a().createElement("div",{className:s()("slds-radio_button-group",e.className)},e.children)},y=function(e){var r=m()("example-unique-id-");return a().createElement("span",{className:s()("slds-button slds-radio_button",e.className)},a().createElement("input",{name:e.name,type:"radio",id:r,value:e.id,disabled:e.disabled,"aria-describedby":e.errorId,defaultChecked:e.checked}),a().createElement("label",{className:"slds-radio_button__label",htmlFor:r},a().createElement("span",{className:"slds-radio_faux"},e.children)))},E=function(e){var r=e.legend,t=e.modifier,n=e.disabled,i=e.required,o=e.hasError,l=m()("example-unique-name-"),d=m()("error-unique-id-");return a().createElement(p.LB,{className:o&&"slds-has-error"},a().createElement(p.s$,null,i&&a().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},""),!r&&"Radio Group Label"),a().createElement(b.qz,null,a().createElement(h,{className:t},a().createElement(y,{id:"monday",name:l,disabled:n,errorId:o&&d},"Mon"),a().createElement(y,{id:"tuesday",name:l,disabled:n,errorId:o&&d},"Tue"),a().createElement(y,{id:"wednesday",name:l,disabled:n,errorId:o&&d},"Wed"),a().createElement(y,{id:"thursday",name:l,disabled:n,errorId:o&&d},"Thu"),a().createElement(y,{id:"friday",name:l,disabled:n,errorId:o&&d},"Fri")),o&&a().createElement("div",{id:d,className:"slds-form-element__help"},"This field is required")))},v=a().createElement(E,null),_=[{id:"disabled",label:"Disabled",element:a().createElement(E,{disabled:!0})},{id:"required",label:"Required",element:a().createElement(E,{required:!0})},{id:"error",label:"Has error",element:a().createElement(E,{required:!0,hasError:!0})}],O=i.XB.h2,g=i.XB.h3,S=i.XB.p,N=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"lead doc"},"A styled select list that can have a single entry checked at any one time."),O({id:"About-Radio-Button-Group"},"About Radio Button Group"),O({id:"Default"},"Default"),(0,n.createElement)(o.A,null,(0,d.NO)(v)),g({id:"Accessibility"},"Accessibility"),S({},"All form elements marked as required with an must have an accompanying legend."),S({},"Example:\n",(0,n.createElement)(l.A,null)),g({id:"Mobile"},"Mobile"),(0,n.createElement)(u.s9,{patternSpecificText:"radio button groups will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, and also become stacked"}),(0,n.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for radio button groups"},(0,d.NO)(v)),O({id:"States"},"States"),g({id:"Disabled"},"Disabled"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"disabled")),g({id:"Required"},"Required"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"required")),g({id:"Has-Error"},"Has Error"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"error")))},j=function(){return(0,i.Qr)(N())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},a={};function i(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={id:e,exports:{}};return n[e](t,t.exports,i),t.exports}i.m=n,i.amdO={},e=[],i.O=function(r,t,n,a){if(!t){var o=1/0;for(c=0;c<e.length;c++){t=e[c][0],n=e[c][1],a=e[c][2];for(var l=!0,d=0;d<t.length;d++)(!1&a\|\|o>=a)&&Object.keys(i.O).every(function(e){return i.O[e](t[d])})?t.splice(d--,1):(l=!1,a<o&&(o=a));if(l){e.splice(c--,1);var u=n();void 0!==u&&(r=u)}}return r}a=a\|\|0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[t,n,a]},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,{a:r}),r},t=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},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 a=Object.create(null);i.r(a);var o={};r=r\|\|[null,t({}),t([]),t(t)];for(var l=2&n&&e;("object"==typeof l\|\|"function"==typeof l)&&!~r.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach(function(r){o[r]=function(){return e[r]}});return o.default=function(){return e},i.d(a,o),a},i.d=function(e,r){for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},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,r){return Object.prototype.hasOwnProperty.call(e,r)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=6579,function(){var e={6579:0};i.O.j=function(r){return 0===e[r]};var r=function(r,t){var n,a,o=t[0],l=t[1],d=t[2],u=0;if(o.some(function(r){return 0!==e[r]})){for(n in l)i.o(l,n)&&(i.m[n]=l[n]);if(d)var c=d(i)}for(r&&r(t);u<o.length;u++)a=o[u],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(c)},t=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(887)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/radio-button-group/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,r,t,n={887:function(e,r,t){t.r(r),t.d(r,{getContents:function(){return j},getElement:function(){return N}});var n=t(1594),a=t.n(n),i=t(5671),o=t(6547),l=(t(3212),t(5619),t(9741)),d=t(806),u=t(9285),c=t(942),s=t.n(c),f=t(6333),m=t.n(f),b=t(2711),p=t(885),h=(t(8347),function(e){return a().createElement("div",{className:s()("slds-radio_button-group",e.className)},e.children)}),y=function(e){var r=m()("example-unique-id-");return a().createElement("span",{className:s()("slds-button slds-radio_button",e.className)},a().createElement("input",{name:e.name,type:"radio",id:r,value:e.id,disabled:e.disabled,"aria-describedby":e.errorId,defaultChecked:e.checked}),a().createElement("label",{className:"slds-radio_button__label",htmlFor:r},a().createElement("span",{className:"slds-radio_faux"},e.children)))},E=function(e){var r=e.legend,t=e.modifier,n=e.disabled,i=e.required,o=e.hasError,l=m()("example-unique-name-"),d=m()("error-unique-id-");return a().createElement(p.LB,{className:o&&"slds-has-error"},a().createElement(p.s$,null,i&&a().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},""),!r&&"Radio Group Label"),a().createElement(b.qz,null,a().createElement(h,{className:t},a().createElement(y,{id:"monday",name:l,disabled:n,errorId:o&&d},"Mon"),a().createElement(y,{id:"tuesday",name:l,disabled:n,errorId:o&&d},"Tue"),a().createElement(y,{id:"wednesday",name:l,disabled:n,errorId:o&&d},"Wed"),a().createElement(y,{id:"thursday",name:l,disabled:n,errorId:o&&d},"Thu"),a().createElement(y,{id:"friday",name:l,disabled:n,errorId:o&&d},"Fri")),o&&a().createElement("div",{id:d,className:"slds-form-element__help"},"This field is required")))},v=a().createElement(E,null),_=[{id:"disabled",label:"Disabled",element:a().createElement(E,{disabled:!0})},{id:"required",label:"Required",element:a().createElement(E,{required:!0})},{id:"error",label:"Has error",element:a().createElement(E,{required:!0,hasError:!0})}],O=i.XB.h2,g=i.XB.h3,S=i.XB.p,N=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"lead doc"},"A styled select list that can have a single entry checked at any one time."),O({id:"About-Radio-Button-Group"},"About Radio Button Group"),O({id:"Default"},"Default"),(0,n.createElement)(o.A,null,(0,d.NO)(v)),g({id:"Accessibility"},"Accessibility"),S({},"All form elements marked as required with an must have an accompanying legend."),S({},"Example:\n",(0,n.createElement)(l.A,null)),g({id:"Mobile"},"Mobile"),(0,n.createElement)(u.s9,{patternSpecificText:"radio button groups will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, and also become stacked"}),(0,n.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for radio button groups"},(0,d.NO)(v)),O({id:"States"},"States"),g({id:"Disabled"},"Disabled"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"disabled")),g({id:"Required"},"Required"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"required")),g({id:"Has-Error"},"Has Error"),(0,n.createElement)(o.A,null,(0,d.NO)(_,"error")))},j=function(){return(0,i.Qr)(N())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},a={};function i(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={id:e,exports:{}};return n[e](t,t.exports,i),t.exports}i.m=n,i.amdO={},e=[],i.O=function(r,t,n,a){if(!t){var o=1/0;for(c=0;c<e.length;c++){t=e[c][0],n=e[c][1],a=e[c][2];for(var l=!0,d=0;d<t.length;d++)(!1&a\|\|o>=a)&&Object.keys(i.O).every(function(e){return i.O[e](t[d])})?t.splice(d--,1):(l=!1,a<o&&(o=a));if(l){e.splice(c--,1);var u=n();void 0!==u&&(r=u)}}return r}a=a\|\|0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[t,n,a]},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,{a:r}),r},t=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},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 a=Object.create(null);i.r(a);var o={};r=r\|\|[null,t({}),t([]),t(t)];for(var l=2&n&&e;("object"==typeof l\|\|"function"==typeof l)&&!~r.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach(function(r){o[r]=function(){return e[r]}});return o.default=function(){return e},i.d(a,o),a},i.d=function(e,r){for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},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,r){return Object.prototype.hasOwnProperty.call(e,r)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=6579,function(){var e={6579:0};i.O.j=function(r){return 0===e[r]};var r=function(r,t){var n,a,o=t[0],l=t[1],d=t[2],u=0;if(o.some(function(r){return 0!==e[r]})){for(n in l)i.o(l,n)&&(i.m[n]=l[n]);if(d)var c=d(i)}for(r&&r(t);u<o.length;u++)a=o[u],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(c)},t=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(887)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/radio-button-group/docs.mdx.js"]=o}();

package/__internal/chunked/docs/ui/components/rich-text-editor/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9564:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Z},getElement:function(){return K}});var n=l(1594),r=l.n(n),a=l(5671),i=l(6547),o=(l(2436),l(9582),l(5619),l(8342)),s=l(806),d=l(7412),c=l.n(d),u=l(942),m=l.n(u),b=l(4216),E=l(1412),p=l(6955),f=l(8347),h=l(5159),x=l(3964),y=l(6185),g=(l(5786),l(538)),v=l(2711);function _(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=l){var n,r,a,i,o=[],s=!0,d=!1;try{if(a=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;s=!1}else for(;!(s=(n=a.call(l)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){d=!0,r=e}finally{try{if(!s&&null!=l.return&&(i=l.return(),Object(i)!==i))return}finally{if(d)throw r}}return o}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return N(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l\|\|"Set"===l?Array.from(e):"Arguments"===l\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(l)?N(e,t):void 0}}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function N(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,n=Array(t);l<t;l++)n[l]=e[l];return n}l(5526);var w="rich-text-editor-unique-id-01",O=function(e){return r().createElement(v.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},r().createElement("div",{className:m()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};O.propTypes={children:c().node.isRequired,errorId:c().string,hasError:c().bool,inlineMessage:c().string,labelContent:c().string,labelId:c().string};var T=function(e){return r().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:m()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},I=function(e){var t=e.listboxData,l=e.id;return r().createElement(y.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};I.propTypes={listboxData:c().object.isRequired,id:c().string};var S=function(e){var t=e.listboxData,l=e.id;return r().createElement(y.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};S.propTypes={listboxData:c().object.isRequired,id:c().string};var j=function(e){var t=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],l=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],a=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],i=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0];return r().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:r().createElement(g.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(I,{listboxData:x.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:a,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:r().createElement(g.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(S,{listboxData:x.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},A=function(e){return r().createElement(E.GW,{"aria-label":"Format text"},r().createElement("li",null,r().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},q=function(e){return r().createElement(E.GW,{"aria-label":"Format background & text color"},r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Background Color"))),r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return r().createElement(E.GW,{"aria-label":"Format body"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return r().createElement(E.GW,{"aria-label":"Align text"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},C=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},R=function(e){return r().createElement(E.GW,{"aria-label":"Add user"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"adduser",disabled:e.disabledButtons,assistiveText:"Add User"})))},k=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},D=function(e){return r().createElement("div",{className:m()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))};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 G(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),l.push.apply(l,n)}return l}function P(e,t,l){return(t=function(e){var t=function(e){if("object"!=M(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=M(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==M(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var F=function(e){return r().createElement("div",function(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?G(Object(l),!0).forEach(function(t){P(e,t,l[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):G(Object(l)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))})}return e}({className:m()("demo-only",e.className),style:{minHeight:"180px"}},e),e.children)};F.propTypes={children:c().node,className:c().string};var U=function(e){return r().createElement("div",null,r().createElement("h1",null,"Heading - h1"),r().createElement("p",null,"Lorem ipsum dolor sit amet, ",r().createElement("strong",null,"strong")," adipisicing elit, sed do ",r().createElement("em",null,"emphasis")," tempor incididunt ut ",r().createElement("u",null,"underlined")," et dolore ",r().createElement("s",null,"strikethrough")," aliqua. Ut ",r().createElement("sub",null,"subscript")," ad"," ",r().createElement("sup",null,"superscript")," veniam, ",r().createElement("abbr",null,"quis")," nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ",r().createElement("a",{href:"#"},"link")," in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h2",null,"Heading - h2"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"," ",r().createElement("a",{href:"#"},"veryVeryLongWordWithHyperlinkExample")," tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ul",null,r().createElement("li",null,"Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Unordered list item")),r().createElement("h3",null,"Heading - h3"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ol",null,r().createElement("li",null,"Ordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Ordered list item")),r().createElement("ul",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("ol",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("h4",null,"Heading - h4"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("dl",null,r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description"),r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description")),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("table",null,r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Column"),r().createElement("th",null,"Column"))),r().createElement("tbody",null,r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")),r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")))),r().createElement("h5",null,"Heading - h5"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("blockquote",null,"Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h6",null,"Heading - h6"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"," ",r().createElement("a",{href:"#"},"https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed")," ","quis nostrud ",r().createElement("ins",null,"Content to be inserted.")," exercitation ullamco ",r().createElement("del",null,"Content to be deleted.")," ","laboris nisi ut aliquip ex ea commodo consequat."))},H=[{id:"default",label:"Default",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))}],W=[{id:"focused",label:"Focused",element:r().createElement(F,null,r().createElement(O,{className:"slds-has-focus"},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"filled-out",label:"Filled Out",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(U,null)})))},{id:"error",label:"Error",element:r().createElement(F,null,r().createElement(O,{className:"slds-has-error",inlineMessage:"This field is required",hasError:!0,errorId:"rte-error-01"},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...","aria-describedby":"rte-error-01"})))},{id:"disabled",label:"Disabled",element:r().createElement(F,null,r().createElement(O,{disabledLabel:"disabled"},r().createElement(T,{disabledButtons:!0,disabledLabel:"disabled"},r().createElement(A,{tabIndexSetting:"0",disabledButtons:!0}),r().createElement(L,{disabledButtons:!0}),r().createElement(k,{disabledButtons:!0})),r().createElement(D,{placeholder:"Compose text...",disabled:!0})))},{id:"tooltip",label:"Tooltip",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0",hasTooltip:!0}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."}),r().createElement(b.m_,{className:"slds-nubbin_top-left",id:"bold",style:{position:"absolute",top:"48px",left:"2px"}},"Bold ",r().createElement("kbd",null,"cmd+b"))))},{id:"toolbar-only",label:"Toolbar Only",element:r().createElement(F,null,r().createElement(O,{isToolbarOnly:!0},r().createElement(T,{isToolbarOnly:!0},r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null))))}],z=[{id:"bottom-toolbar",label:"Bottom toolbar",element:r().createElement(F,null,r().createElement(O,null,r().createElement(D,{placeholder:"Compose text..."}),r().createElement(T,{className:"slds-rich-text-editor__toolbar_bottom"},r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null))))},{id:"with-label",label:"With a Label",element:r().createElement(F,null,r().createElement(O,{label:"Details and Steps to Reproduce",labelId:w},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...",labelId:w})))},{id:"email",label:"Email",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(j,null),r().createElement(A,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"toolbar-narrow",label:"Toolbar Narrow",element:r().createElement(F,{style:{width:"294px"},className:"slds-region_narrow"},r().createElement(O,null,r().createElement(T,null,r().createElement(j,null),r().createElement(A,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"feed",label:"Feed",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(R,null),r().createElement(k,null)),r().createElement(D,{label:"Post to feed",placeholder:"Post to feed..."})))},{id:"note",label:"Notes",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose note",placeholder:"Compose Note..."})))},{id:"styling-hooks-rte-min-height",label:"Styling Hooks - Base (Min Height)",demoStyles:"\n --sds-c-textarea-sizing-min-height: 3rem;\n ",storybookStyles:!0,element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"styling-hooks-rte-max-height",label:"Styling Hooks - Base (Max Height)",demoStyles:"\n --sds-c-textarea-sizing-max-height: 10rem;\n ",storybookStyles:!0,element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(U,null)})))}],X=a.XB.code,J=a.XB.h2,Q=a.XB.h3,V=a.XB.p,K=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"The Rich Text Editor is a textarea with added capabilities for use in various publishers."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,s.NO)(W,"filled-out")),J({id:"About-Rich-Text-Editor"},"About Rich Text Editor"),V({},"At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”."),V({},'The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.'),V({},"On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class ",X({},"slds-region_narrow")," to the outermost ",X({},"div")," of the rich text editor."),V({},"A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a ",X({},"<span>")," element with the class ",X({},"slds-form-element__label"),", right before the ",X({},"slds-form-element__control")," element."),Q({id:"Accessibility"},"Accessibility"),V({},"Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button."),J({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,s.NO)(H)),J({id:"States"},"States"),Q({id:"Focused"},"Focused"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"focused")),Q({id:"Filled-Out"},"Filled Out"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"filled-out")),Q({id:"Error"},"Error"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"error")),Q({id:"Disabled"},"Disabled"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"disabled")),Q({id:"Tooltip"},"Tooltip"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"tooltip")),J({id:"Examples"},"Examples"),Q({id:"Bottom-toolbar"},"Bottom toolbar"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"bottom-toolbar")),Q({id:"With-a-Label"},"With a Label"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"with-label")),Q({id:"Email"},"Email"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"email")),Q({id:"Toolbar-Narrow"},"Toolbar Narrow"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"toolbar-narrow")),Q({id:"Feed"},"Feed"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"feed")),Q({id:"Notes"},"Notes"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"note")),J({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(o.A,{name:"rich-text-editor",type:"component"}))},Z=function(){return(0,a.Qr)(K())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,r){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],r=e[c][2];for(var o=!0,s=0;s<l.length;s++)(!1&r\|\|i>=r)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(o=!1,r<i&&(i=r));if(o){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}r=r\|\|0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[l,n,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var r=Object.create(null);a.r(r);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(r,i),r},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=1399,function(){var e={1399:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,r,i=l[0],o=l[1],s=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(n in o)a.o(o,n)&&(a.m[n]=o[n]);if(s)var c=s(a)}for(t&&t(l);d<i.length;d++)r=i[d],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(9564)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/rich-text-editor/docs.mdx.js"]=i}();
1	+ var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9564:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Z},getElement:function(){return K}});var n=l(1594),r=l.n(n),a=l(5671),i=l(6547),o=(l(2436),l(9582),l(5619),l(8342)),s=l(806),d=l(7412),c=l.n(d),u=l(942),m=l.n(u),b=l(4216),E=l(1412),p=l(6955),f=l(8347),h=l(5159),x=l(3964),y=l(6185),g=(l(5786),l(538)),v=l(2711);function _(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=l){var n,r,a,i,o=[],s=!0,d=!1;try{if(a=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;s=!1}else for(;!(s=(n=a.call(l)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){d=!0,r=e}finally{try{if(!s&&null!=l.return&&(i=l.return(),Object(i)!==i))return}finally{if(d)throw r}}return o}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return N(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l\|\|"Set"===l?Array.from(e):"Arguments"===l\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(l)?N(e,t):void 0}}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function N(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,n=Array(t);l<t;l++)n[l]=e[l];return n}l(5526);var w="rich-text-editor-unique-id-01",O=function(e){return r().createElement(v.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},r().createElement("div",{className:m()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};O.propTypes={children:c().node.isRequired,errorId:c().string,hasError:c().bool,inlineMessage:c().string,labelContent:c().string,labelId:c().string};var T=function(e){return r().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:m()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},I=function(e){var t=e.listboxData,l=e.id;return r().createElement(y.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};I.propTypes={listboxData:c().object.isRequired,id:c().string};var S=function(e){var t=e.listboxData,l=e.id;return r().createElement(y.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};S.propTypes={listboxData:c().object.isRequired,id:c().string};var j=function(e){var t=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],l=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],a=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],i=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0];return r().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:r().createElement(g.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(I,{listboxData:x.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:a,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:r().createElement(g.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(S,{listboxData:x.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},A=function(e){return r().createElement(E.GW,{"aria-label":"Format text"},r().createElement("li",null,r().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},q=function(e){return r().createElement(E.GW,{"aria-label":"Format background & text color"},r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Background Color"))),r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return r().createElement(E.GW,{"aria-label":"Format body"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return r().createElement(E.GW,{"aria-label":"Align text"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},C=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},R=function(e){return r().createElement(E.GW,{"aria-label":"Add user"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"adduser",disabled:e.disabledButtons,assistiveText:"Add User"})))},k=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},D=function(e){return r().createElement("div",{className:m()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))};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 G(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),l.push.apply(l,n)}return l}function P(e,t,l){return(t=function(e){var t=function(e){if("object"!=M(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=M(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==M(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var F=function(e){return r().createElement("div",function(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?G(Object(l),!0).forEach(function(t){P(e,t,l[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):G(Object(l)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))})}return e}({className:m()("demo-only",e.className),style:{minHeight:"180px"}},e),e.children)};F.propTypes={children:c().node,className:c().string};var U=function(e){return r().createElement("div",null,r().createElement("h1",null,"Heading - h1"),r().createElement("p",null,"Lorem ipsum dolor sit amet, ",r().createElement("strong",null,"strong")," adipisicing elit, sed do ",r().createElement("em",null,"emphasis")," tempor incididunt ut ",r().createElement("u",null,"underlined")," et dolore"," ",r().createElement("s",null,"strikethrough")," aliqua. Ut ",r().createElement("sub",null,"subscript")," ad"," ",r().createElement("sup",null,"superscript")," veniam, ",r().createElement("abbr",null,"quis")," nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ",r().createElement("a",{href:"#"},"link")," in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h2",null,"Heading - h2"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"," ",r().createElement("a",{href:"#"},"veryVeryLongWordWithHyperlinkExample")," tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ul",null,r().createElement("li",null,"Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Unordered list item")),r().createElement("h3",null,"Heading - h3"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ol",null,r().createElement("li",null,"Ordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Ordered list item")),r().createElement("ul",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("ol",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("h4",null,"Heading - h4"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("dl",null,r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description"),r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description")),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("table",null,r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Column"),r().createElement("th",null,"Column"))),r().createElement("tbody",null,r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")),r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")))),r().createElement("h5",null,"Heading - h5"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("blockquote",null,"Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h6",null,"Heading - h6"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"," ",r().createElement("a",{href:"#"},"https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed")," ","quis nostrud ",r().createElement("ins",null,"Content to be inserted.")," exercitation ullamco"," ",r().createElement("del",null,"Content to be deleted.")," laboris nisi ut aliquip ex ea commodo consequat."))},H=[{id:"default",label:"Default",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))}],W=[{id:"focused",label:"Focused",element:r().createElement(F,null,r().createElement(O,{className:"slds-has-focus"},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"filled-out",label:"Filled Out",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(U,null)})))},{id:"error",label:"Error",element:r().createElement(F,null,r().createElement(O,{className:"slds-has-error",inlineMessage:"This field is required",hasError:!0,errorId:"rte-error-01"},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...","aria-describedby":"rte-error-01"})))},{id:"disabled",label:"Disabled",element:r().createElement(F,null,r().createElement(O,{disabledLabel:"disabled"},r().createElement(T,{disabledButtons:!0,disabledLabel:"disabled"},r().createElement(A,{tabIndexSetting:"0",disabledButtons:!0}),r().createElement(L,{disabledButtons:!0}),r().createElement(k,{disabledButtons:!0})),r().createElement(D,{placeholder:"Compose text...",disabled:!0})))},{id:"tooltip",label:"Tooltip",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0",hasTooltip:!0}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."}),r().createElement(b.m_,{className:"slds-nubbin_top-left",id:"bold",style:{position:"absolute",top:"48px",left:"2px"}},"Bold ",r().createElement("kbd",null,"cmd+b"))))},{id:"toolbar-only",label:"Toolbar Only",element:r().createElement(F,null,r().createElement(O,{isToolbarOnly:!0},r().createElement(T,{isToolbarOnly:!0},r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null))))}],z=[{id:"bottom-toolbar",label:"Bottom toolbar",element:r().createElement(F,null,r().createElement(O,null,r().createElement(D,{placeholder:"Compose text..."}),r().createElement(T,{className:"slds-rich-text-editor__toolbar_bottom"},r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null))))},{id:"with-label",label:"With a Label",element:r().createElement(F,null,r().createElement(O,{label:"Details and Steps to Reproduce",labelId:w},r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...",labelId:w})))},{id:"email",label:"Email",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(j,null),r().createElement(A,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"toolbar-narrow",label:"Toolbar Narrow",element:r().createElement(F,{style:{width:"294px"},className:"slds-region_narrow"},r().createElement(O,null,r().createElement(T,null,r().createElement(j,null),r().createElement(A,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"feed",label:"Feed",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(R,null),r().createElement(k,null)),r().createElement(D,{label:"Post to feed",placeholder:"Post to feed..."})))},{id:"note",label:"Notes",element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose note",placeholder:"Compose Note..."})))},{id:"styling-hooks-rte-min-height",label:"Styling Hooks - Base (Min Height)",demoStyles:"\n --sds-c-textarea-sizing-min-height: 3rem;\n ",storybookStyles:!0,element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"styling-hooks-rte-max-height",label:"Styling Hooks - Base (Max Height)",demoStyles:"\n --sds-c-textarea-sizing-max-height: 10rem;\n ",storybookStyles:!0,element:r().createElement(F,null,r().createElement(O,null,r().createElement(T,null,r().createElement(A,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(U,null)})))}],X=a.XB.code,J=a.XB.h2,Q=a.XB.h3,V=a.XB.p,K=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"The Rich Text Editor is a textarea with added capabilities for use in various publishers."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,s.NO)(W,"filled-out")),J({id:"About-Rich-Text-Editor"},"About Rich Text Editor"),V({},"At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”."),V({},'The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.'),V({},"On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class ",X({},"slds-region_narrow")," to the outermost ",X({},"div")," of the rich text editor."),V({},"A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a ",X({},"<span>")," element with the class ",X({},"slds-form-element__label"),", right before the ",X({},"slds-form-element__control")," element."),Q({id:"Accessibility"},"Accessibility"),V({},"Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button."),J({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,s.NO)(H)),J({id:"States"},"States"),Q({id:"Focused"},"Focused"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"focused")),Q({id:"Filled-Out"},"Filled Out"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"filled-out")),Q({id:"Error"},"Error"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"error")),Q({id:"Disabled"},"Disabled"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"disabled")),Q({id:"Tooltip"},"Tooltip"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"tooltip")),J({id:"Examples"},"Examples"),Q({id:"Bottom-toolbar"},"Bottom toolbar"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"bottom-toolbar")),Q({id:"With-a-Label"},"With a Label"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"with-label")),Q({id:"Email"},"Email"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"email")),Q({id:"Toolbar-Narrow"},"Toolbar Narrow"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"toolbar-narrow")),Q({id:"Feed"},"Feed"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"feed")),Q({id:"Notes"},"Notes"),(0,n.createElement)(i.A,null,(0,s.NO)(z,"note")),J({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(o.A,{name:"rich-text-editor",type:"component"}))},Z=function(){return(0,a.Qr)(K())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,r){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],r=e[c][2];for(var o=!0,s=0;s<l.length;s++)(!1&r\|\|i>=r)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(o=!1,r<i&&(i=r));if(o){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}r=r\|\|0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[l,n,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var r=Object.create(null);a.r(r);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(r,i),r},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=1399,function(){var e={1399:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,r,i=l[0],o=l[1],s=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(n in o)a.o(o,n)&&(a.m[n]=o[n]);if(s)var c=s(a)}for(t&&t(l);d<i.length;d++)r=i[d],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(9564)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/rich-text-editor/docs.mdx.js"]=i}();