npm - @apipass/design-system - Versions diffs - 4.2.1 → 4.2.2 - Mend

@apipass/design-system 4.2.1 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=32,s={top:16,right:16,bottom:24,left:56},b=6,u=.15,p={thin:1,normal:2,thick:4},f="solid",L="normal";function m(o){const{valueFormatter:l}=o;if(l)return t=>t===null?"":l(t)}function h(o){const{showValueLabels:l,theme:t}=o,i=m(o);return{show:l,position:"top",color:t.labelColor,formatter:i?e=>i(e.value[1]):void 0}}function S(o,l,t){const i=o.points.map(r=>[r.timestamp,r.value]),e=h(l);return l.displayType==="bar"?{id:o.id,name:o.name,type:"bar",data:i,itemStyle:{color:t},label:e}:{id:o.id,name:o.name,type:"line",data:i,showSymbol:l.showSymbols,symbolSize:b,lineStyle:{color:t,type:l.line.style??f,width:p[l.line.width??L]},itemStyle:{color:t},areaStyle:l.displayType==="area"?{color:t,opacity:u}:void 0,label:e}}function C(o){const{series:l,legend:t,yAxis:i,theme:e,seriesColorOverrides:r}=o,a=t!=="none"&&l.length>0,n=m(o);return{animation:!1,color:e.seriesColors,textStyle:{fontFamily:e.fontFamily,color:e.labelColor},grid:{...s,top:a?s.top+d:s.top,containLabel:!1},legend:a?{type:"scroll",top:0,left:0,icon:"roundRect",itemHeight:8,itemWidth:12,textStyle:{color:e.labelColor}}:{show:!1},tooltip:{trigger:"axis",backgroundColor:e.tooltipBackgroundColor,borderColor:e.tooltipBorderColor,textStyle:{color:e.labelColor},valueFormatter:n},xAxis:{type:"time",axisLine:{lineStyle:{color:e.axisLineColor}},axisTick:{show:!1},axisLabel:{color:e.labelColor,hideOverlap:!0},splitLine:{show:!1}},yAxis:{type:i.scale==="log"?"log":"value",scale:i.includeZero!==!0,min:i.min,max:i.max,axisLine:{show:!1},axisLabel:{color:e.labelColor,formatter:n},splitLine:{lineStyle:{color:e.splitLineColor}}},series:l.map((c,y)=>S(c,o,r[c.id]??e.seriesColors[y%e.seriesColors.length]))}}exports.buildTimeSeriesOption=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=32,n={top:16,right:16,bottom:24,left:56},f=6,y=.15,L={thin:1,normal:2,thick:4},g="solid",b="normal",h=new Intl.DateTimeFormat(void 0,{year:"numeric"}),p=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),S=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),E=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function T(o){const e=new Date(o);return e.getSeconds()!==0||e.getMilliseconds()!==0?E.format(e):e.getHours()!==0||e.getMinutes()!==0?S.format(e):e.getMonth()===0&&e.getDate()===1?h.format(e):p.format(e)}function c(o){const{valueFormatter:e}=o;if(e)return i=>i===null?"":e(i)}function C(o){const{showValueLabels:e,theme:i}=o,l=c(o);return{show:e,position:"top",color:i.labelColor,formatter:l?t=>l(t.value[1]):void 0}}function x(o,e,i){const l=o.points.map(r=>[r.timestamp,r.value]),t=C(e);return e.displayType==="bar"?{id:o.id,name:o.name,type:"bar",data:l,itemStyle:{color:i},label:t}:{id:o.id,name:o.name,type:"line",data:l,showSymbol:e.showSymbols,symbolSize:f,lineStyle:{color:i,type:e.line.style??g,width:L[e.line.width??b]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:y}:void 0,label:t}}function _(o){const{series:e,legend:i,yAxis:l,theme:t,seriesColorOverrides:r}=o,s=i!=="none"&&e.length>0,a=c(o);return{animation:!1,color:t.seriesColors,textStyle:{fontFamily:t.fontFamily,color:t.labelColor},grid:{...n,top:s?n.top+u:n.top,containLabel:!1},legend:s?{type:"scroll",top:0,left:0,icon:"roundRect",itemHeight:8,itemWidth:12,textStyle:{color:t.labelColor}}:{show:!1},tooltip:{trigger:"axis",backgroundColor:t.tooltipBackgroundColor,borderColor:t.tooltipBorderColor,textStyle:{color:t.labelColor},valueFormatter:a},xAxis:{type:"time",axisLine:{lineStyle:{color:t.axisLineColor}},axisTick:{show:!1},axisLabel:{color:t.labelColor,hideOverlap:!0,formatter:T},splitLine:{show:!1}},yAxis:{type:l.scale==="log"?"log":"value",scale:l.includeZero!==!0,min:l.min,max:l.max,axisLine:{show:!1},axisLabel:{color:t.labelColor,formatter:a},splitLine:{lineStyle:{color:t.splitLineColor}}},series:e.map((m,d)=>x(m,o,r[m.id]??t.seriesColors[d%t.seriesColors.length]))}}exports.buildTimeSeriesOption=_;
 //# sourceMappingURL=time-series-option.cjs.map

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number \| null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" \| \"bar\" \| \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" \| \"normal\" \| \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" \| \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" \| \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number \| null) => string) \| undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number \| null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number \| null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number \| null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
1	+ {"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number \| null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" \| \"bar\" \| \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" \| \"normal\" \| \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" \| \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" \| \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n day: \"2-digit\",\n month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n const instant: Date = new Date(timestamp);\n if (instant.getSeconds() !== 0 \|\| instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n if (instant.getHours() !== 0 \|\| instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number \| null) => string) \| undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number \| null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number \| null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number \| null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js CHANGED Viewed

@@ -1,88 +1,104 @@
-const s = { top: 16, right: 16, bottom: 24, left: 56 }, d = 6, b = 0.15, p = { thin: 1, normal: 2, thick: 4 }, L = "solid", f = "normal";
-function m(o) {
-  const { valueFormatter: l } = o;
-  if (l)
-    return (t) => t === null ? "" : l(t);
+const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { thin: 1, normal: 2, thick: 4 }, L = "solid", g = "normal", h = new Intl.DateTimeFormat(void 0, { year: "numeric" }), E = new Intl.DateTimeFormat(void 0, {
+  day: "2-digit",
+  month: "2-digit"
+}), b = new Intl.DateTimeFormat(void 0, {
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: !1
+}), p = new Intl.DateTimeFormat(void 0, {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: !1
+});
+function S(t) {
+  const e = new Date(t);
+  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? p.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? b.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? h.format(e) : E.format(e);
 }
-function h(o) {
-  const { showValueLabels: l, theme: t } = o, i = m(o);
+function c(t) {
+  const { valueFormatter: e } = t;
+  if (e)
+    return (i) => i === null ? "" : e(i);
+}
+function T(t) {
+  const { showValueLabels: e, theme: i } = t, l = c(t);
   return {
-    show: l,
+    show: e,
     position: "top",
-    color: t.labelColor,
-    formatter: i ? (e) => i(e.value[1]) : void 0
+    color: i.labelColor,
+    formatter: l ? (o) => l(o.value[1]) : void 0
   };
 }
-function u(o, l, t) {
-  const i = o.points.map((r) => [
+function _(t, e, i) {
+  const l = t.points.map((r) => [
     r.timestamp,
     r.value
-  ]), e = h(l);
-  return l.displayType === "bar" ? { id: o.id, name: o.name, type: "bar", data: i, itemStyle: { color: t }, label: e } : {
-    id: o.id,
-    name: o.name,
+  ]), o = T(e);
+  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: l, itemStyle: { color: i }, label: o } : {
+    id: t.id,
+    name: t.name,
     type: "line",
-    data: i,
-    showSymbol: l.showSymbols,
-    symbolSize: d,
+    data: l,
+    showSymbol: e.showSymbols,
+    symbolSize: u,
     lineStyle: {
-      color: t,
-      type: l.line.style ?? L,
-      width: p[l.line.width ?? f]
+      color: i,
+      type: e.line.style ?? L,
+      width: y[e.line.width ?? g]
     },
-    itemStyle: { color: t },
-    areaStyle: l.displayType === "area" ? { color: t, opacity: b } : void 0,
-    label: e
+    itemStyle: { color: i },
+    areaStyle: e.displayType === "area" ? { color: i, opacity: f } : void 0,
+    label: o
   };
 }
-function x(o) {
-  const { series: l, legend: t, yAxis: i, theme: e, seriesColorOverrides: r } = o, a = t !== "none" && l.length > 0, n = m(o);
+function x(t) {
+  const { series: e, legend: i, yAxis: l, theme: o, seriesColorOverrides: r } = t, s = i !== "none" && e.length > 0, a = c(t);
   return {
     animation: !1,
-    color: e.seriesColors,
-    textStyle: { fontFamily: e.fontFamily, color: e.labelColor },
+    color: o.seriesColors,
+    textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
     grid: {
-      ...s,
-      top: a ? s.top + 32 : s.top,
+      ...n,
+      top: s ? n.top + 32 : n.top,
       containLabel: !1
     },
-    legend: a ? {
+    legend: s ? {
       type: "scroll",
       top: 0,
       left: 0,
       icon: "roundRect",
       itemHeight: 8,
       itemWidth: 12,
-      textStyle: { color: e.labelColor }
+      textStyle: { color: o.labelColor }
     } : { show: !1 },
     tooltip: {
       trigger: "axis",
-      backgroundColor: e.tooltipBackgroundColor,
-      borderColor: e.tooltipBorderColor,
-      textStyle: { color: e.labelColor },
-      valueFormatter: n
+      backgroundColor: o.tooltipBackgroundColor,
+      borderColor: o.tooltipBorderColor,
+      textStyle: { color: o.labelColor },
+      valueFormatter: a
     },
     xAxis: {
       type: "time",
-      axisLine: { lineStyle: { color: e.axisLineColor } },
+      axisLine: { lineStyle: { color: o.axisLineColor } },
       axisTick: { show: !1 },
-      axisLabel: { color: e.labelColor, hideOverlap: !0 },
+      axisLabel: { color: o.labelColor, hideOverlap: !0, formatter: S },
       splitLine: { show: !1 }
     },
     yAxis: {
-      type: i.scale === "log" ? "log" : "value",
-      scale: i.includeZero !== !0,
-      min: i.min,
-      max: i.max,
+      type: l.scale === "log" ? "log" : "value",
+      scale: l.includeZero !== !0,
+      min: l.min,
+      max: l.max,
       axisLine: { show: !1 },
-      axisLabel: { color: e.labelColor, formatter: n },
-      splitLine: { lineStyle: { color: e.splitLineColor } }
+      axisLabel: { color: o.labelColor, formatter: a },
+      splitLine: { lineStyle: { color: o.splitLineColor } }
     },
-    series: l.map(
-      (c, y) => u(
-        c,
-        o,
-        r[c.id] ?? e.seriesColors[y % e.seriesColors.length]
+    series: e.map(
+      (m, d) => _(
+        m,
+        t,
+        r[m.id] ?? o.seriesColors[d % o.seriesColors.length]
       )
     )
   };

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number \| null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" \| \"bar\" \| \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" \| \"normal\" \| \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" \| \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" \| \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number \| null) => string) \| undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number \| null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number \| null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number \| null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
1	+ {"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n timestamp: number;\n value: number \| null;\n}\n\nexport interface TimeSeriesData {\n id: string;\n name: string;\n points: TimeSeriesPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" \| \"bar\" \| \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" \| \"normal\" \| \"thick\";\n\nexport interface TimeSeriesLineOptions {\n style?: TimeSeriesLineStyle;\n width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" \| \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" \| \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n scale?: TimeSeriesAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n series: TimeSeriesData[];\n displayType: TimeSeriesDisplayType;\n legend: TimeSeriesLegendMode;\n line: TimeSeriesLineOptions;\n yAxis: TimeSeriesYAxisOptions;\n theme: ChartTheme;\n showSymbols: boolean;\n showValueLabels: boolean;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n day: \"2-digit\",\n month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n const instant: Date = new Date(timestamp);\n if (instant.getSeconds() !== 0 \|\| instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n if (instant.getHours() !== 0 \|\| instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n input: TimeSeriesOptionInput,\n): ((value: number \| null) => string) \| undefined {\n const { valueFormatter } = input;\n if (!valueFormatter) return undefined;\n return (value: number \| null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { showValueLabels, theme } = input;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n return {\n show: showValueLabels,\n position: \"top\",\n color: theme.labelColor,\n formatter: formatValue\n ? (params: { value: [number, number \| null] }) => formatValue(params.value[1])\n : undefined,\n };\n}\n\nfunction seriesEntry(\n data: TimeSeriesData,\n input: TimeSeriesOptionInput,\n color: string,\n): Record<string, unknown> {\n const values: Array<[number, number \| null]> = data.points.map((point: TimeSeriesPoint) => [\n point.timestamp,\n point.value,\n ]);\n const label: Record<string, unknown> = seriesLabel(input);\n\n if (input.displayType === \"bar\") {\n return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n }\n\n return {\n id: data.id,\n name: data.name,\n type: \"line\",\n data: values,\n showSymbol: input.showSymbols,\n symbolSize: SYMBOL_SIZE_PX,\n lineStyle: {\n color,\n type: input.line.style ?? DEFAULT_LINE_STYLE,\n width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n },\n itemStyle: { color },\n areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n label,\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const formatValue: ((value: number \| null) => string) \| undefined = nullSafeValueFormatter(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: false,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: {\n type: \"time\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n splitLine: { show: false },\n },\n yAxis: {\n type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n scale: yAxis.includeZero !== true,\n min: yAxis.min,\n max: yAxis.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n },\n series: series.map((data: TimeSeriesData, index: number) =>\n seriesEntry(\n data,\n input,\n seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n ),\n ),\n };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"AAqDA,MAAMA,IAAsB,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA,GAE9DC,IAAyB,GAEzBC,IAAuB,MAEvBC,IAAqD,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,EAAA,GAElFC,IAA0C,SAE1CC,IAA0C,UAW1CC,IAAkC,IAAI,KAAK,eAAe,QAAW,EAAE,MAAM,WAAW,GAExFC,IAAiC,IAAI,KAAK,eAAe,QAAW;AAAA,EACxE,KAAK;AAAA,EACL,OAAO;AACT,CAAC,GAEKC,IAAoC,IAAI,KAAK,eAAe,QAAW;AAAA,EAC3E,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC,GAEKC,IAAoC,IAAI,KAAK,eAAe,QAAW;AAAA,EAC3E,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC;AAED,SAASC,EAAcC,GAA2B;AAChD,QAAMC,IAAgB,IAAI,KAAKD,CAAS;AACxC,SAAIC,EAAQ,iBAAiB,KAAKA,EAAQ,gBAAA,MAAsB,IAAUH,EAAa,OAAOG,CAAO,IACjGA,EAAQ,eAAe,KAAKA,EAAQ,WAAA,MAAiB,IAAUJ,EAAa,OAAOI,CAAO,IAE1FA,EAAQ,eAAe,KAAKA,EAAQ,QAAA,MAAc,IAAUN,EAAW,OAAOM,CAAO,IAClFL,EAAU,OAAOK,CAAO;AACjC;AAKA,SAASC,EACPC,GACgD;AAChD,QAAM,EAAE,gBAAAC,MAAmBD;AAC3B,MAAKC;AACL,WAAO,CAACC,MAA0BA,MAAU,OAAO,KAAKD,EAAeC,CAAK;AAC9E;AAEA,SAASC,EAAYH,GAAuD;AAC1E,QAAM,EAAE,iBAAAI,GAAiB,OAAAC,EAAA,IAAUL,GAC7BM,IAA8DP,EAAuBC,CAAK;AAChG,SAAO;AAAA,IACL,MAAMI;AAAA,IACN,UAAU;AAAA,IACV,OAAOC,EAAM;AAAA,IACb,WAAWC,IACP,CAACC,MAA+CD,EAAYC,EAAO,MAAM,CAAC,CAAC,IAC3E;AAAA,EAAA;AAER;AAEA,SAASC,EACPC,GACAT,GACAU,GACyB;AACzB,QAAMC,IAAyCF,EAAK,OAAO,IAAI,CAACG,MAA2B;AAAA,IACzFA,EAAM;AAAA,IACNA,EAAM;AAAA,EAAA,CACP,GACKC,IAAiCV,EAAYH,CAAK;AAExD,SAAIA,EAAM,gBAAgB,QACjB,EAAE,IAAIS,EAAK,IAAI,MAAMA,EAAK,MAAM,MAAM,OAAO,MAAME,GAAQ,WAAW,EAAE,OAAAD,EAAA,GAAS,OAAAG,EAAA,IAGnF;AAAA,IACL,IAAIJ,EAAK;AAAA,IACT,MAAMA,EAAK;AAAA,IACX,MAAM;AAAA,IACN,MAAME;AAAA,IACN,YAAYX,EAAM;AAAA,IAClB,YAAYb;AAAA,IACZ,WAAW;AAAA,MACT,OAAAuB;AAAA,MACA,MAAMV,EAAM,KAAK,SAASV;AAAA,MAC1B,OAAOD,EAAcW,EAAM,KAAK,SAAST,CAAkB;AAAA,IAAA;AAAA,IAE7D,WAAW,EAAE,OAAAmB,EAAA;AAAA,IACb,WAAWV,EAAM,gBAAgB,SAAS,EAAE,OAAAU,GAAO,SAAStB,MAAiB;AAAA,IAC7E,OAAAyB;AAAA,EAAA;AAEJ;AAIO,SAASC,EAAsBd,GAAuD;AAC3F,QAAM,EAAE,QAAAe,GAAQ,QAAAC,GAAQ,OAAAC,GAAO,OAAAZ,GAAO,sBAAAa,MAAyBlB,GACzDmB,IAA2BH,MAAW,UAAUD,EAAO,SAAS,GAChET,IAA8DP,EAAuBC,CAAK;AAEhG,SAAO;AAAA,IACL,WAAW;AAAA,IACX,OAAOK,EAAM;AAAA,IACb,WAAW,EAAE,YAAYA,EAAM,YAAY,OAAOA,EAAM,WAAA;AAAA,IACxD,MAAM;AAAA,MACJ,GAAGnB;AAAA,MACH,KAAKiC,IAAkBjC,EAAoB,MAAM,KAAmBA,EAAoB;AAAA,MACxF,cAAc;AAAA,IAAA;AAAA,IAEhB,QAAQiC,IACJ;AAAA,MACE,MAAM;AAAA,MACN,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW,EAAE,OAAOd,EAAM,WAAA;AAAA,IAAW,IAEvC,EAAE,MAAM,GAAA;AAAA,IACZ,SAAS;AAAA,MACP,SAAS;AAAA,MACT,iBAAiBA,EAAM;AAAA,MACvB,aAAaA,EAAM;AAAA,MACnB,WAAW,EAAE,OAAOA,EAAM,WAAA;AAAA,MAC1B,gBAAgBC;AAAA,IAAA;AAAA,IAElB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU,EAAE,WAAW,EAAE,OAAOD,EAAM,gBAAc;AAAA,MACpD,UAAU,EAAE,MAAM,GAAA;AAAA,MAClB,WAAW,EAAE,OAAOA,EAAM,YAAY,aAAa,IAAM,WAAWT,EAAA;AAAA,MACpE,WAAW,EAAE,MAAM,GAAA;AAAA,IAAM;AAAA,IAE3B,OAAO;AAAA,MACL,MAAMqB,EAAM,UAAU,QAAQ,QAAQ;AAAA,MACtC,OAAOA,EAAM,gBAAgB;AAAA,MAC7B,KAAKA,EAAM;AAAA,MACX,KAAKA,EAAM;AAAA,MACX,UAAU,EAAE,MAAM,GAAA;AAAA,MAClB,WAAW,EAAE,OAAOZ,EAAM,YAAY,WAAWC,EAAA;AAAA,MACjD,WAAW,EAAE,WAAW,EAAE,OAAOD,EAAM,iBAAe;AAAA,IAAE;AAAA,IAE1D,QAAQU,EAAO;AAAA,MAAI,CAACN,GAAsBW,MACxCZ;AAAA,QACEC;AAAA,QACAT;AAAA,QACAkB,EAAqBT,EAAK,EAAE,KAAKJ,EAAM,aAAae,IAAQf,EAAM,aAAa,MAAM;AAAA,MAAA;AAAA,IACvF;AAAA,EACF;AAEJ;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [