@supernova-studio/supernova-sdk-beta 1.6.14 → 1.6.15

package/build/supernova-sdk-typescript.js

@@ -35197,6 +35197,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AreaComponents = void 0;
 const SDKElementProperty_1 = __webpack_require__(/*! ../../model/elements/SDKElementProperty */ "./src/model/elements/SDKElementProperty.ts");
+const ComponentUtils_1 = __webpack_require__(/*! ../../utils/ComponentUtils */ "./src/utils/ComponentUtils.ts");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Users Area
 class AreaComponents {
@@ -35243,7 +35244,7 @@ class AreaComponents {
             return this.dataCore.designComponentGroups(from.designSystemId, from.versionId);
         });
     }
-    /** Retrieves all remote properties for tokens
+    /** Retrieves all remote properties for components
      * @param from - Remote version to fetch from
      * @returns All component properties in the specified version
      */
@@ -35252,6 +35253,15 @@ class AreaComponents {
             return this.dataCore.elementPropertyDefinitions(from.designSystemId, from.versionId, SDKElementProperty_1.ElementPropertyTargetElementType.component);
         });
     }
+    /** Retrieves all remote property definitions for components
+     * @param from - Remote version to fetch from
+     * @returns All property definitions in the specified version
+     */
+    getComponentPropertyValues(from) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.elementPropertyValues(from.designSystemId, from.versionId);
+        });
+    }
     /** Retrieves all remote property views for components
      * @param from - Remote version to fetch from
      * @returns All component views in the specified version
@@ -35261,6 +35271,166 @@ class AreaComponents {
             return this.dataCore.elementViews(from.designSystemId, from.versionId, SDKElementProperty_1.ElementPropertyTargetElementType.component);
         });
     }
+    // --- --- --- --- --- --- --- --- --- ---
+    // MARK: - Create/Update
+    /** Creates remote component. This method can only be used once per component and will assign persistent id to the component. Calling this version on component that already has id assigned will result in error
+     * @param to - Remote version to write to
+     * @param component - Component to create
+     * @param parentId - Id of the group to add the component to. This is id of the group, not the versioned id
+     * @returns New remote component ids
+     */
+    createComponent(to, component, parentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.createComponent(to.designSystemId, to.versionId, component, parentId);
+        });
+    }
+    /** Creates local component. This component doesn't have id associated with it on remote, and must be created once with `createComponent` to be stored in design system
+     * @returns New component filled with default values not associated with remote (yet)
+     */
+    createLocalComponent(versionId, brandId) {
+        return ComponentUtils_1.ComponentUtils.createDefaultComponent(versionId, brandId);
+    }
+    /** Creates remote component group. This method can only be used once per group and will assign persistent id to the group. Calling this version on group that already has id assigned will result in error
+     * @param to - Remote version to write to
+     * @param group - Group to create
+     * @param parentId - Id of the group to add the group to. This is id of the group, not the versioned id
+     * @returns New remote component group ids
+     */
+    createComponentGroup(to, group, parentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.createComponentGroup(to.designSystemId, to.versionId, group, parentId);
+        });
+    }
+    /** Creates local component group. This group doesn't have id associated with it on remote, and must be created once with `createComponentGroup` to be stored in design system
+     * @param versionId - Id of the version to create the group in
+     * @param brandId - Id of the brand to create the group in
+     * @returns New group with id assigned
+     */
+    createLocalComponentGroup(versionId, brandId) {
+        return ComponentUtils_1.ComponentUtils.createDefaultComponentGroup(versionId, brandId);
+    }
+    /** Updates remote component. This method can only be used on components that already exist in the version
+     * @param to - Remote version to write to
+     * @param component - Component to update
+     * @returns Nothing
+     */
+    updateComponent(to, component) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateComponent(to.designSystemId, to.versionId, component);
+        });
+    }
+    /** Updates remote component groups. This method can only be used on component groups that already exist in the version
+     * @param to - Remote version to write to
+     * @param component - Component group to update
+     * @returns Nothing
+     */
+    updateComponentGroup(to, group) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateComponentGroup(to.designSystemId, to.versionId, group);
+        });
+    }
+    /** Updates remote component property value. This also creates the property value if it doesn't exist
+     * @param to - Remote version to write to
+     * @param newValue - Value to set - this can be multiple things, from ID to raw string value to others
+     * @param forComponent - Component to assign the value to
+     * @param forProperty - Property to assign the value to
+     */
+    updateComponentPropertyValue(to, newValue, forComponent, forProperty) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateComponentPropertyValue(to.designSystemId, to.versionId, newValue, forComponent, forProperty);
+        });
+    }
+    /** Deletes remote component property value
+     * @param to - Remote version to write to
+     * @param valueId - Value identifier
+     */
+    deleteComponentPropertyValue(to, valueId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.deleteComponentPropertyValue(to.designSystemId, to.versionId, valueId);
+        });
+    }
+    /** Create component property
+     * @param to - Remote version to write to
+     * @param model - Property creation model to create the property from
+     */
+    createComponentProperty(to, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.createComponentProperty(to.designSystemId, to.versionId, model);
+        });
+    }
+    /** Update component property
+     * @param to - Remote version to write to
+     * @param propertyIdInVersion - Remote element property to update
+     * @param model - Property update model to apply to property
+     */
+    updateComponentProperty(to, propertyIdInVersion, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateComponentProperty(to.designSystemId, to.versionId, propertyIdInVersion, model);
+        });
+    }
+    /** Delete component property. This will remove all values associated with the property
+     * @param to - Remote version to write to
+     * @param propertyIdInVersion - Id of the property to delete
+     */
+    deleteComponentProperty(to, propertyIdInVersion) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.deleteComponentProperty(to.designSystemId, to.versionId, propertyIdInVersion);
+        });
+    }
+    /** Resize specific component column
+     * @param to - Remote version to write to
+     * @param columnIdInVersion - Id of the column to update
+     * @param newWidth - New width of the column
+     */
+    updateResizeComponentColumn(to, view, column, newWidth) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateResizeComponentColumn(to.designSystemId, to.versionId, view, column, newWidth);
+        });
+    }
+    /** Move column to a new index and reorder all other columns around it
+     * @param to - Remote version to write to
+     * @param colum - Column object to move
+     * @param newIndex - New index to move the component to
+     */
+    updateReorderComponentColumn(to, view, column, newIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.updateReorderComponentColumn(to.designSystemId, to.versionId, view, column, newIndex);
+        });
+    }
+    // --- --- --- --- --- --- --- --- --- ---
+    // MARK: - Delete
+    /** Deletes remote component. Calling this method on component that doesn't exist in the version will result in error
+     * @param to - Remote version to write to
+     * @param componentIdInVersion - Component idInVersion to delete
+     * @returns Nothing
+     */
+    deleteComponent(to, componentIdInVersion) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.deleteComponent(to.designSystemId, to.versionId, componentIdInVersion);
+        });
+    }
+    /** Deletes remote component group. This method will also fix the component group tree by moving any subgroups to parent - do note it will NOT delete contents of the group. Calling this method on group that doesn't exist in the version will result in error
+     * @param to - Remote version to write to
+     * @param componentGroupIdInVersion - Component group idInVersion to delete
+     * @returns Nothing
+     */
+    ungroupComponentGroup(to, componentGroupIdInVersion) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.ungroupComponentGroup(to.designSystemId, to.versionId, componentGroupIdInVersion);
+        });
+    }
+    /** Deletes remote component group and all its descendants. All items (groups and components) underneath will be deleted. Calling this method on group that doesn't exist in the version will result in error
+     * @param to - Remote version to write to
+     * @param componentGroupToDelete - Component group to delete
+     * @param allComponents - Components for lookup
+     * @param allComponentGroup - Component group for lookup
+     * @returns Nothing
+     */
+    deleteComponentGroup(to, componentGroupToDelete, components, componentGroups) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.deleteComponentGroup(to.designSystemId, to.versionId, componentGroupToDelete, components, componentGroups);
+        });
+    }
 }
 exports.AreaComponents = AreaComponents;
 
