@supernova-studio/supernova-sdk-beta 1.6.16 → 1.6.18

package/build/supernova-sdk-typescript.js

@@ -35165,6 +35165,18 @@ class AreaBulkOperations {
             return this.dataCore.bulkUpdateTokenData(to.designSystemId, to.versionId, data);
         });
     }
+    /** Batch updates, creates or deletes component data from Supernova at once. Use this method to perform multiple operations at once instead of chaining single update operations. Batch routine runs everything in a single transaction, so either all operations succeed or all fail.
+     *
+     * WARNING: This method is not yet complete and only supports limited set of operations. Also, doesn't work as transation just yet.
+     * @param to - Remote version to write to
+     * @param data - Update information. All keys except component and its parent are optional and any combination of optional properties is allowed.
+     * @returns Nothing
+     */
+    updateComponentData(to, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.dataCore.bulkUpdateComponentData(to.designSystemId, to.versionId, data);
+        });
+    }
 }
 exports.AreaBulkOperations = AreaBulkOperations;
 
@@ -35198,6 +35210,7 @@ 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");
+const SDKSupernovaError_1 = __webpack_require__(/*! ../errors/SDKSupernovaError */ "./src/core/errors/SDKSupernovaError.ts");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Users Area
 class AreaComponents {
@@ -35223,7 +35236,8 @@ class AreaComponents {
      */
     getComponentGroups(from) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.dataCore.componentGroups(from.designSystemId, from.versionId);
+            // For now, retrieve just the root group that we create by hand
+            throw SDKSupernovaError_1.SupernovaError.fromMessage("getComponentGroups should not be used right now. Components form a flat list and root group can be safely ignored.");
         });
     }
     /** Fetches all remote design components in the version
@@ -35279,9 +35293,13 @@ class AreaComponents {
      * @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) {
+    createComponent(to, component
+    // parentId: string
+    ) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.dataCore.createComponent(to.designSystemId, to.versionId, component, parentId);
+            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
@@ -35296,9 +35314,13 @@ class AreaComponents {
      * @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) {
+    createComponentGroup(to, group
+    // parentId: string
+    ) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.dataCore.createComponentGroup(to.designSystemId, to.versionId, group, parentId);
+            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
@@ -37729,10 +37751,12 @@ class DataCore {
         });
     }
     /** Write new component to remote */
