@pine-ds/core 0.0.2-alpha.0

package/dist/pine-core/svg/warning-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" class="pdsicon"><path d="M15.8 12.526 9.485.88A1.668 1.668 0 0 0 8.8.2a1.693 1.693 0 0 0-2.284.68L.2 12.526A1.678 1.678 0 0 0 1.687 15h12.628a1.7 1.7 0 0 0 1.308-.615 1.675 1.675 0 0 0 .178-1.859ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4Z"/></svg>

package/dist/pine-core/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path d="M8 6.667c.368 0 .667.298.667.666V10a.667.667 0 1 1-1.334 0V7.333c0-.368.299-.666.667-.666ZM8.667 12a.667.667 0 1 1-1.334 0 .667.667 0 0 1 1.334 0Z"/><path fill-rule="evenodd" d="M8 1.333c.248 0 .475.137.59.357l6.667 12.666a.666.666 0 0 1-.59.977H1.333a.666.666 0 0 1-.59-.977L7.41 1.69A.667.667 0 0 1 8 1.333ZM13.562 14 8 3.431 2.438 14h11.124Z"/></svg>

package/dist/pine-core/svg/website-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path d="M14 0H2a2 2 0 0 0-2 2v9.333a2 2 0 0 0 2 2h4.667v1.334H4A.667.667 0 1 0 4 16h8a.667.667 0 0 0 0-1.333H9.333v-1.334H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm.667 10.667H1.333V2A.667.667 0 0 1 2 1.333h12a.667.667 0 0 1 .667.667v8.667Z"/></svg>

package/dist/pine-core/svg/website-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M2 1.333A.666.666 0 0 0 1.333 2v7.333h13.334V2A.666.666 0 0 0 14 1.333H2Zm12.667 9.334H1.333v.666c0 .369.299.667.667.667h12a.666.666 0 0 0 .667-.667v-.666ZM0 10v1.333a2 2 0 0 0 2 2h5.333v1.334H4A.667.667 0 1 0 4 16h8a.667.667 0 0 0 0-1.333H8.667v-1.334H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8Z"/></svg>

package/dist/pine-core/svg/window-paragraph.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M3.333.667H0v14.666h16V.667H3.333Zm0 1.333h-2v1.333h2V2Zm1.334 2.667H1.333V14h13.334V4.667h-10Zm0-1.334V2h10v1.333h-10Zm-2 3.334H8V12H2.667V6.667ZM4 8v2.667h2.667V8H4Zm9.333-1.333h-4V8h4V6.667Zm-4 2.666H12v1.334H9.333V9.333Z"/></svg>

package/dist/pine-core/svg/world.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M5.39 1.864a6.672 6.672 0 0 0-4.024 5.47h1.986c.12-2.1.805-4.026 2.038-5.47ZM1.366 8.667a6.672 6.672 0 0 0 4.024 5.47c-1.233-1.445-1.919-3.372-2.038-5.47H1.366Zm9.244 5.47a6.672 6.672 0 0 0 4.024-5.47h-1.986c-.12 2.099-.805 4.025-2.038 5.47Zm4.024-6.804a6.672 6.672 0 0 0-4.024-5.47c1.233 1.445 1.919 3.371 2.038 5.47h1.986ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.667 14.146c-1.564-1.184-2.497-3.141-2.645-5.48h2.645v5.48ZM4.688 7.333h2.645V1.854C5.77 3.038 4.836 4.995 4.688 7.334Zm3.979 6.813v-5.48h2.645c-.148 2.339-1.08 4.295-2.645 5.48Zm0-6.813h2.645c-.148-2.338-1.08-4.295-2.645-5.479v5.48Z"/></svg>

package/dist/pine-core/svg/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M11.228 0a6.024 6.024 0 0 1 1.694.23l1.094.312-2.387 2.377 1.455 1.448L15.44 2.02l.334 1.034a4.6 4.6 0 0 1 .08 2.55l-.003.011-.003.01a4.467 4.467 0 0 1-3.384 3.129l-.019.004-.02.003a5.165 5.165 0 0 1-1.785-.05l-5.549 6.24a2.862 2.862 0 0 1-4.28.166l-.002-.003a2.951 2.951 0 0 1 .177-4.232l.004-.002 6.252-5.512a3.482 3.482 0 0 1-.104-.877 4.416 4.416 0 0 1 4.037-4.49L11.202 0h.026Zm.037 1.333a3.083 3.083 0 0 0-2.793 3.14v.024c-.003.285.05.569.158.833l.177.438-6.932 6.11-.001.001a1.617 1.617 0 0 0-.097 2.318 1.529 1.529 0 0 0 2.29-.097l.01-.012 6.116-6.878.405.119a3.832 3.832 0 0 0 1.615.116 3.134 3.134 0 0 0 2.353-2.18 3.26 3.26 0 0 0 .091-.583l-1.573 1.566-3.345-3.33 1.592-1.584h-.066Z"/></svg>

