@levi-gemcommerce/analytics 2.0.5-dev.1 → 2.1.0-test.0

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useChartContext, useTheme, paddingStringToObject, ChartState } from '@shopify/polaris-viz-core';
+import { useSprings, animated } from '@react-spring/web';
+import { useEffect, Fragment } from 'react';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+
+const BRICK_HEIGHT = 12;
+const BRICK_WIDTH = 32;
+const INITIAL_DELAY = 200;
+const NUMBER_OF_BRICKS = 5;
+function GridSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { chartContainer: { padding }, grid: { color: gridColor }, } = useTheme();
+    const { paddingLeft, paddingBottom, paddingTop } = paddingStringToObject(padding);
+    const drawableHeight = height - paddingBottom - paddingTop;
+    const ticks = new Array(NUMBER_OF_BRICKS).fill(null).map((_, index) => ({
+        y: index * ((drawableHeight - BRICK_HEIGHT) / (NUMBER_OF_BRICKS - 1)),
+    }));
+    const [springs, animation] = useSprings(ticks.length, () => ({
+        opacity: 1,
+        config: { mass: 1, tension: 350, friction: 22, velocity: 0 },
+        default: {
+            immediate: false,
+        },
+        from: {
+            transform: 'translate(0px,0px) rotate(0deg)',
+        },
+    }));
+    useEffect(() => {
+        const lastTickYPosition = ticks[NUMBER_OF_BRICKS - 1].y;
+        const distanceToFloor = (index) => lastTickYPosition - ticks[index].y;
+        if (state === ChartState.Error) {
+            animation.start((index) => ({
+                to: async (next) => {
+                    switch (index) {
+                        case 0:
+                            await next({
+                                delay: INITIAL_DELAY + 300,
+                                config: { duration: 500 },
+                                transform: `translate(10px,${distanceToFloor(index) - BRICK_HEIGHT * 4.6}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { duration: 150 },
+                                transform: `translate(40px,${distanceToFloor(index) - BRICK_HEIGHT * 2}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { tension: 400, friction: 40 },
+                                transform: `translate(60px,${distanceToFloor(index) - BRICK_HEIGHT * -0.1}px) rotate(0eg)`,
+                            });
+                            break;
+                        case 1:
+                            await next({
+                                delay: INITIAL_DELAY + 100,
+                                config: { duration: 80 },
+                                transform: `translate(-1px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-3deg)`,
+                            });
+                            await next({
+                                config: { duration: 90 },
+                                transform: `translate(-6px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-13deg)`,
+                            });
+                            await next({
+                                config: { duration: 390 },
+                                transform: `translate(-4px,${distanceToFloor(index) - BRICK_HEIGHT * 1.7}px) rotate(-23deg)`,
+                            });
+                            await next({
+                                delay: 150,
+                                config: { tension: 500, friction: 100, velocity: 0.03 },
+                                transform: `translate(-10px,${distanceToFloor(index) - BRICK_HEIGHT * 1.1}px) rotate(-40deg)`,
+                            });
+                            break;
+                        case 2:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY + 150,
+                                transform: `translate(0px, 0px) rotate(-105deg)`,
+                            });
+                            await next({
+                                config: { duration: 200 },
+                                transform: `translate(-15px,${distanceToFloor(index) - BRICK_HEIGHT * 2.5}px) rotate(-157deg)`,
+                            });
+                            await next({
+                                delay: 300,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(-3px,${distanceToFloor(index) - BRICK_HEIGHT * 2.1}px) rotate(-150deg)`,
+                            });
+                            break;
+                        case 3:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY,
+                                transform: `translate(0px, 0px) rotate(105deg)`,
+                            });
+                            await next({
+                                delay: 0,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(8px,${distanceToFloor(index) - BRICK_HEIGHT * 2.4}px) rotate(138deg)`,
+                            });
+                            break;
+                    }
+                },
+            }));
+        }
+    }, [animation, state, ticks]);
+    return (jsx(Fragment, { children: jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [springs.map((style, index) => {
+                    const y = ticks[index].y;
+                    return (jsxs("g", { children: [jsx(animated.rect, { style: {
+                                    ...style,
+                                    transformOrigin: `${index === 2 ? BRICK_WIDTH + paddingLeft : paddingLeft}px ${ticks[index].y + BRICK_HEIGHT}px`,
+                                }, x: paddingLeft, y: ticks[index].y, width: BRICK_WIDTH, height: BRICK_HEIGHT, ry: 2, rx: 2, fill: gridColor }), jsx("rect", { x: 0, y: y + 5, width: width, height: 1, fill: gridColor })] }, index));
+                }), state === ChartState.Error && (jsx(ErrorText, { errorText: errorText, width: width, height: height }))] }) }));
+}
+
+export { GridSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.mjs

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useChartContext, useTheme, paddingStringToObject, ChartState } from '@shopify/polaris-viz-core';
+import { useSprings, animated } from '@react-spring/web';
+import { useEffect, Fragment } from 'react';
+import { ErrorText } from '../ErrorText/ErrorText.mjs';
+
+const BRICK_HEIGHT = 12;
+const BRICK_WIDTH = 32;
+const INITIAL_DELAY = 200;
+const NUMBER_OF_BRICKS = 5;
+function GridSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { chartContainer: { padding }, grid: { color: gridColor }, } = useTheme();
+    const { paddingLeft, paddingBottom, paddingTop } = paddingStringToObject(padding);
+    const drawableHeight = height - paddingBottom - paddingTop;
+    const ticks = new Array(NUMBER_OF_BRICKS).fill(null).map((_, index) => ({
+        y: index * ((drawableHeight - BRICK_HEIGHT) / (NUMBER_OF_BRICKS - 1)),
+    }));
+    const [springs, animation] = useSprings(ticks.length, () => ({
+        opacity: 1,
+        config: { mass: 1, tension: 350, friction: 22, velocity: 0 },
+        default: {
+            immediate: false,
+        },
+        from: {
+            transform: 'translate(0px,0px) rotate(0deg)',
+        },
+    }));
+    useEffect(() => {
+        const lastTickYPosition = ticks[NUMBER_OF_BRICKS - 1].y;
+        const distanceToFloor = (index) => lastTickYPosition - ticks[index].y;
+        if (state === ChartState.Error) {
+            animation.start((index) => ({
+                to: async (next) => {
+                    switch (index) {
+                        case 0:
+                            await next({
+                                delay: INITIAL_DELAY + 300,
+                                config: { duration: 500 },
+                                transform: `translate(10px,${distanceToFloor(index) - BRICK_HEIGHT * 4.6}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { duration: 150 },
+                                transform: `translate(40px,${distanceToFloor(index) - BRICK_HEIGHT * 2}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { tension: 400, friction: 40 },
+                                transform: `translate(60px,${distanceToFloor(index) - BRICK_HEIGHT * -0.1}px) rotate(0eg)`,
+                            });
+                            break;
+                        case 1:
+                            await next({
+                                delay: INITIAL_DELAY + 100,
+                                config: { duration: 80 },
+                                transform: `translate(-1px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-3deg)`,
+                            });
+                            await next({
+                                config: { duration: 90 },
+                                transform: `translate(-6px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-13deg)`,
+                            });
+                            await next({
+                                config: { duration: 390 },
+                                transform: `translate(-4px,${distanceToFloor(index) - BRICK_HEIGHT * 1.7}px) rotate(-23deg)`,
+                            });
+                            await next({
+                                delay: 150,
+                                config: { tension: 500, friction: 100, velocity: 0.03 },
+                                transform: `translate(-10px,${distanceToFloor(index) - BRICK_HEIGHT * 1.1}px) rotate(-40deg)`,
+                            });
+                            break;
+                        case 2:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY + 150,
+                                transform: `translate(0px, 0px) rotate(-105deg)`,
+                            });
+                            await next({
+                                config: { duration: 200 },
+                                transform: `translate(-15px,${distanceToFloor(index) - BRICK_HEIGHT * 2.5}px) rotate(-157deg)`,
+                            });
+                            await next({
+                                delay: 300,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(-3px,${distanceToFloor(index) - BRICK_HEIGHT * 2.1}px) rotate(-150deg)`,
+                            });
+                            break;
+                        case 3:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY,
+                                transform: `translate(0px, 0px) rotate(105deg)`,
+                            });
+                            await next({
+                                delay: 0,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(8px,${distanceToFloor(index) - BRICK_HEIGHT * 2.4}px) rotate(138deg)`,
+                            });
+                            break;
+                    }
+                },
+            }));
+        }
+    }, [animation, state, ticks]);
+    return (jsx(Fragment, { children: jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [springs.map((style, index) => {
+                    const y = ticks[index].y;
+                    return (jsxs("g", { children: [jsx(animated.rect, { style: {
+                                    ...style,
+                                    transformOrigin: `${index === 2 ? BRICK_WIDTH + paddingLeft : paddingLeft}px ${ticks[index].y + BRICK_HEIGHT}px`,
+                                }, x: paddingLeft, y: ticks[index].y, width: BRICK_WIDTH, height: BRICK_HEIGHT, ry: 2, rx: 2, fill: gridColor }), jsx("rect", { x: 0, y: y + 5, width: width, height: 1, fill: gridColor })] }, index));
+                }), state === ChartState.Error && (jsx(ErrorText, { errorText: errorText, width: width, height: height }))] }) }));
+}
+
+export { GridSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/Shimmer/Shimmer.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { changeColorOpacity, useChartContext } from '@shopify/polaris-viz-core';
+import { useRef, useEffect } from 'react';
+
+function Shimmer({ backgroundColor }) {
+    const semiTransparentBackground = changeColorOpacity(backgroundColor, 0);
+    const { containerBounds: { height, width }, } = useChartContext();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current === null)
+            return;
+        ref.current.style.setProperty('--shimmerWidth', `${width}px`);
+        ref.current.style.setProperty('--shimmerHeight', `${height}px`);
+    }, [width, height]);
+    const [min, max] = [width, height];
+    const angle = Math.asin(max / min) / (Math.PI / 180);
+    return (jsx("div", { ref: ref, className: 'Shimmer', style: {
+            backgroundImage: `linear-gradient(-${angle}deg,
+            ${semiTransparentBackground} 10%,
+            ${semiTransparentBackground} 35%,
+            ${backgroundColor} 50%,
+            ${semiTransparentBackground} 65%,
+            ${semiTransparentBackground} 100%)`,
+        } }));
+}
+
+export { Shimmer };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/Shimmer/Shimmer.mjs

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { changeColorOpacity, useChartContext } from '@shopify/polaris-viz-core';
+import { useRef, useEffect } from 'react';
+
+function Shimmer({ backgroundColor }) {
+    const semiTransparentBackground = changeColorOpacity(backgroundColor, 0);
+    const { containerBounds: { height, width }, } = useChartContext();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current === null)
+            return;
+        ref.current.style.setProperty('--shimmerWidth', `${width}px`);
+        ref.current.style.setProperty('--shimmerHeight', `${height}px`);
+    }, [width, height]);
+    const [min, max] = [width, height];
+    const angle = Math.asin(max / min) / (Math.PI / 180);
+    return (jsx("div", { ref: ref, className: 'Shimmer', style: {
+            backgroundImage: `linear-gradient(-${angle}deg,
+            ${semiTransparentBackground} 10%,
+            ${semiTransparentBackground} 35%,
+            ${backgroundColor} 50%,
+            ${semiTransparentBackground} 65%,
+            ${semiTransparentBackground} 100%)`,
+        } }));
+}
+
+export { Shimmer };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+import { Fragment } from 'react';
+import styles from './SimpleBarSkeleton.module.scss.js';
+
+function SimpleBarSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, bar: { borderRadius }, } = useTheme();
+    const id = useUniqueId('simple-bar-skeleton');
+    const BarMarkup = () => (jsx("span", { style: {
+            display: 'inline-block',
+            background: gridColor,
+            borderRadius,
+        } }));
+    return (jsxs("div", { className: styles.SimpleBarSkeleton, children: [state === ChartState.Loading && (jsx(Fragment, { children: new Array(4).fill(0).map((_, index) => (jsxs("div", { className: styles.Item, children: [jsx(BarMarkup, {}), jsx(BarMarkup, {})] }, `${id}${index}`))) })), state === ChartState.Error && (jsx("svg", { viewBox: `0 0 ${width} ${height}`, children: jsx(ErrorText, { errorText: errorText, width: width, height: height }) }))] }));
+}
+
+export { SimpleBarSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.mjs

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.mjs';
+import { Fragment } from 'react';
+import styles from './SimpleBarSkeleton.module.scss.mjs';
+
+function SimpleBarSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, bar: { borderRadius }, } = useTheme();
+    const id = useUniqueId('simple-bar-skeleton');
+    const BarMarkup = () => (jsx("span", { style: {
+            display: 'inline-block',
+            background: gridColor,
+            borderRadius,
+        } }));
+    return (jsxs("div", { className: styles.SimpleBarSkeleton, children: [state === ChartState.Loading && (jsx(Fragment, { children: new Array(4).fill(0).map((_, index) => (jsxs("div", { className: styles.Item, children: [jsx(BarMarkup, {}), jsx(BarMarkup, {})] }, `${id}${index}`))) })), state === ChartState.Error && (jsx("svg", { viewBox: `0 0 ${width} ${height}`, children: jsx(ErrorText, { errorText: errorText, width: width, height: height }) }))] }));
+}
+
+export { SimpleBarSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SimpleBarSkeleton-module_SimpleBarSkeleton__-X-Nq{display:flex;flex-direction:column;gap:40px;width:100%}.SimpleBarSkeleton-module_Item__Zr-KH{display:grid;gap:20px;grid-template-columns:20% auto;grid-template-rows:16px 40px}.SimpleBarSkeleton-module_Item__Zr-KH>:last-child{grid-column:span 2}";
+var styles = {"SimpleBarSkeleton":"SimpleBarSkeleton-module_SimpleBarSkeleton__-X-Nq","Item":"SimpleBarSkeleton-module_Item__Zr-KH"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".SimpleBarSkeleton-module_SimpleBarSkeleton__-X-Nq{display:flex;flex-direction:column;gap:40px;width:100%}.SimpleBarSkeleton-module_Item__Zr-KH{display:grid;gap:20px;grid-template-columns:20% auto;grid-template-rows:16px 40px}.SimpleBarSkeleton-module_Item__Zr-KH>:last-child{grid-column:span 2}";
+var styles = {"SimpleBarSkeleton":"SimpleBarSkeleton-module_SimpleBarSkeleton__-X-Nq","Item":"SimpleBarSkeleton-module_Item__Zr-KH"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+import { Fragment } from 'react';
+import styles from './SimpleNormalizedSkeleton.module.scss.js';
+
+const SIZE_TO_PX = {
+    small: 16,
+    medium: 36,
+    large: 56,
+};
+function SimpleNormalizedSkeleton({ errorText, showLegend, size, state }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, bar: { borderRadius }, chartContainer: { padding }, } = useTheme();
+    const id = useUniqueId('simple-bar-skeleton');
+    return (jsxs("div", { className: styles.Container, style: {
+            padding,
+        }, children: [state === ChartState.Loading && (jsxs(Fragment, { children: [showLegend && (jsx("div", { className: styles.Legend, children: new Array(3).fill(0).map((_, index) => (jsx("div", { className: styles.LegendItem, children: new Array(3).fill(0).map((_, innerIndex) => (jsx("div", { className: styles.LegendItemComponent, style: { background: gridColor } }, `${id}${index}${innerIndex}`))) }, `${id}${index}`))) })), jsx("div", { style: {
+                            background: gridColor,
+                            borderRadius,
+                            height: SIZE_TO_PX[size],
+                        } })] })), state === ChartState.Error && (jsx("svg", { viewBox: `0 0 ${width} ${height}`, children: jsx(ErrorText, { errorText: errorText, width: width, height: height }) }))] }));
+}
+
+export { SimpleNormalizedSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.mjs

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.mjs';
+import { Fragment } from 'react';
+import styles from './SimpleNormalizedSkeleton.module.scss.mjs';
+
+const SIZE_TO_PX = {
+    small: 16,
+    medium: 36,
+    large: 56,
+};
+function SimpleNormalizedSkeleton({ errorText, showLegend, size, state }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, bar: { borderRadius }, chartContainer: { padding }, } = useTheme();
+    const id = useUniqueId('simple-bar-skeleton');
+    return (jsxs("div", { className: styles.Container, style: {
+            padding,
+        }, children: [state === ChartState.Loading && (jsxs(Fragment, { children: [showLegend && (jsx("div", { className: styles.Legend, children: new Array(3).fill(0).map((_, index) => (jsx("div", { className: styles.LegendItem, children: new Array(3).fill(0).map((_, innerIndex) => (jsx("div", { className: styles.LegendItemComponent, style: { background: gridColor } }, `${id}${index}${innerIndex}`))) }, `${id}${index}`))) })), jsx("div", { style: {
+                            background: gridColor,
+                            borderRadius,
+                            height: SIZE_TO_PX[size],
+                        } })] })), state === ChartState.Error && (jsx("svg", { viewBox: `0 0 ${width} ${height}`, children: jsx(ErrorText, { errorText: errorText, width: width, height: height }) }))] }));
+}
+
+export { SimpleNormalizedSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SimpleNormalizedSkeleton-module_Container__IHcT3{display:flex}.SimpleNormalizedSkeleton-module_Legend__kHKQE{display:flex;gap:5%;height:50px;margin:14px 0;max-width:60%}.SimpleNormalizedSkeleton-module_LegendItem__6C--X{grid-gap:10px;display:block;display:grid;grid-template-columns:16px 1fr;grid-template-rows:16px;width:100%}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:first-child{height:16px;width:16px}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:nth-child(2){height:16px}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:nth-child(3){grid-column:2;height:16px;width:80%}.SimpleNormalizedSkeleton-module_LegendItemComponent__oTWMe{border-radius:2px;height:16px;width:100%}";
+var styles = {"Container":"SimpleNormalizedSkeleton-module_Container__IHcT3","Legend":"SimpleNormalizedSkeleton-module_Legend__kHKQE","LegendItem":"SimpleNormalizedSkeleton-module_LegendItem__6C--X","LegendItemComponent":"SimpleNormalizedSkeleton-module_LegendItemComponent__oTWMe"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".SimpleNormalizedSkeleton-module_Container__IHcT3{display:flex}.SimpleNormalizedSkeleton-module_Legend__kHKQE{display:flex;gap:5%;height:50px;margin:14px 0;max-width:60%}.SimpleNormalizedSkeleton-module_LegendItem__6C--X{grid-gap:10px;display:block;display:grid;grid-template-columns:16px 1fr;grid-template-rows:16px;width:100%}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:first-child{height:16px;width:16px}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:nth-child(2){height:16px}.SimpleNormalizedSkeleton-module_LegendItem__6C--X>:nth-child(3){grid-column:2;height:16px;width:80%}.SimpleNormalizedSkeleton-module_LegendItemComponent__oTWMe{border-radius:2px;height:16px;width:100%}";
+var styles = {"Container":"SimpleNormalizedSkeleton-module_Container__IHcT3","Legend":"SimpleNormalizedSkeleton-module_Legend__kHKQE","LegendItem":"SimpleNormalizedSkeleton-module_LegendItem__6C--X","LegendItemComponent":"SimpleNormalizedSkeleton-module_LegendItemComponent__oTWMe"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, ChartState, DEFAULT_BORDER_RADIUS } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+
+function SparkSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, } = useTheme();
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [state === ChartState.Loading && (jsx("rect", { x: 0, y: 0, width: width, height: height, fill: gridColor, rx: DEFAULT_BORDER_RADIUS })), state === ChartState.Error && (jsx(ErrorText, { errorText: errorText, width: width, height: height }))] }));
+}
+
+export { SparkSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.mjs

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, ChartState, DEFAULT_BORDER_RADIUS } from '@shopify/polaris-viz-core';
+import { ErrorText } from '../ErrorText/ErrorText.mjs';
+
+function SparkSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, } = useTheme();
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [state === ChartState.Loading && (jsx("rect", { x: 0, y: 0, width: width, height: height, fill: gridColor, rx: DEFAULT_BORDER_RADIUS })), state === ChartState.Error && (jsx(ErrorText, { errorText: errorText, width: width, height: height }))] }));
+}
+
+export { SparkSkeleton };