-    createComponent(designSystemId, versionId, component, parentId) {
+    createComponent(designSystemId, versionId, component
+    // parentId: string
+    ) {
         return __awaiter(this, void 0, void 0, function* () {
             const componentWriteObject = component.toWriteObject();
-            componentWriteObject.groupPersistentId = parentId;
+            // componentWriteObject.groupPersistentId = parentId <- Enable this once we support groups
             const remoteComponent = yield this.write.createRemoteComponent(designSystemId, versionId, componentWriteObject);
             return {
                 id: remoteComponent.persistentId,
@@ -37743,15 +37767,17 @@ class DataCore {
     /** Update existing component in remote */
     updateComponent(designSystemId, versionId, component) {
         return __awaiter(this, void 0, void 0, function* () {
-            const componentWriteObject = component.toWriteObject();
+            const componentWriteObject = component.toWriteUpdateObject();
             yield this.write.updateRemoteComponent(designSystemId, versionId, componentWriteObject);
         });
     }
     /** Write new component group to remote */
-    createComponentGroup(designSystemId, versionId, group, parentId) {
+    createComponentGroup(designSystemId, versionId, group
+    // parentId: string
+    ) {
         return __awaiter(this, void 0, void 0, function* () {
             const groupWriteObject = group.toWriteObject();
-            groupWriteObject.parentId = parentId;
+            // groupWriteObject.parentId = parentId
             const remoteGroup = yield this.write.createRemoteComponentGroup(designSystemId, versionId, groupWriteObject);
             return {
                 id: remoteGroup.persistentId,
@@ -38225,6 +38251,47 @@ class DataCore {
             yield Promise.all(secondaryPromises);
         });
     }
+    bulkUpdateComponentData(designSystemId, versionId, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let primaryPromise = Promise.resolve();
+            if (data.componentMode === "create") {
+                // Create component 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.createComponent(designSystemId, versionId, data.component
+                // data.componentParent.id
+                );
+                data.component.id = ids.id;
+                data.component.idInVersion = ids.idInVersion;
+            }
+            else if (data.componentMode === "update") {
+                // Update token because it did exist. In this case, also update group where it belongs
+                // but make sure that `this.updateToken` runs first and `this.updateTokenGroup` after it
+                primaryPromise = primaryPromise.then(() => this.updateComponent(designSystemId, versionId, data.component));
+                /*
+                  .then(() =>
+                    this.updateComponentGroup(
+                      designSystemId,
+                      versionId,
+                      data.componentParent
+                    )
+                  ) */
+            }
+            // Add all secondary updates
+            const secondaryPromises = new Array();
+            if (data.propertyValuesToCreateOrUpdate) {
+                data.propertyValuesToCreateOrUpdate.forEach((p) => {
+                    secondaryPromises.push(this.updateComponentPropertyValue(designSystemId, versionId, p.value, data.component, p.property));
+                });
+            }
+            if (data.propertyValuesToDelete) {
+                data.propertyValuesToDelete.forEach((p) => {
+                    secondaryPromises.push(this.deleteTokenPropertyValue(designSystemId, versionId, p));
+                });
+            }
+            // NOTE: have the primary promise run first and secondary promises run after that
+            yield primaryPromise;
+            yield Promise.all(secondaryPromises);
+        });
+    }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
     // MARK: - TS Data
     getTokenStudioData(designSystemId, versionId) {
@@ -38473,21 +38540,20 @@ class DataCoreReadRequests {
             const endpointBase = this.bridge.getVersionEndpoint(designSystemId, versionId, "tokens");
             // Create a URL object from the base endpoint
             const url = new URL(endpointBase);
-            /*
             if (filter) {
-              if (filter.type) {
-                const types = [filter.type] // Prep if we every decide that we want to support multiple types (API supports it)
-        
-                types.forEach((type) => {
-                  url.searchParams.append("types", type)
-                })
-              }
-        
-              if (filter.brandId) {
-                url.searchParams.append("brandId", filter.brandId)
-              }
+                /*
+                if (filter.type) {
+                  const types = [filter.type] // Prep if we every decide that we want to support multiple types (API supports it)
+          
+                  types.forEach((type) => {
+                    url.searchParams.append("types", type)
+                  })
+                }
+                */
+                if (filter.brandId) {
+                    url.searchParams.append("brandId", filter.brandId);
+                }
             }
-            */
             // Get the full endpoint with the query string
             const endpoint = url.toString();
             const payload = yield this.bridge.get(endpoint);
@@ -39120,39 +39186,39 @@ class DataCoreWriteRequests {
     // MARK: - Components
     createRemoteComponent(designSystemId, versionId, component) {
         return __awaiter(this, void 0, void 0, function* () {
-            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "components");
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "design-system-components");
             const payload = yield this.bridge.post(endpoint, component);
-            return payload.result.component;
+            return payload.result.designSystemComponent;
         });
     }
     updateRemoteComponent(designSystemId, versionId, component) {
         return __awaiter(this, void 0, void 0, function* () {
-            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `components/${component.id}`);
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `design-system-components/${component.id}`);
             return this.bridge.put(endpoint, component);
         });
     }
     createRemoteComponentGroup(designSystemId, versionId, group) {
         return __awaiter(this, void 0, void 0, function* () {
-            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "component-groups");
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, "design-system-component-groups");
             const payload = yield this.bridge.post(endpoint, group);
             return payload.result.group;
         });
     }
     updateRemoteComponentGroup(designSystemId, versionId, group) {
         return __awaiter(this, void 0, void 0, function* () {
-            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `component-groups/${group.id}`);
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `design-system-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}`);
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `design-system-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}`);
+            const endpoint = this.bridge.getVersionEndpoint(designSystemId, versionId, `design-system-component-groups/${componentGroupId}`);
             return this.bridge.delete(endpoint);
         });
     }
