@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/cjs/eds-steps.cjs.entry.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-const sharedUtils = require('./sharedUtils-8e287250.js');
-
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
-const EdsStepsStyle0 = edsStepsCss;
-
-const EdsSteps = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.step = index.createEvent(this, "step", 7);
-        this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
-                this.step.emit(this.activeStep);
-            }
-        };
-        this.handleBack = () => {
-            if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
-                this.step.emit(this.activeStep);
-            }
-        };
-        this.steps = [];
-        this.type = 'static';
-        this.activeStep = 0;
-    }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
-    /**
-     * Parse the JSON string into an array of steps.
-     */
-    get parsedSteps() {
-        return sharedUtils.parseData(this.steps);
-    }
-    render() {
-        const steps = this.parsedSteps;
-        if (this.type === 'linear') {
-            return (index.h("div", null, index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: "step mb-28", key: index$1 }, index.h("h3", { onClick: () => this.handleStepClick(index$1) }, step.title), this.activeStep === index$1 && (index.h("div", { class: "content" }, index.h("div", { class: "f-body-02 text-lighter my-16" }, step.content), index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' }))))))), this.activeStep === steps.length && (index.h("div", { class: "completed" }, index.h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" })))));
-        }
-        // Static mode: show all steps with their content, no navigation buttons.
-        return (index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: "step mb-28", key: index$1 }, index.h("h3", null, step.title), index.h("div", { class: "content" }, index.h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
-    }
-};
-EdsSteps.style = EdsStepsStyle0;
-
-exports.eds_steps = EdsSteps;

package/dist/cjs/eds-user.cjs.entry.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-
-const EdsUser = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.user = undefined;
-    }
-    /**
-     * Lifecycle method that runs when the component is about to load.
-     * It initializes authentication by calling the `initAuth` method.
-     */
-    async componentWillLoad() { }
-    get initials() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const initials = `${((_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.given_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
-        return initials || ((_g = (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '68bc37b43d006a35e088a647d41b2257fbef25a7', class: "block" }, index.h("div", { key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d', class: "flex items-center" }, index.h("eds-dropdown", { key: '7f065f82c5845fd0ebc9c6b465ac56a695a99b77', label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, index.h("div", { key: '2b1e9279c8d4feae16bf64c15837b61b945af447', class: "min-w-[280px] p-8" }, index.h("div", { key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, index.h("eds-avatar", { key: '2b78a6768ecb101138ab742d812d407e1b4fdd89', "first-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.given_name, "last-name": (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), index.h("div", { key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a', class: "max-w-full" }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && index.h("p", { key: 'a644c3cdda0ce7bf2f62438a3866692f4222efeb', class: "f-ui-01 text-default w-full text-ellipsis" }, this.user.name), ((_e = this.user) === null || _e === void 0 ? void 0 : _e.preferred_username) && (index.h("p", { key: '2a6cf5f0324d27ebdfd2b331e5f232c23e544ad5', class: "f-ui-03-light text-light mt-4" }, this.user.preferred_username)), ((_f = this.user) === null || _f === void 0 ? void 0 : _f.email) && index.h("p", { key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a', class: "f-ui-03-light text-light mt-4" }, this.user.email))), index.h("div", { key: '3a68427dc603f0a3fb2652bfbea292eb718046dd', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, index.h("div", { key: '3f3f617385efc57502794f78079b8486b6801425', class: "border-softer mb-10 border-b-2 pb-16" }, index.h("eds-link", { key: '62fbc143f710605c7d840277dc90054a1162831d', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), index.h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), index.h("slot", { key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7' })))))));
-    }
-    get hostEl() { return index.getElement(this); }
-};
-
-exports.eds_user = EdsUser;

package/dist/cjs/eds-vertical-stepper.cjs.entry.js

@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-
-const edsVerticalStepperCss = ":host{display:block}.stepper-container{margin:0 auto}.stepper{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.step{margin-bottom:24px}.step-label{counter-increment:step;font-size:1.25rem;font-weight:600;position:relative;margin-top:1em;margin-bottom:1em}.step-label::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.optional{font-size:0.8rem;color:#888;margin-left:8px}.step-content{margin-top:8px}.step-buttons{margin-top:12px}.step-buttons button{margin-right:8px;padding:6px 12px;font-size:0.875rem}.completed{padding:16px;border:1px solid #ddd;margin-top:16px;text-align:center}";
-const EdsVerticalStepperStyle0 = edsVerticalStepperCss;
-
-const EdsVerticalStepper = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.handleNext = () => {
-            if (this.activeStep < this.parsedSteps.length) {
-                this.activeStep = this.activeStep + 1;
-            }
-        };
-        this.handleBack = () => {
-            if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
-            }
-        };
-        this.handleReset = () => {
-            this.activeStep = 0;
-        };
-        this.steps = '[]';
-        this.activeStep = 0;
-    }
-    get parsedSteps() {
-        try {
-            return JSON.parse(this.steps);
-        }
-        catch (error) {
-            //console.error('Invalid steps JSON', error);
-            return [];
-        }
-    }
-    render() {
-        const steps = this.parsedSteps;
-        return (index.h("div", { key: '89344ad340f9eb8d20f463d3990ec4832cbdc900', class: "stepper-container" }, index.h("div", { key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383', class: "stepper" }, steps.map((step, index$1) => (index.h("div", { class: "step", key: index$1 }, index.h("div", { class: "step-label" }, index.h("span", null, step.label), index$1 === steps.length - 1 && index.h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index$1 && (index.h("div", { class: "step-content" }, index.h("p", null, step.description), index.h("div", { class: "step-buttons" }, index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (index.h("div", { key: '1e3272723281d9a10603b4d1e79badfdd6591cc5', class: "" }, index.h("eds-alert", { key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4', intent: "success", message: "All steps completed - you're finished!" }), index.h("eds-button", { key: 'a4d68698fa7831c7e2b6afae435979ccac46a726', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
-    }
-};
-EdsVerticalStepper.style = EdsVerticalStepperStyle0;
-
-exports.eds_vertical_stepper = EdsVerticalStepper;

package/dist/cjs/formUtils-4315a99c.js

@@ -1,228 +0,0 @@
-'use strict';
-
-// utils/validators.ts
-function validateField(name, value, type, required, maxLength) {
-    const errors = [];
-    if (required && !value) {
-        errors.push(`${name} is required.`);
-    }
-    if (maxLength && typeof value === 'string' && value.length > maxLength) {
-        errors.push(`${name} must be at most ${maxLength} characters.`);
-    }
-    if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
-        errors.push('Invalid email format.');
-    }
-    return errors;
-}
-function validateFieldGroup(name, required, formEl) {
-    // Find all eds-input-field components that contain inputs with the given name.
-    const groupFields = Array.from(formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
-    // Collect all input elements with the matching name inside those components.
-    const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
-    // Check if at least one input is checked.
-    const isChecked = groupElements.some((el) => el.checked);
-    const errors = [];
-    if (required && !isChecked) {
-        errors.push(`At least one option in ${name} is required.`);
-    }
-    return errors;
-}
-function validateSingleBox(name, required, formEl) {
-    var _a;
-    const errors = [];
-    // Find the eds-input-field component containing the input with the given name.
-    const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
-    // If no such field is found and it's required, return an error.
-    if (!edsField) {
-        if (required) {
-            errors.push(`${name} is required.`);
-        }
-        return errors;
-    }
-    // Query within the component's shadow root.
-    const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
-    if (required && inputEl && !inputEl.checked) {
-        errors.push(`${name} is required.`);
-    }
-    return errors;
-}
-
-/**
- * Finds the first input element for a given field name inside eds-input-field components.
- */
-function findFieldElement(formEl, name) {
-    const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-    for (const element of elements) {
-        if (element.shadowRoot) {
-            const input = element.shadowRoot.querySelector(`[name="${name}"]`);
-            if (input) {
-                return input;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Validates all fields and returns an object containing the errors and a flag indicating any errors.
- */
-function validateFormFields(parsedFields, formEl, values, 
-// eslint-disable-next-line
-isFieldVisible) {
-    const errors = {};
-    let hasError = false;
-    parsedFields.forEach((field) => {
-        // Only validate fields that are visible.
-        if (!isFieldVisible(field, values)) {
-            // If a field is hidden, clear its error.
-            delete errors[field.name];
-            return;
-        }
-        if (field.type !== 'hidden') {
-            if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
-                // Single checkbox or radio without multiple options
-                const fieldErrors = validateSingleBox(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
-                // Checkbox or radio group with options
-                const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else {
-                // For all other types, find the first matching element.
-                const inputEl = findFieldElement(formEl, field.name);
-                if (inputEl) {
-                    const value = inputEl.value;
-                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
-                    if (fieldErrors.length > 0) {
-                        errors[field.name] = fieldErrors;
-                        hasError = true;
-                    }
-                }
-            }
-        }
-    });
-    return { errors, hasError };
-}
-
-/**
- * Validates a field based on its type and returns an array of error messages.
- * @param field - The field configuration object.
- * @param value - The input value (if applicable).
- * @param formEl - The form element used for DOM queries.
- */
-function validateInputField(field, value, formEl) {
-    if (field.type === 'checkbox' || field.type === 'radio') {
-        if (field.options) {
-            return validateFieldGroup(field.name, field.required, formEl);
-        }
-        return validateSingleBox(field.name, field.required, formEl);
-    }
-    return validateField(field.name, value, field.type, field.required, field.maxlength);
-}
-
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-function getFormInitData({ initData, parsedFields, currentValues, formEl, isFieldVisible }) {
-    // Pass 1: Update state for all fields.
-    const updatedValues = Object.assign({}, currentValues);
-    parsedFields.forEach((field) => {
-        const value = initData[field.name];
-        if (value !== undefined) {
-            updatedValues[field.name] = value;
-        }
-    });
-    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
-    setTimeout(() => {
-        parsedFields.forEach((field) => {
-            // Only update if the field is visible.
-            if (isFieldVisible(field, updatedValues)) {
-                const value = initData[field.name];
-                if (value !== undefined) {
-                    if (field.type === 'checkbox' || field.type === 'radio') {
-                        // Query all eds-input-field components and update matching inputs.
-                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-                        elements.forEach((element) => {
-                            if (element.shadowRoot) {
-                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
-                                // Convert stored comma-separated value into a trimmed array.
-                                const valuesArray = value.split(',').map((v) => v.trim());
-                                inputs.forEach((inputEl) => {
-                                    // eslint-disable-next-line
-                                    inputEl.checked = valuesArray.includes(inputEl.value);
-                                });
-                            }
-                        });
-                    }
-                    else {
-                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
-                        const inputEl = findFieldElement(formEl, field.name);
-                        if (inputEl) {
-                            inputEl.value = value;
-                        }
-                    }
-                }
-            }
-        });
-    }, 50); // A 50ms delay to allow re-render
-    return { updatedValues };
-}
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }) {
-    // Pass 1: Update state for all fields.
-    const updatedValues = Object.assign({}, currentValues);
-    parsedFields.forEach((field) => {
-        const value = draftData[field.name];
-        if (value !== undefined) {
-            updatedValues[field.name] = value;
-        }
-    });
-    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
-    setTimeout(() => {
-        parsedFields.forEach((field) => {
-            // Only update if the field is visible.
-            if (isFieldVisible(field, updatedValues)) {
-                const value = draftData[field.name];
-                if (value !== undefined) {
-                    if (field.type === 'checkbox' || field.type === 'radio') {
-                        // Query all eds-input-field components and update matching inputs.
-                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-                        elements.forEach((element) => {
-                            if (element.shadowRoot) {
-                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
-                                // Convert stored comma-separated value into a trimmed array.
-                                const valuesArray = value.split(',').map((v) => v.trim());
-                                inputs.forEach((inputEl) => {
-                                    // eslint-disable-next-line
-                                    inputEl.checked = valuesArray.includes(inputEl.value);
-                                });
-                            }
-                        });
-                    }
-                    else {
-                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
-                        const inputEl = findFieldElement(formEl, field.name);
-                        if (inputEl) {
-                            inputEl.value = value;
-                        }
-                    }
-                }
-            }
-        });
-    }, 50); // A 50ms delay to allow re-render
-    return { updatedValues };
-}
-
-exports.getFormDraftData = getFormDraftData;
-exports.getFormInitData = getFormInitData;
-exports.validateFormFields = validateFormFields;
-exports.validateInputField = validateInputField;

package/dist/cjs/token-spacing.cjs.entry.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-
-const TokenSpacing = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: '356476122714281daec61c548440aebde6539707', class: "w-full" }, index.h("ul", { key: '970f3773e8974095cc033f903f064184ce2efbf7', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '09633a00f33076131e1af2c84897fc5e427cb8fe', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '0f6fa253191124f68f38e252cbdd816b2e6a4fed', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '3ea0d517cda698486a86d84b08638e0571a83cbd', class: "spacing-sample m-32 bg-darker" }, index.h("span", { key: '705336858b45b26fc7949af2c06c7aa0caf06521', class: "text-white" }, "Margin: 2rem / m-32")))), index.h("li", { key: '0f6db988457ea76155bc8d0f7aa24a6a987b0faa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '8eefc5b4f1c1decfb77d54b03ab3fd00a303142c', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'ee398d39118bf544bc6b02b4788b53f6625af2f8', class: "spacing-sample ml-64 bg-darker" }, index.h("span", { key: 'dfc2b6c02727298e8d307c26b00c77cbad7c741d', class: "text-white" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: 'f2f058f6576c56b4785675b173a5720bc8b8b5a2', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '79b1d6d5d1a5adf9168d48f21917fd5a45921d4d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '037bc78f10b1aa70d8dd658d4d0f2f5c4689b9b4', class: "spacing-sample mt-32 bg-darker" }, index.h("span", { key: '44f1f4a3c85670448aa3888a28d9c977ca786f86', class: "text-white" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: '7c20e01a04b1d76d4dcffc14f4df75f5021ece20', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '07a56f648b690e078b21070a55a605c02347d609', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '231c4279bdae8065ef24fec89eecb78651e04611', class: "spacing-sample p-32 bg-darker" }, index.h("span", { key: 'a07ed52edd29aa0aa6f6b3f246f5a9c0ae01a1d7', class: "text-white" }, "Padding: 2rem / p-32")))), index.h("li", { key: '9d03ce15cd0d729158e95aa57cfa16ffc198d61f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '96166a0e3ecfd6c6a66c994964fa15bee8bde642', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '5ab66866c84be4bce570f0b88893b897e9055975', class: "spacing-sample pt-32 bg-darker" }, index.h("span", { key: '97a396c5d1411994f85e02da470c225a61ceecc3', class: "text-white" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '73e0a494873f0223be3631e317a0de839837c6c0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'b6d16c13e18c51a9e458beb6a09ba8363016f78f', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '31ecca8519713956f36adeab4ec9d948366ef60c', class: "spacing-sample pl-32 bg-darker" }, index.h("span", { key: '5be84ed80ae0f13b350a69bced77af95ab9b9a12', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
-    }
-};
-
-exports.token_spacing = TokenSpacing;

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.stories.js

@@ -1,31 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Components/Cards/Card Desc',
-    component: 'eds-card-desc',
-    argTypes: {
-        description: { control: 'text' },
-        descClass: { control: 'text' },
-        truncate: { control: 'boolean' },
-        truncateLines: { control: 'text' }
-    },
-    args: {
-        description: 'This is a sample description for the eds-card-desc component.',
-        descClass: 'f-ui-03-light',
-        truncate: true,
-        truncateLines: '3'
-    }
-};
-export const Default = {
-    render: (args) => html `
-    <eds-card-desc
-      description="${args.description}"
-      desc-class="${args.descClass}"
-      truncate="${args.truncate}"
-      truncate-lines="${args.truncateLines}"
-    ></eds-card-desc>
-  `,
-    args: {
-        description: 'This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.',
-        truncate: false
-    }
-};