@salesforce-ux/design-system 2.17.4 → 2.17.5

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

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],b=0,u=[];b<n.length;b++)c=n[b],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&u.push(l[c][0]),l[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);u.length;)u.shift()();return i.push.apply(i,s||[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],a=!0,n=1;n<r.length;n++){var o=r[n];0!==l[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=r[0]))}return e}var a={},l={20:0},i=[];function c(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=a,c.d=function(e,t,r){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(r,a,function(t){return e[t]}.bind(null,a));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([734,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},734:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return w})),r.d(t,"getContents",(function(){return q}));var a=r(0),l=r.n(a),i=r(4),c=r(2),n=(r(26),r(14),r(38)),o=r(30),s=r(76),d=r(8),b=r(11),u=l.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:l.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:l.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:l.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:l.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:l.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],p=[{id:"help-text-icon",label:"Help text icon",element:l.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:l.a.createElement("div",{style:{paddingTop:"3rem"}},l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],m=r(1),f=r(36),O=i.c.a,x=i.c.code,j=i.c.h2,k=i.c.h3,E=i.c.h4,g=i.c.h5,y=i.c.p,w=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(m.f)(o.b)),j({id:"About-Checkbox"},"About Checkbox"),y({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),k({id:"Accessibility"},"Accessibility"),y({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),y({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),y({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required">*</abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),y({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required">*</abbr>')," added to the DOM for visual indication that the checkbox group is required."),y({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),k({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(m.f)(o.b)),j({id:"Base"},"Base"),y({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),y({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(m.f)(o.b)),k({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(m.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(m.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"disabled")),g({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"checked-and-disabled")),k({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(m.f)(o.c,"group")),g({id:"Group-with-Wrapping-Labels"},"Group with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text")),g({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(m.f)(o.c,"group-required")),g({id:"Required-with-Wrapping-Labels"},"Required with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text-required-group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text-required-group")),g({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(m.f)(o.c,"group-error")),g({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"rtl")),j({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(m.f)(u)),k({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(h,"required")),k({id:"View-mode"},"View mode"),y({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-checked")),k({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon-tooltip")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},q=function(){return Object(i.a)(w())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],u=0,b=[];u<n.length;u++)c=n[u],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&b.push(r[c][0]),r[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,s||[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,n=1;n<l.length;n++){var o=l[n];0!==r[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=l[0]))}return e}var a={},r={20:0},i=[];function c(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=a,c.d=function(e,t,l){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(l,a,function(t){return e[t]}.bind(null,a));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([734,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},734:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return v})),l.d(t,"getContents",(function(){return w}));var a=l(0),r=l.n(a),i=l(4),c=l(2),n=(l(26),l(14),l(38)),o=l(30),s=l(76),d=l(8),u=l(11),b=r.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:r.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:r.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:r.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:r.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:r.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],m=[{id:"help-text-icon",label:"Help text icon",element:r.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:r.a.createElement("div",{style:{paddingTop:"3rem"}},r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],p=l(1),f=l(36),O=i.c.a,x=i.c.code,k=i.c.h2,j=i.c.h3,E=i.c.h4,y=i.c.h5,g=i.c.p,v=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(p.f)(o.b)),k({id:"About-Checkbox"},"About Checkbox"),g({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),j({id:"Accessibility"},"Accessibility"),g({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),g({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),g({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required">*</abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),g({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required">*</abbr>')," added to the DOM for visual indication that the checkbox group is required."),g({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),j({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(p.f)(o.b)),k({id:"Base"},"Base"),g({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),g({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(p.f)(o.b)),j({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(p.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(p.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"disabled")),y({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"checked-and-disabled")),j({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(p.f)(o.c,"group")),y({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(p.f)(o.c,"group-required")),y({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(p.f)(o.c,"group-error")),y({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"rtl")),k({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(p.f)(b)),j({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(h,"required")),j({id:"View-mode"},"View mode"),g({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-checked")),j({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon-tooltip")),k({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},w=function(){return Object(i.a)(v())}}});

package/__internal/chunked/docs/ui/components/dueling-picklist/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dueling-picklist/docs.mdx.js"]=function(e){function t(t){for(var i,c,s=t[0],o=t[1],r=t[2],u=0,m=[];u<s.length;u++)c=s[u],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&m.push(a[c][0]),a[c]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,r||[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],i=!0,s=1;s<l.length;s++){var o=l[s];0!==a[o]&&(i=!1)}i&&(n.splice(t--,1),e=c(c.s=l[0]))}return e}var i={},a={31:0},n=[];function c(t){if(i[t])return i[t].exports;var l=i[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=i,c.d=function(e,t,l){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)c.d(l,i,function(t){return e[t]}.bind(null,i));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=s.push.bind(s);s.push=t,s=s.slice();for(var r=0;r<s.length;r++)t(s[r]);var d=o;return n.push([649,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},649:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return E})),l.d(t,"getContents",(function(){return f}));var i=l(0),a=l(4),n=l(2),c=l(26),s=l(15),o=l(14),r=l(35),d=(l(137),a.c.a),u=a.c.code,m=a.c.em,b=a.c.h2,h=a.c.h3,p=a.c.h4,j=a.c.li,g=a.c.p,O=a.c.ul,E=function(){return Object(i.createElement)(a.b,{},Object(i.createElement)("div",{className:"doc lead"},"A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case."),Object(i.createElement)(n.a,{exampleOnly:!0},Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0})),b({id:"About-Dueling-Picklist"},"About Dueling-Picklist"),h({id:"Accessibility"},"Accessibility"),g({},"This component is essentially 2 ARIA listboxes side by side, so we follow the ",d({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA practices guide")," to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:"),p({id:"Markup"},"Markup"),O({},j({},u({},'aria-multiselectable="true"')," should be set on each listbox"),j({},u({},"aria-selected")," should be placed on each ",u({},'role="option"'),", and set to ",u({},"false")," by default"),j({},u({},"aria-labelledby")," is used to identify the list to the user and should point to the list label"),j({},u({},"aria-describedby")," is used to provide operation instructions for the Drag and Drop interaction"),j({},u({},"tabindex"),' should be set to "0" when an item is selected and "-1" otherwise')),p({id:"Focus-Management"},"Focus Management"),O({},j({},"Initially, nothing should be selected and the first item in each list should have ",u({},'tabindex="0"')),j({},"When an item is focused, it becomes selected"),j({},"When focus leaves the list, the last selected item remains selected and focusable. When focus returns to the list focus is placed on the last selected item."),j({},"When moving items:",O({},j({},"With the move button: the items are unselected and added to the target list. The focus should remain on the move button."),j({},"With a keyboard shortcut: focus remains on the item, but in the target list. Since the item is focused, it is also selected."),j({},"If there are already selected items in the target list, they stay selected and the new items are added below them.")))),p({id:"Keyboard-Interactions"},"Keyboard Interactions"),O({},j({},"Each list has a single focusable option inside. There is only ever one focusable option per list and it is expected that a user will use their arrow keys, and some modifier keys, to perform all actions."),j({},"Because we support drag and drop re-ordering within a list, we implement the second multi-select keyboard model.",O({},j({},u({},"up")," and ",u({},"down")," arrows move focus ",m({},"and")," selection, with ",u({},'aria-selected="true"'),". Any previously selected items are deselected."),j({},u({},"shift + up")," and ",u({},"shift + down")," move focus and creates addition selections"),j({},u({},"ctrl + down")," or ",u({},"ctrl + up")," moves focus but selection remains where it is"),j({},u({},"ctrl + space")," toggles selection on the focused option, in addition to previous selections"),j({},u({},"ctrl + a")," selects all options in the list"),j({},u({},"cmd/ctrl + right")," and ",u({},"cmd/ctrl + left")," Moves selected items between lists"),j({},u({},"space"),' toggles "Drag and Drop" mode. When in "Drag and Drop" mode:',O({},j({},u({},"up")," and ",u({},"down")," arrows move the selected items ",m({},"within")," the current list")))))),b({id:"Base"},"Base"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder"},Object(i.createElement)(r.j,{dataSet:r.b})),b({id:"Group-Label"},"Group Label"),g({},"A Dueling Picklist should have a group label, similar to using a ",u({},"fieldset")," and ",u({},"legend")," on grouped form controls. To achieve this, wrap the Dueling Picklist in an ",u({},"slds-form-element")," and add a ",u({},"div")," with the same class names that are applied to a ",u({},"legend")," element in a fieldset, ",u({},"slds-form-element__label slds-form-element__legend"),"."),Object(i.createElement)(o.a,{header:"Labeling the group",type:"a11y"},Object(i.createElement)("p",null,"It is important that the ",Object(i.createElement)("code",null,"slds-form-element")," ",Object(i.createElement)("code",null,"<div>")," has the ",Object(i.createElement)("code",null,'role="group"')," attribute applied, along with ",Object(i.createElement)("code",null,"aria-labelledby"),", whose value is the ID of the visible group label.")),Object(i.createElement)(s.a,{title:"Dueling Picklist With Group Label"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),b({id:"Responsive"},"Responsive"),g({},"To make the dueling picklist responsive or use it within narrow regions, apply the class ",u({},"slds-dueling-picklist__column_responsive")," to the ",u({},"<div>"),"s with class ",u({},"slds-dueling-picklist__column")," that contain options (not the columns that only contain buttons). The dueling picklist will take up all available horizontal space, and any items longer than the available space will truncate with an ellipsis."),Object(i.createElement)(s.a,{title:"Dueling Picklist Responsive"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0,isResponsive:!0}))),Object(i.createElement)(o.a,{header:"Adjusting Height",type:"note"},Object(i.createElement)("p",null,"To adjust the height of the listboxes, set the height using an inline style on _both_ of the ",Object(i.createElement)("code",null,"<div>"),"s with class ",Object(i.createElement)("code",null,"slds-dueling-picklist__column"),". If you are setting it based on a maximum number of items being shown before scrolling, you can set ",Object(i.createElement)("code",null,"height = (2.25rem * numItems) + 1rem"),".")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-1"},"Available Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")),Object(i.createElement)("div",{className:"slds-dueling-list__column"},"..."),Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-2"},"Selected Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")))),b({id:"Edit-Mode"},"Edit Mode"),g({},"If the user needs to select multiple options for a field, like a list of languages supported, then use a dueling picklist without the re-order arrows on the right."),Object(i.createElement)(o.a,{header:"Helpful Assistive Text",type:"a11y"},Object(i.createElement)("p",null,"The assistive text content in the ",Object(i.createElement)("code",null,"option-drag-label")," ",Object(i.createElement)("code",null,"<div>")," should provide clear instructions on how to drag and drop with a keyboard. See the ",Object(i.createElement)("a",{href:"#Keyboard-Interactions"},"keyboard interactions section")," above for modifier key information.")),Object(i.createElement)(s.a,{title:"Dueling Picklist"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0}))),h({id:"Selected-Item"},"Selected Item"),Object(i.createElement)(o.a,{header:"Aria Selected",type:"a11y"},Object(i.createElement)("p",null,Object(i.createElement)("code",null,"aria-selected")," should be placed on each"," ",Object(i.createElement)("code",null,'role="option"'),", and set to"," ",Object(i.createElement)("code",null,"true")," when the item is selected.")),Object(i.createElement)(s.a,{title:"Dueling Picklist with Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0}))),h({id:"Multiple-Selected-Items"},"Multiple Selected Items"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Multiple Items Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.l,noReorder:!0}))),h({id:"Dropped-Items"},"Dropped Items"),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"The ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with ",Object(i.createElement)("code",null,'aria-live="assertive"')," should update as items are moved to provide context about the state and location of the items.")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},"Arabic and German: Moved to Selected Languages."))),Object(i.createElement)(s.a,{title:"Dueling Picklist with Items Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.e,noReorder:!0}))),h({id:"Locked-Items"},"Locked Items"),g({},"If items are not able to be removed or reordered from the selected list, a lock icon appears next to the item name."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled and Assistive Text"},Object(i.createElement)("p",null,"For each locked item, ",Object(i.createElement)("code",null,'aria-disabled="true"')," must be applied to ",Object(i.createElement)("code",null,".slds-listbox__option")," and assistive text (",Object(i.createElement)("code",null,".slds-assistive-text"),") must be added to"," ",Object(i.createElement)("code",null,".slds-icon_container"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist with a Locked Item"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.h,noReorder:!0}))),h({id:"With-Reordering"},"With Reordering"),g({},"If the order of the selected options matters, include the vertical arrows to the right. This allows the user to reorder the second listbox of options."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),g({},"The following examples show the process of selecting an item, moving it within a list, and dropping it in a final position."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"Pay attention to the ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with"," ",Object(i.createElement)("code",null,'aria-live="assertive"'),". This should update as items are moved to provide context about the state and location of the items at all times.")),p({id:"Item-Selected"},"Item Selected"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.n}))),p({id:"Item-Grabbed"},"Item Grabbed"),g({},"Within a list, users are able to drag and drop an item."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Grabbed"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.g}))),p({id:"Item-Moved-Within-a-List"},"Item Moved Within a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Moved within List"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.i}))),p({id:"Item-Dropped-in-a-List"},"Item Dropped in a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.f}))),h({id:"Disabled"},"Disabled"),g({},"If the user is not able to interact with the dueling picklist, then it should be marked as disabled."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled"},Object(i.createElement)("p",null,"In disabled mode, both list boxes"," ",Object(i.createElement)("code",null,"ul[role=listbox]")," should receive"," ",Object(i.createElement)("code",null,'aria-disabled="true"'),", and all directional buttons should receive the ",Object(i.createElement)("code",null,"disabled")," attribute.")),Object(i.createElement)(o.a,{type:"note",header:"Utility Class"},Object(i.createElement)("p",null,"The class ",Object(i.createElement)("code",null,"slds-is-disabled")," should also be applied to the divs with the class"," ",Object(i.createElement)("code",null,"slds-dueling-list_options"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist Disabled"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.d,disabled:!0}))),h({id:"Required"},"Required"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0}))),h({id:"With-Tooltip"},"With Tooltip"),g({},"If some contextual information regarding the dueling picklist is needed, add a tooltip next to the group label."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,hasTooltip:!0,showTooltip:!0})))),h({id:"Required-With-Tooltip"},"Required With Tooltip"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator and Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0,hasTooltip:!0,showTooltip:!0})))),b({id:"View-Mode"},"View Mode"),g({},"When the user is done selecting options, or is in view mode of the field, they are presented with a comma separated list."),Object(i.createElement)(s.a,{title:"Dueling Picklist in View Mode"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.k,null))))},f=function(){return Object(a.a)(E())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dueling-picklist/docs.mdx.js"]=function(e){function t(t){for(var i,c,s=t[0],o=t[1],r=t[2],u=0,m=[];u<s.length;u++)c=s[u],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&m.push(a[c][0]),a[c]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,r||[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],i=!0,s=1;s<l.length;s++){var o=l[s];0!==a[o]&&(i=!1)}i&&(n.splice(t--,1),e=c(c.s=l[0]))}return e}var i={},a={31:0},n=[];function c(t){if(i[t])return i[t].exports;var l=i[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=i,c.d=function(e,t,l){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)c.d(l,i,function(t){return e[t]}.bind(null,i));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=s.push.bind(s);s.push=t,s=s.slice();for(var r=0;r<s.length;r++)t(s[r]);var d=o;return n.push([649,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},649:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return E})),l.d(t,"getContents",(function(){return f}));var i=l(0),a=l(4),n=l(2),c=l(26),s=l(15),o=l(14),r=l(34),d=(l(137),a.c.a),u=a.c.code,m=a.c.em,b=a.c.h2,h=a.c.h3,p=a.c.h4,j=a.c.li,g=a.c.p,O=a.c.ul,E=function(){return Object(i.createElement)(a.b,{},Object(i.createElement)("div",{className:"doc lead"},"A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case."),Object(i.createElement)(n.a,{exampleOnly:!0},Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0})),b({id:"About-Dueling-Picklist"},"About Dueling-Picklist"),h({id:"Accessibility"},"Accessibility"),g({},"This component is essentially 2 ARIA listboxes side by side, so we follow the ",d({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA practices guide")," to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:"),p({id:"Markup"},"Markup"),O({},j({},u({},'aria-multiselectable="true"')," should be set on each listbox"),j({},u({},"aria-selected")," should be placed on each ",u({},'role="option"'),", and set to ",u({},"false")," by default"),j({},u({},"aria-labelledby")," is used to identify the list to the user and should point to the list label"),j({},u({},"aria-describedby")," is used to provide operation instructions for the Drag and Drop interaction"),j({},u({},"tabindex"),' should be set to "0" when an item is selected and "-1" otherwise')),p({id:"Focus-Management"},"Focus Management"),O({},j({},"Initially, nothing should be selected and the first item in each list should have ",u({},'tabindex="0"')),j({},"When an item is focused, it becomes selected"),j({},"When focus leaves the list, the last selected item remains selected and focusable. When focus returns to the list focus is placed on the last selected item."),j({},"When moving items:",O({},j({},"With the move button: the items are unselected and added to the target list. The focus should remain on the move button."),j({},"With a keyboard shortcut: focus remains on the item, but in the target list. Since the item is focused, it is also selected."),j({},"If there are already selected items in the target list, they stay selected and the new items are added below them.")))),p({id:"Keyboard-Interactions"},"Keyboard Interactions"),O({},j({},"Each list has a single focusable option inside. There is only ever one focusable option per list and it is expected that a user will use their arrow keys, and some modifier keys, to perform all actions."),j({},"Because we support drag and drop re-ordering within a list, we implement the second multi-select keyboard model.",O({},j({},u({},"up")," and ",u({},"down")," arrows move focus ",m({},"and")," selection, with ",u({},'aria-selected="true"'),". Any previously selected items are deselected."),j({},u({},"shift + up")," and ",u({},"shift + down")," move focus and creates addition selections"),j({},u({},"ctrl + down")," or ",u({},"ctrl + up")," moves focus but selection remains where it is"),j({},u({},"ctrl + space")," toggles selection on the focused option, in addition to previous selections"),j({},u({},"ctrl + a")," selects all options in the list"),j({},u({},"cmd/ctrl + right")," and ",u({},"cmd/ctrl + left")," Moves selected items between lists"),j({},u({},"space"),' toggles "Drag and Drop" mode. When in "Drag and Drop" mode:',O({},j({},u({},"up")," and ",u({},"down")," arrows move the selected items ",m({},"within")," the current list")))))),b({id:"Base"},"Base"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder"},Object(i.createElement)(r.j,{dataSet:r.b})),b({id:"Group-Label"},"Group Label"),g({},"A Dueling Picklist should have a group label, similar to using a ",u({},"fieldset")," and ",u({},"legend")," on grouped form controls. To achieve this, wrap the Dueling Picklist in an ",u({},"slds-form-element")," and add a ",u({},"div")," with the same class names that are applied to a ",u({},"legend")," element in a fieldset, ",u({},"slds-form-element__label slds-form-element__legend"),"."),Object(i.createElement)(o.a,{header:"Labeling the group",type:"a11y"},Object(i.createElement)("p",null,"It is important that the ",Object(i.createElement)("code",null,"slds-form-element")," ",Object(i.createElement)("code",null,"<div>")," has the ",Object(i.createElement)("code",null,'role="group"')," attribute applied, along with ",Object(i.createElement)("code",null,"aria-labelledby"),", whose value is the ID of the visible group label.")),Object(i.createElement)(s.a,{title:"Dueling Picklist With Group Label"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),b({id:"Responsive"},"Responsive"),g({},"To make the dueling picklist responsive or use it within narrow regions, apply the class ",u({},"slds-dueling-picklist__column_responsive")," to the ",u({},"<div>"),"s with class ",u({},"slds-dueling-picklist__column")," that contain options (not the columns that only contain buttons). The dueling picklist will take up all available horizontal space, and any items longer than the available space will truncate with an ellipsis."),Object(i.createElement)(s.a,{title:"Dueling Picklist Responsive"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0,isResponsive:!0}))),Object(i.createElement)(o.a,{header:"Adjusting Height",type:"note"},Object(i.createElement)("p",null,"To adjust the height of the listboxes, set the height using an inline style on _both_ of the ",Object(i.createElement)("code",null,"<div>"),"s with class ",Object(i.createElement)("code",null,"slds-dueling-picklist__column"),". If you are setting it based on a maximum number of items being shown before scrolling, you can set ",Object(i.createElement)("code",null,"height = (2.25rem * numItems) + 1rem"),".")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-1"},"Available Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")),Object(i.createElement)("div",{className:"slds-dueling-list__column"},"..."),Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-2"},"Selected Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")))),b({id:"Edit-Mode"},"Edit Mode"),g({},"If the user needs to select multiple options for a field, like a list of languages supported, then use a dueling picklist without the re-order arrows on the right."),Object(i.createElement)(o.a,{header:"Helpful Assistive Text",type:"a11y"},Object(i.createElement)("p",null,"The assistive text content in the ",Object(i.createElement)("code",null,"option-drag-label")," ",Object(i.createElement)("code",null,"<div>")," should provide clear instructions on how to drag and drop with a keyboard. See the ",Object(i.createElement)("a",{href:"#Keyboard-Interactions"},"keyboard interactions section")," above for modifier key information.")),Object(i.createElement)(s.a,{title:"Dueling Picklist"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0}))),h({id:"Selected-Item"},"Selected Item"),Object(i.createElement)(o.a,{header:"Aria Selected",type:"a11y"},Object(i.createElement)("p",null,Object(i.createElement)("code",null,"aria-selected")," should be placed on each"," ",Object(i.createElement)("code",null,'role="option"'),", and set to"," ",Object(i.createElement)("code",null,"true")," when the item is selected.")),Object(i.createElement)(s.a,{title:"Dueling Picklist with Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0}))),h({id:"Multiple-Selected-Items"},"Multiple Selected Items"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Multiple Items Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.l,noReorder:!0}))),h({id:"Dropped-Items"},"Dropped Items"),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"The ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with ",Object(i.createElement)("code",null,'aria-live="assertive"')," should update as items are moved to provide context about the state and location of the items.")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},"Arabic and German: Moved to Selected Languages."))),Object(i.createElement)(s.a,{title:"Dueling Picklist with Items Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.e,noReorder:!0}))),h({id:"Locked-Items"},"Locked Items"),g({},"If items are not able to be removed or reordered from the selected list, a lock icon appears next to the item name."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled and Assistive Text"},Object(i.createElement)("p",null,"For each locked item, ",Object(i.createElement)("code",null,'aria-disabled="true"')," must be applied to ",Object(i.createElement)("code",null,".slds-listbox__option")," and assistive text (",Object(i.createElement)("code",null,".slds-assistive-text"),") must be added to"," ",Object(i.createElement)("code",null,".slds-icon_container"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist with a Locked Item"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.h,noReorder:!0}))),h({id:"With-Reordering"},"With Reordering"),g({},"If the order of the selected options matters, include the vertical arrows to the right. This allows the user to reorder the second listbox of options."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),g({},"The following examples show the process of selecting an item, moving it within a list, and dropping it in a final position."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"Pay attention to the ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with"," ",Object(i.createElement)("code",null,'aria-live="assertive"'),". This should update as items are moved to provide context about the state and location of the items at all times.")),p({id:"Item-Selected"},"Item Selected"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.n}))),p({id:"Item-Grabbed"},"Item Grabbed"),g({},"Within a list, users are able to drag and drop an item."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Grabbed"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.g}))),p({id:"Item-Moved-Within-a-List"},"Item Moved Within a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Moved within List"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.i}))),p({id:"Item-Dropped-in-a-List"},"Item Dropped in a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.f}))),h({id:"Disabled"},"Disabled"),g({},"If the user is not able to interact with the dueling picklist, then it should be marked as disabled."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled"},Object(i.createElement)("p",null,"In disabled mode, both list boxes"," ",Object(i.createElement)("code",null,"ul[role=listbox]")," should receive"," ",Object(i.createElement)("code",null,'aria-disabled="true"'),", and all directional buttons should receive the ",Object(i.createElement)("code",null,"disabled")," attribute.")),Object(i.createElement)(o.a,{type:"note",header:"Utility Class"},Object(i.createElement)("p",null,"The class ",Object(i.createElement)("code",null,"slds-is-disabled")," should also be applied to the divs with the class"," ",Object(i.createElement)("code",null,"slds-dueling-list_options"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist Disabled"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.d,disabled:!0}))),h({id:"Required"},"Required"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0}))),h({id:"With-Tooltip"},"With Tooltip"),g({},"If some contextual information regarding the dueling picklist is needed, add a tooltip next to the group label."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,hasTooltip:!0,showTooltip:!0})))),h({id:"Required-With-Tooltip"},"Required With Tooltip"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator and Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0,hasTooltip:!0,showTooltip:!0})))),b({id:"View-Mode"},"View Mode"),g({},"When the user is done selecting options, or is in view mode of the field, they are presented with a comma separated list."),Object(i.createElement)(s.a,{title:"Dueling Picklist in View Mode"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.k,null))))},f=function(){return Object(a.a)(E())}}});

package/__internal/chunked/docs/ui/components/form-element/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],r=t[1],d=t[2],c=0,u=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(m&&m(t);u.length;)u.shift()();return i.push.apply(i,d||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var r=a[s];0!==n[r]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},n={39:0},i=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},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 s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var m=r;return i.push([653,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},653:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return W})),a.d(t,"getContents",(function(){return Q}));var l=a(0),n=a.n(l),i=a(4),o=a(2),s=a(26),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(30),b=a(43),f=(a(47),a(5),a(34)),h=a(3),E=a.n(h),g=function(e){var t=e.children;return n.a.createElement("div",{className:"slds-form-element__row"},t)};g.propTypes={children:E.a.node.isRequired};var v=function(e){var t=e.isStacked,a=e.isHorizontal,l=e.isEditing,i=e.isRequired,o=e.isAddress,s=e.hasTooltip,r=e.hasError,d=e.errorId,m=e.inlineMessage,u=e.labelContent,p=e.children;return n.a.createElement(c.a,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:a,isEditing:l,isRequired:i,hasTooltip:s,hasError:r,errorId:d,inlineMessage:m,label:u},p)};v.propTypes={children:E.a.node.isRequired,isStacked:E.a.bool,isHorizontal:E.a.bool,isEditing:E.a.bool,isRequired:E.a.bool,isAddress:E.a.bool,hasTooltip:E.a.bool,hasError:E.a.bool,errorId:E.a.string,inlineMessage:E.a.string,labelContent:E.a.string};var y=a(52),C=a(76),S=a(35),_=a(23),z=a(24),x=a(11),A={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"stacked-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"stacked-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"stacked-form-element-id-03",hasRightIcon:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},n.a.createElement(u.a,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},n.a.createElement(u.a,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,isStacked:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},n.a.createElement(b.a,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},n.a.createElement(u.a,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},n.a.createElement(u.a,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},n.a.createElement(u.a,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},n.a.createElement(u.a,{id:"stacked-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},n.a.createElement(b.a,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},n.a.createElement(u.a,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},n.a.createElement(u.a,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},n.a.createElement(u.a,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},n.a.createElement(u.a,{id:"stacked-form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"stacked-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},w={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"horizontal-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},n.a.createElement(u.a,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},n.a.createElement(u.a,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isStacked:!0,isEditing:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},n.a.createElement(b.a,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},n.a.createElement(u.a,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},n.a.createElement(u.a,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},n.a.createElement(u.a,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},n.a.createElement(u.a,{id:"horizontal-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},n.a.createElement(b.a,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},n.a.createElement(u.a,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},n.a.createElement(u.a,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},n.a.createElement(u.a,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},n.a.createElement(u.a,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},I={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers"}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"text",label:"Account Name",value:"",isRequired:!0,component:n.a.createElement(c.b,{isRequired:!0,isHorizontal:!0,labelContent:"Account Name",inputId:"horizontal-form-element-id-02",isEditing:!0,hasError:!0,errorId:"horizontal-form-element-error-id-01",inlineMessage:"Complete this field"},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},k={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))}]},{fields:[{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,column:1,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"text",label:"Reference Image",value:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8",column:1,component:n.a.createElement(c.b,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-15",defaultValue:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8"}))}]},{fields:[{type:"richtext",label:"Rich Text Output",column:1,value:n.a.createElement("div",{className:"slds-rich-text-editor__output"},n.a.createElement("p",null,"Here's a big image"),n.a.createElement("p",null,n.a.createElement("img",{src:"/assets/images/themes/oneSalesforce/banner-group-public-default.png",alt:""})))}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,column:1,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",column:1,component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:n.a.createElement(S.j,{dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,column:1,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))}]},{fields:[{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,column:1,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},N={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:"False",component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(c.a,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,dataSet:S.b,isResponsive:!0,isStacked:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(c.a,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(c.a,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},q=("".concat("Stacked"," - Default"),"".concat("Stacked"),y.c,"".concat("Stacked"," - Edit Mode"),"".concat("Stacked"),y.c,[{id:"stacked-single-column",label:"".concat("Stacked"," - 1 column Read Only"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:k,isViewMode:!0})},{id:"deprecated-view-stacked",label:"".concat("Stacked"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isDeprecated:!0})},{id:"simple-stacked",label:"".concat("Stacked"," - Simple form layout"),context:"".concat("Stacked"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},n.a.createElement(u.a,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},n.a.createElement(b.a,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isStacked:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isStacked:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat("Stacked"," - View Mode"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:A,isViewMode:!0,hasInlineEdit:!0})}]),j=("".concat("Horizontal"," - Default"),"".concat("Horizontal"),y.c,[{id:"edit-horizontal",label:"".concat("Horizontal"," - Edit Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w})},{id:"form-element-horizontal-edit-error",label:"".concat("Horizontal"," - (Edit Mode with Error)"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:I})}]),T=[{id:"horizontal-single-column",label:"".concat("Horizontal"," - 1 column - Read Only Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:k,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat("Horizontal"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat("Horizontal"," - Edit Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat("Horizontal"," - Simple form layout"),context:"".concat("Horizontal"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},n.a.createElement(u.a,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},n.a.createElement(b.a,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isHorizontal:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isHorizontal:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat("Horizontal"," - View Mode"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w,isViewMode:!0,hasInlineEdit:!0})}],O=function(e){var t=e.hasTooltip,a=e.isRequired;return n.a.createElement(n.a.Fragment,null,n.a.createElement(c.a,{hasCompoundFields:!0,hasTooltip:t,isRequired:a,isDeprecated:!0,label:"Location"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"input-10"},n.a.createElement(u.a,{id:"input-10"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"input-11"},n.a.createElement(u.a,{id:"input-11"}))))),n.a.createElement(c.a,{hasCompoundFields:!0,label:"Shipping Address",isAddress:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"input-12"},n.a.createElement(u.a,{id:"input-12"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"input-13"},n.a.createElement(u.a,{id:"input-13"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"input-14"},n.a.createElement(u.a,{id:"input-14",defaultValue:"MT"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"input-15"},n.a.createElement(u.a,{id:"input-15"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"input-16"},n.a.createElement(u.a,{id:"input-16",defaultValue:"Canada"}))))))};O.propTypes={hasTooltip:E.a.bool,isRequired:E.a.bool};var V=[{id:"compound-default",label:"".concat("Compound"," - Default"),context:"".concat("Compound"),element:n.a.createElement(v,{labelContent:"Location"},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"input-01"},n.a.createElement(u.a,{id:"input-01"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"input-02"},n.a.createElement(u.a,{id:"input-02"})))))}],L=("".concat("Compound"," - Required"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Help text icon with tooltip"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Error"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout (Required)"),"".concat("Compound"),"".concat("Compound"," - Form Layout (Required with Tooltip Help)"),"".concat("Compound"),c.a,c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout"),"".concat("Compound"),[{id:"address-default",label:"".concat("Address"," - Default"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-01"},n.a.createElement(b.a,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-02"},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},n.a.createElement(u.a,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat("Address"," - Help text icon with tooltip"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-06"},n.a.createElement(b.a,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},n.a.createElement(u.a,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}]),F=("".concat("Address"," - Required"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,"".concat("Address"," - Error"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,a(1)),P=a(36),R=i.c.a,D=i.c.code,H=i.c.em,B=i.c.h2,M=i.c.h3,U=i.c.h4,J=i.c.h5,Z=i.c.p,G=i.c.strong,W=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"About-Form-Elements"},"About Form Elements"),Z({},"The Form Element is initialized with ",D({},"slds-form-element")," and is made up of three primary pieces; a label (",D({},"slds-form-element__label"),"), a form control container (",D({},"slds-form-element__control"),"), and a form input element, i.e. ",D({},"<input>"),"."),M({id:"Form-Label"},"Form Label"),Z({},"A form label should use either the ",D({},"<label>")," or ",D({},"<legend>")," elements with the class ",D({},"slds-form-element__label"),". Use ",D({},"<legend>")," when you have a ",R({href:"/components/form-element/#Compound"},"compound form"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),M({id:"Form-Control"},"Form Control"),Z({},"A form control is a ",D({},"div")," with the class ",D({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),M({id:"Form-Input-Elements"},"Form Input Elements"),Z({},"There are many types of input elements that can be used in the Form Element, including ",R({href:"/components/input"},"inputs"),", ",R({href:"/components/textarea"},"text areas"),", ",R({href:"/components/checkbox"},"checkboxes"),", and ",R({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),M({id:"Accessibility"},"Accessibility"),Z({},"Labels must have the ",D({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",D({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),M({id:"Mobile"},"Mobile"),Object(l.createElement)(P.a,{patternSpecificText:"form elements will have an increased size of label and info icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"Base"},"Base"),Object(l.createElement)(r.a,{title:"Form Element - Base"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-01"},Object(l.createElement)(u.a,{id:"form-element-01",placeholder:"Placeholder text…"})))),B({id:"States"},"States"),M({id:"View-ModeStatic"},"View Mode/Static"),Z({},"If a form element requires a view mode or static state, instead of ",D({},"slds-form-element__label")," being a ",D({},"<label>")," element, we want to change the element to a ",D({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),Z({},"The string inside of ",D({},"slds-form-element__control")," needs to be wrapped in a ",D({},"<div>")," as well, with the class ",D({},"slds-form-element__static")," applied to it."),Z({},"In addition to the structural changes — if the form element is standalone, you can ",H({},"optionally")," apply ",D({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",G({},H({},"required"))," if the form element is in the context of a larger form composition."),Object(l.createElement)(r.a,{title:"Form Element - Readonly"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0},Object(l.createElement)(c.f,null,"In Progress")))),M({id:"Inline-Edit"},"Inline Edit"),Z({},"If the form element has inline editable capabilities, the form element will ",G({},H({},"require"))," the class ",D({},"slds-form-element_edit"),". This will apply styles that help handle the structure of the additional elements, such as the button icon to switch the element out of view mode and into edit mode."),Z({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",D({},"slds-hint-parent")," to the form element. The button icon will also require the class ",D({},"slds-button__icon_hint"),". This will notify the form element that this is the element we want to provide an interaction hint for. For more implementation details, please refer to ",R({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),Object(l.createElement)(r.a,{title:"Form Element - Inline Edit"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},Object(l.createElement)(c.f,null,"In Progress"),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),M({id:"Help-Text-Icon"},"Help Text Icon"),Z({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),Z({},"The icon comes in the form of a button icon so it can receive focus when a user tabs through a form with multiple form elements."),Z({},"The button icon is ",G({},H({},"required"))," to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__icon")," and should be placed outside of the ",D({},"<label>")," element."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01",placeholder:"Placeholder text…"})))),Object(l.createElement)(P.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"form elements with a help text icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements with help text icon"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01m",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01m",placeholder:"Placeholder text…"}))),U({id:"Showing-tooltip"},"Showing tooltip"),Z({},"The help text icon uses a tooltip to show the help text information. Please see ",R({href:"/components/tooltips/"},"Tooltips")," for implementation details."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon - Showing tooltip"},Object(l.createElement)(o.a,{demoStyles:"padding-top: 4rem;"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},Object(l.createElement)(u.a,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder text…"})))),M({id:"Feedback"},"Feedback"),Z({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),U({id:"Required"},"Required"),Z({},"When a form element is required, an ",D({},"<abbr>")," should be injected before the ",D({},"<input>")," and within the ",D({},"<label>")," and have the class ",D({},"slds-required"),"."),Z({},"The ",D({},"<input>")," element should also have the HTML attribute ",D({},"required")," or ",D({},'required=""'),". Similarly, if it is disabled, it should have the ",D({},"disabled")," or ",D({},'disabled=""')," attribute. Do not use true/false values inside the ",D({},"required")," or ",D({},"disabled")," attributes because the mere presence of these attributes signifies the field is required or disabled."),Object(l.createElement)(r.a,{title:"Form Element - Required"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-03",placeholder:"Placeholder text…",required:!0})))),U({id:"Error"},"Error"),Z({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",D({},"slds-has-error")," class is placed on the ",D({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",D({},"<div>")," with the ",D({},"slds-form-element__help")," class."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility requirement"},Object(l.createElement)("p",null,"When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the"," ",Object(l.createElement)("code",null,"aria-describedby")," attribute to the ",Object(l.createElement)("code",null,"<input>"),". The `aria-describedby` attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.")),Object(l.createElement)(r.a,{title:"Form Element - Error"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"Enter a value."},Object(l.createElement)(u.a,{id:"form-element-05",placeholder:"Placeholder text…",required:!0,"aria-describedby":"form-error-01"})))),B({id:"Layout-Variations"},"Layout Variations"),Z({},"If your form has more than one form element, you can switch the direction of ",D({},"slds-form-element__label")," and ",D({},"slds-form-element__control")," by applying ",D({},"slds-form-element_stacked")," for stacked labels and ",D({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",D({},"slds-form-element")," class is present on each element within the form."),M({id:"Stacked"},"Stacked"),Z({},"To vertically stack ",Object(l.createElement)("code",null,"<label>")," and ",Object(l.createElement)("code",null,"<input>")," pairs, place ",D({},"slds-form-element_stacked")," on the ",D({},"div")," with the class of ",D({},"slds-form-element")," for optimal spacing."),Object(l.createElement)(r.a,{title:"Form Layout - Stacked"},Object(l.createElement)(o.a,null,Object(F.f)(q,"simple-stacked"))),M({id:"Horizontal"},"Horizontal"),Z({},"To horizontally align a ",D({},"<label>")," and ",D({},"<input>"),", use the ",D({},"slds-form-element_horizontal")," class on the ",D({},"div")," with the class of ",D({},"slds-form-element"),". The ",D({},"slds-form-element__label")," takes up 33% of the width, and the ",D({},"slds-form-element__control")," uses the remaining 66%."),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal"},Object(l.createElement)(o.a,null,Object(F.f)(T,"simple-horizontal"))),U({id:"Single-Column-Support"},"Single Column Support"),Z({},"When using ",D({},"slds-form-element_horizontal"),", you might find that the 33/66% distribution of the label to control might be too much in a single column form when displayed in a larger region. Another scenario where single column support would be useful is when a form element spans 100% while the other form elements in your form are 50/50 split. To reduce the distribution and/or align with 50/50 split form elements, adding the class ",D({},"slds-form-element_1-col")," to ",D({},"slds-form-element")," will re-distribute the layout."),J({id:"Standalone"},"Standalone"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column standalone"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},Object(l.createElement)(b.a,{id:"single-form-element-id-01",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."})))),J({id:"With-5050-split"},"With 50/50 split"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column combo"},Object(l.createElement)(o.a,null,Object(l.createElement)("div",{className:"slds-form",role:"list"},Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-02",placeholder:"Placeholder text…"}))),Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-03",placeholder:"Placeholder text…"})))),Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},Object(l.createElement)(b.a,{id:"single-form-element-id-04",placeholder:"Placeholder text…",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))))))),U({id:"Error-state"},"Error state"),Z({},"When in the horizontal layout, error messages will appear underneath the related input."),Object(l.createElement)(o.a,null,Object(F.f)(j,"form-element-horizontal-edit-error")),M({id:"Compound"},"Compound"),Z({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",D({},"<fieldset>"),", where the label/title is implemented as a ",D({},"<legend>")," element."),Z({},"The ",D({},"<fieldset>")," ",G({},H({},"requires"))," the class ",D({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),Z({},"The ",D({},"<legend>")," element ",G({},H({},"requires"))," the class ",D({},"slds-form-element__legend"),". Legend elements can only accept a limited amount of CSS properties so this class is there to help manage its layout."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.a,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),U({id:"Rows"},"Rows"),Z({},"Each row of a compound field should be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__row"),"."),U({id:"Fields"},"Fields"),Z({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",D({},"slds-size_1-of-2"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(g,null,Object(l.createElement)("div",{className:"slds-size_1-of-2"},"..."))),Object(l.createElement)(r.a,{title:"Form Layout - Compound"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(V))),U({id:"Address"},"Address"),Z({},"Though an address form is utilizing the ",D({},"slds-form-element_compound")," class, we need to also add the ",D({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),Object(l.createElement)(r.a,{title:"Form Layout - Compound - Address"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(L))),B({id:"Usage-Examples"},"Usage Examples"),M({id:"Record-Form"},"Record Form"),Z({},"A record form is a series of rows created by ",D({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",D({},"slds-form__row")," is required to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form__item"),"."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(l.createElement)("p",null,"Due to the nature of how the record form is composed, we need to notify screen readers that this is a list by adding ",Object(l.createElement)("code",null,'role="list"')," to the"," ",Object(l.createElement)("code",null,"slds-form")," element. Every column inside of each row should get"," ",Object(l.createElement)("code",null,'role="listitem"')," to identify itself as items of the list.")),U({id:"View-Mode"},"View Mode"),Z({},"When in view/readonly mode, it is ",H({},"required")," to have the class ",D({},"slds-form-element_readonly")," on the ",D({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),Z({},"If inline-edit mode is enabled, you will also need to add ",D({},"slds-form-element_edit")," to the ",D({},"slds-form-element")," to accommodate the space for the edit button icon."),J({id:"Stacked-Alignment"},"Stacked Alignment"),Z({},"When you want the form elements inside of your record form to be stacked. Each ",D({},"slds-form-element")," should also get the class ",D({},"slds-form-element_stacked"),"."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),J({id:"Horizontal-Alignment"},"Horizontal Alignment"),Z({},"By adding the class ",D({},"slds-form-element_horizontal")," to every ",D({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),U({id:"Edit-Mode"},"Edit Mode"),Z({},"When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:"),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.b,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),Z({},"The form content found inside of ",D({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),J({id:"Stacked-Alignment-2"},"Stacked Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,direction:"stacked"}))),J({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,direction:"horizontal"}))))},Q=function(){return Object(i.a)(W())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],r=t[1],d=t[2],c=0,u=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(m&&m(t);u.length;)u.shift()();return i.push.apply(i,d||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var r=a[s];0!==n[r]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},n={39:0},i=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},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 s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var m=r;return i.push([653,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},653:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return W})),a.d(t,"getContents",(function(){return Q}));var l=a(0),n=a.n(l),i=a(4),o=a(2),s=a(26),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(30),b=a(43),f=(a(47),a(5),a(35)),h=a(3),E=a.n(h),g=function(e){var t=e.children;return n.a.createElement("div",{className:"slds-form-element__row"},t)};g.propTypes={children:E.a.node.isRequired};var v=function(e){var t=e.isStacked,a=e.isHorizontal,l=e.isEditing,i=e.isRequired,o=e.isAddress,s=e.hasTooltip,r=e.hasError,d=e.errorId,m=e.inlineMessage,u=e.labelContent,p=e.children;return n.a.createElement(c.a,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:a,isEditing:l,isRequired:i,hasTooltip:s,hasError:r,errorId:d,inlineMessage:m,label:u},p)};v.propTypes={children:E.a.node.isRequired,isStacked:E.a.bool,isHorizontal:E.a.bool,isEditing:E.a.bool,isRequired:E.a.bool,isAddress:E.a.bool,hasTooltip:E.a.bool,hasError:E.a.bool,errorId:E.a.string,inlineMessage:E.a.string,labelContent:E.a.string};var y=a(52),C=a(76),S=a(34),_=a(23),z=a(24),x=a(11),A={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"stacked-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"stacked-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"stacked-form-element-id-03",hasRightIcon:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},n.a.createElement(u.a,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},n.a.createElement(u.a,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,isStacked:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},n.a.createElement(b.a,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},n.a.createElement(u.a,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},n.a.createElement(u.a,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},n.a.createElement(u.a,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},n.a.createElement(u.a,{id:"stacked-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},n.a.createElement(b.a,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},n.a.createElement(u.a,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},n.a.createElement(u.a,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},n.a.createElement(u.a,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},n.a.createElement(u.a,{id:"stacked-form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"stacked-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},w={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"horizontal-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},n.a.createElement(u.a,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},n.a.createElement(u.a,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isStacked:!0,isEditing:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},n.a.createElement(b.a,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},n.a.createElement(u.a,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},n.a.createElement(u.a,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},n.a.createElement(u.a,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},n.a.createElement(u.a,{id:"horizontal-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},n.a.createElement(b.a,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},n.a.createElement(u.a,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},n.a.createElement(u.a,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},n.a.createElement(u.a,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},n.a.createElement(u.a,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},I={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers"}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"text",label:"Account Name",value:"",isRequired:!0,component:n.a.createElement(c.b,{isRequired:!0,isHorizontal:!0,labelContent:"Account Name",inputId:"horizontal-form-element-id-02",isEditing:!0,hasError:!0,errorId:"horizontal-form-element-error-id-01",inlineMessage:"Complete this field"},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},k={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))}]},{fields:[{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,column:1,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"text",label:"Reference Image",value:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8",column:1,component:n.a.createElement(c.b,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-15",defaultValue:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8"}))}]},{fields:[{type:"richtext",label:"Rich Text Output",column:1,value:n.a.createElement("div",{className:"slds-rich-text-editor__output"},n.a.createElement("p",null,"Here's a big image"),n.a.createElement("p",null,n.a.createElement("img",{src:"/assets/images/themes/oneSalesforce/banner-group-public-default.png",alt:""})))}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,column:1,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",column:1,component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:n.a.createElement(S.j,{dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,column:1,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))}]},{fields:[{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,column:1,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},N={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:"False",component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(c.a,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,dataSet:S.b,isResponsive:!0,isStacked:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(c.a,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(c.a,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},q=("".concat("Stacked"," - Default"),"".concat("Stacked"),y.c,"".concat("Stacked"," - Edit Mode"),"".concat("Stacked"),y.c,[{id:"stacked-single-column",label:"".concat("Stacked"," - 1 column Read Only"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:k,isViewMode:!0})},{id:"deprecated-view-stacked",label:"".concat("Stacked"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isDeprecated:!0})},{id:"simple-stacked",label:"".concat("Stacked"," - Simple form layout"),context:"".concat("Stacked"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},n.a.createElement(u.a,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},n.a.createElement(b.a,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isStacked:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isStacked:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat("Stacked"," - View Mode"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:A,isViewMode:!0,hasInlineEdit:!0})}]),j=("".concat("Horizontal"," - Default"),"".concat("Horizontal"),y.c,[{id:"edit-horizontal",label:"".concat("Horizontal"," - Edit Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w})},{id:"form-element-horizontal-edit-error",label:"".concat("Horizontal"," - (Edit Mode with Error)"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:I})}]),T=[{id:"horizontal-single-column",label:"".concat("Horizontal"," - 1 column - Read Only Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:k,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat("Horizontal"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat("Horizontal"," - Edit Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat("Horizontal"," - Simple form layout"),context:"".concat("Horizontal"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},n.a.createElement(u.a,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},n.a.createElement(b.a,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isHorizontal:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isHorizontal:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat("Horizontal"," - View Mode"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w,isViewMode:!0,hasInlineEdit:!0})}],O=function(e){var t=e.hasTooltip,a=e.isRequired;return n.a.createElement(n.a.Fragment,null,n.a.createElement(c.a,{hasCompoundFields:!0,hasTooltip:t,isRequired:a,isDeprecated:!0,label:"Location"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"input-10"},n.a.createElement(u.a,{id:"input-10"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"input-11"},n.a.createElement(u.a,{id:"input-11"}))))),n.a.createElement(c.a,{hasCompoundFields:!0,label:"Shipping Address",isAddress:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"input-12"},n.a.createElement(u.a,{id:"input-12"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"input-13"},n.a.createElement(u.a,{id:"input-13"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"input-14"},n.a.createElement(u.a,{id:"input-14",defaultValue:"MT"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"input-15"},n.a.createElement(u.a,{id:"input-15"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"input-16"},n.a.createElement(u.a,{id:"input-16",defaultValue:"Canada"}))))))};O.propTypes={hasTooltip:E.a.bool,isRequired:E.a.bool};var V=[{id:"compound-default",label:"".concat("Compound"," - Default"),context:"".concat("Compound"),element:n.a.createElement(v,{labelContent:"Location"},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"input-01"},n.a.createElement(u.a,{id:"input-01"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"input-02"},n.a.createElement(u.a,{id:"input-02"})))))}],L=("".concat("Compound"," - Required"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Help text icon with tooltip"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Error"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout (Required)"),"".concat("Compound"),"".concat("Compound"," - Form Layout (Required with Tooltip Help)"),"".concat("Compound"),c.a,c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout"),"".concat("Compound"),[{id:"address-default",label:"".concat("Address"," - Default"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-01"},n.a.createElement(b.a,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-02"},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},n.a.createElement(u.a,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat("Address"," - Help text icon with tooltip"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-06"},n.a.createElement(b.a,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},n.a.createElement(u.a,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}]),F=("".concat("Address"," - Required"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,"".concat("Address"," - Error"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,a(1)),P=a(36),R=i.c.a,D=i.c.code,H=i.c.em,B=i.c.h2,M=i.c.h3,U=i.c.h4,J=i.c.h5,Z=i.c.p,G=i.c.strong,W=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"About-Form-Elements"},"About Form Elements"),Z({},"The Form Element is initialized with ",D({},"slds-form-element")," and is made up of three primary pieces; a label (",D({},"slds-form-element__label"),"), a form control container (",D({},"slds-form-element__control"),"), and a form input element, i.e. ",D({},"<input>"),"."),M({id:"Form-Label"},"Form Label"),Z({},"A form label should use either the ",D({},"<label>")," or ",D({},"<legend>")," elements with the class ",D({},"slds-form-element__label"),". Use ",D({},"<legend>")," when you have a ",R({href:"/components/form-element/#Compound"},"compound form"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),M({id:"Form-Control"},"Form Control"),Z({},"A form control is a ",D({},"div")," with the class ",D({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),M({id:"Form-Input-Elements"},"Form Input Elements"),Z({},"There are many types of input elements that can be used in the Form Element, including ",R({href:"/components/input"},"inputs"),", ",R({href:"/components/textarea"},"text areas"),", ",R({href:"/components/checkbox"},"checkboxes"),", and ",R({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),M({id:"Accessibility"},"Accessibility"),Z({},"Labels must have the ",D({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",D({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),M({id:"Mobile"},"Mobile"),Object(l.createElement)(P.a,{patternSpecificText:"form elements will have an increased size of label and info icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"Base"},"Base"),Object(l.createElement)(r.a,{title:"Form Element - Base"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-01"},Object(l.createElement)(u.a,{id:"form-element-01",placeholder:"Placeholder text…"})))),B({id:"States"},"States"),M({id:"View-ModeStatic"},"View Mode/Static"),Z({},"If a form element requires a view mode or static state, instead of ",D({},"slds-form-element__label")," being a ",D({},"<label>")," element, we want to change the element to a ",D({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),Z({},"The string inside of ",D({},"slds-form-element__control")," needs to be wrapped in a ",D({},"<div>")," as well, with the class ",D({},"slds-form-element__static")," applied to it."),Z({},"In addition to the structural changes — if the form element is standalone, you can ",H({},"optionally")," apply ",D({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",G({},H({},"required"))," if the form element is in the context of a larger form composition."),Object(l.createElement)(r.a,{title:"Form Element - Readonly"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0},Object(l.createElement)(c.f,null,"In Progress")))),M({id:"Inline-Edit"},"Inline Edit"),Z({},"If the form element has inline editable capabilities, the form element will ",G({},H({},"require"))," the class ",D({},"slds-form-element_edit"),". This will apply styles that help handle the structure of the additional elements, such as the button icon to switch the element out of view mode and into edit mode."),Z({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",D({},"slds-hint-parent")," to the form element. The button icon will also require the class ",D({},"slds-button__icon_hint"),". This will notify the form element that this is the element we want to provide an interaction hint for. For more implementation details, please refer to ",R({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),Object(l.createElement)(r.a,{title:"Form Element - Inline Edit"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},Object(l.createElement)(c.f,null,"In Progress"),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),M({id:"Help-Text-Icon"},"Help Text Icon"),Z({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),Z({},"The icon comes in the form of a button icon so it can receive focus when a user tabs through a form with multiple form elements."),Z({},"The button icon is ",G({},H({},"required"))," to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__icon")," and should be placed outside of the ",D({},"<label>")," element."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01",placeholder:"Placeholder text…"})))),Object(l.createElement)(P.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"form elements with a help text icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements with help text icon"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01m",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01m",placeholder:"Placeholder text…"}))),U({id:"Showing-tooltip"},"Showing tooltip"),Z({},"The help text icon uses a tooltip to show the help text information. Please see ",R({href:"/components/tooltips/"},"Tooltips")," for implementation details."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon - Showing tooltip"},Object(l.createElement)(o.a,{demoStyles:"padding-top: 4rem;"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},Object(l.createElement)(u.a,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder text…"})))),M({id:"Feedback"},"Feedback"),Z({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),U({id:"Required"},"Required"),Z({},"When a form element is required, an ",D({},"<abbr>")," should be injected before the ",D({},"<input>")," and within the ",D({},"<label>")," and have the class ",D({},"slds-required"),"."),Z({},"The ",D({},"<input>")," element should also have the HTML attribute ",D({},"required")," or ",D({},'required=""'),". Similarly, if it is disabled, it should have the ",D({},"disabled")," or ",D({},'disabled=""')," attribute. Do not use true/false values inside the ",D({},"required")," or ",D({},"disabled")," attributes because the mere presence of these attributes signifies the field is required or disabled."),Object(l.createElement)(r.a,{title:"Form Element - Required"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-03",placeholder:"Placeholder text…",required:!0})))),U({id:"Error"},"Error"),Z({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",D({},"slds-has-error")," class is placed on the ",D({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",D({},"<div>")," with the ",D({},"slds-form-element__help")," class."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility requirement"},Object(l.createElement)("p",null,"When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the"," ",Object(l.createElement)("code",null,"aria-describedby")," attribute to the ",Object(l.createElement)("code",null,"<input>"),". The `aria-describedby` attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.")),Object(l.createElement)(r.a,{title:"Form Element - Error"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"Enter a value."},Object(l.createElement)(u.a,{id:"form-element-05",placeholder:"Placeholder text…",required:!0,"aria-describedby":"form-error-01"})))),B({id:"Layout-Variations"},"Layout Variations"),Z({},"If your form has more than one form element, you can switch the direction of ",D({},"slds-form-element__label")," and ",D({},"slds-form-element__control")," by applying ",D({},"slds-form-element_stacked")," for stacked labels and ",D({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",D({},"slds-form-element")," class is present on each element within the form."),M({id:"Stacked"},"Stacked"),Z({},"To vertically stack ",Object(l.createElement)("code",null,"<label>")," and ",Object(l.createElement)("code",null,"<input>")," pairs, place ",D({},"slds-form-element_stacked")," on the ",D({},"div")," with the class of ",D({},"slds-form-element")," for optimal spacing."),Object(l.createElement)(r.a,{title:"Form Layout - Stacked"},Object(l.createElement)(o.a,null,Object(F.f)(q,"simple-stacked"))),M({id:"Horizontal"},"Horizontal"),Z({},"To horizontally align a ",D({},"<label>")," and ",D({},"<input>"),", use the ",D({},"slds-form-element_horizontal")," class on the ",D({},"div")," with the class of ",D({},"slds-form-element"),". The ",D({},"slds-form-element__label")," takes up 33% of the width, and the ",D({},"slds-form-element__control")," uses the remaining 66%."),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal"},Object(l.createElement)(o.a,null,Object(F.f)(T,"simple-horizontal"))),U({id:"Single-Column-Support"},"Single Column Support"),Z({},"When using ",D({},"slds-form-element_horizontal"),", you might find that the 33/66% distribution of the label to control might be too much in a single column form when displayed in a larger region. Another scenario where single column support would be useful is when a form element spans 100% while the other form elements in your form are 50/50 split. To reduce the distribution and/or align with 50/50 split form elements, adding the class ",D({},"slds-form-element_1-col")," to ",D({},"slds-form-element")," will re-distribute the layout."),J({id:"Standalone"},"Standalone"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column standalone"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},Object(l.createElement)(b.a,{id:"single-form-element-id-01",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."})))),J({id:"With-5050-split"},"With 50/50 split"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column combo"},Object(l.createElement)(o.a,null,Object(l.createElement)("div",{className:"slds-form",role:"list"},Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-02",placeholder:"Placeholder text…"}))),Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-03",placeholder:"Placeholder text…"})))),Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},Object(l.createElement)(b.a,{id:"single-form-element-id-04",placeholder:"Placeholder text…",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))))))),U({id:"Error-state"},"Error state"),Z({},"When in the horizontal layout, error messages will appear underneath the related input."),Object(l.createElement)(o.a,null,Object(F.f)(j,"form-element-horizontal-edit-error")),M({id:"Compound"},"Compound"),Z({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",D({},"<fieldset>"),", where the label/title is implemented as a ",D({},"<legend>")," element."),Z({},"The ",D({},"<fieldset>")," ",G({},H({},"requires"))," the class ",D({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),Z({},"The ",D({},"<legend>")," element ",G({},H({},"requires"))," the class ",D({},"slds-form-element__legend"),". Legend elements can only accept a limited amount of CSS properties so this class is there to help manage its layout."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.a,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),U({id:"Rows"},"Rows"),Z({},"Each row of a compound field should be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__row"),"."),U({id:"Fields"},"Fields"),Z({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",D({},"slds-size_1-of-2"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(g,null,Object(l.createElement)("div",{className:"slds-size_1-of-2"},"..."))),Object(l.createElement)(r.a,{title:"Form Layout - Compound"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(V))),U({id:"Address"},"Address"),Z({},"Though an address form is utilizing the ",D({},"slds-form-element_compound")," class, we need to also add the ",D({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),Object(l.createElement)(r.a,{title:"Form Layout - Compound - Address"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(L))),B({id:"Usage-Examples"},"Usage Examples"),M({id:"Record-Form"},"Record Form"),Z({},"A record form is a series of rows created by ",D({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",D({},"slds-form__row")," is required to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form__item"),"."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(l.createElement)("p",null,"Due to the nature of how the record form is composed, we need to notify screen readers that this is a list by adding ",Object(l.createElement)("code",null,'role="list"')," to the"," ",Object(l.createElement)("code",null,"slds-form")," element. Every column inside of each row should get"," ",Object(l.createElement)("code",null,'role="listitem"')," to identify itself as items of the list.")),U({id:"View-Mode"},"View Mode"),Z({},"When in view/readonly mode, it is ",H({},"required")," to have the class ",D({},"slds-form-element_readonly")," on the ",D({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),Z({},"If inline-edit mode is enabled, you will also need to add ",D({},"slds-form-element_edit")," to the ",D({},"slds-form-element")," to accommodate the space for the edit button icon."),J({id:"Stacked-Alignment"},"Stacked Alignment"),Z({},"When you want the form elements inside of your record form to be stacked. Each ",D({},"slds-form-element")," should also get the class ",D({},"slds-form-element_stacked"),"."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),J({id:"Horizontal-Alignment"},"Horizontal Alignment"),Z({},"By adding the class ",D({},"slds-form-element_horizontal")," to every ",D({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),U({id:"Edit-Mode"},"Edit Mode"),Z({},"When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:"),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.b,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),Z({},"The form content found inside of ",D({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),J({id:"Stacked-Alignment-2"},"Stacked Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,direction:"stacked"}))),J({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,direction:"horizontal"}))))},Q=function(){return Object(i.a)(W())}}});

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

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/radio-button-group/docs.mdx.js"]=function(e){function t(t){for(var a,i,o=t[0],d=t[1],c=t[2],u=0,m=[];u<o.length;u++)i=o[u],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&m.push(n[i][0]),n[i]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(s&&s(t);m.length;)m.shift()();return l.push.apply(l,c||[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],a=!0,o=1;o<r.length;o++){var d=r[o];0!==n[d]&&(a=!1)}a&&(l.splice(t--,1),e=i(i.s=r[0]))}return e}var a={},n={62:0},l=[];function i(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=a,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)i.d(r,a,function(t){return e[t]}.bind(null,a));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],d=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var s=d;return l.push([714,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},714:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return v})),r.d(t,"getContents",(function(){return g}));var a=r(0),n=r.n(a),l=r(4),i=r(2),o=(r(26),r(14),r(1)),d=r(36),c=r(5),s=r.n(c),u=r(27),m=r.n(u),b=r(8),f=r(34),p=function(e){return n.a.createElement("div",{className:s()("slds-radio_button-group",e.className)},e.children)},h=function(e){var t=m()("example-unique-id-");return n.a.createElement("span",{className:s()("slds-button slds-radio_button",e.className)},n.a.createElement("input",{name:e.name,type:"radio",id:t,value:e.id,disabled:e.disabled,"aria-describedby":e.errorId,defaultChecked:e.checked}),n.a.createElement("label",{className:"slds-radio_button__label",htmlFor:t},n.a.createElement("span",{className:"slds-radio_faux"},e.children)))},E=function(e){var t=e.legend,r=e.modifier,a=e.disabled,l=e.required,i=e.hasError,o=m()("example-unique-name-"),d=m()("error-unique-id-");return n.a.createElement(f.a,{className:i&&"slds-has-error"},n.a.createElement(f.b,null,l&&n.a.createElement("abbr",{className:"slds-required",title:"required"},"*"),!t&&"Radio Group Label"),n.a.createElement(b.c,null,n.a.createElement(p,{className:r},n.a.createElement(h,{id:"monday",name:o,disabled:a,errorId:i&&d},"Mon"),n.a.createElement(h,{id:"tuesday",name:o,disabled:a,errorId:i&&d},"Tue"),n.a.createElement(h,{id:"wednesday",name:o,disabled:a,errorId:i&&d},"Wed"),n.a.createElement(h,{id:"thursday",name:o,disabled:a,errorId:i&&d},"Thu"),n.a.createElement(h,{id:"friday",name:o,disabled:a,errorId:i&&d},"Fri")),i&&n.a.createElement("div",{id:d,className:"slds-form-element__help"},"This field is required")))},y=n.a.createElement(E,null),O=[{id:"disabled",label:"Disabled",element:n.a.createElement(E,{disabled:!0})},{id:"required",label:"Required",element:n.a.createElement(E,{required:!0})},{id:"error",label:"Has error",element:n.a.createElement(E,{required:!0,hasError:!0})}],_=l.c.h2,j=l.c.h3,v=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"lead doc"},"A styled select list that can have a single entry checked at any one time."),_({id:"About-Radio-Button-Group"},"About Radio Button Group"),_({id:"Default"},"Default"),Object(a.createElement)(i.a,null,Object(o.f)(y)),j({id:"Mobile"},"Mobile"),Object(a.createElement)(d.a,{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"}),Object(a.createElement)(i.a,{frameOnly:!0,frameTitle:"Example mobile styles for radio button groups"},Object(o.f)(y)),_({id:"States"},"States"),j({id:"Disabled"},"Disabled"),Object(a.createElement)(i.a,null,Object(o.f)(O,"disabled")),j({id:"Required"},"Required"),Object(a.createElement)(i.a,null,Object(o.f)(O,"required")),j({id:"Has-Error"},"Has Error"),Object(a.createElement)(i.a,null,Object(o.f)(O,"error")))},g=function(){return Object(l.a)(v())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/radio-button-group/docs.mdx.js"]=function(e){function t(t){for(var a,i,o=t[0],d=t[1],c=t[2],u=0,m=[];u<o.length;u++)i=o[u],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&m.push(n[i][0]),n[i]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(s&&s(t);m.length;)m.shift()();return l.push.apply(l,c||[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],a=!0,o=1;o<r.length;o++){var d=r[o];0!==n[d]&&(a=!1)}a&&(l.splice(t--,1),e=i(i.s=r[0]))}return e}var a={},n={62:0},l=[];function i(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=a,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)i.d(r,a,function(t){return e[t]}.bind(null,a));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],d=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var s=d;return l.push([714,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},714:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return v})),r.d(t,"getContents",(function(){return g}));var a=r(0),n=r.n(a),l=r(4),i=r(2),o=(r(26),r(14),r(1)),d=r(36),c=r(5),s=r.n(c),u=r(27),m=r.n(u),b=r(8),f=r(35),p=function(e){return n.a.createElement("div",{className:s()("slds-radio_button-group",e.className)},e.children)},h=function(e){var t=m()("example-unique-id-");return n.a.createElement("span",{className:s()("slds-button slds-radio_button",e.className)},n.a.createElement("input",{name:e.name,type:"radio",id:t,value:e.id,disabled:e.disabled,"aria-describedby":e.errorId,defaultChecked:e.checked}),n.a.createElement("label",{className:"slds-radio_button__label",htmlFor:t},n.a.createElement("span",{className:"slds-radio_faux"},e.children)))},E=function(e){var t=e.legend,r=e.modifier,a=e.disabled,l=e.required,i=e.hasError,o=m()("example-unique-name-"),d=m()("error-unique-id-");return n.a.createElement(f.a,{className:i&&"slds-has-error"},n.a.createElement(f.b,null,l&&n.a.createElement("abbr",{className:"slds-required",title:"required"},"*"),!t&&"Radio Group Label"),n.a.createElement(b.c,null,n.a.createElement(p,{className:r},n.a.createElement(h,{id:"monday",name:o,disabled:a,errorId:i&&d},"Mon"),n.a.createElement(h,{id:"tuesday",name:o,disabled:a,errorId:i&&d},"Tue"),n.a.createElement(h,{id:"wednesday",name:o,disabled:a,errorId:i&&d},"Wed"),n.a.createElement(h,{id:"thursday",name:o,disabled:a,errorId:i&&d},"Thu"),n.a.createElement(h,{id:"friday",name:o,disabled:a,errorId:i&&d},"Fri")),i&&n.a.createElement("div",{id:d,className:"slds-form-element__help"},"This field is required")))},y=n.a.createElement(E,null),O=[{id:"disabled",label:"Disabled",element:n.a.createElement(E,{disabled:!0})},{id:"required",label:"Required",element:n.a.createElement(E,{required:!0})},{id:"error",label:"Has error",element:n.a.createElement(E,{required:!0,hasError:!0})}],_=l.c.h2,j=l.c.h3,v=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"lead doc"},"A styled select list that can have a single entry checked at any one time."),_({id:"About-Radio-Button-Group"},"About Radio Button Group"),_({id:"Default"},"Default"),Object(a.createElement)(i.a,null,Object(o.f)(y)),j({id:"Mobile"},"Mobile"),Object(a.createElement)(d.a,{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"}),Object(a.createElement)(i.a,{frameOnly:!0,frameTitle:"Example mobile styles for radio button groups"},Object(o.f)(y)),_({id:"States"},"States"),j({id:"Disabled"},"Disabled"),Object(a.createElement)(i.a,null,Object(o.f)(O,"disabled")),j({id:"Required"},"Required"),Object(a.createElement)(i.a,null,Object(o.f)(O,"required")),j({id:"Has-Error"},"Has Error"),Object(a.createElement)(i.a,null,Object(o.f)(O,"error")))},g=function(){return Object(l.a)(v())}}});