package/dist/esm/shared/charts/components/GPolarisViz/components/ConicGradientWithStops/ConicGradientWithStops.d.ts

@@ -6,4 +6,4 @@ export interface ConicGradientWithStopsProps {
     x?: number;
     y?: number;
 }
-export declare function ConicGradientWithStops({ gradient, height, width, x, y }: ConicGradientWithStopsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConicGradientWithStops({ gradient, height, width, x, y, }: ConicGradientWithStopsProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/ConicGradientWithStops/ConicGradientWithStops.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import '@shopify/polaris-viz-core';
+import { createCSSConicGradient } from '../../utilities/createCssConicGradient.js';
+
+function ConicGradientWithStops({ gradient, height, width, x = 0, y = 0, }) {
+    const conicGradientValue = createCSSConicGradient(gradient);
+    return (jsx("foreignObject", { x: x, y: y, width: width, height: height, children: jsx("div", { style: {
+                width: `${width}px`,
+                height: `${height}px`,
+                backgroundImage: conicGradientValue,
+            } }) }));
+}
+
+export { ConicGradientWithStops };

package/dist/esm/shared/charts/components/GPolarisViz/components/ConicGradientWithStops/ConicGradientWithStops.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import '@shopify/polaris-viz-core';
+import { createCSSConicGradient } from '../../utilities/createCssConicGradient.mjs';
+
+function ConicGradientWithStops({ gradient, height, width, x = 0, y = 0, }) {
+    const conicGradientValue = createCSSConicGradient(gradient);
+    return (jsx("foreignObject", { x: x, y: y, width: width, height: height, children: jsx("div", { style: {
+                width: `${width}px`,
+                height: `${height}px`,
+                backgroundImage: conicGradientValue,
+            } }) }));
+}
+
+export { ConicGradientWithStops };

package/dist/esm/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { getCSSBackgroundFromColor } from '../../utilities/getCSSBackgroundFromColor.js';
+import styles from './DefaultPreview.module.scss.js';
+
+const ANGLE = 305;
+const ICON_SIZE = 8;
+const BORDER_RADIUS = '100%';
+function DefaultPreview({ color }) {
+    const background = getCSSBackgroundFromColor(color, ANGLE);
+    return (jsx("span", { className: styles.ColorPreview, style: { background, height: ICON_SIZE, width: ICON_SIZE, borderRadius: BORDER_RADIUS } }));
+}
+
+export { DefaultPreview };

package/dist/esm/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { getCSSBackgroundFromColor } from '../../utilities/getCSSBackgroundFromColor.mjs';
+import styles from './DefaultPreview.module.scss.mjs';
+
+const ANGLE = 305;
+const ICON_SIZE = 8;
+const BORDER_RADIUS = '100%';
+function DefaultPreview({ color }) {
+    const background = getCSSBackgroundFromColor(color, ANGLE);
+    return (jsx("span", { className: styles.ColorPreview, style: { background, height: ICON_SIZE, width: ICON_SIZE, borderRadius: BORDER_RADIUS } }));
+}
+
+export { DefaultPreview };

package/dist/esm/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DefaultPreview-module_ColorPreview__yV4Ux{display:block;flex:none;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}";
+var styles = {"ColorPreview":"DefaultPreview-module_ColorPreview__yV4Ux"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".DefaultPreview-module_ColorPreview__yV4Ux{display:block;flex:none;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}";
+var styles = {"ColorPreview":"DefaultPreview-module_ColorPreview__yV4Ux"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChart/components/Label.d.ts

@@ -10,5 +10,5 @@ export interface LabelProps {
     backgroundColor?: string;
     transform: SpringValue;
 }
-export declare function Label({ label, labelWidth, labelHelper, size, color, backgroundColor, transform }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ label, labelWidth, labelHelper, size, color, backgroundColor, transform, }: LabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/Chart.d.ts

@@ -1,6 +1,6 @@
 import type { IFunnelChartColors } from '../../../GFunnelChart/types';
 import type { LabelFormatter } from '@shopify/polaris-viz-core';
-import type { GDataSeries } from '@/shared/charts/types';
+import type { GDataSeries } from '../../../../types';
 import type { ReactNode } from 'react';
 export interface ChartProps {
     data: GDataSeries[];