@@ -35792,721 +35962,253 @@ exports.AreaPipelines = AreaPipelines;
 //
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AreaTokenValues = void 0;
-// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
-// MARK: - Imports
-const exports_1 = __webpack_require__(/*! ../../exports */ "./src/exports.ts");
-const SDKThemeUtilities_1 = __webpack_require__(/*! ../../model/themes/SDKThemeUtilities */ "./src/model/themes/SDKThemeUtilities.ts");
-const SDKColorToken_1 = __webpack_require__(/*! ../../model/tokens/SDKColorToken */ "./src/model/tokens/SDKColorToken.ts");
-const SDKDimensionToken_1 = __webpack_require__(/*! ../../model/tokens/SDKDimensionToken */ "./src/model/tokens/SDKDimensionToken.ts");
-const SDKStringToken_1 = __webpack_require__(/*! ../../model/tokens/SDKStringToken */ "./src/model/tokens/SDKStringToken.ts");
-const SDKSupernovaError_1 = __webpack_require__(/*! ../errors/SDKSupernovaError */ "./src/core/errors/SDKSupernovaError.ts");
-const lodash_1 = __webpack_require__(/*! lodash */ "../../node_modules/lodash/lodash.js");
+const TokenUtils_1 = __webpack_require__(/*! ../../utils/TokenUtils */ "./src/utils/TokenUtils.ts");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Token Values Area
 class AreaTokenValues {
     /** Creates a new theme with updated overrides */
     tokenThemeByUpdatingOverride(theme, override) {
-        const overrides = theme.overriddenTokens;
-        const filteredOverrides = overrides.filter((o) => o.id !== override.id);
-        filteredOverrides.push(override);
-        theme.overriddenTokens = filteredOverrides;
-        return theme;
+        return TokenUtils_1.TokenUtils.tokenThemeByUpdatingOverride(theme, override);
     }
     /** Creates a new theme with removed override */
     tokenThemeByRemovingOverride(theme, tokenId) {
-        const overrides = theme.overriddenTokens;
-        const filteredOverrides = overrides.filter((o) => o.id !== tokenId && o.idInVersion !== tokenId);
-        theme.overriddenTokens = filteredOverrides;
-        return theme;
+        return TokenUtils_1.TokenUtils.tokenThemeByRemovingOverride(theme, tokenId);
     }
     /** Creates a new color token with updated .color value */
     colorTokenByUpdatingColor(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof SDKColorToken_1.ColorToken) {
-            update.value = {
-                opacity: update.value.opacity,
-                color: {
-                    r: newValue.value.color.r,
-                    g: newValue.value.color.g,
-                    b: newValue.value.color.b,
-                    referencedTokenId: newValue.value.color.referencedTokenId,
-                },
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value = {
-                opacity: update.value.opacity,
-                color: {
-                    r: newValue.r,
-                    g: newValue.g,
-                    b: newValue.b,
-                    referencedTokenId: newValue.referencedTokenId,
-                },
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.colorTokenByUpdatingColor(token, newValue);
     }
     /** Creates a new color token with updated .opacity value */
     colorTokenByUpdatingOpacity(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof exports_1.OpacityToken) {
-            update.value.opacity = {
-                measure: newValue.value.measure,
-                unit: newValue.value.unit,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.opacity = {
-                measure: newValue,
-                unit: exports_1.Unit.raw,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.colorTokenByUpdatingOpacity(token, newValue);
     }
     /** Creates a new blur token with updated .type value */
     blurTokenByUpdatingType(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.type = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.blurTokenByUpdatingType(token, newValue);
     }
     /** Creates a new blur token with updated .radius value */
     blurTokenByUpdatingRadius(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.radius = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.blurTokenByUpdatingRadius(token, newValue);
     }
     /** Creates a new typography token with updated .fontFamily value */
     typographyTokenByUpdatingFontFamily(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof SDKStringToken_1.FontFamilyToken) {
-            update.value.fontFamily = {
-                text: newValue.value.text,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.fontFamily = {
-                text: newValue.text,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingFontFamily(token, newValue);
     }
     /** Creates a new typography token with updated .fontWeight value */
     typographyTokenByUpdatingFontWeight(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof SDKStringToken_1.FontWeightToken) {
-            update.value.fontWeight = {
-                text: newValue.value.text,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.fontWeight = {
-                text: newValue.text,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingFontWeight(token, newValue);
     }
     /** Creates a new typography token with updated .fontSize value */
     typographyTokenByUpdatingFontSize(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.fontSize = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingFontSize(token, newValue);
     }
     /** Creates a new typography token with updated .letterSpacing value */
     typographyTokenByUpdatingLetterSpacing(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.letterSpacing = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingLetterSpacing(token, newValue);
     }
     /** Creates a new typography token with updated .lineHeight value */
     typographyTokenByUpdatingLineHeight(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.lineHeight = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingLineHeight(token, newValue);
     }
     /** Creates a new typography token with updated .paragraphSpacing value */
     typographyTokenByUpdatingParagraphSpacing(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.paragraphSpacing = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingParagraphSpacing(token, newValue);
     }
     /** Creates a new typography token with updated .paragraphSpacing value */
     typographyTokenByUpdatingParagraphIndent(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.paragraphIndent = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingParagraphIndent(token, newValue);
     }
     /** Creates a new border token with updated .position value */
     typographyTokenByUpdatingTextDecoration(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof exports_1.TextDecorationToken) {
-            update.value.textDecoration = {
-                value: newValue.value.value,
-                options: newValue.value.options,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.textDecoration = {
-                value: newValue.value,
-                options: newValue.options,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingTextDecoration(token, newValue);
+    }
+    /** Creates a new typography token with updated .textCase value */
+    typographyTokenByUpdatingTextCase(token, newValue) {
+        return TokenUtils_1.TokenUtils.typographyTokenByUpdatingTextCase(token, newValue);
     }
     /** Creates a new border token with updated .color value. Do note, opacity is ignored */
     borderTokenByUpdatingColor(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof SDKColorToken_1.ColorToken) {
-            update.value.color = {
-                opacity: update.value.color.opacity,
-                color: {
-                    r: newValue.value.color.r,
-                    g: newValue.value.color.g,
-                    b: newValue.value.color.b,
-                    referencedTokenId: newValue.value.color.referencedTokenId,
-                },
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.color = {
-                opacity: update.value.color.opacity,
-                color: {
-                    r: newValue.r,
-                    g: newValue.g,
-                    b: newValue.b,
-                    referencedTokenId: newValue.referencedTokenId,
-                },
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.borderTokenByUpdatingColor(token, newValue);
     }
     /** Creates a new border token with updated color.opacity value */
     borderTokenByUpdatingOpacity(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (newValue instanceof exports_1.OpacityToken) {
-            update.value.color.opacity = {
-                measure: newValue.value.measure,
-                unit: newValue.value.unit,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            update.value.color.opacity = {
-                measure: newValue,
-                unit: exports_1.Unit.raw,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.borderTokenByUpdatingOpacity(token, newValue);
     }
     /** Creates a new border token with updated .width value */
     borderTokenByUpdatingWidth(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.width = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.borderTokenByUpdatingWidth(token, newValue);
     }
     /** Creates a new border token with updated .position value */
     borderTokenByUpdatingPosition(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.position = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.borderTokenByUpdatingPosition(token, newValue);
     }
     /** Creates a new border token with updated .style value */
     borderTokenByUpdatingStyle(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value.style = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.borderTokenByUpdatingStyle(token, newValue);
     }
     /** Creates a new dimension token with updated value */
     dimensionTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.dimensionTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new size token with updated value */
     sizeTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.sizeTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new space token with updated value */
     spaceTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.spaceTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new opacity token with updated value */
     opacityTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.opacityTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new font size token with updated value */
     fontSizeTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.fontSizeTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new font size token with updated value */
     lineHeightTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.lineHeightTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new letter spacing token with updated value */
     letterSpacingTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.letterSpacingTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new paragraph spacing token with updated value */
     paragraphSpacingTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.paragraphSpacingTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new border width token with updated value */
     borderWidthTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.borderWidthTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new radius token with updated value */
     radiusTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.radiusTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new duration token with updated value */
     durationTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.durationTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new z-index token with updated value */
     zIndexTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedDimensionValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.zIndexTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new string token with updated value */
     stringTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedStringValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.stringTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new product copy token with updated value */
     productCopyTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedStringValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.productCopyTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new font family token with updated value */
     fontFamilyTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedStringValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.fontFamilyTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new font weight token with updated value */
     fontWeightTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = this.rawOrReferencedStringValue(newValue);
-        return update;
+        return TokenUtils_1.TokenUtils.fontWeightTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new text case token with updated value */
     textCaseTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = {
-            value: newValue.value,
-            options: newValue.options,
-            referencedTokenId: null,
-        };
-        return update;
+        return TokenUtils_1.TokenUtils.textCaseTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new text case token with updated value */
     textDecorationTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = {
-            value: newValue.value,
-            options: newValue.options,
-            referencedTokenId: null,
-        };
-        return update;
+        return TokenUtils_1.TokenUtils.textDecorationTokenByUpdatingValue(token, newValue);
     }
     /** Creates a new visibility token with updated value */
     visibilityTokenByUpdatingValue(token, newValue) {
-        this.checkNotReference(token);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = {
-            value: newValue.value,
-            options: newValue.options,
-            referencedTokenId: null,
-        };
-        return update;
+        return TokenUtils_1.TokenUtils.visibilityTokenByUpdatingValue(token, newValue);
     }
     // --- --- --- --- --- --- --- --- --- ---
     // MARK: - Multi-layer token manipulation
     /** Creates a new shadow token with one new extra layer added at the end of all layers */
     shadowTokenByAddingLayer(token) {
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = {
-            color: {
-                color: {
-                    r: 0,
-                    g: 0,
-                    b: 0,
-                    referencedTokenId: null,
-                },
-                opacity: {
-                    measure: 1,
-                    unit: exports_1.Unit.raw,
-                    referencedTokenId: null,
-                },
-                referencedTokenId: null,
-            },
-            opacity: {
-                measure: 1,
-                unit: exports_1.Unit.raw,
-                referencedTokenId: null,
-            },
-            radius: 0,
-            spread: 0,
-            type: exports_1.ShadowType.drop,
-            x: 0,
-            y: 4,
-            referencedTokenId: null,
-        };
-        update.value.push(layer);
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByAddingLayer(token);
     }
     /** Creates a new shadow token by removing one of the layers */
     shadowTokenByRemovingLayer(token, layerIndex) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        update.value = update.value.splice(layerIndex, 1);
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByRemovingLayer(token, layerIndex);
     }
     /** Creates a new shadow token with updated .color value. Do note, opacity is ignored */
     shadowTokenByUpdatingColor(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        if (newValue instanceof SDKColorToken_1.ColorToken) {
-            layer.color = {
-                opacity: layer.color.opacity,
-                color: {
-                    r: newValue.value.color.r,
-                    g: newValue.value.color.g,
-                    b: newValue.value.color.b,
-                    referencedTokenId: newValue.value.color.referencedTokenId,
-                },
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            layer.color = {
-                opacity: layer.color.opacity,
-                color: {
-                    r: newValue.r,
-                    g: newValue.g,
-                    b: newValue.b,
-                    referencedTokenId: newValue.referencedTokenId,
-                },
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingColor(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .color value */
     shadowTokenByUpdatingOpacity(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        if (newValue instanceof exports_1.OpacityToken) {
-            layer.opacity = {
-                measure: newValue.value.measure,
-                unit: newValue.value.unit,
-                referencedTokenId: newValue.id,
-            };
-        }
-        else {
-            layer.opacity = {
-                measure: newValue,
-                unit: exports_1.Unit.raw,
-                referencedTokenId: null,
-            };
-        }
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingOpacity(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .x value */
     shadowTokenByUpdatingX(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.x = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingX(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .y value */
     shadowTokenByUpdatingY(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.y = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingY(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .radius value */
     shadowTokenByUpdatingRadius(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.radius = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingRadius(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .spread value */
     shadowTokenByUpdatingSpread(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.spread = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingSpread(token, layerIndex, newValue);
     }
     /** Creates a new shadow token with updated .type value */
     shadowTokenByUpdatingType(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.type = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.shadowTokenByUpdatingType(token, layerIndex, newValue);
     }
     /** Creates a new gradient token with updated .to value */
     gradientTokenByUpdatingTo(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.to = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.gradientTokenByUpdatingTo(token, layerIndex, newValue);
     }
     /** Creates a new gradient token with updated .from value */
     gradientTokenByUpdatingFrom(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.from = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.gradientTokenByUpdatingFrom(token, layerIndex, newValue);
     }
     /** Creates a new gradient token with updated .to value */
     gradientTokenByUpdatingType(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.type = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.gradientTokenByUpdatingType(token, layerIndex, newValue);
     }
     /** Creates a new gradient token with updated .aspectRatio value */
     gradientTokenByUpdatingAspectRatio(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.aspectRatio = newValue;
-        return update;
+        return TokenUtils_1.TokenUtils.gradientTokenByUpdatingAspectRatio(token, layerIndex, newValue);
     }
     /** Creates a new gradient token with updated .to value */
     gradientTokenByUpdatingStops(token, layerIndex, newValue) {
-        this.validateLayerAccess(token, layerIndex);
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        const layer = update.value[layerIndex];
-        layer.stops = this.gradientStopsFromRawData(newValue);
-        return update;
-    }
-    /** Builds the gradient stop data from the elementary values */
-    gradientStopsFromRawData(value) {
-        const stops = new Array();
-        for (const v of value) {
-            if (v.color instanceof SDKColorToken_1.ColorToken) {
-                const stop = {
-                    position: v.position,
-                    color: {
-                        opacity: v.color.value.opacity,
-                        color: {
-                            r: v.color.value.color.r,
-                            g: v.color.value.color.g,
-                            b: v.color.value.color.b,
-                            referencedTokenId: v.color.value.color.referencedTokenId,
-                        },
-                        referencedTokenId: v.color.id,
-                    },
-                };
-                stops.push(stop);
-            }
-            else {
-                const stop = {
-                    position: v.position,
-                    color: {
-                        opacity: v.color.opacity,
-                        color: {
-                            r: v.color.color.r,
-                            g: v.color.color.g,
-                            b: v.color.color.b,
-                            referencedTokenId: v.color.color.referencedTokenId,
-                        },
-                        referencedTokenId: null,
-                    },
-                };
-                stops.push(stop);
-            }
-        }
-        return stops;
+        return TokenUtils_1.TokenUtils.gradientTokenByUpdatingStops(token, layerIndex, newValue);
     }
     // --- --- --- --- --- --- --- --- --- ---
     // MARK: - Manipulating references
     /** Creates a new token where value is reference to the provided token. Token and reference must be of the same type */
     tokenByReferencing(token, reference) {
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
-        if (token.id === reference.id) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't create reference where token would reference itself");
-        }
-        if (token.tokenType !== reference.tokenType) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't reference token of different type");
-        }
-        update.value = Object.assign(Object.assign({}, (0, lodash_1.cloneDeep)(reference.value)), { referencedTokenId: reference.id });
-        return update;
+        return TokenUtils_1.TokenUtils.tokenByReferencing(token, reference);
     }
     /** Creates a new multilayer token where one of the layers is reference to the provided token. Token and reference must be of the same type */
     multilayerTokenByReferencing(token, layerIndex, reference) {
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
-        if (token.id === reference.id) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't create reference where token would reference itself");
-        }
-        if (token.tokenType !== reference.tokenType) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't reference token of different type");
-        }
-        // TODO: Multilayer shadow & gradient copy of the references
-        return update;
+        return TokenUtils_1.TokenUtils.multilayerTokenByReferencing(token, layerIndex, reference);
     }
     /** Creates a new token where value is raw, but taken from the previously referenced token. Token must have had reference before */
     tokenByDisconnectingReference(token) {
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
-        if (!token.value.referencedTokenId) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't create raw token from a token that isn't previously a reference");
-        }
-        update.value = Object.assign(Object.assign({}, (0, lodash_1.cloneDeep)(token.value)), { referencedTokenId: null });
-        return update;
+        return TokenUtils_1.TokenUtils.tokenByDisconnectingReference(token);
     }
     /** Creates a new multilayer token where one of the layers value is raw, but taken from the previously referenced token. That layer must have had reference before */
     multilayerTokenByDisconnectingReference(token, layerIndex) {
-        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
-        if (!token.value.referencedTokenId) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Can't create raw token from a token that isn't previously a reference");
-        }
-        // TODO: Multilayer shadow & gradient disconnect of the references
-        return update;
+        return TokenUtils_1.TokenUtils.multilayerTokenByDisconnectingReference(token, layerIndex);
     }
     /** Checks if token as a whole is a reference to another token */
     isReferencedToken(token) {
-        return (token.value.referencedTokenId !== null &&
-            token.value.referencedTokenId !== undefined);
+        return TokenUtils_1.TokenUtils.isReferencedToken(token);
     }
     /** Checks if a token layer of multilayer token is a reference to another token */
     isReferencedMultilayerTokenLayer(token, layerIndex) {
-        this.validateLayerAccess(token, layerIndex);
-        const layer = token.value[layerIndex];
-        return (layer.referencedTokenId !== null && layer.referencedTokenId !== undefined);
+        return TokenUtils_1.TokenUtils.isReferencedMultilayerTokenLayer(token, layerIndex);
     }
     /** Checks if a token was imported from some foreign source. Not imported tokens were always created in Supernova */
     isTokenImported(token) {
-        var _a, _b;
-        return (((_a = token.origin) === null || _a === void 0 ? void 0 : _a.sourceId) !== null && ((_b = token.origin) === null || _b === void 0 ? void 0 : _b.sourceId) !== undefined);
-    }
-    // --- --- --- --- --- --- --- --- --- ---
-    // MARK: - Conveniences
-    checkNotReference(token) {
-        if (token.value.referencedTokenId) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage("Performing value-replated operation on referenced token is not allowed");
-        }
-    }
-    rawOrReferencedDimensionValue(newValue) {
-        if (newValue instanceof SDKDimensionToken_1.DimensionCategoryToken) {
-            return {
-                measure: newValue.value.measure,
-                unit: newValue.value.unit,
-                referencedTokenId: newValue.id,
-            };
-        }
-        return {
-            measure: newValue.measure,
-            unit: newValue.unit,
-            referencedTokenId: null,
-        };
-    }
-    rawOrReferencedStringValue(newValue) {
-        if (newValue instanceof SDKStringToken_1.StringCategoryToken) {
-            return {
-                text: newValue.value.text,
-                referencedTokenId: newValue.id,
-            };
-        }
-        return {
-            text: newValue.text,
-            referencedTokenId: null,
-        };
-    }
-    validateLayerAccess(token, index) {
-        let layers;
-        if (token instanceof exports_1.ShadowToken) {
-            layers = token.shadowLayers;
-        }
-        else {
-            layers = token.gradientLayers;
-        }
-        if (index < 0 || index >= layers.length) {
-            throw SDKSupernovaError_1.SupernovaError.fromMessage(`Can't access layer at index ${index}, layer outside of allowed bounds`);
-        }
+        return TokenUtils_1.TokenUtils.isTokenImported(token);
     }
 }
 exports.AreaTokenValues = AreaTokenValues;
@@ -37728,7 +37430,7 @@ class DataCore {
     }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // MARK: - Elements: Tokens
-    /** Download all necesssary data for tokens and retrieve them resolved */
+    /** Download all necessary data for tokens and retrieve them resolved */
     tokens(designSystemId, versionId, filter) {
         return __awaiter(this, void 0, void 0, function* () {
             // Batch requests together
@@ -37874,24 +37576,26 @@ class DataCore {
     /** Delete group from remote */
     deleteTokenGroup(designSystemId, versionId, tokenGroupToDelete, tokens, tokenGroups) {
         return __awaiter(this, void 0, void 0, function* () {
-            const itemsToDelete = this.itemsToDeleteFromGroup(tokenGroupToDelete, tokens, tokenGroups);
-            return this.writeTokenData(designSystemId, versionId, [], [], itemsToDelete.tokensToDelete, itemsToDelete.groupsToDelete);
+            const toDelete = this.itemsToDeleteFromGroup(tokenGroupToDelete, tokens, tokenGroups);
+            return this.writeTokenData(designSystemId, versionId, [], [], toDelete.itemsToDelete, toDelete.groupsToDelete);
         });
     }
     itemsToDeleteFromGroup(group, tokens, tokenGroups) {
         const groupsToDelete = [];
-        const tokensToDelete = tokens.filter((t) => group.childrenIds.includes(t.id));
+        const tokensToDelete = tokens.filter((t) => {
+            return group.childrenIds.includes(t.id);
+        });
         groupsToDelete.push(...tokenGroups.filter((g) => group.childrenIds.includes(g.id)));
         // For each group, additionally, get all children
         for (const child of groupsToDelete) {
             const children = this.itemsToDeleteFromGroup(child, tokens, tokenGroups);
-            tokensToDelete.push(...children.tokensToDelete);
+            tokensToDelete.push(...children.itemsToDelete);
             groupsToDelete.push(...children.groupsToDelete);
         }
         // Add top level group
         groupsToDelete.push(group);
         return {
-            tokensToDelete,
+            itemsToDelete: tokensToDelete,
             groupsToDelete,
         };
     }
@@ -37958,9 +37662,9 @@ class DataCore {
     }
     /** Update column size */
     updateResizeTokenColumn(designSystemId, versionId, view, column, newWidth) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
-            return this.write.updateResizeTokenColumn(designSystemId, versionId, view.id, column.type, column.id, (_a = column.themeId) !== null && _a !== void 0 ? _a : undefined, (_b = column.basePropertyType) !== null && _b !== void 0 ? _b : undefined, newWidth);
+            return this.write.updateResizeTokenColumn(designSystemId, versionId, view.id, column.type, column.id, (_a = column.themeId) !== null && _a !== void 0 ? _a : undefined, (_b = column.basePropertyType) !== null && _b !== void 0 ? _b : undefined, (_c = column.propertyDefinitionId) !== null && _c !== void 0 ? _c : undefined, newWidth);
         });
     }
     /** Delete theme from remote */
@@ -38024,6 +37728,137 @@ class DataCore {
             return resolver.resolveGroupData(designComponentGroupData);
         });
     }
+    /** Write new component to remote */
+    createComponent(designSystemId, versionId, component, parentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const componentWriteObject = component.toWriteObject();
+            componentWriteObject.groupPersistentId = parentId;
+            const remoteComponent = yield this.write.createRemoteComponent(designSystemId, versionId, componentWriteObject);
+            return {
+                id: remoteComponent.persistentId,
+                idInVersion: remoteComponent.id,
+            };
+        });
+    }
+    /** Update existing component in remote */
+    updateComponent(designSystemId, versionId, component) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const componentWriteObject = component.toWriteObject();
+            yield this.write.updateRemoteComponent(designSystemId, versionId, componentWriteObject);
+        });
+    }
+    /** Write new component group to remote */
+    createComponentGroup(designSystemId, versionId, group, parentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const groupWriteObject = group.toWriteObject();
+            groupWriteObject.parentId = parentId;
+            const remoteGroup = yield this.write.createRemoteComponentGroup(designSystemId, versionId, groupWriteObject);
+            return {
+                id: remoteGroup.persistentId,
+                idInVersion: remoteGroup.id,
+            };
+        });
+    }
+    /** Update existing component group in remote */
+    updateComponentGroup(designSystemId, versionId, group) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const componentGroupWriteObject = group.toWriteObject();
+            yield this.write.updateRemoteComponentGroup(designSystemId, versionId, componentGroupWriteObject);
+        });
+    }
+    /** Update component property at remote */
+    updateComponentPropertyValue(designSystemId, versionId, newValue, component, property) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.updateComponentPropertyValue(designSystemId, versionId, newValue, component.id, property.id);
+        });
+    }
+    /** Delete component property in remote */
+    deleteComponentPropertyValue(designSystemId, versionId, valueId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.deleteComponentPropertyValue(designSystemId, versionId, valueId);
+        });
+    }
+    /** Create a custom property in remote */
+    createComponentProperty(designSystemId, versionId, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = {
+                meta: {
+                    name: model.name,
+                    description: model.description,
+                },
+                type: model.type,
+                targetElementType: SDKElementProperty_1.ElementPropertyTargetElementType.component,
+                codeName: model.codeName,
+                columnWidth: model.columnWidth,
+                linkElementType: model.linkElementType,
+                options: model.options,
+                persistentId: (0, uuid_1.v4)(),
+            };
+            const remoteProperty = yield this.write.createComponentProperty(designSystemId, versionId, payload);
+            return {
+                id: remoteProperty.persistentId,
+                idInVersion: remoteProperty.id,
+            };
+        });
+    }
+    /** Create a custom property in remote */
+    updateComponentProperty(designSystemId, versionId, propertyIdInVersion, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = {
+                meta: {
+                    name: model.name,
+                    description: model.description,
+                },
+                codeName: model.codeName,
+                options: model.options,
+            };
+            return this.write.updateComponentProperty(designSystemId, versionId, propertyIdInVersion, payload);
+        });
+    }
+    /** Delete a custom property in remote */
+    deleteComponentProperty(designSystemId, versionId, propertyId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.deleteComponentProperty(designSystemId, versionId, propertyId);
+        });
+    }
+    /** Move column to a new index and reorder all other columns around it */
+    updateReorderComponentColumn(designSystemId, versionId, view, column, newIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.updateReorderComponentColumn(designSystemId, versionId, view.id, column.id, newIndex);
+        });
+    }
+    /** Update column size */
+    updateResizeComponentColumn(designSystemId, versionId, view, column, newWidth) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.updateResizeComponentColumn(designSystemId, versionId, view.id, column.type, column.id, (_a = column.themeId) !== null && _a !== void 0 ? _a : undefined, (_b = column.basePropertyType) !== null && _b !== void 0 ? _b : undefined, (_c = column.propertyDefinitionId) !== null && _c !== void 0 ? _c : undefined, newWidth);
+        });
+    }
+    /** Delete component from remote */
+    deleteComponent(designSystemId, versionId, componentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.deleteRemoteComponent(designSystemId, versionId, componentId);
+        });
+    }
+    /** Delete group from remote */
+    ungroupComponentGroup(designSystemId, versionId, groupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.ungroupRemoteComponentGroup(designSystemId, versionId, groupId);
+        });
+    }
+    /** Delete group from remote */
+    deleteComponentGroup(designSystemId, versionId, componentGroupToDelete, components, componentGroups) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const toDelete = this.itemsToDeleteFromGroup(componentGroupToDelete, components, componentGroups);
+            return this.writeComponentData(designSystemId, versionId, [], [], toDelete.itemsToDelete, toDelete.groupsToDelete);
+        });
+    }
+    /** Write the component to remote */
+    writeComponentData(designSystemId, versionId, components, groups, deleteComponents, deleteGroups) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.write.writeComponentData(designSystemId, versionId, components.map((t) => t.toWriteObject()), groups.map((g) => g.toWriteObject()), deleteComponents, deleteGroups);
+        });
+    }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // MARK: - Elements: Assets
     /** Download all necessary data for assets and retrieve them resolved */
