npm - @salesforce-ux/design-system - Versions diffs - 2.17.2 → 2.17.3 - Mend

@salesforce-ux/design-system 2.17.2 → 2.17.3

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

Files changed (963) hide show

package/__internal/chunked/docs/ui/utilities/box/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/box/docs.mdx.js"]=function(e){function t(t){for(var a,o,s=t[0],c=t[1],i=t[2],d=0,m=[];d<s.length;d++)o=s[d],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&m.push(n[o][0]),n[o]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(u&&u(t);m.length;)m.shift()();return r.push.apply(r,i\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,s=1;s<l.length;s++){var c=l[s];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=l[0]))}return e}var a={},n={88:0},r=[];function o(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,o),l.l=!0,l.exports}o.m=e,o.c=a,o.d=function(e,t,l){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(o.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(l,a,function(t){return e[t]}.bind(null,a));return l},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\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var i=0;i<s.length;i++)t(s[i]);var u=c;return r.push([~~697~~,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~697~~:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return b})),l.d(t,"getContents",(function(){return f}));var a=l(0),n=l.n(a),r=l(4),o=l(2),s=l(1),c=[{id:"default",label:"Size - Default",element:n.a.createElement("div",{className:"slds-box"},n.a.createElement("p",null,"This is a regular-sized box."))},{id:"small",label:"Size - small",element:n.a.createElement("div",{className:"slds-box slds-box_small"},n.a.createElement("p",null,"This is a small box."))},{id:"x-small",label:"Size - x-small",element:n.a.createElement("div",{className:"slds-box slds-box_x-small"},n.a.createElement("p",null,"This is an extra-small box."))},{id:"xx-small",label:"Size - xx-small",element:n.a.createElement("div",{className:"slds-box slds-box_xx-small"},n.a.createElement("p",null,"This is an extra-extra-small box."))}],i=r.c.a,u=r.c.h2,d=r.c.h3,m=r.c.p,b=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"A box theme applies spacing, a border, and rounded corners to areas of content."),u({id:"About-Box"},"About Box"),m({},"Three padding settings are available. You can also add a ",i({href:"/utilities/themes/#flavor-color"},"color theme")," to your box."),u({id:"Base"},"Base"),Object(a.createElement)(o.a,null,Object(s.f)(c,"default")),u({id:"Examples"},"Examples"),d({id:"Small"},"Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"small")),d({id:"X-Small"},"X-Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"x-small")),d({id:"XX-Small"},"XX-Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"xx-small")))},f=function(){return Object(r.a)(b())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/box/docs.mdx.js"]=function(e){function t(t){for(var a,o,s=t[0],c=t[1],i=t[2],d=0,m=[];d<s.length;d++)o=s[d],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&m.push(n[o][0]),n[o]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(u&&u(t);m.length;)m.shift()();return r.push.apply(r,i\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,s=1;s<l.length;s++){var c=l[s];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=l[0]))}return e}var a={},n={88:0},r=[];function o(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,o),l.l=!0,l.exports}o.m=e,o.c=a,o.d=function(e,t,l){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(o.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(l,a,function(t){return e[t]}.bind(null,a));return l},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\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var i=0;i<s.length;i++)t(s[i]);var u=c;return r.push([698,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},698:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return b})),l.d(t,"getContents",(function(){return f}));var a=l(0),n=l.n(a),r=l(4),o=l(2),s=l(1),c=[{id:"default",label:"Size - Default",element:n.a.createElement("div",{className:"slds-box"},n.a.createElement("p",null,"This is a regular-sized box."))},{id:"small",label:"Size - small",element:n.a.createElement("div",{className:"slds-box slds-box_small"},n.a.createElement("p",null,"This is a small box."))},{id:"x-small",label:"Size - x-small",element:n.a.createElement("div",{className:"slds-box slds-box_x-small"},n.a.createElement("p",null,"This is an extra-small box."))},{id:"xx-small",label:"Size - xx-small",element:n.a.createElement("div",{className:"slds-box slds-box_xx-small"},n.a.createElement("p",null,"This is an extra-extra-small box."))}],i=r.c.a,u=r.c.h2,d=r.c.h3,m=r.c.p,b=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"A box theme applies spacing, a border, and rounded corners to areas of content."),u({id:"About-Box"},"About Box"),m({},"Three padding settings are available. You can also add a ",i({href:"/utilities/themes/#flavor-color"},"color theme")," to your box."),u({id:"Base"},"Base"),Object(a.createElement)(o.a,null,Object(s.f)(c,"default")),u({id:"Examples"},"Examples"),d({id:"Small"},"Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"small")),d({id:"X-Small"},"X-Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"x-small")),d({id:"XX-Small"},"XX-Small"),Object(a.createElement)(o.a,null,Object(s.f)(c,"xx-small")))},f=function(){return Object(r.a)(b())}}});