package/dist/pine-core/svg/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path d="M15.867 4.8s-.134-1.133-.667-1.6c-.6-.667-1.267-.667-1.6-.667C11.333 2.4 8 2.4 8 2.4s-3.333 0-5.6.133C2.067 2.6 1.4 2.6.8 3.2.333 3.667.133 4.8.133 4.8S0 6.067 0 7.4v1.2c0 1.267.133 2.6.133 2.6s.134 1.133.667 1.6c.6.667 1.4.6 1.733.667C3.8 13.6 8 13.6 8 13.6s3.333 0 5.6-.2c.333-.067 1-.067 1.6-.667.467-.466.667-1.6.667-1.6S16 9.867 16 8.533v-1.2c0-1.266-.133-2.533-.133-2.533Zm-9.534 5.267V5.6l4.334 2.267-4.334 2.2Z"/></svg>

package/dist/scripts/build-tokens.js

@@ -0,0 +1,160 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import fs from "fs-extra";
+import tokens from "../tokens/tokens.json";
+// This is specific to ordering short-hand
+// CSS properties that require a specific order
+const propertyOrder = {
+    "border": ['width', 'style', 'color'],
+    "box-shadow": ['x', 'y', 'blur', 'spread', 'color']
+};
+/**
+ * Runs the process to build tokens from JSON and save them to their
+ * appropriate files.
+ *
+ * @param data Tokens data in JSON format
+ */
+const build = (data) => {
+    try {
+        Object.keys(data).map((cssPropertyName) => {
+            const cssVariables = tokensToCss(data[cssPropertyName], cssPropertyName, `--${cssPropertyName}`).replaceAll('', '');
+            const cssClass = `:root {\n${cssVariables.replaceAll("--", "  --pine-")}}\n`;
+            saveTokens(cssPropertyName, cssClass);
+        });
+    }
+    catch (e) {
+        console.log("Provide a correct argument - a relative path to design tokens.\n", e);
+    }
+};
+/*** Helper Methods ***/
+/**
+ * Generates the custom shorthand for the CSS Custom Property.
+ *
+ * @param customPropName Name of the Custom Property
+ * @param cssPropertyName Name of the CSS Property
+ * @param value The value attribute of the custom property
+ * @returns String. Formatted custom properties with appropriate shorthand values
+ */
+const buildShorthand = (customPropName, cssPropertyName, value) => {
+    if (!value.hasOwnProperty('value')) {
+        return '';
+    }
+    const { type } = value, attrs = __rest(value, ["type"]);
+    if (!Array.isArray(attrs.value)) {
+        const _a = attrs.value, { type } = _a, data = __rest(_a, ["type"]);
+        return customPropName + `: ${determinePropertyOrder(cssPropertyName, data)}`;
+    }
+    const flattened = attrs.value.flat();
+    const newCustomProperty = customPropName + `: ${flattened.map(v => {
+        const { type } = v, data = __rest(v, ["type"]);
+        return determinePropertyOrder(cssPropertyName, data);
+    }).join(', ')}
+  `;
+    return newCustomProperty;
+};
+/**
+ * Generates a list of values in a defined order determined by a look-up
+ * in `propertyOrder` or in order which the data keys are listed.
+ *
+ * @param cssProperty Name of the CSS Property
+ * @param data An object of key / value pairs
+ * @returns String. Formatted properties concatenated by a space
+ */
+const determinePropertyOrder = (cssProperty, data) => {
+    if (Object.keys(propertyOrder).includes(cssProperty)) {
+        const propNames = propertyOrder[cssProperty];
+        const propValues = [];
+        propNames.forEach(prop => {
+            propValues.push(data[prop]);
+        });
+        return getValues(propValues);
+    }
+    else {
+        return getValues(data);
+    }
+};
+/**
+ * Reads the index.scss file if it exists and adds an import statement per category name.
+ * If the file doesn't exist, it will be created.
+ *
+ * @param categoryName The name of the token category
+ */
+const formatIndexFile = (categoryName) => {
+    const indexFile = `${process.cwd()}/src/global/styles/tokens/index.scss`;
+    const importLine = `@use '${categoryName}';\n`;
+    if (!fs.existsSync(indexFile)) {
+        fs.writeFileSync(indexFile, importLine);
+    }
+    else {
+        const data = fs.readFileSync(indexFile);
+        if (data.includes(importLine)) {
+            return;
+        }
+        else {
+            fs.appendFileSync(indexFile, importLine);
+        }
+    }
+};
+/**
+ * Receives values of CSS property names and joins them.
+ *
+ * @param data Array data to be joined
+ * @returns CSS property values joined by a space
+ */
+const getValues = (data) => Object.values(data).join(' ');
+/**
+ * Saves formatted tokens to their own SCSS partial files.
+ *
+ * @param categoryName The name of the token category
+ * @param tokens Formatted tokens data as CSS custom properties
+ */
+const saveTokens = async (categoryName, tokens) => {
+    try {
+        const path = `${process.cwd()}/src/global/styles/tokens`;
+        await fs.writeFile(`${path}/_${categoryName}.scss`, tokens);
+        await formatIndexFile(categoryName);
+    }
+    catch (e) {
+        console.log("There was an error while saving a file.\n", e);
+    }
+};
+/**
+ * Takes the JSON data and converts it to formatted CSS
+ * custom properties.
+ *
+ * @param tokens Tokens data in JSON format
+ * @param cssPropertyName Name of the css property
+ * @param base Base string to format custom properties
+ * @returns Formatted CSS with all custom properties
+ */
+const tokensToCss = (tokens, cssPropertyName, base = `-`, prevBase = '') => Object.entries(tokens).reduce((css, [key, value]) => {
+    let newBase = base + `-${key}`;
+    if (!['description', 'type'].includes(key)) {
+        newBase = newBase.replace(/\-value/, '');
+        if (typeof value !== "object") {
+            return css + newBase + `: ${value};\n`;
+        }
+        // Prevents a duplicate entry based on recursion
+        if (newBase !== prevBase) {
+            if (['box-shadow', 'border'].find(v => newBase.includes(v) && newBase.indexOf('-radius') < 0)) {
+                const shorthand = `${buildShorthand(newBase, cssPropertyName, value)}`;
+                if (shorthand !== '')
+                    return css + shorthand.trim() + ';\n' + tokensToCss(value, cssPropertyName, newBase, newBase);
+            }
+        }
+        return css + tokensToCss(value, cssPropertyName, newBase);
+    }
+    return css;
+}, ``);
+build(tokens['core']);
+//# sourceMappingURL=build-tokens.js.map