@@ -38354,7 +38189,7 @@ class DataCore {
     // MARK: - Transactions
     bulkUpdateTokenData(designSystemId, versionId, data) {
         return __awaiter(this, void 0, void 0, function* () {
-            const primaryPromises = new Array();
+            let primaryPromise = Promise.resolve();
             if (data.tokenMode === "create") {
                 // Create token if it didn't exist. We don't have to update the top level group, because BE will do that for us
                 const ids = yield this.createToken(designSystemId, versionId, data.token, data.tokenParent.id);
@@ -38363,10 +38198,10 @@ class DataCore {
             }
             else if (data.tokenMode === "update") {
                 // Update token because it did exist. In this case, also update group where it belongs
-                primaryPromises.push(this.updateToken(designSystemId, versionId, data.token));
-                primaryPromises.push(this.updateTokenGroup(designSystemId, versionId, data.tokenParent));
-                // Run primary promises before everything else
-                yield Promise.all(primaryPromises);
+                // but make sure that `this.updateToken` runs first and `this.updateTokenGroup` after it
+                primaryPromise = primaryPromise
+                    .then(() => this.updateToken(designSystemId, versionId, data.token))
+                    .then(() => this.updateTokenGroup(designSystemId, versionId, data.tokenParent));
             }
             // Add all secondary updates
             const secondaryPromises = new Array();
@@ -38385,7 +38220,9 @@ class DataCore {
                     secondaryPromises.push(this.updateTokenTheme(designSystemId, versionId, t));
                 });
             }
-            return Promise.all(secondaryPromises);
+            // NOTE: have the primary promise run first and secondary promises run after that
+            yield primaryPromise;
+            yield Promise.all(secondaryPromises);
         });
     }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
@@ -39266,78 +39103,190 @@ class DataCoreWriteRequests {
             yield this.bridge.put(endpoint, payload);
         });
     }
