@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.4

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

@@ -0,0 +1,1234 @@
+pds-box {
+  --border-width-default: var(--pine-border-width-thin);
+  --color-background-box: inherit;
+  --color-border-box: inherit;
+  --sizing-min-height-box: none;
+  --sizing-min-width-box: none;
+  --spacing-gap-xxs: var(--pine-spacing-050);
+  --spacing-gap-xs: var(--pine-spacing-100);
+  --spacing-gap-sm: var(--pine-spacing-200);
+  --spacing-gap-md: var(--pine-spacing-300);
+  --spacing-gap-lg: var(--pine-spacing-450);
+  --spacing-gap-xl: var(--pine-spacing-600);
+  --spacing-gap-xxl: var(--pine-spacing-800);
+  display: block;
+}
+
+[class*=pds-box] {
+  background-color: var(--color-background-box);
+  box-sizing: border-box;
+  display: inline-flex;
+  min-height: var(--sizing-min-height-box);
+  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;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-xxs {
+  margin: 4px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-xs {
+  margin: 8px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-sm {
+  margin: 16px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-md {
+  margin: 24px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-lg {
+  margin: 36px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-xl {
+  margin: 48px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-xxl {
+  margin: 64px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-xxs {
+  margin-block-start: 4px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-xs {
+  margin-block-start: 8px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-sm {
+  margin-block-start: 16px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-md {
+  margin-block-start: 24px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-lg {
+  margin-block-start: 36px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-xl {
+  margin-block-start: 48px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-top-xxl {
+  margin-block-start: 64px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-xxs {
+  margin-inline-end: 4px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-xs {
+  margin-inline-end: 8px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-sm {
+  margin-inline-end: 16px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-md {
+  margin-inline-end: 24px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-lg {
+  margin-inline-end: 36px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-xl {
+  margin-inline-end: 48px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-right-xxl {
+  margin-inline-end: 64px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-xxs {
+  margin-inline-start: 4px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-xs {
+  margin-inline-start: 8px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-sm {
+  margin-inline-start: 16px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-md {
+  margin-inline-start: 24px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-lg {
+  margin-inline-start: 36px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-xl {
+  margin-inline-start: 48px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-left-xxl {
+  margin-inline-start: 64px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-xxs {
+  margin-block-end: 4px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-xs {
+  margin-block-end: 8px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-sm {
+  margin-block-end: 16px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-md {
+  margin-block-end: 24px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-lg {
+  margin-block-end: 36px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-xl {
+  margin-block-end: 48px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-spacing-bottom-xxl {
+  margin-block-end: 64px;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-0 {
+  margin-inline-start: 0;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-1 {
+  margin-inline-start: 8.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-2 {
+  margin-inline-start: 16.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-3 {
+  margin-inline-start: 25%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-4 {
+  margin-inline-start: 33.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-5 {
+  margin-inline-start: 41.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-6 {
+  margin-inline-start: 50%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-7 {
+  margin-inline-start: 58.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-8 {
+  margin-inline-start: 66.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-9 {
+  margin-inline-start: 75%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-10 {
+  margin-inline-start: 83.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-11 {
+  margin-inline-start: 91.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-offset-12 {
+  margin-inline-start: 100%;
+}
+
+@media (max-width: 575px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-0 {
+    margin-inline-start: 0;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-3 {
+    margin-inline-start: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-6 {
+    margin-inline-start: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-9 {
+    margin-inline-start: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xs-12 {
+    margin-inline-start: 100%;
+  }
+}
+@media (min-width: 576px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-0 {
+    margin-inline-start: 0;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-3 {
+    margin-inline-start: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-6 {
+    margin-inline-start: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-9 {
+    margin-inline-start: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-sm-12 {
+    margin-inline-start: 100%;
+  }
+}
+@media (min-width: 768px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-0 {
+    margin-inline-start: 0;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-3 {
+    margin-inline-start: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-6 {
+    margin-inline-start: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-9 {
+    margin-inline-start: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-md-12 {
+    margin-inline-start: 100%;
+  }
+}
+@media (min-width: 992px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-0 {
+    margin-inline-start: 0;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-3 {
+    margin-inline-start: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-6 {
+    margin-inline-start: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-9 {
+    margin-inline-start: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-lg-12 {
+    margin-inline-start: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-0 {
+    margin-inline-start: 0;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-3 {
+    margin-inline-start: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-6 {
+    margin-inline-start: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-9 {
+    margin-inline-start: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-offset-xl-12 {
+    margin-inline-start: 100%;
+  }
+}
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-0 {
+  display: none;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-1 {
+  display: inline-flex;
+  flex: 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-2 {
+  display: inline-flex;
+  flex: 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-3 {
+  display: inline-flex;
+  flex: 25%;
+  max-width: 25%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-4 {
+  display: inline-flex;
+  flex: 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-5 {
+  display: inline-flex;
+  flex: 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-6 {
+  display: inline-flex;
+  flex: 50%;
+  max-width: 50%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-7 {
+  display: inline-flex;
+  flex: 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-8 {
+  display: inline-flex;
+  flex: 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-9 {
+  display: inline-flex;
+  flex: 75%;
+  max-width: 75%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-10 {
+  display: inline-flex;
+  flex: 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-11 {
+  display: inline-flex;
+  flex: 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+
+/* stylelint-disable-next-line function-no-unknown */
+.pds-box-12 {
+  display: inline-flex;
+  flex: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 575px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-0 {
+    display: none;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-1 {
+    display: inline-flex;
+    flex: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-2 {
+    display: inline-flex;
+    flex: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-3 {
+    display: inline-flex;
+    flex: 25%;
+    max-width: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-4 {
+    display: inline-flex;
+    flex: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-5 {
+    display: inline-flex;
+    flex: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-6 {
+    display: inline-flex;
+    flex: 50%;
+    max-width: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-7 {
+    display: inline-flex;
+    flex: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-8 {
+    display: inline-flex;
+    flex: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-9 {
+    display: inline-flex;
+    flex: 75%;
+    max-width: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-10 {
+    display: inline-flex;
+    flex: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-11 {
+    display: inline-flex;
+    flex: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xs-12 {
+    display: inline-flex;
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 576px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-0 {
+    display: none;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-1 {
+    display: inline-flex;
+    flex: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-2 {
+    display: inline-flex;
+    flex: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-3 {
+    display: inline-flex;
+    flex: 25%;
+    max-width: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-4 {
+    display: inline-flex;
+    flex: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-5 {
+    display: inline-flex;
+    flex: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-6 {
+    display: inline-flex;
+    flex: 50%;
+    max-width: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-7 {
+    display: inline-flex;
+    flex: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-8 {
+    display: inline-flex;
+    flex: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-9 {
+    display: inline-flex;
+    flex: 75%;
+    max-width: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-10 {
+    display: inline-flex;
+    flex: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-11 {
+    display: inline-flex;
+    flex: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-sm-12 {
+    display: inline-flex;
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-0 {
+    display: none;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-1 {
+    display: inline-flex;
+    flex: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-2 {
+    display: inline-flex;
+    flex: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-3 {
+    display: inline-flex;
+    flex: 25%;
+    max-width: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-4 {
+    display: inline-flex;
+    flex: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-5 {
+    display: inline-flex;
+    flex: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-6 {
+    display: inline-flex;
+    flex: 50%;
+    max-width: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-7 {
+    display: inline-flex;
+    flex: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-8 {
+    display: inline-flex;
+    flex: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-9 {
+    display: inline-flex;
+    flex: 75%;
+    max-width: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-10 {
+    display: inline-flex;
+    flex: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-11 {
+    display: inline-flex;
+    flex: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-md-12 {
+    display: inline-flex;
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-0 {
+    display: none;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-1 {
+    display: inline-flex;
+    flex: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-2 {
+    display: inline-flex;
+    flex: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-3 {
+    display: inline-flex;
+    flex: 25%;
+    max-width: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-4 {
+    display: inline-flex;
+    flex: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-5 {
+    display: inline-flex;
+    flex: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-6 {
+    display: inline-flex;
+    flex: 50%;
+    max-width: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-7 {
+    display: inline-flex;
+    flex: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-8 {
+    display: inline-flex;
+    flex: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-9 {
+    display: inline-flex;
+    flex: 75%;
+    max-width: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-10 {
+    display: inline-flex;
+    flex: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-11 {
+    display: inline-flex;
+    flex: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-lg-12 {
+    display: inline-flex;
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-0 {
+    display: none;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-1 {
+    display: inline-flex;
+    flex: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-2 {
+    display: inline-flex;
+    flex: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-3 {
+    display: inline-flex;
+    flex: 25%;
+    max-width: 25%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-4 {
+    display: inline-flex;
+    flex: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-5 {
+    display: inline-flex;
+    flex: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-6 {
+    display: inline-flex;
+    flex: 50%;
+    max-width: 50%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-7 {
+    display: inline-flex;
+    flex: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-8 {
+    display: inline-flex;
+    flex: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-9 {
+    display: inline-flex;
+    flex: 75%;
+    max-width: 75%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-10 {
+    display: inline-flex;
+    flex: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-11 {
+    display: inline-flex;
+    flex: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  /* stylelint-disable-next-line function-no-unknown */
+  .pds-box-xl-12 {
+    display: inline-flex;
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+.pds-box {
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
+.pds-box--auto {
+  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: flex;
+}
+
+.pds-box--display-inline-flex {
+  display: inline-flex;
+}
+
+.pds-box--display-block {
+  display: block;
+}
+
+.pds-box--display-inline-block {
+  display: inline-block;
+}
+
+.pds-box--flex-none {
+  flex: 0 0 auto;
+}
+
+.pds-box--flex-grow {
+  flex: 1 1 auto;
+}
+
+.pds-box--flex-shrink {
+  flex: 0 0 auto;
+}
+
+.pds-border-radius-none {
+  border-radius: 0;
+}
+
+.pds-border-radius-xs {
+  border-radius: var(--pine-border-radius-xs);
+}
+
+.pds-border-radius-sm {
+  border-radius: var(--pine-border-radius-sm);
+}
+
+.pds-border-radius-md {
+  border-radius: var(--pine-border-radius-md);
+}
+
+.pds-border-radius-lg {
+  border-radius: var(--pine-border-radius-lg);
+}
+
+.pds-border-radius-circle {
+  border-radius: 50%;
+}
+
+.pds-shadow-xs {
+  box-shadow: var(--pine-box-shadow-xs);
+}
+
+.pds-shadow-sm {
+  box-shadow: var(--pine-box-shadow-sm);
+}
+
+.pds-shadow-md {
+  box-shadow: var(--pine-box-shadow-md);
+}
+
+.pds-shadow-lg {
+  box-shadow: var(--pine-box-shadow-lg);
+}
+
+.pds-box-gap-none {
+  gap: 0;
+}
+
+.pds-box-gap-xxs {
+  gap: var(--spacing-gap-xxs);
+}
+
+.pds-box-gap-xs {
+  gap: var(--spacing-gap-xs);
+}
+
+.pds-box-gap-sm {
+  gap: var(--spacing-gap-sm);
+}
+
+.pds-box-gap-md {
+  gap: var(--spacing-gap-md);
+}
+
+.pds-box-gap-lg {
+  gap: var(--spacing-gap-lg);
+}
+
+.pds-box-gap-xl {
+  gap: var(--spacing-gap-xl);
+}
+
+.pds-box-gap-xxl {
+  gap: var(--spacing-gap-xxl);
+}
+
+.pds-padding-none {
+  padding: 0;
+}
+
+.pds-padding-xxs {
+  padding: var(--spacing-gap-xxs);
+}
+
+.pds-padding-xs {
+  padding: var(--spacing-gap-xxs);
+}
+
+.pds-padding-sm {
+  padding: var(--spacing-gap-sm);
+}
+
+.pds-padding-md {
+  padding: var(--spacing-gap-md);
+}
+
+.pds-padding-lg {
+  padding: var(--spacing-gap-lg);
+}
+
+.pds-padding-xl {
+  padding: var(--spacing-gap-xl);
+}
+
+.pds-padding-xxl {
+  padding: var(--spacing-gap-xxl);
+}
+
+.pds-box-display-flex {
+  display: flex;
+}
+
+.pds-box-display-inline-flex {
+  display: inline-flex;
+}
+
+.pds-box-direction-row {
+  flex-direction: row;
+}
+
+.pds-box-direction-column {
+  flex-direction: column;
+}
+
+.pds-justify-content-start {
+  justify-content: start;
+}
+
+.pds-justify-content-center {
+  justify-content: center;
+}
+
+.pds-justify-content-end {
+  justify-content: end;
+}
+
+.pds-justify-content-space-between {
+  justify-content: space-between;
+}
+
+.pds-justify-content-space-around {
+  justify-content: space-around;
+}
+
+.pds-justify-content-space-evenly {
+  justify-content: space-evenly;
+}
+
+.pds-align-items-start {
+  align-items: start;
+}
+
+.pds-align-items-center {
+  align-items: center;
+}
+
+.pds-align-items-end {
+  align-items: end;
+}
+
+.pds-align-items-stretch {
+  align-items: stretch;
+}
+
+.pds-align-items-baseline {
+  align-items: baseline;
+}