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