-    updateResizeTokenColumn(designSystemId, versionId, viewId, columnType, columnId, columnThemeId, columnBasePropertyType, newWidth) {
+    updateResizeTokenColumn(designSystemId, versionId, viewId, columnType, columnId, columnThemeId, columnBasePropertyType, columnPropertyDefinitionId, newWidth) {
         return __awaiter(this, void 0, void 0, function* () {
             const payload = {
                 type: columnType,
                 width: newWidth,
                 themeId: columnThemeId,
                 basePropertyType: columnBasePropertyType,
+                propertyDefinitionId: columnPropertyDefinitionId,
             };
-            console.log(`updateResizeTokenColumn`, payload);
             const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-data-views/${viewId}/columns/${columnId}`);
             yield this.bridge.put(endpoint, payload);
         });
     }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
-    // MARK: - TS Data
-    writeTokenStudioJSONData(designSystemId, versionId, data) {
+    // MARK: - Components
+    createRemoteComponent(designSystemId, versionId, component) {
         return __awaiter(this, void 0, void 0, function* () {
-            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "bff/token-studio");
-            yield this.bridge.post(endpoint, data);
-            return true;
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "components");
+            const payload = yield this.bridge.post(endpoint, component);
+            return payload.result.component;
         });
     }
-}
-exports.DataCoreWriteRequests = DataCoreWriteRequests;
-
-
-/***/ }),
-
-/***/ "./src/core/errors/SDKSupernovaError.ts":
-/*!**********************************************!*\
-  !*** ./src/core/errors/SDKSupernovaError.ts ***!
-  \**********************************************/
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-//
-//  SDKSupernovaError.ts
-//  Supernova SDK
-//
-//  Created by Jiri Trecak.
-//
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SupernovaError = void 0;
-const SupernovaNoNetworkResponse = "NO_NETWORK";
-// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
-// MARK: - Function Definition
-/** Supernova-enhanced error. Contains both machine and user readable information about error */
-class SupernovaError extends Error {
-    constructor(message, code, status, formErrors, requestId, serverTime, url) {
-        super(message);
-        this.code = code;
-        this.status = status;
-        this.formErrors = formErrors;
-        this.requestId = requestId;
-        this.serverTime = serverTime;
-        this.url = url;
-    }
-    /** Creates Supernova error from received but failed network response */
-    static fromNetworkResponse(response, url) {
-        var _a, _b, _c;
-        return new SupernovaError(response.message, response.reason, response.code, (_a = response.formErrors) !== null && _a !== void 0 ? _a : null, (_b = response.requestId) !== null && _b !== void 0 ? _b : null, (_c = response.serverTime) !== null && _c !== void 0 ? _c : null, url);
+    updateRemoteComponent(designSystemId, versionId, component) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `components/${component.id}`);
+            return this.bridge.put(endpoint, component);
+        });
     }
-    /** Creates Supernova error with generic network failure message */
-    static fromNoNetworkResponse(url) {
-        return new SupernovaError("No network or internet unreachable", SupernovaNoNetworkResponse, 12163, // Internet connection lost
-        null, new Date().toISOString(), null, url);
+    createRemoteComponentGroup(designSystemId, versionId, group) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "component-groups");
+            const payload = yield this.bridge.post(endpoint, group);
+            return payload.result.group;
+        });
     }
-    /** Creates Supernova error from local validation failure code */
-    static fromCode(code) {
-        // Error was thrown in the processing layer - tooling etc.
-        return new SupernovaError(code, code, null, null, null, null, null);
+    updateRemoteComponentGroup(designSystemId, versionId, group) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `component-groups/${group.id}`);
+            return this.bridge.put(endpoint, group);
+        });
+    }
+    deleteRemoteComponent(designSystemId, versionId, componentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `components/${componentId}`);
+            return this.bridge.delete(endpoint);
+        });
+    }
+    ungroupRemoteComponentGroup(designSystemId, versionId, componentGroupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `component-groups/${componentGroupId}`);
+            return this.bridge.delete(endpoint);
+        });
+    }
+    writeComponentData(designSystemId, versionId, components, groups, deleteComponents, deleteComponentGroups) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "bff/import");
+            const payload = {
+                components,
+                componentGroups: groups,
+                bulkDelete: {
+                    componentIds: deleteComponents.map((t) => t.idInVersion),
+                    componentGroupIds: deleteComponentGroups.map((t) => t.idInVersion),
+                },
+            };
+            return this.bridge.post(endpoint, payload);
+        });
+    }
+    updateComponentPropertyValue(designSystemId, versionId, newValue, componentId, propertyId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = {
+                value: newValue,
+                definitionId: propertyId,
+                targetElementId: componentId,
+            };
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-properties/values`);
+            yield this.bridge.post(endpoint, payload);
+        });
+    }
+    deleteComponentPropertyValue(designSystemId, versionId, valueId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-properties/values/${valueId}`);
+            yield this.bridge.delete(endpoint);
+        });
+    }
+    createComponentProperty(designSystemId, versionId, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "element-properties/definitions");
+            const payload = yield this.bridge.post(endpoint, model);
+            return payload.result.definition;
+        });
+    }
+    updateComponentProperty(designSystemId, versionId, propertyIdInVersion, model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-properties/definitions/${propertyIdInVersion}`);
+            return this.bridge.put(endpoint, model);
+        });
+    }
+    deleteComponentProperty(designSystemId, versionId, propertyId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-properties/definitions/${propertyId}`);
+            yield this.bridge.delete(endpoint);
+        });
+    }
+    updateReorderComponentColumn(designSystemId, versionId, viewId, columnId, newIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = {
+                newIndex,
+            };
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-data-views/${viewId}/columns/${columnId}/reorder`);
+            yield this.bridge.put(endpoint, payload);
+        });
+    }
+    updateResizeComponentColumn(designSystemId, versionId, viewId, columnType, columnId, columnThemeId, columnBasePropertyType, columnPropertyDefinitionId, newWidth) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = {
+                type: columnType,
+                width: newWidth,
+                themeId: columnThemeId,
+                basePropertyType: columnBasePropertyType,
+                propertyDefinitionId: columnPropertyDefinitionId,
+            };
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `element-data-views/${viewId}/columns/${columnId}`);
+            yield this.bridge.put(endpoint, payload);
+        });
+    }
+    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
+    // MARK: - TS Data
+    writeTokenStudioJSONData(designSystemId, versionId, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "bff/token-studio");
+            yield this.bridge.post(endpoint, data);
+            return true;
+        });
+    }
+}
+exports.DataCoreWriteRequests = DataCoreWriteRequests;
+
+
+/***/ }),
+
+/***/ "./src/core/errors/SDKSupernovaError.ts":
+/*!**********************************************!*\
+  !*** ./src/core/errors/SDKSupernovaError.ts ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+//
+//  SDKSupernovaError.ts
+//  Supernova SDK
+//
+//  Created by Jiri Trecak.
+//
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SupernovaError = void 0;
+const SupernovaNoNetworkResponse = "NO_NETWORK";
+// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
+// MARK: - Function Definition
+/** Supernova-enhanced error. Contains both machine and user readable information about error */
+class SupernovaError extends Error {
+    constructor(message, code, status, formErrors, requestId, serverTime, url) {
+        super(message);
+        this.code = code;
+        this.status = status;
+        this.formErrors = formErrors;
+        this.requestId = requestId;
+        this.serverTime = serverTime;
+        this.url = url;
+    }
+    /** Creates Supernova error from received but failed network response */
+    static fromNetworkResponse(response, url) {
+        var _a, _b, _c;
+        return new SupernovaError(response.message, response.reason, response.code, (_a = response.formErrors) !== null && _a !== void 0 ? _a : null, (_b = response.requestId) !== null && _b !== void 0 ? _b : null, (_c = response.serverTime) !== null && _c !== void 0 ? _c : null, url);
+    }
+    /** Creates Supernova error with generic network failure message */
+    static fromNoNetworkResponse(url) {
+        return new SupernovaError("No network or internet unreachable", SupernovaNoNetworkResponse, 12163, // Internet connection lost
+        null, new Date().toISOString(), null, url);
+    }
+    /** Creates Supernova error from local validation failure code */
+    static fromCode(code) {
+        // Error was thrown in the processing layer - tooling etc.
+        return new SupernovaError(code, code, null, null, null, null, null);
     }
     /** Creates Supernova error from generic error message */
     static fromMessage(message) {
@@ -40245,7 +40194,34 @@ class TokenResolver {
             }
         }
         /*
-         * Step 3: Create mixin tokens that can potentially reference pure resolved tokens
+         * Step 3: Create color tokens that can potentially reference pure resolved tokens
+         */
+        for (const rawToken of data) {
+            // Skip creation of all tokens that can have reference
+            if (rawToken.data.aliasTo) {
+                continue;
+            }
+            // Construct colors
+            if (rawToken.type === SDKTokenType_1.TokenType.color) {
+                const token = this.constructValueToken(rawToken, sortedElementProperties, elementValues);
+                this.resolvedTokens.set(token.id, token);
+            }
+        }
+        /*
+         * Step 4: Create all remaining color tokens
+         */
+        for (const rawToken of data) {
+            // Skip creation of all tokens that are not references
+            if (!rawToken.data.aliasTo) {
+                continue;
+            }
+            if (rawToken.type === SDKTokenType_1.TokenType.color) {
+                const token = this.constructReferencedToken(rawToken, sortedElementProperties, elementValues);
+                this.resolvedTokens.set(token.id, token);
+            }
+        }
+        /*
+         * Step 5: Create mixin tokens that can potentially reference pure resolved tokens
          */
         for (const rawToken of data) {
             // Skip creation of all tokens that can have reference
@@ -40253,13 +40229,13 @@ class TokenResolver {
                 continue;
             }
             // Construct raw typography, gradient, shadow and border colors
-            if (!(0, SDKTokenType_1.tokenTypeIsPure)(rawToken.type)) {
+            if (!(0, SDKTokenType_1.tokenTypeIsPure)(rawToken.type) && rawToken.type !== SDKTokenType_1.TokenType.color) {
                 const token = this.constructValueToken(rawToken, sortedElementProperties, elementValues);
                 this.resolvedTokens.set(token.id, token);
             }
         }
         /*
-         * Step 4: Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
+         * Step 6: Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
          */
         for (const rawToken of data) {
             // Skip creation of all tokens that are not references
@@ -40273,7 +40249,7 @@ class TokenResolver {
             }
         }
         /*
-         * Step 5: Assign parents to the tree
+         * Step 7: Assign parents to the tree
          */
         for (const tokenGroup of tokenGroups) {
             for (const childId of tokenGroup.childrenIds) {
@@ -40392,10 +40368,6 @@ class TokenResolver {
     }
     constructPureValueForReplica(type, replica, override) {
         switch (type) {
-            case SDKTokenType_1.TokenType.color:
-                ;
-                replica.value = this.constructColorValue(override.data.value);
-                break;
             case SDKTokenType_1.TokenType.dimension:
             case SDKTokenType_1.TokenType.size:
             case SDKTokenType_1.TokenType.space:
@@ -40464,7 +40436,7 @@ class TokenResolver {
             if (override.data.aliasTo) {
                 continue;
             }
-            // Construct raw colors, fonts, texts, radii and dimensions first
+            // Construct raw fonts, texts, radii and dimensions first
             if ((0, SDKTokenType_1.tokenTypeIsPure)(override.type)) {
                 if (!override.data.value) {
                     throw new Error(`Override must always have alias or value, but ${override.tokenPersistentId} provided neither (1: raw)`);
@@ -40495,7 +40467,38 @@ class TokenResolver {
             }
         }
         /*
-         * Step 4: Create pure tokens that are references. End of this step will provide us with all possible tokens resolved for mixins later
+         * Step 4: Create values for theme overrides that are color tokens
+         */
+        for (const override of overrideData) {
+            // Skip creation of all tokens that can have reference in this step
+            if (override.data.aliasTo) {
+                continue;
+            }
+            if (override.type === SDKTokenType_1.TokenType.color) {
+                const token = this.constructThemedValueToken(override, themeId);
+                this.resolvedOverrides.set(token.id, token);
+            }
+        }
+        /*
+         * Step 5: Create color tokens that are references. End of this step will provide us with all possible tokens resolved for mixins later
+         */
+        for (const override of overrideData) {
+            // Skip creation of all tokens that are not references
+            if (!override.data.aliasTo) {
+                continue;
+            }
+            if (override.type === SDKTokenType_1.TokenType.color &&
+                !this.resolvedOverrides.get(override.tokenPersistentId)) {
+                const resolvedOverride = this.resolvedOverrides.get(override.tokenPersistentId);
+                if (!resolvedOverride) {
+                    // Only construct reference if it wasn't constructed already
+                    const replica = this.constructReferencedThemedToken(override, themeId);
+                    this.resolvedOverrides.set(replica.id, replica);
+                }
+            }
+        }
+        /*
+         * Step 6: Create pure tokens that are references.
          */
         for (const override of overrideData) {
             // Skip creation of all tokens that can have reference in this step
@@ -40503,13 +40506,13 @@ class TokenResolver {
                 continue;
             }
             // Construct raw typography, gradient, shadow and border colors
-            if (!(0, SDKTokenType_1.tokenTypeIsPure)(override.type)) {
+            if (!(0, SDKTokenType_1.tokenTypeIsPure)(override.type) && override.type !== SDKTokenType_1.TokenType.color) {
                 const token = this.constructThemedValueToken(override, themeId);
                 this.resolvedOverrides.set(token.id, token);
             }
         }
         /*
-         * Step 5:Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
+         * Step 7: Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
          */
         for (const override of overrideData) {
             // Skip creation of all tokens that are not references
@@ -40523,7 +40526,7 @@ class TokenResolver {
             }
         }
         /*
-         * Step 5: Assign parents to the tree
+         * Step 8: Assign parents to the tree
          */
         for (const tokenGroup of tokenGroups) {
             for (const childId of tokenGroup.childrenIds) {
@@ -40535,7 +40538,7 @@ class TokenResolver {
             }
         }
         /*
-         * Step 6: Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
+         * Step 9: Create all remaining tokens, as all pure tokens that can be references and all value tokens with possible mixins were all resolved.
          */
         const theme = new SDKTokenTheme_1.TokenTheme(data, this.versionId);
         const themeOverrides = Array.from(this.resolvedOverrides.values());
@@ -40862,7 +40865,7 @@ class TokenResolver {
                     r,
                     g,
                     b,
-                    referencedTokenId: null
+                    referencedTokenId: null,
                 },
                 opacity,
                 referencedTokenId: null,
@@ -40878,7 +40881,7 @@ class TokenResolver {
                 b: color.color.b,
                 // TEST: Proper resolution of color.
                 // Maybe should set referencedTokenId above? Or here as one inside color.color.
-                referencedTokenId: color.referencedTokenId
+                referencedTokenId: color.referencedTokenId,
             },
             opacity,
             referencedTokenId: null,
@@ -41293,16 +41296,22 @@ exports.TokenResolver = TokenResolver;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.DocumentationPageBlockEmbedFigma = exports.DocumentationPageBlockDivider = exports.DocumentationPageBlockCustom = exports.DocumentationPageBlockCode = exports.DocumentationPageBlockCallout = exports.DocumentationPageBlockAssets = exports.DocumentationPageBlockAsset = exports.Documentation = exports.DesignComponent = exports.ElementDataViewColumnType = exports.ElementDataViewColumnBasePropertyType = exports.ElementDataViewColumn = exports.ElementDataView = exports.ElementPropertyOption = exports.ElementPropertyType = exports.ElementPropertyTargetElementType = exports.ElementPropertyLinkElementType = exports.ElementProperty = exports.Component = exports.RenderedAsset = exports.Asset = exports.ExporterConfigurationPropertyType = exports.ExporterConfigurationPropertyInputType = exports.ExporterConfigurationProperty = exports.ExporterCustomBlockVariant = exports.ExporterCustomBlockPropertyInputType = exports.ExporterCustomBlockPropertyType = exports.ExporterCustomBlockProperty = exports.ExporterCustomBlockMode = exports.ExporterCustomBlock = exports.Exporter = exports.Membership = exports.DesignSystemVersion = exports.DesignSystem = exports.Brand = exports.SubscriptionProductFeatures = exports.Acl = exports.UserProfile = exports.User = exports.WorkspaceNPMRegistrySettings = exports.WorkspaceSSOSettings = exports.WorkspaceIPWhitelistSettings = exports.WorkspaceSubscription = exports.WorkspaceOnboarding = exports.WorkspaceProfile = exports.Workspace = exports.Supernova = exports.DIMENSION_TOKEN_TYPES = exports.TokenUtilPreviewSegmentGenerator = exports.ElementPropertyValue = void 0;
-exports.DocumentationGroupBehavior = exports.DocumentationCalloutType = exports.BorderStyle = exports.BorderPosition = exports.BlurType = exports.AssetScaleType = exports.AssetScale = exports.AssetFormat = exports.Alignment = exports.TokenGroup = exports.DesignComponentGroup = exports.AssetGroup = exports.RichTextSpanAttribute = exports.RichTextSpan = exports.DocumentationRichText = exports.DocumentationPageAsset = exports.DocumentationPageBlock = exports.DocumentationPage = exports.DocumentationItem = exports.DocumentationGroup = exports.DocumentationConfiguration = exports.DocumentationItemConfiguration = exports.DocumentationItemHeader = exports.DocumentationPageBlockTableColumn = exports.DocumentationPageBlockTableRow = exports.DocumentationPageBlockTableCell = exports.DocumentationPageBlockTable = exports.DocumentationPageBlockTabItem = exports.DocumentationPageBlockTab = exports.DocumentationPageBlockColumnItem = exports.DocumentationPageBlockColumn = exports.DocumentationPageUnorderedList = exports.DocumentationPageBlockTokenList = exports.DocumentationPageBlockTokenGroup = exports.DocumentationPageBlockToken = exports.DocumentationPageBlockText = exports.DocumentationPageBlockShortcuts = exports.DocumentationPageBlockShortcutType = exports.DocumentationPageBlockShortcut = exports.DocumentationPageBlockRenderCode = exports.DocumentationPageBlockQuote = exports.DocumentationPageOrderedList = exports.DocumentationPageBlockImage = exports.DocumentationPageBlockHeading = exports.DocumentationPageBlockFrames = exports.DocumentationPageBlockFrame = exports.DocumentationPageBlockEmbedYoutube = exports.DocumentationPageBlockEmbedStorybook = exports.DocumentationPageBlockEmbedLink = exports.DocumentationPageBlockEmbedGeneric = void 0;
-exports.TextDecorationToken = exports.TextCaseToken = exports.FontWeightToken = exports.FontFamilyToken = exports.ProductCopyToken = exports.StringToken = exports.TypographyToken = exports.ShadowToken = exports.ZIndexToken = exports.DurationToken = exports.RadiusToken = exports.BorderWidthToken = exports.ParagraphSpacingToken = exports.LetterSpacingToken = exports.LineHeightToken = exports.FontSizeToken = exports.OpacityToken = exports.SpaceToken = exports.SizeToken = exports.DimensionToken = exports.GradientToken = exports.ColorToken = exports.BorderToken = exports.BlurToken = exports.TokenOrigin = exports.Size = exports.Source = exports.DesignComponentOrigin = exports.WorkspaceNPMRegistryType = exports.WorkspaceNPMRegistryAuthType = exports.WorkspaceSubscriptionStatusInternal = exports.WorkspaceSubscriptionStatus = exports.WorkspaceSubscriptionProduct = exports.WorkspaceSubscriptionPlanInterval = exports.VisibilityType = exports.UserRole = exports.Unit = exports.TokenType = exports.TextDecoration = exports.TextCase = exports.ShadowType = exports.RichTextSpanAttributeType = exports.GradientType = exports.FrameLayout = exports.FrameAlignment = exports.DocumentationPageBlockThemeType = exports.DocumentationPageBlockType = exports.DocumentationPageAssetType = exports.DocumentationItemType = exports.DocumentationHeadingType = void 0;
-exports.SupernovaError = exports.UnreachableCaseError = exports.TokenTransform = exports.MarkdownTransformType = exports.MarkdownTransform = exports.DocSearchResultDataType = exports.DocSearch = exports.SupernovaToolsDesignTokensPlugin = exports.DTPluginToSupernovaMapType = exports.JSONBuilderNamingOption = exports.TokenJSONBuilder = exports.TokenUtilPreviewGenerator = exports.TokenThemeOverride = exports.TokenTheme = exports.Token = exports.VisibilityToken = void 0;
+exports.DocumentationPageBlockCallout = exports.DocumentationPageBlockAssets = exports.DocumentationPageBlockAsset = exports.Documentation = exports.DesignComponent = exports.ElementDataViewColumnType = exports.ElementDataViewColumnBasePropertyType = exports.ElementDataViewColumn = exports.ElementDataView = exports.ElementPropertyOption = exports.ElementPropertyType = exports.ElementPropertyTargetElementType = exports.ElementPropertyLinkElementType = exports.ElementProperty = exports.Component = exports.RenderedAsset = exports.Asset = exports.ExporterConfigurationPropertyType = exports.ExporterConfigurationPropertyInputType = exports.ExporterConfigurationProperty = exports.ExporterCustomBlockVariant = exports.ExporterCustomBlockPropertyInputType = exports.ExporterCustomBlockPropertyType = exports.ExporterCustomBlockProperty = exports.ExporterCustomBlockMode = exports.ExporterCustomBlock = exports.Exporter = exports.Membership = exports.DesignSystemVersion = exports.DesignSystem = exports.Brand = exports.SubscriptionProductFeatures = exports.Acl = exports.UserProfile = exports.User = exports.WorkspaceNPMRegistrySettings = exports.WorkspaceSSOSettings = exports.WorkspaceIPWhitelistSettings = exports.WorkspaceSubscription = exports.WorkspaceOnboarding = exports.WorkspaceProfile = exports.Workspace = exports.Supernova = exports.OPTION_TOKEN_TYPES = exports.STRING_TOKEN_TYPES = exports.DIMENSION_TOKEN_TYPES = exports.TokenUtils = exports.TokenUtilPreviewSegmentGenerator = exports.ElementPropertyValue = exports.ThemeUtilities = void 0;
+exports.BlurType = exports.AssetScaleType = exports.AssetScale = exports.AssetFormat = exports.Alignment = exports.TokenGroup = exports.DesignComponentGroup = exports.AssetGroup = exports.RichTextSpanAttribute = exports.RichTextSpan = exports.DocumentationRichText = exports.DocumentationPageAsset = exports.DocumentationPageBlock = exports.DocumentationPage = exports.DocumentationItem = exports.DocumentationGroup = exports.DocumentationConfiguration = exports.DocumentationItemConfiguration = exports.DocumentationItemHeader = exports.DocumentationPageBlockTableColumn = exports.DocumentationPageBlockTableRow = exports.DocumentationPageBlockTableCell = exports.DocumentationPageBlockTable = exports.DocumentationPageBlockTabItem = exports.DocumentationPageBlockTab = exports.DocumentationPageBlockColumnItem = exports.DocumentationPageBlockColumn = exports.DocumentationPageUnorderedList = exports.DocumentationPageBlockTokenList = exports.DocumentationPageBlockTokenGroup = exports.DocumentationPageBlockToken = exports.DocumentationPageBlockText = exports.DocumentationPageBlockShortcuts = exports.DocumentationPageBlockShortcutType = exports.DocumentationPageBlockShortcut = exports.DocumentationPageBlockRenderCode = exports.DocumentationPageBlockQuote = exports.DocumentationPageOrderedList = exports.DocumentationPageBlockImage = exports.DocumentationPageBlockHeading = exports.DocumentationPageBlockFrames = exports.DocumentationPageBlockFrame = exports.DocumentationPageBlockEmbedYoutube = exports.DocumentationPageBlockEmbedStorybook = exports.DocumentationPageBlockEmbedLink = exports.DocumentationPageBlockEmbedGeneric = exports.DocumentationPageBlockEmbedFigma = exports.DocumentationPageBlockDivider = exports.DocumentationPageBlockCustom = exports.DocumentationPageBlockCode = void 0;
+exports.ProductCopyToken = exports.StringToken = exports.TypographyToken = exports.ShadowToken = exports.ZIndexToken = exports.DurationToken = exports.RadiusToken = exports.BorderWidthToken = exports.ParagraphSpacingToken = exports.LetterSpacingToken = exports.LineHeightToken = exports.FontSizeToken = exports.OpacityToken = exports.SpaceToken = exports.SizeToken = exports.DimensionToken = exports.GradientToken = exports.ColorToken = exports.BorderToken = exports.BlurToken = exports.TokenOrigin = exports.Size = exports.Source = exports.DesignComponentOrigin = exports.WorkspaceNPMRegistryType = exports.WorkspaceNPMRegistryAuthType = exports.WorkspaceSubscriptionStatusInternal = exports.WorkspaceSubscriptionStatus = exports.WorkspaceSubscriptionProduct = exports.WorkspaceSubscriptionPlanInterval = exports.VisibilityType = exports.UserRole = exports.Unit = exports.TokenType = exports.TextDecoration = exports.TextCase = exports.ShadowType = exports.RichTextSpanAttributeType = exports.GradientType = exports.FrameLayout = exports.FrameAlignment = exports.DocumentationPageBlockThemeType = exports.DocumentationPageBlockType = exports.DocumentationPageAssetType = exports.DocumentationItemType = exports.DocumentationHeadingType = exports.DocumentationGroupBehavior = exports.DocumentationCalloutType = exports.BorderStyle = exports.BorderPosition = void 0;
+exports.SupernovaError = exports.UnreachableCaseError = exports.TokenTransform = exports.MarkdownTransformType = exports.MarkdownTransform = exports.DocSearchResultDataType = exports.DocSearch = exports.SupernovaToolsDesignTokensPlugin = exports.DTPluginToSupernovaMapType = exports.JSONBuilderNamingOption = exports.TokenJSONBuilder = exports.TokenUtilPreviewGenerator = exports.TokenThemeOverride = exports.TokenTheme = exports.Token = exports.VisibilityToken = exports.TextDecorationToken = exports.TextCaseToken = exports.FontWeightToken = exports.FontFamilyToken = void 0;
+var SDKThemeUtilities_1 = __webpack_require__(/*! ./model/themes/SDKThemeUtilities */ "./src/model/themes/SDKThemeUtilities.ts");
+Object.defineProperty(exports, "ThemeUtilities", ({ enumerable: true, get: function () { return SDKThemeUtilities_1.ThemeUtilities; } }));
 var SDKElementPropertyValue_1 = __webpack_require__(/*! ./model/elements/values/SDKElementPropertyValue */ "./src/model/elements/values/SDKElementPropertyValue.ts");
 Object.defineProperty(exports, "ElementPropertyValue", ({ enumerable: true, get: function () { return SDKElementPropertyValue_1.ElementPropertyValue; } }));
 var TokenUtilPreviewSegmentGenerator_1 = __webpack_require__(/*! ./tools/token-preview/TokenUtilPreviewSegmentGenerator */ "./src/tools/token-preview/TokenUtilPreviewSegmentGenerator.ts");
 Object.defineProperty(exports, "TokenUtilPreviewSegmentGenerator", ({ enumerable: true, get: function () { return TokenUtilPreviewSegmentGenerator_1.TokenUtilPreviewSegmentGenerator; } }));
+var TokenUtils_1 = __webpack_require__(/*! ./utils/TokenUtils */ "./src/utils/TokenUtils.ts");
+Object.defineProperty(exports, "TokenUtils", ({ enumerable: true, get: function () { return TokenUtils_1.TokenUtils; } }));
 var SDKTokenType_1 = __webpack_require__(/*! ./model/enums/SDKTokenType */ "./src/model/enums/SDKTokenType.ts");
 Object.defineProperty(exports, "DIMENSION_TOKEN_TYPES", ({ enumerable: true, get: function () { return SDKTokenType_1.DIMENSION_TOKEN_TYPES; } }));
+Object.defineProperty(exports, "STRING_TOKEN_TYPES", ({ enumerable: true, get: function () { return SDKTokenType_1.STRING_TOKEN_TYPES; } }));
+Object.defineProperty(exports, "OPTION_TOKEN_TYPES", ({ enumerable: true, get: function () { return SDKTokenType_1.OPTION_TOKEN_TYPES; } }));
 // Export main Supernova object
 var SDKSupernova_1 = __webpack_require__(/*! ./core/SDKSupernova */ "./src/core/SDKSupernova.ts");
 Object.defineProperty(exports, "Supernova", ({ enumerable: true, get: function () { return SDKSupernova_1.Supernova; } }));
@@ -42091,8 +42100,8 @@ class Component {
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // MARK: - Constructor
     constructor(model, properties, propertyValues) {
-        this.id = model.id;
-        this.persistentId = model.persistentId;
+        this.idInVersion = model.id;
+        this.id = model.persistentId;
         this.designSystemVersionId = model.designSystemVersionId;
         this.brandId = model.brandId;
         this.name = model.meta.name;
@@ -42100,7 +42109,7 @@ class Component {
         this.properties = properties;
         this.propertyValues = {};
         for (const value of propertyValues) {
-            if (value.targetElementId === this.persistentId) {
+            if (value.targetElementId === this.id) {
                 // Property value refers to this element
                 for (const property of properties) {
                     if (property.id === value.definitionId) {
@@ -42113,6 +42122,19 @@ class Component {
         this.createdAt = model.createdAt ? new Date(model.createdAt) : null;
         this.updatedAt = model.updatedAt ? new Date(model.updatedAt) : null;
     }
+    toWriteObject() {
+        var _a;
+        return {
+            id: this.idInVersion,
+            brandId: this.brandId,
+            designSystemVersionId: this.designSystemVersionId,
+            persistentId: this.id,
+            meta: {
+                name: this.name,
+                description: (_a = this.description) !== null && _a !== void 0 ? _a : "",
+            },
+        };
+    }
 }
 exports.Component = Component;
 
@@ -44199,7 +44221,7 @@ exports.ElementProperty = ElementProperty;
 /*!********************************************************!*\
   !*** ./src/model/elements/SDKElementPropertyOption.ts ***!
   \********************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
@@ -44211,6 +44233,8 @@ exports.ElementProperty = ElementProperty;
 //
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ElementPropertyOption = void 0;
+const SDKColorToken_1 = __webpack_require__(/*! ../tokens/SDKColorToken */ "./src/model/tokens/SDKColorToken.ts");
+const color2k_1 = __webpack_require__(/*! color2k */ "../../node_modules/color2k/dist/index.exports.require.cjs.js");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: -  Object Definition
 class ElementPropertyOption {
@@ -44224,14 +44248,96 @@ class ElementPropertyOption {
     }
     /** Constructs directly manipulable update object for user profile */
     toUpdateObject() {
+        var _a;
         return {
             id: this.id,
             name: this.name,
             backgroundColor: {
-                value: this.backgroundColor,
+                value: (_a = SDKColorToken_1.ColorToken.colorStringToNormalizedServerValue(this.backgroundColor, true)) !== null && _a !== void 0 ? _a : SDKColorToken_1.ColorToken.normalizedDefaultServerValue(),
             },
         };
     }
+    /** Returns background color represented as badge color. If badge color is different than what badge defines as base, return custom. Note: Only temporary implementation until BE supports it properly */
+    asBadgeColor() {
+        // Normalize current hex coming from BE and ignore alpha which is not supported by the badge
+        if (!this.backgroundColor) {
+            return "custom";
+        }
+        const rgba = (0, color2k_1.parseToRgba)(this.backgroundColor);
+        const color = (0, color2k_1.toHex)(`rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, 1)`).toUpperCase();
+        // Return badge color based on the hex or custom if not found
+        switch (color) {
+            case "#EDF5FF":
+                return "blue";
+            case "#D5FBFE":
+                return "cyan";
+            case "#FCF0FF":
+                return "fuchsia";
+            case "#EBFEF6":
+                return "green";
+            case "#EDEFF3":
+                return "grey";
+            case "#F6F7F9":
+                return "light-grey";
+            case "#FFF2E1":
+                return "orange";
+            case "#FDF0F7":
+                return "pink";
+            case "#F5F2FD":
+                return "purple";
+            case "#FEF1F2":
+                return "red";
+            case "#DFFDF6":
+                return "teal";
+            case "#FEF9C3":
+                return "yellow";
+            default:
+                return "custom";
+        }
+    }
+    /** Sets background color based on badge identifier color. Note: Only temporary implementation until BE supports it properly */
+    setFromBadgeColor(color) {
+        switch (color) {
+            case "blue":
+                this.backgroundColor = "#edf5ffff";
+                break;
+            case "cyan":
+                this.backgroundColor = "#d5fbfeff";
+                break;
+            case "fuchsia":
+                this.backgroundColor = "#fcf0ffff";
+                break;
+            case "green":
+                this.backgroundColor = "#ebfef6ff";
+                break;
+            case "grey":
+                this.backgroundColor = "#edeff3ff";
+                break;
+            case "light-grey":
+                this.backgroundColor = "#f6f7f9ff";
+                break;
+            case "orange":
+                this.backgroundColor = "#fff2e1ff";
+                break;
+            case "pink":
+                this.backgroundColor = "#fdf0f7ff";
+                break;
+            case "purple":
+                this.backgroundColor = "#f5f2fdff";
+                break;
+            case "red":
+                this.backgroundColor = "#fef1f2ff";
+                break;
+            case "teal":
+                this.backgroundColor = "#dffdf6ff";
+                break;
+            case "yellow":
+                this.backgroundColor = "#fef9c3ff";
+                break;
+            default:
+                throw new Error("Cannot set custom color using this method. Set background color directly");
+        }
+    }
 }
 exports.ElementPropertyOption = ElementPropertyOption;
 
@@ -45003,7 +45109,6 @@ exports.ALL_TOKEN_TYPES = [
     TokenType.blur,
 ];
 exports.PURE_TOKEN_TYPES = [
-    TokenType.color,
     ...exports.DIMENSION_TOKEN_TYPES,
     ...exports.STRING_TOKEN_TYPES,
     ...exports.OPTION_TOKEN_TYPES,
@@ -47065,7 +47170,7 @@ class BorderToken extends SDKToken_1.Token {
         return specificData;
     }
     static valueToWriteObject(value) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const valueObject = !value.referencedTokenId
             ? {
                 color: {
@@ -47075,15 +47180,18 @@ class BorderToken extends SDKToken_1.Token {
                         : {
                             color: SDKColorToken_1.ColorToken.colorValueToHex8(value.color),
                             opacity: {
-                                value: {
-                                    measure: value.color.opacity.measure,
-                                    unit: value.color.opacity.unit,
-                                },
+                                aliasTo: (_b = value.color.opacity.referencedTokenId) !== null && _b !== void 0 ? _b : undefined,
+                                value: value.color.opacity.referencedTokenId
+                                    ? null
+                                    : {
+                                        measure: value.color.opacity.measure,
+                                        unit: value.color.opacity.unit,
+                                    },
                             },
                         },
                 },
                 width: {
-                    aliasTo: (_b = value.width.referencedTokenId) !== null && _b !== void 0 ? _b : undefined,
+                    aliasTo: (_c = value.width.referencedTokenId) !== null && _c !== void 0 ? _c : undefined,
                     value: value.width.referencedTokenId
                         ? null
                         : {
@@ -47096,7 +47204,7 @@ class BorderToken extends SDKToken_1.Token {
             }
             : undefined;
         return {
-            aliasTo: (_c = value.referencedTokenId) !== null && _c !== void 0 ? _c : undefined,
+            aliasTo: (_d = value.referencedTokenId) !== null && _d !== void 0 ? _d : undefined,
             value: valueObject,
         };
     }
@@ -47189,7 +47297,7 @@ class ColorToken extends SDKToken_1.Token {
     static colorValueFromDefinition(definition) {
         const normalizedDefinition = this.normalizeColor(definition);
         const result = (0, parse_color_1.default)(normalizedDefinition);
-        if (!result) {
+        if (!result || !result.rgba) {
             console.log(`Unable to parse provided color value '${definition}'. Hex, RGB, HSL, HSV or CMYK are supported. Fix the error to import the color value properly.`);
             // Handle gracefully
             return {
@@ -47365,6 +47473,19 @@ class ColorToken extends SDKToken_1.Token {
             .join("")
             .toLowerCase()}`;
     }
+    /** Normalizes any color value to server readable value, and ignores alpha value optionally */
+    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+    static colorStringToNormalizedServerValue(value, ignoreAlpha = false) {
+        if (!value) {
+            return null;
+        }
+        const rgba = (0, color2k_1.parseToRgba)(value);
+        const color = (0, color2k_1.toHex)(`rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${ignoreAlpha ? "1" : rgba[3]})`).toLowerCase();
+        return color.length === 7 ? `${color}ff` : color;
+    }
+    static normalizedDefaultServerValue() {
+        return "#000000ff";
+    }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // MARK: - Updates
     updateWithRawValue(value) {
@@ -47391,7 +47512,7 @@ class ColorToken extends SDKToken_1.Token {
         return specificData;
     }
     static valueToWriteObject(value) {
-        var _a;
+        var _a, _b;
         return {
             aliasTo: (_a = value.referencedTokenId) !== null && _a !== void 0 ? _a : undefined,
             value: value.referencedTokenId
@@ -47401,10 +47522,13 @@ class ColorToken extends SDKToken_1.Token {
                         ? { aliasTo: value.color.referencedTokenId }
                         : ColorToken.colorValueToHex8(value),
                     opacity: {
-                        value: {
-                            unit: SDKUnit_1.Unit.raw,
-                            measure: value.opacity.measure,
-                        },
+                        aliasTo: (_b = value.opacity.referencedTokenId) !== null && _b !== void 0 ? _b : undefined,
+                        value: value.opacity.referencedTokenId
+                            ? null
+                            : {
+                                measure: value.opacity.measure,
+                                unit: value.opacity.unit,
+                            },
                     },
                 },
         };
@@ -47505,6 +47629,7 @@ class DimensionCategoryToken extends SDKToken_1.Token {
             case SDKTokenType_1.TokenType.fontSize:
             case SDKTokenType_1.TokenType.letterSpacing:
             case SDKTokenType_1.TokenType.paragraphSpacing:
+            case SDKTokenType_1.TokenType.radius:
                 return SDKUnit_1.SIZE_UNITS.includes(unit) ? unit : SDKUnit_1.Unit.pixels;
             case SDKTokenType_1.TokenType.lineHeight:
                 return SDKUnit_1.LINE_HEIGHT_UNITS.includes(unit) ? unit : SDKUnit_1.Unit.raw;
@@ -47512,7 +47637,6 @@ class DimensionCategoryToken extends SDKToken_1.Token {
                 // TODO: Consider transforming percent measure if it is referenced
                 return SDKUnit_1.Unit.raw;
             case SDKTokenType_1.TokenType.borderWidth:
-            case SDKTokenType_1.TokenType.radius:
                 return SDKUnit_1.Unit.pixels;
             case SDKTokenType_1.TokenType.duration:
                 return SDKUnit_1.Unit.ms;
@@ -47533,7 +47657,9 @@ class DimensionCategoryToken extends SDKToken_1.Token {
         if (SDKTokenType_1.MS_DIMENSION_TOKEN_TYPES.includes(type)) {
             return SDKUnit_1.Unit.ms;
         }
-        if (type === SDKTokenType_1.TokenType.lineHeight && parsedDefinition !== undefined && parsedDefinition <= 10) {
+        if (type === SDKTokenType_1.TokenType.lineHeight &&
+            parsedDefinition !== undefined &&
+            parsedDefinition <= 10) {
             return SDKUnit_1.Unit.raw;
         }
         if (type === SDKTokenType_1.TokenType.dimension && parsedDefinition !== undefined) {
@@ -47606,20 +47732,30 @@ class DimensionCategoryToken extends SDKToken_1.Token {
             }
             unit = SDKUnit_1.Unit.raw;
         }
-        else if ([SDKTokenType_1.TokenType.borderWidth, SDKTokenType_1.TokenType.radius].includes(type)) {
+        else if ([SDKTokenType_1.TokenType.borderWidth].includes(type)) {
             unit = SDKUnit_1.Unit.pixels;
         }
         else if (type === SDKTokenType_1.TokenType.duration) {
             unit = SDKUnit_1.Unit.ms;
         }
-        else if ([SDKTokenType_1.TokenType.size, SDKTokenType_1.TokenType.space, SDKTokenType_1.TokenType.fontSize, SDKTokenType_1.TokenType.paragraphSpacing, SDKTokenType_1.TokenType.letterSpacing].includes(type) && !SDKUnit_1.SIZE_UNITS.includes(unit)) {
+        else if ([
+            SDKTokenType_1.TokenType.size,
+            SDKTokenType_1.TokenType.space,
+            SDKTokenType_1.TokenType.fontSize,
+            SDKTokenType_1.TokenType.paragraphSpacing,
+            SDKTokenType_1.TokenType.letterSpacing,
+            SDKTokenType_1.TokenType.radius,
+        ].includes(type) &&
+            !SDKUnit_1.SIZE_UNITS.includes(unit)) {
             unit = SDKUnit_1.Unit.pixels;
         }
-        else if (type == SDKTokenType_1.TokenType.dimension && isUnitless) {
+        else if (type === SDKTokenType_1.TokenType.dimension && isUnitless) {
             // Fallback to raw, for types that support raw and come unitless
             unit = SDKUnit_1.Unit.raw;
         }
-        else if (type === SDKTokenType_1.TokenType.lineHeight && (!SDKUnit_1.LINE_HEIGHT_UNITS.includes(unit) || (isUnitless && parsedMeasure <= 10))) {
+        else if (type === SDKTokenType_1.TokenType.lineHeight &&
+            (!SDKUnit_1.LINE_HEIGHT_UNITS.includes(unit) ||
+                (isUnitless && parsedMeasure <= 10))) {
             // If the value of line height is larger than 10, import as pixels
             // Some reasoning: usually, the raw is used for relative values like 1.4, 1.8, 2.5, etc. where pixels are used when define for absolute values like 12px, 16px, 36px etc
             unit = SDKUnit_1.Unit.raw;
@@ -47681,11 +47817,27 @@ class DimensionCategoryToken extends SDKToken_1.Token {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         return DimensionToken.valueToString(this.value);
     }
-    static valueToString(value) {
-        const unit = value.unit;
-        const measure = value.measure;
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        return `${measure}${DimensionToken.unitToString(unit)}`;
+    static valueToString(value, options = {
+        maxNumberOfDecimals: 2,
+        clipTrailingZeroes: true,
+    }) {
+        const measureString = this.numberToString(value.measure, options);
+        return `${measureString}${this.unitToString(value.unit)}`;
+    }
+    static numberToString(value, options = {
+        maxNumberOfDecimals: 2,
+        clipTrailingZeroes: true,
+    }) {
+        let measureString = value.toString();
+        if ((options === null || options === void 0 ? void 0 : options.maxNumberOfDecimals) !== undefined) {
+            const factor = Math.pow(10, options.maxNumberOfDecimals);
+            const adjustedMeasure = Math.round(value * factor) / factor;
+            measureString = adjustedMeasure.toFixed(options.maxNumberOfDecimals);
+        }
+        if (options === null || options === void 0 ? void 0 : options.clipTrailingZeroes) {
+            measureString = parseFloat(measureString).toString();
+        }
+        return `${measureString}`;
     }
     static unitToString(unit) {
         switch (unit) {
@@ -54892,7 +55044,7 @@ class TokenUtilPreviewMetadataGenerator {
             }
             case SDKTokenType_1.TokenType.blur: {
                 const t = token;
-                return SDKDimensionToken_1.DimensionToken.valueToString(t.value.radius);
+                return SDKDimensionToken_1.DimensionToken.valueToString(t.value.radius, {});
             }
             case SDKTokenType_1.TokenType.shadow: {
                 const t = token;
@@ -54909,16 +55061,16 @@ class TokenUtilPreviewMetadataGenerator {
                 if (layer) {
                     switch (layer.type) {
                         case SDKGradientType_1.GradientType.linear:
-                            return "linear gradient";
+                            return "linear";
                         case SDKGradientType_1.GradientType.angular:
-                            return "angular gradient";
+                            return "angular";
                         case SDKGradientType_1.GradientType.radial:
-                            return "radial gradient";
+                            return "radial";
                         default:
                             throw new Error(`Unknown gradient type`);
                     }
                 }
-                return "linear gradient";
+                return "linear";
             }
             case SDKTokenType_1.TokenType.fontFamily: {
                 const t = token;
@@ -55472,7 +55624,7 @@ class TokenUtilPreviewReferenceInfoGenerator {
                             key: [this.label("Font weight")],
                             value: [
                                 {
-                                    value: t.value.fontFamily.text,
+                                    value: t.value.fontWeight.text,
                                     prefersReferenceName: false,
                                     referencedName: (_6 = (_5 = TokenUtils_1.TokenUtils.lookupReference((_4 = (_3 = t.value) === null || _3 === void 0 ? void 0 : _3.fontSize) === null || _4 === void 0 ? void 0 : _4.referencedTokenId, allTokens)) === null || _5 === void 0 ? void 0 : _5.name) !== null && _6 !== void 0 ? _6 : undefined,
                                 },
@@ -55576,7 +55728,7 @@ class TokenUtilPreviewReferenceInfoGenerator {
         var _a, _b, _c, _d;
         switch (token.tokenType) {
             case SDKTokenType_1.TokenType.shadow: {
-                const layer = token.value.values[layerIndex];
+                const layer = token.value[layerIndex];
                 let shadowType = "";
                 switch (layer.type) {
                     case exports_1.ShadowType.drop:
@@ -55655,7 +55807,7 @@ class TokenUtilPreviewReferenceInfoGenerator {
                 };
             }
             case SDKTokenType_1.TokenType.gradient: {
-                const layer = token.value.values[layerIndex];
+                const layer = token.value[layerIndex];
                 const transform = new exports_1.TokenTransform();
                 const cssString = transform.gradientTokenToCSS(layer);
                 return {
@@ -55735,6 +55887,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TokenUtilPreviewSegmentGenerator = void 0;
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Imports
+const exports_1 = __webpack_require__(/*! ../../exports */ "./src/exports.ts");
 const SDKBorderStyle_1 = __webpack_require__(/*! ../../model/enums/SDKBorderStyle */ "./src/model/enums/SDKBorderStyle.ts");
 const SDKTextCase_1 = __webpack_require__(/*! ../../model/enums/SDKTextCase */ "./src/model/enums/SDKTextCase.ts");
 const SDKTextDecoration_1 = __webpack_require__(/*! ../../model/enums/SDKTextDecoration */ "./src/model/enums/SDKTextDecoration.ts");
@@ -55743,29 +55896,33 @@ const SDKVisibilityType_1 = __webpack_require__(/*! ../../model/enums/SDKVisibil
 const SDKColorToken_1 = __webpack_require__(/*! ../../model/tokens/SDKColorToken */ "./src/model/tokens/SDKColorToken.ts");
 const SDKDimensionToken_1 = __webpack_require__(/*! ../../model/tokens/SDKDimensionToken */ "./src/model/tokens/SDKDimensionToken.ts");
 const TokenUtils_1 = __webpack_require__(/*! ../../utils/TokenUtils */ "./src/utils/TokenUtils.ts");
-const SDKToolsTokenTransform_1 = __webpack_require__(/*! ../token-transform/SDKToolsTokenTransform */ "./src/tools/token-transform/SDKToolsTokenTransform.ts");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Utility
 class TokenUtilPreviewSegmentGenerator {
     static resolvedSegmentsForToken(token, allTokens) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44;
         switch (token.tokenType) {
             case SDKTokenType_1.TokenType.color: {
                 const t = token;
                 const reference = TokenUtils_1.TokenUtils.lookupReference((_a = t.value) === null || _a === void 0 ? void 0 : _a.referencedTokenId, allTokens);
-                return [
+                let segments = [
                     {
                         value: SDKColorToken_1.ColorToken.colorValueToHex6(t.value).toUpperCase(),
                         prefersReferenceName: true,
                         referencedName: (_b = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _b !== void 0 ? _b : undefined,
                     },
-                    "separator",
-                    {
-                        value: `${Math.round(t.value.opacity.measure * 100)}%`,
-                        prefersReferenceName: false,
-                        referencedName: (_c = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _c !== void 0 ? _c : undefined,
-                    },
                 ];
+                if (t.value.opacity.measure !== 1) {
+                    segments = segments.concat([
+                        "separator",
+                        {
+                            value: `${Math.round(t.value.opacity.measure * 100)}%`,
+                            prefersReferenceName: false,
+                            referencedName: (_c = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _c !== void 0 ? _c : undefined,
+                        },
+                    ]);
+                }
+                return segments;
             }
             case SDKTokenType_1.TokenType.blur: {
                 const t = token;
@@ -55780,24 +55937,73 @@ class TokenUtilPreviewSegmentGenerator {
             }
             case SDKTokenType_1.TokenType.shadow: {
                 const t = token;
-                const value = t.value[0];
-                return TokenUtilPreviewSegmentGenerator.shadowValuesToSegments(value, allTokens);
+                if (t.value.length === 1) {
+                    return TokenUtilPreviewSegmentGenerator.shadowValuesToSegments(t.value[0], allTokens);
+                }
+                // For multiple shadows, we just show the number of layers
+                return [
+                    {
+                        value: t.value.length > 0
+                            ? `${t.value.length} shadow layers`
+                            : `No shadow layers`,
+                        prefersReferenceName: false,
+                        referencedName: undefined,
+                    },
+                ];
             }
             case SDKTokenType_1.TokenType.gradient: {
                 const t = token;
                 const layer = t.value[0];
-                const transform = new SDKToolsTokenTransform_1.TokenTransform();
-                const cssString = transform.gradientTokenToCSS(layer);
+                let type = "";
                 if (layer) {
-                    return [
-                        {
-                            value: cssString,
-                            prefersReferenceName: false,
-                            referencedName: undefined,
-                        },
-                    ];
+                    switch (layer.type) {
+                        case exports_1.GradientType.linear:
+                            type = "linear";
+                            break;
+                        case exports_1.GradientType.angular:
+                            type = "angular";
+                            break;
+                        case exports_1.GradientType.radial:
+                            type = "radial";
+                            break;
+                        default:
+                            throw new Error(`Unknown gradient type`);
+                    }
                 }
-                return [];
+                return [
+                    {
+                        value: type,
+                        prefersReferenceName: false,
+                        referencedName: undefined,
+                    },
+                ];
+                /*
+                if (t.value.length === 1) {
+                  const layer = t.value[0]
+                  const transform = new TokenTransform()
+                  const cssString = transform.gradientTokenToCSS(layer)
+        
+                  return [
+                    {
+                      value: cssString,
+                      prefersReferenceName: false,
+                      referencedName: undefined,
+                    },
+                  ]
+                }
+        
+                // For multiple gradients, we just show the number of layers
+                return [
+                  {
+                    value:
+                      t.value.length > 0
+                        ? `${t.value.length} gradient layers`
+                        : `No gradient layers`,
+                    prefersReferenceName: false,
+                    referencedName: undefined,
+                  },
+                ]
+                */
             }
             case SDKTokenType_1.TokenType.fontFamily: {
                 const t = token;
@@ -55870,7 +56076,7 @@ class TokenUtilPreviewSegmentGenerator {
                 const reference = TokenUtils_1.TokenUtils.lookupReference((_t = t.value) === null || _t === void 0 ? void 0 : _t.referencedTokenId, allTokens);
                 return [
                     {
-                        value: `${t.value.measure}`,
+                        value: `${Math.round(t.value.measure * 100)}%`,
                         prefersReferenceName: false,
                         referencedName: (_u = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _u !== void 0 ? _u : undefined,
                     },
@@ -55895,7 +56101,7 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         break;
                 }
-                return [
+                let segments = [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.width),
                         prefersReferenceName: false,
@@ -55907,53 +56113,65 @@ class TokenUtilPreviewSegmentGenerator {
                         referencedName: undefined,
                     },
                     {
-                        value: SDKColorToken_1.ColorToken.colorValueToHex8(t.value.color).toUpperCase(),
+                        value: SDKColorToken_1.ColorToken.colorValueToHex6(t.value.color).toUpperCase(),
                         prefersReferenceName: true,
                         referencedName: (_2 = (_1 = TokenUtils_1.TokenUtils.lookupReference((_0 = (_z = t.value) === null || _z === void 0 ? void 0 : _z.color) === null || _0 === void 0 ? void 0 : _0.referencedTokenId, allTokens)) === null || _1 === void 0 ? void 0 : _1.name) !== null && _2 !== void 0 ? _2 : undefined,
                     },
                 ];
+                if (t.value.color.opacity.measure < 1) {
+                    // Only add opacity if it is not 100%
+                    segments = segments.concat([
+                        "separator",
+                        {
+                            value: `${Math.round(t.value.color.opacity.measure * 100)}%`,
+                            prefersReferenceName: false,
+                            referencedName: (_4 = (_3 = TokenUtils_1.TokenUtils.lookupReference(t.value.color.opacity.referencedTokenId, allTokens)) === null || _3 === void 0 ? void 0 : _3.name) !== null && _4 !== void 0 ? _4 : undefined,
+                        },
+                    ]);
+                }
+                return segments;
             }
             case SDKTokenType_1.TokenType.radius: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_3 = t.value) === null || _3 === void 0 ? void 0 : _3.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_5 = t.value) === null || _5 === void 0 ? void 0 : _5.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_4 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _4 !== void 0 ? _4 : undefined,
+                        referencedName: (_6 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _6 !== void 0 ? _6 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.borderWidth: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_5 = t.value) === null || _5 === void 0 ? void 0 : _5.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_7 = t.value) === null || _7 === void 0 ? void 0 : _7.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_6 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _6 !== void 0 ? _6 : undefined,
+                        referencedName: (_8 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _8 !== void 0 ? _8 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.duration: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_7 = t.value) === null || _7 === void 0 ? void 0 : _7.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_9 = t.value) === null || _9 === void 0 ? void 0 : _9.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_8 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _8 !== void 0 ? _8 : undefined,
+                        referencedName: (_10 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _10 !== void 0 ? _10 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.zIndex: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_9 = t.value) === null || _9 === void 0 ? void 0 : _9.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_11 = t.value) === null || _11 === void 0 ? void 0 : _11.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_10 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _10 !== void 0 ? _10 : undefined,
+                        referencedName: (_12 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _12 !== void 0 ? _12 : undefined,
                     },
                 ];
             }
@@ -55979,12 +56197,12 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown text case");
                 }
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_11 = t.value) === null || _11 === void 0 ? void 0 : _11.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_13 = t.value) === null || _13 === void 0 ? void 0 : _13.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_12 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _12 !== void 0 ? _12 : undefined,
+                        referencedName: (_14 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _14 !== void 0 ? _14 : undefined,
                     },
                 ];
             }
@@ -56004,12 +56222,12 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown text decoration option");
                 }
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_13 = t.value) === null || _13 === void 0 ? void 0 : _13.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_15 = t.value) === null || _15 === void 0 ? void 0 : _15.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_14 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _14 !== void 0 ? _14 : undefined,
+                        referencedName: (_16 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _16 !== void 0 ? _16 : undefined,
                     },
                 ];
             }
@@ -56026,67 +56244,67 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown visibility option");
                 }
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_15 = t.value) === null || _15 === void 0 ? void 0 : _15.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_17 = t.value) === null || _17 === void 0 ? void 0 : _17.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_16 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _16 !== void 0 ? _16 : undefined,
+                        referencedName: (_18 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _18 !== void 0 ? _18 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.productCopy: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_17 = t.value) === null || _17 === void 0 ? void 0 : _17.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_19 = t.value) === null || _19 === void 0 ? void 0 : _19.referencedTokenId, allTokens);
                 return [
                     {
                         value: t.value.text,
                         prefersReferenceName: false,
-                        referencedName: (_18 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _18 !== void 0 ? _18 : undefined,
+                        referencedName: (_20 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _20 !== void 0 ? _20 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.string: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_19 = t.value) === null || _19 === void 0 ? void 0 : _19.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_21 = t.value) === null || _21 === void 0 ? void 0 : _21.referencedTokenId, allTokens);
                 return [
                     {
                         value: t.value.text,
                         prefersReferenceName: false,
-                        referencedName: (_20 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _20 !== void 0 ? _20 : undefined,
+                        referencedName: (_22 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _22 !== void 0 ? _22 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.dimension: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_21 = t.value) === null || _21 === void 0 ? void 0 : _21.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_23 = t.value) === null || _23 === void 0 ? void 0 : _23.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_22 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _22 !== void 0 ? _22 : undefined,
+                        referencedName: (_24 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _24 !== void 0 ? _24 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.size: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_23 = t.value) === null || _23 === void 0 ? void 0 : _23.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_25 = t.value) === null || _25 === void 0 ? void 0 : _25.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_24 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _24 !== void 0 ? _24 : undefined,
+                        referencedName: (_26 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _26 !== void 0 ? _26 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.space: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_25 = t.value) === null || _25 === void 0 ? void 0 : _25.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_27 = t.value) === null || _27 === void 0 ? void 0 : _27.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_26 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _26 !== void 0 ? _26 : undefined,
+                        referencedName: (_28 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _28 !== void 0 ? _28 : undefined,
                     },
                 ];
             }
@@ -56099,7 +56317,7 @@ class TokenUtilPreviewSegmentGenerator {
                         {
                             value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.lineHeight),
                             prefersReferenceName: false,
-                            referencedName: (_30 = (_29 = TokenUtils_1.TokenUtils.lookupReference((_28 = (_27 = t.value) === null || _27 === void 0 ? void 0 : _27.lineHeight) === null || _28 === void 0 ? void 0 : _28.referencedTokenId, allTokens)) === null || _29 === void 0 ? void 0 : _29.name) !== null && _30 !== void 0 ? _30 : undefined,
+                            referencedName: (_32 = (_31 = TokenUtils_1.TokenUtils.lookupReference((_30 = (_29 = t.value) === null || _29 === void 0 ? void 0 : _29.lineHeight) === null || _30 === void 0 ? void 0 : _30.referencedTokenId, allTokens)) === null || _31 === void 0 ? void 0 : _31.name) !== null && _32 !== void 0 ? _32 : undefined,
                         },
                     ];
                 }
@@ -56107,18 +56325,18 @@ class TokenUtilPreviewSegmentGenerator {
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.fontSize),
                         prefersReferenceName: false,
-                        referencedName: (_34 = (_33 = TokenUtils_1.TokenUtils.lookupReference((_32 = (_31 = t.value) === null || _31 === void 0 ? void 0 : _31.fontSize) === null || _32 === void 0 ? void 0 : _32.referencedTokenId, allTokens)) === null || _33 === void 0 ? void 0 : _33.name) !== null && _34 !== void 0 ? _34 : undefined,
+                        referencedName: (_36 = (_35 = TokenUtils_1.TokenUtils.lookupReference((_34 = (_33 = t.value) === null || _33 === void 0 ? void 0 : _33.fontSize) === null || _34 === void 0 ? void 0 : _34.referencedTokenId, allTokens)) === null || _35 === void 0 ? void 0 : _35.name) !== null && _36 !== void 0 ? _36 : undefined,
                     },
                     ...lineHeightFragments,
                     {
-                        value: t.value.fontWeight.text,
+                        value: t.value.fontFamily.text,
                         prefersReferenceName: false,
-                        referencedName: (_38 = (_37 = TokenUtils_1.TokenUtils.lookupReference((_36 = (_35 = t.value) === null || _35 === void 0 ? void 0 : _35.fontWeight) === null || _36 === void 0 ? void 0 : _36.referencedTokenId, allTokens)) === null || _37 === void 0 ? void 0 : _37.name) !== null && _38 !== void 0 ? _38 : undefined,
+                        referencedName: (_40 = (_39 = TokenUtils_1.TokenUtils.lookupReference((_38 = (_37 = t.value) === null || _37 === void 0 ? void 0 : _37.fontFamily) === null || _38 === void 0 ? void 0 : _38.referencedTokenId, allTokens)) === null || _39 === void 0 ? void 0 : _39.name) !== null && _40 !== void 0 ? _40 : undefined,
                     },
                     {
-                        value: t.value.fontFamily.text,
+                        value: t.value.fontWeight.text,
                         prefersReferenceName: false,
-                        referencedName: (_42 = (_41 = TokenUtils_1.TokenUtils.lookupReference((_40 = (_39 = t.value) === null || _39 === void 0 ? void 0 : _39.fontFamily) === null || _40 === void 0 ? void 0 : _40.referencedTokenId, allTokens)) === null || _41 === void 0 ? void 0 : _41.name) !== null && _42 !== void 0 ? _42 : undefined,
+                        referencedName: (_44 = (_43 = TokenUtils_1.TokenUtils.lookupReference((_42 = (_41 = t.value) === null || _41 === void 0 ? void 0 : _41.fontWeight) === null || _42 === void 0 ? void 0 : _42.referencedTokenId, allTokens)) === null || _43 === void 0 ? void 0 : _43.name) !== null && _44 !== void 0 ? _44 : undefined,
                     },
                 ];
             }
@@ -56131,24 +56349,28 @@ class TokenUtilPreviewSegmentGenerator {
         if (!layer) {
             return [];
         }
-        return [
+        let segments = [
             {
-                value: layer.x === 0 ? `0` : `${layer.x}px`,
+                value: layer.x === 0 ? `0` : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.x)}px`,
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.y === 0 ? `0` : `${layer.y}px`,
+                value: layer.y === 0 ? `0` : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.y)}px`,
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.radius === 0 ? `0` : `${layer.radius}px`,
+                value: layer.radius === 0
+                    ? `0`
+                    : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.radius)}px`,
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.spread === 0 ? `0` : `${layer.spread}px`,
+                value: layer.spread === 0
+                    ? `0`
+                    : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.spread)}px`,
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
@@ -56157,13 +56379,19 @@ class TokenUtilPreviewSegmentGenerator {
                 prefersReferenceName: true,
                 referencedName: (_b = (_a = TokenUtils_1.TokenUtils.lookupReference(layer.color.referencedTokenId, allTokens)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : undefined,
             },
-            "separator",
-            {
-                value: `${Math.round(layer.opacity.measure * 100)}%`,
-                prefersReferenceName: false,
-                referencedName: (_d = (_c = TokenUtils_1.TokenUtils.lookupReference(layer.opacity.referencedTokenId, allTokens)) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : undefined,
-            },
         ];
+        if (layer.opacity.measure < 1) {
+            // Only add opacity if it is not 100%
+            segments = segments.concat([
+                "separator",
+                {
+                    value: `${Math.round(layer.opacity.measure * 100)}%`,
+                    prefersReferenceName: false,
+                    referencedName: (_d = (_c = TokenUtils_1.TokenUtils.lookupReference(layer.opacity.referencedTokenId, allTokens)) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : undefined,
+                },
+            ]);
+        }
+        return segments;
     }
 }
 exports.TokenUtilPreviewSegmentGenerator = TokenUtilPreviewSegmentGenerator;
@@ -56268,6 +56496,7 @@ class TokenUtilPreviewStyleGenerator {
             case SDKTokenType_1.TokenType.border: {
                 const t = token;
                 let style = "solid";
+                const widthCssUnit = SDKDimensionToken_1.DimensionToken.unitToString(t.value.width.unit);
                 switch (t.value.style) {
                     case SDKBorderStyle_1.BorderStyle.dashed:
                         style = "dashed";
@@ -56279,21 +56508,23 @@ class TokenUtilPreviewStyleGenerator {
                         break;
                 }
                 return {
-                    borderWidth: `${t.value.width.measure}px`,
+                    borderWidth: `${t.value.width.measure}${widthCssUnit}`,
                     borderColor: SDKColorToken_1.ColorToken.colorValueToHex8(t.value.color).toUpperCase(),
                     borderStyle: style,
                 };
             }
             case SDKTokenType_1.TokenType.radius: {
                 const t = token;
+                const cssUnit = SDKDimensionToken_1.DimensionToken.unitToString(t.value.unit);
                 return {
-                    borderRadius: `${t.value.measure}px`,
+                    borderRadius: `${t.value.measure}${cssUnit}`,
                 };
             }
             case SDKTokenType_1.TokenType.borderWidth: {
                 const t = token;
+                const cssUnit = SDKDimensionToken_1.DimensionToken.unitToString(t.value.unit);
                 return {
-                    borderWidth: `${t.value.measure}${t.value.unit}`,
+                    borderWidth: `${t.value.measure}${cssUnit}`,
                 };
             }
             case SDKTokenType_1.TokenType.duration: {
@@ -56343,7 +56574,7 @@ class TokenUtilPreviewStyleGenerator {
                         ? SDKDimensionToken_1.DimensionToken.valueToString(t.value.lineHeight)
                         : undefined,
                     fontWeight: t.value.fontWeight.text,
-                    fontFamily: t.value.fontWeight.text,
+                    fontFamily: t.value.fontFamily.text,
                 };
             }
             default:
@@ -56554,6 +56785,81 @@ class TokenTransform {
 exports.TokenTransform = TokenTransform;
 
 
+/***/ }),
+
+/***/ "./src/utils/ComponentUtils.ts":
+/*!*************************************!*\
+  !*** ./src/utils/ComponentUtils.ts ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+//
+//  ComponentUtils.ts
+//  Supernova SDK
+//
+//  Created by Jiri Trecak.
+//
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ComponentUtils = void 0;
+// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
+// MARK: - Imports
+const SDKComponent_1 = __webpack_require__(/*! ../model/components/SDKComponent */ "./src/model/components/SDKComponent.ts");
+const SDKComponentGroup_1 = __webpack_require__(/*! ../model/groups/SDKComponentGroup */ "./src/model/groups/SDKComponentGroup.ts");
+const uuid_1 = __webpack_require__(/*! uuid */ "../../node_modules/uuid/dist/esm-node/index.js");
+// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
+// MARK: - Component utilities
+class ComponentUtils {
+    /** Map components for lookup */
+    static componentsToReferenceMap(components) {
+        const map = new Map();
+        components.forEach((component) => {
+            map.set(component.id, component);
+        });
+        return map;
+    }
+    /** Map component groups for lookup */
+    static componentGroupsToReferenceMap(groups) {
+        const map = new Map();
+        groups.forEach((group) => {
+            map.set(group.id, group);
+        });
+        return map;
+    }
+    /** Creates a new component group. Default values will be used for all properties */
+    static createDefaultComponentGroup(versionId, brandId, name) {
+        return new SDKComponentGroup_1.ComponentGroup({
+            id: undefined,
+            persistentId: (0, uuid_1.v4)(),
+            brandId,
+            designSystemVersionId: versionId,
+            isRoot: false,
+            meta: {
+                name: name !== null && name !== void 0 ? name : "Group",
+                description: "",
+            },
+            childrenIds: [],
+            createdAt: new Date().toISOString(),
+        });
+    }
+    /** Creates a new component. Default values will be used for all properties */
+    static createDefaultComponent(versionId, brandId, name) {
+        return new SDKComponent_1.Component({
+            id: undefined,
+            persistentId: (0, uuid_1.v4)(),
+            brandId,
+            designSystemVersionId: versionId,
+            meta: {
+                name: name !== null && name !== void 0 ? name : "Group",
+                description: "",
+            },
+        }, [], []);
+    }
+}
+exports.ComponentUtils = ComponentUtils;
+
+
 /***/ }),
 
 /***/ "./src/utils/StringUtils.ts":
@@ -57083,6 +57389,7 @@ exports.TokenUtils = void 0;
 // MARK: - Imports
 const exports_1 = __webpack_require__(/*! ../exports */ "./src/exports.ts");
 const SDKTokenType_1 = __webpack_require__(/*! ../model/enums/SDKTokenType */ "./src/model/enums/SDKTokenType.ts");
+const SDKThemeUtilities_1 = __webpack_require__(/*! ../model/themes/SDKThemeUtilities */ "./src/model/themes/SDKThemeUtilities.ts");
 const SDKBlurToken_1 = __webpack_require__(/*! ../model/tokens/SDKBlurToken */ "./src/model/tokens/SDKBlurToken.ts");
 const SDKBorderToken_1 = __webpack_require__(/*! ../model/tokens/SDKBorderToken */ "./src/model/tokens/SDKBorderToken.ts");
 const SDKColorToken_1 = __webpack_require__(/*! ../model/tokens/SDKColorToken */ "./src/model/tokens/SDKColorToken.ts");
@@ -57097,7 +57404,10 @@ const SDKTypographyToken_1 = __webpack_require__(/*! ../model/tokens/SDKTypograp
 const SDKVisibilityToken_1 = __webpack_require__(/*! ../model/tokens/SDKVisibilityToken */ "./src/model/tokens/SDKVisibilityToken.ts");
 const SDKDTTokenReferenceResolver_1 = __webpack_require__(/*! ../tools/design-tokens/utilities/SDKDTTokenReferenceResolver */ "./src/tools/design-tokens/utilities/SDKDTTokenReferenceResolver.ts");
 const lodash_1 = __webpack_require__(/*! lodash */ "../../node_modules/lodash/lodash.js");
+const lodash_2 = __webpack_require__(/*! lodash */ "../../node_modules/lodash/lodash.js");
 const uuid_1 = __webpack_require__(/*! uuid */ "../../node_modules/uuid/dist/esm-node/index.js");
+// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
+// MARK: - Implementation
 class TokenUtils {
     /** Map tokens for lookup */
     static tokensToReferenceMap(tokens) {
@@ -57452,6 +57762,728 @@ class TokenUtils {
             }
         }
     }
+    /** Creates a new theme with updated overrides */
+    static tokenThemeByUpdatingOverride(theme, override) {
+        const overrides = theme.overriddenTokens;
+        const filteredOverrides = overrides.filter((o) => o.id !== override.id);
+        filteredOverrides.push(override);
+        theme.overriddenTokens = filteredOverrides;
+        return theme;
+    }
+    /** Creates a new theme with removed override */
+    static tokenThemeByRemovingOverride(theme, tokenId) {
+        const overrides = theme.overriddenTokens;
+        const filteredOverrides = overrides.filter((o) => o.id !== tokenId && o.idInVersion !== tokenId);
+        theme.overriddenTokens = filteredOverrides;
+        return theme;
+    }
+    /** Creates a new color token with updated .color value */
+    static colorTokenByUpdatingColor(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKColorToken_1.ColorToken) {
+            update.value = {
+                opacity: update.value.opacity,
+                color: {
+                    r: newValue.value.color.r,
+                    g: newValue.value.color.g,
+                    b: newValue.value.color.b,
+                    referencedTokenId: newValue.value.color.referencedTokenId,
+                },
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value = {
+                opacity: update.value.opacity,
+                color: {
+                    r: newValue.r,
+                    g: newValue.g,
+                    b: newValue.b,
+                    referencedTokenId: newValue.referencedTokenId,
+                },
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new color token with updated .opacity value */
+    static colorTokenByUpdatingOpacity(token, newValue) {
+        TokenUtils.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKDimensionToken_1.OpacityToken) {
+            update.value.opacity = {
+                measure: newValue.value.measure,
+                unit: newValue.value.unit,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.opacity = {
+                measure: newValue,
+                unit: exports_1.Unit.raw,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new blur token with updated .type value */
+    static blurTokenByUpdatingType(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.type = newValue;
+        return update;
+    }
+    /** Creates a new blur token with updated .radius value */
+    static blurTokenByUpdatingRadius(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.radius = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .fontFamily value */
+    static typographyTokenByUpdatingFontFamily(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKStringToken_1.FontFamilyToken) {
+            update.value.fontFamily = {
+                text: newValue.value.text,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.fontFamily = {
+                text: newValue.text,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new typography token with updated .fontWeight value */
+    static typographyTokenByUpdatingFontWeight(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKStringToken_1.FontWeightToken) {
+            update.value.fontWeight = {
+                text: newValue.value.text,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.fontWeight = {
+                text: newValue.text,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new typography token with updated .fontSize value */
+    static typographyTokenByUpdatingFontSize(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.fontSize = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .letterSpacing value */
+    static typographyTokenByUpdatingLetterSpacing(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.letterSpacing = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .lineHeight value */
+    static typographyTokenByUpdatingLineHeight(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.lineHeight = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .paragraphSpacing value */
+    static typographyTokenByUpdatingParagraphSpacing(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.paragraphSpacing = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .paragraphSpacing value */
+    static typographyTokenByUpdatingParagraphIndent(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.paragraphIndent = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new typography token with updated .textCase value */
+    static typographyTokenByUpdatingTextCase(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKTextCaseToken_1.TextCaseToken) {
+            update.value.textCase = {
+                value: newValue.value.value,
+                options: newValue.value.options,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.textCase = {
+                value: newValue.value,
+                options: newValue.options,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new border token with updated .position value */
+    static typographyTokenByUpdatingTextDecoration(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKTextDecorationToken_1.TextDecorationToken) {
+            update.value.textDecoration = {
+                value: newValue.value.value,
+                options: newValue.value.options,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.textDecoration = {
+                value: newValue.value,
+                options: newValue.options,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new border token with updated .color value. Do note, opacity is ignored */
+    static borderTokenByUpdatingColor(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKColorToken_1.ColorToken) {
+            update.value.color = {
+                opacity: update.value.color.opacity,
+                color: {
+                    r: newValue.value.color.r,
+                    g: newValue.value.color.g,
+                    b: newValue.value.color.b,
+                    referencedTokenId: newValue.value.color.referencedTokenId,
+                },
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.color = {
+                opacity: update.value.color.opacity,
+                color: {
+                    r: newValue.r,
+                    g: newValue.g,
+                    b: newValue.b,
+                    referencedTokenId: newValue.referencedTokenId,
+                },
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new border token with updated color.opacity value */
+    static borderTokenByUpdatingOpacity(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (newValue instanceof SDKDimensionToken_1.OpacityToken) {
+            update.value.color.opacity = {
+                measure: newValue.value.measure,
+                unit: newValue.value.unit,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            update.value.color.opacity = {
+                measure: newValue,
+                unit: exports_1.Unit.raw,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new border token with updated .width value */
+    static borderTokenByUpdatingWidth(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.width = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new border token with updated .position value */
+    static borderTokenByUpdatingPosition(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.position = newValue;
+        return update;
+    }
+    /** Creates a new border token with updated .style value */
+    static borderTokenByUpdatingStyle(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value.style = newValue;
+        return update;
+    }
+    /** Creates a new dimension token with updated value */
+    static dimensionTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new size token with updated value */
+    static sizeTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new space token with updated value */
+    static spaceTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new opacity token with updated value */
+    static opacityTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new font size token with updated value */
+    static fontSizeTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new font size token with updated value */
+    static lineHeightTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new letter spacing token with updated value */
+    static letterSpacingTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new paragraph spacing token with updated value */
+    static paragraphSpacingTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new border width token with updated value */
+    static borderWidthTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new radius token with updated value */
+    static radiusTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new duration token with updated value */
+    static durationTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new z-index token with updated value */
+    static zIndexTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedDimensionValue(newValue);
+        return update;
+    }
+    /** Creates a new string token with updated value */
+    static stringTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedStringValue(newValue);
+        return update;
+    }
+    /** Creates a new product copy token with updated value */
+    static productCopyTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedStringValue(newValue);
+        return update;
+    }
+    /** Creates a new font family token with updated value */
+    static fontFamilyTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedStringValue(newValue);
+        return update;
+    }
+    /** Creates a new font weight token with updated value */
+    static fontWeightTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = this.rawOrReferencedStringValue(newValue);
+        return update;
+    }
+    /** Creates a new text case token with updated value */
+    static textCaseTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = {
+            value: newValue.value,
+            options: newValue.options,
+            referencedTokenId: null,
+        };
+        return update;
+    }
+    /** Creates a new text case token with updated value */
+    static textDecorationTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = {
+            value: newValue.value,
+            options: newValue.options,
+            referencedTokenId: null,
+        };
+        return update;
+    }
+    /** Creates a new visibility token with updated value */
+    static visibilityTokenByUpdatingValue(token, newValue) {
+        this.checkNotReference(token);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = {
+            value: newValue.value,
+            options: newValue.options,
+            referencedTokenId: null,
+        };
+        return update;
+    }
+    // --- --- --- --- --- --- --- --- --- ---
+    // MARK: - Multi-layer token manipulation
+    /** Creates a new shadow token with one new extra layer added at the end of all layers */
+    static shadowTokenByAddingLayer(token) {
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = {
+            color: {
+                color: {
+                    r: 0,
+                    g: 0,
+                    b: 0,
+                    referencedTokenId: null,
+                },
+                opacity: {
+                    measure: 1,
+                    unit: exports_1.Unit.raw,
+                    referencedTokenId: null,
+                },
+                referencedTokenId: null,
+            },
+            opacity: {
+                measure: 1,
+                unit: exports_1.Unit.raw,
+                referencedTokenId: null,
+            },
+            radius: 0,
+            spread: 0,
+            type: exports_1.ShadowType.drop,
+            x: 0,
+            y: 4,
+            referencedTokenId: null,
+        };
+        update.value.push(layer);
+        return update;
+    }
+    /** Creates a new shadow token by removing one of the layers */
+    static shadowTokenByRemovingLayer(token, layerIndex) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        update.value = update.value.splice(layerIndex, 1);
+        return update;
+    }
+    /** Creates a new shadow token with updated .color value. Do note, opacity is ignored */
+    static shadowTokenByUpdatingColor(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        if (newValue instanceof SDKColorToken_1.ColorToken) {
+            layer.color = {
+                opacity: layer.color.opacity,
+                color: {
+                    r: newValue.value.color.r,
+                    g: newValue.value.color.g,
+                    b: newValue.value.color.b,
+                    referencedTokenId: newValue.value.color.referencedTokenId,
+                },
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            layer.color = {
+                opacity: layer.color.opacity,
+                color: {
+                    r: newValue.r,
+                    g: newValue.g,
+                    b: newValue.b,
+                    referencedTokenId: newValue.referencedTokenId,
+                },
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new shadow token with updated .color value */
+    static shadowTokenByUpdatingOpacity(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        if (newValue instanceof SDKDimensionToken_1.OpacityToken) {
+            layer.opacity = {
+                measure: newValue.value.measure,
+                unit: newValue.value.unit,
+                referencedTokenId: newValue.id,
+            };
+        }
+        else {
+            layer.opacity = {
+                measure: newValue,
+                unit: exports_1.Unit.raw,
+                referencedTokenId: null,
+            };
+        }
+        return update;
+    }
+    /** Creates a new shadow token with updated .x value */
+    static shadowTokenByUpdatingX(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.x = newValue;
+        return update;
+    }
+    /** Creates a new shadow token with updated .y value */
+    static shadowTokenByUpdatingY(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.y = newValue;
+        return update;
+    }
+    /** Creates a new shadow token with updated .radius value */
+    static shadowTokenByUpdatingRadius(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.radius = newValue;
+        return update;
+    }
+    /** Creates a new shadow token with updated .spread value */
+    static shadowTokenByUpdatingSpread(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.spread = newValue;
+        return update;
+    }
+    /** Creates a new shadow token with updated .type value */
+    static shadowTokenByUpdatingType(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.type = newValue;
+        return update;
+    }
+    /** Creates a new gradient token with updated .to value */
+    static gradientTokenByUpdatingTo(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.to = newValue;
+        return update;
+    }
+    /** Creates a new gradient token with updated .from value */
+    static gradientTokenByUpdatingFrom(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.from = newValue;
+        return update;
+    }
+    /** Creates a new gradient token with updated .to value */
+    static gradientTokenByUpdatingType(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.type = newValue;
+        return update;
+    }
+    /** Creates a new gradient token with updated .aspectRatio value */
+    static gradientTokenByUpdatingAspectRatio(token, layerIndex, newValue) {
+        this.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        layer.aspectRatio = newValue;
+        return update;
+    }
+    /** Creates a new gradient token with updated .to value */
+    static gradientTokenByUpdatingStops(token, layerIndex, newValue) {
+        TokenUtils.validateLayerAccess(token, layerIndex);
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        const layer = update.value[layerIndex];
+        const stops = new Array();
+        for (const v of newValue) {
+            if (v.color instanceof SDKColorToken_1.ColorToken) {
+                const stop = {
+                    position: v.position,
+                    color: {
+                        opacity: v.color.value.opacity,
+                        color: {
+                            r: v.color.value.color.r,
+                            g: v.color.value.color.g,
+                            b: v.color.value.color.b,
+                            referencedTokenId: v.color.value.color.referencedTokenId,
+                        },
+                        referencedTokenId: v.color.id,
+                    },
+                };
+                stops.push(stop);
+            }
+            else {
+                const stop = {
+                    position: v.position,
+                    color: {
+                        opacity: v.color.opacity,
+                        color: {
+                            r: v.color.color.r,
+                            g: v.color.color.g,
+                            b: v.color.color.b,
+                            referencedTokenId: v.color.color.referencedTokenId,
+                        },
+                        referencedTokenId: null,
+                    },
+                };
+                stops.push(stop);
+            }
+        }
+        layer.stops = stops;
+        return update;
+    }
+    // --- --- --- --- --- --- --- --- --- ---
+    // MARK: - Manipulating references
+    /** Creates a new token where value is reference to the provided token. Token and reference must be of the same type */
+    static tokenByReferencing(token, reference) {
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
+        if (token.id === reference.id) {
+            throw exports_1.SupernovaError.fromMessage("Can't create reference where token would reference itself");
+        }
+        if (token.tokenType !== reference.tokenType) {
+            throw exports_1.SupernovaError.fromMessage("Can't reference token of different type");
+        }
+        update.value = Object.assign(Object.assign({}, (0, lodash_2.cloneDeep)(reference.value)), { referencedTokenId: reference.id });
+        return update;
+    }
+    /** Creates a new multilayer token where one of the layers is reference to the provided token. Token and reference must be of the same type */
+    static multilayerTokenByReferencing(token, layerIndex, reference) {
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithValue(token);
+        if (token.id === reference.id) {
+            throw exports_1.SupernovaError.fromMessage("Can't create reference where token would reference itself");
+        }
+        if (token.tokenType !== reference.tokenType) {
+            throw exports_1.SupernovaError.fromMessage("Can't reference token of different type");
+        }
+        // NOTE: make sure that token copy value is blank to have new value copied in
+        update.value = [];
+        update.value[layerIndex] = Object.assign(Object.assign({}, (0, lodash_2.cloneDeep)(reference.value[layerIndex])), { referencedTokenId: reference.id });
+        return update;
+    }
+    /** Creates a new token where value is raw, but taken from the previously referenced token. Token must have had reference before */
+    static tokenByDisconnectingReference(token, options = {}) {
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
+        if (!token.value.referencedTokenId && !options.supressErrorOnNoReference) {
+            throw exports_1.SupernovaError.fromMessage("Can't create raw token from a token that isn't previously a reference");
+        }
+        update.value = Object.assign(Object.assign({}, (0, lodash_2.cloneDeep)(token.value)), { referencedTokenId: null });
+        return update;
+    }
+    /** Creates a new multilayer token where one of the layers value is raw, but taken from the previously referenced token. That layer must have had reference before */
+    static multilayerTokenByDisconnectingReference(token, layerIndex) {
+        const update = SDKThemeUtilities_1.ThemeUtilities.replicateTokenWithoutValue(token);
+        if (!token.value.referencedTokenId) {
+            throw exports_1.SupernovaError.fromMessage("Can't create raw token from a token that isn't previously a reference");
+        }
+        // TODO: Multilayer shadow & gradient disconnect of the references
+        return update;
+    }
+    /** Checks if token as a whole is a reference to another token */
+    static isReferencedToken(token) {
+        return (token.value.referencedTokenId !== null &&
+            token.value.referencedTokenId !== undefined);
+    }
+    /** Checks if a token layer of multilayer token is a reference to another token */
+    static isReferencedMultilayerTokenLayer(token, layerIndex) {
+        this.validateLayerAccess(token, layerIndex);
+        const layer = token.value[layerIndex];
+        return (layer.referencedTokenId !== null && layer.referencedTokenId !== undefined);
+    }
+    /** Checks if a token was imported from some foreign source. Not imported tokens were always created in Supernova */
+    static isTokenImported(token) {
+        var _a, _b;
+        return (((_a = token.origin) === null || _a === void 0 ? void 0 : _a.sourceId) !== null && ((_b = token.origin) === null || _b === void 0 ? void 0 : _b.sourceId) !== undefined);
+    }
+    // --- --- --- --- --- --- --- --- --- ---
+    // MARK: - Conveniences
+    static checkNotReference(token) {
+        if (token.value.referencedTokenId) {
+            throw exports_1.SupernovaError.fromMessage("Performing value-replated operation on referenced token is not allowed");
+        }
+    }
+    static rawOrReferencedDimensionValue(newValue) {
+        if (newValue instanceof SDKDimensionToken_1.DimensionCategoryToken) {
+            return {
+                measure: newValue.value.measure,
+                unit: newValue.value.unit,
+                referencedTokenId: newValue.id,
+            };
+        }
+        return {
+            measure: newValue.measure,
+            unit: newValue.unit,
+            referencedTokenId: null,
+        };
+    }
+    static rawOrReferencedStringValue(newValue) {
+        if (newValue instanceof SDKStringToken_1.StringCategoryToken) {
+            return {
+                text: newValue.value.text,
+                referencedTokenId: newValue.id,
+            };
+        }
+        return {
+            text: newValue.text,
+            referencedTokenId: null,
+        };
+    }
+    static validateLayerAccess(token, index) {
+        let layers;
+        if (token instanceof SDKShadowToken_1.ShadowToken) {
+            layers = token.shadowLayers;
+        }
+        else {
+            layers = token.gradientLayers;
+        }
+        if (index < 0 || index >= layers.length) {
+            throw exports_1.SupernovaError.fromMessage(`Can't access layer at index ${index}, layer outside of allowed bounds`);
+        }
+    }
     static inlineValueIntoComplexTokens(token, candidateId, candidateValueToInline) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         switch (token.tokenType) {
@@ -57600,8 +58632,7 @@ class TokenUtils {
         const fallbackKey2 = TokenUtils.buildFallbackKey(node);
         // FIXMENOW: Verify and test
         const fallbackKey3 = TokenUtils.buildFallbackKeyBack(node);
-        if (key !== fallbackKey || key !== fallbackKey2)
-            console.log({ key, fallbackKey, fallbackKey2 });
+        // if (key !== fallbackKey || key !== fallbackKey2) console.log({ key, fallbackKey, fallbackKey2 })
         return [key, fallbackKey, fallbackKey2, fallbackKey3];
     }
     static getTokenByKeyOrBackwardKey(node, map) {