@pine-ds/core 3.0.0-mercury.0 → 3.0.1

package/dist/collection/components/pds-avatar/pds-avatar.js

@@ -5,6 +5,36 @@ import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
 */
 export class PdsAvatar {
     constructor() {
+        /**
+         * The alt for a custom user image.
+         * @defaultValue null
+         */
+        this.alt = null;
+        /**
+         * Determines whether the badge is visible or not.
+         * @defaultValue false
+         */
+        this.badge = false;
+        /**
+         * Determines whether the avatar functions as a dropdown trigger.
+         * @defaultValue false
+         */
+        this.dropdown = false;
+        /**
+         * The src for a custom user image.
+         * @defaultValue null
+         */
+        this.image = null;
+        /**
+         * Size of the avatar. Value can be preset or custom.
+         * @defaultValue lg
+         */
+        this.size = 'lg';
+        /**
+         * Determines the variant of avatar. Changes appearance accordingly.
+         * @defaultValue customer
+         */
+        this.variant = 'customer';
         this.renderAssetWrapper = () => {
             const style = {
                 height: this.avatarSize(),
@@ -23,25 +53,18 @@ export class PdsAvatar {
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            && h("pds-icon", { class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
+            && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
         this.renderIconOrImage = () => (this.image
             ? h("img", { alt: this.alt, src: this.image })
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            : h("pds-icon", { color: "var(--pine-color-blue-400)", icon: userFilled, size: "33.53%" }));
+            : h("pds-icon", { color: "var(--pine-color-mercury-500)", icon: userFilled, size: "33.53%" }));
         this.classNames = () => ({
             'pds-avatar': true,
             [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
             [`pds-avatar--${this.variant}`]: this.variant === 'admin'
         });
-        this.alt = null;
-        this.badge = false;
-        this.componentId = undefined;
-        this.dropdown = false;
-        this.image = null;
-        this.size = 'lg';
-        this.variant = 'customer';
     }
     avatarSize() {
         const sizes = {
@@ -59,7 +82,7 @@ export class PdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '8c43a9de8b7799b5aafff0c12c2e95e53bed2041', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '6c013c87792c77cf63a321d4b194b241c8c8f7f5', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get is() { return "pds-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -92,6 +115,8 @@ export class PdsAvatar {
                         }],
                     "text": "The alt for a custom user image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "alt",
                 "reflect": false,
                 "defaultValue": "null"
@@ -113,6 +138,8 @@ export class PdsAvatar {
                         }],
                     "text": "Determines whether the badge is visible or not."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
@@ -131,6 +158,8 @@ export class PdsAvatar {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -151,6 +180,8 @@ export class PdsAvatar {
                         }],
                     "text": "Determines whether the avatar functions as a dropdown trigger."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dropdown",
                 "reflect": false,
                 "defaultValue": "false"
@@ -172,6 +203,8 @@ export class PdsAvatar {
                         }],
                     "text": "The src for a custom user image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image",
                 "reflect": false,
                 "defaultValue": "null"
@@ -193,6 +226,8 @@ export class PdsAvatar {
                         }],
                     "text": "Size of the avatar. Value can be preset or custom."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'lg'"
@@ -214,6 +249,8 @@ export class PdsAvatar {
                         }],
                     "text": "Determines the variant of avatar. Changes appearance accordingly."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": true,
                 "defaultValue": "'customer'"

package/dist/collection/components/pds-avatar/pds-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAErE;;EAEE;AAMF,MAAM,OAAO,SAAS;;QAiEZ,uBAAkB,GAAG,GAAG,EAAE;YAChC,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe;gBACpC,IAAI,CAAC,iBAAiB,EAAE;gBACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAA;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO,CACL,IAAI,CAAC,QAAQ;gBACX,CAAC;oBACD,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,gBAAY,yBAAyB,IACpF,IAAI,CAAC,kBAAkB,EAAE,CACjB;gBACT,CAAC;oBACD,IAAI,CAAC,kBAAkB,EAAE,CAC5B,CAAA;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE,CAAC,CAC1B,IAAI,CAAC,KAAK;YACV,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;eAC5C,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC5F,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE,CAAC,CAChC,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzC,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;YACjD,CAAC,CAAC,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC7F,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE,CAAC,CACzB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,wCAAwC;YAC7G,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAA;QAClB,CAAC;IACH,CAAC;IAqDD,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrls: ['pds-avatar.scss'],\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-mercury-500)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,15 +2,6 @@ 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;
 }
 
@@ -1074,39 +1065,67 @@ pds-box {
 }
 
 .pds-border-radius-xs {
-  border-radius: var(--pine-border-radius-xs);
+  border-radius: var(--pine-dimension-2xs);
 }
 
 .pds-border-radius-sm {
-  border-radius: var(--pine-border-radius-sm);
+  border-radius: var(--pine-dimension-xs);
 }
 
 .pds-border-radius-md {
-  border-radius: var(--pine-border-radius-md);
+  border-radius: var(--pine-dimension-100);
 }
 
 .pds-border-radius-lg {
-  border-radius: var(--pine-border-radius-lg);
+  border-radius: var(--pine-dimension-sm);
 }
 
 .pds-border-radius-circle {
-  border-radius: 50%;
+  border-radius: var(--pine-border-radius-full);
+}
+
+.pds-shadow-050 {
+  box-shadow: var(--pine-box-shadow-050);
+}
+
+.pds-shadow-100 {
+  box-shadow: var(--pine-box-shadow-100);
+}
+
+.pds-shadow-150 {
+  box-shadow: var(--pine-box-shadow-150);
+}
+
+.pds-shadow-200 {
+  box-shadow: var(--pine-box-shadow-200);
+}
+
+.pds-shadow-300 {
+  box-shadow: var(--pine-box-shadow-300);
+}
+
+.pds-shadow-400 {
+  box-shadow: var(--pine-box-shadow-400);
+}
+
+.pds-shadow-500 {
+  box-shadow: var(--pine-box-shadow-500);
 }
 
 .pds-shadow-xs {
-  box-shadow: var(--pine-box-shadow-xs);
+  box-shadow: var(--pine-box-shadow-050);
 }
 
 .pds-shadow-sm {
-  box-shadow: var(--pine-box-shadow-sm);
+  box-shadow: var(--pine-box-shadow-100);
 }
 
 .pds-shadow-md {
-  box-shadow: var(--pine-box-shadow-md);
+  box-shadow: var(--pine-box-shadow-150);
 }
 
 .pds-shadow-lg {
-  box-shadow: var(--pine-box-shadow-lg);
+  box-shadow: var(--pine-box-shadow-200);
 }
 
 .pds-box-gap-none {
@@ -1114,31 +1133,155 @@ pds-box {
 }
 
 .pds-box-gap-xxs {
-  gap: var(--spacing-gap-xxs);
+  gap: var(--pine-dimension-2xs);
 }
 
 .pds-box-gap-xs {
-  gap: var(--spacing-gap-xs);
+  gap: var(--pine-dimension-xs);
 }
 
 .pds-box-gap-sm {
-  gap: var(--spacing-gap-sm);
+  gap: var(--pine-dimension-sm);
 }
 
 .pds-box-gap-md {
-  gap: var(--spacing-gap-md);
+  gap: var(--pine-dimension-md);
 }
 
 .pds-box-gap-lg {
-  gap: var(--spacing-gap-lg);
+  gap: var(--pine-dimension-lg);
 }
 
 .pds-box-gap-xl {
-  gap: var(--spacing-gap-xl);
+  gap: var(--pine-dimension-xl);
 }
 
 .pds-box-gap-xxl {
-  gap: var(--spacing-gap-xxl);
+  gap: var(--pine-dimension-2xl);
+}
+
+.pds-margin-block-start-xxs {
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-margin-block-start-xs {
+  margin-block-start: var(--pine-dimension-xs);
+}
+
+.pds-margin-block-start-sm {
+  margin-block-start: var(--pine-dimension-sm);
+}
+
+.pds-margin-block-start-md {
+  margin-block-start: var(--pine-dimension-md);
+}
+
+.pds-margin-block-start-lg {
+  margin-block-start: var(--pine-dimension-lg);
+}
+
+.pds-margin-block-start-xl {
+  margin-block-start: var(--pine-dimension-xl);
+}
+
+.pds-margin-block-start-xxl {
+  margin-block-start: var(--pine-dimension-2xl);
+}
+
+.pds-margin-inline-start-none {
+  margin-inline-start: 0;
+}
+
+.pds-margin-inline-start-xxs {
+  margin-inline-start: var(--pine-dimension-2xs);
+}
+
+.pds-margin-inline-start-xs {
+  margin-inline-start: var(--pine-dimension-xs);
+}
+
+.pds-margin-inline-start-sm {
+  margin-inline-start: var(--pine-dimension-sm);
+}
+
+.pds-margin-inline-start-md {
+  margin-inline-start: var(--pine-dimension-md);
+}
+
+.pds-margin-inline-start-lg {
+  margin-inline-start: var(--pine-dimension-lg);
+}
+
+.pds-margin-inline-start-xl {
+  margin-inline-start: var(--pine-dimension-xl);
+}
+
+.pds-margin-inline-start-xxl {
+  margin-inline-start: var(--pine-dimension-2xl);
+}
+
+.pds-margin-inline-end-none {
+  margin-inline-end: 0;
+}
+
+.pds-margin-inline-end-xxs {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+
+.pds-margin-inline-end-xs {
+  margin-inline-end: var(--pine-dimension-xs);
+}
+
+.pds-margin-inline-end-sm {
+  margin-inline-end: var(--pine-dimension-sm);
+}
+
+.pds-margin-inline-end-md {
+  margin-inline-end: var(--pine-dimension-md);
+}
+
+.pds-margin-inline-end-lg {
+  margin-inline-end: var(--pine-dimension-lg);
+}
+
+.pds-margin-inline-end-xl {
+  margin-inline-end: var(--pine-dimension-xl);
+}
+
+.pds-margin-inline-end-xxl {
+  margin-inline-end: var(--pine-dimension-2xl);
+}
+
+.pds-margin-block-end-none {
+  margin-block-end: 0;
+}
+
+.pds-margin-block-end-xxs {
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-margin-block-end-xs {
+  margin-block-end: var(--pine-dimension-xs);
+}
+
+.pds-margin-block-end-sm {
+  margin-block-end: var(--pine-dimension-sm);
+}
+
+.pds-margin-block-end-md {
+  margin-block-end: var(--pine-dimension-md);
+}
+
+.pds-margin-block-end-lg {
+  margin-block-end: var(--pine-dimension-lg);
+}
+
+.pds-margin-block-end-xl {
+  margin-block-end: var(--pine-dimension-xl);
+}
+
+.pds-margin-block-end-xxl {
+  margin-block-end: var(--pine-dimension-2xl);
 }
 
 .pds-padding-none {
@@ -1146,31 +1289,167 @@ pds-box {
 }
 
 .pds-padding-xxs {
-  padding: var(--spacing-gap-xxs);
+  padding: var(--pine-dimension-2xs);
 }
 
 .pds-padding-xs {
-  padding: var(--spacing-gap-xxs);
+  padding: var(--pine-dimension-xs);
 }
 
 .pds-padding-sm {
-  padding: var(--spacing-gap-sm);
+  padding: var(--pine-dimension-sm);
 }
 
 .pds-padding-md {
-  padding: var(--spacing-gap-md);
+  padding: var(--pine-dimension-md);
 }
 
 .pds-padding-lg {
-  padding: var(--spacing-gap-lg);
+  padding: var(--pine-dimension-lg);
 }
 
 .pds-padding-xl {
-  padding: var(--spacing-gap-xl);
+  padding: var(--pine-dimension-xl);
 }
 
 .pds-padding-xxl {
-  padding: var(--spacing-gap-xxl);
+  padding: var(--pine-dimension-2xl);
+}
+
+.pds-padding-block-start-none {
+  padding-block-start: var(--pine-dimension-none);
+}
+
+.pds-padding-block-start-xxs {
+  padding-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-padding-block-start-xs {
+  padding-block-start: var(--pine-dimension-xs);
+}
+
+.pds-padding-block-start-sm {
+  padding-block-start: var(--pine-dimension-sm);
+}
+
+.pds-padding-block-start-md {
+  padding-block-start: var(--pine-dimension-md);
+}
+
+.pds-padding-block-start-lg {
+  padding-block-start: var(--pine-dimension-lg);
+}
+
+.pds-padding-block-start-xl {
+  padding-block-start: var(--pine-dimension-xl);
+}
+
+.pds-padding-block-start-xxl {
+  padding-block-start: var(--pine-dimension-2xl);
+}
+
+.pds-padding-block-end-none {
+  padding-block-end: var(--pine-dimension-none);
+}
+
+.pds-padding-block-end-xxs {
+  padding-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-padding-block-end-xs {
+  padding-block-end: var(--pine-dimension-xs);
+}
+
+.pds-padding-block-end-sm {
+  padding-block-end: var(--pine-dimension-sm);
+}
+
+.pds-padding-block-end-md {
+  padding-block-end: var(--pine-dimension-md);
+}
+
+.pds-padding-block-end-lg {
+  padding-block-end: var(--pine-dimension-lg);
+}
+
+.pds-padding-block-end-xl {
+  padding-block-end: var(--pine-dimension-xl);
+}
+
+.pds-padding-block-end-xxl {
+  padding-block-end: var(--pine-dimension-2xl);
+}
+
+.pds-padding-inline-start-none {
+  padding-inline-start: var(--pine-dimension-none);
+}
+
+.pds-padding-inline-start-xxs {
+  padding-inline-start: var(--pine-dimension-2xs);
+}
+
+.pds-padding-inline-start-xs {
+  padding-inline-start: var(--pine-dimension-xs);
+}
+
+.pds-padding-inline-start-sm {
+  padding-inline-start: var(--pine-dimension-sm);
+}
+
+.pds-padding-inline-start-md {
+  padding-inline-start: var(--pine-dimension-md);
+}
+
+.pds-padding-inline-start-lg {
+  padding-inline-start: var(--pine-dimension-lg);
+}
+
+.pds-padding-inline-start-xl {
+  padding-inline-start: var(--pine-dimension-xl);
+}
+
+.pds-padding-inline-start-xxl {
+  padding-inline-start: var(--pine-dimension-2xl);
+}
+
+.pds-padding-inline-end-none {
+  padding-inline-end: var(--pine-dimension-none);
+}
+
+.pds-padding-inline-end-xxs {
+  padding-inline-end: var(--pine-dimension-2xs);
+}
+
+.pds-padding-inline-end-xs {
+  padding-inline-end: var(--pine-dimension-xs);
+}
+
+.pds-padding-inline-end-sm {
+  padding-inline-end: var(--pine-dimension-sm);
+}
+
+.pds-padding-inline-end-md {
+  padding-inline-end: var(--pine-dimension-md);
+}
+
+.pds-padding-inline-end-lg {
+  padding-inline-end: var(--pine-dimension-lg);
+}
+
+.pds-padding-inline-end-xl {
+  padding-inline-end: var(--pine-dimension-xl);
+}
+
+.pds-padding-inline-end-xxl {
+  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 {
@@ -1231,4 +1510,24 @@ pds-box {
 
 .pds-align-items-baseline {
   align-items: baseline;
+}
+
+.pds-align-self-start {
+  align-self: start;
+}
+
+.pds-align-self-center {
+  align-self: center;
+}
+
+.pds-align-self-end {
+  align-self: end;
+}
+
+.pds-align-self-baseline {
+  align-self: baseline;
+}
+
+.pds-align-self-stretch {
+  align-self: stretch;
 }