package/dist/scripts/build-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-tokens.js","sourceRoot":"","sources":["../../scripts/build-tokens.ts"],"names":[],"mappings":"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","sourcesContent":["import fs from 'fs-extra';\nimport tokens from '../tokens/tokens.json';\n\n// This is specific to ordering short-hand\n// CSS properties that require a specific order\nconst propertyOrder = {\n\t\"border\": ['width', 'style', 'color'],\n\t\"box-shadow\": ['x', 'y', 'blur', 'spread', 'color']\n};\n\n/**\n * Runs the process to build tokens from JSON and save them to their\n * appropriate files.\n *\n * @param data Tokens data in JSON format\n */\nconst build = (data: object) => {\n\n\ttry {\n\t\tObject.keys(data).map((cssPropertyName) => {\n\t\t\tconst cssVariables = tokensToCss(data[cssPropertyName], cssPropertyName, `--${cssPropertyName}`, ).replaceAll('', '');\n\t\t\tconst cssClass = `:root {\\n${cssVariables.replaceAll(\"--\", \"  --pine-\")}}\\n`\n\t\t\tsaveTokens(cssPropertyName, cssClass)\n\t\t})\n\n\t} catch (e) {\n\t\tconsole.log(\n\t\t\t\"Provide a correct argument - a relative path to design tokens.\\n\",\n\t\t\te\n\t\t)\n\t}\n}\n\n/*** Helper Methods ***/\n\n/**\n * Generates the custom shorthand for the CSS Custom Property.\n *\n * @param customPropName Name of the Custom Property\n * @param cssPropertyName Name of the CSS Property\n * @param value The value attribute of the custom property\n * @returns String. Formatted custom properties with appropriate shorthand values\n */\nconst buildShorthand = (customPropName: string, cssPropertyName, value) => {\n  if (!value.hasOwnProperty('value')) {\n    return '';\n  }\n\n  const {type, ...attrs} = value;\n\n  if ( !Array.isArray(attrs.value)) {\n    const {type, ...data} = attrs.value;\n    return customPropName + `: ${determinePropertyOrder(cssPropertyName, data)}`;\n  }\n\n  const flattened = attrs.value.flat();\n\n  const newCustomProperty = customPropName + `: ${\n    flattened.map(v => {\n      const {type, ...data} = v;\n\n      return determinePropertyOrder(cssPropertyName, data);\n    }).join(', ')}\n  `\n  return newCustomProperty;\n}\n\n/**\n * Generates a list of values in a defined order determined by a look-up\n * in `propertyOrder` or in order which the data keys are listed.\n *\n * @param cssProperty Name of the CSS Property\n * @param data An object of key / value pairs\n * @returns String. Formatted properties concatenated by a space\n */\nconst determinePropertyOrder = (cssProperty, data) => {\n  if (Object.keys(propertyOrder).includes(cssProperty)) {\n    const propNames = propertyOrder[cssProperty];\n    const propValues = [];\n    propNames.forEach(prop => {\n      propValues.push(data[prop])\n    })\n    return getValues(propValues)\n  }\n  else {\n    return getValues(data)\n  }\n}\n\n/**\n * Reads the index.scss file if it exists and adds an import statement per category name.\n * If the file doesn't exist, it will be created.\n *\n * @param categoryName The name of the token category\n */\nconst formatIndexFile = (categoryName: string) => {\n\tconst indexFile = `${process.cwd()}/src/global/styles/tokens/index.scss`;\n\tconst importLine = `@use '${categoryName}';\\n`;\n\tif (!fs.existsSync(indexFile)) {\n\t\tfs.writeFileSync(indexFile, importLine);\n\t} else {\n\t\tconst data = fs.readFileSync(indexFile);\n\t\tif (data.includes(importLine)) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tfs.appendFileSync(indexFile, importLine);\n\t\t}\n\t}\n}\n\n/**\n * Receives values of CSS property names and joins them.\n *\n * @param data Array data to be joined\n * @returns CSS property values joined by a space\n */\nconst getValues = (data) => Object.values(data).join(' ');\n\n/**\n * Saves formatted tokens to their own SCSS partial files.\n *\n * @param categoryName The name of the token category\n * @param tokens Formatted tokens data as CSS custom properties\n */\nconst saveTokens = async (categoryName: string, tokens: string) => {\n  try {\n\t\tconst path = `${process.cwd()}/src/global/styles/tokens`;\n\n    await fs.writeFile(`${path}/_${categoryName}.scss`, tokens);\n\t\tawait formatIndexFile(categoryName);\n  } catch (e) {\n\t\tconsole.log(\"There was an error while saving a file.\\n\", e)\n  }\n}\n\n\n/**\n * Takes the JSON data and converts it to formatted CSS\n * custom properties.\n *\n * @param tokens Tokens data in JSON format\n * @param cssPropertyName Name of the css property\n * @param base Base string to format custom properties\n * @returns Formatted CSS with all custom properties\n */\nconst tokensToCss = (tokens: object, cssPropertyName, base = `-`, prevBase = '') =>\n  Object.entries(tokens).reduce((css, [key, value]) => {\n\t\tlet newBase = base + `-${key}`;\n\t\tif (!['description', 'type'].includes(key)) {\n\t\t\tnewBase = newBase.replace(/\\-value/, '');\n\t\t\tif (typeof value !== \"object\") {\n\t\t\t\treturn css + newBase + `: ${value};\\n`\n\t\t\t}\n\n\t\t\t// Prevents a duplicate entry based on recursion\n\t\t\tif ( newBase !== prevBase) {\n\t\t\t\tif (['box-shadow', 'border'].find(v => newBase.includes(v)  && newBase.indexOf('-radius') < 0)) {\n\t\t\t\t\tconst shorthand = `${buildShorthand(newBase, cssPropertyName, value)}`;\n\t\t\t\t\tif ( shorthand !== '')\n\t\t\t\t\t\treturn css + shorthand.trim() + ';\\n' + tokensToCss(value, cssPropertyName, newBase, newBase);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn css + tokensToCss(value, cssPropertyName, newBase)\n\t\t}\n\t\treturn css\n  }, ``);\n\nbuild(tokens['core']);\n"]}

