@juspay/svelte-ui-components 2.80.4 → 2.80.6

package/dist/BarChart/BarChart.svelte

@@ -18,7 +18,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath } from '../_chart/paths';
   import type { LegendItem, BarRect } from '../_chart/types';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap } from 'svelte/reactivity';
 
   // ── Per-instance uid prefix for <defs> ids (A1-3) ─────────────
@@ -55,6 +55,8 @@
     barPadding = 0.2,
     barRadius = DEFAULT_CHART_CORNER_RADIUS,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     xAxisLabel,
     yAxisLabel,
     yDomain,
@@ -108,7 +110,17 @@
 
   let format = $derived(valueFormat ?? formatNumber);
   let isVertical = $derived(orientation === 'vertical');
-  let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
+  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
+  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
+  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
+  // don't sit flush against the container edges.
+  let dims = $derived(
+    computeChartDimensions(chartWidth, chartHeight, {
+      left: showYAxis ? 50 : 28,
+      right: 28,
+      bottom: showXAxis ? 40 : 8
+    })
+  );
 
   let isMulti = $derived(Array.isArray(series) && series.length > 0);
 
@@ -606,7 +618,13 @@
         : ''}
     >
       <div style={scrollable ? `min-width: ${minScrollWidth}px;` : ''}>
