{
  "version": 1.1,
  "tags": [
    {
      "name": "pds-accordion",
      "description": {
        "kind": "markdown",
        "value": "An Accordion, composed of a single label and a panel of custom content, is used to show and hide information. They can be helpful for users to scan the contents of the page and find the information they need quickly and easily.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-accordion--docs#default), [Content Slots Set](https://pine-design-system.netlify.app/?path=/docs/components-accordion--docs#content-slots-set)\n\n**Slots:**\n- `(default)` - Accordion body content.\n- `label` - Accordion trigger button content.\n\n**CSS Parts:**\n- `accordion-body` - Accordion body styles.\n- `accordion-button` - Accordion button/trigger styles.\n- `accordion-icon` - Accordion icon styles.\n\n**Events:**\n- `pdsAccordionToggle` - Emitted when the accordion open state changes."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "open",
          "description": {
            "kind": "markdown",
            "value": "Can be used to manually set the open state of the accordion.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-accordion--docs"
        }
      ]
    },
    {
      "name": "pds-alert",
      "description": {
        "kind": "markdown",
        "value": "Alerts display inline messages with distinct variants for information, success, warnings, errors, and other states. They can be dismissible and include an actions slot for related buttons.\n\n**Examples:**\n[Variants](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#variants), [Default](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#default), [Small](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#small), [Actions](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#actions), [Small with actions](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#small-with-actions), [Dismissible](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#dismissible), [Small dismissible](https://pine-design-system.netlify.app/?path=/docs/components-alert--docs#small-dismissible)\n\n**Slots:**\n- `actions` - Slot for alert actions.\n\n**CSS Parts:**\n- `dismiss` - No description\n\n**Events:**\n- `pdsAlertDismissClick` - Event emitted when the dismiss button is clicked."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "dismissible",
          "description": {
            "kind": "markdown",
            "value": "If true, shows the dismiss button. If false, the dismiss button is hidden.\n\n**Default:** `false`"
          }
        },
        {
          "name": "heading",
          "description": {
            "kind": "markdown",
            "value": "Text displayed as the heading of the alert."
          }
        },
        {
          "name": "hide-icon",
          "description": {
            "kind": "markdown",
            "value": "If true, the leading icon is hidden.\n\n**Default:** `false`"
          }
        },
        {
          "name": "small",
          "description": {
            "kind": "markdown",
            "value": "If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n\n**Default:** `false`"
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Sets the style variant of the alert.\n\n**Type:** `\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"`\n\n**Default:** `'default'`"
          },
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-alert--docs"
        }
      ]
    },
    {
      "name": "pds-avatar",
      "description": {
        "kind": "markdown",
        "value": "Avatars display a thumbnail representation of a person or organization, supporting an image, an initials fallback, and an optional badge. They can also function as a dropdown trigger.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#default), [Admin](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#admin), [Badge](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#badge), [Custom Sizes](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#custom-sizes), [Dropdown](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#dropdown), [Image](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#image), [Initials](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#initials), [Initials with Badge](https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs#initials-with-badge)\n\n**CSS Parts:**\n- `asset-wrapper` - No description\n- `button` - No description\n- `image` - The main image element that represents the avatar component."
      },
      "attributes": [
        {
          "name": "alt",
          "description": {
            "kind": "markdown",
            "value": "The alt for a custom user image.\n\n**Default:** `null`"
          }
        },
        {
          "name": "badge",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the badge is visible or not.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "dropdown",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the avatar functions as a dropdown trigger.\n\n**Default:** `false`"
          }
        },
        {
          "name": "image",
          "description": {
            "kind": "markdown",
            "value": "The src for a custom user image.\n\n**Default:** `null`"
          }
        },
        {
          "name": "initials",
          "description": {
            "kind": "markdown",
            "value": "The initials to display in the avatar when no image is provided.\n\n**Default:** `null`"
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Size of the avatar. Value can be preset or custom.\n\n**Default:** `'lg'`"
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Determines the variant of avatar. Changes appearance accordingly.\n\n**Type:** `\"admin\" | \"customer\"`\n\n**Default:** `'customer'`"
          },
          "values": [
            {
              "name": "admin"
            },
            {
              "name": "customer"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-avatar--docs"
        }
      ]
    },
    {
      "name": "pds-box",
      "description": {
        "kind": "markdown",
        "value": "Box is our primitive layout component. It is intended to be used as a building block for more complex layouts. It allows for custom sizing, colors, padding, and alignment while still adhering to Pine tokens and brand guidelines. The component uses logical properties for margin and padding, making it adaptable to different writing modes and languages."
      },
      "attributes": [
        {
          "name": "align-items",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned at the LG breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items-md",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned at the MD breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned at the SM breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned at the XL breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines how items within the box are aligned at the XS breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container at the LG breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self-md",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container at the MD breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container at the SM breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container at the XL breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-self-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines how the box is aligned within its container at the XS breakpoint.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "auto",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents."
          }
        },
        {
          "name": "auto-lg",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents at the LG breakpoint."
          }
        },
        {
          "name": "auto-md",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents at the MD breakpoint."
          }
        },
        {
          "name": "auto-sm",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents at the SM breakpoint."
          }
        },
        {
          "name": "auto-xl",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents at the XL breakpoint."
          }
        },
        {
          "name": "auto-xs",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will be sized to fit its contents at the XS breakpoint."
          }
        },
        {
          "name": "background-color",
          "description": {
            "kind": "markdown",
            "value": "Defines the background-color of the box."
          }
        },
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the box will have a border.\n\n**Default:** `false`"
          }
        },
        {
          "name": "border-color",
          "description": {
            "kind": "markdown",
            "value": "Defines the border color of the box."
          }
        },
        {
          "name": "border-radius",
          "description": {
            "kind": "markdown",
            "value": "Defines how rounded the box corners are.\n\n**Type:** `\"circle\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xs\"`"
          },
          "values": [
            {
              "name": "circle"
            },
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "none"
            },
            {
              "name": "sm"
            },
            {
              "name": "xs"
            }
          ]
        },
        {
          "name": "direction",
          "description": {
            "kind": "markdown",
            "value": "Defines the orientation of the box items.\n\n**Type:** `\"column\" | \"row\"`"
          },
          "values": [
            {
              "name": "column"
            },
            {
              "name": "row"
            }
          ]
        },
        {
          "name": "display",
          "description": {
            "kind": "markdown",
            "value": "Defines the display style of the box.\n\n**Type:** `\"block\" | \"flex\" | \"inline-block\" | \"inline-flex\"`"
          },
          "values": [
            {
              "name": "block"
            },
            {
              "name": "flex"
            },
            {
              "name": "inline-block"
            },
            {
              "name": "inline-flex"
            }
          ]
        },
        {
          "name": "fit",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%`."
          }
        },
        {
          "name": "fit-lg",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%` at the LG breakpoint."
          }
        },
        {
          "name": "fit-md",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%` at the MD breakpoint."
          }
        },
        {
          "name": "fit-sm",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%` at the SM breakpoint."
          }
        },
        {
          "name": "fit-xl",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%` at the XL breakpoint."
          }
        },
        {
          "name": "fit-xs",
          "description": {
            "kind": "markdown",
            "value": "If `true`, sets the box `max-width` to `100%` at the XS breakpoint."
          }
        },
        {
          "name": "flex",
          "description": {
            "kind": "markdown",
            "value": "Defines how a box will grow or shrink to fit the space available in its container.\nCan be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto')."
          }
        },
        {
          "name": "gap",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "gap-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "gap-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "gap-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "gap-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "gap-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "justify-content",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "justify-content-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items at the LG breakpoint.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "justify-content-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items at the MD breakpoint.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "justify-content-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items at the SM breakpoint.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "justify-content-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items at the XL breakpoint.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "justify-content-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the box items at the XS breakpoint.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "margin-block-end",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-end-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-end-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-end-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-end-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-end-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer bottom spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-block-start-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer top spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-end-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer right spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "margin-inline-start-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the box's outer left spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "min-height",
          "description": {
            "kind": "markdown",
            "value": "The minimum height of the row. Used in conjunction with alignment props"
          }
        },
        {
          "name": "min-width",
          "description": {
            "kind": "markdown",
            "value": "The minimum width of the row. Used in conjunction with alignment props"
          }
        },
        {
          "name": "offset",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "offset-lg",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "offset-md",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "offset-sm",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "offset-xl",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "offset-xs",
          "description": {
            "kind": "markdown",
            "value": "Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "padding",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-end-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the bottom spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-block-start-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the top spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-end-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the right spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-inline-start-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the left spacing at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the LG breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-md",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the MD breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the SM breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the XL breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "padding-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the box items at the XS breakpoint.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "shadow",
          "description": {
            "kind": "markdown",
            "value": "Defines the box shadow.\n\n**Type:** `\"050\" | \"100\" | \"150\" | \"200\" | \"300\" | \"400\" | \"500\" | \"none\"`"
          },
          "values": [
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "300"
            },
            {
              "name": "400"
            },
            {
              "name": "500"
            },
            {
              "name": "none"
            }
          ]
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "size-lg",
          "description": {
            "kind": "markdown",
            "value": "At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "size-md",
          "description": {
            "kind": "markdown",
            "value": "At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "size-sm",
          "description": {
            "kind": "markdown",
            "value": "At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "size-xl",
          "description": {
            "kind": "markdown",
            "value": "At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "size-xs",
          "description": {
            "kind": "markdown",
            "value": "At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n\n**Type:** `\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"`"
          },
          "values": [
            {
              "name": "0"
            },
            {
              "name": "1"
            },
            {
              "name": "10"
            },
            {
              "name": "11"
            },
            {
              "name": "12"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            },
            {
              "name": "7"
            },
            {
              "name": "8"
            },
            {
              "name": "9"
            }
          ]
        },
        {
          "name": "wrap",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items are forced onto one line or can wrap onto multiple lines."
          }
        },
        {
          "name": "wrap-lg",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items can wrap onto multiple lines at the LG breakpoint."
          }
        },
        {
          "name": "wrap-md",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items can wrap onto multiple lines at the MD breakpoint."
          }
        },
        {
          "name": "wrap-sm",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items can wrap onto multiple lines at the SM breakpoint."
          }
        },
        {
          "name": "wrap-xl",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items can wrap onto multiple lines at the XL breakpoint."
          }
        },
        {
          "name": "wrap-xs",
          "description": {
            "kind": "markdown",
            "value": "Defines whether flex items can wrap onto multiple lines at the XS breakpoint."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-layout-box--docs"
        }
      ]
    },
    {
      "name": "pds-button",
      "description": {
        "kind": "markdown",
        "value": "A button is an interactive element that can be clicked to perform various actions such as triggering an event, submitting data, or navigating to a different location.\n\n**Examples:**\n[Primary](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#primary), [Secondary](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#secondary), [Tertiary](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#tertiary), [Accent](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#accent), [Destructive](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#destructive), [Disclosure](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#disclosure), [Filter](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#filter), [Full Width](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#full-width), [Loading](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#loading), [Icon Only](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#icon-only), [Sizes](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#sizes), [Button Link](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#button-link), [Type](https://pine-design-system.netlify.app/?path=/docs/components-button--docs#type)\n\n**Slots:**\n- `(default)` - Button text.\n- `end` - Content to display after the button text.\n- `start` - Content to display before the button text.\n\n**CSS Parts:**\n- `button` - Exposes the button element for styling.\n- `button-content` - Exposes the button content for styling.\n- `button-text` - Exposes the button text for styling.\n- `caret` - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n- `icon` - Exposes the icon component for styling.\n- `loader-svg` - Exposes the loader SVG element for color customization. Appears only when loading.\n\n**Events:**\n- `pdsClick` - No description"
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines the button's disabled state.\n\n**Default:** `false`"
          }
        },
        {
          "name": "download",
          "description": {
            "kind": "markdown",
            "value": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set."
          }
        },
        {
          "name": "full-width",
          "description": {
            "kind": "markdown",
            "value": "Determines if the button should take up the full width of its container.\n\n**Default:** `false`"
          }
        },
        {
          "name": "href",
          "description": {
            "kind": "markdown",
            "value": "If provided, renders the component as an anchor (`<a>`) element instead of a button.\nWhen using href, button-specific props (type, name, value, loading) will be ignored."
          }
        },
        {
          "name": "icon",
          "description": {
            "kind": "markdown",
            "value": "Displays a leading icon in the button. DEPRECATED.\n\n**Default:** `null`\n\n⚠️ **Deprecated:** Use `start` slot instead."
          }
        },
        {
          "name": "icon-only",
          "description": {
            "kind": "markdown",
            "value": "When true, displays only the icon and visually hides the text (keeping it accessible).\n\n**Default:** `false`"
          }
        },
        {
          "name": "loading",
          "description": {
            "kind": "markdown",
            "value": "Determines if the button is in a loading state.\nWhen true, displays a loader and hides the button text.\n\n**Default:** `false`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Provides the button with a submittable name."
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the size of the button.\n\n**Type:** `\"default\" | \"micro\" | \"small\"`\n\n**Default:** `'default'`"
          },
          "values": [
            {
              "name": "default"
            },
            {
              "name": "micro"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "target",
          "description": {
            "kind": "markdown",
            "value": "Specifies where to open the linked document when href is provided.\nOnly applies when href is set.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
          },
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "type",
          "description": {
            "kind": "markdown",
            "value": "Provides button with a type.\n\n**Type:** `\"button\" | \"reset\" | \"submit\"`\n\n**Default:** `'button'`"
          },
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "Provides button with a submittable value"
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Sets the style variant of the button.\n\n**Type:** `\"accent\" | \"destructive\" | \"disclosure\" | \"filter\" | \"primary\" | \"secondary\" | \"tertiary\" | \"unstyled\"`\n\n**Default:** `'primary'`"
          },
          "values": [
            {
              "name": "accent"
            },
            {
              "name": "destructive"
            },
            {
              "name": "disclosure"
            },
            {
              "name": "filter"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "unstyled"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-button--docs"
        }
      ]
    },
    {
      "name": "pds-checkbox",
      "description": {
        "kind": "markdown",
        "value": "Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#default), [Checked](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#checked), [Indeterminate](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#indeterminate), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#disabled), [Message](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#invalid)\n\n**Events:**\n- `pdsCheckboxChange` - Event emitted that contains the `value` and `checked`.\n- `pdsCheckboxInput` - No description"
      },
      "attributes": [
        {
          "name": "checked",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the checkbox is checked.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the checkbox is disabled."
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays message text describing an invalid state."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "String used for helper message below checkbox."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
          }
        },
        {
          "name": "indeterminate",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the checkbox is invalid."
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "String used for label text next to checkbox."
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "String used for checkbox `name` attribute."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the checkbox is required."
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value of the checkbox that is submitted with a form."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs"
        }
      ]
    },
    {
      "name": "pds-chip",
      "description": {
        "kind": "markdown",
        "value": "Chips are used to inform users about the status of an object or to associate properties with a parent. Commonly used in tabular data to indicate status.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#default), [Sentiment](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#sentiment), [Dot](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#dot), [Icon](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#icon), [Dropdown](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#dropdown), [Tag](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#tag), [Sizes](https://pine-design-system.netlify.app/?path=/docs/components-chip--docs#sizes)\n\n**Slots:**\n- `(default)` - The chip's label text.\n\n**CSS Parts:**\n- `button` - No description\n\n**Events:**\n- `pdsTagCloseClick` - Event emitted when the close button is clicked on a tag variant chip."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "dot",
          "description": {
            "kind": "markdown",
            "value": "Determines whether a dot should be displayed on the chip.\nNote: This prop is ignored when sentiment is 'brand'.\n\n**Default:** `false`"
          }
        },
        {
          "name": "icon",
          "description": {
            "kind": "markdown",
            "value": "The name of the icon to display before the chip text."
          }
        },
        {
          "name": "large",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the chip should be displayed in a larger size. DEPRECATED.\n\n**Default:** `false`\n\n⚠️ **Deprecated:** Use `size` prop instead. Set `size=\"lg\"` for the large variant."
          }
        },
        {
          "name": "remove-http-method",
          "description": {
            "kind": "markdown",
            "value": "HTTP method to use for the remove action.\nAdds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\nOnly applies when removeUrl is provided.\n\n**Type:** `\"delete\" | \"get\" | \"patch\" | \"post\" | \"put\"`"
          },
          "values": [
            {
              "name": "delete"
            },
            {
              "name": "get"
            },
            {
              "name": "patch"
            },
            {
              "name": "post"
            },
            {
              "name": "put"
            }
          ]
        },
        {
          "name": "remove-target",
          "description": {
            "kind": "markdown",
            "value": "Specifies where to open the linked document when removeUrl is provided.\nOnly applies when removeUrl is set.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
          },
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "remove-url",
          "description": {
            "kind": "markdown",
            "value": "URL to navigate to when the remove button is clicked.\nWhen provided, renders the close button as a link instead of a button.\nOnly applies to tag variant."
          }
        },
        {
          "name": "sentiment",
          "description": {
            "kind": "markdown",
            "value": "Defines the color scheme of the chip.\n\n**Type:** `\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"`\n\n**Default:** `'neutral'`"
          },
          "values": [
            {
              "name": "accent"
            },
            {
              "name": "brand"
            },
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "neutral"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the size of the chip.\n\n**Type:** `\"lg\" | \"md\" | \"sm\"`"
          },
          "values": [
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            }
          ]
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Sets the style variant of the chip.\nNote: This prop is ignored when sentiment is 'brand'.\n\n**Type:** `\"dropdown\" | \"tag\" | \"text\"`\n\n**Default:** `'text'`"
          },
          "values": [
            {
              "name": "dropdown"
            },
            {
              "name": "tag"
            },
            {
              "name": "text"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-chip--docs"
        }
      ]
    },
    {
      "name": "pds-combobox",
      "description": {
        "kind": "markdown",
        "value": "A combobox is a text input with a dropdown list of options, allowing users to filter and select from a list. It is useful for searchable selects and autocomplete scenarios.\n\n**Slots:**\n- `empty` - Custom empty state message when no options match\n- `loading` - Custom loading indicator\n- `option` - Option elements for the combobox dropdown\n- `trigger-content` - Custom content for the button trigger when customTriggerContent is true\n\n**CSS Parts:**\n- `button-trigger` - No description\n- `chip-trigger` - No description\n- `combobox` - No description\n- `input` - No description\n\n**Events:**\n- `pdsComboboxChange` - Emitted when the value changes.\n- `pdsComboboxLoadOptions` - Emitted to request more options (pagination).\n- `pdsComboboxSearch` - Emitted on search input (for consumer-managed async)."
      },
      "attributes": [
        {
          "name": "async-method",
          "description": {
            "kind": "markdown",
            "value": "HTTP method for async requests.\n\n**Type:** `\"GET\" | \"POST\"`\n\n**Default:** `'GET'`"
          },
          "values": [
            {
              "name": "GET"
            },
            {
              "name": "POST"
            }
          ]
        },
        {
          "name": "async-url",
          "description": {
            "kind": "markdown",
            "value": "URL endpoint for async data fetching."
          }
        },
        {
          "name": "chip-dot",
          "description": {
            "kind": "markdown",
            "value": "Whether a dot should be displayed on the chip trigger.\n\n**Default:** `false`"
          }
        },
        {
          "name": "chip-icon",
          "description": {
            "kind": "markdown",
            "value": "The name of the icon to display in the chip trigger."
          }
        },
        {
          "name": "chip-large",
          "description": {
            "kind": "markdown",
            "value": "Whether the chip trigger should be displayed in a larger size.\n\n**Default:** `false`"
          }
        },
        {
          "name": "chip-sentiment",
          "description": {
            "kind": "markdown",
            "value": "The sentiment for the chip trigger. Matches Pine chip sentiments.\n\n**Type:** `\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"`\n\n**Default:** `'neutral'`"
          },
          "values": [
            {
              "name": "accent"
            },
            {
              "name": "brand"
            },
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "neutral"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "custom-option-layouts",
          "description": {
            "kind": "markdown",
            "value": "Enable custom layout content for options. Options with data-layout attribute will render their HTML content.\n⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.\n\n**Default:** `false`"
          }
        },
        {
          "name": "custom-trigger-content",
          "description": {
            "kind": "markdown",
            "value": "Enable custom layout content for the button trigger via the trigger-content slot.\nWhen true, uses slot content for initial state but updates dynamically with selected option layout.\n⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.\n\n**Default:** `false`"
          }
        },
        {
          "name": "debounce",
          "description": {
            "kind": "markdown",
            "value": "Debounce delay in milliseconds for search/fetch.\n\n**Type:** `number`\n\n**Default:** `300`"
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "If true, the combobox is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "dropdown-mount",
          "description": {
            "kind": "markdown",
            "value": "Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).\nUse `body` inside scrollable containers (for example modals) so the list is not clipped by\n`overflow: hidden` ancestors. The portal is appended to the nearest `<dialog>` when present\n(including `pds-modal` / `showModal()`), using a composed ascent so shadow DOM and slot\nboundaries do not hide the dialog from discovery; otherwise it is appended to `document.body`.\nKeyboard focus remains on the trigger via\n`aria-activedescendant` so modal focus traps continue to work. Custom `empty` and `loading`\nslots are not supported when `body` is used; the default empty and loading content is shown instead.\n\n**Type:** `\"body\" | \"host\"`\n\n**Default:** `'host'`"
          },
          "values": [
            {
              "name": "body"
            },
            {
              "name": "host"
            }
          ]
        },
        {
          "name": "dropdown-placement",
          "description": {
            "kind": "markdown",
            "value": "Placement of the dropdown relative to the trigger.\n\n**Type:** `\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"`\n\n**Default:** `'bottom-start'`"
          },
          "values": [
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "dropdown-width",
          "description": {
            "kind": "markdown",
            "value": "Width of the dropdown. Any valid CSS width value.\n\n**Default:** `'236px'`"
          }
        },
        {
          "name": "fetch-timeout",
          "description": {
            "kind": "markdown",
            "value": "Timeout in milliseconds for async fetch requests.\n\n**Type:** `number`\n\n**Default:** `30000`"
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the combobox should be displayed.\nThe visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;\nthe trigger uses `aria-label` so the name stays available to assistive technology.\n\n**Default:** `false`"
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Text to be displayed as the combobox label."
          }
        },
        {
          "name": "loading",
          "description": {
            "kind": "markdown",
            "value": "Whether the component is currently loading async options.\n\n**Default:** `false`"
          }
        },
        {
          "name": "max-height",
          "description": {
            "kind": "markdown",
            "value": "Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem').\nWhen content exceeds this height, the dropdown will scroll."
          }
        },
        {
          "name": "mode",
          "description": {
            "kind": "markdown",
            "value": "Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).\nIn filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists\nall options until you type (so you can switch to a different choice without clearing the field first).\n\n**Type:** `\"filter\" | \"select-only\"`\n\n**Default:** `'filter'`"
          },
          "values": [
            {
              "name": "filter"
            },
            {
              "name": "select-only"
            }
          ]
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "The name of the form control. Submitted with the form as part of a name/value pair."
          }
        },
        {
          "name": "placeholder",
          "description": {
            "kind": "markdown",
            "value": "Placeholder text for the input field."
          }
        },
        {
          "name": "trigger",
          "description": {
            "kind": "markdown",
            "value": "Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).\n\n**Type:** `\"button\" | \"chip\" | \"input\"`\n\n**Default:** `'input'`"
          },
          "values": [
            {
              "name": "button"
            },
            {
              "name": "chip"
            },
            {
              "name": "input"
            }
          ]
        },
        {
          "name": "trigger-shape",
          "description": {
            "kind": "markdown",
            "value": "The shape of the button trigger. Use 'input' to render the trigger with input-like styling\n(subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.\n\n**Type:** `\"input\" | \"pill\"`\n\n**Default:** `'pill'`"
          },
          "values": [
            {
              "name": "input"
            },
            {
              "name": "pill"
            }
          ]
        },
        {
          "name": "trigger-variant",
          "description": {
            "kind": "markdown",
            "value": "The visual variant for the button trigger. Matches Pine button variants.\n\n**Type:** `\"accent\" | \"destructive\" | \"primary\" | \"secondary\"`\n\n**Default:** `'secondary'`"
          },
          "values": [
            {
              "name": "accent"
            },
            {
              "name": "destructive"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        },
        {
          "name": "trigger-width",
          "description": {
            "kind": "markdown",
            "value": "Width of the trigger (button or input). Any valid CSS width value.\n\n**Default:** `'fit-content'`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value of the combobox input.\n\n**Default:** `''`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-combobox--docs"
        }
      ]
    },
    {
      "name": "pds-container",
      "description": {
        "kind": "markdown",
        "value": "Container constrains its children to a semantic max-width, centering them within the available space. Use it to wrap form panels, settings pages, and full-page flows.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs#default), [Named Sizes](https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs#named-sizes), [Arbitrary Size](https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs#arbitrary-size), [Not Centered](https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs#not-centered), [Semantic Tag](https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs#semantic-tag)\n\n**CSS Parts:**\n- `container` - The inner semantic container element"
      },
      "attributes": [
        {
          "name": "centered",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the container is centered horizontally using `margin-inline: auto`.\n\n**Default:** `true`"
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the maximum width of the container. Accepts a named size token\n(`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`).\nWhen omitted, no max-width is applied."
          }
        },
        {
          "name": "tag",
          "description": {
            "kind": "markdown",
            "value": "Sets the semantic HTML tag rendered as the inner container element.\n\n**Type:** `\"article\" | \"div\" | \"main\" | \"section\"`\n\n**Default:** `'div'`"
          },
          "values": [
            {
              "name": "article"
            },
            {
              "name": "div"
            },
            {
              "name": "main"
            },
            {
              "name": "section"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-layout-container--docs"
        }
      ]
    },
    {
      "name": "pds-copytext",
      "description": {
        "kind": "markdown",
        "value": "Copy Text displays a value alongside a copy button, letting users copy codes, IDs, or short strings to their clipboard in a single click. It supports truncation with a hover tooltip for long values.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-copy-text--docs#default), [Borderless](https://pine-design-system.netlify.app/?path=/docs/components-copy-text--docs#borderless), [Full width](https://pine-design-system.netlify.app/?path=/docs/components-copy-text--docs#full-width), [Truncate](https://pine-design-system.netlify.app/?path=/docs/components-copy-text--docs#truncate)\n\n**Events:**\n- `pdsCopyTextClick` - Event fired when copyText button is clicked."
      },
      "attributes": [
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `copytext` should have a visible border.\n\n**Default:** `true`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "full-width",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `copytext` should expand to the full width of its container.\n\n**Default:** `false`"
          }
        },
        {
          "name": "truncate",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the `value` should truncate and display with an ellipsis.\nWhen text overflows, a tooltip showing the full value will appear on hover/focus.\n\n**Default:** `false`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The string displayed that is also copied to the clipboard upon interaction."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-copy-text--docs"
        }
      ]
    },
    {
      "name": "pds-divider",
      "description": {
        "kind": "markdown",
        "value": "A divider is used to create a clear visual separation between sections of content within a layout.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-divider--docs#default), [Vertical](https://pine-design-system.netlify.app/?path=/docs/components-divider--docs#vertical), [Offsets](https://pine-design-system.netlify.app/?path=/docs/components-divider--docs#offsets)"
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "offset",
          "description": {
            "kind": "markdown",
            "value": "Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n\n**Type:** `\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"`"
          },
          "values": [
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            },
            {
              "name": "xl"
            },
            {
              "name": "xs"
            },
            {
              "name": "xxl"
            },
            {
              "name": "xxs"
            }
          ]
        },
        {
          "name": "vertical",
          "description": {
            "kind": "markdown",
            "value": "Sets divider to display vertically.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-divider--docs"
        }
      ]
    },
    {
      "name": "pds-dropdown-menu",
      "description": {
        "kind": "markdown",
        "value": "Dropdown Menus reveal a list of actions from a button trigger, implementing the WAI-ARIA Menu Button pattern. Use them to conserve space when options do not need to be visible at all times.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#default), [With Separator](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-separator), [With Icons](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-icons), [With Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-links), [With External Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-external-links), [Mixing Menu Items with Raw Elements](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#mixing-menu-items-with-raw-elements), [With Disabled Items](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-disabled-items), [With Custom Placement](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-custom-placement), [Scrollable Menu](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#scrollable-menu)\n\n**CSS Parts:**\n- `menu-panel` - Exposes the dropdown menu container for styling."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "placement",
          "description": {
            "kind": "markdown",
            "value": "The placement of the dropdown panel relative to the trigger.\n\n**Type:** `\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"`\n\n**Default:** `'bottom-start'`"
          },
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs"
        }
      ]
    },
    {
      "name": "pds-dropdown-menu-item",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `button` - No description\n\n**Events:**\n- `pdsClick` - Emitted when the dropdown-item is clicked."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "destructive",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the dropdown-item is destructive.\n\n**Default:** `false`"
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the dropdown-item is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "download",
          "description": {
            "kind": "markdown",
            "value": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set."
          }
        },
        {
          "name": "external",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\n\n**Default:** `false`"
          }
        },
        {
          "name": "href",
          "description": {
            "kind": "markdown",
            "value": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button."
          }
        },
        {
          "name": "target",
          "description": {
            "kind": "markdown",
            "value": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
          },
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu-item--docs"
        }
      ]
    },
    {
      "name": "pds-dropdown-menu-separator",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "It determines whether or not the dropdown-item is disabled.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu-separator--docs"
        }
      ]
    },
    {
      "name": "pds-filter",
      "description": {
        "kind": "markdown",
        "value": "Individual filter component with cross-browser popover positioning.\n\nUses a hybrid approach for optimal cross-browser compatibility:\n- Modern browsers: CSS anchor positioning + JavaScript flip classes\n- Fallback browsers: JavaScript positioning with viewport boundary detection\n\n**Slots:**\n- `(default)` - Popover content that will be displayed when the filter is open.\n\n**CSS Parts:**\n- `button` - Exposes the trigger button element for styling.\n- `button-content` - Exposes the button content container for styling.\n- `button-text` - Exposes the button text for styling.\n- `icon` - Exposes the icon component for styling.\n- `popover` - Exposes the popover container for styling.\n\n**Events:**\n- `pdsFilterClear` - Event emitted when the clear variant is clicked.\n- `pdsFilterClose` - Event emitted when the filter popover is closed.\n- `pdsFilterOpen` - Event emitted when the filter popover is opened."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "icon",
          "description": {
            "kind": "markdown",
            "value": "The name of the icon to display in the trigger button.\nFor 'clear' variant, this is ignored as it always shows trash icon."
          }
        },
        {
          "name": "text",
          "description": {
            "kind": "markdown",
            "value": "The text content displayed in the trigger button."
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "The variant style of the filter trigger.\n\n**Type:** `\"clear\" | \"default\" | \"more\" | \"selected\"`\n\n**Default:** `'default'`"
          },
          "values": [
            {
              "name": "clear"
            },
            {
              "name": "default"
            },
            {
              "name": "more"
            },
            {
              "name": "selected"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-filters-filter--docs"
        }
      ]
    },
    {
      "name": "pds-filters",
      "description": {
        "kind": "markdown",
        "value": "Filters provide a flexible system for building filter interfaces from a row of popover triggers. A parent pds-filters container manages layout while individual pds-filter children hold the popover content for each facet.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-filters--docs#default), [Selected](https://pine-design-system.netlify.app/?path=/docs/components-filters--docs#selected), [More](https://pine-design-system.netlify.app/?path=/docs/components-filters--docs#more), [Clear](https://pine-design-system.netlify.app/?path=/docs/components-filters--docs#clear)\n\n**Slots:**\n- `(default)` - Container for pds-filter components."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-filters--docs"
        }
      ]
    },
    {
      "name": "pds-image",
      "description": {
        "kind": "markdown",
        "value": "An image can be used to convey supplemental information to the user or as decoration.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-image--docs#default), [Sizes and Srcset](https://pine-design-system.netlify.app/?path=/docs/components-image--docs#sizes-and-srcset)"
      },
      "attributes": [
        {
          "name": "alt",
          "description": {
            "kind": "markdown",
            "value": "The image's alt tag. If none is provided,\nit will default to an empty string, which is desired for\ndecorative images.\n\n**Default:** `''`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "height",
          "description": {
            "kind": "markdown",
            "value": "The height of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded.\n\n**Type:** `number`"
          }
        },
        {
          "name": "loading",
          "description": {
            "kind": "markdown",
            "value": "Indicates how the browser should load the image.\n\n**Type:** `\"eager\" | \"lazy\"`\n\n**Default:** `'eager'`"
          },
          "values": [
            {
              "name": "eager"
            },
            {
              "name": "lazy"
            }
          ]
        },
        {
          "name": "sizes",
          "description": {
            "kind": "markdown",
            "value": "Determines the intended display size of an image\nwithin certain breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
          }
        },
        {
          "name": "src",
          "description": {
            "kind": "markdown",
            "value": "The image's source."
          }
        },
        {
          "name": "srcset",
          "description": {
            "kind": "markdown",
            "value": "A set of image sources for the browser to use\nfor responsiveness."
          }
        },
        {
          "name": "width",
          "description": {
            "kind": "markdown",
            "value": "The width of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded.\n\n**Type:** `number`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-image--docs"
        }
      ]
    },
    {
      "name": "pds-input",
      "description": {
        "kind": "markdown",
        "value": "Input captures a single line of text from the user, paired with a label and optional helper or error message. Use it for names, emails, IDs, and other short freeform values.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#default), [Input Types](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#input-types), [Required](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#required), [Placeholder](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#placeholder), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#disabled), [Readonly](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#readonly), [Highlight](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#highlight), [Full Width](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#full-width), [Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#helper-message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#invalid), [Prefix and Suffix](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#prefix-and-suffix), [Action Slot](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#action-slot), [Prepend and Append](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#prepend-and-append), [Usage Guidelines](https://pine-design-system.netlify.app/?path=/docs/components-input--docs#usage-guidelines)\n\n**Slots:**\n- `action` - Content to be displayed in the label area, typically for help icons or links\n- `append` - Content to be displayed after the input field\n- `prefix` - Content that is displayed visually within the input field before the input field\n- `prepend` - Content to be displayed before the input field\n- `suffix` - Content that is displayed visually within the input field after the input field\n\n**CSS Parts:**\n- `action` - No description\n- `append` - No description\n- `prefix` - No description\n- `prepend` - No description\n- `suffix` - No description\n\n**Events:**\n- `pdsBlur` - Emitted when the input loses focus.\n- `pdsChange` - Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property.\n- `pdsFocus` - Emitted when the input has focus.\n- `pdsInput` - Emitted when a keyboard input occurs.\n- `pdsKeyDown` - Emitted when a key is pressed down in the input."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": {
            "kind": "markdown",
            "value": "Specifies if and how the browser provides `autocomplete` assistance for the field."
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "debounce",
          "description": {
            "kind": "markdown",
            "value": "Sets the number of milliseconds to wait before updating the value.\n\n**Type:** `number`"
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the input field is disabled."
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Specifies the error message and provides an error-themed treatment to the field."
          }
        },
        {
          "name": "full-width",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the input field takes full width of its container."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays a message or hint below the input field."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
          }
        },
        {
          "name": "highlight",
          "description": {
            "kind": "markdown",
            "value": "Applies highlight styling to the input field."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the input field is invalid or throws an error."
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Text to be displayed as the input label."
          }
        },
        {
          "name": "max",
          "description": {
            "kind": "markdown",
            "value": "Specifies the maximum value for the input field."
          }
        },
        {
          "name": "maxlength",
          "description": {
            "kind": "markdown",
            "value": "Specifies the maximum number of characters allowed in the input field."
          }
        },
        {
          "name": "min",
          "description": {
            "kind": "markdown",
            "value": "Specifies the minimum value for the input field."
          }
        },
        {
          "name": "minlength",
          "description": {
            "kind": "markdown",
            "value": "Specifies the minimum number of characters allowed in the input field."
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Specifies the name. Submitted with the form name/value pair."
          }
        },
        {
          "name": "pattern",
          "description": {
            "kind": "markdown",
            "value": "Specifies the regular expression that the input value is checked against."
          }
        },
        {
          "name": "placeholder",
          "description": {
            "kind": "markdown",
            "value": "Specifies a short hint that describes the expected value of the input field."
          }
        },
        {
          "name": "readonly",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the input field is readonly."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the input field is required."
          }
        },
        {
          "name": "step",
          "description": {
            "kind": "markdown",
            "value": "Works with the `min` and `max` attributes to define increments for the input field."
          }
        },
        {
          "name": "type",
          "description": {
            "kind": "markdown",
            "value": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n\n**Default:** `'text'`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value of the input.\n\n**Type:** `number | string`\n\n**Default:** `''`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-input--docs"
        }
      ]
    },
    {
      "name": "pds-link",
      "description": {
        "kind": "markdown",
        "value": "A hyperlink is used as a navigational element to direct users to another location on the website or application.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#default), [Colors](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#colors), [Plain](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#plain), [External](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#external), [Target](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#target), [Font Size](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#font-size), [Custom Slot Text](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#custom-slot-text), [No Custom Slot Text](https://pine-design-system.netlify.app/?path=/docs/components-link--docs#no-custom-slot-text)\n\n**Slots:**\n- `(default)` - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n\n**CSS Parts:**\n- `link` - Link element styles."
      },
      "attributes": [
        {
          "name": "color",
          "description": {
            "kind": "markdown",
            "value": "Sets the link color."
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "download",
          "description": {
            "kind": "markdown",
            "value": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download."
          }
        },
        {
          "name": "external",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the link should open in a new tab.\n\n**Default:** `false`\n\n⚠️ **Deprecated:** Consider using the `target` prop for more control. This prop will be maintained for backward compatibility."
          }
        },
        {
          "name": "font-size",
          "description": {
            "kind": "markdown",
            "value": "The font size of the link's text.\n\n**Type:** `\"lg\" | \"md\" | \"sm\"`\n\n**Default:** `'lg'`"
          },
          "values": [
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            }
          ]
        },
        {
          "name": "href",
          "description": {
            "kind": "markdown",
            "value": "The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used."
          }
        },
        {
          "name": "target",
          "description": {
            "kind": "markdown",
            "value": "Specifies where to open the linked document.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
          },
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_parent"
            },
            {
              "name": "_self"
            },
            {
              "name": "_top"
            }
          ]
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Sets the link variant styles.\n\n**Type:** `\"inline\" | \"plain\"`\n\n**Default:** `'inline'`"
          },
          "values": [
            {
              "name": "inline"
            },
            {
              "name": "plain"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-link--docs"
        }
      ]
    },
    {
      "name": "pds-loader",
      "description": {
        "kind": "markdown",
        "value": "Loaders signal that an operation is in progress via an animated spinner or typing indicator. Use them during time-consuming tasks to reassure users that the system is working.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-loader--docs#default), [Visible Label](https://pine-design-system.netlify.app/?path=/docs/components-loader--docs#visible-label), [Loader Size](https://pine-design-system.netlify.app/?path=/docs/components-loader--docs#loader-size), [Typing](https://pine-design-system.netlify.app/?path=/docs/components-loader--docs#typing)\n\n**Slots:**\n- `label` - Default slot for Loader label text.\n\n**CSS Parts:**\n- `loader-svg` - Exposes the spinner SVG element for color customization."
      },
      "attributes": [
        {
          "name": "is-loading",
          "description": {
            "kind": "markdown",
            "value": "If false, the loader will be hidden.\n\n**Default:** `true`"
          }
        },
        {
          "name": "show-label",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the loader should display a label.\n\n**Default:** `false`"
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the size of the spinner loader. Value can be preset or custom.\n\n**Default:** `'md'`"
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Determines the type of loader.\n\n**Type:** `\"spinner\" | \"typing\"`\n\n**Default:** `'spinner'`"
          },
          "values": [
            {
              "name": "spinner"
            },
            {
              "name": "typing"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-loader--docs"
        }
      ]
    },
    {
      "name": "pds-modal",
      "description": {
        "kind": "markdown",
        "value": "Modals display content in a dialog that temporarily blocks interaction with the underlying page. Use them for confirmations, focused forms, or detailed information that demands attention without navigating away.\n\n**Examples:**\n[Variants](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#variants), [Default](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#default), [Sizes](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#sizes), [Destructive Actions](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#destructive-actions), [Scrollable Content](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#scrollable-content), [Nested Modals](https://pine-design-system.netlify.app/?path=/docs/components-modal--docs#nested-modals)\n\n**CSS Parts:**\n- `modal` - No description\n\n**Events:**\n- `pdsModalClose` - Emitted when the modal is closed\n- `pdsModalOpen` - Emitted when the modal is opened"
      },
      "attributes": [
        {
          "name": "backdrop-dismiss",
          "description": {
            "kind": "markdown",
            "value": "Whether the modal can be dismissed by clicking the backdrop\n\n**Default:** `true`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "open",
          "description": {
            "kind": "markdown",
            "value": "Whether the modal is open\n\n**Default:** `false`"
          }
        },
        {
          "name": "scrollable",
          "description": {
            "kind": "markdown",
            "value": "Whether the modal content should be scrollable\n\n**Default:** `true`"
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "The size of the modal\n\n**Type:** `\"fullscreen\" | \"lg\" | \"md\" | \"sm\"`\n\n**Default:** `'md'`"
          },
          "values": [
            {
              "name": "fullscreen"
            },
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-modal--docs"
        }
      ]
    },
    {
      "name": "pds-modal-content",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "The border style for the content area. When not explicitly set, automatically determined based on scroll state.\n\n**Type:** `\"both\" | \"bottom\" | \"none\" | \"top\"`\n\n**Default:** `'none'`"
          },
          "values": [
            {
              "name": "both"
            },
            {
              "name": "bottom"
            },
            {
              "name": "none"
            },
            {
              "name": "top"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-modal-content--docs"
        }
      ]
    },
    {
      "name": "pds-modal-footer",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-modal-footer--docs"
        }
      ]
    },
    {
      "name": "pds-modal-header",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-modal-header--docs"
        }
      ]
    },
    {
      "name": "pds-multiselect",
      "description": {
        "kind": "markdown",
        "value": "Multiselects let users pick several options from a searchable dropdown list. The trigger displays the selected count while the panel surfaces a filterable list of choices.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#default), [With Preselected Values](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-preselected-values), [Hidden Selected Items](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#hidden-selected-items), [Max Selections](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#max-selections), [Custom Widths](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#custom-widths), [Async with URL](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#async-with-url), [Consumer-Managed Async](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#consumer-managed-async), [With Error State](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-error-state), [With Create Option](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-create-option)\n\n**Slots:**\n- `(default)` - Static option elements for the multiselect\n- `empty` - Custom empty state message when no options match\n- `loading` - Custom loading indicator\n\n**CSS Parts:**\n- `pill-toggle` - The chevron button inside the inline pill trigger\n- `trigger` - The trigger surface that opens the dropdown panel\n\n**Events:**\n- `pdsMultiselectChange` - Emitted when selection changes.\n- `pdsMultiselectCreate` - Emitted when a new option is created.\n- `pdsMultiselectDismiss` - Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- ✅ Fires: Pressing Escape key while dropdown is open\n- ✅ Fires: Clicking outside the component while dropdown is open\n- ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.\n- `pdsMultiselectLoadOptions` - Emitted to request more options (pagination).\n- `pdsMultiselectSearch` - Emitted on search input (for consumer-managed async)."
      },
      "attributes": [
        {
          "name": "async-method",
          "description": {
            "kind": "markdown",
            "value": "HTTP method for async requests.\n\n**Type:** `\"GET\" | \"POST\"`\n\n**Default:** `'GET'`"
          },
          "values": [
            {
              "name": "GET"
            },
            {
              "name": "POST"
            }
          ]
        },
        {
          "name": "async-url",
          "description": {
            "kind": "markdown",
            "value": "URL endpoint for async data fetching."
          }
        },
        {
          "name": "close-panel-on-select",
          "description": {
            "kind": "markdown",
            "value": "Whether to close the panel after an option is selected.\nDefaults to `false` (panel stays open for multi-select).\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "create-url",
          "description": {
            "kind": "markdown",
            "value": "URL endpoint for creating new options. When set, shows \"Add\" option when no matches found."
          }
        },
        {
          "name": "csrf-header-name",
          "description": {
            "kind": "markdown",
            "value": "CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.\n\n**Default:** `'X-CSRF-Token'`"
          }
        },
        {
          "name": "csrf-token",
          "description": {
            "kind": "markdown",
            "value": "CSRF token for authenticated requests. If not provided, attempts to read from meta tag."
          }
        },
        {
          "name": "debounce",
          "description": {
            "kind": "markdown",
            "value": "Debounce delay in milliseconds for search/fetch.\n\n**Type:** `number`\n\n**Default:** `300`"
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the multiselect is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Error message to display."
          }
        },
        {
          "name": "fetch-timeout",
          "description": {
            "kind": "markdown",
            "value": "Timeout in milliseconds for async fetch requests.\n\n**Type:** `number`\n\n**Default:** `30000`"
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Helper message to display below the input."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label but keeps it accessible.\n\n**Default:** `false`"
          }
        },
        {
          "name": "hide-selected-items",
          "description": {
            "kind": "markdown",
            "value": "Hides the selected items summary section in the dropdown panel.\n\n**Default:** `false`"
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "If true, the multiselect is in an invalid state."
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Text to be displayed as the multiselect label."
          }
        },
        {
          "name": "loading",
          "description": {
            "kind": "markdown",
            "value": "Whether the component is currently loading async options.\n\n**Default:** `false`"
          }
        },
        {
          "name": "max-height",
          "description": {
            "kind": "markdown",
            "value": "Maximum height of the dropdown before scrolling.\n\n**Default:** `'300px'`"
          }
        },
        {
          "name": "max-inline-pills",
          "description": {
            "kind": "markdown",
            "value": "Maximum chips shown inline before collapsing to a \"+N more\" badge.\nOnly applies when `selectedDisplay='pill'` and `pillPosition='inline'`.\n\n**Type:** `number`\n\n**Default:** `3`"
          }
        },
        {
          "name": "max-selections",
          "description": {
            "kind": "markdown",
            "value": "Maximum number of selections allowed.\n\n**Type:** `number`"
          }
        },
        {
          "name": "min-width",
          "description": {
            "kind": "markdown",
            "value": "Minimum width of the dropdown panel.\n\n**Default:** `'250px'`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Specifies the name. Submitted with the form as part of a name/value pair."
          }
        },
        {
          "name": "panel-width",
          "description": {
            "kind": "markdown",
            "value": "Width of the dropdown panel. Defaults to the trigger width."
          }
        },
        {
          "name": "pill-position",
          "description": {
            "kind": "markdown",
            "value": "Position of pill chips when `selectedDisplay` is `'pill'`.\n`'inline'` places chips inside the trigger; `'below'` places chips in a\nflex-wrap row directly below the trigger.\n\n**Type:** `\"below\" | \"inline\"`\n\n**Default:** `'inline'`"
          },
          "values": [
            {
              "name": "below"
            },
            {
              "name": "inline"
            }
          ]
        },
        {
          "name": "placeholder",
          "description": {
            "kind": "markdown",
            "value": "Placeholder text for the input field.\n\n**Default:** `'Select...'`"
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "If true, the multiselect is required.\n\n**Default:** `false`"
          }
        },
        {
          "name": "search-placeholder",
          "description": {
            "kind": "markdown",
            "value": "Placeholder text for the search input inside the dropdown panel.\n\n**Default:** `'Find...'`"
          }
        },
        {
          "name": "selected-display",
          "description": {
            "kind": "markdown",
            "value": "Display mode for selected items outside the dropdown panel.\n`'count'` shows \"N item(s)\" text in the trigger (default). `'pill'` renders\nselected items as dismissible pds-chip tags.\n\n**Type:** `\"count\" | \"pill\"`\n\n**Default:** `'count'`"
          },
          "values": [
            {
              "name": "count"
            },
            {
              "name": "pill"
            }
          ]
        },
        {
          "name": "trigger-width",
          "description": {
            "kind": "markdown",
            "value": "Width of the trigger button (and reference for dropdown positioning).\n\n**Default:** `'100%'`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs"
        }
      ]
    },
    {
      "name": "pds-popover",
      "description": {
        "kind": "markdown",
        "value": "Popovers display contextual information when users click or initiates a keyboard event on an element. They typically contain more information than tooltips and can include interactive elements.\n\n**Examples:**\n[Trigger Slot](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#trigger-slot), [Behavior Types](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#behavior-types), [Target Actions](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#target-actions), [Width/Sizing](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#width/sizing)\n\n**Slots:**\n- `(default)` - The content to display inside the popover\n- `trigger` - The trigger element for the popover\n\n**Events:**\n- `pdsPopoverClose` - Emitted when the popover is closed\n- `pdsPopoverOpen` - Emitted when the popover is opened"
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "max-width",
          "description": {
            "kind": "markdown",
            "value": "Sets the maximum width of the popover content\n\n**Type:** `number`\n\n**Default:** `352`"
          }
        },
        {
          "name": "placement",
          "description": {
            "kind": "markdown",
            "value": "Determines the preferred position of the popover\n\n**Type:** `\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"`\n\n**Default:** `'right'`"
          },
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "popover-target-action",
          "description": {
            "kind": "markdown",
            "value": "Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n\n**Type:** `\"hide\" | \"show\" | \"toggle\"`\n\n**Default:** `'show'`"
          },
          "values": [
            {
              "name": "hide"
            },
            {
              "name": "show"
            },
            {
              "name": "toggle"
            }
          ]
        },
        {
          "name": "popover-type",
          "description": {
            "kind": "markdown",
            "value": "Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\nManual popovers require the consumer to handle the visibility of the popover.\n\n**Type:** `\"auto\" | \"manual\"`\n\n**Default:** `'auto'`"
          },
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "manual"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-popover--docs"
        }
      ]
    },
    {
      "name": "pds-progress",
      "description": {
        "kind": "markdown",
        "value": "Progress bars visualize how far a task has advanced toward completion. They help users gauge wait time during uploads, downloads, or other long-running operations.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#default), [Percent](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#percent), [Show Percent](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#show-percent), [Animated](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#animated), [Fill Color](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#fill-color), [Fill Color with Gradient](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#fill-color-with-gradient), [Tooltip](https://pine-design-system.netlify.app/?path=/docs/components-progress--docs#tooltip)"
      },
      "attributes": [
        {
          "name": "animated",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not progress is animated.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
          }
        },
        {
          "name": "fill-color",
          "description": {
            "kind": "markdown",
            "value": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "String used for label text. Label is visually hidden but required for better accessibility."
          }
        },
        {
          "name": "percent",
          "description": {
            "kind": "markdown",
            "value": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n\n**Type:** `number`\n\n**Default:** `0`"
          }
        },
        {
          "name": "show-percent",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the percent value should be displayed as text.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-progress--docs"
        }
      ]
    },
    {
      "name": "pds-property",
      "description": {
        "kind": "markdown",
        "value": "Properties pair an icon with a short label to present key-value pairs, status indicators, or tagged information in a compact horizontal layout. An icon is always shown; unspecified icons default to a star.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-property--docs#default), [With Custom Icon](https://pine-design-system.netlify.app/?path=/docs/components-property--docs#with-custom-icon), [Various Icons](https://pine-design-system.netlify.app/?path=/docs/components-property--docs#various-icons)\n\n**Slots:**\n- `(default)` - The property text content."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "icon",
          "description": {
            "kind": "markdown",
            "value": "The name of the icon to display before the property text.\n\n**Default:** `'star'`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-property--docs"
        }
      ]
    },
    {
      "name": "pds-radio",
      "description": {
        "kind": "markdown",
        "value": "Radio components allow users to select one option from a group of two or more choices.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#default), [Checked](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#checked), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#disabled), [Message](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#invalid), [With Border](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#with-border), [Group](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#group), [With Image](https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs#with-image)\n\n**Slots:**\n- `image` - Custom image content to display instead of the default radio input\n\n**CSS Parts:**\n- `image-container` - The container for the image\n\n**Events:**\n- `pdsRadioChange` - Emits a boolean indicating whether the radio is currently checked or unchecked."
      },
      "attributes": [
        {
          "name": "checked",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio is checked.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays error message text describing an invalid state."
          }
        },
        {
          "name": "has-border",
          "description": {
            "kind": "markdown",
            "value": "Adds a border around the radio component for better visual separation.\n\n**Default:** `false`"
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays helper message text below radio."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio is invalid.\n\n**Default:** `false`"
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "String used for label text next to radio."
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "String used for radio `name` attribute."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio is required.\n\n**Default:** `false`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value of the radio that is submitted with a form."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-radio-group-radio--docs"
        }
      ]
    },
    {
      "name": "pds-radio-group",
      "description": {
        "kind": "markdown",
        "value": "Radio Groups wrap a set of related radio inputs, displaying a single error message and helper message for the whole group. Use them whenever users must pick exactly one option from a set.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#default), [With Label](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#with-label), [With Helper Messages on Child Radios](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#with-helper-messages-on-child-radios), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#invalid), [With Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#with-helper-message), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#disabled), [Horizontal Layout](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#horizontal-layout), [With Images](https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs#with-images)\n\n**Slots:**\n- `(default)` - Child pds-radio components\n\n**Events:**\n- `pdsRadioGroupChange` - Emits when a radio in the group is selected, providing the selected value and component ID."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "direction",
          "description": {
            "kind": "markdown",
            "value": "Layout direction for the radio group.\n\n**Type:** `\"column\" | \"row\"`\n\n**Default:** `'column'`"
          },
          "values": [
            {
              "name": "column"
            },
            {
              "name": "row"
            }
          ]
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio group is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays error message text describing an invalid state for the entire group."
          }
        },
        {
          "name": "gap",
          "description": {
            "kind": "markdown",
            "value": "Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).\n\n**Default:** `'xs'`"
          }
        },
        {
          "name": "group-label",
          "description": {
            "kind": "markdown",
            "value": "String used for group label/heading."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays helper message text below the radio group."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio group is invalid.\n\n**Default:** `false`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "String used for radio `name` attribute. Applied to all child radios.\nRequired for proper radio group behavior (mutual exclusivity and form submission)."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the radio group is required.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-radio-group--docs"
        }
      ]
    },
    {
      "name": "pds-row",
      "description": {
        "kind": "markdown",
        "value": "Row is a flexbox-based grid container that arranges content into responsive columns. It uses a 12-column system for laying out horizontal rows."
      },
      "attributes": [
        {
          "name": "align-items",
          "description": {
            "kind": "markdown",
            "value": "Defines the vertical alignment of the row items.\n\n**Type:** `\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"`"
          },
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the row will have a border.\n\n**Default:** `false`"
          }
        },
        {
          "name": "col-gap",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the row items.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "col-gap-block",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the row items vertically.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "col-gap-inline",
          "description": {
            "kind": "markdown",
            "value": "Defines the spacing between the row items horizontally.\n\n**Type:** `\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"`"
          },
          "values": [
            {
              "name": "none"
            },
            {
              "name": "xxs"
            },
            {
              "name": "xs"
            },
            {
              "name": "sm"
            },
            {
              "name": "md"
            },
            {
              "name": "lg"
            },
            {
              "name": "xl"
            },
            {
              "name": "xxl"
            },
            {
              "name": "025"
            },
            {
              "name": "050"
            },
            {
              "name": "100"
            },
            {
              "name": "125"
            },
            {
              "name": "150"
            },
            {
              "name": "200"
            },
            {
              "name": "250"
            },
            {
              "name": "300"
            },
            {
              "name": "350"
            },
            {
              "name": "400"
            },
            {
              "name": "450"
            },
            {
              "name": "500"
            },
            {
              "name": "550"
            },
            {
              "name": "600"
            },
            {
              "name": "650"
            },
            {
              "name": "700"
            },
            {
              "name": "750"
            },
            {
              "name": "800"
            }
          ]
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "justify-content",
          "description": {
            "kind": "markdown",
            "value": "Defines the horizontal alignment of the row items.\n\n**Type:** `\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "min-height",
          "description": {
            "kind": "markdown",
            "value": "The minimum height of the row. Used in conjunction with alignment props"
          }
        },
        {
          "name": "no-wrap",
          "description": {
            "kind": "markdown",
            "value": "If `true`, the row items will not wrap to the next line if horizontal space is not available.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-layout-row--docs"
        }
      ]
    },
    {
      "name": "pds-select",
      "description": {
        "kind": "markdown",
        "value": "Selects present a single-choice dropdown, letting users pick one value from a predefined set of options.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#default), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#disabled), [Highlight](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#highlight), [With Message](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#with-message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#invalid), [Autocomplete](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#autocomplete), [Multiple](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#multiple), [With Optgroup](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#with-optgroup), [Action Slot](https://pine-design-system.netlify.app/?path=/docs/components-select--docs#action-slot)\n\n**Slots:**\n- `action` - Content to be displayed in the label area, typically for help icons or links\n\n**CSS Parts:**\n- `action` - No description\n- `select` - No description\n\n**Events:**\n- `pdsBlur` - Emitted when the select loses focus.\n- `pdsFocus` - Emitted when the select gains focus.\n- `pdsKeyDown` - Emitted when a key is pressed down in the select.\n- `pdsSelectChange` - Emitted when the select value changes."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": {
            "kind": "markdown",
            "value": "Specifies if and how the browser provides `autocomplete` assistance for the field."
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Indicates whether or not the select field is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays error message text describing an invalid state."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays helper message text below select."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the select should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
          }
        },
        {
          "name": "highlight",
          "description": {
            "kind": "markdown",
            "value": "Applies highlight styling to the select field."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the select is invalid."
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Text to be displayed as the select label."
          }
        },
        {
          "name": "multiple",
          "description": {
            "kind": "markdown",
            "value": "Indicates whether multiple options can be selected.\n\n**Default:** `false`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Specifies the name. Submitted with the form name/value pair."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Indicates whether or not the select field is required.\n\n**Default:** `false`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value(s) of the selected option(s).\n\n**Type:** `string | string[]`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-select--docs"
        }
      ]
    },
    {
      "name": "pds-sortable",
      "description": {
        "kind": "markdown",
        "value": "Sortable is for creating containers of items that can be sorted via drag and drop functionality.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#default), [Bordered](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#bordered), [Dividers](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#dividers), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#disabled), [Handle](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#handle), [Handle vs. Row `handle-type`](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#handle-vs.-row-`handle-type`), [Actions](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#actions), [Demo](https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs#demo)\n\n**Events:**\n- `pdsSortableItemMoved` - Event emitted when a sortable item is moved."
      },
      "attributes": [
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `sortable` should have a border.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the sortable container `id` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the sortable is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "dividers",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `sortable` items should be divided with border.\n\n**Default:** `false`"
          }
        },
        {
          "name": "handle-type",
          "description": {
            "kind": "markdown",
            "value": "Determines the grabbable area for the `pds-sortable-item`.\n\n**Type:** `\"handle\" | \"row\"`\n\n**Default:** `'row'`"
          },
          "values": [
            {
              "name": "handle"
            },
            {
              "name": "row"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-sortable--docs"
        }
      ]
    },
    {
      "name": "pds-sortable-item",
      "description": {
        "kind": "markdown",
        "value": "\n\n**Slots:**\n- `sortable-item-actions` - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the sortable item `id` attribute."
          }
        },
        {
          "name": "enable-actions",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `sortable-item-actions` slot should be enabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "show-handle",
          "description": {
            "kind": "markdown",
            "value": "Determines whether `sortable-item` should have a handle.\n\n**Default:** `false`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-sortable-sortable-item--docs"
        }
      ]
    },
    {
      "name": "pds-switch",
      "description": {
        "kind": "markdown",
        "value": "Switches toggle a single setting between on and off, rendered as a sliding thumb inside a track. They work as form-associated inputs whose checked state submits with the surrounding form.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#default), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#disabled), [Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#helper-message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#invalid)\n\n**Events:**\n- `pdsSwitchChange` - Emits an event on input change."
      },
      "attributes": [
        {
          "name": "checked",
          "description": {
            "kind": "markdown",
            "value": "Determines the input 'checked' state.\n\n**Default:** `false`"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines the input 'disabled' state, preventing user interaction.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays message text describing an invalid state."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays help text for additional description of an input."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines the input 'invalid' state, signifying an error is present.\n\n**Default:** `false`"
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Displays text to describe the input."
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Identifies form data and unifies a group of radio inputs for toggling a single property/value."
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Determines the 'required' state of the input.\n\n**Default:** `false`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "Provides input with a string submitted in form data."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-switch--docs"
        }
      ]
    },
    {
      "name": "pds-tab",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines the tab's disabled state.\n\n**Default:** `false`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-tabs-tab--docs"
        }
      ]
    },
    {
      "name": "pds-table",
      "description": {
        "kind": "markdown",
        "value": "Tables display tabular data using semantic subcomponents for head, head-cell, body, row, and cell roles. Use pds-table-head, pds-table-head-cell, pds-table-body, pds-table-row, and pds-table-cell to compose rows and columns accessibly.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default), [Compact](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#compact), [Head Background and Row Dividers](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#head-background-and-row-dividers), [Selectable](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#selectable), [Selectable without Select All](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#selectable-without-select-all), [Responsive](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#responsive), [Fixed Column](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-column), [Fixed w/ Checkbox](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-w/-checkbox), [Cell Truncation](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-truncation), [Cell Alignment](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-alignment), [Sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#sorting), [Event payload](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#event-payload), [Preventing built-in sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#preventing-built-in-sorting), [Default Sort](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default-sort)\n\n**CSS Parts:**\n- `responsive-container` - No description\n- `responsive-table` - No description\n- `responsive-wrapper` - No description\n- `scroll-shadow-left` - No description\n- `scroll-shadow-right` - No description\n- `table` - No description\n- `table-inner` - No description\n\n**Events:**\n- `pdsTableSelectAll` - Event that is emitted when the select all checkbox is clicked, carrying the selected value."
      },
      "attributes": [
        {
          "name": "compact",
          "description": {
            "kind": "markdown",
            "value": "Determines if the table displays with reduced table cell padding."
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the table `id` attribute."
          }
        },
        {
          "name": "default-sort-column",
          "description": {
            "kind": "markdown",
            "value": "The name of the column to sort by on initial load.\nMust match the text content of a sortable column header."
          }
        },
        {
          "name": "default-sort-direction",
          "description": {
            "kind": "markdown",
            "value": "The direction to sort the default column on initial load.\nOnly applies if `defaultSortColumn` is set.\n\n**Type:** `\"asc\" | \"desc\"`\n\n**Default:** `'asc'`"
          },
          "values": [
            {
              "name": "asc"
            },
            {
              "name": "desc"
            }
          ]
        },
        {
          "name": "disable-select-all",
          "description": {
            "kind": "markdown",
            "value": "Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\nOnly applies when `selectable` is true.\n\n**Default:** `false`"
          }
        },
        {
          "name": "fixed-column",
          "description": {
            "kind": "markdown",
            "value": "Determines if the should display a fixed first column."
          }
        },
        {
          "name": "responsive",
          "description": {
            "kind": "markdown",
            "value": "Enables the table to be responsive by horizontally scrolling on smaller screens."
          }
        },
        {
          "name": "row-dividers",
          "description": {
            "kind": "markdown",
            "value": "Adds divider borders between table rows. The last row will not have a bottom border.\n\n**Default:** `false`"
          }
        },
        {
          "name": "selectable",
          "description": {
            "kind": "markdown",
            "value": "Determines if the table displays checkboxes for selectable rows."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table--docs"
        }
      ]
    },
    {
      "name": "pds-table-body",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `body` - No description"
      },
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table-body--docs"
        }
      ]
    },
    {
      "name": "pds-table-cell",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `cell` - No description"
      },
      "attributes": [
        {
          "name": "cell-align",
          "description": {
            "kind": "markdown",
            "value": "Sets the text alignment within the cell.\n\n**Type:** `\"center\" | \"end\" | \"justify\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "justify"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "truncate",
          "description": {
            "kind": "markdown",
            "value": "Truncates content to a max width and adds an ellipsis.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table-cells--docs"
        }
      ]
    },
    {
      "name": "pds-table-head",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `head` - No description\n- `select-all-checkbox` - No description\n\n**Events:**\n- `pdsTableSelectAll` - Event that is emitted when the select all checkbox is clicked, carrying the selected value."
      },
      "attributes": [
        {
          "name": "background",
          "description": {
            "kind": "markdown",
            "value": "Adds a subtle background color to the table head.\n\n**Default:** `false`"
          }
        },
        {
          "name": "border",
          "description": {
            "kind": "markdown",
            "value": "Adds top and bottom borders to the table head.\n\n**Default:** `false`"
          }
        },
        {
          "name": "indeterminate",
          "description": {
            "kind": "markdown",
            "value": "Determines if the select all checkbox is in an indeterminate state."
          }
        },
        {
          "name": "is-selected",
          "description": {
            "kind": "markdown",
            "value": "Determines if the table row is currently selected."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table-head--docs"
        }
      ]
    },
    {
      "name": "pds-table-head-cell",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `head-cell` - No description\n- `sort-icon` - No description\n\n**Events:**\n- `pdsTableSort` - Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction."
      },
      "attributes": [
        {
          "name": "cell-align",
          "description": {
            "kind": "markdown",
            "value": "Sets the text alignment within the head cell.\n\n**Type:** `\"center\" | \"end\" | \"justify\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "justify"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "sortable",
          "description": {
            "kind": "markdown",
            "value": "Determines whether the table column is sortable when set to `true`."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table-head--docs"
        }
      ]
    },
    {
      "name": "pds-table-row",
      "description": {
        "kind": "markdown",
        "value": "\n\n**CSS Parts:**\n- `row` - No description\n- `row-checkbox` - No description\n\n**Events:**\n- `pdsTableRowSelected` - Event that is emitted when the checkbox is clicked, carrying the selected value."
      },
      "attributes": [
        {
          "name": "indeterminate",
          "description": {
            "kind": "markdown",
            "value": "Determines if the row selected is in an indeterminate state."
          }
        },
        {
          "name": "is-selected",
          "description": {
            "kind": "markdown",
            "value": "Determines if the table row is currently selected."
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-table-rows--docs"
        }
      ]
    },
    {
      "name": "pds-tabpanel",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Sets the related tab name, this name must match a `pds-tab`'s tab name property"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-tabs-tabpanel--docs"
        }
      ]
    },
    {
      "name": "pds-tabs",
      "description": {
        "kind": "markdown",
        "value": "Tabs organize related content into separate panels that users switch between using a horizontal button bar, keeping only one panel visible at a time.\n\n**Examples:**\n[Variant](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#variant), [Primary](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#primary), [Pill](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#pill), [Availability](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#availability), [Filter](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#filter), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs#disabled)\n\n**Slots:**\n- `tabpanels` - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n- `tabs` - Content is placed within the `div[role=\"tablist\"]` element as children\n\n**CSS Parts:**\n- `tab-list` - Exposes the container element that holds all the tab buttons for styling."
      },
      "attributes": [
        {
          "name": "active-tab-name",
          "description": {
            "kind": "markdown",
            "value": "Sets the starting active tab name and maintains the name as the component re-renders"
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "tablist-label",
          "description": {
            "kind": "markdown",
            "value": "Sets the aria-label attached to the tablist element"
          }
        },
        {
          "name": "variant",
          "description": {
            "kind": "markdown",
            "value": "Sets tabs variant styles as outlined in Figma documentation\n\n**Type:** `\"availability\" | \"filter\" | \"pill\" | \"primary\"`"
          },
          "values": [
            {
              "name": "availability"
            },
            {
              "name": "filter"
            },
            {
              "name": "pill"
            },
            {
              "name": "primary"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-tabs--docs"
        }
      ]
    },
    {
      "name": "pds-text",
      "description": {
        "kind": "markdown",
        "value": "Text renders content using configurable semantic HTML tags for headings or body copy, applying Pine's typography tokens consistently across the interface.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#default), [Alignment](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#alignment), [Color](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#color), [Decoration](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#decoration), [Font Size](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#font-size), [Font Weight](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#font-weight), [Gutters](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#gutters), [Italics](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#italics), [Truncation](https://pine-design-system.netlify.app/?path=/docs/components-text--docs#truncation)\n\n**CSS Parts:**\n- `content` - The text content container"
      },
      "attributes": [
        {
          "name": "align",
          "description": {
            "kind": "markdown",
            "value": "Sets the text alignment.\n\n**Type:** `\"center\" | \"end\" | \"justify\" | \"start\"`"
          },
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "justify"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "color",
          "description": {
            "kind": "markdown",
            "value": "Sets the text color."
          }
        },
        {
          "name": "decoration",
          "description": {
            "kind": "markdown",
            "value": "Sets the text decoration.\n\n**Type:** `\"strikethrough\" | \"underline-dotted\"`"
          },
          "values": [
            {
              "name": "strikethrough"
            },
            {
              "name": "underline-dotted"
            }
          ]
        },
        {
          "name": "gutter",
          "description": {
            "kind": "markdown",
            "value": "Set the bottom margin for the text.\n\n**Type:** `\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"`"
          },
          "values": [
            {
              "name": "2xl"
            },
            {
              "name": "2xs"
            },
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            },
            {
              "name": "xl"
            },
            {
              "name": "xs"
            }
          ]
        },
        {
          "name": "italic",
          "description": {
            "kind": "markdown",
            "value": "If set or `true`, the text will be italic."
          }
        },
        {
          "name": "size",
          "description": {
            "kind": "markdown",
            "value": "Sets the font size.\n\n**Type:** `\"2xl\" | \"2xs\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"`"
          },
          "values": [
            {
              "name": "2xl"
            },
            {
              "name": "2xs"
            },
            {
              "name": "h1"
            },
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            },
            {
              "name": "lg"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            },
            {
              "name": "xl"
            },
            {
              "name": "xs"
            }
          ]
        },
        {
          "name": "tag",
          "description": {
            "kind": "markdown",
            "value": "Determines what semantic text tag to render.\n\n**Type:** `\"code\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"span\" | \"strong\"`\n\n**Default:** `'p'`"
          },
          "values": [
            {
              "name": "code"
            },
            {
              "name": "em"
            },
            {
              "name": "h1"
            },
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            },
            {
              "name": "p"
            },
            {
              "name": "pre"
            },
            {
              "name": "span"
            },
            {
              "name": "strong"
            }
          ]
        },
        {
          "name": "truncate",
          "description": {
            "kind": "markdown",
            "value": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
          }
        },
        {
          "name": "weight",
          "description": {
            "kind": "markdown",
            "value": "Sets the font weight.\n\n**Type:** `\"bold\" | \"extra-light\" | \"light\" | \"medium\" | \"regular\" | \"semibold\"`"
          },
          "values": [
            {
              "name": "bold"
            },
            {
              "name": "extra-light"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "regular"
            },
            {
              "name": "semibold"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-text--docs"
        }
      ]
    },
    {
      "name": "pds-textarea",
      "description": {
        "kind": "markdown",
        "value": "Textarea captures multi-line text from the user, paired with a label and optional helper or error message. Use it for freeform content like comments, descriptions, or messages.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#default), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#disabled), [Error Message](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#error-message), [Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#helper-message), [Placeholder](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#placeholder), [Readonly](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#readonly), [Highlight](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#highlight), [Required](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#required), [Rows](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#rows), [Max Length](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#max-length), [Action Slot](https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs#action-slot)\n\n**Slots:**\n- `action` - Content to be displayed in the label area, typically for help icons or links\n\n**CSS Parts:**\n- `action` - No description\n\n**Events:**\n- `pdsBlur` - Emitted when the input loses focus.\n- `pdsFocus` - Emitted when the input has focus.\n- `pdsInput` - Emitted when a keyboard input occurs.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.\n- `pdsKeyDown` - Emitted when a key is pressed down in the textarea.\n- `pdsTextareaChange` - Event emitted whenever the value of the textarea changes.\n\nThis event will not emit when programmatically setting the `value` property."
      },
      "attributes": [
        {
          "name": "autocomplete",
          "description": {
            "kind": "markdown",
            "value": "Specifies if and how the browser provides `autocomplete` assistance for the field."
          }
        },
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "debounce",
          "description": {
            "kind": "markdown",
            "value": "The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n\n**Type:** `number`"
          }
        },
        {
          "name": "disabled",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the textarea is disabled.\n\n**Default:** `false`"
          }
        },
        {
          "name": "error-message",
          "description": {
            "kind": "markdown",
            "value": "Displays an error message below the textarea field."
          }
        },
        {
          "name": "helper-message",
          "description": {
            "kind": "markdown",
            "value": "Displays a message or hint below the textarea field."
          }
        },
        {
          "name": "hide-label",
          "description": {
            "kind": "markdown",
            "value": "Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
          }
        },
        {
          "name": "highlight",
          "description": {
            "kind": "markdown",
            "value": "Applies highlight styling to the textarea field."
          }
        },
        {
          "name": "invalid",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the textarea is invalid or throws an error.\n\n**Default:** `false`"
          }
        },
        {
          "name": "label",
          "description": {
            "kind": "markdown",
            "value": "Text to be displayed as the textarea label."
          }
        },
        {
          "name": "max-length",
          "description": {
            "kind": "markdown",
            "value": "Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n\n**Type:** `number`"
          }
        },
        {
          "name": "name",
          "description": {
            "kind": "markdown",
            "value": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n\n**Default:** `this.componentId`"
          }
        },
        {
          "name": "placeholder",
          "description": {
            "kind": "markdown",
            "value": "Specifies a short hint that describes the expected value of the textarea."
          }
        },
        {
          "name": "readonly",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the textarea is readonly.\n\n**Default:** `false`"
          }
        },
        {
          "name": "required",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the textarea is required.\n\n**Default:** `false`"
          }
        },
        {
          "name": "rows",
          "description": {
            "kind": "markdown",
            "value": "Sets number of rows of text visible without needing to scroll in the textarea.\n\n**Type:** `number`"
          }
        },
        {
          "name": "value",
          "description": {
            "kind": "markdown",
            "value": "The value of the textarea.\n\n**Default:** `''`"
          }
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-textarea--docs"
        }
      ]
    },
    {
      "name": "pds-toast",
      "description": {
        "kind": "markdown",
        "value": "Toasts briefly surface feedback messages as non-blocking notifications that auto-dismiss after a short delay. They're used to confirm actions or report status without interrupting the user's flow.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#default), [Danger](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#danger), [Loading](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#loading), [With Icon](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#with-icon), [With Link](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#with-link), [Complex Content](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#complex-content), [Non-dismissing Toast](https://pine-design-system.netlify.app/?path=/docs/components-toast--docs#non-dismissing-toast)\n\n**CSS Parts:**\n- `dismiss` - No description\n\n**Events:**\n- `pdsToastDismissed` - Event emitted when the toast is dismissed, either manually or automatically."
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "dismissible",
          "description": {
            "kind": "markdown",
            "value": "Whether the toast can be dismissed manually via the close button.\nNote: This only controls manual dismissal. Auto-dismissal via duration still applies.\n\n**Default:** `true`"
          }
        },
        {
          "name": "duration",
          "description": {
            "kind": "markdown",
            "value": "The duration in milliseconds to show the toast before auto-dismissing.\nSet to 0 to disable auto-dismiss.\n\n**Type:** `number`\n\n**Default:** `4500`"
          }
        },
        {
          "name": "icon",
          "description": {
            "kind": "markdown",
            "value": "The name of the icon to display in the toast."
          }
        },
        {
          "name": "type",
          "description": {
            "kind": "markdown",
            "value": "The type of toast to display.\n- default: Grey background (default)\n- danger: Red background\n- loading: With spinner animation\n\n**Type:** `\"danger\" | \"default\" | \"loading\"`\n\n**Default:** `'default'`"
          },
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "default"
            },
            {
              "name": "loading"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-toast--docs"
        }
      ]
    },
    {
      "name": "pds-tooltip",
      "description": {
        "kind": "markdown",
        "value": "Tooltips display helpful popup text when users hover over or keyboard focus on an element.\n\n**Examples:**\n[Trigger](https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs#trigger), [Content](https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs#content), [Positioning](https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs#positioning), [No Arrow](https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs#no-arrow), [Width/Sizing](https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs#width/sizing)\n\n**Slots:**\n- `(default)` - The tooltip's target element\n- `content` - HTML content for the tooltip"
      },
      "attributes": [
        {
          "name": "component-id",
          "description": {
            "kind": "markdown",
            "value": "A unique identifier used for the underlying component `id` attribute."
          }
        },
        {
          "name": "content",
          "description": {
            "kind": "markdown",
            "value": "Content for the tooltip. If HTML is required, use the content slot"
          }
        },
        {
          "name": "has-arrow",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the tooltip has an arrow\n\n**Default:** `true`"
          }
        },
        {
          "name": "html-content",
          "description": {
            "kind": "markdown",
            "value": "Enable this option when using the content slot\n\n**Default:** `false`"
          }
        },
        {
          "name": "max-width",
          "description": {
            "kind": "markdown",
            "value": "Sets the maximum width of the tooltip content\n\n**Default:** `'352px'`"
          }
        },
        {
          "name": "opened",
          "description": {
            "kind": "markdown",
            "value": "Determines whether or not the tooltip is visible\n\n**Default:** `false`"
          }
        },
        {
          "name": "placement",
          "description": {
            "kind": "markdown",
            "value": "Determines the preferred position of the tooltip\n\n**Type:** `\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"`\n\n**Default:** `'right'`"
          },
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://pine-design-system.netlify.app/?path=/docs/components-tooltip--docs"
        }
      ]
    }
  ]
}