package/__internal/chunked/docs/ui/utilities/description-list/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/description-list/docs.mdx.js"]=function(e){function l(l){for(var n,i,s=l[0],o=l[1],c=l[2],u=0,m=[];u<s.length;u++)i=s[u],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&m.push(a[i][0]),a[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(l);m.length;)m.shift()();return r.push.apply(r,c\|\|[]),t()}function t(){for(var e,l=0;l<r.length;l++){for(var t=r[l],n=!0,s=1;s<t.length;s++){var o=t[s];0!==a[o]&&(n=!1)}n&&(r.splice(l--,1),e=i(i.s=t[0]))}return e}var n={},a={89:0},r=[];function i(l){if(n[l])return n[l].exports;var t=n[l]={i:l,l:!1,exports:{}};return e[l].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=e,i.c=n,i.d=function(e,l,t){i.o(e,l)\|\|Object.defineProperty(e,l,{enumerable:!0,get:t})},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,l){if(1&l&&(e=i(e)),8&l)return e;if(4&l&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&l&&"string"!=typeof e)for(var n in e)i.d(t,n,function(l){return e[l]}.bind(null,n));return t},i.n=function(e){var l=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(l,"a",l),l},i.o=function(e,l){return Object.prototype.hasOwnProperty.call(e,l)},i.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=s.push.bind(s);s.push=l,s=s.slice();for(var c=0;c<s.length;c++)l(s[c]);var d=o;return r.push([~~706~~,0]),t()}({0:function(e,l){e.exports=React},19:function(e,l){e.exports=ReactDOM},20:function(e,l){e.exports=JSBeautify},~~706~~:function(e,l,t){"use strict";t.r(l),t.d(l,"getElement",(function(){return u})),t.d(l,"getContents",(function(){return m}));var n=t(0),a=t.n(n),r=t(4),i=t(2),s=t(1),o=[{id:"description-list",label:"Default",element:a.a.createElement("dl",null,a.a.createElement("dt",null,"First Label:"),a.a.createElement("dd",null,"Description for first label"),a.a.createElement("dt",null,"Second Label:"),a.a.createElement("dd",null,"Description for second label"))},{id:"description-list-horizontal",label:"Horizontal",element:a.a.createElement("dl",{className:"slds-dl_horizontal"},a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Second description"))},{id:"horizontal-narrow",label:"Horizontal - Within narrow region",element:a.a.createElement("div",{className:"slds-region_narrow",style:{width:"360px"}},a.a.createElement("dl",{className:"slds-dl_horizontal"},a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Second description")))},{id:"description-list-inline",label:"Inline",element:a.a.createElement("dl",{className:"slds-dl_inline"},a.a.createElement("dt",{className:"slds-dl_inline__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_inline__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for second label"))},{id:"inline-narrow",label:"Inline - Within narrow region",element:a.a.createElement("div",{className:"slds-region_narrow",style:{width:"360px"}},a.a.createElement("dl",{className:"slds-dl_inline"},a.a.createElement("dt",{className:"slds-dl_inline__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_inline__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Second description")))}],c=r.c.h2,d=r.c.h3,u=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"A description list"),c({id:"Base"},"Base"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list")),c({id:"Examples"},"Examples"),d({id:"Inline"},"Inline"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list-inline")),d({id:"Inline-Narrow"},"Inline Narrow"),Object(n.createElement)(i.a,null,Object(s.f)(o,"inline-narrow")),d({id:"Horizontal"},"Horizontal"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list-horizontal")),d({id:"Horizontal-Narrow"},"Horizontal Narrow"),Object(n.createElement)(i.a,null,Object(s.f)(o,"horizontal-narrow")))},m=function(){return Object(r.a)(u())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/description-list/docs.mdx.js"]=function(e){function l(l){for(var n,i,s=l[0],o=l[1],c=l[2],u=0,m=[];u<s.length;u++)i=s[u],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&m.push(a[i][0]),a[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(l);m.length;)m.shift()();return r.push.apply(r,c\|\|[]),t()}function t(){for(var e,l=0;l<r.length;l++){for(var t=r[l],n=!0,s=1;s<t.length;s++){var o=t[s];0!==a[o]&&(n=!1)}n&&(r.splice(l--,1),e=i(i.s=t[0]))}return e}var n={},a={89:0},r=[];function i(l){if(n[l])return n[l].exports;var t=n[l]={i:l,l:!1,exports:{}};return e[l].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=e,i.c=n,i.d=function(e,l,t){i.o(e,l)\|\|Object.defineProperty(e,l,{enumerable:!0,get:t})},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,l){if(1&l&&(e=i(e)),8&l)return e;if(4&l&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&l&&"string"!=typeof e)for(var n in e)i.d(t,n,function(l){return e[l]}.bind(null,n));return t},i.n=function(e){var l=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(l,"a",l),l},i.o=function(e,l){return Object.prototype.hasOwnProperty.call(e,l)},i.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=s.push.bind(s);s.push=l,s=s.slice();for(var c=0;c<s.length;c++)l(s[c]);var d=o;return r.push([707,0]),t()}({0:function(e,l){e.exports=React},20:function(e,l){e.exports=ReactDOM},21:function(e,l){e.exports=JSBeautify},707:function(e,l,t){"use strict";t.r(l),t.d(l,"getElement",(function(){return u})),t.d(l,"getContents",(function(){return m}));var n=t(0),a=t.n(n),r=t(4),i=t(2),s=t(1),o=[{id:"description-list",label:"Default",element:a.a.createElement("dl",null,a.a.createElement("dt",null,"First Label:"),a.a.createElement("dd",null,"Description for first label"),a.a.createElement("dt",null,"Second Label:"),a.a.createElement("dd",null,"Description for second label"))},{id:"description-list-horizontal",label:"Horizontal",element:a.a.createElement("dl",{className:"slds-dl_horizontal"},a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Second description"))},{id:"horizontal-narrow",label:"Horizontal - Within narrow region",element:a.a.createElement("div",{className:"slds-region_narrow",style:{width:"360px"}},a.a.createElement("dl",{className:"slds-dl_horizontal"},a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_horizontal__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_horizontal__detail"},"Second description")))},{id:"description-list-inline",label:"Inline",element:a.a.createElement("dl",{className:"slds-dl_inline"},a.a.createElement("dt",{className:"slds-dl_inline__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_inline__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for second label"))},{id:"inline-narrow",label:"Inline - Within narrow region",element:a.a.createElement("div",{className:"slds-region_narrow",style:{width:"360px"}},a.a.createElement("dl",{className:"slds-dl_inline"},a.a.createElement("dt",{className:"slds-dl_inline__label"},"First Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Description for first label"),a.a.createElement("dt",{className:"slds-dl_inline__label"},"Second Label:"),a.a.createElement("dd",{className:"slds-dl_inline__detail"},"Second description")))}],c=r.c.h2,d=r.c.h3,u=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"A description list"),c({id:"Base"},"Base"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list")),c({id:"Examples"},"Examples"),d({id:"Inline"},"Inline"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list-inline")),d({id:"Inline-Narrow"},"Inline Narrow"),Object(n.createElement)(i.a,null,Object(s.f)(o,"inline-narrow")),d({id:"Horizontal"},"Horizontal"),Object(n.createElement)(i.a,null,Object(s.f)(o,"description-list-horizontal")),d({id:"Horizontal-Narrow"},"Horizontal Narrow"),Object(n.createElement)(i.a,null,Object(s.f)(o,"horizontal-narrow")))},m=function(){return Object(r.a)(u())}}});

package/__internal/chunked/docs/ui/utilities/floats/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/floats/docs.mdx.js"]=function(e){function t(t){for(var a,o,c=t[0],i=t[1],s=t[2],u=0,d=[];u<c.length;u++)o=c[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(f&&f(t);d.length;)d.shift()();return r.push.apply(r,s\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],a=!0,c=1;c<n.length;c++){var i=n[c];0!==l[i]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={90:0},r=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=i;return r.push([~~719~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~719~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return h}));var a=n(0),l=n.n(a),r=n(4),o=n(2),c=n(14),i=n(1),s=[{id:"left",label:"Left",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_left"},l.a.createElement("p",null,"I’m floooaaaating")))},{id:"right",label:"Right",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_right"},l.a.createElement("p",null,"I’m floooaaaating")))},{id:"none",label:"None",element:l.a.createElement("div",{className:"slds-float_none"},l.a.createElement("p",null,"I’m not floooaaaating"))},{id:"clearfix",label:"Clearfix",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_left"},l.a.createElement("p",null,"I’m floooaaaating")),l.a.createElement("div",{className:"slds-float_right"},l.a.createElement("p",null,"I’m floooaaaating")))}],f=r.c.code,u=r.c.h2,d=r.c.h3,m=r.c.p,p=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"Use a float to pull an element out of the document’s normal flow and to align it with the left or right side of the container."),u({id:"About-Floats"},"About Floats"),m({},"To float an element on the left, add the ",f({},".slds-float_left")," class to the element. To float it on the right, add the ",f({},".slds-float_right")," class."),Object(a.createElement)(c.a,{type:"note",header:"Note"},Object(a.createElement)("p",null,"The floated element must be first in the document flow, even if it renders on the right.")),m({},"If you want the parent of the floated element to contain the floats, add the ",f({},".slds-clearfix")," class to the parent."),u({id:"Examples"},"Examples"),d({id:"Left"},"Left"),Object(a.createElement)(o.a,null,Object(i.f)(s,"left")),d({id:"Right"},"Right"),Object(a.createElement)(o.a,null,Object(i.f)(s,"right")),d({id:"None"},"None"),Object(a.createElement)(o.a,null,Object(i.f)(s,"none")),d({id:"Clearfix"},"Clearfix"),Object(a.createElement)(o.a,null,Object(i.f)(s,"clearfix")))},h=function(){return Object(r.a)(p())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/floats/docs.mdx.js"]=function(e){function t(t){for(var a,o,c=t[0],i=t[1],s=t[2],u=0,d=[];u<c.length;u++)o=c[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(f&&f(t);d.length;)d.shift()();return r.push.apply(r,s\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],a=!0,c=1;c<n.length;c++){var i=n[c];0!==l[i]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={90:0},r=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=i;return r.push([720,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},720:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return h}));var a=n(0),l=n.n(a),r=n(4),o=n(2),c=n(14),i=n(1),s=[{id:"left",label:"Left",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_left"},l.a.createElement("p",null,"I’m floooaaaating")))},{id:"right",label:"Right",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_right"},l.a.createElement("p",null,"I’m floooaaaating")))},{id:"none",label:"None",element:l.a.createElement("div",{className:"slds-float_none"},l.a.createElement("p",null,"I’m not floooaaaating"))},{id:"clearfix",label:"Clearfix",element:l.a.createElement("div",{className:"slds-clearfix"},l.a.createElement("div",{className:"slds-float_left"},l.a.createElement("p",null,"I’m floooaaaating")),l.a.createElement("div",{className:"slds-float_right"},l.a.createElement("p",null,"I’m floooaaaating")))}],f=r.c.code,u=r.c.h2,d=r.c.h3,m=r.c.p,p=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"Use a float to pull an element out of the document’s normal flow and to align it with the left or right side of the container."),u({id:"About-Floats"},"About Floats"),m({},"To float an element on the left, add the ",f({},".slds-float_left")," class to the element. To float it on the right, add the ",f({},".slds-float_right")," class."),Object(a.createElement)(c.a,{type:"note",header:"Note"},Object(a.createElement)("p",null,"The floated element must be first in the document flow, even if it renders on the right.")),m({},"If you want the parent of the floated element to contain the floats, add the ",f({},".slds-clearfix")," class to the parent."),u({id:"Examples"},"Examples"),d({id:"Left"},"Left"),Object(a.createElement)(o.a,null,Object(i.f)(s,"left")),d({id:"Right"},"Right"),Object(a.createElement)(o.a,null,Object(i.f)(s,"right")),d({id:"None"},"None"),Object(a.createElement)(o.a,null,Object(i.f)(s,"none")),d({id:"Clearfix"},"Clearfix"),Object(a.createElement)(o.a,null,Object(i.f)(s,"clearfix")))},h=function(){return Object(r.a)(p())}}});

package/__internal/chunked/docs/ui/utilities/grid/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/grid/docs.mdx.js"]=function(e){function t(t){for(var a,i,r=t[0],o=t[1],d=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&u.push(s[i][0]),s[i]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(c&&c(t);u.length;)u.shift()();return n.push.apply(n,d\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==s[o]&&(a=!1)}a&&(n.splice(t--,1),e=i(i.s=l[0]))}return e}var a={},s={91:0},n=[];function i(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,i),l.l=!0,l.exports}i.m=e,i.c=a,i.d=function(e,t,l){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(i.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)i.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var c=o;return n.push([657,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},657:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return F})),l.d(t,"getContents",(function(){return J}));var a=l(0),s=l.n(a),n=l(4),i=l(5),r=l.n(i);function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(){return(d=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e}).apply(this,arguments)}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function m(e,t){for(var l=0;l<t.length;l++){var a=t[l];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function u(e,t){return(u=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function p(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var l,a=g(e);if(t){var s=g(this).constructor;l=Reflect.construct(a,arguments,s)}else l=a.apply(this,arguments);return h(this,l)}}function h(e,t){return!t\|\|"object"!==o(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var f=function(e){var t=e.count+1;return s.a.createElement("div",{className:r()("slds-col",e.className)},e.count>=0?s.a.createElement("span",null,t):s.a.createElement("span",null,e.children))},b=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}(i,e);var t,l,a,n=p(i);function i(){return c(this,i),n.apply(this,arguments)}return t=i,(l=[{key:"render",value:function(){for(var e=[],t=0;t<this.props.columns;t+=1)e.push({key:t,count:t});return s.a.createElement("div",{className:r()("slds-grid",this.props.className),style:this.props.style},this.props.columns?e.map((function(e){return s.a.createElement(f,d({key:e.key},e))})):this.props.children)}}])&&m(t.prototype,l),a&&m(t,a),i}(a.Component),y=l(2),E=l(14),v=l(3),_=l.n(v),w=l(1),z=function(e){return s.a.createElement(y.a,{demoStyles:Object(w.e)(e.collection,e.exampleId)},Object(w.f)(e.collection,e.exampleId))},x=z;z.propTypes={collection:_.a.array,exampleId:_.a.string};var N="\n/* stylelint-disable selector-class-pattern /\n\n.slds-grid {\n height: auto;\n min-height: 8.75rem;\n margin-bottom: 1rem;\n}\n\n.slds-grid > .slds-grid {\n height: auto;\n margin-bottom: 0;\n}\n\n.slds-col,\n.slds-grid > div:not(.slds-col) {\n display: inline-flex;\n background: #54698d;\n color: #fff;\n text-align: center;\n background-clip: content-box;\n border: 1px solid #fff;\n border-radius: 0;\n}\n\n.slds-col > span {\n align-self: center;\n margin: auto;\n font-size: 1.575rem;\n padding: 0.5rem;\n}\n\n.slds-wrap {\n align-items: stretch;\n}\n\n.slds-grid > div:not(.slds-col) > span {\n align-self: center;\n margin: auto;\n font-size: 1.575rem;\n padding: 0.5rem;\n}\n";function O(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,a)}return l}function j(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var C=[{id:"default-left-to-right",label:"Grid Default Left to Right",element:s.a.createElement(b,{columns:"3"}),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch",label:"Column Stretch",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-col"}),s.a.createElement("div",{className:"slds-col"})),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch-gutters",label:"Column Stretch w/ Gutters",element:s.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},s.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"}),s.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"})),description:"To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.slds-p-horizontal_small`, `.slds-p-horizontal_medium`, `.slds-p-horizontal_large`, `.slds-p-around_small`, `.slds-p-around_medium` and `.slds-p-around_large`. You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.slds-grid_pull-padded`, `.slds-grid_pull-padded-medium` or `.slds-grid_pull-padded-large` to the `.slds-grid`."},{id:"no-stretch",label:"No Column Stretch",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",null),s.a.createElement("div",null))},{id:"no-stretch-gutters",label:"No Column Stretch w/ Gutters",element:s.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},s.a.createElement("div",{className:"slds-p-horizontal_medium"}),s.a.createElement("div",{className:"slds-p-horizontal_medium"}))},{id:"regions-with-sizing",label:"Manual Sizing",element:s.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-6 slds-large-size_4-of-12"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-large-size_1-of-3"},s.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"})))),description:"If you need to set explicit widths to your grid items, apply the sizing classes to your grid items. Check out [sizing helpers here](/utilities/sizing)."},{id:"horizontal-align-center",label:"Horizontal Alignment - Center",element:s.a.createElement("div",{className:"slds-grid slds-grid_align-center"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"If you want your columns to grow from the the center of the main (horizontal) axis, apply the class `slds-grid_align-center`."},{id:"horizontal-align-space",label:"Horizontal Alignment - Space",element:s.a.createElement("div",{className:"slds-grid slds-grid_align-space"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"To evenly distribute columns on the main axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`."},{id:"vertical-align-item",label:"Vertical Alignment - Item",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-align-top"}),s.a.createElement("div",{className:"slds-align-middle"}),s.a.createElement("div",{className:"slds-align-bottom"})),description:"To specify the vertical placement of grid items on the cross axis, you can apply `.slds-align-top`, `.slds-align-middle`, and `.slds-align-bottom` to a grid item. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-strecth",label:"Vertical Stretch",element:s.a.createElement("div",{className:"slds-grid slds-grid_vertical-stretch"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"By default, grid items extend vertically unless `.slds-wrap` is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class `.slds-grid_vertical-stretch`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"align-item-bump",label:"Alignment Item Bump",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",{className:"slds-col_bump-left"}),s.a.createElement("div",null)),description:'To "bump" a single grid item or a grid item plus the precedding grid items that follow, apply the class `.slds-col_bump-{direction}`, with `{direction}` being either `left`, `right`, `top` or `bottom` to a grid item.'},{id:"order",label:"Ordering",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-order_2 slds-medium-order_1 slds-large-order_3"}),s.a.createElement("div",{className:"slds-order_3 slds-medium-order_2 slds-large-order_2"}),s.a.createElement("div",{className:"slds-order_1 slds-medium-order_3 slds-large-order_1"})),description:"These helper classes visually reorder grid elements independently from their position in the markup."},{id:"container-app-frame",label:"Container - App Frame",element:s.a.createElement("div",{className:"slds-grid slds-grid_frame"},s.a.createElement("div",null)),description:"If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class `.slds-grid_frame`."},{id:"containers",label:"Containers",element:s.a.createElement("div",{className:"slds-grid slds-grid_vertical"},s.a.createElement("div",{className:"slds-container_small"}),s.a.createElement("div",{className:"slds-container_medium"}),s.a.createElement("div",{className:"slds-container_large"}),s.a.createElement("div",{className:"slds-container_x-large"}),s.a.createElement("div",{className:"slds-container_fluid"})),description:"You can use the grid system’s containers to constrain your content to a certain width. You can center or left or right align the containers within your viewport."},{id:"2-col-with-gutters",label:"Grid Column Gutters 2 col basic",element:s.a.createElement(b,{columns:"2",className:"slds-gutters"})},{id:"intro-3-col-with-gutters",label:"Grid Intro 3 col with gutters",element:s.a.createElement(b,{columns:"3",className:"slds-gutters"})},{id:"intro-4-col-with-gutters",label:"Grid Intro 4 col with gutters",element:s.a.createElement(b,{columns:"4",className:"slds-gutters"})},{id:"intro-12-col",label:"Grid Intro 12 col",element:s.a.createElement(b,{columns:"12"})},{id:"grid-col-width-2-col",label:"Grid Column Width 2 col",element:s.a.createElement(b,{className:"slds-gutters"},s.a.createElement(f,{className:"slds-size_2-of-3"},"1"),s.a.createElement(f,{className:"slds-size_1-of-3"},"2"))},{id:"col-width-all-options",label:"Grid Column Width all options",element:s.a.createElement(b,{className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_3-of-12"},"3"),s.a.createElement(f,{className:"slds-size_3-of-12"},"3"),s.a.createElement(f,{className:"slds-size_3-of-12"},"3"),s.a.createElement(f,{className:"slds-size_3-of-12"},"3"),s.a.createElement(f,{className:"slds-size_4-of-12"},"4"),s.a.createElement(f,{className:"slds-size_4-of-12"},"4"),s.a.createElement(f,{className:"slds-size_4-of-12"},"4"),s.a.createElement(f,{className:"slds-size_5-of-12"},"5"),s.a.createElement(f,{className:"slds-size_5-of-12"},"5"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_6-of-12"},"6"),s.a.createElement(f,{className:"slds-size_6-of-12"},"6"),s.a.createElement(f,{className:"slds-size_7-of-12"},"7"),s.a.createElement(f,{className:"slds-size_5-of-12"},"5"),s.a.createElement(f,{className:"slds-size_8-of-12"},"8"),s.a.createElement(f,{className:"slds-size_4-of-12"},"4"),s.a.createElement(f,{className:"slds-size_9-of-12"},"9"),s.a.createElement(f,{className:"slds-size_3-of-12"},"3"),s.a.createElement(f,{className:"slds-size_10-of-12"},"10"),s.a.createElement(f,{className:"slds-size_2-of-12"},"2"),s.a.createElement(f,{className:"slds-size_11-of-12"},"11"),s.a.createElement(f,{className:"slds-size_1-of-12"},"1"))},{id:"col-width-all-fraction-options",label:"Grid Column Width all fraction options",element:s.a.createElement(b,{small:!0,className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(f,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(f,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(f,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(f,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(f,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(f,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(f,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(f,{className:"slds-size_1-of-2"},"1/2"),s.a.createElement(f,{className:"slds-size_1-of-2"},"1/2"),s.a.createElement(f,{className:"slds-size_1-of-1"},"1/1"))},{id:"2-col-gutters-utilities",label:"Grid Column Gutters 2 col utilities",element:s.a.createElement(b,null,s.a.createElement(f,{className:"slds-p-horizontal_medium"},"1"),s.a.createElement(f,{className:"slds-p-horizontal_medium"},"2"))},{id:"2-col-pull-padded",label:"Grid Column Gutters 2 col pull padded",element:s.a.createElement(b,{className:"slds-grid_pull-padded-medium"},s.a.createElement(f,{className:"slds-p-horizontal_medium"},"1"),s.a.createElement(f,{className:"slds-p-horizontal_medium"},"2"))},{id:"direct-col-gutters",label:"Grid Direct Column Gutters",element:s.a.createElement(b,{className:"slds-gutters_direct"},s.a.createElement(f,null,"1"),s.a.createElement("div",{className:"slds-grid"},s.a.createElement(f,null,"Nested Column 1"),s.a.createElement(f,null,"Nested Column 2")),s.a.createElement(f,null,"3"))},{id:"all-children-col-gutters",label:"Grid All Children Column Gutters",element:s.a.createElement(b,{className:"slds-gutters"},s.a.createElement(f,null,"1"),s.a.createElement("div",{className:"slds-grid"},s.a.createElement(f,null,"Nested Column 1"),s.a.createElement(f,null,"Nested Column 2")),s.a.createElement(f,null,"3"))},{id:"3-col-wrapping",label:"Grid Column Wrapping 3 col",element:s.a.createElement(b,{className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_8-of-12"},"1"),s.a.createElement(f,{className:"slds-size_5-of-12"},"1"),s.a.createElement(f,{className:"slds-size_5-of-12"},"1"))},{id:"3-col-reordering",label:"Grid Column Reordering 3 col",element:s.a.createElement(b,null,s.a.createElement(f,{className:"slds-order_3"},"1"),s.a.createElement(f,{className:"slds-order_1"},"2"),s.a.createElement(f,{className:"slds-order_2"},"3"))},{id:"col-nesting",label:"Grid Column Nesting",element:s.a.createElement(b,{className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_10-of-12"},"1"),s.a.createElement("div",{className:"slds-col slds-grid slds-size_1-of-2"},s.a.createElement(f,{className:"slds-size_1-of-2"},"Nested: 1"),s.a.createElement(f,{className:"slds-size_1-of-2"},"Nested: 2")))},{id:"vertical-align",label:"Grid Vertical Align",element:s.a.createElement(b,{className:"slds-grid_vertical"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"horizontal-reversed",label:"Grid Horizontal Reversed",element:s.a.createElement(b,{className:"slds-grid_reverse"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"vertical-aligned-reversed",label:"Grid Vertical Aligned Reversed",element:s.a.createElement(b,{className:"slds-grid_vertical-reverse",style:{height:"200px"}},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"responsive-2-col-mobile-desktop",label:"Grid Responsive 2 col mobile desktop",element:s.a.createElement(b,{className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_1-of-1 slds-large-size_8-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-1 slds-large-size_4-of-12"},"2"))},{id:"responsive-2-col-mobile-tablet-desktop",label:"Grid Responsive 2 col mobile tablet desktop",element:s.a.createElement(b,{className:"slds-wrap"},s.a.createElement(f,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_8-of-12"},"1"),s.a.createElement(f,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_4-of-12"},"2"))},{id:"responsive-reordering-2-col-mobile-desktop",label:"Grid Responsive Reordering 2 col mobile desktop",element:s.a.createElement(b,null,s.a.createElement(f,{className:"slds-order_2 slds-large-order_1"},"1"),s.a.createElement(f,{className:"slds-order_1 slds-large-order_2"},"2"))},{id:"horizontal-align-center-basic",label:"Grid Horizontal Align center basic",element:s.a.createElement(b,{className:"slds-grid_align-center"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"horizontal-align-center-variable",label:"Grid Horizontal Align center variable",element:s.a.createElement(b,{className:"slds-grid_align-center"},s.a.createElement(f,{className:"slds-size_1-of-6"},"1"),s.a.createElement(f,{className:"slds-grow-none"},"2"),s.a.createElement(f,{className:"slds-size_1-of-6"},"3"))},{id:"horizontal-align-spaced",label:"Grid Horizontal Align spaced",element:s.a.createElement(b,{className:"slds-grid_align-space"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"horizontal-align-spread",label:"Grid Horizontal Align spread",element:s.a.createElement(b,{className:"slds-grid_align-spread"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"horizontal-align-end",label:"Grid Horizontal Align end",element:s.a.createElement(b,{className:"slds-grid_align-end"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"content-alignment-bump-left",label:"Grid Content Alignment Bump Left",element:s.a.createElement(b,{bareGrid:!0},s.a.createElement("div",null,s.a.createElement("span",null,"1")),s.a.createElement("div",null,s.a.createElement("span",null,"2")),s.a.createElement("div",null,s.a.createElement("span",null,"3")),s.a.createElement("div",null,s.a.createElement("span",null,"4")),s.a.createElement("div",{className:"slds-col_bump-left"},s.a.createElement("span",null,"5")),s.a.createElement("div",null,s.a.createElement("span",null,"6")))},{id:"content-alignment-bump-right",label:"Grid Content Alignment Bump Right",element:s.a.createElement(b,{bareGrid:!0},s.a.createElement("div",null,s.a.createElement("span",null,"1")),s.a.createElement("div",null,s.a.createElement("span",null,"2")),s.a.createElement("div",null,s.a.createElement("span",null,"3")),s.a.createElement("div",null,s.a.createElement("span",null,"4")),s.a.createElement("div",{className:"slds-col_bump-right"},s.a.createElement("span",null,"5")),s.a.createElement("div",null,s.a.createElement("span",null,"6")))},{id:"vertical-align-start",label:"Grid Vertical Align start",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(b,{className:"slds-grid_vertical-align-start"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"vertical-align-center",label:"Grid Vertical Align center",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(b,{className:"slds-grid_vertical-align-center"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"vertical-align-end",label:"Grid Vertical Align end",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(b,{className:"slds-grid_vertical-align-end"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"vertical-align-absolute-center",label:"Grid Vertical Align absolute center",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(b,{className:"slds-grid_vertical-align-center slds-grid_align-center"},s.a.createElement(f,null,"1"),s.a.createElement(f,null,"2"),s.a.createElement(f,null,"3"))},{id:"vertical-align-individual",label:"Grid Vertical Align individual",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(b,null,s.a.createElement(f,{className:"slds-align-top"},"1"),s.a.createElement(f,{className:"slds-align-middle"},"2"),s.a.createElement(f,{className:"slds-align-bottom"},"3"))}].map((function(e){return function(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?O(Object(l),!0).forEach((function(t){j(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):O(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}({},e,{demoStyles:N+e.demoStyles\|\|""})})),I=function(e){return s.a.createElement(x,{collection:C,exampleId:e.exampleId})},T=I;I.propTypes={exampleId:_.a.string};var k=n.c.code,S=n.c.em,G=n.c.h2,A=n.c.h3,R=n.c.h4,P=n.c.li,L=n.c.ol,D=n.c.p,B=n.c.strong,W=n.c.table,M=n.c.tbody,Y=n.c.td,H=n.c.th,V=n.c.thead,q=n.c.tr,F=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"The SLDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters."),G({id:"About-Grids"},"About Grids"),D({},"Our most-used grid has standard 16px gutters. If you don’t have a design that calls for something more specific, this is the grid you’ll want to use. We’ll also show you exactly how to customize it for your use-case."),D({},B({},"To build a grid:")),L({},P({},"Add a grid container by adding ",k({},"slds-grid")," to an HTML element"),P({},"Add as many ",k({},"slds-col")," elements as you want inside of your grid container")),Object(a.createElement)(T,{exampleId:"intro-3-col-with-gutters"}),D({},"Initially, each column takes an equal percentage of the width available. In this case, that's 33.3% of the container’s width. Once content is added, the sections expand as needed to fit the content if sizing classes are not used."),Object(a.createElement)(T,{exampleId:"intro-4-col-with-gutters"}),D({},"Adding a fourth column means they'll each take up 25% of the width of the container."),G({id:"12-Column-Support"},"12 Column Support"),D({},"You can have up to 12 columns in your grid."),Object(a.createElement)(T,{exampleId:"intro-12-col"}),G({id:"Column-Widths"},"Column Widths"),D({},"If you don’t want the columns to have widths based on their content, you can easily control the width of the columns by adding column width classes."),Object(a.createElement)(T,{exampleId:"grid-col-width-2-col"}),D({},"This example sets the width of the first column 66% of your ",k({},"slds-grid")," container and the second column to 33% of your ",k({},"slds-grid")," container."),Object(a.createElement)(E.a,{header:"Tip"},Object(a.createElement)("p",null,"Our sizing classes set widths in percentages. This will keep your layout fluid to the width of your ",Object(a.createElement)("code",null,"slds-grid")," container.")),D({},"A 12 column grid is our most used grid. Here's an overview of all the available width classes for a 12 column grid:"),Object(a.createElement)(T,{exampleId:"col-width-all-options"}),D({},"Since width class names are written in a human-friendly way, you may choose to write ",k({},"slds-size_1-of-2")," or ",k({},"slds-size_6-of-12"),", both outcomes are the same."),Object(a.createElement)(T,{exampleId:"col-width-all-fraction-options"}),G({id:"Column-Gutters"},"Column Gutters"),D({},"By default, we start with 0 gutters on our columns. This allows flexibility to add gutter widths of your liking to each column(s) or grid container."),D({},"You can easily add padding to your grid by applying ",k({},"slds-gutters")," to the ",k({},"slds-grid")," container. This will add the gutters to your columns as well as align the outside of your grid."),Object(a.createElement)(T,{exampleId:"2-col-with-gutters"}),D({},"In the above example, adding ",k({},"slds-gutters")," will give us our default gutter size of 24px (12px on each side)."),Object(a.createElement)(E.a,{type:"note"},Object(a.createElement)("p",null,"The default ",Object(a.createElement)("code",null,"slds-gutters")," is subject to change over time but is a great way to ensure when we upgrade, you upgrade.")),D({},"You can modify the width of the gutters between each column by using ",k({},"slds-gutters_x-small")," (16px), ",k({},"slds-gutters_small")," (24px), ",k({},"slds-gutters_medium")," (32px), ",k({},"slds-gutters_large")," (48px), and ",k({},"slds-gutters_x-large")," (64px)."),D({},"You can also add different gutter widths to your columns by using a spacing utility and adding it to the ",k({},"slds-col")," element (e.g. ",k({},"slds-p-location_size-"),'). The "location" can be ',B({},"left"),", ",B({},"right"),", ",B({},"top"),", ",B({},"bottom"),", ",B({},"vertical"),", ",B({},"horizontal")," or ",B({},"around"),'. The "size" can be ',B({},"xxx-small")," (2px), ",B({},"xx-small")," (4px), ",B({},"x-small")," (8px), ",B({},"small")," (12px), ",B({},"medium")," (16px), ",B({},"large (24px)"),", ",B({},"x-large")," (32px) or ",B({},"xx-large")," (48px)."),Object(a.createElement)(T,{exampleId:"2-col-gutters-utilities"}),D({},"The above example adds gutters of 32px (16px on each side) in between each column."),D({},"You'll notice the 16px space on the left and right of your container created by the spacing classes. You can remove this by adding a ",k({},"slds-grid_pull-padded-[size]")," class to the ",k({},"slds-grid")," container. The ",k({},"[size]")," portion of this class should be the name of the spacing utility size you've applied to the outermost columns."),Object(a.createElement)(T,{exampleId:"2-col-pull-padded"}),A({id:"Direct-Columns-Only"},"Direct Columns Only"),D({},"By default, ",k({},"slds-gutters")," will apply to ",S({},"any")," column nested within the grid. If you only want ",B({},"direct")," child columns to receive gutters, use the ",k({},"slds-gutters_direct")," class."),D({},"You can modify the width of the gutters between each column by using ",k({},"slds-gutters_direct-x-small")," (16px), ",k({},"slds-gutters_direct-small")," (24px), ",k({},"slds-gutters_direct-medium")," (32px), ",k({},"slds-gutters_direct-large")," (48px), and ",k({},"slds-gutters_direct-x-large")," (64px)."),Object(a.createElement)(T,{exampleId:"direct-col-gutters"}),D({},"Below is the same example without using the ",k({},"slds-gutters_direct")," class:"),Object(a.createElement)(T,{exampleId:"all-children-col-gutters"}),G({id:"Column-Wrapping"},"Column Wrapping"),D({},"By default, your columns will align themselves horizontally unless you tell them otherwise. If you are using sizing classes (e.g. ",k({},"slds-size_4-of-12"),") and the total # of columns in a row exceed 12 then you can let the grid container know to wrap your columns to a new row by adding ",k({},"slds-wrap")," to the ",k({},"slds-grid")," container."),Object(a.createElement)(T,{exampleId:"3-col-wrapping"}),G({id:"Column-Reordering"},"Column Reordering"),Object(a.createElement)(E.a,{type:"a11y",header:"Accessibility concern"},Object(a.createElement)("p",null,"You can visually reorder columns independently from their position in the markup, but you should avoid doing so if you wish to remain WCAG compliant.")),Object(a.createElement)(T,{exampleId:"3-col-reordering"}),G({id:"Column-Nesting"},"Column Nesting"),D({},"Nesting columns is simple and can add more flexibility in your designs. In a column, you can add a nested grid by creating another ",k({},"slds-grid")," container and as many ",k({},"slds-col")," elements inside of that container as you need."),Object(a.createElement)(T,{exampleId:"col-nesting"}),G({id:"Grid-Flow"},"Grid Flow"),D({},"Once an ",k({},"slds-grid")," has been set, you can change things like flow. By ",S({},"default"),", a grid flows left to right on the main horizontal axis. You can easily switch your grid to flow top to bottom on a vertical axis by adding ",k({},"slds-grid_vertical")," to the ",k({},"slds-grid")," container."),A({id:"Left-to-Right"},"Left to Right"),D({},"The default flow is left to right on the horizontal axis"),Object(a.createElement)(T,{exampleId:"default-left-to-right"}),A({id:"Top-to-Bottom"},"Top to Bottom"),D({},"To switch the grid to flow top to bottom on the vertical axis, add ",k({},"slds-grid_vertical")," to the ",k({},"slds-grid")," container."),Object(a.createElement)(T,{exampleId:"vertical-align"}),A({id:"Reversed"},"Reversed"),D({},"There may be times you find yourself in a situation to reverse the visual flow of your columns. You can do this both horizontally and vertically."),R({id:"Right-to-Left"},"Right to Left"),D({},"To reverse the horizontal flow, add the class ",k({},"slds-grid_reverse")," to the ",k({},"slds-grid")," container."),Object(a.createElement)(T,{exampleId:"horizontal-reversed"}),R({id:"Bottom-to-Top"},"Bottom to Top"),D({},"To reverse the vertical flow, add the class ",k({},"slds-grid_vertical-reverse")," to the ",k({},"slds-grid")," container."),Object(a.createElement)(T,{exampleId:"vertical-aligned-reversed"}),G({id:"Creating-Responsive-Layouts"},"Creating Responsive Layouts"),D({},"The SLDS grid system can become responsive to your viewport size by prefixing our sizing and ordering classes with a breakpoint name. Our responsive sizing utilities are built upon a mobile first approach."),D({},"To achieve the desired outcome of this approach, you will need to append responsive sizing utilities to an element that override the previous breakpoint."),D({},"This means the sizing utility used will start at the smallest width and continue to be applied until a responsive sizing utility for a specific breakpoint overrides it."),D({},"In some uncommon cases, you may need a sizing utility that is up to a certain breakpoint. For these, use the classes prefixed with ",k({},"max-")," to achieve this result."),R({id:"Responsive-Layout-Options"},"Responsive Layout Options"),D({},"Below is an overview table outlining the default behavior for columns and how that behavior may change for responsive breakpoints."),W({},V({},q({},H({}),H({},"Default"),H({},"Small (>= 480px)"),H({},"Medium (>=768px)"),H({},"Large (>=1024px)"))),M({},q({},Y({},"Width class prefix"),Y({},k({},"slds-size")),Y({},k({},"slds-small-size")),Y({},k({},"slds-medium-size")),Y({},k({},"slds-large-size"))),q({},Y({},"# of columns"),Y({},"1,2,3,4,5,6,7,8 and 12"),Y({}),Y({}),Y({})),q({},Y({},"Column ordering prefix"),Y({},k({},"slds-order")),Y({},k({},"slds-small-order")),Y({},k({},"slds-medium-order")),Y({},k({},"slds-large-order"))),q({},Y({},"Max # of reorders"),Y({},"12"),Y({}),Y({}),Y({})))),Object(a.createElement)(E.a,null,Object(a.createElement)("p",null,"Note: To make sure columns wrap as they exceed a total column count of 12, responsive layouts require ",Object(a.createElement)("code",null,"slds-wrap")," to be added to the ",Object(a.createElement)("code",null,"slds-grid")," container.")),R({id:"MobileDesktop-Example"},"Mobile/Desktop Example"),D({},"Since we build on the concept of mobile first, let's set a layout for mobile and override for desktop directly in our HTML. We do this by setting a mobile, in this case default widths to our columns and override the layout when we meet the criteria of a desktop viewport size."),Object(a.createElement)(T,{exampleId:"responsive-2-col-mobile-desktop"}),D({},"In the above example, we are setting a stacked layout for mobile/tablet devices and then when our viewport exceeds a width of 1024px we redraw our layout to be a nice two column where the primary content area takes up 8 columns and the secondary content area takes up 4 columns."),R({id:"MobileTabletDesktop-Example"},"Mobile/Tablet/Desktop Example"),D({},"If our designs need a bit more flexibility, we can accomplish that by establishing different layouts for mobile, tablet, and desktop."),Object(a.createElement)(T,{exampleId:"responsive-2-col-mobile-tablet-desktop"}),D({},"In this above example, we are setting our default stacked layout and when our browser exceeds a viewport width of 768px, we adjust the layout for each column to take up 50% or 6 columns of the slds-grid container. Then once we exceed a viewport width of 1024px, we again redraw a layout to be a nice 66% or 8 columns for the primary content area and 33% or 4 columns for the secondary content area."),R({id:"Conditional-Column-Reordering"},"Conditional Column Reordering"),D({},"With flexbox it's easy to reorder your columns visually. Luckily with the SLDS grid system it's easy to reorder visually in a responsive manner! Following the same naming convention as sizing, we'll want to prefix ",k({},"slds-order")," with our breakpoint name and pass in an integer for where you want it visually. The lowest value is the first in order. If no order is defined, standard ordering is applied. This means that a column with no order class will render before ",k({},"slds-order_1"),"."),Object(a.createElement)(T,{exampleId:"responsive-reordering-2-col-mobile-desktop"}),D({},"In the above example, we're setting our first column to be last in the order of 3. Then once your viewport exceeds a width of 1024px, we're changing the visual order of our first column back to 1. Now this seemed rather long winded to move 1 column. Below is an easy way of letting the column know you only want to reorder the first column if it's in a viewport smaller than 480px. This breaks the convention of mobile first and should be used sparingly."),G({id:"Alignment"},"Alignment"),D({},"Since the grids are built on flexbox, they allow us to do some interesting things with alignment on both a horizontal axis and vertical axis. You can add an alignment utility to the ",k({},"slds-grid")," container."),A({id:"Horizontal-Axis"},"Horizontal Axis"),R({id:"Content-centered"},"Content centered"),D({},"If you want your columns to grow from the the center of the horizontal axis, apply the class ",k({},"slds-grid_align-center"),"."),Object(a.createElement)(T,{exampleId:"horizontal-align-center-basic"}),R({id:"Setting-variable-widths-based-on-content"},"Setting variable widths based on content"),D({},"Another powerful technique is letting a column shrink to the width of the content inside of it, while explicitly setting widths to other columns. This is achieved by using the ",k({},"slds-shrink-none")," or ",k({},"slds-grow-none")," utility classes or simply removing the ",k({},"slds-col")," class from the column element."),Object(a.createElement)(T,{exampleId:"horizontal-align-center-variable"}),R({id:"Content-evenly-spaced-out"},"Content evenly spaced out"),D({},"To evenly distribute columns on the horizontal axis with an equal amount of white space separating the columns, apply the class ",k({},"slds-grid_align-space"),"."),Object(a.createElement)(T,{exampleId:"horizontal-align-spaced"}),R({id:"Content-evenly-spread-out-from-edges"},"Content evenly spread out from edges"),D({},"To spread out your columns on the horizontal axis, with the first column starting at the start of your main axis and last item ending at the far end of your main axis, apply the class ",k({},"slds-grid_align-spread"),"."),Object(a.createElement)(T,{exampleId:"horizontal-align-spread"}),R({id:"Content-right-justified"},"Content right justified"),D({},"If you want your columns to grow from the end of the horizontal axis, apply the class ",k({},"slds-grid_align-end"),"."),Object(a.createElement)(T,{exampleId:"horizontal-align-end"}),R({id:"Content-alignment-with-bump"},"Content alignment with bump"),D({},'To "bump" a single or multiple grid items, apply the class ',k({},"slds-col_bump-{direction}"),", with ",k({},"{direction}")," being either left, right, top or bottom, to a grid item."),D({},B({},"Bump Left")),D({},"In the example below, applying the left bump class to item 5 bumps items 1 through 4 to the left."),Object(a.createElement)(T,{exampleId:"content-alignment-bump-left"}),D({},B({},"Bump Right")),D({},"In the example below, applying the right bump class to item 5 bumps item 6 to the right."),Object(a.createElement)(T,{exampleId:"content-alignment-bump-right"}),A({id:"Vertical-Axis"},"Vertical Axis"),Object(a.createElement)(E.a,{type:"note",header:"Implementation Note"},Object(a.createElement)("p",null,"To vertically align elements on a cross-axis of a `slds-grid` container, the elements need available vertical white space. This is usually achieved by having a height applied to the `slds-grid` container.")),R({id:"Content-top"},"Content top"),D({},"To align a single row or multi-line rows to the beginning of the cross axis, apply the class ",k({},"slds-grid_vertical-align-start"),"."),Object(a.createElement)(T,{exampleId:"vertical-align-start"}),R({id:"Content-centered-2"},"Content centered"),D({},"To vertically center align a single row or multi-line rows to the height of a ",k({},"slds-grid")," container, apply the class ",k({},"slds-grid_vertical-align-center"),". When ",k({},"slds-grid_vertical-align-center")," is used in conjunction with ",k({},"slds-grid_align-center"),", the outcome would horizontally and vertically center align your content in the center of the ",k({},"slds-grid")," container."),Object(a.createElement)(T,{exampleId:"vertical-align-center"}),R({id:"Content-bottom"},"Content bottom"),D({},"To align a single row or multi-line rows to the end of the cross axis, apply the class ",k({},"slds-grid_vertical-align-end"),"."),Object(a.createElement)(T,{exampleId:"vertical-align-end"}),R({id:"Content-absolutely-centered"},"Content absolutely centered"),Object(a.createElement)(T,{exampleId:"vertical-align-absolute-center"}),R({id:"Individual-alignment"},"Individual alignment"),D({},"To specify the vertical placement of grid items on the cross axis, you can apply ",k({},"slds-align-top"),", ",k({},"slds-align-middle"),", and ",k({},"slds-align-bottom")," to a ",k({},"slds-col")," element."),Object(a.createElement)(T,{exampleId:"vertical-align-individual"}),G({id:"Page-Containers"},"Page Containers"),D({},"Optionally, you can contain your page content by adding the class ",k({},"slds-container_width")," to a top level element in your page structure."),D({},"Containers come in 4 widths, ",B({},"small"),", ",B({},"medium"),", ",B({},"large")," and ",B({},"x-large"),". They are rendered using ",k({},"max-width"),". This means your content will be a fluid width until it reaches the width the modifier has set on the container."),W({},V({},q({},H({},"Class"),H({},"Width"))),M({},q({},Y({},k({},"slds-container_small")),Y({},"480px")),q({},Y({},k({},"slds-container_medium")),Y({},"768px")),q({},Y({},k({},"slds-container_large")),Y({},"1024px")),q({},Y({},k({},"slds-container_x-large")),Y({},"1280px")))),D({},"Additionally, you can center the content of your page by adding ",k({},"slds-container_center"),"."))},J=function(){return Object(n.a)(F())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/grid/docs.mdx.js"]=function(e){function t(t){for(var a,i,r=t[0],o=t[1],d=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&u.push(s[i][0]),s[i]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(c&&c(t);u.length;)u.shift()();return n.push.apply(n,d\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==s[o]&&(a=!1)}a&&(n.splice(t--,1),e=i(i.s=l[0]))}return e}var a={},s={91:0},n=[];function i(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,i),l.l=!0,l.exports}i.m=e,i.c=a,i.d=function(e,t,l){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(i.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)i.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var c=o;return n.push([660,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},660:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return R})),l.d(t,"getContents",(function(){return L}));var a=l(0),s=l.n(a),n=l(4),i=l(16),r=l(2),o=l(14),d=l(3),c=l.n(d),m=l(1),u=function(e){return s.a.createElement(r.a,{demoStyles:Object(m.e)(e.collection,e.exampleId)},Object(m.f)(e.collection,e.exampleId))},g=u;u.propTypes={collection:c.a.array,exampleId:c.a.string};var h="\n/* stylelint-disable selector-class-pattern /\n\n.slds-grid {\n height: auto;\n min-height: 8.75rem;\n margin-bottom: 1rem;\n}\n\n.slds-grid > .slds-grid {\n height: auto;\n margin-bottom: 0;\n}\n\n.slds-col,\n.slds-grid > div:not(.slds-col) {\n display: inline-flex;\n background: #54698d;\n color: #fff;\n text-align: center;\n background-clip: content-box;\n border: 1px solid #fff;\n border-radius: 0;\n}\n\n.slds-col > span {\n align-self: center;\n margin: auto;\n font-size: 1.575rem;\n padding: 0.5rem;\n}\n\n.slds-wrap {\n align-items: stretch;\n}\n\n.slds-grid > div:not(.slds-col) > span {\n align-self: center;\n margin: auto;\n font-size: 1.575rem;\n padding: 0.5rem;\n}\n";function p(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,a)}return l}function f(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var b=[{id:"default-left-to-right",label:"Grid Default Left to Right",element:s.a.createElement(i.b,{columns:"3"}),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch",label:"Column Stretch",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-col"}),s.a.createElement("div",{className:"slds-col"})),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch-gutters",label:"Column Stretch w/ Gutters",element:s.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},s.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"}),s.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"})),description:"To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.slds-p-horizontal_small`, `.slds-p-horizontal_medium`, `.slds-p-horizontal_large`, `.slds-p-around_small`, `.slds-p-around_medium` and `.slds-p-around_large`. You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.slds-grid_pull-padded`, `.slds-grid_pull-padded-medium` or `.slds-grid_pull-padded-large` to the `.slds-grid`."},{id:"no-stretch",label:"No Column Stretch",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",null),s.a.createElement("div",null))},{id:"no-stretch-gutters",label:"No Column Stretch w/ Gutters",element:s.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},s.a.createElement("div",{className:"slds-p-horizontal_medium"}),s.a.createElement("div",{className:"slds-p-horizontal_medium"}))},{id:"regions-with-sizing",label:"Manual Sizing",element:s.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-6 slds-large-size_4-of-12"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-large-size_1-of-3"},s.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"}),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"})))),description:"If you need to set explicit widths to your grid items, apply the sizing classes to your grid items. Check out [sizing helpers here](/utilities/sizing)."},{id:"horizontal-align-center",label:"Horizontal Alignment - Center",element:s.a.createElement("div",{className:"slds-grid slds-grid_align-center"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"If you want your columns to grow from the the center of the main (horizontal) axis, apply the class `slds-grid_align-center`."},{id:"horizontal-align-space",label:"Horizontal Alignment - Space",element:s.a.createElement("div",{className:"slds-grid slds-grid_align-space"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"To evenly distribute columns on the main axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`."},{id:"vertical-align-item",label:"Vertical Alignment - Item",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-align-top"}),s.a.createElement("div",{className:"slds-align-middle"}),s.a.createElement("div",{className:"slds-align-bottom"})),description:"To specify the vertical placement of grid items on the cross axis, you can apply `.slds-align-top`, `.slds-align-middle`, and `.slds-align-bottom` to a grid item. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-strecth",label:"Vertical Stretch",element:s.a.createElement("div",{className:"slds-grid slds-grid_vertical-stretch"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null)),description:"By default, grid items extend vertically unless `.slds-wrap` is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class `.slds-grid_vertical-stretch`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"align-item-bump",label:"Alignment Item Bump",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",null),s.a.createElement("div",{className:"slds-col_bump-left"}),s.a.createElement("div",null)),description:'To "bump" a single grid item or a grid item plus the precedding grid items that follow, apply the class `.slds-col_bump-{direction}`, with `{direction}` being either `left`, `right`, `top` or `bottom` to a grid item.'},{id:"order",label:"Ordering",element:s.a.createElement("div",{className:"slds-grid"},s.a.createElement("div",{className:"slds-order_2 slds-medium-order_1 slds-large-order_3"}),s.a.createElement("div",{className:"slds-order_3 slds-medium-order_2 slds-large-order_2"}),s.a.createElement("div",{className:"slds-order_1 slds-medium-order_3 slds-large-order_1"})),description:"These helper classes visually reorder grid elements independently from their position in the markup."},{id:"container-app-frame",label:"Container - App Frame",element:s.a.createElement("div",{className:"slds-grid slds-grid_frame"},s.a.createElement("div",null)),description:"If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class `.slds-grid_frame`."},{id:"containers",label:"Containers",element:s.a.createElement("div",{className:"slds-grid slds-grid_vertical"},s.a.createElement("div",{className:"slds-container_small"}),s.a.createElement("div",{className:"slds-container_medium"}),s.a.createElement("div",{className:"slds-container_large"}),s.a.createElement("div",{className:"slds-container_x-large"}),s.a.createElement("div",{className:"slds-container_fluid"})),description:"You can use the grid system’s containers to constrain your content to a certain width. You can center or left or right align the containers within your viewport."},{id:"2-col-with-gutters",label:"Grid Column Gutters 2 col basic",element:s.a.createElement(i.b,{columns:"2",className:"slds-gutters"})},{id:"intro-3-col-with-gutters",label:"Grid Intro 3 col with gutters",element:s.a.createElement(i.b,{columns:"3",className:"slds-gutters"})},{id:"intro-4-col-with-gutters",label:"Grid Intro 4 col with gutters",element:s.a.createElement(i.b,{columns:"4",className:"slds-gutters"})},{id:"intro-12-col",label:"Grid Intro 12 col",element:s.a.createElement(i.b,{columns:"12"})},{id:"grid-col-width-2-col",label:"Grid Column Width 2 col",element:s.a.createElement(i.b,{className:"slds-gutters"},s.a.createElement(i.a,{className:"slds-size_2-of-3"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-3"},"2"))},{id:"col-width-all-options",label:"Grid Column Width all options",element:s.a.createElement(i.b,{className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_3-of-12"},"3"),s.a.createElement(i.a,{className:"slds-size_3-of-12"},"3"),s.a.createElement(i.a,{className:"slds-size_3-of-12"},"3"),s.a.createElement(i.a,{className:"slds-size_3-of-12"},"3"),s.a.createElement(i.a,{className:"slds-size_4-of-12"},"4"),s.a.createElement(i.a,{className:"slds-size_4-of-12"},"4"),s.a.createElement(i.a,{className:"slds-size_4-of-12"},"4"),s.a.createElement(i.a,{className:"slds-size_5-of-12"},"5"),s.a.createElement(i.a,{className:"slds-size_5-of-12"},"5"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_6-of-12"},"6"),s.a.createElement(i.a,{className:"slds-size_6-of-12"},"6"),s.a.createElement(i.a,{className:"slds-size_7-of-12"},"7"),s.a.createElement(i.a,{className:"slds-size_5-of-12"},"5"),s.a.createElement(i.a,{className:"slds-size_8-of-12"},"8"),s.a.createElement(i.a,{className:"slds-size_4-of-12"},"4"),s.a.createElement(i.a,{className:"slds-size_9-of-12"},"9"),s.a.createElement(i.a,{className:"slds-size_3-of-12"},"3"),s.a.createElement(i.a,{className:"slds-size_10-of-12"},"10"),s.a.createElement(i.a,{className:"slds-size_2-of-12"},"2"),s.a.createElement(i.a,{className:"slds-size_11-of-12"},"11"),s.a.createElement(i.a,{className:"slds-size_1-of-12"},"1"))},{id:"col-width-all-fraction-options",label:"Grid Column Width all fraction options",element:s.a.createElement(i.b,{small:!0,className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1/6"),s.a.createElement(i.a,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(i.a,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(i.a,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(i.a,{className:"slds-size_1-of-4"},"1/4"),s.a.createElement(i.a,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(i.a,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(i.a,{className:"slds-size_1-of-3"},"1/3"),s.a.createElement(i.a,{className:"slds-size_1-of-2"},"1/2"),s.a.createElement(i.a,{className:"slds-size_1-of-2"},"1/2"),s.a.createElement(i.a,{className:"slds-size_1-of-1"},"1/1"))},{id:"2-col-gutters-utilities",label:"Grid Column Gutters 2 col utilities",element:s.a.createElement(i.b,null,s.a.createElement(i.a,{className:"slds-p-horizontal_medium"},"1"),s.a.createElement(i.a,{className:"slds-p-horizontal_medium"},"2"))},{id:"2-col-pull-padded",label:"Grid Column Gutters 2 col pull padded",element:s.a.createElement(i.b,{className:"slds-grid_pull-padded-medium"},s.a.createElement(i.a,{className:"slds-p-horizontal_medium"},"1"),s.a.createElement(i.a,{className:"slds-p-horizontal_medium"},"2"))},{id:"direct-col-gutters",label:"Grid Direct Column Gutters",element:s.a.createElement(i.b,{className:"slds-gutters_direct"},s.a.createElement(i.a,null,"1"),s.a.createElement("div",{className:"slds-grid"},s.a.createElement(i.a,null,"Nested Column 1"),s.a.createElement(i.a,null,"Nested Column 2")),s.a.createElement(i.a,null,"3"))},{id:"all-children-col-gutters",label:"Grid All Children Column Gutters",element:s.a.createElement(i.b,{className:"slds-gutters"},s.a.createElement(i.a,null,"1"),s.a.createElement("div",{className:"slds-grid"},s.a.createElement(i.a,null,"Nested Column 1"),s.a.createElement(i.a,null,"Nested Column 2")),s.a.createElement(i.a,null,"3"))},{id:"3-col-wrapping",label:"Grid Column Wrapping 3 col",element:s.a.createElement(i.b,{className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_8-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_5-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_5-of-12"},"1"))},{id:"3-col-reordering",label:"Grid Column Reordering 3 col",element:s.a.createElement(i.b,null,s.a.createElement(i.a,{className:"slds-order_3"},"1"),s.a.createElement(i.a,{className:"slds-order_1"},"2"),s.a.createElement(i.a,{className:"slds-order_2"},"3"))},{id:"col-nesting",label:"Grid Column Nesting",element:s.a.createElement(i.b,{className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_10-of-12"},"1"),s.a.createElement("div",{className:"slds-col slds-grid slds-size_1-of-2"},s.a.createElement(i.a,{className:"slds-size_1-of-2"},"Nested: 1"),s.a.createElement(i.a,{className:"slds-size_1-of-2"},"Nested: 2")))},{id:"vertical-align",label:"Grid Vertical Align",element:s.a.createElement(i.b,{className:"slds-grid_vertical"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"horizontal-reversed",label:"Grid Horizontal Reversed",element:s.a.createElement(i.b,{className:"slds-grid_reverse"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"vertical-aligned-reversed",label:"Grid Vertical Aligned Reversed",element:s.a.createElement(i.b,{className:"slds-grid_vertical-reverse",style:{height:"200px"}},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"responsive-2-col-mobile-desktop",label:"Grid Responsive 2 col mobile desktop",element:s.a.createElement(i.b,{className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_1-of-1 slds-large-size_8-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-1 slds-large-size_4-of-12"},"2"))},{id:"responsive-2-col-mobile-tablet-desktop",label:"Grid Responsive 2 col mobile tablet desktop",element:s.a.createElement(i.b,{className:"slds-wrap"},s.a.createElement(i.a,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_8-of-12"},"1"),s.a.createElement(i.a,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_4-of-12"},"2"))},{id:"responsive-reordering-2-col-mobile-desktop",label:"Grid Responsive Reordering 2 col mobile desktop",element:s.a.createElement(i.b,null,s.a.createElement(i.a,{className:"slds-order_2 slds-large-order_1"},"1"),s.a.createElement(i.a,{className:"slds-order_1 slds-large-order_2"},"2"))},{id:"horizontal-align-center-basic",label:"Grid Horizontal Align center basic",element:s.a.createElement(i.b,{className:"slds-grid_align-center"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"horizontal-align-center-variable",label:"Grid Horizontal Align center variable",element:s.a.createElement(i.b,{className:"slds-grid_align-center"},s.a.createElement(i.a,{className:"slds-size_1-of-6"},"1"),s.a.createElement(i.a,{className:"slds-grow-none"},"2"),s.a.createElement(i.a,{className:"slds-size_1-of-6"},"3"))},{id:"horizontal-align-spaced",label:"Grid Horizontal Align spaced",element:s.a.createElement(i.b,{className:"slds-grid_align-space"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"horizontal-align-spread",label:"Grid Horizontal Align spread",element:s.a.createElement(i.b,{className:"slds-grid_align-spread"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"horizontal-align-end",label:"Grid Horizontal Align end",element:s.a.createElement(i.b,{className:"slds-grid_align-end"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"content-alignment-bump-left",label:"Grid Content Alignment Bump Left",element:s.a.createElement(i.b,{bareGrid:!0},s.a.createElement("div",null,s.a.createElement("span",null,"1")),s.a.createElement("div",null,s.a.createElement("span",null,"2")),s.a.createElement("div",null,s.a.createElement("span",null,"3")),s.a.createElement("div",null,s.a.createElement("span",null,"4")),s.a.createElement("div",{className:"slds-col_bump-left"},s.a.createElement("span",null,"5")),s.a.createElement("div",null,s.a.createElement("span",null,"6")))},{id:"content-alignment-bump-right",label:"Grid Content Alignment Bump Right",element:s.a.createElement(i.b,{bareGrid:!0},s.a.createElement("div",null,s.a.createElement("span",null,"1")),s.a.createElement("div",null,s.a.createElement("span",null,"2")),s.a.createElement("div",null,s.a.createElement("span",null,"3")),s.a.createElement("div",null,s.a.createElement("span",null,"4")),s.a.createElement("div",{className:"slds-col_bump-right"},s.a.createElement("span",null,"5")),s.a.createElement("div",null,s.a.createElement("span",null,"6")))},{id:"vertical-align-start",label:"Grid Vertical Align start",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(i.b,{className:"slds-grid_vertical-align-start"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"vertical-align-center",label:"Grid Vertical Align center",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(i.b,{className:"slds-grid_vertical-align-center"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"vertical-align-end",label:"Grid Vertical Align end",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(i.b,{className:"slds-grid_vertical-align-end"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"vertical-align-absolute-center",label:"Grid Vertical Align absolute center",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(i.b,{className:"slds-grid_vertical-align-center slds-grid_align-center"},s.a.createElement(i.a,null,"1"),s.a.createElement(i.a,null,"2"),s.a.createElement(i.a,null,"3"))},{id:"vertical-align-individual",label:"Grid Vertical Align individual",demoStyles:".slds-grid { height: 200px; }",element:s.a.createElement(i.b,null,s.a.createElement(i.a,{className:"slds-align-top"},"1"),s.a.createElement(i.a,{className:"slds-align-middle"},"2"),s.a.createElement(i.a,{className:"slds-align-bottom"},"3"))}].map((function(e){return function(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?p(Object(l),!0).forEach((function(t){f(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):p(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}({},e,{demoStyles:h+e.demoStyles\|\|""})})),E=function(e){return s.a.createElement(g,{collection:b,exampleId:e.exampleId})},y=E;E.propTypes={exampleId:c.a.string};var v=n.c.code,_=n.c.em,w=n.c.h2,z=n.c.h3,x=n.c.h4,N=n.c.li,O=n.c.ol,j=n.c.p,C=n.c.strong,I=n.c.table,T=n.c.tbody,k=n.c.td,G=n.c.th,S=n.c.thead,A=n.c.tr,R=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"The SLDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters."),w({id:"About-Grids"},"About Grids"),j({},"Our most-used grid has standard 16px gutters. If you don’t have a design that calls for something more specific, this is the grid you’ll want to use. We’ll also show you exactly how to customize it for your use-case."),j({},C({},"To build a grid:")),O({},N({},"Add a grid container by adding ",v({},"slds-grid")," to an HTML element"),N({},"Add as many ",v({},"slds-col")," elements as you want inside of your grid container")),Object(a.createElement)(y,{exampleId:"intro-3-col-with-gutters"}),j({},"Initially, each column takes an equal percentage of the width available. In this case, that's 33.3% of the container’s width. Once content is added, the sections expand as needed to fit the content if sizing classes are not used."),Object(a.createElement)(y,{exampleId:"intro-4-col-with-gutters"}),j({},"Adding a fourth column means they'll each take up 25% of the width of the container."),w({id:"12-Column-Support"},"12 Column Support"),j({},"You can have up to 12 columns in your grid."),Object(a.createElement)(y,{exampleId:"intro-12-col"}),w({id:"Column-Widths"},"Column Widths"),j({},"If you don’t want the columns to have widths based on their content, you can easily control the width of the columns by adding column width classes."),Object(a.createElement)(y,{exampleId:"grid-col-width-2-col"}),j({},"This example sets the width of the first column 66% of your ",v({},"slds-grid")," container and the second column to 33% of your ",v({},"slds-grid")," container."),Object(a.createElement)(o.a,{header:"Tip"},Object(a.createElement)("p",null,"Our sizing classes set widths in percentages. This will keep your layout fluid to the width of your ",Object(a.createElement)("code",null,"slds-grid")," container.")),j({},"A 12 column grid is our most used grid. Here's an overview of all the available width classes for a 12 column grid:"),Object(a.createElement)(y,{exampleId:"col-width-all-options"}),j({},"Since width class names are written in a human-friendly way, you may choose to write ",v({},"slds-size_1-of-2")," or ",v({},"slds-size_6-of-12"),", both outcomes are the same."),Object(a.createElement)(y,{exampleId:"col-width-all-fraction-options"}),w({id:"Column-Gutters"},"Column Gutters"),j({},"By default, we start with 0 gutters on our columns. This allows flexibility to add gutter widths of your liking to each column(s) or grid container."),j({},"You can easily add padding to your grid by applying ",v({},"slds-gutters")," to the ",v({},"slds-grid")," container. This will add the gutters to your columns as well as align the outside of your grid."),Object(a.createElement)(y,{exampleId:"2-col-with-gutters"}),j({},"In the above example, adding ",v({},"slds-gutters")," will give us our default gutter size of 24px (12px on each side)."),Object(a.createElement)(o.a,{type:"note"},Object(a.createElement)("p",null,"The default ",Object(a.createElement)("code",null,"slds-gutters")," is subject to change over time but is a great way to ensure when we upgrade, you upgrade.")),j({},"You can modify the width of the gutters between each column by using ",v({},"slds-gutters_x-small")," (16px), ",v({},"slds-gutters_small")," (24px), ",v({},"slds-gutters_medium")," (32px), ",v({},"slds-gutters_large")," (48px), and ",v({},"slds-gutters_x-large")," (64px)."),j({},"You can also add different gutter widths to your columns by using a spacing utility and adding it to the ",v({},"slds-col")," element (e.g. ",v({},"slds-p-location_size-"),'). The "location" can be ',C({},"left"),", ",C({},"right"),", ",C({},"top"),", ",C({},"bottom"),", ",C({},"vertical"),", ",C({},"horizontal")," or ",C({},"around"),'. The "size" can be ',C({},"xxx-small")," (2px), ",C({},"xx-small")," (4px), ",C({},"x-small")," (8px), ",C({},"small")," (12px), ",C({},"medium")," (16px), ",C({},"large (24px)"),", ",C({},"x-large")," (32px) or ",C({},"xx-large")," (48px)."),Object(a.createElement)(y,{exampleId:"2-col-gutters-utilities"}),j({},"The above example adds gutters of 32px (16px on each side) in between each column."),j({},"You'll notice the 16px space on the left and right of your container created by the spacing classes. You can remove this by adding a ",v({},"slds-grid_pull-padded-[size]")," class to the ",v({},"slds-grid")," container. The ",v({},"[size]")," portion of this class should be the name of the spacing utility size you've applied to the outermost columns."),Object(a.createElement)(y,{exampleId:"2-col-pull-padded"}),z({id:"Direct-Columns-Only"},"Direct Columns Only"),j({},"By default, ",v({},"slds-gutters")," will apply to ",_({},"any")," column nested within the grid. If you only want ",C({},"direct")," child columns to receive gutters, use the ",v({},"slds-gutters_direct")," class."),j({},"You can modify the width of the gutters between each column by using ",v({},"slds-gutters_direct-x-small")," (16px), ",v({},"slds-gutters_direct-small")," (24px), ",v({},"slds-gutters_direct-medium")," (32px), ",v({},"slds-gutters_direct-large")," (48px), and ",v({},"slds-gutters_direct-x-large")," (64px)."),Object(a.createElement)(y,{exampleId:"direct-col-gutters"}),j({},"Below is the same example without using the ",v({},"slds-gutters_direct")," class:"),Object(a.createElement)(y,{exampleId:"all-children-col-gutters"}),w({id:"Column-Wrapping"},"Column Wrapping"),j({},"By default, your columns will align themselves horizontally unless you tell them otherwise. If you are using sizing classes (e.g. ",v({},"slds-size_4-of-12"),") and the total # of columns in a row exceed 12 then you can let the grid container know to wrap your columns to a new row by adding ",v({},"slds-wrap")," to the ",v({},"slds-grid")," container."),Object(a.createElement)(y,{exampleId:"3-col-wrapping"}),w({id:"Column-Reordering"},"Column Reordering"),Object(a.createElement)(o.a,{type:"a11y",header:"Accessibility concern"},Object(a.createElement)("p",null,"You can visually reorder columns independently from their position in the markup, but you should avoid doing so if you wish to remain WCAG compliant.")),Object(a.createElement)(y,{exampleId:"3-col-reordering"}),w({id:"Column-Nesting"},"Column Nesting"),j({},"Nesting columns is simple and can add more flexibility in your designs. In a column, you can add a nested grid by creating another ",v({},"slds-grid")," container and as many ",v({},"slds-col")," elements inside of that container as you need."),Object(a.createElement)(y,{exampleId:"col-nesting"}),w({id:"Grid-Flow"},"Grid Flow"),j({},"Once an ",v({},"slds-grid")," has been set, you can change things like flow. By ",_({},"default"),", a grid flows left to right on the main horizontal axis. You can easily switch your grid to flow top to bottom on a vertical axis by adding ",v({},"slds-grid_vertical")," to the ",v({},"slds-grid")," container."),z({id:"Left-to-Right"},"Left to Right"),j({},"The default flow is left to right on the horizontal axis"),Object(a.createElement)(y,{exampleId:"default-left-to-right"}),z({id:"Top-to-Bottom"},"Top to Bottom"),j({},"To switch the grid to flow top to bottom on the vertical axis, add ",v({},"slds-grid_vertical")," to the ",v({},"slds-grid")," container."),Object(a.createElement)(y,{exampleId:"vertical-align"}),z({id:"Reversed"},"Reversed"),j({},"There may be times you find yourself in a situation to reverse the visual flow of your columns. You can do this both horizontally and vertically."),x({id:"Right-to-Left"},"Right to Left"),j({},"To reverse the horizontal flow, add the class ",v({},"slds-grid_reverse")," to the ",v({},"slds-grid")," container."),Object(a.createElement)(y,{exampleId:"horizontal-reversed"}),x({id:"Bottom-to-Top"},"Bottom to Top"),j({},"To reverse the vertical flow, add the class ",v({},"slds-grid_vertical-reverse")," to the ",v({},"slds-grid")," container."),Object(a.createElement)(y,{exampleId:"vertical-aligned-reversed"}),w({id:"Creating-Responsive-Layouts"},"Creating Responsive Layouts"),j({},"The SLDS grid system can become responsive to your viewport size by prefixing our sizing and ordering classes with a breakpoint name. Our responsive sizing utilities are built upon a mobile first approach."),j({},"To achieve the desired outcome of this approach, you will need to append responsive sizing utilities to an element that override the previous breakpoint."),j({},"This means the sizing utility used will start at the smallest width and continue to be applied until a responsive sizing utility for a specific breakpoint overrides it."),j({},"In some uncommon cases, you may need a sizing utility that is up to a certain breakpoint. For these, use the classes prefixed with ",v({},"max-")," to achieve this result."),x({id:"Responsive-Layout-Options"},"Responsive Layout Options"),j({},"Below is an overview table outlining the default behavior for columns and how that behavior may change for responsive breakpoints."),I({},S({},A({},G({}),G({},"Default"),G({},"Small (>= 480px)"),G({},"Medium (>=768px)"),G({},"Large (>=1024px)"))),T({},A({},k({},"Width class prefix"),k({},v({},"slds-size")),k({},v({},"slds-small-size")),k({},v({},"slds-medium-size")),k({},v({},"slds-large-size"))),A({},k({},"# of columns"),k({},"1,2,3,4,5,6,7,8 and 12"),k({}),k({}),k({})),A({},k({},"Column ordering prefix"),k({},v({},"slds-order")),k({},v({},"slds-small-order")),k({},v({},"slds-medium-order")),k({},v({},"slds-large-order"))),A({},k({},"Max # of reorders"),k({},"12"),k({}),k({}),k({})))),Object(a.createElement)(o.a,null,Object(a.createElement)("p",null,"Note: To make sure columns wrap as they exceed a total column count of 12, responsive layouts require ",Object(a.createElement)("code",null,"slds-wrap")," to be added to the ",Object(a.createElement)("code",null,"slds-grid")," container.")),x({id:"MobileDesktop-Example"},"Mobile/Desktop Example"),j({},"Since we build on the concept of mobile first, let's set a layout for mobile and override for desktop directly in our HTML. We do this by setting a mobile, in this case default widths to our columns and override the layout when we meet the criteria of a desktop viewport size."),Object(a.createElement)(y,{exampleId:"responsive-2-col-mobile-desktop"}),j({},"In the above example, we are setting a stacked layout for mobile/tablet devices and then when our viewport exceeds a width of 1024px we redraw our layout to be a nice two column where the primary content area takes up 8 columns and the secondary content area takes up 4 columns."),x({id:"MobileTabletDesktop-Example"},"Mobile/Tablet/Desktop Example"),j({},"If our designs need a bit more flexibility, we can accomplish that by establishing different layouts for mobile, tablet, and desktop."),Object(a.createElement)(y,{exampleId:"responsive-2-col-mobile-tablet-desktop"}),j({},"In this above example, we are setting our default stacked layout and when our browser exceeds a viewport width of 768px, we adjust the layout for each column to take up 50% or 6 columns of the slds-grid container. Then once we exceed a viewport width of 1024px, we again redraw a layout to be a nice 66% or 8 columns for the primary content area and 33% or 4 columns for the secondary content area."),x({id:"Conditional-Column-Reordering"},"Conditional Column Reordering"),j({},"With flexbox it's easy to reorder your columns visually. Luckily with the SLDS grid system it's easy to reorder visually in a responsive manner! Following the same naming convention as sizing, we'll want to prefix ",v({},"slds-order")," with our breakpoint name and pass in an integer for where you want it visually. The lowest value is the first in order. If no order is defined, standard ordering is applied. This means that a column with no order class will render before ",v({},"slds-order_1"),"."),Object(a.createElement)(y,{exampleId:"responsive-reordering-2-col-mobile-desktop"}),j({},"In the above example, we're setting our first column to be last in the order of 3. Then once your viewport exceeds a width of 1024px, we're changing the visual order of our first column back to 1. Now this seemed rather long winded to move 1 column. Below is an easy way of letting the column know you only want to reorder the first column if it's in a viewport smaller than 480px. This breaks the convention of mobile first and should be used sparingly."),w({id:"Alignment"},"Alignment"),j({},"Since the grids are built on flexbox, they allow us to do some interesting things with alignment on both a horizontal axis and vertical axis. You can add an alignment utility to the ",v({},"slds-grid")," container."),z({id:"Horizontal-Axis"},"Horizontal Axis"),x({id:"Content-centered"},"Content centered"),j({},"If you want your columns to grow from the the center of the horizontal axis, apply the class ",v({},"slds-grid_align-center"),"."),Object(a.createElement)(y,{exampleId:"horizontal-align-center-basic"}),x({id:"Setting-variable-widths-based-on-content"},"Setting variable widths based on content"),j({},"Another powerful technique is letting a column shrink to the width of the content inside of it, while explicitly setting widths to other columns. This is achieved by using the ",v({},"slds-shrink-none")," or ",v({},"slds-grow-none")," utility classes or simply removing the ",v({},"slds-col")," class from the column element."),Object(a.createElement)(y,{exampleId:"horizontal-align-center-variable"}),x({id:"Content-evenly-spaced-out"},"Content evenly spaced out"),j({},"To evenly distribute columns on the horizontal axis with an equal amount of white space separating the columns, apply the class ",v({},"slds-grid_align-space"),"."),Object(a.createElement)(y,{exampleId:"horizontal-align-spaced"}),x({id:"Content-evenly-spread-out-from-edges"},"Content evenly spread out from edges"),j({},"To spread out your columns on the horizontal axis, with the first column starting at the start of your main axis and last item ending at the far end of your main axis, apply the class ",v({},"slds-grid_align-spread"),"."),Object(a.createElement)(y,{exampleId:"horizontal-align-spread"}),x({id:"Content-right-justified"},"Content right justified"),j({},"If you want your columns to grow from the end of the horizontal axis, apply the class ",v({},"slds-grid_align-end"),"."),Object(a.createElement)(y,{exampleId:"horizontal-align-end"}),x({id:"Content-alignment-with-bump"},"Content alignment with bump"),j({},'To "bump" a single or multiple grid items, apply the class ',v({},"slds-col_bump-{direction}"),", with ",v({},"{direction}")," being either left, right, top or bottom, to a grid item."),j({},C({},"Bump Left")),j({},"In the example below, applying the left bump class to item 5 bumps items 1 through 4 to the left."),Object(a.createElement)(y,{exampleId:"content-alignment-bump-left"}),j({},C({},"Bump Right")),j({},"In the example below, applying the right bump class to item 5 bumps item 6 to the right."),Object(a.createElement)(y,{exampleId:"content-alignment-bump-right"}),z({id:"Vertical-Axis"},"Vertical Axis"),Object(a.createElement)(o.a,{type:"note",header:"Implementation Note"},Object(a.createElement)("p",null,"To vertically align elements on a cross-axis of a `slds-grid` container, the elements need available vertical white space. This is usually achieved by having a height applied to the `slds-grid` container.")),x({id:"Content-top"},"Content top"),j({},"To align a single row or multi-line rows to the beginning of the cross axis, apply the class ",v({},"slds-grid_vertical-align-start"),"."),Object(a.createElement)(y,{exampleId:"vertical-align-start"}),x({id:"Content-centered-2"},"Content centered"),j({},"To vertically center align a single row or multi-line rows to the height of a ",v({},"slds-grid")," container, apply the class ",v({},"slds-grid_vertical-align-center"),". When ",v({},"slds-grid_vertical-align-center")," is used in conjunction with ",v({},"slds-grid_align-center"),", the outcome would horizontally and vertically center align your content in the center of the ",v({},"slds-grid")," container."),Object(a.createElement)(y,{exampleId:"vertical-align-center"}),x({id:"Content-bottom"},"Content bottom"),j({},"To align a single row or multi-line rows to the end of the cross axis, apply the class ",v({},"slds-grid_vertical-align-end"),"."),Object(a.createElement)(y,{exampleId:"vertical-align-end"}),x({id:"Content-absolutely-centered"},"Content absolutely centered"),Object(a.createElement)(y,{exampleId:"vertical-align-absolute-center"}),x({id:"Individual-alignment"},"Individual alignment"),j({},"To specify the vertical placement of grid items on the cross axis, you can apply ",v({},"slds-align-top"),", ",v({},"slds-align-middle"),", and ",v({},"slds-align-bottom")," to a ",v({},"slds-col")," element."),Object(a.createElement)(y,{exampleId:"vertical-align-individual"}),w({id:"Page-Containers"},"Page Containers"),j({},"Optionally, you can contain your page content by adding the class ",v({},"slds-container_width")," to a top level element in your page structure."),j({},"Containers come in 4 widths, ",C({},"small"),", ",C({},"medium"),", ",C({},"large")," and ",C({},"x-large"),". They are rendered using ",v({},"max-width"),". This means your content will be a fluid width until it reaches the width the modifier has set on the container."),I({},S({},A({},G({},"Class"),G({},"Width"))),T({},A({},k({},v({},"slds-container_small")),k({},"480px")),A({},k({},v({},"slds-container_medium")),k({},"768px")),A({},k({},v({},"slds-container_large")),k({},"1024px")),A({},k({},v({},"slds-container_x-large")),k({},"1280px")))),j({},"Additionally, you can center the content of your page by adding ",v({},"slds-container_center"),"."))},L=function(){return Object(n.a)(R())}}});

package/__internal/chunked/docs/ui/utilities/horizontal-list/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/horizontal-list/docs.mdx.js"]=function(e){function t(t){for(var n,r,s=t[0],c=t[1],o=t[2],u=0,f=[];u<s.length;u++)r=s[u],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&f.push(i[r][0]),i[r]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(m&&m(t);f.length;)f.shift()();return a.push.apply(a,o\|\|[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,s=1;s<l.length;s++){var c=l[s];0!==i[c]&&(n=!1)}n&&(a.splice(t--,1),e=r(r.s=l[0]))}return e}var n={},i={92:0},a=[];function r(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=n,r.d=function(e,t,l){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(l,n,function(t){return e[t]}.bind(null,n));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var o=0;o<s.length;o++)t(s[o]);var m=c;return a.push([687,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},687:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return u})),l.d(t,"getContents",(function(){return f}));var n=l(0),i=l.n(n),a=l(4),r=l(2),s=l(1),c=[{id:"horizontal-list",label:"Default",element:i.a.createElement("ul",{className:"slds-list_horizontal"},i.a.createElement("li",null,"Horizontal List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"horizontal-list-links",label:"Links",element:i.a.createElement("ul",{className:"slds-list_horizontal"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-block-links",label:"Block links",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-block-links-space",label:"Block links with space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and space")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-inline-block-links",label:"Inline block links",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-inline-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline-block level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-inline-block-links-space",label:"Inline block links with space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-inline-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline-block level links and space")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-left",label:"Divider on Left",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left"},i.a.createElement("li",{className:"slds-item"},"Horizontal List with dot dividers to the left"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"horizontal-list-link-left",label:"Divider on Left with link",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-link-space-left",label:"Divider on Left with link space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers with space")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-right",label:"Divider on Right",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right"},i.a.createElement("li",{className:"slds-item"},"Horizontal List with dot dividers to the right"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"horizontal-list-link-right",label:"Divider on Right with link",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-link-space-right",label:"Divider on Right with link space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers with space")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-large",label:"List with large spacing",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-list_horizontal-large"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with large spacing between links")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))}],o=a.c.h2,m=a.c.h3,u=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"A horizontal list"),o({id:"Base"},"Base"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list")),o({id:"Examples"},"Examples"),m({id:"Links"},"Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-links")),m({id:"Block-Links"},"Block Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-block-links")),m({id:"Block-Links-with-Space"},"Block Links with Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-block-links-space")),m({id:"Inline-Block-Links"},"Inline Block Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-inline-block-links")),m({id:"Inline-Block-Links-with-Space"},"Inline Block Links with Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-inline-block-links-space")),m({id:"Left"},"Left"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-left")),m({id:"Left-with-Link"},"Left with Link"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-left")),m({id:"Left-with-Link-Space"},"Left with Link Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-space-left")),m({id:"Right"},"Right"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-right")),m({id:"Right-with-Link"},"Right with Link"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-right")),m({id:"Right-with-Link-Space"},"Right with Link Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-space-right")))},f=function(){return Object(a.a)(u())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/horizontal-list/docs.mdx.js"]=function(e){function t(t){for(var n,r,s=t[0],c=t[1],o=t[2],u=0,f=[];u<s.length;u++)r=s[u],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&f.push(i[r][0]),i[r]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(m&&m(t);f.length;)f.shift()();return a.push.apply(a,o\|\|[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,s=1;s<l.length;s++){var c=l[s];0!==i[c]&&(n=!1)}n&&(a.splice(t--,1),e=r(r.s=l[0]))}return e}var n={},i={92:0},a=[];function r(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=n,r.d=function(e,t,l){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(l,n,function(t){return e[t]}.bind(null,n));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var o=0;o<s.length;o++)t(s[o]);var m=c;return a.push([688,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},688:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return u})),l.d(t,"getContents",(function(){return f}));var n=l(0),i=l.n(n),a=l(4),r=l(2),s=l(1),c=[{id:"horizontal-list",label:"Default",element:i.a.createElement("ul",{className:"slds-list_horizontal"},i.a.createElement("li",null,"Horizontal List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"horizontal-list-links",label:"Links",element:i.a.createElement("ul",{className:"slds-list_horizontal"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-block-links",label:"Block links",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-block-links-space",label:"Block links with space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and space")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-inline-block-links",label:"Inline block links",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-inline-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline-block level links")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-inline-block-links-space",label:"Inline block links with space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-inline-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with inline-block level links and space")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-left",label:"Divider on Left",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left"},i.a.createElement("li",{className:"slds-item"},"Horizontal List with dot dividers to the left"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"horizontal-list-link-left",label:"Divider on Left with link",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-link-space-left",label:"Divider on Left with link space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_left slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers with space")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-right",label:"Divider on Right",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right"},i.a.createElement("li",{className:"slds-item"},"Horizontal List with dot dividers to the right"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"horizontal-list-link-right",label:"Divider on Right with link",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-link-space-right",label:"Divider on Right with link space",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with block level links and dot dividers with space")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))},{id:"horizontal-list-large",label:"List with large spacing",element:i.a.createElement("ul",{className:"slds-list_horizontal slds-list_horizontal-large"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Horizontal List with large spacing between links")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")),i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List Item")))}],o=a.c.h2,m=a.c.h3,u=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"A horizontal list"),o({id:"Base"},"Base"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list")),o({id:"Examples"},"Examples"),m({id:"Links"},"Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-links")),m({id:"Block-Links"},"Block Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-block-links")),m({id:"Block-Links-with-Space"},"Block Links with Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-block-links-space")),m({id:"Inline-Block-Links"},"Inline Block Links"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-inline-block-links")),m({id:"Inline-Block-Links-with-Space"},"Inline Block Links with Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-inline-block-links-space")),m({id:"Left"},"Left"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-left")),m({id:"Left-with-Link"},"Left with Link"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-left")),m({id:"Left-with-Link-Space"},"Left with Link Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-space-left")),m({id:"Right"},"Right"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-right")),m({id:"Right-with-Link"},"Right with Link"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-right")),m({id:"Right-with-Link-Space"},"Right with Link Space"),Object(n.createElement)(r.a,null,Object(s.f)(c,"horizontal-list-link-space-right")))},f=function(){return Object(a.a)(u())}}});

package/__internal/chunked/docs/ui/utilities/hyphenation/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/hyphenation/docs.mdx.js"]=function(e){function t(t){for(var r,a,u=t[0],c=t[1],l=t[2],p=0,d=[];p<u.length;p++)a=u[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&d.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(s&&s(t);d.length;)d.shift()();return i.push.apply(i,l\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={93:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var s=c;return i.push([~~740~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~740~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return d}));var r=n(0),o=n.n(r),i=n(4),a=n(2),u=n(1),c=[{id:"default",label:"Hyphenate",element:o.a.createElement("p",{className:"slds-hyphenate"},"A long heading might be supercalifragilisticexpiallidocious.")}],l=i.c.h2,s=i.c.p,p=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"The hyphenation class should be placed on text that might be served in narrow width containers and is not truncated."),l({id:"About-Hyphenation"},"About Hyphenation"),s({},"This will allow the text to break, or hyphenate, depending on the browser's capabilities. Chrome currently doesn't show the hyphenation, but the bug is currently marked fixed, so it should soon."),l({id:"Base"},"Base"),Object(r.createElement)(a.a,null,Object(u.f)(c,"default")))},d=function(){return Object(i.a)(p())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/hyphenation/docs.mdx.js"]=function(e){function t(t){for(var r,a,u=t[0],c=t[1],l=t[2],p=0,d=[];p<u.length;p++)a=u[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&d.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(s&&s(t);d.length;)d.shift()();return i.push.apply(i,l\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={93:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var s=c;return i.push([741,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},741:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return d}));var r=n(0),o=n.n(r),i=n(4),a=n(2),u=n(1),c=[{id:"default",label:"Hyphenate",element:o.a.createElement("p",{className:"slds-hyphenate"},"A long heading might be supercalifragilisticexpiallidocious.")}],l=i.c.h2,s=i.c.p,p=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"The hyphenation class should be placed on text that might be served in narrow width containers and is not truncated."),l({id:"About-Hyphenation"},"About Hyphenation"),s({},"This will allow the text to break, or hyphenate, depending on the browser's capabilities. Chrome currently doesn't show the hyphenation, but the bug is currently marked fixed, so it should soon."),l({id:"Base"},"Base"),Object(r.createElement)(a.a,null,Object(u.f)(c,"default")))},d=function(){return Object(i.a)(p())}}});

package/__internal/chunked/docs/ui/utilities/interactions/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/interactions/docs.mdx.js"]=function(e){function t(t){for(var r,i,s=t[0],o=t[1],c=t[2],f=0,d=[];f<s.length;f++)i=s[f],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&d.push(a[i][0]),a[i]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,c\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,s=1;s<n.length;s++){var o=n[s];0!==a[o]&&(r=!1)}r&&(l.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},a={94:0},l=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.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 c=0;c<s.length;c++)t(s[c]);var u=o;return l.push([~~734~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~734~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return d}));var r=n(0),a=n.n(r),l=n(4),i=n(2),s=n(1),o=[{id:"reset",label:"Link reset",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset"},"Link")},{id:"link",label:"Link reset with text link inside",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset"},"This text is a link but looks like normal text...",a.a.createElement("span",{className:"slds-text-link"},"More"),".")},{id:"halo-focus",label:"Link reset with halo focus",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-has-blur-focus"},"Link with halo focus")},{id:"button-reset",label:"Button reset",element:a.a.createElement("button",{className:"slds-button slds-text-link_reset"},"Button")},{id:"faux",label:"Faux Link on a span",element:a.a.createElement("span",{className:"slds-text-link_faux"},"Span with faux link interactions")}],c=l.c.h2,u=l.c.h3,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Set of utilities that provide interaction(s)."),c({id:"Examples"},"Examples"),u({id:"Link-Reset"},"Link Reset"),Object(r.createElement)(i.a,null,Object(s.f)(o,"reset")),u({id:"Link-Reset-with-Text-Link-Inside"},"Link Reset with Text Link Inside"),Object(r.createElement)(i.a,null,Object(s.f)(o,"link")),u({id:"Link-Reset-with-Halo-Focus"},"Link Reset with Halo Focus"),Object(r.createElement)(i.a,null,Object(s.f)(o,"halo-focus")),u({id:"Button-Reset"},"Button Reset"),Object(r.createElement)(i.a,null,Object(s.f)(o,"button-reset")),u({id:"Faux-Link-on-a-span"},"Faux Link on a span"),Object(r.createElement)(i.a,null,Object(s.f)(o,"faux")))},d=function(){return Object(l.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/interactions/docs.mdx.js"]=function(e){function t(t){for(var r,i,s=t[0],o=t[1],c=t[2],f=0,d=[];f<s.length;f++)i=s[f],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&d.push(a[i][0]),a[i]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,c\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,s=1;s<n.length;s++){var o=n[s];0!==a[o]&&(r=!1)}r&&(l.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},a={94:0},l=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.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 c=0;c<s.length;c++)t(s[c]);var u=o;return l.push([735,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},735:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return d}));var r=n(0),a=n.n(r),l=n(4),i=n(2),s=n(1),o=[{id:"reset",label:"Link reset",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset"},"Link")},{id:"link",label:"Link reset with text link inside",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset"},"This text is a link but looks like normal text...",a.a.createElement("span",{className:"slds-text-link"},"More"),".")},{id:"halo-focus",label:"Link reset with halo focus",element:a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-has-blur-focus"},"Link with halo focus")},{id:"button-reset",label:"Button reset",element:a.a.createElement("button",{className:"slds-button slds-text-link_reset"},"Button")},{id:"faux",label:"Faux Link on a span",element:a.a.createElement("span",{className:"slds-text-link_faux"},"Span with faux link interactions")}],c=l.c.h2,u=l.c.h3,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Set of utilities that provide interaction(s)."),c({id:"Examples"},"Examples"),u({id:"Link-Reset"},"Link Reset"),Object(r.createElement)(i.a,null,Object(s.f)(o,"reset")),u({id:"Link-Reset-with-Text-Link-Inside"},"Link Reset with Text Link Inside"),Object(r.createElement)(i.a,null,Object(s.f)(o,"link")),u({id:"Link-Reset-with-Halo-Focus"},"Link Reset with Halo Focus"),Object(r.createElement)(i.a,null,Object(s.f)(o,"halo-focus")),u({id:"Button-Reset"},"Button Reset"),Object(r.createElement)(i.a,null,Object(s.f)(o,"button-reset")),u({id:"Faux-Link-on-a-span"},"Faux Link on a span"),Object(r.createElement)(i.a,null,Object(s.f)(o,"faux")))},d=function(){return Object(l.a)(f())}}});

package/__internal/chunked/docs/ui/utilities/layout/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/layout/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],d=0,p=[];d<c.length;d++)l=c[d],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&p.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(u&&u(t);p.length;)p.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={95:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var u=s;return o.push([~~692~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~692~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return j}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=n(5),s=n.n(c),i=function(e){return r.a.createElement("div",{className:s()("slds-card",e.className)},r.a.createElement("div",{className:"slds-p-around_medium"},"My Component"))},u=n(15),d=o.c.a,p=o.c.code,f=o.c.h2,m=o.c.h3,h=o.c.li,b=o.c.p,g=o.c.ul,y=function(){return Object(a.createElement)(o.b,{},Object(a.createElement)("div",{className:"doc lead"},"Layout utility classes will help you to achieve layouts found within the Salesforce Platform."),f({id:"Examples"},"Examples"),m({id:"Magnets"},"Magnets"),b({},"The magnet utilities are used to vertically attach adjacent card-like components."),b({},"The components/utilities that provide a card-like look are the following:"),g({},h({},d({href:"/components/cards/"},"Cards")),h({},d({href:"/components/page-headers"},"Page Headers")),h({},d({href:"/utilities/box"},"Box"))),b({},"If you need a card-like component to appear flush to the card-like component below, you can add the classes ",p({},"slds-has-bottom-magnet")," and ",p({},"slds-has-top-magnet"),"."),Object(a.createElement)(u.a,{title:"layout card"},Object(a.createElement)("div",{className:"slds-grid slds-grid_pull-padded slds-wrap"},Object(a.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},Object(a.createElement)("strong",null,"Before"),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("div",null,Object(a.createElement)(i,null),Object(a.createElement)(i,null)))),Object(a.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},Object(a.createElement)("strong",null,"After"),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("div",null,Object(a.createElement)(i,{className:"slds-has-bottom-magnet"}),Object(a.createElement)(i,{className:"slds-has-top-magnet"})))))),b({},"In the after example, you'll notice the component's top and bottom side are flattened out and appear connected."))},j=function(){return Object(o.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/layout/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],d=0,p=[];d<c.length;d++)l=c[d],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&p.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(u&&u(t);p.length;)p.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={95:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var u=s;return o.push([693,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},693:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return j}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=n(5),s=n.n(c),i=function(e){return r.a.createElement("div",{className:s()("slds-card",e.className)},r.a.createElement("div",{className:"slds-p-around_medium"},"My Component"))},u=n(15),d=o.c.a,p=o.c.code,f=o.c.h2,m=o.c.h3,h=o.c.li,b=o.c.p,g=o.c.ul,y=function(){return Object(a.createElement)(o.b,{},Object(a.createElement)("div",{className:"doc lead"},"Layout utility classes will help you to achieve layouts found within the Salesforce Platform."),f({id:"Examples"},"Examples"),m({id:"Magnets"},"Magnets"),b({},"The magnet utilities are used to vertically attach adjacent card-like components."),b({},"The components/utilities that provide a card-like look are the following:"),g({},h({},d({href:"/components/cards/"},"Cards")),h({},d({href:"/components/page-headers"},"Page Headers")),h({},d({href:"/utilities/box"},"Box"))),b({},"If you need a card-like component to appear flush to the card-like component below, you can add the classes ",p({},"slds-has-bottom-magnet")," and ",p({},"slds-has-top-magnet"),"."),Object(a.createElement)(u.a,{title:"layout card"},Object(a.createElement)("div",{className:"slds-grid slds-grid_pull-padded slds-wrap"},Object(a.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},Object(a.createElement)("strong",null,"Before"),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("div",null,Object(a.createElement)(i,null),Object(a.createElement)(i,null)))),Object(a.createElement)("div",{className:"slds-col slds-size_1-of-1 slds-large-size_1-of-2 slds-p-horizontal_medium"},Object(a.createElement)("strong",null,"After"),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("div",null,Object(a.createElement)(i,{className:"slds-has-bottom-magnet"}),Object(a.createElement)(i,{className:"slds-has-top-magnet"})))))),b({},"In the after example, you'll notice the component's top and bottom side are flattened out and appear connected."))},j=function(){return Object(o.a)(y())}}});

package/__internal/chunked/docs/ui/utilities/line-clamp/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/line-clamp/docs.mdx.js"]=function(e){function t(t){for(var i,s,u=t[0],r=t[1],c=t[2],d=0,o=[];d<u.length;d++)s=u[d],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&o.push(l[s][0]),l[s]=0;for(i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);for(m&&m(t);o.length;)o.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,u=1;u<a.length;u++){var r=a[u];0!==l[r]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={96:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=u.push.bind(u);u.push=t,u=u.slice();for(var c=0;c<u.length;c++)t(u[c]);var m=r;return n.push([~~736~~,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~736~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return v})),a.d(t,"getContents",(function(){return b}));var i=a(0),l=a.n(i),n=a(4),s=a(2),u=a(14),r=a(1),c=[{id:"default",label:"Line Clamp - Default",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"x-small",label:"Line Clamp - X-Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_x-small"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"small",label:"Line Clamp - Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_small"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"medium",label:"Line Clamp - Medium",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_medium"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"large",label:"Line Clamp - Large",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_large"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"block children",label:"Block Level Children",demoStyles:"width: 300px",element:l.a.createElement("div",{className:"slds-line-clamp_small"},l.a.createElement("p",null,"Lorem ipsum."),l.a.createElement("p",null,"dolor."),l.a.createElement("p",null,"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam."))}],m=n.c.code,d=n.c.h2,o=n.c.h3,p=n.c.li,f=n.c.p,h=n.c.ul,v=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Line Clamp allows for multi-line text truncation."),d({id:"About-Line-Clamp"},"About Line Clamp"),f({},"When applied to text-based elements, Line Clamp allows for configurable multi-line text truncation."),f({},"SLDS supports four different line clamp limits:"),h({},p({},m({},"slds-line-clamp")," - truncation is determined by a token, default will truncate at 3 lines of content"),p({},m({},"slds-line-clamp_x-small")," - truncates at 2 lines of content"),p({},m({},"slds-line-clamp_small")," - truncates at 3 lines of content"),p({},m({},"slds-line-clamp_medium")," - truncates at 5 lines of content"),p({},m({},"slds-line-clamp_large")," - truncates at 7 lines of content")),Object(i.createElement)(u.a,{type:"warning",header:"IE11 Not Supported"},"The use of the ",Object(i.createElement)("code",null,"line-clamp")," css property is not supported in IE11."),Object(i.createElement)(u.a,{type:"warning",header:"Not Supported on Container Elements"},Object(i.createElement)("p",null,"Note that this class should only be applied directly to the text element that needs truncation."),Object(i.createElement)("p",null,"Applying this class to elements with html element children will produce unexpected results. This use case is not supported.")),d({id:"Examples"},"Examples"),o({id:"Default"},"Default"),f({},"The ",m({},"slds-line-clamp")," class name will truncate text after three lines. The value can be changed by reassigning a value to the ",m({},"line-clamp")," token."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"default")},Object(r.f)(c,"default")),o({id:"X-Small"},"X-Small"),f({},"The ",m({},"slds-line-clamp_x-small")," class name will truncate text after two lines."),Object(i.createElement)(s.a,{style:Object(r.e)(c,"x-small")},Object(r.f)(c,"x-small")),o({id:"Small"},"Small"),f({},"The ",m({},"slds-line-clamp_small")," class name will truncate text after three lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"small")},Object(r.f)(c,"small")),o({id:"Medium"},"Medium"),f({},"The ",m({},"slds-line-clamp_medium")," class name will truncate text after five lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"medium")},Object(r.f)(c,"medium")),o({id:"Large"},"Large"),f({},"The ",m({},"slds-line-clamp_large")," class name will truncate text after seven lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"large")},Object(r.f)(c,"large")))},b=function(){return Object(n.a)(v())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/line-clamp/docs.mdx.js"]=function(e){function t(t){for(var i,s,u=t[0],r=t[1],c=t[2],d=0,o=[];d<u.length;d++)s=u[d],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&o.push(l[s][0]),l[s]=0;for(i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);for(m&&m(t);o.length;)o.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,u=1;u<a.length;u++){var r=a[u];0!==l[r]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={96:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=u.push.bind(u);u.push=t,u=u.slice();for(var c=0;c<u.length;c++)t(u[c]);var m=r;return n.push([737,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},737:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return v})),a.d(t,"getContents",(function(){return b}));var i=a(0),l=a.n(i),n=a(4),s=a(2),u=a(14),r=a(1),c=[{id:"default",label:"Line Clamp - Default",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"x-small",label:"Line Clamp - X-Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_x-small"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"small",label:"Line Clamp - Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_small"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"medium",label:"Line Clamp - Medium",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_medium"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"large",label:"Line Clamp - Large",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_large"},"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.")},{id:"block children",label:"Block Level Children",demoStyles:"width: 300px",element:l.a.createElement("div",{className:"slds-line-clamp_small"},l.a.createElement("p",null,"Lorem ipsum."),l.a.createElement("p",null,"dolor."),l.a.createElement("p",null,"Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam."))}],m=n.c.code,d=n.c.h2,o=n.c.h3,p=n.c.li,f=n.c.p,h=n.c.ul,v=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Line Clamp allows for multi-line text truncation."),d({id:"About-Line-Clamp"},"About Line Clamp"),f({},"When applied to text-based elements, Line Clamp allows for configurable multi-line text truncation."),f({},"SLDS supports four different line clamp limits:"),h({},p({},m({},"slds-line-clamp")," - truncation is determined by a token, default will truncate at 3 lines of content"),p({},m({},"slds-line-clamp_x-small")," - truncates at 2 lines of content"),p({},m({},"slds-line-clamp_small")," - truncates at 3 lines of content"),p({},m({},"slds-line-clamp_medium")," - truncates at 5 lines of content"),p({},m({},"slds-line-clamp_large")," - truncates at 7 lines of content")),Object(i.createElement)(u.a,{type:"warning",header:"IE11 Not Supported"},"The use of the ",Object(i.createElement)("code",null,"line-clamp")," css property is not supported in IE11."),Object(i.createElement)(u.a,{type:"warning",header:"Not Supported on Container Elements"},Object(i.createElement)("p",null,"Note that this class should only be applied directly to the text element that needs truncation."),Object(i.createElement)("p",null,"Applying this class to elements with html element children will produce unexpected results. This use case is not supported.")),d({id:"Examples"},"Examples"),o({id:"Default"},"Default"),f({},"The ",m({},"slds-line-clamp")," class name will truncate text after three lines. The value can be changed by reassigning a value to the ",m({},"line-clamp")," token."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"default")},Object(r.f)(c,"default")),o({id:"X-Small"},"X-Small"),f({},"The ",m({},"slds-line-clamp_x-small")," class name will truncate text after two lines."),Object(i.createElement)(s.a,{style:Object(r.e)(c,"x-small")},Object(r.f)(c,"x-small")),o({id:"Small"},"Small"),f({},"The ",m({},"slds-line-clamp_small")," class name will truncate text after three lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"small")},Object(r.f)(c,"small")),o({id:"Medium"},"Medium"),f({},"The ",m({},"slds-line-clamp_medium")," class name will truncate text after five lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"medium")},Object(r.f)(c,"medium")),o({id:"Large"},"Large"),f({},"The ",m({},"slds-line-clamp_large")," class name will truncate text after seven lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"large")},Object(r.f)(c,"large")))},b=function(){return Object(n.a)(v())}}});

package/__internal/chunked/docs/ui/utilities/margin/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/margin/docs.mdx.js"]=function(e){function t(t){for(var i,n,l=t[0],s=t[1],m=t[2],p=0,d=[];p<l.length;p++)n=l[p],Object.prototype.hasOwnProperty.call(r,n)&&r[n]&&d.push(r[n][0]),r[n]=0;for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i]);for(c&&c(t);d.length;)d.shift()();return o.push.apply(o,m\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],i=!0,l=1;l<a.length;l++){var s=a[l];0!==r[s]&&(i=!1)}i&&(o.splice(t--,1),e=n(n.s=a[0]))}return e}var i={},r={97:0},o=[];function n(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=i,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(a,i,function(t){return e[t]}.bind(null,i));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var m=0;m<l.length;m++)t(l[m]);var c=s;return o.push([582,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=JSBeautify},582:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return f})),a.d(t,"getContents",(function(){return z}));var i=a(0),r=a(4),o=a(17),n=a(15),l=r.c.a,s=r.c.code,m=r.c.h2,c=r.c.h3,p=r.c.li,d=r.c.p,u=r.c.strong,b=r.c.table,x=r.c.tbody,g=r.c.td,y=r.c.th,j=r.c.thead,O=r.c.tr,h=r.c.ul,f=function(){return Object(i.createElement)(r.b,{},Object(i.createElement)("div",{className:"doc lead"},"Adjust whitespace by applying horizontal and vertical margin helpers"),m({id:"About-Margin"},"About Margin"),d({},"The base unit of all of our spacing metrics is ",u({},"4"),"."),d({},u({},"Before using")),h({},p({},"Most components already come with spacing included. These utility classes are for added convenience in laying out components."),p({},"Classes prefixed by ",s({},"slds-m-")," are used for adding ",u({},"margins"),". Classes prefixed in ",s({},"slds-p-")," are used for adding ",l({href:"/utilities/padding"},"padding")),p({},"The directions available for the spacing classes are ",s({},"top"),", ",s({},"right"),", ",s({},"bottom"),", and ",s({},"left"),"."),p({},"You can use the ",s({},"vertical")," shortcut for both ",s({},"top")," and ",s({},"bottom"),", ",s({},"horizontal")," for both ",s({},"right")," and ",s({},"left"),", and ",s({},"around")," for all sides."),p({},"Use the ",s({},"_xxx-small")," through ",s({},"_xx-large")," scale to choose the size needed."),p({},"You can also use ",s({},"none")," as the size on any of the directions to enforce zero margin."),p({},"Where ",u({},"vertical centering")," is required, check out our ",l({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",s({},"margin")," or ",s({},"padding"),".")),m({id:"Examples"},"Examples"),c({id:"Location-Top"},"Location - Top"),Object(i.createElement)(n.a,{title:"top margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"top"}))),c({id:"Location-Left"},"Location - Left"),Object(i.createElement)(n.a,{title:"left margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"left"}))),c({id:"Location-Bottom"},"Location - Bottom"),Object(i.createElement)(n.a,{title:"bottom margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"bottom"}))),c({id:"Location-Right"},"Location - Right"),Object(i.createElement)(n.a,{title:"right margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"right"}))),c({id:"Location-Horizontal"},"Location - Horizontal"),Object(i.createElement)(n.a,{title:"horizontal margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"horizontal"}))),c({id:"Location-Vertical"},"Location - Vertical"),Object(i.createElement)(n.a,{title:"vertical margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"vertical"}))),c({id:"Location-Around"},"Location - Around"),Object(i.createElement)(n.a,{title:"around margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"around"}))),m({id:"Variable-Density-Classes"},"Variable Density Classes"),d({},"In addition to the tokens we've created to support the ",l({href:"https://developer.salesforce.com/blogs/2018/08/new-density-settings-for-the-lightning-experience-ui-in-winter-19.html"},"new density settings"),", we have also created variable density classes for both margin and padding. The tables below show how the values change between the Comfy and Compact settings."),c({id:"Around"},"Around"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-around_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_x-small")),g({},"0.5rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_small")),g({},"0.75rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-around_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-around_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-around_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-around_xx-large")),g({},"3rem"),g({},"1.5rem")))),c({id:"Left-Right-Horizontal"},"Left, Right, Horizontal"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_medium")),g({},"1rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-_xx-large")),g({},"3rem"),g({},"1.5rem")))),c({id:"Top-Bottom-Vertical"},"Top, Bottom, Vertical"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-_xx-large")),g({},"3rem"),g({},"1.5rem")))))},z=function(){return Object(r.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/margin/docs.mdx.js"]=function(e){function t(t){for(var i,n,l=t[0],s=t[1],m=t[2],p=0,d=[];p<l.length;p++)n=l[p],Object.prototype.hasOwnProperty.call(r,n)&&r[n]&&d.push(r[n][0]),r[n]=0;for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i]);for(c&&c(t);d.length;)d.shift()();return o.push.apply(o,m\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],i=!0,l=1;l<a.length;l++){var s=a[l];0!==r[s]&&(i=!1)}i&&(o.splice(t--,1),e=n(n.s=a[0]))}return e}var i={},r={97:0},o=[];function n(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=i,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(a,i,function(t){return e[t]}.bind(null,i));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var m=0;m<l.length;m++)t(l[m]);var c=s;return o.push([583,0]),a()}({0:function(e,t){e.exports=React},21:function(e,t){e.exports=JSBeautify},583:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return f})),a.d(t,"getContents",(function(){return z}));var i=a(0),r=a(4),o=a(18),n=a(15),l=r.c.a,s=r.c.code,m=r.c.h2,c=r.c.h3,p=r.c.li,d=r.c.p,u=r.c.strong,b=r.c.table,x=r.c.tbody,g=r.c.td,y=r.c.th,j=r.c.thead,O=r.c.tr,h=r.c.ul,f=function(){return Object(i.createElement)(r.b,{},Object(i.createElement)("div",{className:"doc lead"},"Adjust whitespace by applying horizontal and vertical margin helpers"),m({id:"About-Margin"},"About Margin"),d({},"The base unit of all of our spacing metrics is ",u({},"4"),"."),d({},u({},"Before using")),h({},p({},"Most components already come with spacing included. These utility classes are for added convenience in laying out components."),p({},"Classes prefixed by ",s({},"slds-m-")," are used for adding ",u({},"margins"),". Classes prefixed in ",s({},"slds-p-")," are used for adding ",l({href:"/utilities/padding"},"padding")),p({},"The directions available for the spacing classes are ",s({},"top"),", ",s({},"right"),", ",s({},"bottom"),", and ",s({},"left"),"."),p({},"You can use the ",s({},"vertical")," shortcut for both ",s({},"top")," and ",s({},"bottom"),", ",s({},"horizontal")," for both ",s({},"right")," and ",s({},"left"),", and ",s({},"around")," for all sides."),p({},"Use the ",s({},"_xxx-small")," through ",s({},"_xx-large")," scale to choose the size needed."),p({},"You can also use ",s({},"none")," as the size on any of the directions to enforce zero margin."),p({},"Where ",u({},"vertical centering")," is required, check out our ",l({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",s({},"margin")," or ",s({},"padding"),".")),m({id:"Examples"},"Examples"),c({id:"Location-Top"},"Location - Top"),Object(i.createElement)(n.a,{title:"top margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"top"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"top"}))),c({id:"Location-Left"},"Location - Left"),Object(i.createElement)(n.a,{title:"left margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"left"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"left"}))),c({id:"Location-Bottom"},"Location - Bottom"),Object(i.createElement)(n.a,{title:"bottom margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"bottom"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"bottom"}))),c({id:"Location-Right"},"Location - Right"),Object(i.createElement)(n.a,{title:"right margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"right"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"right"}))),c({id:"Location-Horizontal"},"Location - Horizontal"),Object(i.createElement)(n.a,{title:"horizontal margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"horizontal"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"horizontal"}))),c({id:"Location-Vertical"},"Location - Vertical"),Object(i.createElement)(n.a,{title:"vertical margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"vertical"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"vertical"}))),c({id:"Location-Around"},"Location - Around"),Object(i.createElement)(n.a,{title:"around margins"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(o.a,{type:"m",size:"none",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xxx-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xx-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"x-small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"small",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"medium",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"large",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"x-large",position:"around"}),Object(i.createElement)(o.a,{type:"m",size:"xx-large",position:"around"}))),m({id:"Variable-Density-Classes"},"Variable Density Classes"),d({},"In addition to the tokens we've created to support the ",l({href:"https://developer.salesforce.com/blogs/2018/08/new-density-settings-for-the-lightning-experience-ui-in-winter-19.html"},"new density settings"),", we have also created variable density classes for both margin and padding. The tables below show how the values change between the Comfy and Compact settings."),c({id:"Around"},"Around"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-around_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_x-small")),g({},"0.5rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-around_small")),g({},"0.75rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-around_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-around_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-around_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-around_xx-large")),g({},"3rem"),g({},"1.5rem")))),c({id:"Left-Right-Horizontal"},"Left, Right, Horizontal"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_medium")),g({},"1rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-_xx-large")),g({},"3rem"),g({},"1.5rem")))),c({id:"Top-Bottom-Vertical"},"Top, Bottom, Vertical"),b({},j({},O({},y({},"Class Name"),y({},"Comfy Value"),y({},"Compact Value"))),x({},O({},g({},s({},"slds-var-m-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-m-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-m-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-m-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-m-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-m-_xx-large")),g({},"3rem"),g({},"1.5rem")))))},z=function(){return Object(r.a)(f())}}});