@salesforce-ux/design-system/__internal/chunked/docs/ui/components/button-icons/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],c=t[2],b=0,m=[];b<r.length;b++)o=r[b],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&m.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(d&&d(t);m.length;)m.shift()();return s.push.apply(s,c||[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(s.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={12:0},s=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=i;return s.push([721,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},721:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return V})),n.d(t,"getContents",(function(){return X}));var a=n(0),l=n.n(a),s=n(4),o=n(2),r=n(27),i=n(14),c=n(15),d=n(28),b=n(45),m=n(7),u=n(12),h=n(9),O=[{id:"default",label:"Base – default",element:l.a.createElement(m.b,{assistiveText:"Settings",title:"Settings"})}],p=[{id:"error",label:"Base - Error",element:l.a.createElement(m.b,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:l.a.createElement(m.b,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:l.a.createElement(m.b,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],j=[{id:"hint-hover",label:"Base - Hint on hover",element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:l.a.createElement(u.a,{className:"slds-button_icon slds-button_icon-border"},l.a.createElement("span",{className:"slds-assistive-text"},"Error"),l.a.createElement(h.a,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],E="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],v=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],y="background-color: #16325C; padding: 0.5rem;",S=[{id:"default",label:"Bordered Inverse – default",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],_=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],w=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],x=[{id:"default",label:"Bordered Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],T=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],M=[{id:"with-dropdown",label:"Bordered Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{theme:"transparent",hasDropdown:!0,className:"slds-button_icon-border",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],k=[{id:"default",label:"Brand – default",element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],B=[{id:"disabled",label:"Brand – Disabled",element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C=[{id:"default",label:"Inverse – default",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],N=[{id:"disabled",label:"Inverse - Disabled",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],I=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],D=n(135),z=[{id:"default",label:"Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],W=[{id:"disabled",label:"Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],F=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],H=n(1),A=n(39),L=s.c.a,P=s.c.code,J=s.c.h2,q=s.c.h3,R=s.c.h4,U=s.c.p,V=function(){return Object(a.createElement)(s.b,{},Object(a.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),Object(a.createElement)(o.a,{exampleOnly:!0},Object(a.createElement)(l.a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),J({id:"About-Button-Icons"},"About Button Icons"),U({},"Button icons are button elements that represent their behavior with an ",L({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",P({},"slds-button")," and ",P({},"slds-button_icon"),", while the svg icon has ",P({},"slds-button__icon")," on it. Size modifiers can be added, the default sizing represents a medium variant."),U({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),q({id:"Accessibility"},"Accessibility"),U({},"If an icon button doesn’t include a label, use a ",P({},"title")," attribute to show on hover for sighted users, and a span with class ",P({},"slds-assistive-text")," to describe the button's action for screen readers."),U({},"When using assistive text, the icon element itself should have ",P({},"aria-hidden")," set to ",P({},"true"),"."),Object(a.createElement)(i.a,{type:"a11y",header:"Note"},Object(a.createElement)("p",null,"To display the modals blueprint close (X) button correctly, don’t use the ",Object(a.createElement)("code",null,"slds-button_icon-inverse")," class for your close button markup. The ",Object(a.createElement)("code",null,"slds-button_icon-inverse")," is no longer used in the modal blueprint.")),q({id:"Mobile"},"Mobile"),Object(a.createElement)(A.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},Object(a.createElement)(l.a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),J({id:"Base"},"Base"),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(O)),J({id:"Variations"},"Variations"),q({id:"Brand"},"Brand"),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(k)),q({id:"Inverse"},"Inverse"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(C)},Object(H.f)(C)),q({id:"Icon-Containers"},"Icon Containers"),U({},"Icon containers remove button styling from the button, leaving a bare icon."),U({},"For a bare icon with transparent container, add ",P({},"slds-button_icon-container")," to the ",P({},"<button>"),". To add a border, use the ",P({},"slds-button_icon-border")," class instead."),U({},"For a neutral themed button icon, with border and a filled background, use the ",P({},"slds-button_icon-border-filled")," class to the ",P({},"slds-button")," class."),U({},"Use the inverse button on dark backgrounds by adding the ",P({},"slds-button_inverse")," class to the ",P({},"slds-button")," class."),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bare - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(z)},Object(H.f)(z))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered - filled container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(f)},Object(H.f)(f))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(x)},Object(H.f)(x))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(S)},Object(H.f)(S)))),q({id:"Stateful"},"Stateful"),U({},"The stateful button requires the ",P({},"slds-button_icon-border")," class in addition to the ",P({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",P({},"slds-button_icon-border-inverse")," class in addition to the ",P({},"slds-button")," class."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(D.b)),Object(a.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"For accessibility, implement the ",Object(a.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),Object(a.createElement)("ul",{className:"slds-list_dotted"},Object(a.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),Object(a.createElement)("li",null,"Button text doesn't change per state"),Object(a.createElement)("li",null,Object(a.createElement)("code",null,"aria-pressed")," is set to ",Object(a.createElement)("code",null,"true")," or ",Object(a.createElement)("code",null,"false"),", depending on its state"))),R({id:"Selected"},"Selected"),U({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",P({},"slds-is-selected")," class to the button when activated."),Object(a.createElement)(o.a,null,Object(H.f)(D.c,"button-icon-stateful-selected")),R({id:"Disabled"},"Disabled"),U({},"You can disable a stateful button icon by applying the ",P({},"disabled")," attribute to the ",P({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(H.f)(D.c,"button-icon-stateful-disabled"),Object(H.f)(D.c,"button-icon-stateful-selected-disabled"))),J({id:"Sizes"},"Sizes"),q({id:"Bare-Icon"},"Bare Icon"),U({},"The bare variant can be displayed in three other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),"—by adding a sizing class on the ",P({},"<svg>")," icon itself."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",null,Object(a.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),Object(a.createElement)(c.a,{title:"Sizes"},Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),q({id:"Icon-Container"},"Icon Container"),U({},"Contained variants can be displayed in four other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),", ",P({},"xx-small"),"—by adding a sizing class on the ",P({},"<button>"),"."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),Object(a.createElement)(c.a,{title:"Sizes"},Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),J({id:"States"},"States"),q({id:"Disabled-2"},"Disabled"),U({},"Use a disabled attribute when a button can’t be clicked."),U({},"To create a disabled button, append the ",P({},"disabled")," attribute to the ",P({},"<button>"),"."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Base"),Object(a.createElement)(o.a,null,Object(H.f)(p,"bare-disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Brand"),Object(a.createElement)(o.a,null,Object(H.f)(B,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(W,"disabled")},Object(H.f)(W,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(N,"disabled")},Object(H.f)(N,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(v,"disabled")},Object(H.f)(v,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered transparent"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(T,"disabled")},Object(H.f)(T,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(_,"disabled")},Object(H.f)(_,"disabled")))),q({id:"Error"},"Error"),U({},"Error button icons are typically used in conjunction with an ",L({href:"../popovers/#Error"},"error popover"),"."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"error")),q({id:"Warning"},"Warning"),U({},"Warning button icons are typically used in conjunction with a ",L({href:"../popovers/#Warning"},"warning popover"),"."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"warning")),J({id:"Examples"},"Examples"),q({id:"Hint-on-hover"},"Hint on hover"),U({},"A parent class, ",P({},"slds-hint-parent"),", must be put on any wrapper, and ",P({},"slds-button__icon_hint")," must be added to the button's ",P({},"<svg>")," so that the child reacts when the parent is hovered."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(m.a,null,Object(a.createElement)("button",{className:"slds-button slds-button_icon"},Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Base"),Object(a.createElement)(o.a,null,Object(H.f)(j,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(F,"hint-hover")},Object(H.f)(F,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(g,"hint-hover")},Object(H.f)(g,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered transparent"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(M,"hint-hover")},Object(H.f)(M,"hint-hover")))),R({id:"Inverse-2"},"Inverse"),U({},"In the case of inverse, use the ",P({},"slds-button__icon_inverse-hint")," class on the button's ",P({},"<svg>")," instead."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(m.a,null,Object(a.createElement)("button",{className:"slds-button slds-button_icon"},Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(I,"hint-hover")},Object(H.f)(I,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(w,"hint-hover")},Object(H.f)(w,"hint-hover")))),q({id:"With-a-Dropdown"},"With a Dropdown"),U({},"If the button opens a menu, add ",P({},"slds-button_icon-more")," class to the bordered variant or ",P({},"slds-button_icon-container-more")," to the transparent variant's ",P({},"<button>")," and a ",P({},"down")," icon within the button to indicate the behavior."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},Object(a.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(F,"with-dropdown")},Object(H.f)(F,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(I,"with-dropdown")},Object(H.f)(I,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(g,"with-dropdown")},Object(H.f)(g,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(w,"with-dropdown")},Object(H.f)(w,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered transparent"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(M,"with-dropdown")},Object(H.f)(M,"with-dropdown")))))},X=function(){return Object(s.a)(V())}}});