@pine-ds/core 3.5.2 → 3.6.0
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.
- package/components/mock-pds-modal.js +9 -4
- package/components/mock-pds-modal.js.map +1 -1
- package/components/pds-box2.js +132 -2
- package/components/pds-box2.js.map +1 -1
- package/components/pds-button2.js +51 -2
- package/components/pds-button2.js.map +1 -1
- package/components/pds-modal-content.js +128 -11
- package/components/pds-modal-content.js.map +1 -1
- package/components/pds-modal.js +13 -3
- package/components/pds-modal.js.map +1 -1
- package/components/pds-textarea.js +111 -7
- package/components/pds-textarea.js.map +1 -1
- package/components/pds-toast.js +3 -3
- package/components/pds-tooltip.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mock-pds-modal.cjs.entry.js +8 -4
- package/dist/cjs/mock-pds-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/mock-pds-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +67 -2
- package/dist/cjs/pds-box.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-box.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +50 -1
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +128 -11
- package/dist/cjs/pds-modal-content.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-modal-content.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-modal.cjs.entry.js +12 -3
- package/dist/cjs/pds-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-modal.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +108 -6
- package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-toast.cjs.entry.js +3 -3
- package/dist/cjs/pds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/collection/components/pds-box/pds-box.css +1325 -0
- package/dist/collection/components/pds-box/pds-box.js +1913 -148
- package/dist/collection/components/pds-box/pds-box.js.map +1 -1
- package/dist/collection/components/pds-button/pds-button.js +59 -1
- package/dist/collection/components/pds-button/pds-button.js.map +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.css +4 -6
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +128 -11
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js.map +1 -1
- package/dist/collection/components/pds-modal/pds-modal.css +42 -1
- package/dist/collection/components/pds-modal/pds-modal.js +34 -2
- package/dist/collection/components/pds-modal/pds-modal.js.map +1 -1
- package/dist/collection/components/pds-modal/stories/pds-modal.stories.js +245 -0
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +30 -3
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js.map +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.css +51 -11
- package/dist/collection/components/pds-textarea/pds-textarea.js +127 -4
- package/dist/collection/components/pds-textarea/pds-textarea.js.map +1 -1
- package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js +13 -0
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/docs.json +3988 -380
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mock-pds-modal.entry.js +8 -4
- package/dist/esm/mock-pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-box.entry.js +67 -2
- package/dist/esm/pds-box.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +50 -1
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-modal-content.entry.js +128 -11
- package/dist/esm/pds-modal-content.entry.js.map +1 -1
- package/dist/esm/pds-modal.entry.js +12 -3
- package/dist/esm/pds-modal.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +108 -6
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm/pds-toast.entry.js +3 -3
- package/dist/esm/pds-tooltip.entry.js +2 -2
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js.map +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js.map +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/mock-pds-modal.entry.esm.js.map +1 -1
- package/dist/pine-core/p-318fd0cf.entry.js +2 -0
- package/dist/pine-core/p-318fd0cf.entry.js.map +1 -0
- package/dist/pine-core/{p-c4d6fe50.system.entry.js → p-346561a6.system.entry.js} +2 -2
- package/dist/pine-core/p-346561a6.system.entry.js.map +1 -0
- package/dist/pine-core/p-3gYSFJIn.system.js.map +1 -0
- package/dist/pine-core/{p-IG5YumI3.system.js.map → p-3pEJO0vO.system.js.map} +1 -1
- package/dist/pine-core/p-41d1b164.entry.js +2 -0
- package/dist/pine-core/p-41d1b164.entry.js.map +1 -0
- package/dist/pine-core/{p-02326ac3.entry.js → p-4c81420c.entry.js} +2 -2
- package/dist/pine-core/p-52cb152b.system.entry.js +2 -0
- package/dist/pine-core/p-52cb152b.system.entry.js.map +1 -0
- package/dist/pine-core/p-540cfd70.entry.js +2 -0
- package/dist/pine-core/p-540cfd70.entry.js.map +1 -0
- package/dist/pine-core/{p-11d4036e.entry.js → p-5f5b19f4.entry.js} +2 -2
- package/dist/pine-core/p-6d4d4705.system.entry.js +2 -0
- package/dist/pine-core/p-6d4d4705.system.entry.js.map +1 -0
- package/dist/pine-core/{p-68b5665a.entry.js → p-84949a12.entry.js} +2 -2
- package/dist/pine-core/p-84949a12.entry.js.map +1 -0
- package/dist/pine-core/{p-7a95a90f.system.entry.js → p-8726c99d.system.entry.js} +2 -2
- package/dist/pine-core/{p-2kXtbFXu.system.js.map → p-BZoPY2dP.system.js.map} +1 -1
- package/dist/pine-core/p-C0zqu7Gr.system.js.map +1 -0
- package/dist/pine-core/p-CHJgq_z7.system.js.map +1 -0
- package/dist/pine-core/p-Co5XZmTN.system.js.map +1 -0
- package/dist/pine-core/p-Czoq9yJM.system.js.map +1 -0
- package/dist/pine-core/p-De9tROL-.system.js +1 -1
- package/dist/pine-core/p-WkrM7Vv0.system.js.map +1 -0
- package/dist/pine-core/p-a9895385.system.entry.js +2 -0
- package/dist/pine-core/p-a9895385.system.entry.js.map +1 -0
- package/dist/pine-core/p-c0df3222.entry.js +2 -0
- package/dist/pine-core/p-c0df3222.entry.js.map +1 -0
- package/dist/pine-core/{p-884b9ae6.system.entry.js → p-d8d8fe07.system.entry.js} +2 -2
- package/dist/pine-core/p-dc19ce6c.system.entry.js +2 -0
- package/dist/pine-core/p-dc19ce6c.system.entry.js.map +1 -0
- package/dist/pine-core/p-e08f492a.entry.js +2 -0
- package/dist/pine-core/p-e08f492a.entry.js.map +1 -0
- package/dist/pine-core/p-fcb39155.system.entry.js +2 -0
- package/dist/pine-core/p-fcb39155.system.entry.js.map +1 -0
- package/dist/pine-core/pds-box.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-button.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-modal-content.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-modal.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-textarea.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-box/pds-box.d.ts +315 -0
- package/dist/types/components/pds-button/pds-button.d.ts +4 -0
- package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +18 -1
- package/dist/types/components/pds-modal/pds-modal.d.ts +5 -0
- package/dist/types/components/pds-modal/test/mock-pds-modal.d.ts +5 -0
- package/dist/types/components/pds-textarea/pds-textarea.d.ts +20 -0
- package/dist/types/components.d.ts +660 -2
- package/hydrate/index.js +448 -34
- package/hydrate/index.mjs +448 -34
- package/package.json +2 -2
- package/dist/pine-core/p-007b61e9.system.entry.js +0 -2
- package/dist/pine-core/p-007b61e9.system.entry.js.map +0 -1
- package/dist/pine-core/p-0485aa93.system.entry.js +0 -2
- package/dist/pine-core/p-0485aa93.system.entry.js.map +0 -1
- package/dist/pine-core/p-2186e5d4.system.entry.js +0 -2
- package/dist/pine-core/p-2186e5d4.system.entry.js.map +0 -1
- package/dist/pine-core/p-54061a33.entry.js +0 -2
- package/dist/pine-core/p-54061a33.entry.js.map +0 -1
- package/dist/pine-core/p-68b5665a.entry.js.map +0 -1
- package/dist/pine-core/p-96a89cd5.system.entry.js +0 -2
- package/dist/pine-core/p-96a89cd5.system.entry.js.map +0 -1
- package/dist/pine-core/p-Bv5PJxD8.system.js.map +0 -1
- package/dist/pine-core/p-CD_nPb2F.system.js.map +0 -1
- package/dist/pine-core/p-DJekRkSL.system.js.map +0 -1
- package/dist/pine-core/p-DNYl_6t_.system.js.map +0 -1
- package/dist/pine-core/p-Dt10r3RZ.system.js.map +0 -1
- package/dist/pine-core/p-IIl2cTlj.system.js.map +0 -1
- package/dist/pine-core/p-a24c46e4.entry.js +0 -2
- package/dist/pine-core/p-a24c46e4.entry.js.map +0 -1
- package/dist/pine-core/p-c4d6fe50.system.entry.js.map +0 -1
- package/dist/pine-core/p-c6badcf8.entry.js +0 -2
- package/dist/pine-core/p-c6badcf8.entry.js.map +0 -1
- package/dist/pine-core/p-d714f68f.system.entry.js +0 -2
- package/dist/pine-core/p-d714f68f.system.entry.js.map +0 -1
- package/dist/pine-core/p-e5ca5b8e.entry.js +0 -2
- package/dist/pine-core/p-e5ca5b8e.entry.js.map +0 -1
- package/dist/pine-core/p-fb4058e6.entry.js +0 -2
- package/dist/pine-core/p-fb4058e6.entry.js.map +0 -1
- /package/dist/pine-core/{p-02326ac3.entry.js.map → p-4c81420c.entry.js.map} +0 -0
- /package/dist/pine-core/{p-11d4036e.entry.js.map → p-5f5b19f4.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7a95a90f.system.entry.js.map → p-8726c99d.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-884b9ae6.system.entry.js.map → p-d8d8fe07.system.entry.js.map} +0 -0
package/hydrate/index.js
CHANGED
|
@@ -3073,7 +3073,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3073
3073
|
};
|
|
3074
3074
|
var styles = /* @__PURE__ */ new Map();
|
|
3075
3075
|
|
|
3076
|
-
const pdsModalCss$1 = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:calc(100vh - (5vh + 96px))
|
|
3076
|
+
const pdsModalCss$1 = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
|
|
3077
3077
|
|
|
3078
3078
|
/**
|
|
3079
3079
|
* Mock PdsModal component for testing purposes
|
|
@@ -3089,7 +3089,11 @@ class MockPdsModal {
|
|
|
3089
3089
|
* The size of the modal
|
|
3090
3090
|
*/
|
|
3091
3091
|
this.size = 'md';
|
|
3092
|
-
|
|
3092
|
+
/**
|
|
3093
|
+
* Whether the modal content should be scrollable
|
|
3094
|
+
* @default true
|
|
3095
|
+
*/
|
|
3096
|
+
this.scrollable = true;
|
|
3093
3097
|
/**
|
|
3094
3098
|
* Whether the modal can be dismissed by clicking the backdrop
|
|
3095
3099
|
*/
|
|
@@ -3143,13 +3147,13 @@ class MockPdsModal {
|
|
|
3143
3147
|
const modalClasses = {
|
|
3144
3148
|
'pds-modal': true,
|
|
3145
3149
|
[`pds-modal--${this.size}`]: true,
|
|
3146
|
-
'pds-modal--scrollable':
|
|
3150
|
+
'pds-modal--scrollable': this.scrollable
|
|
3147
3151
|
};
|
|
3148
3152
|
const backdropClasses = {
|
|
3149
3153
|
'pds-modal__backdrop': true,
|
|
3150
3154
|
'open': this.open,
|
|
3151
3155
|
};
|
|
3152
|
-
return (hAsync("div", { key: '
|
|
3156
|
+
return (hAsync("div", { key: '0fccdb57d79f636ec3b5782943ddd76fbc9ce171', class: backdropClasses }, hAsync("div", { key: '341963284bfbcd1f99df53e346ed3257b00dbeb2', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, hAsync("div", { key: '8ff526d8c2d8c0696f9fff107928cf9cb59dbdad', class: "pds-modal__header" }, hAsync("slot", { key: '8746d9cb026e70b293be00f71ffa2939d80947ee', name: "header" })), hAsync("div", { key: '48b98256d3114016de8279012e2c496726f766ba', class: "pds-modal-content" }, hAsync("slot", { key: '49ff7217a2c8d59c56751c850c4372329e263e7b' })), hAsync("div", { key: 'd46d11d288bff5a4539d0cb4b2c7ea2111687ebf', class: "pds-modal__footer" }, hAsync("slot", { key: '549d4f33a78db562b5afce77cc108cc22f474a0d', name: "footer" })))));
|
|
3153
3157
|
}
|
|
3154
3158
|
get el() { return getElement(this); }
|
|
3155
3159
|
static get style() { return pdsModalCss$1; }
|
|
@@ -3159,6 +3163,7 @@ class MockPdsModal {
|
|
|
3159
3163
|
"$members$": {
|
|
3160
3164
|
"componentId": [1, "component-id"],
|
|
3161
3165
|
"size": [1],
|
|
3166
|
+
"scrollable": [4],
|
|
3162
3167
|
"backdropDismiss": [4, "backdrop-dismiss"],
|
|
3163
3168
|
"open": [1028],
|
|
3164
3169
|
"showModal": [64],
|
|
@@ -3488,7 +3493,7 @@ const setColor = (color, customColors) => {
|
|
|
3488
3493
|
};
|
|
3489
3494
|
};
|
|
3490
3495
|
|
|
3491
|
-
const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex}[class*=pds-box][min-height]{min-height:var(--sizing-min-height-box)}[class*=pds-box][min-width]{min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-row>.pds-box[class*=pds-box-]{-ms-flex-preferred-size:auto;flex-basis:auto}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-125)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-margin-block-start-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-block-start-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-block-start-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-block-start-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-block-start-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-block-start-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-block-start-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-start-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-inline-end-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-inline-end-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-inline-end-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-inline-end-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-inline-end-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-inline-end-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-end-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-end-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-end-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-end-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-start-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-start-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-start-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-start-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-start-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-start-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-start-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-block-end-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-block-end-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-block-end-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-block-end-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-block-end-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-block-end-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-block-end-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-start-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-start-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-start-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-start-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-start-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-start-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-inline-end-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-inline-end-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-inline-end-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-inline-end-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-inline-end-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-inline-end-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}.pds-box-display-block{display:block}.pds-box-display-inline-block{display:inline-block}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-box--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (max-width: 575px){.pds-justify-content-xs-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xs-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xs-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xs-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xs-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xs-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 576px){.pds-justify-content-sm-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-sm-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-sm-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-sm-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-sm-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-sm-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 768px){.pds-justify-content-md-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-md-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-md-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-md-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-md-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-md-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 992px){.pds-justify-content-lg-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-lg-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-lg-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-lg-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-lg-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-lg-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){.pds-justify-content-xl-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xl-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xl-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xl-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xl-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xl-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}@media (max-width: 575px){.pds-align-items-xs-start{-ms-flex-align:start;align-items:start}.pds-align-items-xs-center{-ms-flex-align:center;align-items:center}.pds-align-items-xs-end{-ms-flex-align:end;align-items:end}.pds-align-items-xs-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xs-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 576px){.pds-align-items-sm-start{-ms-flex-align:start;align-items:start}.pds-align-items-sm-center{-ms-flex-align:center;align-items:center}.pds-align-items-sm-end{-ms-flex-align:end;align-items:end}.pds-align-items-sm-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-sm-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){.pds-align-items-md-start{-ms-flex-align:start;align-items:start}.pds-align-items-md-center{-ms-flex-align:center;align-items:center}.pds-align-items-md-end{-ms-flex-align:end;align-items:end}.pds-align-items-md-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-md-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){.pds-align-items-lg-start{-ms-flex-align:start;align-items:start}.pds-align-items-lg-center{-ms-flex-align:center;align-items:center}.pds-align-items-lg-end{-ms-flex-align:end;align-items:end}.pds-align-items-lg-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-lg-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){.pds-align-items-xl-start{-ms-flex-align:start;align-items:start}.pds-align-items-xl-center{-ms-flex-align:center;align-items:center}.pds-align-items-xl-end{-ms-flex-align:end;align-items:end}.pds-align-items-xl-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xl-stretch{-ms-flex-align:stretch;align-items:stretch}}.pds-align-self-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-stretch{-ms-flex-item-align:stretch;align-self:stretch}@media (max-width: 575px){.pds-align-self-xs-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xs-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xs-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xs-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xs-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 576px){.pds-align-self-sm-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-sm-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-sm-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-sm-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-sm-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 768px){.pds-align-self-md-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-md-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-md-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-md-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-md-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 992px){.pds-align-self-lg-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-lg-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-lg-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-lg-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-lg-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.pds-align-self-xl-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xl-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xl-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xl-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xl-stretch{-ms-flex-item-align:stretch;align-self:stretch}}";
|
|
3496
|
+
const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex}[class*=pds-box][min-height]{min-height:var(--sizing-min-height-box)}[class*=pds-box][min-width]{min-width:var(--sizing-min-width-box)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-xxl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-xxl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-xxl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-xxl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-xxl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-row>.pds-box[class*=pds-box-]{-ms-flex-preferred-size:auto;flex-basis:auto}.pds-box--auto{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-125)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-margin-block-start-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-block-start-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-block-start-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-block-start-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-block-start-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-block-start-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-block-start-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-start-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-inline-end-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-inline-end-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-inline-end-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-inline-end-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-inline-end-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-inline-end-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-end-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-end-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-end-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-end-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-start-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-start-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-start-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-start-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-start-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-start-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-start-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-block-end-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-block-end-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-block-end-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-block-end-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-block-end-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-block-end-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-block-end-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-start-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-start-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-start-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-start-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-start-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-start-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-inline-end-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-inline-end-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-inline-end-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-inline-end-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-inline-end-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-inline-end-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}.pds-box-display-block{display:block}.pds-box-display-inline-block{display:inline-block}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-box--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (max-width: 575px){.pds-justify-content-xs-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xs-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xs-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xs-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xs-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xs-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 576px){.pds-justify-content-sm-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-sm-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-sm-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-sm-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-sm-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-sm-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 768px){.pds-justify-content-md-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-md-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-md-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-md-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-md-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-md-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 992px){.pds-justify-content-lg-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-lg-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-lg-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-lg-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-lg-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-lg-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){.pds-justify-content-xl-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-xl-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-xl-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-xl-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-xl-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-xl-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}@media (max-width: 575px){.pds-align-items-xs-start{-ms-flex-align:start;align-items:start}.pds-align-items-xs-center{-ms-flex-align:center;align-items:center}.pds-align-items-xs-end{-ms-flex-align:end;align-items:end}.pds-align-items-xs-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xs-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 576px){.pds-align-items-sm-start{-ms-flex-align:start;align-items:start}.pds-align-items-sm-center{-ms-flex-align:center;align-items:center}.pds-align-items-sm-end{-ms-flex-align:end;align-items:end}.pds-align-items-sm-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-sm-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){.pds-align-items-md-start{-ms-flex-align:start;align-items:start}.pds-align-items-md-center{-ms-flex-align:center;align-items:center}.pds-align-items-md-end{-ms-flex-align:end;align-items:end}.pds-align-items-md-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-md-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){.pds-align-items-lg-start{-ms-flex-align:start;align-items:start}.pds-align-items-lg-center{-ms-flex-align:center;align-items:center}.pds-align-items-lg-end{-ms-flex-align:end;align-items:end}.pds-align-items-lg-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-lg-stretch{-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){.pds-align-items-xl-start{-ms-flex-align:start;align-items:start}.pds-align-items-xl-center{-ms-flex-align:center;align-items:center}.pds-align-items-xl-end{-ms-flex-align:end;align-items:end}.pds-align-items-xl-baseline{-ms-flex-align:baseline;align-items:baseline}.pds-align-items-xl-stretch{-ms-flex-align:stretch;align-items:stretch}}.pds-align-self-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-stretch{-ms-flex-item-align:stretch;align-self:stretch}@media (max-width: 575px){.pds-align-self-xs-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xs-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xs-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xs-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xs-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 576px){.pds-align-self-sm-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-sm-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-sm-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-sm-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-sm-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 768px){.pds-align-self-md-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-md-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-md-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-md-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-md-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 992px){.pds-align-self-lg-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-lg-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-lg-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-lg-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-lg-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.pds-align-self-xl-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-xl-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-xl-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-xl-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-xl-stretch{-ms-flex-item-align:stretch;align-self:stretch}}@media (max-width: 575px){.pds-box--wrap-xs{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 576px){.pds-box--wrap-sm{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 768px){.pds-box--wrap-md{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 992px){.pds-box--wrap-lg{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (min-width: 1200px){.pds-box--wrap-xl{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media (max-width: 575px){.pds-box--auto-xs{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 576px){.pds-box--auto-sm{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 768px){.pds-box--auto-md{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 992px){.pds-box--auto-lg{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (min-width: 1200px){.pds-box--auto-xl{-ms-flex:0 0 var(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}}@media (max-width: 575px){.pds-box--fit-xs{max-width:100%;min-width:100%;width:100%}}@media (min-width: 576px){.pds-box--fit-sm{max-width:100%;min-width:100%;width:100%}}@media (min-width: 768px){.pds-box--fit-md{max-width:100%;min-width:100%;width:100%}}@media (min-width: 992px){.pds-box--fit-lg{max-width:100%;min-width:100%;width:100%}}@media (min-width: 1200px){.pds-box--fit-xl{max-width:100%;min-width:100%;width:100%}}@media (max-width: 575px){.pds-box-gap-xs-none{gap:0}.pds-box-gap-xs-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xs-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-xs-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-xs-md{gap:var(--pine-dimension-md)}.pds-box-gap-xs-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xs-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xs-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-box-gap-sm-none{gap:0}.pds-box-gap-sm-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-sm-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-sm-md{gap:var(--pine-dimension-md)}.pds-box-gap-sm-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-sm-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-sm-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-box-gap-md-none{gap:0}.pds-box-gap-md-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-md-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-md-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md-md{gap:var(--pine-dimension-md)}.pds-box-gap-md-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-md-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-md-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-box-gap-lg-none{gap:0}.pds-box-gap-lg-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-lg-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-lg-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-lg-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-lg-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-lg-xxl{gap:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-box-gap-xl-none{gap:0}.pds-box-gap-xl-xxs{gap:var(--pine-dimension-2xs)}.pds-box-gap-xl-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-xl-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-xl-md{gap:var(--pine-dimension-md)}.pds-box-gap-xl-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xl-xxl{gap:var(--pine-dimension-2xl)}}@media (max-width: 575px){.pds-margin-block-start-xs-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-xs-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-xs-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-xs-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-xs-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xs-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-xs-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xs-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-xs-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-xs-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-xs-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-xs-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-xs-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-xs-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-xs-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-xs-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-xs-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-xs-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-xs-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-xs-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-xs-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xs-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-xs-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-xs-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-xs-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xs-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-xs-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-xs-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-xs-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-xs-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-xs-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-xs-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-margin-block-start-sm-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-sm-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-sm-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-sm-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-sm-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-sm-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-sm-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-sm-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-sm-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-sm-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-sm-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-sm-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-sm-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-sm-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-sm-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-sm-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-sm-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-sm-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-sm-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-sm-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-sm-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-sm-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-sm-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-sm-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-sm-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-sm-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-sm-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-sm-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-sm-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-sm-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-sm-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-sm-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-margin-block-start-md-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-md-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-md-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-md-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-md-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-md-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-md-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-md-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-md-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-md-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-md-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-md-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-md-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-md-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-md-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-md-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-md-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-md-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-md-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-md-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-md-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-md-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-md-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-md-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-md-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-md-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-md-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-md-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-md-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-md-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-md-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-md-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-margin-block-start-lg-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-lg-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-lg-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-lg-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-lg-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-lg-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-lg-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-lg-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-lg-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-lg-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-lg-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-lg-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-lg-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-lg-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-lg-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-lg-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-lg-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-lg-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-lg-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-lg-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-lg-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-lg-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-lg-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-lg-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-lg-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-lg-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-lg-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-lg-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-lg-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-lg-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-lg-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-lg-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-margin-block-start-xl-none{-webkit-margin-before:0;margin-block-start:0}.pds-margin-inline-start-xl-none{-webkit-margin-start:0;margin-inline-start:0}.pds-margin-inline-end-xl-none{-webkit-margin-end:0;margin-inline-end:0}.pds-margin-block-end-xl-none{-webkit-margin-after:0;margin-block-end:0}.pds-margin-block-start-xl-xxs{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-margin-inline-start-xl-xxs{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-margin-inline-end-xl-xxs{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-margin-block-end-xl-xxs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-margin-block-start-xl-xs{-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-margin-inline-start-xl-xs{-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-margin-inline-end-xl-xs{-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.pds-margin-block-end-xl-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-margin-block-start-xl-sm{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-margin-inline-start-xl-sm{-webkit-margin-start:var(--pine-dimension-sm);margin-inline-start:var(--pine-dimension-sm)}.pds-margin-inline-end-xl-sm{-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-margin-block-end-xl-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-margin-block-start-xl-md{-webkit-margin-before:var(--pine-dimension-md);margin-block-start:var(--pine-dimension-md)}.pds-margin-inline-start-xl-md{-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md)}.pds-margin-inline-end-xl-md{-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-margin-block-end-xl-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-margin-block-start-xl-lg{-webkit-margin-before:var(--pine-dimension-lg);margin-block-start:var(--pine-dimension-lg)}.pds-margin-inline-start-xl-lg{-webkit-margin-start:var(--pine-dimension-lg);margin-inline-start:var(--pine-dimension-lg)}.pds-margin-inline-end-xl-lg{-webkit-margin-end:var(--pine-dimension-lg);margin-inline-end:var(--pine-dimension-lg)}.pds-margin-block-end-xl-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-margin-block-start-xl-xl{-webkit-margin-before:var(--pine-dimension-xl);margin-block-start:var(--pine-dimension-xl)}.pds-margin-inline-start-xl-xl{-webkit-margin-start:var(--pine-dimension-xl);margin-inline-start:var(--pine-dimension-xl)}.pds-margin-inline-end-xl-xl{-webkit-margin-end:var(--pine-dimension-xl);margin-inline-end:var(--pine-dimension-xl)}.pds-margin-block-end-xl-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-margin-block-start-xl-xxl{-webkit-margin-before:var(--pine-dimension-2xl);margin-block-start:var(--pine-dimension-2xl)}.pds-margin-inline-start-xl-xxl{-webkit-margin-start:var(--pine-dimension-2xl);margin-inline-start:var(--pine-dimension-2xl)}.pds-margin-inline-end-xl-xxl{-webkit-margin-end:var(--pine-dimension-2xl);margin-inline-end:var(--pine-dimension-2xl)}.pds-margin-block-end-xl-xxl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}}@media (max-width: 575px){.pds-padding-xs-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-xs-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-xs-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-xs-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-xs-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-xs-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-xs-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-xs-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-xs-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-xs-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-xs-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-xs-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-xs-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-xs-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-xs-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-xs-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-xs-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-xs-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-xs-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-xs-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-xs-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-xs-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-xs-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-xs-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-xs-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-xs-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-xs-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-xs-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-xs-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-xs-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-xs-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-xs-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-xs-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-xs-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-xs-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-xs-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-xs-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-xs-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-xs-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-xs-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 576px){.pds-padding-sm-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-sm-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-sm-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-sm-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-sm-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-sm-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-sm-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-sm-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-sm-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-sm-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-sm-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-sm-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-sm-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-sm-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-sm-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-sm-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-sm-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-sm-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-sm-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-sm-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-sm-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-sm-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-sm-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-sm-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-sm-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-sm-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-sm-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-sm-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-sm-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-sm-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-sm-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-sm-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-sm-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-sm-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-sm-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-sm-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-sm-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-sm-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-sm-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-sm-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 768px){.pds-padding-md-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-md-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-md-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-md-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-md-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-md-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-md-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-md-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-md-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-md-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-md-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-md-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-md-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-md-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-md-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-md-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-md-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-md-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-md-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-md-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-md-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-md-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-md-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-md-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-md-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-md-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-md-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-md-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-md-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-md-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-md-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-md-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-md-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-md-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-md-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-md-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-md-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-md-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-md-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-md-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 992px){.pds-padding-lg-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-lg-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-lg-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-lg-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-lg-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-lg-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-lg-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-lg-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-lg-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-lg-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-lg-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-lg-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-lg-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-lg-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-lg-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-lg-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-lg-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-lg-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-lg-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-lg-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-lg-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-lg-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-lg-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-lg-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-lg-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-lg-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-lg-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-lg-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-lg-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-lg-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-lg-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-lg-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-lg-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-lg-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-lg-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-lg-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-lg-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-lg-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-lg-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-lg-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}@media (min-width: 1200px){.pds-padding-xl-none{padding:var(--pine-dimension-none)}.pds-padding-block-start-xl-none{-webkit-padding-before:var(--pine-dimension-none);padding-block-start:var(--pine-dimension-none)}.pds-padding-block-end-xl-none{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-padding-inline-start-xl-none{-webkit-padding-start:var(--pine-dimension-none);padding-inline-start:var(--pine-dimension-none)}.pds-padding-inline-end-xl-none{-webkit-padding-end:var(--pine-dimension-none);padding-inline-end:var(--pine-dimension-none)}.pds-padding-xl-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-block-start-xl-xxs{-webkit-padding-before:var(--pine-dimension-2xs);padding-block-start:var(--pine-dimension-2xs)}.pds-padding-block-end-xl-xxs{-webkit-padding-after:var(--pine-dimension-2xs);padding-block-end:var(--pine-dimension-2xs)}.pds-padding-inline-start-xl-xxs{-webkit-padding-start:var(--pine-dimension-2xs);padding-inline-start:var(--pine-dimension-2xs)}.pds-padding-inline-end-xl-xxs{-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs)}.pds-padding-xl-xs{padding:var(--pine-dimension-xs)}.pds-padding-block-start-xl-xs{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-padding-block-end-xl-xs{-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs)}.pds-padding-inline-start-xl-xs{-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs)}.pds-padding-inline-end-xl-xs{-webkit-padding-end:var(--pine-dimension-xs);padding-inline-end:var(--pine-dimension-xs)}.pds-padding-xl-sm{padding:var(--pine-dimension-sm)}.pds-padding-block-start-xl-sm{-webkit-padding-before:var(--pine-dimension-sm);padding-block-start:var(--pine-dimension-sm)}.pds-padding-block-end-xl-sm{-webkit-padding-after:var(--pine-dimension-sm);padding-block-end:var(--pine-dimension-sm)}.pds-padding-inline-start-xl-sm{-webkit-padding-start:var(--pine-dimension-sm);padding-inline-start:var(--pine-dimension-sm)}.pds-padding-inline-end-xl-sm{-webkit-padding-end:var(--pine-dimension-sm);padding-inline-end:var(--pine-dimension-sm)}.pds-padding-xl-md{padding:var(--pine-dimension-md)}.pds-padding-block-start-xl-md{-webkit-padding-before:var(--pine-dimension-md);padding-block-start:var(--pine-dimension-md)}.pds-padding-block-end-xl-md{-webkit-padding-after:var(--pine-dimension-md);padding-block-end:var(--pine-dimension-md)}.pds-padding-inline-start-xl-md{-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-padding-inline-end-xl-md{-webkit-padding-end:var(--pine-dimension-md);padding-inline-end:var(--pine-dimension-md)}.pds-padding-xl-lg{padding:var(--pine-dimension-lg)}.pds-padding-block-start-xl-lg{-webkit-padding-before:var(--pine-dimension-lg);padding-block-start:var(--pine-dimension-lg)}.pds-padding-block-end-xl-lg{-webkit-padding-after:var(--pine-dimension-lg);padding-block-end:var(--pine-dimension-lg)}.pds-padding-inline-start-xl-lg{-webkit-padding-start:var(--pine-dimension-lg);padding-inline-start:var(--pine-dimension-lg)}.pds-padding-inline-end-xl-lg{-webkit-padding-end:var(--pine-dimension-lg);padding-inline-end:var(--pine-dimension-lg)}.pds-padding-xl-xl{padding:var(--pine-dimension-xl)}.pds-padding-block-start-xl-xl{-webkit-padding-before:var(--pine-dimension-xl);padding-block-start:var(--pine-dimension-xl)}.pds-padding-block-end-xl-xl{-webkit-padding-after:var(--pine-dimension-xl);padding-block-end:var(--pine-dimension-xl)}.pds-padding-inline-start-xl-xl{-webkit-padding-start:var(--pine-dimension-xl);padding-inline-start:var(--pine-dimension-xl)}.pds-padding-inline-end-xl-xl{-webkit-padding-end:var(--pine-dimension-xl);padding-inline-end:var(--pine-dimension-xl)}.pds-padding-xl-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-start-xl-xxl{-webkit-padding-before:var(--pine-dimension-2xl);padding-block-start:var(--pine-dimension-2xl)}.pds-padding-block-end-xl-xxl{-webkit-padding-after:var(--pine-dimension-2xl);padding-block-end:var(--pine-dimension-2xl)}.pds-padding-inline-start-xl-xxl{-webkit-padding-start:var(--pine-dimension-2xl);padding-inline-start:var(--pine-dimension-2xl)}.pds-padding-inline-end-xl-xxl{-webkit-padding-end:var(--pine-dimension-2xl);padding-inline-end:var(--pine-dimension-2xl)}}";
|
|
3492
3497
|
|
|
3493
3498
|
class PdsBox {
|
|
3494
3499
|
constructor(hostRef) {
|
|
@@ -3513,13 +3518,33 @@ class PdsBox {
|
|
|
3513
3518
|
${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
|
|
3514
3519
|
${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
|
|
3515
3520
|
${this.auto ? 'pds-box--auto' : ''}
|
|
3521
|
+
${this.autoXs ? 'pds-box--auto-xs' : ''}
|
|
3522
|
+
${this.autoSm ? 'pds-box--auto-sm' : ''}
|
|
3523
|
+
${this.autoMd ? 'pds-box--auto-md' : ''}
|
|
3524
|
+
${this.autoLg ? 'pds-box--auto-lg' : ''}
|
|
3525
|
+
${this.autoXl ? 'pds-box--auto-xl' : ''}
|
|
3516
3526
|
${this.border ? 'pds-box--border' : ''}
|
|
3517
3527
|
${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
|
|
3518
3528
|
${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
|
|
3519
3529
|
${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
|
|
3520
3530
|
${this.fit ? 'pds-box--fit' : ''}
|
|
3531
|
+
${this.fitXs ? 'pds-box--fit-xs' : ''}
|
|
3532
|
+
${this.fitSm ? 'pds-box--fit-sm' : ''}
|
|
3533
|
+
${this.fitMd ? 'pds-box--fit-md' : ''}
|
|
3534
|
+
${this.fitLg ? 'pds-box--fit-lg' : ''}
|
|
3535
|
+
${this.fitXl ? 'pds-box--fit-xl' : ''}
|
|
3521
3536
|
${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
|
|
3537
|
+
${this.gapXs !== undefined && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
|
|
3538
|
+
${this.gapSm !== undefined && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
|
|
3539
|
+
${this.gapMd !== undefined && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
|
|
3540
|
+
${this.gapLg !== undefined && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
|
|
3541
|
+
${this.gapXl !== undefined && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
|
|
3522
3542
|
${this.wrap ? 'pds-box--wrap' : ''}
|
|
3543
|
+
${this.wrapXs ? 'pds-box--wrap-xs' : ''}
|
|
3544
|
+
${this.wrapSm ? 'pds-box--wrap-sm' : ''}
|
|
3545
|
+
${this.wrapMd ? 'pds-box--wrap-md' : ''}
|
|
3546
|
+
${this.wrapLg ? 'pds-box--wrap-lg' : ''}
|
|
3547
|
+
${this.wrapXl ? 'pds-box--wrap-xl' : ''}
|
|
3523
3548
|
${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
|
|
3524
3549
|
${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
3525
3550
|
${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
|
|
@@ -3528,9 +3553,29 @@ class PdsBox {
|
|
|
3528
3553
|
${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
|
|
3529
3554
|
${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
|
|
3530
3555
|
${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
|
|
3556
|
+
${this.marginBlockStartXs !== undefined && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
|
|
3557
|
+
${this.marginBlockStartSm !== undefined && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
|
|
3558
|
+
${this.marginBlockStartMd !== undefined && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
|
|
3559
|
+
${this.marginBlockStartLg !== undefined && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
|
|
3560
|
+
${this.marginBlockStartXl !== undefined && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
|
|
3531
3561
|
${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
|
|
3562
|
+
${this.marginInlineStartXs !== undefined && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
|
|
3563
|
+
${this.marginInlineStartSm !== undefined && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
|
|
3564
|
+
${this.marginInlineStartMd !== undefined && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
|
|
3565
|
+
${this.marginInlineStartLg !== undefined && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
|
|
3566
|
+
${this.marginInlineStartXl !== undefined && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
|
|
3532
3567
|
${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
|
|
3568
|
+
${this.marginInlineEndXs !== undefined && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
|
|
3569
|
+
${this.marginInlineEndSm !== undefined && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
|
|
3570
|
+
${this.marginInlineEndMd !== undefined && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
|
|
3571
|
+
${this.marginInlineEndLg !== undefined && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
|
|
3572
|
+
${this.marginInlineEndXl !== undefined && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
|
|
3533
3573
|
${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
|
|
3574
|
+
${this.marginBlockEndXs !== undefined && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
|
|
3575
|
+
${this.marginBlockEndSm !== undefined && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
|
|
3576
|
+
${this.marginBlockEndMd !== undefined && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
|
|
3577
|
+
${this.marginBlockEndLg !== undefined && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
|
|
3578
|
+
${this.marginBlockEndXl !== undefined && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
|
|
3534
3579
|
${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
|
|
3535
3580
|
${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
|
|
3536
3581
|
${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
|
|
@@ -3538,10 +3583,35 @@ class PdsBox {
|
|
|
3538
3583
|
${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
|
|
3539
3584
|
${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
|
|
3540
3585
|
${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
|
|
3586
|
+
${this.paddingXs !== undefined && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
|
|
3587
|
+
${this.paddingSm !== undefined && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
|
|
3588
|
+
${this.paddingMd !== undefined && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
|
|
3589
|
+
${this.paddingLg !== undefined && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
|
|
3590
|
+
${this.paddingXl !== undefined && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
|
|
3541
3591
|
${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
|
|
3592
|
+
${this.paddingBlockStartXs !== undefined && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
|
|
3593
|
+
${this.paddingBlockStartSm !== undefined && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
|
|
3594
|
+
${this.paddingBlockStartMd !== undefined && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
|
|
3595
|
+
${this.paddingBlockStartLg !== undefined && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
|
|
3596
|
+
${this.paddingBlockStartXl !== undefined && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
|
|
3542
3597
|
${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
|
|
3598
|
+
${this.paddingBlockEndXs !== undefined && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
|
|
3599
|
+
${this.paddingBlockEndSm !== undefined && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
|
|
3600
|
+
${this.paddingBlockEndMd !== undefined && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
|
|
3601
|
+
${this.paddingBlockEndLg !== undefined && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
|
|
3602
|
+
${this.paddingBlockEndXl !== undefined && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
|
|
3543
3603
|
${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
|
|
3604
|
+
${this.paddingInlineStartXs !== undefined && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
|
|
3605
|
+
${this.paddingInlineStartSm !== undefined && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
|
|
3606
|
+
${this.paddingInlineStartMd !== undefined && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
|
|
3607
|
+
${this.paddingInlineStartLg !== undefined && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
|
|
3608
|
+
${this.paddingInlineStartXl !== undefined && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
|
|
3544
3609
|
${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
|
|
3610
|
+
${this.paddingInlineEndXs !== undefined && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
|
|
3611
|
+
${this.paddingInlineEndSm !== undefined && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
|
|
3612
|
+
${this.paddingInlineEndMd !== undefined && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
|
|
3613
|
+
${this.paddingInlineEndLg !== undefined && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
|
|
3614
|
+
${this.paddingInlineEndXl !== undefined && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
|
|
3545
3615
|
${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
|
|
3546
3616
|
${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
|
|
3547
3617
|
${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
|
|
@@ -3559,7 +3629,7 @@ class PdsBox {
|
|
|
3559
3629
|
const normalizedBackground = normalizeColorValue(this.backgroundColor);
|
|
3560
3630
|
const normalizedBorder = normalizeColorValue(this.borderColor);
|
|
3561
3631
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
3562
|
-
return (hAsync(Host, { key: '
|
|
3632
|
+
return (hAsync(Host, { key: '63a5dfc55625ad930494caa79f2b26a663d9cddd', class: boxClasses, style: boxInlineStyles }));
|
|
3563
3633
|
}
|
|
3564
3634
|
static get style() { return pdsBoxCss; }
|
|
3565
3635
|
static get cmpMeta() { return {
|
|
@@ -3579,6 +3649,11 @@ class PdsBox {
|
|
|
3579
3649
|
"alignSelfLg": [1, "align-self-lg"],
|
|
3580
3650
|
"alignSelfXl": [1, "align-self-xl"],
|
|
3581
3651
|
"auto": [4],
|
|
3652
|
+
"autoXs": [4, "auto-xs"],
|
|
3653
|
+
"autoSm": [4, "auto-sm"],
|
|
3654
|
+
"autoMd": [4, "auto-md"],
|
|
3655
|
+
"autoLg": [4, "auto-lg"],
|
|
3656
|
+
"autoXl": [4, "auto-xl"],
|
|
3582
3657
|
"backgroundColor": [1, "background-color"],
|
|
3583
3658
|
"border": [4],
|
|
3584
3659
|
"borderColor": [1, "border-color"],
|
|
@@ -3586,8 +3661,23 @@ class PdsBox {
|
|
|
3586
3661
|
"direction": [1],
|
|
3587
3662
|
"display": [1],
|
|
3588
3663
|
"fit": [4],
|
|
3664
|
+
"fitXs": [4, "fit-xs"],
|
|
3665
|
+
"fitSm": [4, "fit-sm"],
|
|
3666
|
+
"fitMd": [4, "fit-md"],
|
|
3667
|
+
"fitLg": [4, "fit-lg"],
|
|
3668
|
+
"fitXl": [4, "fit-xl"],
|
|
3589
3669
|
"gap": [1],
|
|
3670
|
+
"gapXs": [1, "gap-xs"],
|
|
3671
|
+
"gapSm": [1, "gap-sm"],
|
|
3672
|
+
"gapMd": [1, "gap-md"],
|
|
3673
|
+
"gapLg": [1, "gap-lg"],
|
|
3674
|
+
"gapXl": [1, "gap-xl"],
|
|
3590
3675
|
"wrap": [4],
|
|
3676
|
+
"wrapXs": [4, "wrap-xs"],
|
|
3677
|
+
"wrapSm": [4, "wrap-sm"],
|
|
3678
|
+
"wrapMd": [4, "wrap-md"],
|
|
3679
|
+
"wrapLg": [4, "wrap-lg"],
|
|
3680
|
+
"wrapXl": [4, "wrap-xl"],
|
|
3591
3681
|
"flex": [1],
|
|
3592
3682
|
"justifyContent": [1, "justify-content"],
|
|
3593
3683
|
"justifyContentXs": [1, "justify-content-xs"],
|
|
@@ -3596,9 +3686,29 @@ class PdsBox {
|
|
|
3596
3686
|
"justifyContentLg": [1, "justify-content-lg"],
|
|
3597
3687
|
"justifyContentXl": [1, "justify-content-xl"],
|
|
3598
3688
|
"marginBlockStart": [1, "margin-block-start"],
|
|
3689
|
+
"marginBlockStartXs": [1, "margin-block-start-xs"],
|
|
3690
|
+
"marginBlockStartSm": [1, "margin-block-start-sm"],
|
|
3691
|
+
"marginBlockStartMd": [1, "margin-block-start-md"],
|
|
3692
|
+
"marginBlockStartLg": [1, "margin-block-start-lg"],
|
|
3693
|
+
"marginBlockStartXl": [1, "margin-block-start-xl"],
|
|
3599
3694
|
"marginInlineStart": [1, "margin-inline-start"],
|
|
3695
|
+
"marginInlineStartXs": [1, "margin-inline-start-xs"],
|
|
3696
|
+
"marginInlineStartSm": [1, "margin-inline-start-sm"],
|
|
3697
|
+
"marginInlineStartMd": [1, "margin-inline-start-md"],
|
|
3698
|
+
"marginInlineStartLg": [1, "margin-inline-start-lg"],
|
|
3699
|
+
"marginInlineStartXl": [1, "margin-inline-start-xl"],
|
|
3600
3700
|
"marginInlineEnd": [1, "margin-inline-end"],
|
|
3701
|
+
"marginInlineEndXs": [1, "margin-inline-end-xs"],
|
|
3702
|
+
"marginInlineEndSm": [1, "margin-inline-end-sm"],
|
|
3703
|
+
"marginInlineEndMd": [1, "margin-inline-end-md"],
|
|
3704
|
+
"marginInlineEndLg": [1, "margin-inline-end-lg"],
|
|
3705
|
+
"marginInlineEndXl": [1, "margin-inline-end-xl"],
|
|
3601
3706
|
"marginBlockEnd": [1, "margin-block-end"],
|
|
3707
|
+
"marginBlockEndXs": [1, "margin-block-end-xs"],
|
|
3708
|
+
"marginBlockEndSm": [1, "margin-block-end-sm"],
|
|
3709
|
+
"marginBlockEndMd": [1, "margin-block-end-md"],
|
|
3710
|
+
"marginBlockEndLg": [1, "margin-block-end-lg"],
|
|
3711
|
+
"marginBlockEndXl": [1, "margin-block-end-xl"],
|
|
3602
3712
|
"minHeight": [513, "min-height"],
|
|
3603
3713
|
"minWidth": [513, "min-width"],
|
|
3604
3714
|
"offset": [1],
|
|
@@ -3608,10 +3718,35 @@ class PdsBox {
|
|
|
3608
3718
|
"offsetLg": [1, "offset-lg"],
|
|
3609
3719
|
"offsetXl": [1, "offset-xl"],
|
|
3610
3720
|
"padding": [1],
|
|
3721
|
+
"paddingXs": [1, "padding-xs"],
|
|
3722
|
+
"paddingSm": [1, "padding-sm"],
|
|
3723
|
+
"paddingMd": [1, "padding-md"],
|
|
3724
|
+
"paddingLg": [1, "padding-lg"],
|
|
3725
|
+
"paddingXl": [1, "padding-xl"],
|
|
3611
3726
|
"paddingBlockStart": [1, "padding-block-start"],
|
|
3727
|
+
"paddingBlockStartXs": [1, "padding-block-start-xs"],
|
|
3728
|
+
"paddingBlockStartSm": [1, "padding-block-start-sm"],
|
|
3729
|
+
"paddingBlockStartMd": [1, "padding-block-start-md"],
|
|
3730
|
+
"paddingBlockStartLg": [1, "padding-block-start-lg"],
|
|
3731
|
+
"paddingBlockStartXl": [1, "padding-block-start-xl"],
|
|
3612
3732
|
"paddingBlockEnd": [1, "padding-block-end"],
|
|
3733
|
+
"paddingBlockEndXs": [1, "padding-block-end-xs"],
|
|
3734
|
+
"paddingBlockEndSm": [1, "padding-block-end-sm"],
|
|
3735
|
+
"paddingBlockEndMd": [1, "padding-block-end-md"],
|
|
3736
|
+
"paddingBlockEndLg": [1, "padding-block-end-lg"],
|
|
3737
|
+
"paddingBlockEndXl": [1, "padding-block-end-xl"],
|
|
3613
3738
|
"paddingInlineStart": [1, "padding-inline-start"],
|
|
3739
|
+
"paddingInlineStartXs": [1, "padding-inline-start-xs"],
|
|
3740
|
+
"paddingInlineStartSm": [1, "padding-inline-start-sm"],
|
|
3741
|
+
"paddingInlineStartMd": [1, "padding-inline-start-md"],
|
|
3742
|
+
"paddingInlineStartLg": [1, "padding-inline-start-lg"],
|
|
3743
|
+
"paddingInlineStartXl": [1, "padding-inline-start-xl"],
|
|
3614
3744
|
"paddingInlineEnd": [1, "padding-inline-end"],
|
|
3745
|
+
"paddingInlineEndXs": [1, "padding-inline-end-xs"],
|
|
3746
|
+
"paddingInlineEndSm": [1, "padding-inline-end-sm"],
|
|
3747
|
+
"paddingInlineEndMd": [1, "padding-inline-end-md"],
|
|
3748
|
+
"paddingInlineEndLg": [1, "padding-inline-end-lg"],
|
|
3749
|
+
"paddingInlineEndXl": [1, "padding-inline-end-xl"],
|
|
3615
3750
|
"shadow": [1],
|
|
3616
3751
|
"size": [1],
|
|
3617
3752
|
"sizeXs": [1, "size-xs"],
|
|
@@ -3684,8 +3819,13 @@ class PdsButton {
|
|
|
3684
3819
|
ev.preventDefault();
|
|
3685
3820
|
return;
|
|
3686
3821
|
}
|
|
3822
|
+
// Prevent form submission for disabled buttons
|
|
3823
|
+
if (this.disabled) {
|
|
3824
|
+
ev.preventDefault();
|
|
3825
|
+
return;
|
|
3826
|
+
}
|
|
3687
3827
|
if (!this.href && this.type != 'button') {
|
|
3688
|
-
//
|
|
3828
|
+
// Handle form submission for Shadow DOM buttons
|
|
3689
3829
|
if (hasShadowDom(this.el)) {
|
|
3690
3830
|
const form = this.el.closest('form');
|
|
3691
3831
|
if (form) {
|
|
@@ -3702,6 +3842,50 @@ class PdsButton {
|
|
|
3702
3842
|
this.pdsClick.emit(ev);
|
|
3703
3843
|
};
|
|
3704
3844
|
}
|
|
3845
|
+
/**
|
|
3846
|
+
* Listen for Enter key presses on form inputs to trigger submit
|
|
3847
|
+
*/
|
|
3848
|
+
handleFormKeyDown(event) {
|
|
3849
|
+
// Only handle Enter key for submit buttons that are not disabled
|
|
3850
|
+
if (event.key !== 'Enter' || this.type !== 'submit' || this.href || this.disabled) {
|
|
3851
|
+
return;
|
|
3852
|
+
}
|
|
3853
|
+
const target = event.target;
|
|
3854
|
+
// Ensure event.target is an Element with matches method before proceeding
|
|
3855
|
+
if (!target || typeof target.matches !== 'function') {
|
|
3856
|
+
return;
|
|
3857
|
+
}
|
|
3858
|
+
const form = this.el.closest('form');
|
|
3859
|
+
// Check if the Enter key was pressed in a form input within the same form
|
|
3860
|
+
if (!form || !target || !form.contains(target)) {
|
|
3861
|
+
return;
|
|
3862
|
+
}
|
|
3863
|
+
// Check if target is a form input element (exclude reset buttons)
|
|
3864
|
+
const isFormInput = target.matches('input:not([type="submit"]):not([type="button"]):not([type="reset"])') ||
|
|
3865
|
+
target.matches('pds-input') ||
|
|
3866
|
+
target.matches('pds-select') ||
|
|
3867
|
+
target.matches('pds-switch') ||
|
|
3868
|
+
target.matches('pds-checkbox') ||
|
|
3869
|
+
target.matches('pds-radio');
|
|
3870
|
+
if (isFormInput) {
|
|
3871
|
+
// Find all submit buttons in the form and check their actual properties
|
|
3872
|
+
const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type="submit"], input[type="submit"]'));
|
|
3873
|
+
const enabledSubmitButtons = allSubmitButtons.filter(button => {
|
|
3874
|
+
if (button.tagName.toLowerCase() === 'pds-button') {
|
|
3875
|
+
const pdsButton = button;
|
|
3876
|
+
return pdsButton.type === 'submit' && !pdsButton.disabled;
|
|
3877
|
+
}
|
|
3878
|
+
else {
|
|
3879
|
+
return !button.hasAttribute('disabled');
|
|
3880
|
+
}
|
|
3881
|
+
});
|
|
3882
|
+
// Only synthesize click if this button is strictly the first enabled submit button
|
|
3883
|
+
if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {
|
|
3884
|
+
event.preventDefault();
|
|
3885
|
+
this.el.click();
|
|
3886
|
+
}
|
|
3887
|
+
}
|
|
3888
|
+
}
|
|
3705
3889
|
classNames() {
|
|
3706
3890
|
const classNames = ['pds-button'];
|
|
3707
3891
|
if (this.variant) {
|
|
@@ -3779,7 +3963,7 @@ class PdsButton {
|
|
|
3779
3963
|
"value": [1],
|
|
3780
3964
|
"variant": [1]
|
|
3781
3965
|
},
|
|
3782
|
-
"$listeners$":
|
|
3966
|
+
"$listeners$": [[16, "keydown", "handleFormKeyDown"]],
|
|
3783
3967
|
"$lazyBundleId$": "-",
|
|
3784
3968
|
"$attrsToReflect$": []
|
|
3785
3969
|
}; }
|
|
@@ -8746,7 +8930,7 @@ class PdsLoader {
|
|
|
8746
8930
|
}; }
|
|
8747
8931
|
}
|
|
8748
8932
|
|
|
8749
|
-
const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:calc(100vh - (5vh + 96px))
|
|
8933
|
+
const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:1000}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:1001}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
|
|
8750
8934
|
|
|
8751
8935
|
class PdsModal {
|
|
8752
8936
|
constructor(hostRef) {
|
|
@@ -8769,6 +8953,11 @@ class PdsModal {
|
|
|
8769
8953
|
* @default 'md'
|
|
8770
8954
|
*/
|
|
8771
8955
|
this.size = 'md';
|
|
8956
|
+
/**
|
|
8957
|
+
* Whether the modal content should be scrollable
|
|
8958
|
+
* @default true
|
|
8959
|
+
*/
|
|
8960
|
+
this.scrollable = true;
|
|
8772
8961
|
/**
|
|
8773
8962
|
* Stores the list of focusable elements in the modal
|
|
8774
8963
|
*/
|
|
@@ -8979,10 +9168,14 @@ class PdsModal {
|
|
|
8979
9168
|
return thisZIndex === maxZIndex;
|
|
8980
9169
|
}
|
|
8981
9170
|
render() {
|
|
8982
|
-
return (hAsync("dialog", { key: '
|
|
9171
|
+
return (hAsync("dialog", { key: '57daacecb0d85c643c1fe17b98046dcc98f982cb', class: {
|
|
8983
9172
|
'pds-modal__backdrop': true,
|
|
8984
9173
|
'open': this.open
|
|
8985
|
-
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
9174
|
+
}, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '9fe239071cb2679dd626bc3cf8fd94abe9c1bee0', class: {
|
|
9175
|
+
'pds-modal': true,
|
|
9176
|
+
[`pds-modal--${this.size}`]: true,
|
|
9177
|
+
'pds-modal--scrollable': this.scrollable
|
|
9178
|
+
} }, hAsync("slot", { key: '59edffec7f550550a03ce2100eb3aeb2be99902b' }))));
|
|
8986
9179
|
}
|
|
8987
9180
|
get el() { return getElement(this); }
|
|
8988
9181
|
static get watchers() { return {
|
|
@@ -8997,6 +9190,7 @@ class PdsModal {
|
|
|
8997
9190
|
"componentId": [1, "component-id"],
|
|
8998
9191
|
"open": [1028],
|
|
8999
9192
|
"size": [1],
|
|
9193
|
+
"scrollable": [4],
|
|
9000
9194
|
"focusableElementsArray": [32],
|
|
9001
9195
|
"showModal": [64],
|
|
9002
9196
|
"hideModal": [64]
|
|
@@ -9007,31 +9201,133 @@ class PdsModal {
|
|
|
9007
9201
|
}; }
|
|
9008
9202
|
}
|
|
9009
9203
|
|
|
9010
|
-
const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;
|
|
9204
|
+
const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200);-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}";
|
|
9011
9205
|
|
|
9012
9206
|
class PdsModalContent {
|
|
9013
9207
|
constructor(hostRef) {
|
|
9014
9208
|
registerInstance(this, hostRef);
|
|
9015
9209
|
/**
|
|
9016
|
-
* The border style for the content area.
|
|
9210
|
+
* The border style for the content area. When not explicitly set, automatically determined based on scroll state.
|
|
9017
9211
|
* @default 'none'
|
|
9018
9212
|
*/
|
|
9019
9213
|
this.border = 'none';
|
|
9020
|
-
this.contentMaxHeight = '
|
|
9214
|
+
this.contentMaxHeight = 'none';
|
|
9215
|
+
/**
|
|
9216
|
+
* Tracks whether the border prop was explicitly set by the user
|
|
9217
|
+
*/
|
|
9218
|
+
this.userSetBorder = false;
|
|
9219
|
+
}
|
|
9220
|
+
componentWillLoad() {
|
|
9221
|
+
// Check if border was explicitly set via attribute or property
|
|
9222
|
+
const borderAttr = this.el.getAttribute('border');
|
|
9223
|
+
const hasBorderAttribute = borderAttr !== null;
|
|
9224
|
+
// If border attribute exists or border prop is not the default, user set it
|
|
9225
|
+
this.userSetBorder = hasBorderAttribute || this.border !== 'none';
|
|
9021
9226
|
}
|
|
9022
9227
|
componentDidLoad() {
|
|
9023
|
-
const slotContent = this.el.firstElementChild;
|
|
9024
|
-
const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;
|
|
9025
|
-
this.border = isScrollable ? 'both' : 'none';
|
|
9026
9228
|
this.calculateMaxHeight();
|
|
9027
|
-
|
|
9229
|
+
// Set up resize listener
|
|
9230
|
+
window.addEventListener('resize', this.handleResize.bind(this));
|
|
9231
|
+
// Only set up scroll listener for border updates if borders are managed automatically
|
|
9232
|
+
if (!this.userSetBorder) {
|
|
9233
|
+
setTimeout(() => {
|
|
9234
|
+
// The scroll happens on the component element itself (this.el), not the inner div
|
|
9235
|
+
console.log('Setting up scroll listener on component element:', this.el);
|
|
9236
|
+
this.el.addEventListener('scroll', this.handleScroll.bind(this));
|
|
9237
|
+
// Initial border update after everything is set up
|
|
9238
|
+
setTimeout(() => this.updateBorders(), 100);
|
|
9239
|
+
}, 100);
|
|
9240
|
+
}
|
|
9028
9241
|
}
|
|
9029
9242
|
disconnectedCallback() {
|
|
9030
|
-
window.removeEventListener('resize', this.
|
|
9243
|
+
window.removeEventListener('resize', this.handleResize.bind(this));
|
|
9244
|
+
// Clean up scroll listener only if it was set up
|
|
9245
|
+
if (!this.userSetBorder) {
|
|
9246
|
+
this.el.removeEventListener('scroll', this.handleScroll.bind(this));
|
|
9247
|
+
}
|
|
9031
9248
|
if (this.mutationObserver) {
|
|
9032
9249
|
this.mutationObserver.disconnect();
|
|
9033
9250
|
}
|
|
9034
9251
|
}
|
|
9252
|
+
/**
|
|
9253
|
+
* Handle scroll events
|
|
9254
|
+
*/
|
|
9255
|
+
handleScroll() {
|
|
9256
|
+
console.log('Scroll event fired!');
|
|
9257
|
+
this.updateBorders();
|
|
9258
|
+
}
|
|
9259
|
+
/**
|
|
9260
|
+
* Handle resize events
|
|
9261
|
+
*/
|
|
9262
|
+
handleResize() {
|
|
9263
|
+
this.calculateMaxHeight();
|
|
9264
|
+
// Update borders after resize as content scrollability might change
|
|
9265
|
+
setTimeout(() => this.updateBorders(), 50);
|
|
9266
|
+
}
|
|
9267
|
+
/**
|
|
9268
|
+
* Updates border visibility based on scroll state (only if not user-defined)
|
|
9269
|
+
*/
|
|
9270
|
+
updateBorders() {
|
|
9271
|
+
// If user explicitly set a border value, don't override it
|
|
9272
|
+
if (this.userSetBorder) {
|
|
9273
|
+
return;
|
|
9274
|
+
}
|
|
9275
|
+
// Find the modal element (parent of this component)
|
|
9276
|
+
const modalElement = this.el.closest('pds-modal');
|
|
9277
|
+
if (!modalElement)
|
|
9278
|
+
return;
|
|
9279
|
+
// Only apply border logic if modal is scrollable
|
|
9280
|
+
const isModalScrollable = modalElement.scrollable !== false;
|
|
9281
|
+
if (!isModalScrollable) {
|
|
9282
|
+
this.border = 'none';
|
|
9283
|
+
return;
|
|
9284
|
+
}
|
|
9285
|
+
// The scrollable element is the component itself (this.el), not the inner div
|
|
9286
|
+
const scrollableElement = this.el;
|
|
9287
|
+
// Check if content is actually scrollable
|
|
9288
|
+
const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;
|
|
9289
|
+
if (!isContentScrollable) {
|
|
9290
|
+
this.border = 'none';
|
|
9291
|
+
return;
|
|
9292
|
+
}
|
|
9293
|
+
// Determine border position based on scroll position
|
|
9294
|
+
const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
|
|
9295
|
+
const scrollBottom = scrollTop + clientHeight;
|
|
9296
|
+
// More generous tolerance for scroll detection (3px instead of 1px)
|
|
9297
|
+
const tolerance = 3;
|
|
9298
|
+
const isAtTop = scrollTop <= tolerance;
|
|
9299
|
+
const isAtBottom = scrollBottom >= scrollHeight - tolerance;
|
|
9300
|
+
// Debug logging (can be removed later)
|
|
9301
|
+
console.log('Border Debug:', {
|
|
9302
|
+
scrollTop,
|
|
9303
|
+
scrollHeight,
|
|
9304
|
+
clientHeight,
|
|
9305
|
+
scrollBottom,
|
|
9306
|
+
isAtTop,
|
|
9307
|
+
isAtBottom,
|
|
9308
|
+
currentBorder: this.border
|
|
9309
|
+
});
|
|
9310
|
+
if (isAtTop && isAtBottom) {
|
|
9311
|
+
// Content fits exactly, no borders needed
|
|
9312
|
+
this.border = 'none';
|
|
9313
|
+
console.log('Content fits exactly, no borders needed');
|
|
9314
|
+
}
|
|
9315
|
+
else if (isAtTop && !isAtBottom) {
|
|
9316
|
+
// At top, show bottom border only
|
|
9317
|
+
this.border = 'bottom';
|
|
9318
|
+
console.log('At top, show bottom border only');
|
|
9319
|
+
}
|
|
9320
|
+
else if (!isAtTop && isAtBottom) {
|
|
9321
|
+
// At bottom, show top border only
|
|
9322
|
+
this.border = 'top';
|
|
9323
|
+
console.log('At bottom, show top border only');
|
|
9324
|
+
}
|
|
9325
|
+
else {
|
|
9326
|
+
// In middle, show both borders
|
|
9327
|
+
this.border = 'both';
|
|
9328
|
+
console.log('In middle, show both borders');
|
|
9329
|
+
}
|
|
9330
|
+
}
|
|
9035
9331
|
/**
|
|
9036
9332
|
* Calculates the max-height based on header and footer heights
|
|
9037
9333
|
*/
|
|
@@ -9040,7 +9336,18 @@ class PdsModalContent {
|
|
|
9040
9336
|
const modalElement = this.el.closest('pds-modal');
|
|
9041
9337
|
if (!modalElement)
|
|
9042
9338
|
return;
|
|
9339
|
+
// Check if the parent modal is scrollable
|
|
9340
|
+
const isScrollable = modalElement.scrollable !== false;
|
|
9043
9341
|
setTimeout(() => {
|
|
9342
|
+
// If modal is not scrollable, don't apply max-height constraints
|
|
9343
|
+
if (!isScrollable) {
|
|
9344
|
+
this.contentMaxHeight = 'none';
|
|
9345
|
+
const contentElement = this.el.querySelector('.pds-modal-content');
|
|
9346
|
+
if (contentElement) {
|
|
9347
|
+
contentElement.style.maxHeight = 'none';
|
|
9348
|
+
}
|
|
9349
|
+
return;
|
|
9350
|
+
}
|
|
9044
9351
|
// Find header and footer elements
|
|
9045
9352
|
const headerElement = modalElement.querySelector('pds-modal-header');
|
|
9046
9353
|
const footerElement = modalElement.querySelector('pds-modal-footer');
|
|
@@ -9065,8 +9372,10 @@ class PdsModalContent {
|
|
|
9065
9372
|
}
|
|
9066
9373
|
}
|
|
9067
9374
|
else {
|
|
9068
|
-
this.contentMaxHeight = '
|
|
9375
|
+
this.contentMaxHeight = 'none'; // Default fallback
|
|
9069
9376
|
}
|
|
9377
|
+
// Update borders after height calculations with longer delay
|
|
9378
|
+
setTimeout(() => this.updateBorders(), 150);
|
|
9070
9379
|
}, 100); // Delay to ensure DOM is fully rendered
|
|
9071
9380
|
// Set up mutation observer if not already done
|
|
9072
9381
|
if (!this.mutationObserver && modalElement) {
|
|
@@ -9083,10 +9392,12 @@ class PdsModalContent {
|
|
|
9083
9392
|
}
|
|
9084
9393
|
}
|
|
9085
9394
|
render() {
|
|
9086
|
-
|
|
9395
|
+
// Only apply max-height style if it's not 'none'
|
|
9396
|
+
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
9397
|
+
return (hAsync(Host, { key: '545e18de51a427ac59a33dece5054ec700163ae5' }, hAsync("div", { key: '3e418670869f63d0251348f7787bca60e0057c91', class: {
|
|
9087
9398
|
'pds-modal-content': true,
|
|
9088
9399
|
[`pds-modal-content--border-${this.border}`]: true
|
|
9089
|
-
}, style:
|
|
9400
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'f312a2ff4b3249637d50536e12cf8ad94db5eff2' }))));
|
|
9090
9401
|
}
|
|
9091
9402
|
get el() { return getElement(this); }
|
|
9092
9403
|
static get style() { return pdsModalContentCss; }
|
|
@@ -13455,7 +13766,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
|
|
|
13455
13766
|
|
|
13456
13767
|
const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
|
|
13457
13768
|
|
|
13458
|
-
const pdsTextareaCss = ":host{display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-
|
|
13769
|
+
const pdsTextareaCss = ":host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-readonly);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:2}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
13459
13770
|
|
|
13460
13771
|
/**
|
|
13461
13772
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -13516,9 +13827,21 @@ class PdsTextarea {
|
|
|
13516
13827
|
this.onInput = (ev) => {
|
|
13517
13828
|
const input = ev.target;
|
|
13518
13829
|
if (input) {
|
|
13830
|
+
// Handle maxLength validation
|
|
13831
|
+
if (this.maxLength && input.value.length > this.maxLength) {
|
|
13832
|
+
// Prevent input beyond maxLength
|
|
13833
|
+
input.value = input.value.substring(0, this.maxLength);
|
|
13834
|
+
}
|
|
13519
13835
|
this.value = input.value || '';
|
|
13520
13836
|
}
|
|
13521
13837
|
this.emitInputChange(ev);
|
|
13838
|
+
// Update counter position when content changes
|
|
13839
|
+
if (this.maxLength && typeof ResizeObserver !== 'undefined') {
|
|
13840
|
+
// Use requestAnimationFrame to ensure DOM is updated
|
|
13841
|
+
requestAnimationFrame(() => {
|
|
13842
|
+
this.updateCharacterCounterPosition();
|
|
13843
|
+
});
|
|
13844
|
+
}
|
|
13522
13845
|
};
|
|
13523
13846
|
this.onTextareaChange = (ev) => {
|
|
13524
13847
|
this.emitValueChange(ev);
|
|
@@ -13548,6 +13871,24 @@ class PdsTextarea {
|
|
|
13548
13871
|
}
|
|
13549
13872
|
// Update form value for Form Associated Custom Elements API
|
|
13550
13873
|
this.updateFormValue();
|
|
13874
|
+
// Update character counter position in case content changes affect sizing
|
|
13875
|
+
if (this.maxLength && typeof ResizeObserver !== 'undefined') {
|
|
13876
|
+
this.updateCharacterCounterPosition();
|
|
13877
|
+
}
|
|
13878
|
+
}
|
|
13879
|
+
maxLengthChanged() {
|
|
13880
|
+
// Setup or teardown ResizeObserver based on maxLength
|
|
13881
|
+
if (this.resizeObserver) {
|
|
13882
|
+
this.resizeObserver.disconnect();
|
|
13883
|
+
}
|
|
13884
|
+
if (this.maxLength && this.nativeTextarea) {
|
|
13885
|
+
this.setupResizeObserver();
|
|
13886
|
+
}
|
|
13887
|
+
// Update ElementInternals validity when maxLength changes
|
|
13888
|
+
if (this.internals && this.internals.setValidity && this.nativeTextarea) {
|
|
13889
|
+
const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);
|
|
13890
|
+
this.internals.setValidity({ tooLong: isTooLong }, isTooLong ? 'Value exceeds maxLength' : '', this.nativeTextarea);
|
|
13891
|
+
}
|
|
13551
13892
|
}
|
|
13552
13893
|
/**
|
|
13553
13894
|
* Emits an `pdsInput` event.
|
|
@@ -13585,6 +13926,12 @@ class PdsTextarea {
|
|
|
13585
13926
|
this.internals = this.el.attachInternals();
|
|
13586
13927
|
}
|
|
13587
13928
|
}
|
|
13929
|
+
disconnectedCallback() {
|
|
13930
|
+
// Clean up ResizeObserver
|
|
13931
|
+
if (this.resizeObserver) {
|
|
13932
|
+
this.resizeObserver.disconnect();
|
|
13933
|
+
}
|
|
13934
|
+
}
|
|
13588
13935
|
componentWillLoad() {
|
|
13589
13936
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el));
|
|
13590
13937
|
this.hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -13593,6 +13940,71 @@ class PdsTextarea {
|
|
|
13593
13940
|
this.originalPdsInput = this.pdsInput;
|
|
13594
13941
|
// Set initial form value
|
|
13595
13942
|
this.updateFormValue();
|
|
13943
|
+
// Setup ResizeObserver for character counter positioning
|
|
13944
|
+
this.setupResizeObserver();
|
|
13945
|
+
}
|
|
13946
|
+
/**
|
|
13947
|
+
* Sets up ResizeObserver to track textarea resize for character counter positioning
|
|
13948
|
+
*/
|
|
13949
|
+
setupResizeObserver() {
|
|
13950
|
+
if (!this.maxLength || !this.nativeTextarea)
|
|
13951
|
+
return;
|
|
13952
|
+
// ResizeObserver may not be available in test environments
|
|
13953
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
13954
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
13955
|
+
// Use requestAnimationFrame to ensure DOM updates are complete
|
|
13956
|
+
requestAnimationFrame(() => {
|
|
13957
|
+
this.updateCharacterCounterPosition();
|
|
13958
|
+
});
|
|
13959
|
+
});
|
|
13960
|
+
this.resizeObserver.observe(this.nativeTextarea);
|
|
13961
|
+
// Initial positioning with a small delay to ensure counter is rendered
|
|
13962
|
+
requestAnimationFrame(() => {
|
|
13963
|
+
this.updateCharacterCounterPosition();
|
|
13964
|
+
});
|
|
13965
|
+
}
|
|
13966
|
+
}
|
|
13967
|
+
/**
|
|
13968
|
+
* Updates character counter position to stay within textarea boundaries during resize
|
|
13969
|
+
*/
|
|
13970
|
+
updateCharacterCounterPosition() {
|
|
13971
|
+
if (!this.characterCounter || !this.nativeTextarea)
|
|
13972
|
+
return;
|
|
13973
|
+
// Skip positioning in test environments where ResizeObserver isn't available
|
|
13974
|
+
if (typeof ResizeObserver === 'undefined')
|
|
13975
|
+
return;
|
|
13976
|
+
// Ensure the character counter has been rendered and has dimensions
|
|
13977
|
+
if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {
|
|
13978
|
+
// Counter not ready or component hidden - return and let resize/input observers handle positioning later
|
|
13979
|
+
return;
|
|
13980
|
+
}
|
|
13981
|
+
// Position based on textarea's actual dimensions (which change during manual resize)
|
|
13982
|
+
const textareaWidth = this.nativeTextarea.offsetWidth;
|
|
13983
|
+
const textareaHeight = this.nativeTextarea.offsetHeight;
|
|
13984
|
+
const counterWidth = this.characterCounter.offsetWidth;
|
|
13985
|
+
const counterHeight = this.characterCounter.offsetHeight;
|
|
13986
|
+
// Calculate position within textarea boundaries with padding from edges
|
|
13987
|
+
const rightPosition = textareaWidth - counterWidth - 8;
|
|
13988
|
+
const bottomPosition = textareaHeight - counterHeight - 8;
|
|
13989
|
+
// Ensure counter stays within textarea boundaries even when resized very small
|
|
13990
|
+
const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));
|
|
13991
|
+
const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));
|
|
13992
|
+
// Apply absolute positioning within the field wrapper
|
|
13993
|
+
this.characterCounter.style.position = 'absolute';
|
|
13994
|
+
this.characterCounter.style.left = `${finalLeft}px`;
|
|
13995
|
+
this.characterCounter.style.top = `${finalTop}px`;
|
|
13996
|
+
this.characterCounter.style.right = 'auto';
|
|
13997
|
+
this.characterCounter.style.bottom = 'auto';
|
|
13998
|
+
}
|
|
13999
|
+
/**
|
|
14000
|
+
* Renders the character counter when maxLength is set
|
|
14001
|
+
*/
|
|
14002
|
+
renderCharacterCounter() {
|
|
14003
|
+
if (!this.maxLength) {
|
|
14004
|
+
return null;
|
|
14005
|
+
}
|
|
14006
|
+
const currentLength = this.getValue().length;
|
|
14007
|
+
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
|
|
13596
14008
|
}
|
|
13597
14009
|
renderAction() {
|
|
13598
14010
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -13644,16 +14056,17 @@ class PdsTextarea {
|
|
|
13644
14056
|
}
|
|
13645
14057
|
render() {
|
|
13646
14058
|
const value = this.getValue();
|
|
13647
|
-
return (hAsync(Host, { key: '
|
|
13648
|
-
hAsync("div", { key: '
|
|
13649
|
-
hAsync("p", { key: '
|
|
13650
|
-
hAsync("p", { key: '
|
|
14059
|
+
return (hAsync(Host, { key: 'e1e17543442fcd240498b7f56ddb86e35ac1d770', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '5a69f6b67dcba5107aa9150fc87543e7638933bb', class: "pds-textarea" }, this.label &&
|
|
14060
|
+
hAsync("div", { key: '027592bca1595a85cdf24e8ab4201e6483fee80c', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '815f18177b34893b9e76d8c0db7baa6b0f3400c5', htmlFor: this.componentId }, hAsync("span", { key: '5fe5e5f984558c409d3a1c3e9fdb966038fcd4c4', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: 'd1d95ef8becd9648c8becc2fe6797432ed53ca81', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'd307adc2e75a381aae4dda4ad207bf3a670b7678', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
14061
|
+
hAsync("p", { key: 'c7b68b10f0362025d90a902cbc6d2d741e579935', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
14062
|
+
hAsync("p", { key: '8fd179c3c8cf9c9d5ee7252d30357072a2f55090', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '3e3de603c035ae3d71be28132d55992eadda9a54', icon: danger, size: "small" }), this.errorMessage))));
|
|
13651
14063
|
}
|
|
13652
14064
|
static get formAssociated() { return true; }
|
|
13653
14065
|
get el() { return getElement(this); }
|
|
13654
14066
|
static get watchers() { return {
|
|
13655
14067
|
"debounce": ["debounceChanged"],
|
|
13656
|
-
"value": ["valueChanged"]
|
|
14068
|
+
"value": ["valueChanged"],
|
|
14069
|
+
"maxLength": ["maxLengthChanged"]
|
|
13657
14070
|
}; }
|
|
13658
14071
|
static get style() { return labelCss + (pdsInputTokensCss + pdsTextareaCss); }
|
|
13659
14072
|
static get cmpMeta() { return {
|
|
@@ -13674,6 +14087,7 @@ class PdsTextarea {
|
|
|
13674
14087
|
"readonly": [4],
|
|
13675
14088
|
"required": [4],
|
|
13676
14089
|
"rows": [2],
|
|
14090
|
+
"maxLength": [514, "max-length"],
|
|
13677
14091
|
"value": [1025],
|
|
13678
14092
|
"hasFocus": [32],
|
|
13679
14093
|
"hasAction": [32],
|
|
@@ -13681,7 +14095,7 @@ class PdsTextarea {
|
|
|
13681
14095
|
},
|
|
13682
14096
|
"$listeners$": undefined,
|
|
13683
14097
|
"$lazyBundleId$": "-",
|
|
13684
|
-
"$attrsToReflect$": []
|
|
14098
|
+
"$attrsToReflect$": [["maxLength", "max-length"]]
|
|
13685
14099
|
}; }
|
|
13686
14100
|
}
|
|
13687
14101
|
|
|
@@ -13767,13 +14181,13 @@ class PdsToast {
|
|
|
13767
14181
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
13768
14182
|
}
|
|
13769
14183
|
render() {
|
|
13770
|
-
return (hAsync(Host, { key: '
|
|
14184
|
+
return (hAsync(Host, { key: 'cf3944ff76627caaa30bc38fdfa44357488a6194', hidden: !this.isVisible }, hAsync("div", { key: '39ce25ec4ffcaf23f565ece7e54fd4ef8a08abb5', class: {
|
|
13771
14185
|
'pds-toast': true,
|
|
13772
14186
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
13773
14187
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
13774
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
14188
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: 'cc637017d922c88a2f025e01a55294c7abbbd0da', class: "pds-toast__message" }, hAsync("slot", { key: 'e0dbea12cefc01a377fc4f9f8ec6898d2f10ea99' })), this.dismissible && (hAsync("button", { key: 'e3293bd0d9678052320f0261ed95084400789804', type: "button", class: "pds-toast__button", onClick: () => {
|
|
13775
14189
|
this.dismiss();
|
|
13776
|
-
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '
|
|
14190
|
+
}, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: '8a41d2c7fc123d5cd854212fca42eae344834d92', name: "remove" }))))));
|
|
13777
14191
|
}
|
|
13778
14192
|
static get watchers() { return {
|
|
13779
14193
|
"duration": ["handleDurationChange"]
|
|
@@ -14113,9 +14527,9 @@ class PdsTooltip {
|
|
|
14113
14527
|
}
|
|
14114
14528
|
render() {
|
|
14115
14529
|
const hostId = this.componentId || undefined;
|
|
14116
|
-
return (hAsync(Host, { key: '
|
|
14530
|
+
return (hAsync(Host, { key: '6741acebcb973fd24d59a95d75aefd51fe653426', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: 'f1a51aa6a9333e899d4eb8168b9ff171a463651f', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
14117
14531
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
14118
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
14532
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'e48e5fb75d6156d13e3872b8ee12699139cef576' })), hAsync("div", { key: 'ed38389bf634be3014b26c9381a389482cee2f80', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '2e3d2a800aba9959c5b7fc3ed4397f7789b6f383', name: "content" }))));
|
|
14119
14533
|
}
|
|
14120
14534
|
get el() { return getElement(this); }
|
|
14121
14535
|
static get watchers() { return {
|