package/dist/types/components/_internal/pds-label/pds-label.d.ts

@@ -0,0 +1,22 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Props for the input label.
+ */
+interface LabelProps {
+    classNames?: string;
+    /**
+     * Corresponds to the 'for' attribute on a label. Useful for
+     * associating a label with a specific input.
+     */
+    htmlFor: string;
+    /**
+     * Label text displayed.
+     */
+    text: string;
+}
+/**
+ * Returns markup for an input label.
+ * @internal
+ */
+export declare const PdsLabel: FunctionalComponent<LabelProps>;
+export {};

package/dist/types/components/pds-avatar/pds-avatar.d.ts

@@ -0,0 +1,42 @@
+export declare class PdsAvatar {
+    /**
+     * The alt for a custom user image.
+     * @defaultValue null
+     */
+    alt?: string | null;
+    /**
+     * Determines whether the badge is visible or not.
+     * @defaultValue false
+     */
+    badge?: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Determines whether the avatar functions as a dropdown trigger.
+     * @defaultValue false
+     */
+    dropdown?: boolean;
+    /**
+     * The src for a custom user image.
+     * @defaultValue null
+     */
+    image?: string | null;
+    /**
+     * Size of the avatar. Value can be preset or custom.
+     * @defaultValue lg
+     */
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | string;
+    /**
+     * Determines the variant of avatar. Changes appearance accordingly.
+     * @defaultValue customer
+     */
+    variant?: 'customer' | 'admin';
+    private avatarSize;
+    private renderAvatar;
+    private renderBadge;
+    private renderIconOrImage;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-button/pds-button.d.ts

@@ -0,0 +1,36 @@
+export declare class PdsButton {
+    el: HTMLPdsButtonElement;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Toggles disabled state of button
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Displays icon before text when icon string matches an icon name
+     */
+    icon?: string;
+    /**
+     * Provides button with a submittable name
+     */
+    name?: string;
+    /**
+     * Provides button with a submittable value
+     */
+    value?: string;
+    /**
+     * Provides button with a type
+     * @defaultValue button
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * Sets button variant styles as outlined in Figma documentation
+     */
+    variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+    private handleClick;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-checkbox/pds-checkbox.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsCheckbox {
+    /**
+     * It determines whether or not the checkbox is checked.
+     */
+    checked: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     */
+    componentId: string;
+    /**
+     * It determines whether or not the checkbox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Displays message text describing an invalid state.
+     */
+    errorMessage: string;
+    /**
+     * String used for helper message below checkbox.
+     */
+    helperMessage: string;
+    /**
+     * If `true`, the checkbox will visually appear as indeterminate.
+     * Only 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).
+     */
+    indeterminate: boolean;
+    /**
+     * It determines whether or not the checkbox is invalid.
+     */
+    invalid: boolean;
+    /**
+     * String used for label text next to checkbox.
+     */
+    label: string;
+    /**
+     * String used for checkbox `name` attribute.
+     */
+    name: string;
+    /**
+     * It determines whether or not the checkbox is required.
+     */
+    required: boolean;
+    /**
+     * The value of the checkbox that is submitted with a form.
+     */
+    value: string;
+    /**
+     * Emits a boolean indicating whether the checkbox is currently checked or unchecked.
+     */
+    pdsCheckboxChange: EventEmitter<boolean>;
+    private handleCheckboxChange;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-chip/pds-chip.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsChip {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Sets the color scheme of the chip.
+     * @defaultValue 'neutral'
+     */
+    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+    /**
+     * Determines whether a dot should be displayed on the chip.
+     * @defaultValue false
+     */
+    dot: boolean;
+    /**
+     *  Sets the text label content of the chip.
+     */
+    label: string;
+    /**
+     * Determines whether the chip should be rendered in a larger size.
+     * @defaultValue false
+     */
+    large: boolean;
+    /**
+     * Sets the style variant of the chip.
+     * @defaultValue 'text'
+     */
+    variant: 'text' | 'tag' | 'dropdown';
+    /**
+     * Event when close button is clicked on tag variant.
+     */
+    pdsTagCloseClick: EventEmitter;
+    private handleCloseClick;
+    private classNames;
+    private setChipContent;
+    render(): any;
+}

package/dist/types/components/pds-copytext/pds-copytext.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsCopytext {
+    /**
+     * Determines whether `copytext` should have a border.
+     * @defaultValue true
+     */
+    border: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Determines whether `copytext` should expand to the full width of its container.
+     * @defaultValue false
+     */
+    fullWidth: boolean;
+    /**
+     * Determines whether the `value` should truncate and display with an ellipsis.
+     * @defaultValue false
+     */
+    truncate: boolean;
+    /**
+     * String that is displayed and that is also copied to the clipboard upon interaction.
+     */
+    value: string;
+    /**
+     * Event when copyText button is clicked.
+     */
+    pdsCopyTextClick: EventEmitter;
+    private copyToClipboard;
+    private handleClick;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-divider/pds-divider.d.ts

@@ -0,0 +1,17 @@
+export declare class PdsDivider {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.
+     */
+    offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Sets divider to display vertically
+     * @defaultValue false
+     */
+    vertical: boolean;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-image/pds-image.d.ts

@@ -0,0 +1,42 @@
+export declare class PdsImage {
+    /**
+     * The image's alt tag. If none is provided,
+     * it will default to an empty string.
+     */
+    alt?: string;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * The height of the image in pixels. Setting this will
+     * devote space in the layout to prevent layout
+     * shifts when the image is loaded.
+     */
+    height?: number;
+    /**
+     * Indicates how the browser should load the image.
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Determines the intended display size of an image
+     * within certian breakpoints. Has no effect if `srcset`
+     * is not set or value has no width descriptor.
+     */
+    sizes?: string;
+    /**
+     * The image's source.
+     */
+    src: string;
+    /**
+     * A set of image sources for the browser to use.
+     */
+    srcset?: string;
+    /**
+     * The width of the image in pixels. Setting this will
+     * devote space in the layout to prevent layout
+     * shifts when the image is loaded.
+     */
+    width?: number;
+    render(): any;
+}

package/dist/types/components/pds-input/pds-input.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsInput {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Indicates whether or not the input field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the error message and provides an error-themed treatment to the field.
+     */
+    errorMessage?: string;
+    /**
+     * Displays a message or hint below the input field.
+     */
+    helperMessage?: string;
+    /**
+     * Indicates whether or not the input field is invalid or throws an error.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the input label.
+     */
+    label?: string;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
+     */
+    name?: string;
+    /**
+     * Specifies a short hint that describes the expected value of the input field.
+     */
+    placeholder?: string;
+    /**
+     * Indicates whether or not the input field is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Indicates whether or not the input field is required.
+     */
+    required?: boolean;
+    /**
+     * Determines the type of control that will be displayed
+     `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`
+     * @defaultValue "text"
+     */
+    type: string;
+    /**
+     * The value of the input.
+     */
+    value?: string;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    pdsInput: EventEmitter<InputEvent>;
+    private onInputEvent;
+    render(): any;
+}

package/dist/types/components/pds-link/pds-link.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @slot - Content is placed between the opening closing tags
+ */
+export declare class PdsLink {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * When enabled, opens link in a new tab.
+     * @defaultValue false
+     */
+    external: boolean;
+    /**
+     *
+     * Modifies the look of the link
+     */
+    variant: 'inline' | 'plain';
+    /**
+     *
+     * The Font size follows t-shirt model
+     * sm: 12px
+     * md: 14px
+     * lg: 16px
+     * @defaultValue lg
+     */
+    fontSize: 'sm' | 'md' | 'lg';
+    /**
+     * The URL that the hyperlink points to.
+     */
+    href: string;
+    private classNames;
+    render(): any;
+}

package/dist/types/components/pds-progress/pds-progress.d.ts

@@ -0,0 +1,31 @@
+export declare class PdsProgress {
+    /**
+    * Determines whether or not progress is animated.
+    * @defaultValue false
+    */
+    animated: boolean;
+    /**
+    * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+    */
+    componentId: string;
+    /**
+    * 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).
+    * @defaultValue 'var(--pds-color-primary)'
+    */
+    fillColor: string;
+    /**
+    * String used for label text. Label is visually hidden but required for better accessibility.
+    */
+    label: string;
+    /**
+    * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+    * @defaultValue 0
+    */
+    percent: number;
+    /**
+    * Determines whether or not the percent value should be displayed as text.
+    * @defaultValue false
+    */
+    showPercent: boolean;
+    render(): any;
+}