@malloydata/render 0.0.286 → 0.0.287

package/dist/webcomponent/malloy-render.umd.js

@@ -27471,7 +27471,7 @@ ${spaces}}`;
       return new Tag(structuredClone(this));
     }
     static escapeString(str) {
-      return str.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+      return str.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n");
     }
     static escapeProp(str) {
       return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
@@ -53601,7 +53601,8 @@ ${left}  `;
           code: this.exprSrc,
           e: { node: "false" },
           expressionType: "scalar",
-          fieldUsage: exprVal.fieldUsage
+          fieldUsage: exprVal.fieldUsage,
+          isSourceFilter: false
         };
       }
       const stableFilter = this.getStableFilter();
@@ -53611,7 +53612,8 @@ ${left}  `;
         e: exprVal.value,
         expressionType: exprVal.expressionType,
         fieldUsage: exprVal.fieldUsage,
-        stableFilter
+        stableFilter,
+        isSourceFilter: false
       };
       return exprCond;
     }
@@ -53934,6 +53936,7 @@ ${left}  `;
       const exprCond = {
         node: "filterCondition",
         code: filter2.exprSrc,
+        isSourceFilter: false,
         e: collectedWheres === void 0 ? fExpr.value : {
           node: "and",
           kids: { left: collectedWheres, right: fExpr.value }
@@ -56445,7 +56448,10 @@ ${left}  `;
           if ((0, malloy_types_1$u.expressionIsCalculation)(fc.expressionType)) {
             el.logError("aggregate-in-source-filter", "Can't use aggregate computations in top level filters");
           } else {
-            filterList.push(fc);
+            filterList.push({
+              ...fc,
+              isSourceFilter: true
+            });
             moreFilters = true;
           }
         }
@@ -85622,7 +85628,6 @@ ${cooked}`;
     return result;
   }
   function getResultMetadataAnnotation(field2, resultMetadata) {
-    var _a;
     const tag = malloy_tag_1$1.Tag.withPrefix("#(malloy) ");
     let hasAny = false;
     if (resultMetadata.referenceId !== void 0) {
@@ -85643,9 +85648,8 @@ ${cooked}`;
         hasAny = true;
       }
     }
-    const drillFilters = (_a = resultMetadata.filterList) === null || _a === void 0 ? void 0 : _a.filter((f2) => f2.expressionType === "scalar");
-    if (drillFilters) {
-      addDrillFiltersTag(tag, drillFilters);
+    if (resultMetadata.filterList) {
+      addDrillFiltersTag(tag, resultMetadata.filterList);
       hasAny = true;
     }
     if (resultMetadata.fieldKind === "dimension") {
@@ -85662,6 +85666,8 @@ ${cooked}`;
     var _a;
     for (let i2 = 0; i2 < drillFilters.length; i2++) {
       const filter2 = drillFilters[i2];
+      if (filter2.expressionType !== "scalar" || filter2.isSourceFilter)
+        continue;
       tag.set(["drill_filters", i2, "code"], filter2.code);
       if (filter2.drillView) {
         tag.set(["drill_filters", i2, "drill_view"], filter2.drillView);
@@ -85717,16 +85723,15 @@ ${cooked}`;
     return `\`${escapeIdentifier(name)}\``;
   }
   function getResultStructMetadataAnnotation(field2, resultMetadata) {
-    var _a, _b, _c;
+    var _a, _b;
     const tag = malloy_tag_1$1.Tag.withPrefix("#(malloy) ");
     let hasAny = false;
     if (resultMetadata.limit !== void 0) {
       tag.set(["limit"], resultMetadata.limit);
       hasAny = true;
     }
-    const drillFilters = (_a = resultMetadata.filterList) === null || _a === void 0 ? void 0 : _a.filter((f2) => f2.expressionType === "scalar");
-    if (drillFilters) {
-      addDrillFiltersTag(tag, drillFilters);
+    if (resultMetadata.filterList) {
+      addDrillFiltersTag(tag, resultMetadata.filterList);
       hasAny = true;
     }
     if (resultMetadata.drillable) {
@@ -85736,8 +85741,8 @@ ${cooked}`;
     if (resultMetadata.orderBy) {
       for (let i2 = 0; i2 < resultMetadata.orderBy.length; i2++) {
         const orderBy = resultMetadata.orderBy[i2];
-        const orderByField = typeof orderBy.field === "number" ? (_b = field2.fields[orderBy.field - 1].as) !== null && _b !== void 0 ? _b : field2.fields[orderBy.field - 1].name : orderBy.field;
-        const direction = (_c = orderBy.dir) !== null && _c !== void 0 ? _c : null;
+        const orderByField = typeof orderBy.field === "number" ? (_a = field2.fields[orderBy.field - 1].as) !== null && _a !== void 0 ? _a : field2.fields[orderBy.field - 1].name : orderBy.field;
+        const direction = (_b = orderBy.dir) !== null && _b !== void 0 ? _b : null;
         tag.set(["ordered_by", i2, orderByField], direction);
       }
       hasAny = true;
@@ -87004,7 +87009,7 @@ ${cooked}`;
   var version = {};
   Object.defineProperty(version, "__esModule", { value: true });
   version.MALLOY_VERSION = void 0;
-  version.MALLOY_VERSION = "0.0.286";
+  version.MALLOY_VERSION = "0.0.287";
   Object.defineProperty(malloy, "__esModule", { value: true });
   malloy.InMemoryModelCache = malloy.CacheManager = malloy.CSVWriter = malloy.JSONWriter = malloy.DataWriter = malloy.DataRecord = malloy.DataArray = malloy.Result = malloy.ExploreMaterializer = malloy.PreparedResultMaterializer = malloy.QueryMaterializer = malloy.ModelMaterializer = malloy.SingleConnectionRuntime = malloy.ConnectionRuntime = malloy.Runtime = malloy.ExploreField = malloy.JoinRelationship = malloy.QueryField = malloy.Query = malloy.StringField = malloy.UnsupportedField = malloy.JSONField = malloy.BooleanField = malloy.NumberField = malloy.TimestampField = malloy.DateField = malloy.TimestampTimeframe = malloy.DateTimeframe = malloy.AtomicField = malloy.AtomicFieldType = malloy.Explore = malloy.SourceRelationship = malloy.FixedConnectionMap = malloy.InMemoryURLReader = malloy.EmptyURLReader = malloy.PreparedResult = malloy.DocumentCompletion = malloy.DocumentSymbol = malloy.DocumentPosition = malloy.DocumentRange = malloy.DocumentTablePath = malloy.Parse = malloy.PreparedQuery = malloy.Model = malloy.MalloyError = malloy.Malloy = void 0;
   const lang_1$1 = lang;
@@ -91234,6 +91239,44 @@ ${errText}`, errors2);
       return annotation_12.annotationToTaglines;
     } });
   })(dist$2);
+  const LEGACY_CHART_TAGS = ["bar_chart", "line_chart"];
+  const VIZ_CHART_TYPES = ["bar", "line"];
+  function legacyTagToVizType(legacyTag) {
+    const legacyMap = {
+      "bar_chart": "bar",
+      "line_chart": "line",
+      "table": "table",
+      "dashboard": "dashboard"
+    };
+    return legacyMap[legacyTag] ?? legacyTag;
+  }
+  function convertLegacyToVizTag(tag) {
+    var _a;
+    if (tag.has("viz")) {
+      return tag;
+    }
+    const properties = tag.properties ?? {};
+    const tagNamesInOrder = Object.keys(properties).reverse();
+    const legacyChartTag = tagNamesInOrder.find(
+      (name) => LEGACY_CHART_TAGS.includes(name) && !properties[name].deleted
+    );
+    if (legacyChartTag) {
+      const legacyTagObject = tag.tag(legacyChartTag);
+      tag.set(["viz"], legacyTagToVizType(legacyChartTag));
+      if ((_a = tag.properties) == null ? void 0 : _a["viz"]) {
+        tag.properties["viz"].properties = legacyTagObject == null ? void 0 : legacyTagObject.properties;
+      }
+      return tag;
+    }
+    return tag;
+  }
+  function getChartTypeFromNormalizedTag(normalizedTag) {
+    const vizType = normalizedTag.text("viz");
+    if (vizType && VIZ_CHART_TYPES.includes(vizType)) {
+      return vizType;
+    }
+    return void 0;
+  }
   function getDataTree(result, plugins = []) {
     const fields = [];
     for (const field2 of result.schema.fields) {
@@ -91375,7 +91418,15 @@ ${errText}`, errors2);
     "segment_map"
   ];
   function shouldRenderAs(field2, parent, tagOverride) {
-    const tag = tagFor(field2);
+    const tag = convertLegacyToVizTag(
+      renderTagFromAnnotations(field2.annotations)
+    );
+    const vizType = tag.text("viz");
+    if (vizType) {
+      if (vizType === "table") return "table";
+      if (vizType === "dashboard") return "dashboard";
+      if (VIZ_CHART_TYPES.includes(vizType)) return "chart";
+    }
     const properties = tag.properties ?? {};
     const tagNamesInOrder = Object.keys(properties).reverse();
     for (const tagName of tagNamesInOrder) {
@@ -91398,7 +91449,7 @@ ${errText}`, errors2);
       this.parent = parent;
       this.valueSet = /* @__PURE__ */ new Set();
       this._pluginData = /* @__PURE__ */ new Map();
-      this.tag = tagFor(this.field);
+      this.tag = renderTagFromAnnotations(this.field.annotations);
       this.metadataTag = tagFor(this.field, "#(malloy) ");
       this.path = parent ? parent.isArray() ? [...parent.path] : [...parent.path, field2.name] : [];
       this.renderAs = shouldRenderAs(field2, parent);
@@ -92691,6 +92742,13 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
     const tagLines = ((_a = annotations == null ? void 0 : annotations.map((a2) => a2.value)) == null ? void 0 : _a.filter((l2) => l2.startsWith(prefix))) ?? [];
     return dist$4.Tag.fromTagLines(tagLines).tag ?? new dist$4.Tag();
   }
+  function renderTagFromAnnotations(annotations) {
+    var _a, _b;
+    const defaultTagLines = ((_a = annotations == null ? void 0 : annotations.map((a2) => a2.value)) == null ? void 0 : _a.filter((l2) => l2.startsWith("# "))) ?? [];
+    const renderTagLines = ((_b = annotations == null ? void 0 : annotations.map((a2) => a2.value)) == null ? void 0 : _b.filter((l2) => l2.startsWith("#r "))) ?? [];
+    const allLines = [...defaultTagLines, ...renderTagLines];
+    return dist$4.Tag.fromTagLines(allLines).tag ?? new dist$4.Tag();
+  }
   function formatTimeUnit(value2, unit2, options = {}) {
     let unitString = unit2.toString();
     if (options.terse) {
@@ -92822,15 +92880,15 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
     return x2 !== void 0;
   }
   function getBarChartSettings(explore, tagOverride) {
-    const tag = explore.tag;
-    const chart = tag.tag("bar_chart") ?? tag.tag("bar");
-    const interactive2 = !tag.has("tooltip");
-    const isSpark = (chart == null ? void 0 : chart.text("size")) === "spark" || tag.text("size") === "spark";
-    if (!chart) {
+    const normalizedTag = convertLegacyToVizTag(explore.tag);
+    if (normalizedTag.text("viz") !== "bar") {
       throw new Error(
-        "Tried to render a bar_chart, but no bar_chart tag was found"
+        "Tried to render a bar chart, but no viz=bar tag was found"
       );
     }
+    const vizTag = normalizedTag.tag("viz");
+    const interactive2 = !normalizedTag.has("tooltip");
+    const isSpark = vizTag.text("size") === "spark" || normalizedTag.text("size") === "spark";
     const xChannel = {
       fields: [],
       type: null
@@ -92846,43 +92904,45 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
     function getField2(ref2) {
       return explore.pathTo(explore.fieldAt([ref2]));
     }
-    const isStack2 = chart.has("stack");
-    if (chart.text("x")) {
-      xChannel.fields.push(getField2(chart.text("x")));
+    const isStack2 = vizTag.has("stack");
+    if (vizTag.text("x")) {
+      xChannel.fields.push(getField2(vizTag.text("x")));
     }
-    if (chart.text("y")) {
-      yChannel.fields.push(getField2(chart.text("y")));
-    } else if (chart.textArray("y")) {
-      yChannel.fields.push(...chart.textArray("y").map(getField2));
+    if (vizTag.text("y")) {
+      yChannel.fields.push(getField2(vizTag.text("y")));
+    } else if (vizTag.textArray("y")) {
+      yChannel.fields.push(...vizTag.textArray("y").map(getField2));
     }
-    if (chart.text("series")) {
-      seriesChannel.fields.push(getField2(chart.text("series")));
+    if (vizTag.text("series")) {
+      seriesChannel.fields.push(getField2(vizTag.text("series")));
     }
     const embeddedX = [];
     const embeddedY = [];
     const embeddedSeries = [];
-    walkFields(explore, (field2) => {
-      const tag2 = field2.tag;
-      const pathTo = explore.pathTo(field2);
-      if (tag2.has("x")) {
-        embeddedX.push(pathTo);
-      }
-      if (tag2.has("y")) {
-        embeddedY.push(pathTo);
-      }
-      if (tag2.has("series")) {
-        embeddedSeries.push(pathTo);
-      }
-    });
-    embeddedX.forEach((path2) => {
-      xChannel.fields.push(path2);
-    });
-    embeddedY.forEach((path2) => {
-      yChannel.fields.push(path2);
-    });
-    embeddedSeries.forEach((path2) => {
-      seriesChannel.fields.push(path2);
-    });
+    if (!vizTag.has("disableEmbedded")) {
+      walkFields(explore, (field2) => {
+        const tag = field2.tag;
+        const pathTo = explore.pathTo(field2);
+        if (tag.has("x")) {
+          embeddedX.push(pathTo);
+        }
+        if (tag.has("y")) {
+          embeddedY.push(pathTo);
+        }
+        if (tag.has("series")) {
+          embeddedSeries.push(pathTo);
+        }
+      });
+      embeddedX.forEach((path2) => {
+        xChannel.fields.push(path2);
+      });
+      embeddedY.forEach((path2) => {
+        yChannel.fields.push(path2);
+      });
+      embeddedSeries.forEach((path2) => {
+        seriesChannel.fields.push(path2);
+      });
+    }
     const dimensions2 = explore.fields.filter(
       (f2) => f2.isBasic() && f2.wasDimension()
     );
@@ -199936,11 +199996,11 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
   }
   function generateBarChartVegaSpec(explore, metadata2) {
     var _a;
-    const tag = explore.tag;
-    const chartTag = tag.tag("bar_chart") ?? tag.tag("bar");
+    const tag = convertLegacyToVizTag(explore.tag);
+    const chartTag = tag.tag("viz");
     if (!chartTag)
       throw new Error(
-        "Bar chart should only be rendered for bar_chart or bar tag"
+        "Bar chart should only be rendered for bar_chart or viz=bar tag"
       );
     const settings = getBarChartSettings(explore);
     const xFieldPath = settings.xChannel.fields.at(0);
@@ -199987,7 +200047,7 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       metadata: metadata2,
       xField,
       yField,
-      chartType: "bar_chart",
+      chartType: "bar",
       getYMinMax: () => [yDomainMin, yDomainMax],
       independentY: chartTag.has("y", "independent")
       // TODO implement this so can calculate data limits here
@@ -200589,7 +200649,7 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       plotHeight: chartSettings.plotHeight,
       totalWidth: chartSettings.totalWidth,
       totalHeight: chartSettings.totalHeight,
-      chartType: "bar_chart",
+      chartType: "bar",
       chartTag,
       mapMalloyDataToChartData,
       getTooltipData: (item, view2) => {
@@ -200667,16 +200727,30 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       }
     };
   }
+  const defaultSettings = {
+    size: "fill",
+    line_chart: {
+      zero_baseline: false
+    }
+  };
   function getLineChartSettings(explore, tagOverride) {
-    const tag = tagOverride ?? explore.tag;
-    const chart = tag.tag("line_chart");
-    if (!chart) {
+    const normalizedTag = convertLegacyToVizTag(tagOverride ?? explore.tag);
+    if (normalizedTag.text("viz") !== "line") {
       throw new Error(
-        "Malloy Line Chart: Tried to render a line chart, but no line_chart tag was found"
+        "Malloy Line Chart: Tried to render a line chart, but no viz=line tag was found"
       );
     }
-    const zeroBaseline = chart.has("zero_baseline") ? chart.text("zero_baseline") !== "false" : true;
-    const interactive2 = !tag.has("tooltip");
+    const vizTag = normalizedTag.tag("viz");
+    let zeroBaseline = defaultSettings.line_chart.zero_baseline;
+    if (vizTag.has("zero_baseline")) {
+      const value2 = vizTag.text("zero_baseline");
+      if (value2 === "false") {
+        zeroBaseline = false;
+      } else if (value2 === "true" || value2 === null || value2 === void 0 || value2 === "") {
+        zeroBaseline = true;
+      }
+    }
+    const interactive2 = !normalizedTag.has("tooltip");
     const xChannel = {
       fields: [],
       type: null
@@ -200692,42 +200766,44 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
     function getField2(ref2) {
       return explore.pathTo(explore.fieldAt([ref2]));
     }
-    if (chart.text("x")) {
-      xChannel.fields.push(getField2(chart.text("x")));
+    if (vizTag.text("x")) {
+      xChannel.fields.push(getField2(vizTag.text("x")));
     }
-    if (chart.text("y")) {
-      yChannel.fields.push(getField2(chart.text("y")));
-    } else if (chart.textArray("y")) {
-      yChannel.fields.push(...chart.textArray("y").map(getField2));
+    if (vizTag.text("y")) {
+      yChannel.fields.push(getField2(vizTag.text("y")));
+    } else if (vizTag.textArray("y")) {
+      yChannel.fields.push(...vizTag.textArray("y").map(getField2));
     }
-    if (chart.text("series")) {
-      seriesChannel.fields.push(getField2(chart.text("series")));
+    if (vizTag.text("series")) {
+      seriesChannel.fields.push(getField2(vizTag.text("series")));
     }
     const embeddedX = [];
     const embeddedY = [];
     const embeddedSeries = [];
-    walkFields(explore, (field2) => {
-      const tag2 = field2.tag;
-      const pathTo = explore.pathTo(field2);
-      if (tag2.has("x")) {
-        embeddedX.push(pathTo);
-      }
-      if (tag2.has("y")) {
-        embeddedY.push(pathTo);
-      }
-      if (tag2.has("series")) {
-        embeddedSeries.push(pathTo);
-      }
-    });
-    embeddedX.forEach((path2) => {
-      xChannel.fields.push(path2);
-    });
-    embeddedY.forEach((path2) => {
-      yChannel.fields.push(path2);
-    });
-    embeddedSeries.forEach((path2) => {
-      seriesChannel.fields.push(path2);
-    });
+    if (!vizTag.has("disableEmbedded")) {
+      walkFields(explore, (field2) => {
+        const tag = field2.tag;
+        const pathTo = explore.pathTo(field2);
+        if (tag.has("x")) {
+          embeddedX.push(pathTo);
+        }
+        if (tag.has("y")) {
+          embeddedY.push(pathTo);
+        }
+        if (tag.has("series")) {
+          embeddedSeries.push(pathTo);
+        }
+      });
+      embeddedX.forEach((path2) => {
+        xChannel.fields.push(path2);
+      });
+      embeddedY.forEach((path2) => {
+        yChannel.fields.push(path2);
+      });
+      embeddedSeries.forEach((path2) => {
+        seriesChannel.fields.push(path2);
+      });
+    }
     const dimensions2 = explore.fields.filter(
       (f2) => f2.isBasic() && f2.wasDimension()
     );
@@ -200802,11 +200878,11 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
         "Malloy Line Chart: Trying to render a line chart when Line chart series plugin not found"
       );
     }
-    const tag = explore.tag;
-    const chartTag = tag.tag("line_chart");
+    const tag = convertLegacyToVizTag(explore.tag);
+    const chartTag = tag.tag("viz");
     if (!chartTag)
       throw new Error(
-        "Malloy Line Chart: Line chart should only be rendered for line_chart tag"
+        "Malloy Line Chart: Tried to render a line chart, but no viz=line tag was found"
       );
     const settings = getLineChartSettings(explore, tag);
     const xFieldPath = settings.xChannel.fields.at(0);
@@ -200861,7 +200937,7 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       metadata: metadata2,
       xField,
       yField,
-      chartType: "line_chart",
+      chartType: "line",
       getYMinMax: () => [yDomainMin, yDomainMax],
       independentY: chartTag.has("y", "independent") || isLimitingSeries
     });
@@ -201520,7 +201596,7 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       plotHeight: chartSettings.plotHeight,
       totalWidth: chartSettings.totalWidth,
       totalHeight: chartSettings.totalHeight,
-      chartType: "line_chart",
+      chartType: "line",
       chartTag,
       mapMalloyDataToChartData,
       getTooltipData(item, view2) {
@@ -201620,9 +201696,6 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       }
     };
   }
-  const defaultSettings = {
-    size: "fill"
-  };
   function getResultMetadata(root2, options = { parentSize: { width: 0, height: 0 } }) {
     const rootTag = root2.field.tag;
     const rootSizingStrategy = rootTag.has("size") && rootTag.text("size") !== "fill" ? "fixed" : defaultSettings.size;
@@ -201649,13 +201722,9 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       }
     });
   }
-  const CHART_TAG_LIST = ["bar_chart", "line_chart"];
   function shouldRenderChartAs(tag) {
-    const properties = tag.properties ?? {};
-    const tagNamesInOrder = Object.keys(properties).reverse();
-    return tagNamesInOrder.find(
-      (name) => CHART_TAG_LIST.includes(name) && !properties[name].deleted
-    );
+    const normalizedTag = convertLegacyToVizTag(tag);
+    return getChartTypeFromNormalizedTag(normalizedTag);
   }
   function populateVegaSpec(field2, metadata2, options) {
     var _a, _b, _c, _d, _e;
@@ -201667,9 +201736,9 @@ ${expressions.map((entry2) => `    ${entry2}`).join(",\n")}
       runtime: null
     };
     try {
-      if (chartType === "bar_chart") {
+      if (chartType === "bar") {
         vegaChartProps = generateBarChartVegaSpec(field2, metadata2);
-      } else if (chartType === "line_chart") {
+      } else if (chartType === "line") {
         vegaChartProps = generateLineChartVegaSpec(field2, metadata2);
       }
     } catch (error2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.286",
+  "version": "0.0.287",
   "license": "MIT",
   "main": "dist/module/index.umd.js",
   "types": "dist/index.d.ts",
@@ -41,9 +41,9 @@
     "generate-flow": "ts-node ../../scripts/gen-flow.ts"
   },
   "dependencies": {
-    "@malloydata/malloy": "0.0.286",
-    "@malloydata/malloy-interfaces": "0.0.286",
-    "@malloydata/malloy-tag": "0.0.286",
+    "@malloydata/malloy": "0.0.287",
+    "@malloydata/malloy-interfaces": "0.0.287",
+    "@malloydata/malloy-tag": "0.0.287",
     "@tanstack/solid-virtual": "^3.10.4",
     "component-register": "^0.8.6",
     "lodash": "^4.17.20",
@@ -56,7 +56,7 @@
     "vega-lite": "^5.2.0"
   },
   "devDependencies": {
-    "@malloydata/db-duckdb": "0.0.286",
+    "@malloydata/db-duckdb": "0.0.287",
     "@storybook/addon-essentials": "^8.5.8",
     "@storybook/addon-interactions": "^8.5.8",
     "@storybook/addon-links": "^8.5.8",