@@ -42102,7 +42168,6 @@ class Component {
     constructor(model, properties, propertyValues) {
         this.idInVersion = model.id;
         this.id = model.persistentId;
-        this.designSystemVersionId = model.designSystemVersionId;
         this.brandId = model.brandId;
         this.name = model.meta.name;
         this.description = model.meta.description;
@@ -42126,15 +42191,19 @@ class Component {
         var _a;
         return {
             id: this.idInVersion,
-            brandId: this.brandId,
-            designSystemVersionId: this.designSystemVersionId,
             persistentId: this.id,
+            brandId: this.brandId,
             meta: {
                 name: this.name,
                 description: (_a = this.description) !== null && _a !== void 0 ? _a : "",
             },
         };
     }
+    toWriteUpdateObject() {
+        const model = this.toWriteObject();
+        delete model.brandId;
+        return model;
+    }
 }
 exports.Component = Component;
 
@@ -46444,7 +46513,7 @@ class ThemeUtilities {
                 replica = new SDKColorToken_1.ColorToken(versionId, {}, null, null, [], []);
                 break;
             case SDKTokenType_1.TokenType.gradient:
-                replica = new SDKGradientToken_1.GradientToken(versionId, {}, null, null, [], []);
+                replica = new SDKGradientToken_1.GradientToken(versionId, {}, [], null, [], []);
                 break;
             case SDKTokenType_1.TokenType.dimension:
                 replica = new SDKDimensionToken_1.DimensionToken(versionId, {}, null, null, [], []);
@@ -46483,7 +46552,7 @@ class ThemeUtilities {
                 replica = new SDKDimensionToken_1.ZIndexToken(versionId, {}, null, null, [], []);
                 break;
             case SDKTokenType_1.TokenType.shadow:
-                replica = new SDKShadowToken_1.ShadowToken(versionId, {}, null, null, [], []);
+                replica = new SDKShadowToken_1.ShadowToken(versionId, {}, [], null, [], []);
                 break;
             case SDKTokenType_1.TokenType.string:
                 replica = new SDKStringToken_1.StringToken(versionId, {}, null, null, [], []);
@@ -46544,7 +46613,7 @@ class ThemeUtilities {
                 replica = new SDKColorToken_1.ColorToken("", {}, null, null, [], []);
                 break;
             case SDKTokenType_1.TokenType.gradient:
-                replica = new SDKGradientToken_1.GradientToken("", {}, null, null, [], []);
+                replica = new SDKGradientToken_1.GradientToken("", {}, [], null, [], []);
                 break;
             case SDKTokenType_1.TokenType.dimension:
                 replica = new SDKDimensionToken_1.DimensionToken("", {}, null, null, [], []);
@@ -46583,7 +46652,7 @@ class ThemeUtilities {
                 replica = new SDKDimensionToken_1.ZIndexToken("", {}, null, null, [], []);
                 break;
             case SDKTokenType_1.TokenType.shadow:
-                replica = new SDKShadowToken_1.ShadowToken("", {}, null, null, [], []);
+                replica = new SDKShadowToken_1.ShadowToken("", {}, [], null, [], []);
                 break;
             case SDKTokenType_1.TokenType.string:
                 replica = new SDKStringToken_1.StringToken("", {}, null, null, [], []);
@@ -48042,13 +48111,11 @@ class GradientToken extends SDKToken_1.Token {
     constructor(versionId, baseToken, value, alias, properties, propertyValues) {
         super(baseToken, versionId, properties, propertyValues);
         this.tokenType = SDKTokenType_1.TokenType.gradient;
-        this.value = value;
+        this.value = value.map((gradientTokenValue) => (Object.assign({}, gradientTokenValue))); // NOTE: ensure no same reference
         this.gradientLayers = new Array();
         this.isVirtual = false;
         if (alias) {
-            for (const layer of this.value) {
-                layer.referencedTokenId = alias.id;
-            }
+            this.value = this.value.map((tokenValueToUpdate) => (Object.assign(Object.assign({}, tokenValueToUpdate), { referencedTokenId: alias.id })));
         }
     }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
@@ -48318,13 +48385,11 @@ class ShadowToken extends SDKToken_1.Token {
     constructor(versionId, baseToken, value, alias, properties, propertyValues) {
         super(baseToken, versionId, properties, propertyValues);
         this.tokenType = SDKTokenType_1.TokenType.shadow;
-        this.value = value;
+        this.value = value.map((shadowTokenValue) => (Object.assign({}, shadowTokenValue))); // NOTE: ensure no same reference
         this.shadowLayers = new Array();
         this.isVirtual = false;
         if (alias) {
-            for (const layer of this.value) {
-                layer.referencedTokenId = alias.id;
-            }
+            this.value = this.value.map((tokenValueToUpdate) => (Object.assign(Object.assign({}, tokenValueToUpdate), { referencedTokenId: alias.id })));
         }
     }
     // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
@@ -50530,6 +50595,14 @@ class SupernovaToolsDesignTokensPlugin {
                     themesInSource.includes(t.name.toLowerCase().trim())));
                 for (const themeToRemove of themesToRemove) {
                     const brand = brands.find((b) => b.id === themeToRemove.brandId);
+                    const themeBrandInMapping = mapping.find(m => m.bindToBrand === brand.id ||
+                        m.bindToBrand.toLowerCase().trim() === brand.name.toLowerCase().trim());
+                    if (!themeBrandInMapping) {
+                        if (settings.verbose) {
+                            console.log(`✅ (task done) Skip remove themes' overrides for brand ${brand.name}, theme ${themeToRemove.name}`);
+                        }
+                        continue;
+                    }
                     yield this.mergeThemeWithRemoteSource([], brand, themeToRemove, !settings.dryRun, settings.verbose, settings.preciseCopy);
                     if (settings.verbose) {
                         console.log(`✅ (task done) Removed themes' overrides for brand ${brand.name}, theme ${themeToRemove.name}`);
@@ -55904,9 +55977,15 @@ const SDKDimensionToken_1 = __webpack_require__(/*! ../../model/tokens/SDKDimens
 const TokenUtils_1 = __webpack_require__(/*! ../../utils/TokenUtils */ "./src/utils/TokenUtils.ts");
 // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 // MARK: - Utility
+const appendPercentageIfApplicable = (measure, stringToAppendTo) => {
+    if (measure < 1) {
+        return stringToAppendTo.concat(` / ${Math.round(measure * 100)}%`);
+    }
+    return stringToAppendTo;
+};
 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, _43, _44;
+        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, _45, _46, _47, _48, _49, _50, _51;
         switch (token.tokenType) {
             case SDKTokenType_1.TokenType.color: {
                 const t = token;
@@ -55933,11 +56012,25 @@ class TokenUtilPreviewSegmentGenerator {
             case SDKTokenType_1.TokenType.blur: {
                 const t = token;
                 const reference = TokenUtils_1.TokenUtils.lookupReference((_d = t.value) === null || _d === void 0 ? void 0 : _d.referencedTokenId, allTokens);
+                if (reference) {
+                    return [
+                        {
+                            value: `${t.value.type.toLowerCase()} ${SDKDimensionToken_1.DimensionToken.valueToString(t.value.radius)}`,
+                            prefersReferenceName: true,
+                            referencedName: (_e = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _e !== void 0 ? _e : undefined,
+                        },
+                    ];
+                }
                 return [
+                    {
+                        value: (_f = t.value) === null || _f === void 0 ? void 0 : _f.type.toLowerCase(),
+                        prefersReferenceName: false,
+                        referencedName: undefined,
+                    },
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.radius),
                         prefersReferenceName: false,
-                        referencedName: (_e = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _e !== void 0 ? _e : undefined,
+                        referencedName: (_g = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _g !== void 0 ? _g : undefined,
                     },
                 ];
             }
@@ -56013,78 +56106,78 @@ class TokenUtilPreviewSegmentGenerator {
             }
             case SDKTokenType_1.TokenType.fontFamily: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_f = t.value) === null || _f === void 0 ? void 0 : _f.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_h = t.value) === null || _h === void 0 ? void 0 : _h.referencedTokenId, allTokens);
                 return [
                     {
                         value: t.value.text,
                         prefersReferenceName: false,
-                        referencedName: (_g = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _g !== void 0 ? _g : undefined,
+                        referencedName: (_j = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _j !== void 0 ? _j : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.fontWeight: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_h = t.value) === null || _h === void 0 ? void 0 : _h.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_k = t.value) === null || _k === void 0 ? void 0 : _k.referencedTokenId, allTokens);
                 return [
                     {
                         value: t.value.text,
                         prefersReferenceName: false,
-                        referencedName: (_j = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _j !== void 0 ? _j : undefined,
+                        referencedName: (_l = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _l !== void 0 ? _l : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.fontSize: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_k = t.value) === null || _k === void 0 ? void 0 : _k.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_m = t.value) === null || _m === void 0 ? void 0 : _m.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_l = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _l !== void 0 ? _l : undefined,
+                        referencedName: (_o = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _o !== void 0 ? _o : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.lineHeight: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_m = t.value) === null || _m === void 0 ? void 0 : _m.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_p = t.value) === null || _p === void 0 ? void 0 : _p.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_o = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _o !== void 0 ? _o : undefined,
+                        referencedName: (_q = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _q !== void 0 ? _q : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.letterSpacing: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_p = t.value) === null || _p === void 0 ? void 0 : _p.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_r = t.value) === null || _r === void 0 ? void 0 : _r.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_q = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _q !== void 0 ? _q : undefined,
+                        referencedName: (_s = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _s !== void 0 ? _s : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.paragraphSpacing: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_r = t.value) === null || _r === void 0 ? void 0 : _r.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_t = t.value) === null || _t === void 0 ? void 0 : _t.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_s = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _s !== void 0 ? _s : undefined,
+                        referencedName: (_u = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _u !== void 0 ? _u : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.opacity: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_t = t.value) === null || _t === void 0 ? void 0 : _t.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_v = t.value) === null || _v === void 0 ? void 0 : _v.referencedTokenId, allTokens);
                 return [
                     {
                         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,
+                        referencedName: (_w = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _w !== void 0 ? _w : undefined,
                     },
                 ];
             }
@@ -56107,11 +56200,12 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         break;
                 }
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_x = t.value) === null || _x === void 0 ? void 0 : _x.referencedTokenId, allTokens);
                 let segments = [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.width),
                         prefersReferenceName: false,
-                        referencedName: (_y = (_x = TokenUtils_1.TokenUtils.lookupReference((_w = (_v = t.value) === null || _v === void 0 ? void 0 : _v.width) === null || _w === void 0 ? void 0 : _w.referencedTokenId, allTokens)) === null || _x === void 0 ? void 0 : _x.name) !== null && _y !== void 0 ? _y : undefined,
+                        referencedName: (_1 = (_0 = TokenUtils_1.TokenUtils.lookupReference((_z = (_y = t.value) === null || _y === void 0 ? void 0 : _y.width) === null || _z === void 0 ? void 0 : _z.referencedTokenId, allTokens)) === null || _0 === void 0 ? void 0 : _0.name) !== null && _1 !== void 0 ? _1 : undefined,
                     },
                     {
                         value: style,
@@ -56121,9 +56215,19 @@ class TokenUtilPreviewSegmentGenerator {
                     {
                         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,
+                        referencedName: (_5 = (_4 = TokenUtils_1.TokenUtils.lookupReference((_3 = (_2 = t.value) === null || _2 === void 0 ? void 0 : _2.color) === null || _3 === void 0 ? void 0 : _3.referencedTokenId, allTokens)) === null || _4 === void 0 ? void 0 : _4.name) !== null && _5 !== void 0 ? _5 : undefined,
                     },
                 ];
+                if (reference) {
+                    segments = [
+                        {
+                            value: appendPercentageIfApplicable(t.value.color.opacity.measure, `${SDKDimensionToken_1.DimensionToken.valueToString((_6 = t.value) === null || _6 === void 0 ? void 0 : _6.width)} ${style} ${SDKColorToken_1.ColorToken.colorValueToHex6(t.value.color).toUpperCase()}`),
+                            prefersReferenceName: true,
+                            referencedName: (_7 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _7 !== void 0 ? _7 : undefined,
+                        },
+                    ];
+                    return segments;
+                }
                 if (t.value.color.opacity.measure < 1) {
                     // Only add opacity if it is not 100%
                     segments = segments.concat([
@@ -56131,7 +56235,7 @@ class TokenUtilPreviewSegmentGenerator {
                         {
                             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,
+                            referencedName: (_9 = (_8 = TokenUtils_1.TokenUtils.lookupReference(t.value.color.opacity.referencedTokenId, allTokens)) === null || _8 === void 0 ? void 0 : _8.name) !== null && _9 !== void 0 ? _9 : undefined,
                         },
                     ]);
                 }
@@ -56139,45 +56243,45 @@ class TokenUtilPreviewSegmentGenerator {
             }
             case SDKTokenType_1.TokenType.radius: {
                 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((_10 = t.value) === null || _10 === void 0 ? void 0 : _10.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: (_11 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _11 !== void 0 ? _11 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.borderWidth: {
                 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((_12 = t.value) === null || _12 === void 0 ? void 0 : _12.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: (_13 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _13 !== void 0 ? _13 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.duration: {
                 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((_14 = t.value) === null || _14 === void 0 ? void 0 : _14.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: (_15 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _15 !== void 0 ? _15 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.zIndex: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_11 = t.value) === null || _11 === void 0 ? void 0 : _11.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_16 = t.value) === null || _16 === void 0 ? void 0 : _16.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_12 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _12 !== void 0 ? _12 : undefined,
+                        referencedName: (_17 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _17 !== void 0 ? _17 : undefined,
                     },
                 ];
             }
@@ -56203,12 +56307,12 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown text case");
                 }
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_13 = t.value) === null || _13 === void 0 ? void 0 : _13.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_18 = t.value) === null || _18 === void 0 ? void 0 : _18.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_14 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _14 !== void 0 ? _14 : undefined,
+                        referencedName: (_19 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _19 !== void 0 ? _19 : undefined,
                     },
                 ];
             }
@@ -56228,12 +56332,12 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown text decoration 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((_20 = t.value) === null || _20 === void 0 ? void 0 : _20.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_16 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _16 !== void 0 ? _16 : undefined,
+                        referencedName: (_21 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _21 !== void 0 ? _21 : undefined,
                     },
                 ];
             }
@@ -56250,80 +56354,90 @@ class TokenUtilPreviewSegmentGenerator {
                     default:
                         throw new Error("Unknown visibility option");
                 }
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_17 = t.value) === null || _17 === void 0 ? void 0 : _17.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_22 = t.value) === null || _22 === void 0 ? void 0 : _22.referencedTokenId, allTokens);
                 return [
                     {
                         value,
                         prefersReferenceName: false,
-                        referencedName: (_18 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _18 !== void 0 ? _18 : undefined,
+                        referencedName: (_23 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _23 !== void 0 ? _23 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.productCopy: {
                 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((_24 = t.value) === null || _24 === void 0 ? void 0 : _24.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: (_25 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _25 !== void 0 ? _25 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.string: {
                 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((_26 = t.value) === null || _26 === void 0 ? void 0 : _26.referencedTokenId, allTokens);
                 return [
                     {
                         value: t.value.text,
                         prefersReferenceName: false,
-                        referencedName: (_22 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _22 !== void 0 ? _22 : undefined,
+                        referencedName: (_27 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _27 !== void 0 ? _27 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.dimension: {
                 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((_28 = t.value) === null || _28 === void 0 ? void 0 : _28.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: (_29 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _29 !== void 0 ? _29 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.size: {
                 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((_30 = t.value) === null || _30 === void 0 ? void 0 : _30.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: (_31 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _31 !== void 0 ? _31 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.space: {
                 const t = token;
-                const reference = TokenUtils_1.TokenUtils.lookupReference((_27 = t.value) === null || _27 === void 0 ? void 0 : _27.referencedTokenId, allTokens);
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_32 = t.value) === null || _32 === void 0 ? void 0 : _32.referencedTokenId, allTokens);
                 return [
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value),
                         prefersReferenceName: false,
-                        referencedName: (_28 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _28 !== void 0 ? _28 : undefined,
+                        referencedName: (_33 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _33 !== void 0 ? _33 : undefined,
                     },
                 ];
             }
             case SDKTokenType_1.TokenType.typography: {
                 const t = token;
                 let lineHeightFragments = [];
+                const reference = TokenUtils_1.TokenUtils.lookupReference((_34 = t.value) === null || _34 === void 0 ? void 0 : _34.referencedTokenId, allTokens);
+                if (reference) {
+                    return [
+                        {
+                            value: `${SDKDimensionToken_1.DimensionToken.valueToString(t.value.fontSize)} / ${SDKDimensionToken_1.DimensionToken.valueToString(t.value.lineHeight)} ${t.value.fontFamily.text} ${t.value.fontWeight.text}`,
+                            prefersReferenceName: true,
+                            referencedName: (_35 = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _35 !== void 0 ? _35 : undefined,
+                        },
+                    ];
+                }
                 if (t.value.lineHeight) {
                     lineHeightFragments = [
                         "separator",
                         {
                             value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.lineHeight),
                             prefersReferenceName: false,
-                            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,
+                            referencedName: (_39 = (_38 = TokenUtils_1.TokenUtils.lookupReference((_37 = (_36 = t.value) === null || _36 === void 0 ? void 0 : _36.lineHeight) === null || _37 === void 0 ? void 0 : _37.referencedTokenId, allTokens)) === null || _38 === void 0 ? void 0 : _38.name) !== null && _39 !== void 0 ? _39 : undefined,
                         },
                     ];
                 }
@@ -56331,18 +56445,18 @@ class TokenUtilPreviewSegmentGenerator {
                     {
                         value: SDKDimensionToken_1.DimensionToken.valueToString(t.value.fontSize),
                         prefersReferenceName: false,
-                        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,
+                        referencedName: (_43 = (_42 = TokenUtils_1.TokenUtils.lookupReference((_41 = (_40 = t.value) === null || _40 === void 0 ? void 0 : _40.fontSize) === null || _41 === void 0 ? void 0 : _41.referencedTokenId, allTokens)) === null || _42 === void 0 ? void 0 : _42.name) !== null && _43 !== void 0 ? _43 : undefined,
                     },
                     ...lineHeightFragments,
                     {
                         value: t.value.fontFamily.text,
                         prefersReferenceName: false,
-                        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,
+                        referencedName: (_47 = (_46 = TokenUtils_1.TokenUtils.lookupReference((_45 = (_44 = t.value) === null || _44 === void 0 ? void 0 : _44.fontFamily) === null || _45 === void 0 ? void 0 : _45.referencedTokenId, allTokens)) === null || _46 === void 0 ? void 0 : _46.name) !== null && _47 !== void 0 ? _47 : undefined,
                     },
                     {
                         value: t.value.fontWeight.text,
                         prefersReferenceName: false,
-                        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,
+                        referencedName: (_51 = (_50 = TokenUtils_1.TokenUtils.lookupReference((_49 = (_48 = t.value) === null || _48 === void 0 ? void 0 : _48.fontWeight) === null || _49 === void 0 ? void 0 : _49.referencedTokenId, allTokens)) === null || _50 === void 0 ? void 0 : _50.name) !== null && _51 !== void 0 ? _51 : undefined,
                     },
                 ];
             }
@@ -56351,39 +56465,56 @@ class TokenUtilPreviewSegmentGenerator {
         }
     }
     static shadowValuesToSegments(layer, allTokens) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!layer) {
             return [];
         }
+        const reference = TokenUtils_1.TokenUtils.lookupReference(layer.referencedTokenId, allTokens);
+        const formatDimension = (value, unit) => value === 0 ? `0` : `${SDKDimensionToken_1.DimensionToken.numberToString(value)}${unit}`;
+        const getReferencedValuePreview = () => {
+            const x = formatDimension(layer.x, "px");
+            const y = formatDimension(layer.y, "px");
+            const radius = formatDimension(layer.radius, "px");
+            const spread = formatDimension(layer.spread, "px");
+            const color = SDKColorToken_1.ColorToken.colorValueToHex6(layer.color).toUpperCase();
+            const value = `${x} ${y} ${radius} ${spread} ${color}`;
+            console.log(layer);
+            return appendPercentageIfApplicable(layer.opacity.measure, value);
+        };
+        if (reference) {
+            return [
+                {
+                    value: getReferencedValuePreview(),
+                    prefersReferenceName: true,
+                    referencedName: (_a = reference === null || reference === void 0 ? void 0 : reference.name) !== null && _a !== void 0 ? _a : undefined,
+                },
+            ];
+        }
         let segments = [
             {
-                value: layer.x === 0 ? `0` : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.x)}px`,
+                value: formatDimension(layer.x, "px"),
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.y === 0 ? `0` : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.y)}px`,
+                value: formatDimension(layer.y, "px"),
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.radius === 0
-                    ? `0`
-                    : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.radius)}px`,
+                value: formatDimension(layer.radius, "px"),
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
-                value: layer.spread === 0
-                    ? `0`
-                    : `${SDKDimensionToken_1.DimensionToken.numberToString(layer.spread)}px`,
+                value: formatDimension(layer.spread, "px"),
                 prefersReferenceName: false,
                 referencedName: undefined,
             },
             {
                 value: SDKColorToken_1.ColorToken.colorValueToHex6(layer.color).toUpperCase(),
-                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,
+                prefersReferenceName: false,
+                referencedName: (_c = (_b = TokenUtils_1.TokenUtils.lookupReference(layer.color.referencedTokenId, allTokens)) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : undefined,
             },
         ];
         if (layer.opacity.measure < 1) {
@@ -56393,7 +56524,7 @@ class TokenUtilPreviewSegmentGenerator {
                 {
                     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,
+                    referencedName: (_e = (_d = TokenUtils_1.TokenUtils.lookupReference(layer.opacity.referencedTokenId, allTokens)) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : undefined,
                 },
             ]);
         }
@@ -56855,7 +56986,6 @@ class ComponentUtils {
             id: undefined,
             persistentId: (0, uuid_1.v4)(),
             brandId,
-            designSystemVersionId: versionId,
             meta: {
                 name: name !== null && name !== void 0 ? name : "Group",
                 description: "",
@@ -58406,8 +58536,6 @@ class TokenUtils {
         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;
     }
@@ -58620,7 +58748,7 @@ class TokenUtils {
     }
     static buildFallbackKeyBack(node) {
         return this.buildKey(node.path, node.token.name)
-            .replace(/^(dimension|font-size|font-sizing|line-height|letter-spacing|paragraph-spacing|spacing|space|opacity|size|sizing)\//, 'measure/')
+            .replace(/^(dimension|font-size|font-sizing|line-height|letter-spacing|paragraph-spacing|spacing|space|opacity|size|sizing|border-width)\//, 'measure/')
             .replace(/^(font-family|font-weight)\//, 'generic/')
             .replace(/^(border-radius)\//, 'radius/');
     }