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/media-objects/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/media-objects/docs.mdx.js"]=function(e){function t(t){for(var r,l,s=t[0],o=t[1],c=t[2],d=0,m=[];d<s.length;d++)l=s[d],Object.prototype.hasOwnProperty.call(n,l)&&n[l]&&m.push(n[l][0]),n[l]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],r=!0,s=1;s<a.length;s++){var o=a[s];0!==n[o]&&(r=!1)}r&&(i.splice(t--,1),e=l(l.s=a[0]))}return e}var r={},n={98:0},i=[];function l(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,l),a.l=!0,a.exports}l.m=e,l.c=r,l.d=function(e,t,a){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(l.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)l.d(a,r,function(t){return e[t]}.bind(null,r));return a},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 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 i.push([~~698~~,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~698~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return g})),a.d(t,"getContents",(function(){return v}));var r=a(0),n=a.n(r),i=a(4),l=a(2),s=a(1),o=a(77),c=a(46),u=n.a.createElement(c.a,{className:"slds-avatar_large"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar3.jpg",title:"User avatar"})),d=function(e){return n.a.createElement("div",{className:"demo-only slds-size_3-of-4"},n.a.createElement(o.a,{className:e.className,figureLeft:e.figureLeft,figureRight:e.figureRight,flavor:e.flavor},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.")))},m=[{id:"default",label:"Default",element:n.a.createElement(d,{figureLeft:u})},{id:"center",label:"Centered vertically",element:n.a.createElement(d,{figureLeft:u,flavor:"center"})},{id:"reverse",label:"Reverse",element:n.a.createElement(d,{figureRight:u})},{id:"reverse-center",label:"Reverse centered vertically",element:n.a.createElement(d,{figureRight:u,flavor:"center"})},{id:"double",label:"Double figures",element:n.a.createElement(d,{figureLeft:u,figureRight:u})},{id:"small",label:"Small space between figure and body",element:n.a.createElement(d,{className:"slds-media_small",figureLeft:u})},{id:"large",label:"Large space between figure and body",element:n.a.createElement(d,{className:"slds-media_large",figureLeft:u})},{id:"responsive",label:"Responsive",element:n.a.createElement("div",{className:"demo-only slds-size_3-of-4"},n.a.createElement(o.a,{figureLeft:u,flavor:"responsive"},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.")))}],f=i.c.code,b=i.c.h2,p=i.c.h3,h=i.c.p,g=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"When you need text and a figure next to each other, use a media object."),b({id:"About-Media-Objects"},"About Media Objects"),h({},"Placing text next to an image, icon, figure, or video is common for many applications. The figure can be either on the right, left, or both. The text can start at the top of the image or be centered next to it. The width of the media object is controlled either by the parent container or a secondary module class."),h({},"The ",f({},".slds-media")," object can be used as a container on any element. Inside are the two required elements. The figure (typically an image or an icon) should be placed inside an element with the ",f({},".slds-media__figure")," class. Next to it is typically some text that should be placed in an element with the ",f({},".slds-media__body")," class."),h({},"By default, the text starts at the top of the figure. Center the body and the figure by applying the ",f({},".slds-media_center")," class to ",f({},".slds-media"),"."),h({},"To position the figure on the other side of the body, apply the ",f({},".slds-media__figure_reverse")," to the figure."),h({},"You may also position figures on both sides of the body at the same time using ",f({},".slds-media__figure")," and ",f({},".slds-media__figure_reverse"),"."),b({id:"Base"},"Base"),Object(r.createElement)(l.a,null,Object(s.f)(m,"default")),b({id:"Examples"},"Examples"),p({id:"Center"},"Center"),Object(r.createElement)(l.a,null,Object(s.f)(m,"center")),p({id:"Reverse"},"Reverse"),Object(r.createElement)(l.a,null,Object(s.f)(m,"reverse")),p({id:"Reverse-Center"},"Reverse Center"),Object(r.createElement)(l.a,null,Object(s.f)(m,"reverse-center")),p({id:"Double"},"Double"),Object(r.createElement)(l.a,null,Object(s.f)(m,"double")),p({id:"Small"},"Small"),Object(r.createElement)(l.a,null,Object(s.f)(m,"small")),p({id:"Large"},"Large"),Object(r.createElement)(l.a,null,Object(s.f)(m,"large")),p({id:"Responsive"},"Responsive"),Object(r.createElement)(l.a,null,Object(s.f)(m,"responsive")))},v=function(){return Object(i.a)(g())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/media-objects/docs.mdx.js"]=function(e){function t(t){for(var r,l,s=t[0],o=t[1],c=t[2],d=0,m=[];d<s.length;d++)l=s[d],Object.prototype.hasOwnProperty.call(n,l)&&n[l]&&m.push(n[l][0]),n[l]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],r=!0,s=1;s<a.length;s++){var o=a[s];0!==n[o]&&(r=!1)}r&&(i.splice(t--,1),e=l(l.s=a[0]))}return e}var r={},n={98:0},i=[];function l(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,l),a.l=!0,a.exports}l.m=e,l.c=r,l.d=function(e,t,a){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(l.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)l.d(a,r,function(t){return e[t]}.bind(null,r));return a},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 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 i.push([699,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},699:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return g})),a.d(t,"getContents",(function(){return v}));var r=a(0),n=a.n(r),i=a(4),l=a(2),s=a(1),o=a(78),c=a(47),u=n.a.createElement(c.a,{className:"slds-avatar_large"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar3.jpg",title:"User avatar"})),d=function(e){return n.a.createElement("div",{className:"demo-only slds-size_3-of-4"},n.a.createElement(o.a,{className:e.className,figureLeft:e.figureLeft,figureRight:e.figureRight,flavor:e.flavor},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.")))},m=[{id:"default",label:"Default",element:n.a.createElement(d,{figureLeft:u})},{id:"center",label:"Centered vertically",element:n.a.createElement(d,{figureLeft:u,flavor:"center"})},{id:"reverse",label:"Reverse",element:n.a.createElement(d,{figureRight:u})},{id:"reverse-center",label:"Reverse centered vertically",element:n.a.createElement(d,{figureRight:u,flavor:"center"})},{id:"double",label:"Double figures",element:n.a.createElement(d,{figureLeft:u,figureRight:u})},{id:"small",label:"Small space between figure and body",element:n.a.createElement(d,{className:"slds-media_small",figureLeft:u})},{id:"large",label:"Large space between figure and body",element:n.a.createElement(d,{className:"slds-media_large",figureLeft:u})},{id:"responsive",label:"Responsive",element:n.a.createElement("div",{className:"demo-only slds-size_3-of-4"},n.a.createElement(o.a,{figureLeft:u,flavor:"responsive"},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.")))}],f=i.c.code,b=i.c.h2,p=i.c.h3,h=i.c.p,g=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"When you need text and a figure next to each other, use a media object."),b({id:"About-Media-Objects"},"About Media Objects"),h({},"Placing text next to an image, icon, figure, or video is common for many applications. The figure can be either on the right, left, or both. The text can start at the top of the image or be centered next to it. The width of the media object is controlled either by the parent container or a secondary module class."),h({},"The ",f({},".slds-media")," object can be used as a container on any element. Inside are the two required elements. The figure (typically an image or an icon) should be placed inside an element with the ",f({},".slds-media__figure")," class. Next to it is typically some text that should be placed in an element with the ",f({},".slds-media__body")," class."),h({},"By default, the text starts at the top of the figure. Center the body and the figure by applying the ",f({},".slds-media_center")," class to ",f({},".slds-media"),"."),h({},"To position the figure on the other side of the body, apply the ",f({},".slds-media__figure_reverse")," to the figure."),h({},"You may also position figures on both sides of the body at the same time using ",f({},".slds-media__figure")," and ",f({},".slds-media__figure_reverse"),"."),b({id:"Base"},"Base"),Object(r.createElement)(l.a,null,Object(s.f)(m,"default")),b({id:"Examples"},"Examples"),p({id:"Center"},"Center"),Object(r.createElement)(l.a,null,Object(s.f)(m,"center")),p({id:"Reverse"},"Reverse"),Object(r.createElement)(l.a,null,Object(s.f)(m,"reverse")),p({id:"Reverse-Center"},"Reverse Center"),Object(r.createElement)(l.a,null,Object(s.f)(m,"reverse-center")),p({id:"Double"},"Double"),Object(r.createElement)(l.a,null,Object(s.f)(m,"double")),p({id:"Small"},"Small"),Object(r.createElement)(l.a,null,Object(s.f)(m,"small")),p({id:"Large"},"Large"),Object(r.createElement)(l.a,null,Object(s.f)(m,"large")),p({id:"Responsive"},"Responsive"),Object(r.createElement)(l.a,null,Object(s.f)(m,"responsive")))},v=function(){return Object(i.a)(g())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/name-value-list/docs.mdx.js"]=function(e){function t(t){for(var a,s,i=t[0],c=t[1],o=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);m.length;)m.shift()();return r.push.apply(r,o\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={99:0},r=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var d=c;return r.push([~~725~~,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~725~~:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return u})),l.d(t,"getContents",(function(){return m}));var a=l(0),n=l.n(a),r=l(4),s=l(2),i=l(1),c=[{id:"name-value-pair-horizontal",label:"Horizontal",element:n.a.createElement("dl",{className:"slds-list_horizontal slds-wrap"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},{id:"name-value-pair-inline",label:"Inline",element:n.a.createElement("dl",{className:"slds-list_inline"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},{id:"name-value-pair-stacked",label:"Stacked",element:n.a.createElement("dl",{className:"slds-list_stacked"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Second description"},"Second description"))}],o=r.c.h2,d=r.c.h3,u=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"An unordered list that describes a name/value pairing."),o({id:"Examples"},"Examples"),d({id:"Horizontal"},"Horizontal"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-horizontal")),d({id:"Inline"},"Inline"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-inline")),d({id:"Stacked"},"Stacked"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-stacked")))},m=function(){return Object(r.a)(u())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/name-value-list/docs.mdx.js"]=function(e){function t(t){for(var a,s,i=t[0],c=t[1],o=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);m.length;)m.shift()();return r.push.apply(r,o\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={99:0},r=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var d=c;return r.push([726,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},726:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return u})),l.d(t,"getContents",(function(){return m}));var a=l(0),n=l.n(a),r=l(4),s=l(2),i=l(1),c=[{id:"name-value-pair-horizontal",label:"Horizontal",element:n.a.createElement("dl",{className:"slds-list_horizontal slds-wrap"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},{id:"name-value-pair-inline",label:"Inline",element:n.a.createElement("dl",{className:"slds-list_inline"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},{id:"name-value-pair-stacked",label:"Stacked",element:n.a.createElement("dl",{className:"slds-list_stacked"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n.a.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Second description"},"Second description"))}],o=r.c.h2,d=r.c.h3,u=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"An unordered list that describes a name/value pairing."),o({id:"Examples"},"Examples"),d({id:"Horizontal"},"Horizontal"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-horizontal")),d({id:"Inline"},"Inline"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-inline")),d({id:"Stacked"},"Stacked"),Object(a.createElement)(s.a,null,Object(i.f)(c,"name-value-pair-stacked")))},m=function(){return Object(r.a)(u())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/padding/docs.mdx.js"]=function(e){function t(t){for(var i,n,l=t[0],s=t[1],p=t[2],m=0,d=[];m<l.length;m++)n=l[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&d.push(o[n][0]),o[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 r.push.apply(r,p\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],i=!0,l=1;l<a.length;l++){var s=a[l];0!==o[s]&&(i=!1)}i&&(r.splice(t--,1),e=n(n.s=a[0]))}return e}var i={},o={100:0},r=[];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 p=0;p<l.length;p++)t(l[p]);var c=s;return r.push([585,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=JSBeautify},585: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),o=a(4),r=a(17),n=a(15),l=o.c.a,s=o.c.code,p=o.c.h2,c=o.c.h3,m=o.c.li,d=o.c.p,u=o.c.strong,b=o.c.table,x=o.c.tbody,g=o.c.td,y=o.c.th,j=o.c.thead,O=o.c.tr,h=o.c.ul,f=function(){return Object(i.createElement)(o.b,{},Object(i.createElement)("div",{className:"doc lead"},"Adjust whitespace by applying horizontal and vertical padding helpers."),p({id:"About-Padding"},"About Padding"),d({},"The base unit of all of our spacing metrics is ",u({},"4"),"."),d({},u({},"Before using")),h({},m({},"Most components already come with spacing included. These utility classes are for added convenience in laying out components."),m({},"Classes prefixed by ",s({},"slds-p-")," are used for adding ",u({},"padding"),". Classes prefixed in ",s({},"slds-m-")," are used for adding ",l({href:"/utilities/margin"},"margin")),m({},"The directions available for the spacing classes are ",s({},"top"),", ",s({},"right"),", ",s({},"bottom"),", and ",s({},"left"),"."),m({},"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."),m({},"Use the ",s({},"_xxx-small")," through ",s({},"_xx-large")," scale to choose the size needed."),m({},"You can also use ",s({},"none")," as the size on any of the directions to enforce zero padding."),m({},"Where ",u({},"vertical centering")," is required, check out our ",l({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",s({},"padding")," or ",s({},"margin"),".")),p({id:"Examples"},"Examples"),c({id:"Location-Top"},"Location - Top"),Object(i.createElement)(n.a,{title:"top paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"top"}))),c({id:"Location-Left"},"Location - Left"),Object(i.createElement)(n.a,{title:"left paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"left"}))),c({id:"Location-Bottom"},"Location - Bottom"),Object(i.createElement)(n.a,{title:"bottom paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"bottom"}))),c({id:"Location-Right"},"Location - Right"),Object(i.createElement)(n.a,{title:"right paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"right"}))),c({id:"Location-Horizontal"},"Location - Horizontal"),Object(i.createElement)(n.a,{title:"horizontal paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"horizontal"}))),c({id:"Location-Vertical"},"Location - Vertical"),Object(i.createElement)(n.a,{title:"vertical paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"vertical"}))),c({id:"Location-Around"},"Location - Around"),Object(i.createElement)(n.a,{title:"around paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"around"}))),p({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 padding and margin. 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-p-around_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_x-small")),g({},"0.5rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_small")),g({},"0.75rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-around_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-around_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-around_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-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-p-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_medium")),g({},"1rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-_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-p-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-_xx-large")),g({},"3rem"),g({},"1.5rem")))))},z=function(){return Object(o.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/padding/docs.mdx.js"]=function(e){function t(t){for(var i,n,l=t[0],s=t[1],p=t[2],m=0,d=[];m<l.length;m++)n=l[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&d.push(o[n][0]),o[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 r.push.apply(r,p\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],i=!0,l=1;l<a.length;l++){var s=a[l];0!==o[s]&&(i=!1)}i&&(r.splice(t--,1),e=n(n.s=a[0]))}return e}var i={},o={100:0},r=[];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 p=0;p<l.length;p++)t(l[p]);var c=s;return r.push([586,0]),a()}({0:function(e,t){e.exports=React},21:function(e,t){e.exports=JSBeautify},586: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),o=a(4),r=a(18),n=a(15),l=o.c.a,s=o.c.code,p=o.c.h2,c=o.c.h3,m=o.c.li,d=o.c.p,u=o.c.strong,b=o.c.table,x=o.c.tbody,g=o.c.td,y=o.c.th,j=o.c.thead,O=o.c.tr,h=o.c.ul,f=function(){return Object(i.createElement)(o.b,{},Object(i.createElement)("div",{className:"doc lead"},"Adjust whitespace by applying horizontal and vertical padding helpers."),p({id:"About-Padding"},"About Padding"),d({},"The base unit of all of our spacing metrics is ",u({},"4"),"."),d({},u({},"Before using")),h({},m({},"Most components already come with spacing included. These utility classes are for added convenience in laying out components."),m({},"Classes prefixed by ",s({},"slds-p-")," are used for adding ",u({},"padding"),". Classes prefixed in ",s({},"slds-m-")," are used for adding ",l({href:"/utilities/margin"},"margin")),m({},"The directions available for the spacing classes are ",s({},"top"),", ",s({},"right"),", ",s({},"bottom"),", and ",s({},"left"),"."),m({},"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."),m({},"Use the ",s({},"_xxx-small")," through ",s({},"_xx-large")," scale to choose the size needed."),m({},"You can also use ",s({},"none")," as the size on any of the directions to enforce zero padding."),m({},"Where ",u({},"vertical centering")," is required, check out our ",l({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",s({},"padding")," or ",s({},"margin"),".")),p({id:"Examples"},"Examples"),c({id:"Location-Top"},"Location - Top"),Object(i.createElement)(n.a,{title:"top paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"top"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"top"}))),c({id:"Location-Left"},"Location - Left"),Object(i.createElement)(n.a,{title:"left paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"left"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"left"}))),c({id:"Location-Bottom"},"Location - Bottom"),Object(i.createElement)(n.a,{title:"bottom paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"bottom"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"bottom"}))),c({id:"Location-Right"},"Location - Right"),Object(i.createElement)(n.a,{title:"right paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"right"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"right"}))),c({id:"Location-Horizontal"},"Location - Horizontal"),Object(i.createElement)(n.a,{title:"horizontal paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"horizontal"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"horizontal"}))),c({id:"Location-Vertical"},"Location - Vertical"),Object(i.createElement)(n.a,{title:"vertical paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"vertical"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"vertical"}))),c({id:"Location-Around"},"Location - Around"),Object(i.createElement)(n.a,{title:"around paddings"},Object(i.createElement)(i.Fragment,null,Object(i.createElement)(r.a,{type:"p",size:"none",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xxx-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xx-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"x-small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"small",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"medium",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"large",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"x-large",position:"around"}),Object(i.createElement)(r.a,{type:"p",size:"xx-large",position:"around"}))),p({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 padding and margin. 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-p-around_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_x-small")),g({},"0.5rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-around_small")),g({},"0.75rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-around_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-around_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-around_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-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-p-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_medium")),g({},"1rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-_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-p-_xxx-small")),g({},"0.125rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_xx-small")),g({},"0.25rem"),g({},"0.125rem")),O({},g({},s({},"slds-var-p-_x-small")),g({},"0.5rem"),g({},"0.25rem")),O({},g({},s({},"slds-var-p-_small")),g({},"0.75rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_medium")),g({},"1rem"),g({},"0.5rem")),O({},g({},s({},"slds-var-p-_large")),g({},"1.5rem"),g({},"0.75rem")),O({},g({},s({},"slds-var-p-_x-large")),g({},"2rem"),g({},"1rem")),O({},g({},s({},"slds-var-p-_xx-large")),g({},"3rem"),g({},"1.5rem")))))},z=function(){return Object(o.a)(f())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/position/docs.mdx.js"]=function(e){function t(t){for(var o,a,s=t[0],r=t[1],d=t[2],u=0,p=[];u<s.length;u++)a=s[u],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&p.push(n[a][0]),n[a]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(c&&c(t);p.length;)p.shift()();return l.push.apply(l,d\|\|[]),i()}function i(){for(var e,t=0;t<l.length;t++){for(var i=l[t],o=!0,s=1;s<i.length;s++){var r=i[s];0!==n[r]&&(o=!1)}o&&(l.splice(t--,1),e=a(a.s=i[0]))}return e}var o={},n={101:0},l=[];function a(t){if(o[t])return o[t].exports;var i=o[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,a),i.l=!0,i.exports}a.m=e,a.c=o,a.d=function(e,t,i){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(i,o,function(t){return e[t]}.bind(null,o));return i},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 s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var c=r;return l.push([~~691~~,0]),i()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~691~~:function(e,t,i){"use strict";i.r(t),i.d(t,"getElement",(function(){return m})),i.d(t,"getContents",(function(){return f}));var o=i(0),n=i.n(o),l=i(4),a=i(2),s=i(1),r=[{id:"fixed",label:"Fixed",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-fixed"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with fixed positioning is positioned relative to the viewport. If no other positioning values are given (",n.a.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-fixed` can be used to position a container relative to the viewport."},{id:"absolute",label:"Absolute",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-absolute"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with absolute positioning is positioned relative to its closest ancestor with relative positioning. If no other positioning values are given (",n.a.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-absolute` can be used to position a container relative to its closest ancestor with relative positioning."},{id:"relative",label:"Relative",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-relative"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"Like static, a relatively positioned element is put where its normal position would be in the document layout flow."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-relative` can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout."},{id:"static",label:"Static",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-static"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"A static positioned element is positioned exactly as it comes in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-static` resets positioning of element back to normal behavior."}],d=l.c.code,c=l.c.h2,u=l.c.h3,p=l.c.p,m=function(){return Object(o.createElement)(l.b,{},Object(o.createElement)("div",{className:"doc lead"},"Positioning utilities give you the ability to change the position property of an element."),c({id:"Examples"},"Examples"),u({id:"Fixed"},"Fixed"),p({},d({},".slds-is-fixed")," can be used to position a container relative to the viewport."),Object(o.createElement)(a.a,null,Object(s.f)(r,"fixed")),u({id:"Absolute"},"Absolute"),p({},d({},".slds-is-absolute")," can be used to position a container relative to its closest ancestor with relative positioning."),Object(o.createElement)(a.a,null,Object(s.f)(r,"absolute")),u({id:"Relative"},"Relative"),p({},d({},".slds-is-relative")," can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout."),Object(o.createElement)(a.a,null,Object(s.f)(r,"relative")),u({id:"Static"},"Static"),p({},d({},".slds-is-static")," resets positioning of element back to normal behavior."),Object(o.createElement)(a.a,null,Object(s.f)(r,"static")))},f=function(){return Object(l.a)(m())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/position/docs.mdx.js"]=function(e){function t(t){for(var o,a,s=t[0],r=t[1],d=t[2],u=0,p=[];u<s.length;u++)a=s[u],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&p.push(n[a][0]),n[a]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(c&&c(t);p.length;)p.shift()();return l.push.apply(l,d\|\|[]),i()}function i(){for(var e,t=0;t<l.length;t++){for(var i=l[t],o=!0,s=1;s<i.length;s++){var r=i[s];0!==n[r]&&(o=!1)}o&&(l.splice(t--,1),e=a(a.s=i[0]))}return e}var o={},n={101:0},l=[];function a(t){if(o[t])return o[t].exports;var i=o[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,a),i.l=!0,i.exports}a.m=e,a.c=o,a.d=function(e,t,i){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(a.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(i,o,function(t){return e[t]}.bind(null,o));return i},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 s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var c=r;return l.push([692,0]),i()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},692:function(e,t,i){"use strict";i.r(t),i.d(t,"getElement",(function(){return m})),i.d(t,"getContents",(function(){return f}));var o=i(0),n=i.n(o),l=i(4),a=i(2),s=i(1),r=[{id:"fixed",label:"Fixed",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-fixed"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with fixed positioning is positioned relative to the viewport. If no other positioning values are given (",n.a.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-fixed` can be used to position a container relative to the viewport."},{id:"absolute",label:"Absolute",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-absolute"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with absolute positioning is positioned relative to its closest ancestor with relative positioning. If no other positioning values are given (",n.a.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-absolute` can be used to position a container relative to its closest ancestor with relative positioning."},{id:"relative",label:"Relative",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-relative"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"Like static, a relatively positioned element is put where its normal position would be in the document layout flow."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-relative` can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout."},{id:"static",label:"Static",element:n.a.createElement("div",{className:"demo-only slds-grid",style:{height:"10rem",width:"20rem",padding:"2rem"}},n.a.createElement("div",{className:"slds-is-static"},n.a.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"A static positioned element is positioned exactly as it comes in the flow of the page."),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-static` resets positioning of element back to normal behavior."}],d=l.c.code,c=l.c.h2,u=l.c.h3,p=l.c.p,m=function(){return Object(o.createElement)(l.b,{},Object(o.createElement)("div",{className:"doc lead"},"Positioning utilities give you the ability to change the position property of an element."),c({id:"Examples"},"Examples"),u({id:"Fixed"},"Fixed"),p({},d({},".slds-is-fixed")," can be used to position a container relative to the viewport."),Object(o.createElement)(a.a,null,Object(s.f)(r,"fixed")),u({id:"Absolute"},"Absolute"),p({},d({},".slds-is-absolute")," can be used to position a container relative to its closest ancestor with relative positioning."),Object(o.createElement)(a.a,null,Object(s.f)(r,"absolute")),u({id:"Relative"},"Relative"),p({},d({},".slds-is-relative")," can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout."),Object(o.createElement)(a.a,null,Object(s.f)(r,"relative")),u({id:"Static"},"Static"),p({},d({},".slds-is-static")," resets positioning of element back to normal behavior."),Object(o.createElement)(a.a,null,Object(s.f)(r,"static")))},f=function(){return Object(l.a)(m())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/print/docs.mdx.js"]=function(e){function t(t){for(var r,c,u=t[0],a=t[1],l=t[2],p=0,f=[];p<u.length;p++)c=u[p],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&f.push(o[c][0]),o[c]=0;for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);for(s&&s(t);f.length;)f.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 a=n[u];0!==o[a]&&(r=!1)}r&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var r={},o={102:0},i=[];function c(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,c),n.l=!0,n.exports}c.m=e,c.c=r,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)c.d(n,r,function(t){return e[t]}.bind(null,r));return n},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],a=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var s=a;return i.push([~~702~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~702~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return f}));var r=n(0),o=n.n(r),i=n(4),c=n(2),u=n(1),a=[{id:"no-print",label:"No Print",element:o.a.createElement("div",{className:"slds-no-print"},"I am hidden when printing"),description:"Use the `slds-no-print` class to hide an element when printing the page."}],l=i.c.h2,s=i.c.h3,p=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"Print utilities give you the ability to hide a component when printing a page."),l({id:"Examples"},"Examples"),s({id:"No-Print"},"No Print"),Object(r.createElement)(c.a,null,Object(u.f)(a,"no-print")))},f=function(){return Object(i.a)(p())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/print/docs.mdx.js"]=function(e){function t(t){for(var r,c,u=t[0],a=t[1],l=t[2],p=0,f=[];p<u.length;p++)c=u[p],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&f.push(o[c][0]),o[c]=0;for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);for(s&&s(t);f.length;)f.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 a=n[u];0!==o[a]&&(r=!1)}r&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var r={},o={102:0},i=[];function c(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,c),n.l=!0,n.exports}c.m=e,c.c=r,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)c.d(n,r,function(t){return e[t]}.bind(null,r));return n},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],a=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var s=a;return i.push([703,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},703:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return p})),n.d(t,"getContents",(function(){return f}));var r=n(0),o=n.n(r),i=n(4),c=n(2),u=n(1),a=[{id:"no-print",label:"No Print",element:o.a.createElement("div",{className:"slds-no-print"},"I am hidden when printing"),description:"Use the `slds-no-print` class to hide an element when printing the page."}],l=i.c.h2,s=i.c.h3,p=function(){return Object(r.createElement)(i.b,{},Object(r.createElement)("div",{className:"doc lead"},"Print utilities give you the ability to hide a component when printing a page."),l({id:"Examples"},"Examples"),s({id:"No-Print"},"No Print"),Object(r.createElement)(c.a,null,Object(u.f)(a,"no-print")))},f=function(){return Object(i.a)(p())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/scrollable/docs.mdx.js"]=function(e){function t(t){for(var n,o,r=t[0],c=t[1],s=t[2],m=0,d=[];m<r.length;m++)o=r[m],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(u&&u(t);d.length;)d.shift()();return a.push.apply(a,s\|\|[]),i()}function i(){for(var e,t=0;t<a.length;t++){for(var i=a[t],n=!0,r=1;r<i.length;r++){var c=i[r];0!==l[c]&&(n=!1)}n&&(a.splice(t--,1),e=o(o.s=i[0]))}return e}var n={},l={103:0},a=[];function o(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=n,o.d=function(e,t,i){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(i,n,function(t){return e[t]}.bind(null,n));return i},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var u=c;return a.push([~~686~~,0]),i()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~686~~:function(e,t,i){"use strict";i.r(t),i.d(t,"getElement",(function(){return f})),i.d(t,"getContents",(function(){return p}));var n=i(0),l=i.n(n),a=i(4),o=i(2),r=i(1),c=[{id:"auto",label:"Auto",element:l.a.createElement("div",{className:"slds-scrollable",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform",style:{width:"150%"}},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"none",label:"None",element:l.a.createElement("div",{className:"slds-scrollable_none",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform"},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"x-axis",label:"X-axis",element:l.a.createElement("div",{className:"slds-scrollable_x",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform",style:{width:"150%"}},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"y-axis",label:"Y-axis",element:l.a.createElement("div",{className:"slds-scrollable_y",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform"},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))}],s=a.c.code,u=a.c.h2,m=a.c.h3,d=a.c.p,f=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Make a containing box scrollable when scrolling is available."),u({id:"About-Scrollable"},"About Scrollable"),d({},"Use the scrollable utility when you need to provide scrolling within a section of a page. For example, when the content within an element exceeds either the width or height of the element, applying ",s({},".slds-scrollable_y")," provides a vertical scrollbar, while ",s({},".slds-scrollable_x")," adds a horizontal scrollbar."),u({id:"Examples"},"Examples"),m({id:"Auto"},"Auto"),Object(n.createElement)(o.a,null,Object(r.f)(c,"auto")),m({id:"None"},"None"),Object(n.createElement)(o.a,null,Object(r.f)(c,"none")),m({id:"X-Axis"},"X-Axis"),Object(n.createElement)(o.a,null,Object(r.f)(c,"x-axis")),m({id:"Y-Axis"},"Y-Axis"),Object(n.createElement)(o.a,null,Object(r.f)(c,"y-axis")))},p=function(){return Object(a.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/scrollable/docs.mdx.js"]=function(e){function t(t){for(var n,o,r=t[0],c=t[1],s=t[2],m=0,d=[];m<r.length;m++)o=r[m],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(u&&u(t);d.length;)d.shift()();return a.push.apply(a,s\|\|[]),i()}function i(){for(var e,t=0;t<a.length;t++){for(var i=a[t],n=!0,r=1;r<i.length;r++){var c=i[r];0!==l[c]&&(n=!1)}n&&(a.splice(t--,1),e=o(o.s=i[0]))}return e}var n={},l={103:0},a=[];function o(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=n,o.d=function(e,t,i){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(i,n,function(t){return e[t]}.bind(null,n));return i},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var u=c;return a.push([687,0]),i()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},687:function(e,t,i){"use strict";i.r(t),i.d(t,"getElement",(function(){return f})),i.d(t,"getContents",(function(){return p}));var n=i(0),l=i.n(n),a=i(4),o=i(2),r=i(1),c=[{id:"auto",label:"Auto",element:l.a.createElement("div",{className:"slds-scrollable",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform",style:{width:"150%"}},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"none",label:"None",element:l.a.createElement("div",{className:"slds-scrollable_none",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform"},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"x-axis",label:"X-axis",element:l.a.createElement("div",{className:"slds-scrollable_x",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform",style:{width:"150%"}},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))},{id:"y-axis",label:"Y-axis",element:l.a.createElement("div",{className:"slds-scrollable_y",style:{height:"5rem",width:"24rem"}},l.a.createElement("p",null,"Scrollable Content Here"),l.a.createElement("div",{className:"slds-text-longform"},l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis."),l.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.")))}],s=a.c.code,u=a.c.h2,m=a.c.h3,d=a.c.p,f=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Make a containing box scrollable when scrolling is available."),u({id:"About-Scrollable"},"About Scrollable"),d({},"Use the scrollable utility when you need to provide scrolling within a section of a page. For example, when the content within an element exceeds either the width or height of the element, applying ",s({},".slds-scrollable_y")," provides a vertical scrollbar, while ",s({},".slds-scrollable_x")," adds a horizontal scrollbar."),u({id:"Examples"},"Examples"),m({id:"Auto"},"Auto"),Object(n.createElement)(o.a,null,Object(r.f)(c,"auto")),m({id:"None"},"None"),Object(n.createElement)(o.a,null,Object(r.f)(c,"none")),m({id:"X-Axis"},"X-Axis"),Object(n.createElement)(o.a,null,Object(r.f)(c,"x-axis")),m({id:"Y-Axis"},"Y-Axis"),Object(n.createElement)(o.a,null,Object(r.f)(c,"y-axis")))},p=function(){return Object(a.a)(f())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/sizing/docs.mdx.js"]=function(e){function t(t){for(var n,i,s=t[0],r=t[1],c=t[2],f=0,d=[];f<s.length;f++)i=s[f],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&d.push(l[i][0]),l[i]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(m&&m(t);d.length;)d.shift()();return o.push.apply(o,c\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,s=1;s<a.length;s++){var r=a[s];0!==l[r]&&(n=!1)}n&&(o.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={104:0},o=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},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\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var m=r;return o.push([728,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},728:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return S}));var n=a(0),l=a.n(n),o=a(4),i=a(2),s=a(1),r=function(e){return l.a.createElement("div",{className:"slds-size_".concat(e.size)},l.a.createElement("div",{className:"slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"},".slds-size_",e.size))},c=[{id:"two-column",label:"2 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-2"}),l.a.createElement(r,{size:"1-of-2"}),l.a.createElement(r,{size:"2-of-2"}))},{id:"three-column",label:"3 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"2-of-3"}),l.a.createElement(r,{size:"3-of-3"}))},{id:"four-column",label:"4 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"3-of-4"}),l.a.createElement(r,{size:"2-of-4"}),l.a.createElement(r,{size:"2-of-4"}),l.a.createElement(r,{size:"4-of-4"}))},{id:"five-column",label:"5 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"4-of-5"}),l.a.createElement(r,{size:"2-of-5"}),l.a.createElement(r,{size:"3-of-5"}),l.a.createElement(r,{size:"5-of-5"}))},{id:"six-column",label:"6 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"2-of-6"}),l.a.createElement(r,{size:"4-of-6"}),l.a.createElement(r,{size:"3-of-6"}),l.a.createElement(r,{size:"3-of-6"}),l.a.createElement(r,{size:"6-of-6"}))},{id:"seven-column",label:"7 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"2-of-7"}),l.a.createElement(r,{size:"5-of-7"}),l.a.createElement(r,{size:"3-of-7"}),l.a.createElement(r,{size:"4-of-7"}),l.a.createElement(r,{size:"7-of-7"}))},{id:"eight-column",label:"8 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"2-of-8"}),l.a.createElement(r,{size:"6-of-8"}),l.a.createElement(r,{size:"3-of-8"}),l.a.createElement(r,{size:"5-of-8"}),l.a.createElement(r,{size:"4-of-8"}),l.a.createElement(r,{size:"4-of-8"}),l.a.createElement(r,{size:"8-of-8"}))},{id:"twelve-column",label:"12 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"2-of-12"}),l.a.createElement(r,{size:"10-of-12"}),l.a.createElement(r,{size:"3-of-12"}),l.a.createElement(r,{size:"9-of-12"}),l.a.createElement(r,{size:"4-of-12"}),l.a.createElement(r,{size:"8-of-12"}),l.a.createElement(r,{size:"5-of-12"}),l.a.createElement(r,{size:"7-of-12"}),l.a.createElement(r,{size:"6-of-12"}),l.a.createElement(r,{size:"6-of-12"}),l.a.createElement(r,{size:"12-of-12"}))}],m=o.c.a,f=o.c.code,d=o.c.h2,u=o.c.h3,p=o.c.p,z=o.c.table,E=o.c.tbody,h=o.c.td,g=o.c.th,b=o.c.thead,v=o.c.tr,y=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Sizing utilities allow for easy width sizing on an element."),d({id:"About-Sizing"},"About Sizing"),p({},"Our sizing class names are set up in a human-readable format, e.g. ",f({},".slds-size_1-of-2"),". This equates to a width of 50%."),p({},"By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class ",f({},".slds-size_1-of-3")," on each element. This will make each card take up 33.333% of containing section."),p({},"Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. ",f({},".slds-medium-size_1-of-3")," you will output a width at the specified breakpoint name."),p({},"Absolute sizing helpers are also available (where widths are declared in ",f({},"rem")," units): ",f({},"xx-small"),", ",f({},"x-small"),", ",f({},"medium"),", ",f({},"large"),", ",f({},"x-large")," and ",f({},"xx-large")," as defined in the ",m({href:"/design-tokens/#category-sizing"},"sizing category of the Design Tokens"),". e.g. ",f({},".slds-size_large"),"."),p({},"In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with ",f({},"max-")," to achieve this result."),p({},"Here is an overview of our available breakpoint names:"),z({},b({},v({},g({},"Breakpoint Name"),g({},"Breakpoint Width"))),E({},v({},h({},f({},"small-")),h({},"30em / 480px and higher")),v({},h({},f({},"medium-")),h({},"48em / 768px and higher")),v({},h({},f({},"large-")),h({},"64em / 1024px and higher")),v({},h({},f({},"max-small-")),h({},"up to 29.9375em / 479px")),v({},h({},f({},"max-medium-")),h({},"up to 47.9375em / 767px")),v({},h({},f({},"max-large-")),h({},"up to 63.9375em / 1023px")))),p({},"Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:"),p({},f({},'<div class="[default] [small size override] [medium size override] [large size override]">')),d({id:"Examples"},"Examples"),u({id:"2-Column-Span"},"2 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"two-column")),u({id:"3-Column-Span"},"3 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"three-column")),u({id:"4-Column-Span"},"4 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"four-column")),u({id:"5-Column-Span"},"5 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"five-column")),u({id:"6-Column-Span"},"6 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"six-column")),u({id:"7-Column-Span"},"7 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"seven-column")),u({id:"8-Column-Span"},"8 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"eight-column")),u({id:"12-Column-Span"},"12 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"twelve-column")))},S=function(){return Object(o.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/sizing/docs.mdx.js"]=function(e){function t(t){for(var n,i,s=t[0],r=t[1],c=t[2],f=0,d=[];f<s.length;f++)i=s[f],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&d.push(l[i][0]),l[i]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(m&&m(t);d.length;)d.shift()();return o.push.apply(o,c\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,s=1;s<a.length;s++){var r=a[s];0!==l[r]&&(n=!1)}n&&(o.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={104:0},o=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},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\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var m=r;return o.push([729,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},729:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return S}));var n=a(0),l=a.n(n),o=a(4),i=a(2),s=a(1),r=function(e){return l.a.createElement("div",{className:"slds-size_".concat(e.size)},l.a.createElement("div",{className:"slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"},".slds-size_",e.size))},c=[{id:"two-column",label:"2 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-2"}),l.a.createElement(r,{size:"1-of-2"}),l.a.createElement(r,{size:"2-of-2"}))},{id:"three-column",label:"3 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"1-of-3"}),l.a.createElement(r,{size:"2-of-3"}),l.a.createElement(r,{size:"3-of-3"}))},{id:"four-column",label:"4 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"1-of-4"}),l.a.createElement(r,{size:"3-of-4"}),l.a.createElement(r,{size:"2-of-4"}),l.a.createElement(r,{size:"2-of-4"}),l.a.createElement(r,{size:"4-of-4"}))},{id:"five-column",label:"5 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"1-of-5"}),l.a.createElement(r,{size:"4-of-5"}),l.a.createElement(r,{size:"2-of-5"}),l.a.createElement(r,{size:"3-of-5"}),l.a.createElement(r,{size:"5-of-5"}))},{id:"six-column",label:"6 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"1-of-6"}),l.a.createElement(r,{size:"2-of-6"}),l.a.createElement(r,{size:"4-of-6"}),l.a.createElement(r,{size:"3-of-6"}),l.a.createElement(r,{size:"3-of-6"}),l.a.createElement(r,{size:"6-of-6"}))},{id:"seven-column",label:"7 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"1-of-7"}),l.a.createElement(r,{size:"2-of-7"}),l.a.createElement(r,{size:"5-of-7"}),l.a.createElement(r,{size:"3-of-7"}),l.a.createElement(r,{size:"4-of-7"}),l.a.createElement(r,{size:"7-of-7"}))},{id:"eight-column",label:"8 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"1-of-8"}),l.a.createElement(r,{size:"2-of-8"}),l.a.createElement(r,{size:"6-of-8"}),l.a.createElement(r,{size:"3-of-8"}),l.a.createElement(r,{size:"5-of-8"}),l.a.createElement(r,{size:"4-of-8"}),l.a.createElement(r,{size:"4-of-8"}),l.a.createElement(r,{size:"8-of-8"}))},{id:"twelve-column",label:"12 Column Span",element:l.a.createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"1-of-12"}),l.a.createElement(r,{size:"2-of-12"}),l.a.createElement(r,{size:"10-of-12"}),l.a.createElement(r,{size:"3-of-12"}),l.a.createElement(r,{size:"9-of-12"}),l.a.createElement(r,{size:"4-of-12"}),l.a.createElement(r,{size:"8-of-12"}),l.a.createElement(r,{size:"5-of-12"}),l.a.createElement(r,{size:"7-of-12"}),l.a.createElement(r,{size:"6-of-12"}),l.a.createElement(r,{size:"6-of-12"}),l.a.createElement(r,{size:"12-of-12"}))}],m=o.c.a,f=o.c.code,d=o.c.h2,u=o.c.h3,p=o.c.p,z=o.c.table,E=o.c.tbody,h=o.c.td,g=o.c.th,b=o.c.thead,v=o.c.tr,y=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Sizing utilities allow for easy width sizing on an element."),d({id:"About-Sizing"},"About Sizing"),p({},"Our sizing class names are set up in a human-readable format, e.g. ",f({},".slds-size_1-of-2"),". This equates to a width of 50%."),p({},"By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class ",f({},".slds-size_1-of-3")," on each element. This will make each card take up 33.333% of containing section."),p({},"Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. ",f({},".slds-medium-size_1-of-3")," you will output a width at the specified breakpoint name."),p({},"Absolute sizing helpers are also available (where widths are declared in ",f({},"rem")," units): ",f({},"xx-small"),", ",f({},"x-small"),", ",f({},"medium"),", ",f({},"large"),", ",f({},"x-large")," and ",f({},"xx-large")," as defined in the ",m({href:"/design-tokens/#category-sizing"},"sizing category of the Design Tokens"),". e.g. ",f({},".slds-size_large"),"."),p({},"In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with ",f({},"max-")," to achieve this result."),p({},"Here is an overview of our available breakpoint names:"),z({},b({},v({},g({},"Breakpoint Name"),g({},"Breakpoint Width"))),E({},v({},h({},f({},"small-")),h({},"30em / 480px and higher")),v({},h({},f({},"medium-")),h({},"48em / 768px and higher")),v({},h({},f({},"large-")),h({},"64em / 1024px and higher")),v({},h({},f({},"max-small-")),h({},"up to 29.9375em / 479px")),v({},h({},f({},"max-medium-")),h({},"up to 47.9375em / 767px")),v({},h({},f({},"max-large-")),h({},"up to 63.9375em / 1023px")))),p({},"Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:"),p({},f({},'<div class="[default] [small size override] [medium size override] [large size override]">')),d({id:"Examples"},"Examples"),u({id:"2-Column-Span"},"2 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"two-column")),u({id:"3-Column-Span"},"3 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"three-column")),u({id:"4-Column-Span"},"4 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"four-column")),u({id:"5-Column-Span"},"5 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"five-column")),u({id:"6-Column-Span"},"6 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"six-column")),u({id:"7-Column-Span"},"7 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"seven-column")),u({id:"8-Column-Span"},"8 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"eight-column")),u({id:"12-Column-Span"},"12 Column Span"),Object(n.createElement)(i.a,null,Object(s.f)(c,"twelve-column")))},S=function(){return Object(o.a)(y())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/text/docs.mdx.js"]=function(e){function t(t){for(var a,o,i=t[0],c=t[1],s=t[2],d=0,u=[];d<i.length;d++)o=i[d],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(m&&m(t);u.length;)u.shift()();return r.push.apply(r,s\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=l[0]))}return e}var a={},n={105: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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var m=c;return r.push([703,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},703:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return f})),l.d(t,"getContents",(function(){return g}));var a=l(0),n=l.n(a),r=l(4),o=l(2),i=l(1),c=l(35),s=function(e){return n.a.createElement("div",{className:e.className},"The quick brown fox jumps over the lazy dog.")},m=[{id:"body-default",label:"Body size - default",element:n.a.createElement(s,{className:"slds-text-body_regular"}),description:"This default helper sets regular body copy. You usually don’t need this class since most components will inherit this globally from the `body` element. However, it exists if you still need to specifically set it."},{id:"body-small",label:"Body size - Small",element:n.a.createElement(s,{className:"slds-text-body_small"}),description:"This body-small text helper sets smaller, subtler body copy. It is typically used as supportive text."},{id:"heading-large",label:"Heading size - Large",element:n.a.createElement(s,{className:"slds-text-heading_large"})},{id:"heading-medium",label:"Heading size - Medium",element:n.a.createElement(s,{className:"slds-text-heading_medium"})},{id:"heading-small",label:"Heading size - Small",element:n.a.createElement(s,{className:"slds-text-heading_small"})},{id:"heading-title",label:"Title",element:n.a.createElement(s,{className:"slds-text-title"})},{id:"heading-title--caps",label:"Title uppercase",element:n.a.createElement(s,{className:"slds-text-title_caps"})},{id:"longform",label:"Longform",element:n.a.createElement("div",{className:"slds-text-longform"},n.a.createElement("p",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("p",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("h3",{className:"slds-text-heading_small"},"Heading"),n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.")))))),n.a.createElement("h3",{className:"slds-text-heading_small"},"Heading"),n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.")))))))},{id:"align-left",label:"Align left",element:n.a.createElement(s,{className:"slds-text-align_left"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"align-right",label:"Align right",element:n.a.createElement(s,{className:"slds-text-align_right"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"align-center",label:"Align center",element:n.a.createElement(s,{className:"slds-text-align_center"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"text-color-default",label:"Color - Default",element:n.a.createElement(s,{className:"slds-text-color_default"})},{id:"text-color-success",label:"Color - Success",element:n.a.createElement(s,{className:"slds-text-color_success"})},{id:"text-color-weak",label:"Color - Weak",element:n.a.createElement(s,{className:"slds-text-color_weak"})},{id:"text-color-error",label:"Color - Error",element:n.a.createElement(s,{className:"slds-text-color_error"})},{id:"text-color-destructive",label:"Color - Destructive Actions",element:n.a.createElement(s,{className:"slds-text-color_destructive"})},{id:"text-color-inverse",label:"Color - Inverse",element:n.a.createElement("div",{className:"demo-only",style:{padding:"0.5rem",background:"#16325c"}},n.a.createElement(s,{className:"slds-text-color_inverse"}))},{id:"text-color-inverse-weak",label:"Color - Inverse - Weak",element:n.a.createElement("div",{className:"demo-only",style:{padding:"0.5rem",background:"#16325c"}},n.a.createElement(s,{className:"slds-text-color_inverse-weak"}))},{id:"text-font-monospace",label:"Font - Monospace",element:n.a.createElement(s,{className:"slds-text-font_monospace"})}],d=r.c.code,u=r.c.h2,b=r.c.h3,h=r.c.p,f=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"For consistent typography throughout the application, we created text helper classes for headings and body text."),u({id:"About-Text"},"About Text"),h({},"In our framework, all headings (",d({},"h1"),"–",d({},"h6"),") are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility."),u({id:"Base"},"Base"),Object(a.createElement)(o.a,null,Object(i.f)(m,"body-default")),b({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"text helpers will have an increased text size"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for text"},Object(i.f)(m,"body-default")),u({id:"Examples"},"Examples"),b({id:"Body-Size-Small"},"Body Size - Small"),Object(a.createElement)(o.a,null,Object(i.f)(m,"body-small")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the small body text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for small body text"},Object(i.f)(m,"body-small")),b({id:"Heading-Size-Large"},"Heading Size - Large"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-large")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the large heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for large heading text"},Object(i.f)(m,"heading-large")),b({id:"Heading-Size-Medium"},"Heading Size - Medium"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-medium")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the medium heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for medium heading text"},Object(i.f)(m,"heading-medium")),b({id:"Heading-Size-Small"},"Heading Size - Small"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-small")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the small heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for small heading text"},Object(i.f)(m,"heading-small")),b({id:"Title"},"Title"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-title")),b({id:"Title-Uppercase"},"Title Uppercase"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-title--caps")),b({id:"Longform"},"Longform"),Object(a.createElement)(o.a,null,Object(i.f)(m,"longform")),b({id:"Align-Left"},"Align Left"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-left")),b({id:"Align-Right"},"Align Right"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-right")),b({id:"Align-Center"},"Align Center"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-center")),b({id:"Color-Default"},"Color - Default"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-default")),b({id:"Color-Success"},"Color - Success"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-success")),b({id:"Color-Weak"},"Color - Weak"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-weak")),b({id:"Color-Error"},"Color - Error"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-error")),b({id:"Color-Destructive-Actions"},"Color - Destructive Actions"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-destructive")),b({id:"Color-Inverse"},"Color - Inverse"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-inverse")),b({id:"Color-Inverse-Weak"},"Color - Inverse - Weak"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-inverse-weak")),b({id:"Font-Monospace"},"Font - Monospace"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-font-monospace")))},g=function(){return Object(r.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/text/docs.mdx.js"]=function(e){function t(t){for(var a,o,i=t[0],c=t[1],s=t[2],d=0,u=[];d<i.length;d++)o=i[d],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(m&&m(t);u.length;)u.shift()();return r.push.apply(r,s\|\|[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==n[c]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=l[0]))}return e}var a={},n={105: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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var m=c;return r.push([704,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},704:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return f})),l.d(t,"getContents",(function(){return g}));var a=l(0),n=l.n(a),r=l(4),o=l(2),i=l(1),c=l(36),s=function(e){return n.a.createElement("div",{className:e.className},"The quick brown fox jumps over the lazy dog.")},m=[{id:"body-default",label:"Body size - default",element:n.a.createElement(s,{className:"slds-text-body_regular"}),description:"This default helper sets regular body copy. You usually don’t need this class since most components will inherit this globally from the `body` element. However, it exists if you still need to specifically set it."},{id:"body-small",label:"Body size - Small",element:n.a.createElement(s,{className:"slds-text-body_small"}),description:"This body-small text helper sets smaller, subtler body copy. It is typically used as supportive text."},{id:"heading-large",label:"Heading size - Large",element:n.a.createElement(s,{className:"slds-text-heading_large"})},{id:"heading-medium",label:"Heading size - Medium",element:n.a.createElement(s,{className:"slds-text-heading_medium"})},{id:"heading-small",label:"Heading size - Small",element:n.a.createElement(s,{className:"slds-text-heading_small"})},{id:"heading-title",label:"Title",element:n.a.createElement(s,{className:"slds-text-title"})},{id:"heading-title--caps",label:"Title uppercase",element:n.a.createElement(s,{className:"slds-text-title_caps"})},{id:"longform",label:"Longform",element:n.a.createElement("div",{className:"slds-text-longform"},n.a.createElement("p",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("p",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("h3",{className:"slds-text-heading_small"},"Heading"),n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ul",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.")))))),n.a.createElement("h3",{className:"slds-text-heading_small"},"Heading"),n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.",n.a.createElement("ol",null,n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog."),n.a.createElement("li",null,"The quick brown fox jumps over the lazy dog.")))))))},{id:"align-left",label:"Align left",element:n.a.createElement(s,{className:"slds-text-align_left"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"align-right",label:"Align right",element:n.a.createElement(s,{className:"slds-text-align_right"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"align-center",label:"Align center",element:n.a.createElement(s,{className:"slds-text-align_center"}),description:"These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally."},{id:"text-color-default",label:"Color - Default",element:n.a.createElement(s,{className:"slds-text-color_default"})},{id:"text-color-success",label:"Color - Success",element:n.a.createElement(s,{className:"slds-text-color_success"})},{id:"text-color-weak",label:"Color - Weak",element:n.a.createElement(s,{className:"slds-text-color_weak"})},{id:"text-color-error",label:"Color - Error",element:n.a.createElement(s,{className:"slds-text-color_error"})},{id:"text-color-destructive",label:"Color - Destructive Actions",element:n.a.createElement(s,{className:"slds-text-color_destructive"})},{id:"text-color-inverse",label:"Color - Inverse",element:n.a.createElement("div",{className:"demo-only",style:{padding:"0.5rem",background:"#16325c"}},n.a.createElement(s,{className:"slds-text-color_inverse"}))},{id:"text-color-inverse-weak",label:"Color - Inverse - Weak",element:n.a.createElement("div",{className:"demo-only",style:{padding:"0.5rem",background:"#16325c"}},n.a.createElement(s,{className:"slds-text-color_inverse-weak"}))},{id:"text-font-monospace",label:"Font - Monospace",element:n.a.createElement(s,{className:"slds-text-font_monospace"})}],d=r.c.code,u=r.c.h2,b=r.c.h3,h=r.c.p,f=function(){return Object(a.createElement)(r.b,{},Object(a.createElement)("div",{className:"doc lead"},"For consistent typography throughout the application, we created text helper classes for headings and body text."),u({id:"About-Text"},"About Text"),h({},"In our framework, all headings (",d({},"h1"),"–",d({},"h6"),") are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility."),u({id:"Base"},"Base"),Object(a.createElement)(o.a,null,Object(i.f)(m,"body-default")),b({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"text helpers will have an increased text size"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for text"},Object(i.f)(m,"body-default")),u({id:"Examples"},"Examples"),b({id:"Body-Size-Small"},"Body Size - Small"),Object(a.createElement)(o.a,null,Object(i.f)(m,"body-small")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the small body text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for small body text"},Object(i.f)(m,"body-small")),b({id:"Heading-Size-Large"},"Heading Size - Large"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-large")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the large heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for large heading text"},Object(i.f)(m,"heading-large")),b({id:"Heading-Size-Medium"},"Heading Size - Medium"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-medium")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the medium heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for medium heading text"},Object(i.f)(m,"heading-medium")),b({id:"Heading-Size-Small"},"Heading Size - Small"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-small")),Object(a.createElement)(c.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"elements with the small heading text-size helper class"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for small heading text"},Object(i.f)(m,"heading-small")),b({id:"Title"},"Title"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-title")),b({id:"Title-Uppercase"},"Title Uppercase"),Object(a.createElement)(o.a,null,Object(i.f)(m,"heading-title--caps")),b({id:"Longform"},"Longform"),Object(a.createElement)(o.a,null,Object(i.f)(m,"longform")),b({id:"Align-Left"},"Align Left"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-left")),b({id:"Align-Right"},"Align Right"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-right")),b({id:"Align-Center"},"Align Center"),Object(a.createElement)(o.a,null,Object(i.f)(m,"align-center")),b({id:"Color-Default"},"Color - Default"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-default")),b({id:"Color-Success"},"Color - Success"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-success")),b({id:"Color-Weak"},"Color - Weak"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-weak")),b({id:"Color-Error"},"Color - Error"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-error")),b({id:"Color-Destructive-Actions"},"Color - Destructive Actions"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-destructive")),b({id:"Color-Inverse"},"Color - Inverse"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-inverse")),b({id:"Color-Inverse-Weak"},"Color - Inverse - Weak"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-color-inverse-weak")),b({id:"Font-Monospace"},"Font - Monospace"),Object(a.createElement)(o.a,null,Object(i.f)(m,"text-font-monospace")))},g=function(){return Object(r.a)(f())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/themes/docs.mdx.js"]=function(e){function t(t){for(var r,o,u=t[0],c=t[1],s=t[2],d=0,f=[];d<u.length;d++)o=u[d],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&f.push(a[o][0]),a[o]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(i&&i(t);f.length;)f.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==a[c]&&(r=!1)}r&&(l.splice(t--,1),e=o(o.s=n[0]))}return e}var r={},a={106:0},l=[];function o(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,o),n.l=!0,n.exports}o.m=e,o.c=r,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 r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));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 u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var s=0;s<u.length;s++)t(u[s]);var i=c;return l.push([~~695~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~695~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return h}));var r=n(0),a=n.n(r),l=n(4),o=n(2),u=n(1),c=[{id:"default",label:"Default",element:a.a.createElement("div",{className:"slds-box slds-theme_default"},a.a.createElement("p",null,"This is a ",a.a.createElement("strong",null,"default")," theme and here is a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))},{id:"shade",label:"Shade",element:a.a.createElement("div",{className:"slds-box slds-theme_shade"},a.a.createElement("p",null,"This is a ",a.a.createElement("strong",null,"default")," theme and here is a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))},{id:"texture",label:"Shade with texture",element:a.a.createElement("div",{className:"slds-box slds-theme_shade slds-theme_alert-texture"},a.a.createElement("p",null,"This theme has the ",a.a.createElement("strong",null,"alert texture")," added to the default theme and has a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))}],s=l.c.h2,i=l.c.h3,d=l.c.p,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Themes apply a set of color styles to an area."),s({id:"About-Themes"},"About Themes"),d({},"Use a color theme to apply color to the background and text. Some color themes apply a background image or texture."),s({id:"Base"},"Base"),Object(r.createElement)(o.a,null,Object(u.f)(c,"default")),s({id:"Examples"},"Examples"),i({id:"Shade"},"Shade"),Object(r.createElement)(o.a,null,Object(u.f)(c,"shade")),i({id:"Texture"},"Texture"),Object(r.createElement)(o.a,null,Object(u.f)(c,"texture")))},h=function(){return Object(l.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/themes/docs.mdx.js"]=function(e){function t(t){for(var r,o,u=t[0],c=t[1],s=t[2],d=0,f=[];d<u.length;d++)o=u[d],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&f.push(a[o][0]),a[o]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(i&&i(t);f.length;)f.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==a[c]&&(r=!1)}r&&(l.splice(t--,1),e=o(o.s=n[0]))}return e}var r={},a={106:0},l=[];function o(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,o),n.l=!0,n.exports}o.m=e,o.c=r,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 r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));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 u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var s=0;s<u.length;s++)t(u[s]);var i=c;return l.push([696,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},696:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return h}));var r=n(0),a=n.n(r),l=n(4),o=n(2),u=n(1),c=[{id:"default",label:"Default",element:a.a.createElement("div",{className:"slds-box slds-theme_default"},a.a.createElement("p",null,"This is a ",a.a.createElement("strong",null,"default")," theme and here is a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))},{id:"shade",label:"Shade",element:a.a.createElement("div",{className:"slds-box slds-theme_shade"},a.a.createElement("p",null,"This is a ",a.a.createElement("strong",null,"default")," theme and here is a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))},{id:"texture",label:"Shade with texture",element:a.a.createElement("div",{className:"slds-box slds-theme_shade slds-theme_alert-texture"},a.a.createElement("p",null,"This theme has the ",a.a.createElement("strong",null,"alert texture")," added to the default theme and has a"," ",a.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"link"),"."))}],s=l.c.h2,i=l.c.h3,d=l.c.p,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Themes apply a set of color styles to an area."),s({id:"About-Themes"},"About Themes"),d({},"Use a color theme to apply color to the background and text. Some color themes apply a background image or texture."),s({id:"Base"},"Base"),Object(r.createElement)(o.a,null,Object(u.f)(c,"default")),s({id:"Examples"},"Examples"),i({id:"Shade"},"Shade"),Object(r.createElement)(o.a,null,Object(u.f)(c,"shade")),i({id:"Texture"},"Texture"),Object(r.createElement)(o.a,null,Object(u.f)(c,"texture")))},h=function(){return Object(l.a)(f())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/truncation/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],c=t[1],s=t[2],d=0,h=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&h.push(i[r][0]),i[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(u&&u(t);h.length;)h.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],a=!0,o=1;o<n.length;o++){var c=n[o];0!==i[c]&&(a=!1)}a&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var a={},i={107:0},l=[];function r(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,r),n.l=!0,n.exports}r.m=e,r.c=a,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var s=0;s<o.length;s++)t(o[s]);var u=c;return l.push([~~690~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~690~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return x})),n.d(t,"getContents",(function(){return w}));var a=n(0),i=n.n(a),l=n(4),r=n(2),o=n(14),c=n(1),s=n(5),u=n.n(s),d=function(e){return i.a.createElement("li",{className:u()("slds-list__item slds-m-right_large slds-grid",e.className)},i.a.createElement("span",null,"To:"),i.a.createElement("span",{className:"slds-m-left_xx-small slds-truncate",title:e.title},e.children),i.a.createElement("span",{className:"slds-m-left_xx-small slds-no-flex"}," + 44 more"))},h=function(e){return i.a.createElement("ul",null,i.a.createElement(d,{title:"Lei Chan",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan")),i.a.createElement(d,{title:"Lei Chan with Long Name",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name")),i.a.createElement(d,{title:"Lei Chan with Long Name that might go on for quite some distance futher than you might expect",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name that might go on for quite some distance futher than you might expect")))},m=[{id:"fluid",label:"Single line",element:i.a.createElement("div",{className:"slds-size_1-of-2"},i.a.createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."))},{id:"nested-grids",label:"Single line within nested grid containers",element:i.a.createElement("div",{className:"slds-grid",style:{width:"200px"}},i.a.createElement("div",{className:"slds-grid slds-has-flexi-truncate"},i.a.createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.")))},{id:"25%",label:"Max-width 25%",element:i.a.createElement(h,{width:"25"})},{id:"33%",label:"Max-width 33%",element:i.a.createElement(h,{width:"33"})},{id:"50%",label:"Max-width 50%",element:i.a.createElement(h,{width:"50"})},{id:"66%",label:"Max-width 66%",element:i.a.createElement(h,{width:"66"})},{id:"75%",label:"Max-width 75%",element:i.a.createElement(h,{width:"75"})}],f=l.c.code,g=l.c.h2,p=l.c.h3,b=l.c.p,x=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"When applying truncation, place the full text in a title attribute so that it’s accessible on hover."),Object(a.createElement)(o.a,{type:"note",heading:"note"},Object(a.createElement)("p",null,"There is an iOS bug that is triggered when you add a component from Visualforce into S1 using an iFrame. The truncated element does not recognize its width.")),g({id:"About-Truncation"},"About Truncation"),b({},"If problems occur when using truncation with elements that use flexbox, you might need to add the ",f({},".slds-has-flexi-truncate")," class on the flexbox child node ( ",f({},".slds-col")," or ",f({},".slds-col_padded")," elements) that contains the truncated text."),g({id:"Examples"},"Examples"),p({id:"Single-Line"},"Single Line"),Object(a.createElement)(r.a,null,Object(c.f)(m,"fluid")),p({id:"Single-Line-with-Nested-Grid-Containers"},"Single Line with Nested Grid Containers"),Object(a.createElement)(r.a,null,Object(c.f)(m,"nested-grids")),p({id:"Maximum-Width-of-25percent"},"Maximum Width of 25%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"25%")),p({id:"Maximum-Width-of-33percent"},"Maximum Width of 33%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"33%")),p({id:"Maximum-Width-of-75percent"},"Maximum Width of 75%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"75%")))},w=function(){return Object(l.a)(x())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/truncation/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],c=t[1],s=t[2],d=0,h=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&h.push(i[r][0]),i[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(u&&u(t);h.length;)h.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],a=!0,o=1;o<n.length;o++){var c=n[o];0!==i[c]&&(a=!1)}a&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var a={},i={107:0},l=[];function r(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,r),n.l=!0,n.exports}r.m=e,r.c=a,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var s=0;s<o.length;s++)t(o[s]);var u=c;return l.push([691,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},691:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return x})),n.d(t,"getContents",(function(){return w}));var a=n(0),i=n.n(a),l=n(4),r=n(2),o=n(14),c=n(1),s=n(5),u=n.n(s),d=function(e){return i.a.createElement("li",{className:u()("slds-list__item slds-m-right_large slds-grid",e.className)},i.a.createElement("span",null,"To:"),i.a.createElement("span",{className:"slds-m-left_xx-small slds-truncate",title:e.title},e.children),i.a.createElement("span",{className:"slds-m-left_xx-small slds-no-flex"}," + 44 more"))},h=function(e){return i.a.createElement("ul",null,i.a.createElement(d,{title:"Lei Chan",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan")),i.a.createElement(d,{title:"Lei Chan with Long Name",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name")),i.a.createElement(d,{title:"Lei Chan with Long Name that might go on for quite some distance futher than you might expect",className:"slds-truncate_container_"+e.width},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name that might go on for quite some distance futher than you might expect")))},m=[{id:"fluid",label:"Single line",element:i.a.createElement("div",{className:"slds-size_1-of-2"},i.a.createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."))},{id:"nested-grids",label:"Single line within nested grid containers",element:i.a.createElement("div",{className:"slds-grid",style:{width:"200px"}},i.a.createElement("div",{className:"slds-grid slds-has-flexi-truncate"},i.a.createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.")))},{id:"25%",label:"Max-width 25%",element:i.a.createElement(h,{width:"25"})},{id:"33%",label:"Max-width 33%",element:i.a.createElement(h,{width:"33"})},{id:"50%",label:"Max-width 50%",element:i.a.createElement(h,{width:"50"})},{id:"66%",label:"Max-width 66%",element:i.a.createElement(h,{width:"66"})},{id:"75%",label:"Max-width 75%",element:i.a.createElement(h,{width:"75"})}],f=l.c.code,g=l.c.h2,p=l.c.h3,b=l.c.p,x=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"When applying truncation, place the full text in a title attribute so that it’s accessible on hover."),Object(a.createElement)(o.a,{type:"note",heading:"note"},Object(a.createElement)("p",null,"There is an iOS bug that is triggered when you add a component from Visualforce into S1 using an iFrame. The truncated element does not recognize its width.")),g({id:"About-Truncation"},"About Truncation"),b({},"If problems occur when using truncation with elements that use flexbox, you might need to add the ",f({},".slds-has-flexi-truncate")," class on the flexbox child node ( ",f({},".slds-col")," or ",f({},".slds-col_padded")," elements) that contains the truncated text."),g({id:"Examples"},"Examples"),p({id:"Single-Line"},"Single Line"),Object(a.createElement)(r.a,null,Object(c.f)(m,"fluid")),p({id:"Single-Line-with-Nested-Grid-Containers"},"Single Line with Nested Grid Containers"),Object(a.createElement)(r.a,null,Object(c.f)(m,"nested-grids")),p({id:"Maximum-Width-of-25percent"},"Maximum Width of 25%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"25%")),p({id:"Maximum-Width-of-33percent"},"Maximum Width of 33%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"33%")),p({id:"Maximum-Width-of-75percent"},"Maximum Width of 75%"),Object(a.createElement)(r.a,null,Object(c.f)(m,"75%")))},w=function(){return Object(l.a)(x())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/vertical-list/docs.mdx.js"]=function(e){function t(t){for(var a,s,c=t[0],r=t[1],m=t[2],o=0,u=[];o<c.length;o++)s=c[o],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,c=1;c<l.length;c++){var r=l[c];0!==i[r]&&(a=!1)}a&&(n.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},i={108:0},n=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var m=0;m<c.length;m++)t(c[m]);var d=r;return n.push([716,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},716:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return o})),l.d(t,"getContents",(function(){return u}));var a=l(0),i=l.n(a),n=l(4),s=l(2),c=l(1),r=[{id:"vertical-list",label:"Default",element:i.a.createElement("ul",null,i.a.createElement("li",null,"Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"unordered-list-decimal",label:"Dotted",element:i.a.createElement("ul",{className:"slds-list_dotted"},i.a.createElement("li",null,"Basic ordered list"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"ordered-list-decimal",label:"Decimal",element:i.a.createElement("ol",{className:"slds-list_ordered"},i.a.createElement("li",null,"Basic ordered list"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"vertical-list-links",label:"Links",element:i.a.createElement("ul",null,i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with 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:"vertical-list-block-links",label:"Block links",element:i.a.createElement("ul",{className:"slds-has-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with block 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:"vertical-list-block-links-space",label:"Block links with space",element:i.a.createElement("ul",{className:"slds-has-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with block links with 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:"vertical-list-inline-block-links",label:"Inline block links",element:i.a.createElement("ul",{className:"slds-has-inline-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with inline-block 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:"vertical-list-inline-block-links-space",label:"Inline block links with space",element:i.a.createElement("ul",{className:"slds-has-inline-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with inline-block links with 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:"vertical-list-nested",label:"Nested vertical lists",element:i.a.createElement("ul",null,i.a.createElement("li",null,"Vertical List with nested vertical lists"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,i.a.createElement("ul",{className:"slds-is-nested"},i.a.createElement("li",null,"Nested Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,i.a.createElement("ul",{className:"slds-is-nested"},i.a.createElement("li",null,"Nested Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))))))},{id:"vertical-dividers-top",label:"Top",element:i.a.createElement("ul",{className:"slds-has-dividers_top"},i.a.createElement("li",{className:"slds-item"},"List item with top divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-top-space",label:"Top with space",element:i.a.createElement("ul",{className:"slds-has-dividers_top-space"},i.a.createElement("li",{className:"slds-item"},"List item with top divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-top",label:"Top with link",element:i.a.createElement("ul",{className:"slds-has-dividers_top slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and top divider")),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:"vertical-dividers-link-top-space",label:"Top with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_top slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and top divider")),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:"vertical-dividers-bottom",label:"Bottom",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom"},i.a.createElement("li",{className:"slds-item"},"List item with bottom divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-bottom-space",label:"Bottom with space",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom-space"},i.a.createElement("li",{className:"slds-item"},"List item with bottom divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-bottom",label:"Bottom with link",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and bottom divider")),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:"vertical-dividers-link-bottom-space",label:"Bottom with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and bottom divider 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:"vertical-dividers-around",label:"Around",element:i.a.createElement("ul",{className:"slds-has-dividers_around"},i.a.createElement("li",{className:"slds-item"},"List item with around divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-around-space",label:"Around with space",element:i.a.createElement("ul",{className:"slds-has-dividers_around-space"},i.a.createElement("li",{className:"slds-item"},"List item with around divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-around",label:"Around with link",element:i.a.createElement("ul",{className:"slds-has-dividers_around slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and around divider")),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:"vertical-dividers-link-around-space",label:"Around with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_around slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and around divider 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")))}],m=n.c.h2,d=n.c.h3,o=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"A vertical list."),m({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list")),m({id:"Examples"},"Examples"),d({id:"Dotted"},"Dotted"),Object(a.createElement)(s.a,null,Object(c.f)(r,"unordered-list-decimal")),d({id:"Decimal"},"Decimal"),Object(a.createElement)(s.a,null,Object(c.f)(r,"ordered-list-decimal")),d({id:"Links"},"Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-links")),d({id:"Block-Links"},"Block Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-block-links")),d({id:"Block-Links-with-Space"},"Block Links with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-block-links-space")),d({id:"Inline-Block-Links"},"Inline Block Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-inline-block-links")),d({id:"Inline-Block-Links-with-Space"},"Inline Block Links with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-inline-block-links-space")),d({id:"Nested-Vertical-Lists"},"Nested Vertical Lists"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-nested")),d({id:"Top"},"Top"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-top")),d({id:"Top-with-Space"},"Top with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-top-space")),d({id:"Top-with-Link"},"Top with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-top")),d({id:"Top-with-Link-and-Space"},"Top with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-top-space")),d({id:"Bottom"},"Bottom"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-bottom")),d({id:"Bottom-with-Space"},"Bottom with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-bottom-space")),d({id:"Bottom-with-Link"},"Bottom with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-bottom")),d({id:"Bottom-with-Link-and-Space"},"Bottom with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-bottom-space")),d({id:"Around"},"Around"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-around")),d({id:"Around-with-Space"},"Around with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-around-space")),d({id:"Around-with-Link"},"Around with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-around")),d({id:"Around-with-Link-and-Space"},"Around with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-around-space")))},u=function(){return Object(n.a)(o())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/vertical-list/docs.mdx.js"]=function(e){function t(t){for(var a,s,c=t[0],r=t[1],m=t[2],o=0,u=[];o<c.length;o++)s=c[o],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,c=1;c<l.length;c++){var r=l[c];0!==i[r]&&(a=!1)}a&&(n.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},i={108:0},n=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var m=0;m<c.length;m++)t(c[m]);var d=r;return n.push([717,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},717:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return o})),l.d(t,"getContents",(function(){return u}));var a=l(0),i=l.n(a),n=l(4),s=l(2),c=l(1),r=[{id:"vertical-list",label:"Default",element:i.a.createElement("ul",null,i.a.createElement("li",null,"Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"unordered-list-decimal",label:"Dotted",element:i.a.createElement("ul",{className:"slds-list_dotted"},i.a.createElement("li",null,"Basic ordered list"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"ordered-list-decimal",label:"Decimal",element:i.a.createElement("ol",{className:"slds-list_ordered"},i.a.createElement("li",null,"Basic ordered list"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))},{id:"vertical-list-links",label:"Links",element:i.a.createElement("ul",null,i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with 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:"vertical-list-block-links",label:"Block links",element:i.a.createElement("ul",{className:"slds-has-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with block 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:"vertical-list-block-links-space",label:"Block links with space",element:i.a.createElement("ul",{className:"slds-has-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with block links with 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:"vertical-list-inline-block-links",label:"Inline block links",element:i.a.createElement("ul",{className:"slds-has-inline-block-links"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with inline-block 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:"vertical-list-inline-block-links-space",label:"Inline block links with space",element:i.a.createElement("ul",{className:"slds-has-inline-block-links_space"},i.a.createElement("li",null,i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Vertical List with inline-block links with 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:"vertical-list-nested",label:"Nested vertical lists",element:i.a.createElement("ul",null,i.a.createElement("li",null,"Vertical List with nested vertical lists"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,i.a.createElement("ul",{className:"slds-is-nested"},i.a.createElement("li",null,"Nested Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,i.a.createElement("ul",{className:"slds-is-nested"},i.a.createElement("li",null,"Nested Vertical List"),i.a.createElement("li",null,"List Item"),i.a.createElement("li",null,"List Item"))))))},{id:"vertical-dividers-top",label:"Top",element:i.a.createElement("ul",{className:"slds-has-dividers_top"},i.a.createElement("li",{className:"slds-item"},"List item with top divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-top-space",label:"Top with space",element:i.a.createElement("ul",{className:"slds-has-dividers_top-space"},i.a.createElement("li",{className:"slds-item"},"List item with top divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-top",label:"Top with link",element:i.a.createElement("ul",{className:"slds-has-dividers_top slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and top divider")),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:"vertical-dividers-link-top-space",label:"Top with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_top slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and top divider")),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:"vertical-dividers-bottom",label:"Bottom",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom"},i.a.createElement("li",{className:"slds-item"},"List item with bottom divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-bottom-space",label:"Bottom with space",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom-space"},i.a.createElement("li",{className:"slds-item"},"List item with bottom divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-bottom",label:"Bottom with link",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and bottom divider")),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:"vertical-dividers-link-bottom-space",label:"Bottom with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_bottom slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and bottom divider 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:"vertical-dividers-around",label:"Around",element:i.a.createElement("ul",{className:"slds-has-dividers_around"},i.a.createElement("li",{className:"slds-item"},"List item with around divider"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-around-space",label:"Around with space",element:i.a.createElement("ul",{className:"slds-has-dividers_around-space"},i.a.createElement("li",{className:"slds-item"},"List item with around divider with space"),i.a.createElement("li",{className:"slds-item"},"List Item"),i.a.createElement("li",{className:"slds-item"},"List Item"))},{id:"vertical-dividers-link-around",label:"Around with link",element:i.a.createElement("ul",{className:"slds-has-dividers_around slds-has-block-links"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and around divider")),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:"vertical-dividers-link-around-space",label:"Around with link and space",element:i.a.createElement("ul",{className:"slds-has-dividers_around slds-has-block-links_space"},i.a.createElement("li",{className:"slds-item"},i.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"List item with link and around divider 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")))}],m=n.c.h2,d=n.c.h3,o=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"A vertical list."),m({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list")),m({id:"Examples"},"Examples"),d({id:"Dotted"},"Dotted"),Object(a.createElement)(s.a,null,Object(c.f)(r,"unordered-list-decimal")),d({id:"Decimal"},"Decimal"),Object(a.createElement)(s.a,null,Object(c.f)(r,"ordered-list-decimal")),d({id:"Links"},"Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-links")),d({id:"Block-Links"},"Block Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-block-links")),d({id:"Block-Links-with-Space"},"Block Links with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-block-links-space")),d({id:"Inline-Block-Links"},"Inline Block Links"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-inline-block-links")),d({id:"Inline-Block-Links-with-Space"},"Inline Block Links with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-inline-block-links-space")),d({id:"Nested-Vertical-Lists"},"Nested Vertical Lists"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-list-nested")),d({id:"Top"},"Top"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-top")),d({id:"Top-with-Space"},"Top with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-top-space")),d({id:"Top-with-Link"},"Top with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-top")),d({id:"Top-with-Link-and-Space"},"Top with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-top-space")),d({id:"Bottom"},"Bottom"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-bottom")),d({id:"Bottom-with-Space"},"Bottom with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-bottom-space")),d({id:"Bottom-with-Link"},"Bottom with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-bottom")),d({id:"Bottom-with-Link-and-Space"},"Bottom with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-bottom-space")),d({id:"Around"},"Around"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-around")),d({id:"Around-with-Space"},"Around with Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-around-space")),d({id:"Around-with-Link"},"Around with Link"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-around")),d({id:"Around-with-Link-and-Space"},"Around with Link and Space"),Object(a.createElement)(s.a,null,Object(c.f)(r,"vertical-dividers-link-around-space")))},u=function(){return Object(n.a)(o())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/visibility/docs.mdx.js"]=function(e){function s(s){for(var t,d,l=s[0],o=s[1],h=s[2],c=0,m=[];c<l.length;c++)d=l[c],Object.prototype.hasOwnProperty.call(n,d)&&n[d]&&m.push(n[d][0]),n[d]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);for(r&&r(s);m.length;)m.shift()();return a.push.apply(a,h\|\|[]),i()}function i(){for(var e,s=0;s<a.length;s++){for(var i=a[s],t=!0,l=1;l<i.length;l++){var o=i[l];0!==n[o]&&(t=!1)}t&&(a.splice(s--,1),e=d(d.s=i[0]))}return e}var t={},n={109:0},a=[];function d(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,d),i.l=!0,i.exports}d.m=e,d.c=t,d.d=function(e,s,i){d.o(e,s)\|\|Object.defineProperty(e,s,{enumerable:!0,get:i})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(e,s){if(1&s&&(e=d(e)),8&s)return e;if(4&s&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(d.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&s&&"string"!=typeof e)for(var t in e)d.d(i,t,function(s){return e[s]}.bind(null,t));return i},d.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(s,"a",s),s},d.o=function(e,s){return Object.prototype.hasOwnProperty.call(e,s)},d.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=l.push.bind(l);l.push=s,l=l.slice();for(var h=0;h<l.length;h++)s(l[h]);var r=o;return a.push([710,0]),i()}({0:function(e,s){e.exports=React},19:function(e,s){e.exports=ReactDOM},20:function(e,s){e.exports=JSBeautify},710:function(e,s,i){"use strict";i.r(s),i.d(s,"getElement",(function(){return S})),i.d(s,"getContents",(function(){return f}));var t=i(0),n=i.n(t),a=i(4),d=i(2),l=i(1),o=[{id:"assistive-text",label:"Assistive Text",element:n.a.createElement("div",{className:"slds-assistive-text"},"I am hidden from sight"),description:"Use the `slds-assistive-text` class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text."},{id:"collapsed-expanded",label:"Collapsed / Expanded",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-is-collapsed"},n.a.createElement("h3",null,"I am collapsed"),n.a.createElement("p",null,"I am a child inside a collapsed element")),n.a.createElement("div",{className:"slds-is-expanded"},n.a.createElement("h3",null,"I am expanded"),n.a.createElement("p",null,"I am a child inside an expanded element"))),description:"The `.slds-is-collapsed` class hides the elements contained inside by controlling the height and overflow properties. Use the `.slds-is-expanded` class to show the elements contained inside in their normal expanded state."},{id:"hidden-visible",label:"Hidden / Visible",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-hidden"},"I am hidden"),n.a.createElement("div",{className:"slds-visible"},"I am visible")),description:"\nYou can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the `slds-hidden` class. To make it visible again, use the `slds-visible` class.\n\nNote that `.slds-hidden` and any of the `.slds-visible` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n "},{id:"hide-show",label:"Hide / Show",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-hide"},"I am hidden"),n.a.createElement("div",{className:"slds-show"},"I am shown as a block"),n.a.createElement("div",{className:"slds-show_inline-block"},"I am shown as an inline-block")),description:"\nTo hide any type of element from view and from screen readers, use the `.slds-hide` class. Once hidden, you can display the content by using JavaScript to swap `.slds-hide` with `.slds-show`; This class will set the `display` property to `block`. If you need to display your hidden element as `inline` or `inline-block`, you can use the `.slds-show_inline` or `.slds-show_inline-block` classes, respectively.\n\nNote that `.slds-hide` and any of the `.slds-show-` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n "},{id:"transition-hide-show",label:"Transition Hide / Show",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-transition-hide"},"I have zero opacity"),n.a.createElement("div",{className:"slds-transition-show"},"I have 100% opacity")),description:"To slowly transition an element from hiding and showing, use the `slds-transition-hide` and `slds-transition-show` classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional `transition` property to control the opacity change."},{id:"responsive",label:"Responsive",element:n.a.createElement("div",{className:"demo-only demo-visibility"},n.a.createElement("div",{className:"slds-show_x-small"},"Hides on 319px and down"),n.a.createElement("div",{className:"slds-hide_x-small"},"Hides on 320px and up"),n.a.createElement("div",{className:"slds-show_small"},"Hides on 479px and down"),n.a.createElement("div",{className:"slds-hide_small"},"Hides on 480px and up"),n.a.createElement("div",{className:"slds-show_medium"},"Hides on 767px and down"),n.a.createElement("div",{className:"slds-hide_medium"},"Hides on 768px and up"),n.a.createElement("div",{className:"slds-show_large"},"Hides on 1023px and down"),n.a.createElement("div",{className:"slds-hide_large"},"Hides on 1024px and up"),n.a.createElement("div",{className:"slds-show_x-large"},"Hides on 1279px and down"),n.a.createElement("div",{className:"slds-hide_x-large"},"Hides on 1280px and up")),description:"\nResponsive visibility classes will hide content on specific breakpoints. `slds-show_[breakpoint]` renders `display: none` when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. `slds-hide_[breakpoint]` does the opposite by rendering `display: none` when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.\n\n\|Class Name\|Less than 320px\|X-Small (>= 320px)\|Small (>= 480px)\|Medium (>= 768px)\|Large (>= 1024px)\|X-Large (>= 1280px)\|\n\|---\|---\|---\|---\|---\|---\|---\|\n\|`.slds-hide_x-small`\|Show\|Hide\|Hide\|Hide\|Hide\|Hide\|\n\|`.slds-show_x-small`\|Hide\|Show\|Show\|Show\|Show\|Show\|\n\|`.slds-hide_small`\|Show\|Show\|Hide\|Hide\|Hide\|Hide\|\n\|`.slds-show_small`\|Hide\|Hide\|Show\|Show\|Show\|Show\|\n\|`.slds-hide_medium`\|Show\|Show\|Show\|Hide\|Hide\|Hide\|\n\|`.slds-show_medium`\|Hide\|Hide\|Hide\|Show\|Show\|Show\|\n\|`.slds-hide_large`\|Show\|Show\|Show\|Show\|Hide\|Hide\|\n\|`.slds-show_large`\|Hide\|Hide\|Hide\|Hide\|Show\|Show\|\n\|`.slds-hide_x-large`\|Show\|Show\|Show\|Show\|Show\|Hide\|\n\|`.slds-show_x-large`\|Hide\|Hide\|Hide\|Hide\|Hide\|Show\|\n "}],h=a.c.code,r=a.c.h2,c=a.c.h3,m=a.c.p,p=a.c.table,w=a.c.tbody,u=a.c.td,b=a.c.th,y=a.c.thead,v=a.c.tr,S=function(){return Object(t.createElement)(a.b,{},Object(t.createElement)("div",{className:"doc lead"},"Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues."),r({id:"Examples"},"Examples"),c({id:"Assistive-Text"},"Assistive Text"),m({},"Use the ",h({},"slds-assistive-text")," class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text."),Object(t.createElement)(d.a,null,Object(l.f)(o,"assistive-text")),c({id:"Collapsed-Expanded"},"Collapsed / Expanded"),m({},"The ",h({},".slds-is-collapsed")," class hides the elements contained inside by controlling the height and overflow properties. Use the ",h({},".slds-is-expanded")," class to show the elements contained inside in their normal expanded state."),Object(t.createElement)(d.a,null,Object(l.f)(o,"collapsed-expanded")),c({id:"Hidden-Visible"},"Hidden / Visible"),m({},"You can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the ",h({},"slds-hidden")," class. To make it visible again, use the ",h({},"slds-visible")," class."),m({},"Note that ",h({},".slds-hidden")," and any of the ",h({},".slds-visible")," utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden."),Object(t.createElement)(d.a,null,Object(l.f)(o,"hidden-visible")),c({id:"Hide-Show"},"Hide / Show"),m({},"To hide any type of element from view and from screen readers, use the ",h({},".slds-hide")," class. Once hidden, you can display the content by using JavaScript to swap ",h({},".slds-hide")," with ",h({},".slds-show"),"; This class will set the ",h({},"display")," property to ",h({},"block"),". If you need to display your hidden element as ",h({},"inline")," or ",h({},"inline-block"),", you can use the ",h({},".slds-show_inline")," or ",h({},".slds-show_inline-block")," classes, respectively."),m({},"Note that ",h({},".slds-hide")," and any of the ",h({},".slds-show-")," utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden."),Object(t.createElement)(d.a,null,Object(l.f)(o,"hide-show")),c({id:"Transition-Hide-Show"},"Transition Hide / Show"),m({},"To slowly transition an element from hiding and showing, use the ",h({},"slds-transition-hide")," and ",h({},"slds-transition-show")," classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional ",h({},"transition")," property to control the opacity change."),Object(t.createElement)(d.a,null,Object(l.f)(o,"transition-hide-show")),c({id:"Responsive"},"Responsive"),m({},"Responsive visibility classes will hide content on specific breakpoints. ",h({},"slds-show_[breakpoint]")," renders ",h({},"display: none")," when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. ",h({},"slds-hide_[breakpoint]")," does the opposite by rendering ",h({},"display: none")," when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller."),p({},y({},v({},b({},"Class Name"),b({},"Less than 320px"),b({},"X-Small (>= 320px)"),b({},"Small (>= 480px)"),b({},"Medium (>= 768px)"),b({},"Large (>= 1024px)"),b({},"X-Large (>= 1280px)"))),w({},v({},u({},h({},".slds-hide_x-small")),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_x-small")),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_small")),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_small")),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_medium")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_medium")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_large")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_large")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_x-large")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide")),v({},u({},h({},".slds-show_x-large")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show")))),Object(t.createElement)(d.a,null,Object(l.f)(o,"responsive")))},f=function(){return Object(a.a)(S())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/visibility/docs.mdx.js"]=function(e){function s(s){for(var t,d,l=s[0],o=s[1],h=s[2],c=0,m=[];c<l.length;c++)d=l[c],Object.prototype.hasOwnProperty.call(n,d)&&n[d]&&m.push(n[d][0]),n[d]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);for(r&&r(s);m.length;)m.shift()();return a.push.apply(a,h\|\|[]),i()}function i(){for(var e,s=0;s<a.length;s++){for(var i=a[s],t=!0,l=1;l<i.length;l++){var o=i[l];0!==n[o]&&(t=!1)}t&&(a.splice(s--,1),e=d(d.s=i[0]))}return e}var t={},n={109:0},a=[];function d(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,d),i.l=!0,i.exports}d.m=e,d.c=t,d.d=function(e,s,i){d.o(e,s)\|\|Object.defineProperty(e,s,{enumerable:!0,get:i})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(e,s){if(1&s&&(e=d(e)),8&s)return e;if(4&s&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(d.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&s&&"string"!=typeof e)for(var t in e)d.d(i,t,function(s){return e[s]}.bind(null,t));return i},d.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(s,"a",s),s},d.o=function(e,s){return Object.prototype.hasOwnProperty.call(e,s)},d.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=l.push.bind(l);l.push=s,l=l.slice();for(var h=0;h<l.length;h++)s(l[h]);var r=o;return a.push([711,0]),i()}({0:function(e,s){e.exports=React},20:function(e,s){e.exports=ReactDOM},21:function(e,s){e.exports=JSBeautify},711:function(e,s,i){"use strict";i.r(s),i.d(s,"getElement",(function(){return S})),i.d(s,"getContents",(function(){return f}));var t=i(0),n=i.n(t),a=i(4),d=i(2),l=i(1),o=[{id:"assistive-text",label:"Assistive Text",element:n.a.createElement("div",{className:"slds-assistive-text"},"I am hidden from sight"),description:"Use the `slds-assistive-text` class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text."},{id:"collapsed-expanded",label:"Collapsed / Expanded",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-is-collapsed"},n.a.createElement("h3",null,"I am collapsed"),n.a.createElement("p",null,"I am a child inside a collapsed element")),n.a.createElement("div",{className:"slds-is-expanded"},n.a.createElement("h3",null,"I am expanded"),n.a.createElement("p",null,"I am a child inside an expanded element"))),description:"The `.slds-is-collapsed` class hides the elements contained inside by controlling the height and overflow properties. Use the `.slds-is-expanded` class to show the elements contained inside in their normal expanded state."},{id:"hidden-visible",label:"Hidden / Visible",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-hidden"},"I am hidden"),n.a.createElement("div",{className:"slds-visible"},"I am visible")),description:"\nYou can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the `slds-hidden` class. To make it visible again, use the `slds-visible` class.\n\nNote that `.slds-hidden` and any of the `.slds-visible` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n "},{id:"hide-show",label:"Hide / Show",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-hide"},"I am hidden"),n.a.createElement("div",{className:"slds-show"},"I am shown as a block"),n.a.createElement("div",{className:"slds-show_inline-block"},"I am shown as an inline-block")),description:"\nTo hide any type of element from view and from screen readers, use the `.slds-hide` class. Once hidden, you can display the content by using JavaScript to swap `.slds-hide` with `.slds-show`; This class will set the `display` property to `block`. If you need to display your hidden element as `inline` or `inline-block`, you can use the `.slds-show_inline` or `.slds-show_inline-block` classes, respectively.\n\nNote that `.slds-hide` and any of the `.slds-show-` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.\n "},{id:"transition-hide-show",label:"Transition Hide / Show",element:n.a.createElement("div",{className:"demo-only"},n.a.createElement("div",{className:"slds-transition-hide"},"I have zero opacity"),n.a.createElement("div",{className:"slds-transition-show"},"I have 100% opacity")),description:"To slowly transition an element from hiding and showing, use the `slds-transition-hide` and `slds-transition-show` classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional `transition` property to control the opacity change."},{id:"responsive",label:"Responsive",element:n.a.createElement("div",{className:"demo-only demo-visibility"},n.a.createElement("div",{className:"slds-show_x-small"},"Hides on 319px and down"),n.a.createElement("div",{className:"slds-hide_x-small"},"Hides on 320px and up"),n.a.createElement("div",{className:"slds-show_small"},"Hides on 479px and down"),n.a.createElement("div",{className:"slds-hide_small"},"Hides on 480px and up"),n.a.createElement("div",{className:"slds-show_medium"},"Hides on 767px and down"),n.a.createElement("div",{className:"slds-hide_medium"},"Hides on 768px and up"),n.a.createElement("div",{className:"slds-show_large"},"Hides on 1023px and down"),n.a.createElement("div",{className:"slds-hide_large"},"Hides on 1024px and up"),n.a.createElement("div",{className:"slds-show_x-large"},"Hides on 1279px and down"),n.a.createElement("div",{className:"slds-hide_x-large"},"Hides on 1280px and up")),description:"\nResponsive visibility classes will hide content on specific breakpoints. `slds-show_[breakpoint]` renders `display: none` when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. `slds-hide_[breakpoint]` does the opposite by rendering `display: none` when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.\n\n\|Class Name\|Less than 320px\|X-Small (>= 320px)\|Small (>= 480px)\|Medium (>= 768px)\|Large (>= 1024px)\|X-Large (>= 1280px)\|\n\|---\|---\|---\|---\|---\|---\|---\|\n\|`.slds-hide_x-small`\|Show\|Hide\|Hide\|Hide\|Hide\|Hide\|\n\|`.slds-show_x-small`\|Hide\|Show\|Show\|Show\|Show\|Show\|\n\|`.slds-hide_small`\|Show\|Show\|Hide\|Hide\|Hide\|Hide\|\n\|`.slds-show_small`\|Hide\|Hide\|Show\|Show\|Show\|Show\|\n\|`.slds-hide_medium`\|Show\|Show\|Show\|Hide\|Hide\|Hide\|\n\|`.slds-show_medium`\|Hide\|Hide\|Hide\|Show\|Show\|Show\|\n\|`.slds-hide_large`\|Show\|Show\|Show\|Show\|Hide\|Hide\|\n\|`.slds-show_large`\|Hide\|Hide\|Hide\|Hide\|Show\|Show\|\n\|`.slds-hide_x-large`\|Show\|Show\|Show\|Show\|Show\|Hide\|\n\|`.slds-show_x-large`\|Hide\|Hide\|Hide\|Hide\|Hide\|Show\|\n "}],h=a.c.code,r=a.c.h2,c=a.c.h3,m=a.c.p,p=a.c.table,w=a.c.tbody,u=a.c.td,b=a.c.th,y=a.c.thead,v=a.c.tr,S=function(){return Object(t.createElement)(a.b,{},Object(t.createElement)("div",{className:"doc lead"},"Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues."),r({id:"Examples"},"Examples"),c({id:"Assistive-Text"},"Assistive Text"),m({},"Use the ",h({},"slds-assistive-text")," class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text."),Object(t.createElement)(d.a,null,Object(l.f)(o,"assistive-text")),c({id:"Collapsed-Expanded"},"Collapsed / Expanded"),m({},"The ",h({},".slds-is-collapsed")," class hides the elements contained inside by controlling the height and overflow properties. Use the ",h({},".slds-is-expanded")," class to show the elements contained inside in their normal expanded state."),Object(t.createElement)(d.a,null,Object(l.f)(o,"collapsed-expanded")),c({id:"Hidden-Visible"},"Hidden / Visible"),m({},"You can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the ",h({},"slds-hidden")," class. To make it visible again, use the ",h({},"slds-visible")," class."),m({},"Note that ",h({},".slds-hidden")," and any of the ",h({},".slds-visible")," utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden."),Object(t.createElement)(d.a,null,Object(l.f)(o,"hidden-visible")),c({id:"Hide-Show"},"Hide / Show"),m({},"To hide any type of element from view and from screen readers, use the ",h({},".slds-hide")," class. Once hidden, you can display the content by using JavaScript to swap ",h({},".slds-hide")," with ",h({},".slds-show"),"; This class will set the ",h({},"display")," property to ",h({},"block"),". If you need to display your hidden element as ",h({},"inline")," or ",h({},"inline-block"),", you can use the ",h({},".slds-show_inline")," or ",h({},".slds-show_inline-block")," classes, respectively."),m({},"Note that ",h({},".slds-hide")," and any of the ",h({},".slds-show-")," utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden."),Object(t.createElement)(d.a,null,Object(l.f)(o,"hide-show")),c({id:"Transition-Hide-Show"},"Transition Hide / Show"),m({},"To slowly transition an element from hiding and showing, use the ",h({},"slds-transition-hide")," and ",h({},"slds-transition-show")," classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional ",h({},"transition")," property to control the opacity change."),Object(t.createElement)(d.a,null,Object(l.f)(o,"transition-hide-show")),c({id:"Responsive"},"Responsive"),m({},"Responsive visibility classes will hide content on specific breakpoints. ",h({},"slds-show_[breakpoint]")," renders ",h({},"display: none")," when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. ",h({},"slds-hide_[breakpoint]")," does the opposite by rendering ",h({},"display: none")," when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller."),p({},y({},v({},b({},"Class Name"),b({},"Less than 320px"),b({},"X-Small (>= 320px)"),b({},"Small (>= 480px)"),b({},"Medium (>= 768px)"),b({},"Large (>= 1024px)"),b({},"X-Large (>= 1280px)"))),w({},v({},u({},h({},".slds-hide_x-small")),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_x-small")),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_small")),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_small")),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_medium")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_medium")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_large")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide"),u({},"Hide")),v({},u({},h({},".slds-show_large")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show"),u({},"Show")),v({},u({},h({},".slds-hide_x-large")),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Show"),u({},"Hide")),v({},u({},h({},".slds-show_x-large")),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Hide"),u({},"Show")))),Object(t.createElement)(d.a,null,Object(l.f)(o,"responsive")))},f=function(){return Object(a.a)(S())}}});