npm - @pine-ds/core - Versions diffs - 3.5.2 → 3.6.0 - Mend

@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.

Files changed (175) hide show

package/dist/collection/components/pds-box/pds-box.css CHANGED Viewed

@@ -1813,4 +1813,1329 @@ pds-box {
   .pds-align-self-xl-stretch {
     align-self: stretch;
   }
+}
+@media (max-width: 575px) {
+  .pds-box--wrap-xs {
+    flex-wrap: wrap;
+  }
+}
+@media (min-width: 576px) {
+  .pds-box--wrap-sm {
+    flex-wrap: wrap;
+  }
+}
+@media (min-width: 768px) {
+  .pds-box--wrap-md {
+    flex-wrap: wrap;
+  }
+}
+@media (min-width: 992px) {
+  .pds-box--wrap-lg {
+    flex-wrap: wrap;
+  }
+}
+@media (min-width: 1200px) {
+  .pds-box--wrap-xl {
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 575px) {
+  .pds-box--auto-xs {
+    flex: 0 0 var(--sizing-min-width-box, fit-content);
+    min-width: auto;
+    width: auto;
+  }
+}
+@media (min-width: 576px) {
+  .pds-box--auto-sm {
+    flex: 0 0 var(--sizing-min-width-box, fit-content);
+    min-width: auto;
+    width: auto;
+  }
+}
+@media (min-width: 768px) {
+  .pds-box--auto-md {
+    flex: 0 0 var(--sizing-min-width-box, fit-content);
+    min-width: auto;
+    width: auto;
+  }
+}
+@media (min-width: 992px) {
+  .pds-box--auto-lg {
+    flex: 0 0 var(--sizing-min-width-box, fit-content);
+    min-width: auto;
+    width: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .pds-box--auto-xl {
+    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 {
+    margin-block-start: 0;
+  }
+  .pds-margin-inline-start-xs-none {
+    margin-inline-start: 0;
+  }
+  .pds-margin-inline-end-xs-none {
+    margin-inline-end: 0;
+  }
+  .pds-margin-block-end-xs-none {
+    margin-block-end: 0;
+  }
+  .pds-margin-block-start-xs-xxs {
+    margin-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-start-xs-xxs {
+    margin-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-end-xs-xxs {
+    margin-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-end-xs-xxs {
+    margin-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-start-xs-xs {
+    margin-block-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-start-xs-xs {
+    margin-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-end-xs-xs {
+    margin-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-end-xs-xs {
+    margin-block-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-start-xs-sm {
+    margin-block-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-start-xs-sm {
+    margin-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-end-xs-sm {
+    margin-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-end-xs-sm {
+    margin-block-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-start-xs-md {
+    margin-block-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-start-xs-md {
+    margin-inline-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-end-xs-md {
+    margin-inline-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-end-xs-md {
+    margin-block-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-start-xs-lg {
+    margin-block-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-start-xs-lg {
+    margin-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-end-xs-lg {
+    margin-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-end-xs-lg {
+    margin-block-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-start-xs-xl {
+    margin-block-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-start-xs-xl {
+    margin-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-end-xs-xl {
+    margin-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-end-xs-xl {
+    margin-block-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-start-xs-xxl {
+    margin-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-start-xs-xxl {
+    margin-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-end-xs-xxl {
+    margin-inline-end: var(--pine-dimension-2xl);
+  }
+  .pds-margin-block-end-xs-xxl {
+    margin-block-end: var(--pine-dimension-2xl);
+  }
+}
+@media (min-width: 576px) {
+  .pds-margin-block-start-sm-none {
+    margin-block-start: 0;
+  }
+  .pds-margin-inline-start-sm-none {
+    margin-inline-start: 0;
+  }
+  .pds-margin-inline-end-sm-none {
+    margin-inline-end: 0;
+  }
+  .pds-margin-block-end-sm-none {
+    margin-block-end: 0;
+  }
+  .pds-margin-block-start-sm-xxs {
+    margin-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-start-sm-xxs {
+    margin-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-end-sm-xxs {
+    margin-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-end-sm-xxs {
+    margin-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-start-sm-xs {
+    margin-block-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-start-sm-xs {
+    margin-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-end-sm-xs {
+    margin-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-end-sm-xs {
+    margin-block-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-start-sm-sm {
+    margin-block-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-start-sm-sm {
+    margin-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-end-sm-sm {
+    margin-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-end-sm-sm {
+    margin-block-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-start-sm-md {
+    margin-block-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-start-sm-md {
+    margin-inline-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-end-sm-md {
+    margin-inline-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-end-sm-md {
+    margin-block-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-start-sm-lg {
+    margin-block-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-start-sm-lg {
+    margin-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-end-sm-lg {
+    margin-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-end-sm-lg {
+    margin-block-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-start-sm-xl {
+    margin-block-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-start-sm-xl {
+    margin-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-end-sm-xl {
+    margin-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-end-sm-xl {
+    margin-block-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-start-sm-xxl {
+    margin-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-start-sm-xxl {
+    margin-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-end-sm-xxl {
+    margin-inline-end: var(--pine-dimension-2xl);
+  }
+  .pds-margin-block-end-sm-xxl {
+    margin-block-end: var(--pine-dimension-2xl);
+  }
+}
+@media (min-width: 768px) {
+  .pds-margin-block-start-md-none {
+    margin-block-start: 0;
+  }
+  .pds-margin-inline-start-md-none {
+    margin-inline-start: 0;
+  }
+  .pds-margin-inline-end-md-none {
+    margin-inline-end: 0;
+  }
+  .pds-margin-block-end-md-none {
+    margin-block-end: 0;
+  }
+  .pds-margin-block-start-md-xxs {
+    margin-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-start-md-xxs {
+    margin-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-end-md-xxs {
+    margin-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-end-md-xxs {
+    margin-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-start-md-xs {
+    margin-block-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-start-md-xs {
+    margin-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-end-md-xs {
+    margin-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-end-md-xs {
+    margin-block-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-start-md-sm {
+    margin-block-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-start-md-sm {
+    margin-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-end-md-sm {
+    margin-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-end-md-sm {
+    margin-block-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-start-md-md {
+    margin-block-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-start-md-md {
+    margin-inline-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-end-md-md {
+    margin-inline-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-end-md-md {
+    margin-block-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-start-md-lg {
+    margin-block-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-start-md-lg {
+    margin-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-end-md-lg {
+    margin-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-end-md-lg {
+    margin-block-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-start-md-xl {
+    margin-block-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-start-md-xl {
+    margin-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-end-md-xl {
+    margin-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-end-md-xl {
+    margin-block-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-start-md-xxl {
+    margin-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-start-md-xxl {
+    margin-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-end-md-xxl {
+    margin-inline-end: var(--pine-dimension-2xl);
+  }
+  .pds-margin-block-end-md-xxl {
+    margin-block-end: var(--pine-dimension-2xl);
+  }
+}
+@media (min-width: 992px) {
+  .pds-margin-block-start-lg-none {
+    margin-block-start: 0;
+  }
+  .pds-margin-inline-start-lg-none {
+    margin-inline-start: 0;
+  }
+  .pds-margin-inline-end-lg-none {
+    margin-inline-end: 0;
+  }
+  .pds-margin-block-end-lg-none {
+    margin-block-end: 0;
+  }
+  .pds-margin-block-start-lg-xxs {
+    margin-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-start-lg-xxs {
+    margin-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-end-lg-xxs {
+    margin-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-end-lg-xxs {
+    margin-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-start-lg-xs {
+    margin-block-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-start-lg-xs {
+    margin-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-end-lg-xs {
+    margin-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-end-lg-xs {
+    margin-block-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-start-lg-sm {
+    margin-block-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-start-lg-sm {
+    margin-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-end-lg-sm {
+    margin-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-end-lg-sm {
+    margin-block-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-start-lg-md {
+    margin-block-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-start-lg-md {
+    margin-inline-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-end-lg-md {
+    margin-inline-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-end-lg-md {
+    margin-block-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-start-lg-lg {
+    margin-block-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-start-lg-lg {
+    margin-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-end-lg-lg {
+    margin-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-end-lg-lg {
+    margin-block-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-start-lg-xl {
+    margin-block-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-start-lg-xl {
+    margin-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-end-lg-xl {
+    margin-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-end-lg-xl {
+    margin-block-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-start-lg-xxl {
+    margin-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-start-lg-xxl {
+    margin-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-end-lg-xxl {
+    margin-inline-end: var(--pine-dimension-2xl);
+  }
+  .pds-margin-block-end-lg-xxl {
+    margin-block-end: var(--pine-dimension-2xl);
+  }
+}
+@media (min-width: 1200px) {
+  .pds-margin-block-start-xl-none {
+    margin-block-start: 0;
+  }
+  .pds-margin-inline-start-xl-none {
+    margin-inline-start: 0;
+  }
+  .pds-margin-inline-end-xl-none {
+    margin-inline-end: 0;
+  }
+  .pds-margin-block-end-xl-none {
+    margin-block-end: 0;
+  }
+  .pds-margin-block-start-xl-xxs {
+    margin-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-start-xl-xxs {
+    margin-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-margin-inline-end-xl-xxs {
+    margin-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-end-xl-xxs {
+    margin-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-margin-block-start-xl-xs {
+    margin-block-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-start-xl-xs {
+    margin-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-margin-inline-end-xl-xs {
+    margin-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-end-xl-xs {
+    margin-block-end: var(--pine-dimension-xs);
+  }
+  .pds-margin-block-start-xl-sm {
+    margin-block-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-start-xl-sm {
+    margin-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-margin-inline-end-xl-sm {
+    margin-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-end-xl-sm {
+    margin-block-end: var(--pine-dimension-sm);
+  }
+  .pds-margin-block-start-xl-md {
+    margin-block-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-start-xl-md {
+    margin-inline-start: var(--pine-dimension-md);
+  }
+  .pds-margin-inline-end-xl-md {
+    margin-inline-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-end-xl-md {
+    margin-block-end: var(--pine-dimension-md);
+  }
+  .pds-margin-block-start-xl-lg {
+    margin-block-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-start-xl-lg {
+    margin-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-margin-inline-end-xl-lg {
+    margin-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-end-xl-lg {
+    margin-block-end: var(--pine-dimension-lg);
+  }
+  .pds-margin-block-start-xl-xl {
+    margin-block-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-start-xl-xl {
+    margin-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-margin-inline-end-xl-xl {
+    margin-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-end-xl-xl {
+    margin-block-end: var(--pine-dimension-xl);
+  }
+  .pds-margin-block-start-xl-xxl {
+    margin-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-start-xl-xxl {
+    margin-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-margin-inline-end-xl-xxl {
+    margin-inline-end: var(--pine-dimension-2xl);
+  }
+  .pds-margin-block-end-xl-xxl {
+    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 {
+    padding-block-start: var(--pine-dimension-none);
+  }
+  .pds-padding-block-end-xs-none {
+    padding-block-end: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-start-xs-none {
+    padding-inline-start: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-end-xs-none {
+    padding-inline-end: var(--pine-dimension-none);
+  }
+  .pds-padding-xs-xxs {
+    padding: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-start-xs-xxs {
+    padding-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-end-xs-xxs {
+    padding-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-start-xs-xxs {
+    padding-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-end-xs-xxs {
+    padding-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-xs-xs {
+    padding: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-start-xs-xs {
+    padding-block-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-end-xs-xs {
+    padding-block-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-start-xs-xs {
+    padding-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-end-xs-xs {
+    padding-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-xs-sm {
+    padding: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-start-xs-sm {
+    padding-block-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-end-xs-sm {
+    padding-block-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-start-xs-sm {
+    padding-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-end-xs-sm {
+    padding-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-xs-md {
+    padding: var(--pine-dimension-md);
+  }
+  .pds-padding-block-start-xs-md {
+    padding-block-start: var(--pine-dimension-md);
+  }
+  .pds-padding-block-end-xs-md {
+    padding-block-end: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-start-xs-md {
+    padding-inline-start: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-end-xs-md {
+    padding-inline-end: var(--pine-dimension-md);
+  }
+  .pds-padding-xs-lg {
+    padding: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-start-xs-lg {
+    padding-block-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-end-xs-lg {
+    padding-block-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-start-xs-lg {
+    padding-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-end-xs-lg {
+    padding-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-xs-xl {
+    padding: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-start-xs-xl {
+    padding-block-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-end-xs-xl {
+    padding-block-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-start-xs-xl {
+    padding-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-end-xs-xl {
+    padding-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-xs-xxl {
+    padding: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-start-xs-xxl {
+    padding-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-end-xs-xxl {
+    padding-block-end: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-start-xs-xxl {
+    padding-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-end-xs-xxl {
+    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 {
+    padding-block-start: var(--pine-dimension-none);
+  }
+  .pds-padding-block-end-sm-none {
+    padding-block-end: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-start-sm-none {
+    padding-inline-start: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-end-sm-none {
+    padding-inline-end: var(--pine-dimension-none);
+  }
+  .pds-padding-sm-xxs {
+    padding: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-start-sm-xxs {
+    padding-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-end-sm-xxs {
+    padding-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-start-sm-xxs {
+    padding-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-end-sm-xxs {
+    padding-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-sm-xs {
+    padding: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-start-sm-xs {
+    padding-block-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-end-sm-xs {
+    padding-block-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-start-sm-xs {
+    padding-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-end-sm-xs {
+    padding-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-sm-sm {
+    padding: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-start-sm-sm {
+    padding-block-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-end-sm-sm {
+    padding-block-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-start-sm-sm {
+    padding-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-end-sm-sm {
+    padding-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-sm-md {
+    padding: var(--pine-dimension-md);
+  }
+  .pds-padding-block-start-sm-md {
+    padding-block-start: var(--pine-dimension-md);
+  }
+  .pds-padding-block-end-sm-md {
+    padding-block-end: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-start-sm-md {
+    padding-inline-start: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-end-sm-md {
+    padding-inline-end: var(--pine-dimension-md);
+  }
+  .pds-padding-sm-lg {
+    padding: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-start-sm-lg {
+    padding-block-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-end-sm-lg {
+    padding-block-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-start-sm-lg {
+    padding-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-end-sm-lg {
+    padding-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-sm-xl {
+    padding: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-start-sm-xl {
+    padding-block-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-end-sm-xl {
+    padding-block-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-start-sm-xl {
+    padding-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-end-sm-xl {
+    padding-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-sm-xxl {
+    padding: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-start-sm-xxl {
+    padding-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-end-sm-xxl {
+    padding-block-end: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-start-sm-xxl {
+    padding-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-end-sm-xxl {
+    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 {
+    padding-block-start: var(--pine-dimension-none);
+  }
+  .pds-padding-block-end-md-none {
+    padding-block-end: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-start-md-none {
+    padding-inline-start: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-end-md-none {
+    padding-inline-end: var(--pine-dimension-none);
+  }
+  .pds-padding-md-xxs {
+    padding: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-start-md-xxs {
+    padding-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-end-md-xxs {
+    padding-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-start-md-xxs {
+    padding-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-end-md-xxs {
+    padding-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-md-xs {
+    padding: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-start-md-xs {
+    padding-block-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-end-md-xs {
+    padding-block-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-start-md-xs {
+    padding-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-end-md-xs {
+    padding-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-md-sm {
+    padding: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-start-md-sm {
+    padding-block-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-end-md-sm {
+    padding-block-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-start-md-sm {
+    padding-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-end-md-sm {
+    padding-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-md-md {
+    padding: var(--pine-dimension-md);
+  }
+  .pds-padding-block-start-md-md {
+    padding-block-start: var(--pine-dimension-md);
+  }
+  .pds-padding-block-end-md-md {
+    padding-block-end: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-start-md-md {
+    padding-inline-start: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-end-md-md {
+    padding-inline-end: var(--pine-dimension-md);
+  }
+  .pds-padding-md-lg {
+    padding: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-start-md-lg {
+    padding-block-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-end-md-lg {
+    padding-block-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-start-md-lg {
+    padding-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-end-md-lg {
+    padding-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-md-xl {
+    padding: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-start-md-xl {
+    padding-block-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-end-md-xl {
+    padding-block-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-start-md-xl {
+    padding-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-end-md-xl {
+    padding-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-md-xxl {
+    padding: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-start-md-xxl {
+    padding-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-end-md-xxl {
+    padding-block-end: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-start-md-xxl {
+    padding-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-end-md-xxl {
+    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 {
+    padding-block-start: var(--pine-dimension-none);
+  }
+  .pds-padding-block-end-lg-none {
+    padding-block-end: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-start-lg-none {
+    padding-inline-start: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-end-lg-none {
+    padding-inline-end: var(--pine-dimension-none);
+  }
+  .pds-padding-lg-xxs {
+    padding: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-start-lg-xxs {
+    padding-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-end-lg-xxs {
+    padding-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-start-lg-xxs {
+    padding-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-end-lg-xxs {
+    padding-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-lg-xs {
+    padding: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-start-lg-xs {
+    padding-block-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-end-lg-xs {
+    padding-block-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-start-lg-xs {
+    padding-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-end-lg-xs {
+    padding-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-lg-sm {
+    padding: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-start-lg-sm {
+    padding-block-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-end-lg-sm {
+    padding-block-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-start-lg-sm {
+    padding-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-end-lg-sm {
+    padding-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-lg-md {
+    padding: var(--pine-dimension-md);
+  }
+  .pds-padding-block-start-lg-md {
+    padding-block-start: var(--pine-dimension-md);
+  }
+  .pds-padding-block-end-lg-md {
+    padding-block-end: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-start-lg-md {
+    padding-inline-start: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-end-lg-md {
+    padding-inline-end: var(--pine-dimension-md);
+  }
+  .pds-padding-lg-lg {
+    padding: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-start-lg-lg {
+    padding-block-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-end-lg-lg {
+    padding-block-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-start-lg-lg {
+    padding-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-end-lg-lg {
+    padding-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-lg-xl {
+    padding: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-start-lg-xl {
+    padding-block-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-end-lg-xl {
+    padding-block-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-start-lg-xl {
+    padding-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-end-lg-xl {
+    padding-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-lg-xxl {
+    padding: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-start-lg-xxl {
+    padding-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-end-lg-xxl {
+    padding-block-end: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-start-lg-xxl {
+    padding-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-end-lg-xxl {
+    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 {
+    padding-block-start: var(--pine-dimension-none);
+  }
+  .pds-padding-block-end-xl-none {
+    padding-block-end: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-start-xl-none {
+    padding-inline-start: var(--pine-dimension-none);
+  }
+  .pds-padding-inline-end-xl-none {
+    padding-inline-end: var(--pine-dimension-none);
+  }
+  .pds-padding-xl-xxs {
+    padding: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-start-xl-xxs {
+    padding-block-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-block-end-xl-xxs {
+    padding-block-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-start-xl-xxs {
+    padding-inline-start: var(--pine-dimension-2xs);
+  }
+  .pds-padding-inline-end-xl-xxs {
+    padding-inline-end: var(--pine-dimension-2xs);
+  }
+  .pds-padding-xl-xs {
+    padding: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-start-xl-xs {
+    padding-block-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-block-end-xl-xs {
+    padding-block-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-start-xl-xs {
+    padding-inline-start: var(--pine-dimension-xs);
+  }
+  .pds-padding-inline-end-xl-xs {
+    padding-inline-end: var(--pine-dimension-xs);
+  }
+  .pds-padding-xl-sm {
+    padding: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-start-xl-sm {
+    padding-block-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-block-end-xl-sm {
+    padding-block-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-start-xl-sm {
+    padding-inline-start: var(--pine-dimension-sm);
+  }
+  .pds-padding-inline-end-xl-sm {
+    padding-inline-end: var(--pine-dimension-sm);
+  }
+  .pds-padding-xl-md {
+    padding: var(--pine-dimension-md);
+  }
+  .pds-padding-block-start-xl-md {
+    padding-block-start: var(--pine-dimension-md);
+  }
+  .pds-padding-block-end-xl-md {
+    padding-block-end: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-start-xl-md {
+    padding-inline-start: var(--pine-dimension-md);
+  }
+  .pds-padding-inline-end-xl-md {
+    padding-inline-end: var(--pine-dimension-md);
+  }
+  .pds-padding-xl-lg {
+    padding: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-start-xl-lg {
+    padding-block-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-block-end-xl-lg {
+    padding-block-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-start-xl-lg {
+    padding-inline-start: var(--pine-dimension-lg);
+  }
+  .pds-padding-inline-end-xl-lg {
+    padding-inline-end: var(--pine-dimension-lg);
+  }
+  .pds-padding-xl-xl {
+    padding: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-start-xl-xl {
+    padding-block-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-block-end-xl-xl {
+    padding-block-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-start-xl-xl {
+    padding-inline-start: var(--pine-dimension-xl);
+  }
+  .pds-padding-inline-end-xl-xl {
+    padding-inline-end: var(--pine-dimension-xl);
+  }
+  .pds-padding-xl-xxl {
+    padding: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-start-xl-xxl {
+    padding-block-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-block-end-xl-xxl {
+    padding-block-end: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-start-xl-xxl {
+    padding-inline-start: var(--pine-dimension-2xl);
+  }
+  .pds-padding-inline-end-xl-xxl {
+    padding-inline-end: var(--pine-dimension-2xl);
+  }
 }