-        <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+        <ChartContainer
+          bind:width={chartWidth}
+          bind:height={chartHeight}
+          {aspectRatio}
+          {maxHeight}
+          {minHeight}
+        >
           <!-- A1-2 / A1-3: SVG <defs> for pattern and gradient fills -->
           {#if defsEntries.length > 0}
             <defs>
@@ -755,7 +773,12 @@
                     onclick={() => handleClick(bar)}
                   />
                 {/if}
-                {#if showValues && !isStackedMode}
+                <!-- Suppress the horizontal value label when its sub-band is thinner
+                     than the ~11px label, so cramped multi-series charts hide labels
+                     instead of overlapping them into an unreadable cluster. Consumers
+                     restore labels by giving the chart more height (aspectRatio /
+                     scrollable / minBandWidth). -->
+                {#if showValues && !isStackedMode && (isVertical || bar.height >= 13)}
                   <text
                     class="bar-value"
                     x={isVertical ? bar.x + bar.width / 2 : bar.x + bar.width + 4}
@@ -812,7 +835,8 @@
   }
   .bar-value {
     fill: var(--barchart-value-color, #333);
-    font-size: var(--barchart-value-font-size, 11px);
+    font-size: var(--barchart-value-font-size, 14px);
+    font-weight: var(--barchart-value-font-weight, 600);
     font-family: var(--chart-font-family, inherit);
     pointer-events: none;
   }

package/dist/BarChart/properties.d.ts

@@ -84,6 +84,14 @@ export type OptionalBarChartProperties = {
      */
     barRadius?: number;
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height. The chart height is derived from
+     * its width via `aspectRatio`; on wide or scrollable surfaces that can balloon the
+     * chart. Cap it here to keep the chart compact (defaults to `Infinity` = uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     xAxisLabel?: string;
     yAxisLabel?: string;
     yDomain?: [number, number];

package/dist/DeltaIndicator/DeltaIndicator.svelte

@@ -68,6 +68,14 @@
     color: var(--delta-indicator-neutral-color, #8a8a8a);
   }
 
+  /* The tone color is set on the wrapper; the text span must inherit it explicitly.
+     A consumer's global `span { color }` rule (higher weight than inheritance) would
+     otherwise repaint just the number a neutral text color — leaving only the arrow
+     tinted and making up/down deltas read as colorless. */
+  .delta-indicator-text {
+    color: inherit;
+  }
+
   .delta-indicator-arrow {
     display: inline-flex;
     width: var(--delta-indicator-arrow-size, 9px);

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -14,7 +14,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath, linePath } from '../_chart/paths';
   import type { LegendItem, TooltipData, LinearScale, BandScale, Point } from '../_chart/types';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
   // ── Per-instance uid for SVG <defs> ids ────────────────────────
   const uid = Math.random().toString(36).slice(2, 9);
@@ -31,6 +31,8 @@
     barRadius = DEFAULT_CHART_CORNER_RADIUS,
     barPadding = 0.25,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     minBarHeight = 2,
     margin,
     tooltipPortal = false,
@@ -341,7 +343,13 @@
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {maxHeight}
+      {minHeight}
+    >
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         <!-- Left Y-axis (index 0) -->
         <Axis

package/dist/DualAxisBarChart/properties.d.ts

@@ -91,6 +91,13 @@ export type OptionalDualAxisBarChartProperties = {
      * Passed to `ChartContainer`'s ResizeObserver sizing. Default `16/9`.
      */
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     /**
      * Custom tooltip content. Receives a `DualAxisTooltipContext` and replaces the
      * default multi-series tooltip.

package/dist/FunnelChart/FunnelChart.svelte

@@ -4,7 +4,7 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import { getColor } from '../_chart/colors';
   import { formatNumber, formatPercent } from '../_chart/format';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -17,6 +17,8 @@
     showValueLabels = true,
     valueFormat,
     aspectRatio = 16 / 9,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     radius = DEFAULT_CHART_CORNER_RADIUS,
     testId,
     classes,
@@ -219,7 +221,13 @@
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
   {:else}
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      {aspectRatio}
+      {maxHeight}
+      {minHeight}
+    >
       <g transform="translate({MARGIN_LEFT}, {MARGIN_TOP})">
         <!-- Stage bars and category labels -->
         {#each data as stage, index (index)}

package/dist/FunnelChart/properties.d.ts

@@ -55,6 +55,13 @@ export type OptionalFunnelChartProperties = {
      * Passed directly to `ChartContainer`. Default is `16 / 9`.
      */
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     /** Value for the `data-pw` attribute on the chart root element. */
     testId?: string;
     /** CSS class string applied to the chart root element. Useful for CSS-variable theming. */

package/dist/Icon/Icon.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Img from '../Img/Img.svelte';
   import type { IconProperties } from './properties';
 
   let { icon, svg, text, onclick, onkeydown, classes }: IconProperties = $props();
@@ -9,7 +10,9 @@
     <!-- eslint-disable svelte/no-at-html-tags -->
     <span class="icon-svg">{@html svg}</span>
   {:else if icon}
-    <img src={icon} alt="" />
+    <!-- Inline the SVG so currentColor strokes/fills inherit the surrounding text
+         colour; non-SVG URLs fall back to the plain <img> render automatically. -->
+    <Img inlineSvg src={icon} alt="" fallback="" />
   {/if}
   {#if typeof text === 'string' && text.length > 0}
     <div class="icon-text">{text}</div>
@@ -24,7 +27,10 @@
     align-items: center;
     cursor: pointer;
   }
-  .icon-container img {
+  /* Direct child only: the @html branch's svg lives inside .icon-svg and keeps
+     its own 100% sizing rule below. */
+  .icon-container > :global(img),
+  .icon-container > :global(svg) {
     height: var(--icon-height, 20px);
     width: var(--icon-width, 20px);
     padding: var(--icon-padding, 4px);

package/dist/LineChart/LineChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { ChartHighlightAPI } from '../_chart/highlight';
   import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
@@ -45,7 +46,7 @@
     yTickFormat,
     aspectRatio = 16 / 9,
     minHeight = 0,
-    maxHeight = Infinity,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
     tooltipSnippet,
     empty,
     highlightedIndex = null,

package/dist/Menu/Menu.svelte

@@ -249,7 +249,10 @@
           >
             {#if typeof item.icon === 'string'}
               <span class="menu-item-icon">
-                <Img src={item.icon} alt="" />
+                <!-- Inline the SVG so currentColor strokes/fills inherit the item's
+                     text colour (danger items tint their icon red, dark theme works);
+                     non-SVG URLs fall back to the plain <img> render automatically. -->
+                <Img inlineSvg src={item.icon} alt="" fallback="" />
               </span>
             {/if}
             <span class="menu-item-label">{item.label}</span>
@@ -347,7 +350,8 @@
     flex-shrink: 0;
   }
 
-  .menu-item-icon :global(img) {
+  .menu-item-icon :global(img),
+  .menu-item-icon :global(svg) {
     width: 100%;
     height: 100%;
   }

package/dist/Modal/Modal.svelte

@@ -5,6 +5,7 @@
   import OverlayAnimation from '../Animations/OverlayAnimation.svelte';
   import { createDebouncer } from '../utils';
   import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = $state(false);
@@ -162,7 +163,15 @@
                   tabindex="0"
                   data-pw={leftImageTestId}
                 >
-                  <img class="header-left-img" src={header.leftImage} alt="" />
+                  <!-- Inline SVGs so currentColor icons inherit the header text
+                       colour; non-SVG URLs fall back to a plain <img>. -->
+                  <Img
+                    inlineSvg
+                    src={header.leftImage}
+                    alt=""
+                    fallback=""
+                    classes="header-left-img"
+                  />
                 </div>
               {/if}
               {#if typeof header.text === 'string' && header.text.length > 0}
@@ -178,7 +187,13 @@
                   onkeydown={handleRightImageKeyDown}
                   data-pw={header.buttonTestId}
                 >
-                  <img class="header-right-img" src={header.rightImage} alt="" />
+                  <Img
+                    inlineSvg
+                    src={header.rightImage}
+                    alt=""
+                    fallback=""
+                    classes="header-right-img"
+                  />
                 </div>
               {/if}
             </div>
@@ -409,19 +424,22 @@
     letter-spacing: var(--modal-header-text-letter-spacing);
   }
 
-  .header-left-img,
-  .header-right-img {
+  /* The header images render through the Img component (inline svg or img), so
+     these classes ride on Img's element — match them via :global under the
+     scoped .header to keep the sizing contract. */
+  .header :global(.header-left-img),
+  .header :global(.header-right-img) {
     padding-top: var(--header-img-top-padding, 5px);
     cursor: pointer;
   }
 
-  .header-left-img {
+  .header :global(.header-left-img) {
     margin: var(--header-left-image-margin, 0px 18px 0px 0px);
     width: var(--header-left-image-width, 25px);
     height: var(--header-left-image-height, 25px);
   }
 
-  .header-right-img {
+  .header :global(.header-right-img) {
     width: var(--header-right-image-width, 25px);
     height: var(--header-right-image-height, 25px);
     padding: var(--header-right-image-padding);

package/dist/PieChart/PieChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { PieChartProperties } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
@@ -23,6 +24,8 @@
     showLegend = false,
     startAngle = -Math.PI / 2,
     aspectRatio,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
+    minHeight = 0,
     valueFormat,
     tooltipSnippet,
     center,
@@ -221,6 +224,8 @@
       bind:width={chartWidth}
       bind:height={chartHeight}
       aspectRatio={effectiveAspectRatio}
+      {maxHeight}
+      {minHeight}
     >
       <g transform="translate({cx}, {cy})">
         {#each slices as slice (slice.index)}

package/dist/PieChart/properties.d.ts

@@ -18,6 +18,13 @@ export type OptionalPieChartProperties = {
     showLegend?: boolean;
     startAngle?: number;
     aspectRatio?: number;
+    /**
+     * Upper bound (px) on the rendered chart height, so the aspect-ratio-derived height
+     * can't balloon on wide surfaces. Defaults to `Infinity` (uncapped).
+     */
+    maxHeight?: number;
+    /** Lower bound (px) on the rendered chart height (defaults to `0`). */
+    minHeight?: number;
     valueFormat?: (value: number) => string;
     tooltipSnippet?: Snippet<[PieChartSlice, number]>;
     center?: Snippet;

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,7 +5,7 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
-  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -20,7 +20,7 @@
     showLabels = true,
     aspectRatio = 16 / 9,
     radius = DEFAULT_CHART_CORNER_RADIUS,
-    maxHeight = Infinity,
+    maxHeight = DEFAULT_CHART_MAX_HEIGHT,
     valueFormat,
     tooltipSnippet,
     empty,

package/dist/StatCard/StatCard.svelte

@@ -100,7 +100,16 @@
               position={tooltip.position ?? 'top'}
               testId={tooltip.testId}
             >
-              <div class="statcard-title statcard-title-tooltip">{title}</div>
+              <span class="statcard-title-tooltip-trigger">
+                <span class="statcard-title statcard-title-tooltip">{title}</span>
+                <span class="statcard-tooltip-icon" aria-hidden="true">
+                  <svg viewBox="0 0 16 16" fill="none">
+                    <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2" />
+                    <rect x="7.25" y="6.9" width="1.5" height="4.1" rx="0.75" fill="currentColor" />
+                    <circle cx="8" cy="4.8" r="0.9" fill="currentColor" />
+                  </svg>
+                </span>
+              </span>
             </Tooltip>
           {:else}
             <div class="statcard-title">{title}</div>
@@ -262,10 +271,15 @@
     flex-shrink: 0;
   }
 
-  /* Transparent wrapper: keeps the checkbox in the event path (to stop bubbling to
-     the card action) without altering the header layout. */
+  /* Wrapper keeps the checkbox in the event path (to stop bubbling to the card
+     action). `margin-left: auto` pushes it to the header's right edge so the title
+     stays left and the checkbox reads as a right-aligned control. (A previous
+     `display: contents` here removed the box, which silently defeated the flex
+     alignment.) */
   .statcard-header-checkbox {
-    display: contents;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
   }
 
   .statcard-title {
@@ -278,12 +292,38 @@
     text-overflow: ellipsis;
   }
 
+  .statcard-title-tooltip-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--statcard-tooltip-icon-gap, 4px);
+    min-width: 0;
+  }
+
   .statcard-title-tooltip {
     cursor: default;
-    text-decoration: underline dotted;
+    /* Default surface (Euler) uses the ⓘ icon as the tooltip affordance, so the
+       title carries no underline. The Shopify theme flips both tokens — dotted
+       underline on, icon off — via its own stylesheet. */
+    text-decoration: var(--statcard-title-tooltip-decoration, none);
     text-underline-offset: 2px;
   }
 
+  .statcard-tooltip-icon {
+    display: var(--statcard-tooltip-icon-display, inline-flex);
+    align-items: center;
+    justify-content: center;
+    width: var(--statcard-tooltip-icon-size, 14px);
+    height: var(--statcard-tooltip-icon-size, 14px);
+    flex-shrink: 0;
+    color: var(--statcard-tooltip-icon-color, currentColor);
+    cursor: default;
+  }
+
+  .statcard-tooltip-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
   .statcard-value-row {
     display: flex;
     align-items: var(--statcard-value-row-align, baseline);

package/dist/Table/Table.svelte

@@ -121,6 +121,15 @@
       if (typeof valueA === 'number' && typeof valueB === 'number') {
         return direction === 'asc' ? valueA - valueB : valueB - valueA;
       } else if (typeof valueA === 'string' && typeof valueB === 'string') {
+        // Separator-formatted numeric strings (e.g. "1,11,600") must sort by their
+        // numeric value, not lexicographically; anything unparseable falls back to
+        // locale comparison. Empty strings stay in the locale branch so they are not
+        // coerced to 0.
+        const numericA = valueA.trim() === '' ? NaN : Number(valueA.replace(/,/g, ''));
+        const numericB = valueB.trim() === '' ? NaN : Number(valueB.replace(/,/g, ''));
+        if (Number.isFinite(numericA) && Number.isFinite(numericB)) {
+          return direction === 'asc' ? numericA - numericB : numericB - numericA;
+        }
         return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
       } else if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
         return direction === 'asc'

package/dist/Toast/Toast.svelte

@@ -120,7 +120,7 @@
   >
     {#if typeof leftIcon === 'string' && leftIcon.length > 0}
       <div class="toast-icon-wrapper">
-        <Img src={leftIcon} alt="" />
+        <Img inlineSvg src={leftIcon} alt="" fallback="" />
       </div>
     {/if}
 
@@ -149,7 +149,7 @@
         }}
         data-pw={closeIconTestId}
       >
-        <Img src={rightIcon} alt="Close" />
+        <Img inlineSvg src={rightIcon} alt="Close" fallback="" />
       </div>
     {/if}
   </div>

package/dist/_chart/ChartTooltip.svelte

@@ -2,10 +2,47 @@
   import type { ChartTooltipProperties } from './types';
 
   let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
+
+  const OFFSET = 12;
+
+  let tooltipEl = $state<HTMLDivElement | null>(null);
+  let tooltipWidth = $state(0);
+  let tooltipHeight = $state(0);
+
+  // Clamp against the positioned chart container so the tooltip never spills past
+  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
+  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
+  const containerHeight = $derived(
+    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+  );
+
+  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
+  const left = $derived.by(() => {
+    let value = mouseX + OFFSET;
+    if (value + tooltipWidth > containerWidth) {
+      value = mouseX - tooltipWidth - OFFSET;
+    }
+    return Math.max(0, value);
+  });
+
+  // Vertical: keep the tooltip within the container's top and bottom edges.
+  const top = $derived.by(() => {
+    let value = mouseY - OFFSET;
+    if (value + tooltipHeight > containerHeight) {
+      value = containerHeight - tooltipHeight;
+    }
+    return Math.max(0, value);
+  });
 </script>
 
 {#if data !== null}
-  <div class="chart-tooltip {classes ?? ''}" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+  <div
+    bind:this={tooltipEl}
+    bind:clientWidth={tooltipWidth}
+    bind:clientHeight={tooltipHeight}
+    class="chart-tooltip {classes ?? ''}"
+    style="left: {left}px; top: {top}px;"
+  >
     {#if typeof customSnippet === 'function'}
       {@render customSnippet(data)}
     {:else}

package/dist/_chart/types.d.ts

@@ -10,6 +10,14 @@ import type { BarChartDataPoint } from '../BarChart/properties';
  * *changed* `--radius` should pass the corresponding radius prop explicitly.
  */
 export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
+/**
+ * Default upper bound (px) on a chart's rendered height. Chart height is derived
+ * from width via `aspectRatio`, so on a wide surface (e.g. a full-width dashboard
+ * panel) a 16/9 chart can balloon past 700px. This default keeps charts from ever
+ * rendering absurdly tall; a call site that genuinely needs a taller chart passes
+ * an explicit `maxHeight` to override it.
+ */
+export declare const DEFAULT_CHART_MAX_HEIGHT = 420;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -9,3 +9,11 @@
  * *changed* `--radius` should pass the corresponding radius prop explicitly.
  */
 export const DEFAULT_CHART_CORNER_RADIUS = 4;
+/**
+ * Default upper bound (px) on a chart's rendered height. Chart height is derived
+ * from width via `aspectRatio`, so on a wide surface (e.g. a full-width dashboard
+ * panel) a 16/9 chart can balloon past 700px. This default keeps charts from ever
+ * rendering absurdly tall; a call site that genuinely needs a taller chart passes
+ * an explicit `maxHeight` to override it.
+ */
+export const DEFAULT_CHART_MAX_HEIGHT = 420;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.80.4",
+  "version": "2.80.6",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",