@taiv/ui 1.13.0 → 1.14.1

package/dist/assets/icons.d.ts

@@ -1,6 +1,12 @@
+export { GoogleIcon } from './svgs/GoogleIcon';
 export declare const actions: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
 export declare const controls: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
 export declare const feedback: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
 export declare const navigation: string[][];
-export declare const icons: (string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[][];
+export declare const ssoProviders: (string | (({ size }: {
+    size?: number;
+}) => import("react").ReactSVGElement))[][];
+export declare const icons: ((string | import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>)[] | (string | (({ size }: {
+    size?: number;
+}) => import("react").ReactSVGElement))[])[];
 //# sourceMappingURL=icons.d.ts.map

package/dist/assets/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/assets/icons.ts"],"names":[],"mappings":"AAuBE,eAAO,MAAM,OAAO,kJAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,kJAYpB,CAAC;AAEA,eAAO,MAAM,QAAQ,kJAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,YAYtB,CAAC;AAEF,eAAO,MAAM,KAAK,kJAAwD,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/assets/icons.ts"],"names":[],"mappings":"AAsBE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,eAAO,MAAM,OAAO,kJAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,kJAYpB,CAAC;AAEA,eAAO,MAAM,QAAQ,kJAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,YAYtB,CAAC;AAEF,eAAO,MAAM,YAAY;QA/EtB,CAAC;2CAiFH,CAAC;AAEF,eAAO,MAAM,KAAK;QAnFf,CAAC;4CAmFuF,CAAC"}

package/dist/assets/icons.js

@@ -1,5 +1,7 @@
 import { IconArrowDown, IconArrowUp, IconCodeVariablePlus, IconCaretDownFilled, IconCaretUpFilled, IconCircleFilled, IconDeviceTv, IconEdit, IconHistory, IconPlus, IconRefresh, IconReload, IconSwitchHorizontal, IconTerminal2, IconTransfer, IconTrash, IconVolume, IconVolume2, IconVolume3, } from '@tabler/icons-react';
 import { colors } from '../constants/colors';
+export { GoogleIcon } from './svgs/GoogleIcon';
+import { GoogleIcon } from './svgs/GoogleIcon';
 export const actions = [
     [IconPlus, 'Add'],
     [IconTrash, 'Delete'],
@@ -54,4 +56,7 @@ export const navigation = [
     ['fas fa-external-link-square-alt', 'Open External Link'],
     ['fas fa-sign-out-alt', 'Sign Out'],
 ];
-export const icons = [...actions, ...controls, ...feedback, ...navigation];
+export const ssoProviders = [
+    [GoogleIcon, 'Google'],
+];
+export const icons = [...actions, ...controls, ...feedback, ...navigation, ...ssoProviders];

package/dist/assets/svgs/GoogleIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const GoogleIcon: ({ size }: {
+    size?: number;
+}) => React.ReactSVGElement;
+//# sourceMappingURL=GoogleIcon.d.ts.map

package/dist/assets/svgs/GoogleIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/svgs/GoogleIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,UAAU,GAAI,UAAe;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,0BAMxD,CAAC"}

package/dist/assets/svgs/GoogleIcon.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const GoogleIcon = ({ size = 18 }) => React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: size, height: size }, React.createElement('path', { fill: '#4285F4', d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' }), React.createElement('path', { fill: '#34A853', d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' }), React.createElement('path', { fill: '#FBBC05', d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' }), React.createElement('path', { fill: '#EA4335', d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' }));

package/dist/components/Data/Cards/ChartCard/ChartCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/ChartCard/ChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAOtD,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,CAAC"}
+{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/ChartCard/ChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAQtD,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,CAAC"}

package/dist/components/Data/Cards/ChartCard/ChartCard.js

@@ -6,6 +6,7 @@ import { Title } from '../../../Typography/Title/Title';
 import { Text } from '../../../Typography/Text/Text';
 import { InfoTooltip } from '../../../Info/Tooltips/InfoTooltip/InfoTooltip';
 import { Group } from '@mantine/core';
-export const ChartCard = ({ title, subtitle, series, yAxisFormat, xAxisFormat, showLegend, loading, height = '30rem', tooltip, ...cardProps }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: "2.4rem", h: "100%", w: "100%", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { variant: "cardHeader", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(Chart, { series: series, yAxisFormat: yAxisFormat, xAxisFormat: xAxisFormat, showLegend: showLegend, loading: loading })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+import { spacing } from '../../../../constants/spacing';
+export const ChartCard = ({ title, subtitle, series, yAxisFormat, xAxisFormat, showLegend, loading, height = '300px', tooltip, ...cardProps }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: spacing.xl, h: "100%", w: "100%", children: [_jsxs(Stack, { gap: spacing.xs, children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { variant: "cardHeader", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(Chart, { series: series, yAxisFormat: yAxisFormat, xAxisFormat: xAxisFormat, showLegend: showLegend, loading: loading })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
 };

package/dist/components/Data/Cards/PieChartCard/PieChartCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChartCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/PieChartCard/PieChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOlE,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyCpD,CAAC"}
+{"version":3,"file":"PieChartCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/PieChartCard/PieChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQlE,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyCpD,CAAC"}

package/dist/components/Data/Cards/PieChartCard/PieChartCard.js

@@ -6,6 +6,7 @@ import { Title } from '../../../Typography/Title/Title';
 import { Text } from '../../../Typography/Text/Text';
 import { InfoTooltip } from '../../../Info/Tooltips/InfoTooltip/InfoTooltip';
 import { Group } from '@mantine/core';
+import { spacing } from '../../../../constants/spacing';
 export const PieChartCard = ({ title, subtitle, data, tooltip, height = '100%', showLegend, innerRadius, outerRadius, paddingAngle, format = 'percentage', loading, centerContent, ...cardProps }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: "0rem", h: "100%", w: "100%", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsxs(Group, { children: [_jsx(Title, { variant: "cardHeader", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(PieChart, { data: data, showLegend: showLegend, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, format: format, loading: loading, centerContent: centerContent })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: "0px", h: "100%", w: "100%", children: [_jsxs(Stack, { gap: spacing.xs, children: [_jsxs(Group, { children: [_jsx(Title, { variant: "cardHeader", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(PieChart, { data: data, showLegend: showLegend, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, format: format, loading: loading, centerContent: centerContent })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
 };

package/dist/components/Data/Cards/StatsCard/StatsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/StatsCard/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAO5D,OAAO,EAAE,UAAU,EAAoB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,GAAI,mHAAgJ,cAAc,4CA4DvL,CAAC"}
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/StatsCard/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAO5D,OAAO,EAAE,UAAU,EAAoB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAGrD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,GAAI,mHAAgJ,cAAc,4CA4DvL,CAAC"}

package/dist/components/Data/Cards/StatsCard/StatsCard.js

@@ -8,6 +8,7 @@ import { Stack } from '../../../Layout/Stack/Stack';
 import { IconBadge } from '../../../Misc/IconBadge/IconBadge';
 import { success, neutral } from '../../../../constants/colors';
 import { formats } from '../../../../constants/data';
+import { spacing } from '../../../../constants/spacing';
 export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, ...cardProps }) => {
     const getDelta = () => {
         const currentDirection = isDelta ? (value > 0 ? 'positive' : value < 0 ? 'negative' : null) : null;
@@ -34,5 +35,5 @@ export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, d
         result = `${config.prefix}${result}${config.suffix}`;
         return result;
     };
-    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.25rem", children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: "0.75rem", children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
+    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Stack, { gap: spacing.xxs, children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: spacing.sm, children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
 };

package/dist/components/Data/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC;AAExC,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwLtC,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAKlD,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC;AAExC,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwLtC,CAAC"}

package/dist/components/Data/Chart/Chart.js

@@ -8,6 +8,7 @@ import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContai
 import { getChartFormatter } from '../../../utils/charts';
 import { fontStyle } from '../../../constants/font';
 import { primary, neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { createStyles } from '@mantine/core';
 export const Chart = ({ series, yAxisFormat = 'decimal', xAxisFormat = 'string', showLegend = true, loading = false, height = '100%' }) => {
     const parseFormat = (format) => {
@@ -42,16 +43,16 @@ export const Chart = ({ series, yAxisFormat = 'decimal', xAxisFormat = 'string',
         if (active && payload && payload.length) {
             return (_jsx(Box, { sx: {
                     backgroundColor: 'white',
-                    padding: '1rem',
+                    padding: '10px',
                     border: `1px solid ${neutral[100]}`,
                     borderRadius: '8px',
                     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxisValue(label) }), payload.map((entry) => (_jsxs(Group, { gap: "0.5rem", children: [_jsx("div", { style: {
+                }, children: _jsxs(Stack, { gap: spacing.xxs, children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxisValue(label) }), payload.map((entry) => (_jsxs(Group, { gap: spacing.xs, children: [_jsx("div", { style: {
                                         width: '8px',
                                         height: '8px',
                                         borderRadius: '50%',
                                         backgroundColor: entry.color,
-                                    } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: formatYAxisValue(entry.value) })] })] }, entry.name)))] }) }));
+                                    } }), _jsxs(Group, { gap: spacing.xxs, children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: formatYAxisValue(entry.value) })] })] }, entry.name)))] }) }));
         }
         return null;
     };
@@ -88,5 +89,5 @@ export const Chart = ({ series, yAxisFormat = 'decimal', xAxisFormat = 'string',
                                 else {
                                     return _jsx(Line, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, dot: false, style: { outline: 'none' } }, s.name);
                                 }
-                            }), _jsx(Tooltip, { content: getTooltip, cursor: series.some((s) => s.type === 'bar') ? false : true }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '0.6rem' }, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) }) })) }));
+                            }), _jsx(Tooltip, { content: getTooltip, cursor: series.some((s) => s.type === 'bar') ? false : true }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '6px' }, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) }) })) }));
 };

package/dist/components/Data/Chart/Chart.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA8D1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA0D1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAgBF,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAgBF,eAAO,MAAM,mBAAmB,EAAE,KAuCjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}
+{"version":3,"file":"Chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA8D1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA0D1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAgBF,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAgBF,eAAO,MAAM,mBAAmB,EAAE,KAuCjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}

package/dist/components/Data/Chart/Chart.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formats } from "../../../constants/data";
 import { primary, success, warning } from "../../../constants/colors";
+import { spacing } from '../../../constants/spacing';
 import { Box } from "../../Layout/Box/Box";
 import { Group } from "../../Layout/Group/Group";
 import { Stack } from "../../Layout/Stack/Stack";
@@ -126,7 +127,7 @@ export const Default = {
     render: (args) => (_jsx(Box, { w: "100%", maw: 720, h: 360, children: _jsx(Chart, { ...args }) })),
 };
 export const SeriesTypes = {
-    render: () => (_jsxs(Stack, { gap: "2.4rem", children: [_jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: "integer" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleAreaSeries, height: "100%", yAxisFormat: "currency" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleBarSeries, height: "100%", yAxisFormat: "integer" }) })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.xl, children: [_jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: "integer" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleAreaSeries, height: "100%", yAxisFormat: "currency" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleBarSeries, height: "100%", yAxisFormat: "integer" }) })] })),
 };
 export const MultiSeries = {
     render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(Chart, { series: sampleMultiSeries, height: "100%", yAxisFormat: "decimal" }) })),
@@ -135,10 +136,10 @@ export const MixedBarAndLine = {
     render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(Chart, { series: sampleMixedSeries, height: "100%", yAxisFormat: "integer" }) })),
 };
 export const YAxisFormats = {
-    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: fmt, showLegend: false }) }, fmt))) })),
+    render: () => (_jsx(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: fmt, showLegend: false }) }, fmt))) })),
 };
 export const YAxisDecimalPlaces = {
-    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [1, 2, 3].map((dp) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: { format: "decimal", options: { decimalPlaces: dp } }, showLegend: false }) }, dp))) })),
+    render: () => (_jsx(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: [1, 2, 3].map((dp) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: { format: "decimal", options: { decimalPlaces: dp } }, showLegend: false }) }, dp))) })),
 };
 const largeValueSeries = [
     {
@@ -154,7 +155,7 @@ const largeValueSeries = [
     },
 ];
 export const YAxisTruncation = {
-    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: largeValueSeries, height: "100%", yAxisFormat: {
+    render: () => (_jsxs(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: largeValueSeries, height: "100%", yAxisFormat: {
                         format: "decimal",
                         options: { truncateAt: "thousand" },
                     }, showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: largeValueSeries, height: "100%", yAxisFormat: {
@@ -176,7 +177,7 @@ const numericKeySeries = [
     },
 ];
 export const XAxisNumericFormats = {
-    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: "integer", yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: { format: "currency", options: { decimalPlaces: 0 } }, yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: {
+    render: () => (_jsxs(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: "integer", yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: { format: "currency", options: { decimalPlaces: 0 } }, yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: {
                         format: "decimal",
                         options: { truncateAt: "thousand" },
                     }, yAxisFormat: "integer", showLegend: false }) })] })),

package/dist/components/Data/CheckboxTable/CheckboxTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTable.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/CheckboxTable/CheckboxTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,GAAI,uFAAgH,kBAAkB,4CAuHxJ,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"CheckboxTable.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/CheckboxTable/CheckboxTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,GAAI,uFAAgH,kBAAkB,4CAuHxJ,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Data/CheckboxTable/CheckboxTable.js

@@ -8,22 +8,23 @@ import { Stack } from '../../Layout/Stack/Stack';
 import { Title } from '../../Typography/Title/Title';
 import { neutral } from '../../../constants/colors';
 import { fontStyle } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
 const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, subtitle, showColumnTitles = false, outlines = false }) => {
     const isMobile = useMobile();
     const style = {
         container: {
             borderRadius: '8px',
             border: `1px solid ${neutral[50]}`,
-            padding: '0.8rem',
+            padding: spacing.sm,
             backgroundColor: 'white',
         },
         header: {
-            padding: '1.6rem',
+            padding: spacing.lg,
             minWidth: '0',
         },
         columns: {
-            paddingTop: '1.6rem',
-            paddingLeft: '3.6rem',
+            paddingTop: spacing.lg,
+            paddingLeft: '36px',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
         },
@@ -31,29 +32,29 @@ const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, s
             justifyContent: isMobile ? 'flex-start' : 'center',
             ...fontStyle['body'],
             color: neutral[300],
-            padding: '0.8rem 1.6rem',
-            minWidth: '10rem',
+            padding: `${spacing.sm} ${spacing.lg}`,
+            minWidth: '100px',
         },
         tableBody: {
-            gap: isMobile ? '0.5rem' : '0.25rem',
+            gap: isMobile ? '5px' : '2.5px',
             minWidth: '0',
         },
         tableRow: {
-            padding: isMobile ? '0.8rem 1.6rem' : '0.4rem 3.2rem',
+            padding: isMobile ? '8px 16px' : '4px 32px',
             backgroundColor: '#FFFFFF',
             minWidth: '0',
-            gap: isMobile ? '2.4rem' : '0',
+            gap: isMobile ? '24px' : '0',
             ...(outlines && { borderTop: `1px solid ${neutral[50]}` }),
         },
         contentContainer: {
             flex: 1,
             flexDirection: (isMobile ? 'column' : 'row'),
-            gap: '0.25rem',
+            gap: spacing.xxs,
             minWidth: 0,
         },
         item: {
             justifyContent: isMobile ? 'flex-start' : 'space-between',
-            minWidth: isMobile ? '0' : '10rem',
+            minWidth: isMobile ? '0' : '100px',
             ...fontStyle['body'],
             fontWeight: 400,
             color: neutral[200],
@@ -68,14 +69,14 @@ const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, s
                 }, children: column.label }, column.key))) }));
     };
     const renderRow = (row) => {
-        return (_jsxs(_Fragment, { children: [_jsx(Center, { mr: isMobile ? 0 : '3.2rem', ml: isMobile ? 0 : '-1.6rem', children: _jsx(Checkbox, { checked: row.checked, onChange: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row) }) }), _jsx(Group, { style: style.contentContainer, children: columns === null || columns === void 0 ? void 0 : columns.map((column, index) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { mr: isMobile ? 0 : '32px', ml: isMobile ? 0 : '-16px', children: _jsx(Checkbox, { checked: row.checked, onChange: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row) }) }), _jsx(Group, { style: style.contentContainer, children: columns === null || columns === void 0 ? void 0 : columns.map((column, index) => {
                         const text = row[column.key] || '';
                         const className = column.className || '';
                         return (_jsx(Box, { style: {
                                 ...style.item,
                                 width: column.width || '100%',
-                                flex: isMobile ? 'none' : column.key === 'volume' ? '1 1 30rem' : '0 0 auto',
-                                minWidth: isMobile ? '0' : column.key === 'volume' ? '30rem' : '10rem',
+                                flex: isMobile ? 'none' : column.key === 'volume' ? '1 1 300px' : '0 0 auto',
+                                minWidth: isMobile ? '0' : column.key === 'volume' ? '300px' : '100px',
                                 ...(className && { className }),
                             }, children: text }, index));
                     }) })] }));

package/dist/components/Data/PieChart/PieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/PieChart/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,OAAO,aAAa,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwH5C,CAAC"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/PieChart/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,OAAO,aAAa,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwH5C,CAAC"}

package/dist/components/Data/PieChart/PieChart.js

@@ -8,6 +8,7 @@ import { Stack } from '../../Layout/Stack/Stack';
 import { Box } from '../../Layout/Box/Box';
 import { neutral } from '../../../constants/colors';
 import { textStyle } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
 import { getChartFormatter } from '../../../utils/charts';
 export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadius = 100, paddingAngle = 0, format = 'percentage', loading = false, centerContent, height = '100%', }) => {
     const hasData = data && data.length > 0;
@@ -22,7 +23,7 @@ export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadiu
         if (active && payload && payload.length) {
             return (_jsxs(Box, { sx: {
                     backgroundColor: 'white',
-                    padding: '1rem',
+                    padding: '10px',
                     border: `1px solid ${neutral[100]}`,
                     borderRadius: '8px',
                     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
@@ -33,11 +34,11 @@ export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadiu
                                     height: '8px',
                                     borderRadius: '50%',
                                     backgroundColor: entry.payload.color,
-                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.payload.key, ":"] }), _jsx(Text, { variant: "label", children: getChartFormatter(format)(entry.payload.value) })] })] }, entry.key)))] }));
+                                } }), _jsxs(Group, { gap: spacing.xxs, children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.payload.key, ":"] }), _jsx(Text, { variant: "label", children: getChartFormatter(format)(entry.payload.value) })] })] }, entry.key)))] }));
         }
         return null;
     };
-    return (_jsxs(_Fragment, { children: [loading || !hasData ? (_jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsx(Center, { h: height, w: "100%", style: { position: 'relative' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", style: { outline: 'none' }, children: _jsxs(RechartsPieChart, { style: { outline: 'none' }, children: [_jsxs(Pie, { data: transformedData, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, dataKey: "value", style: { outline: 'none' }, children: [_jsx(Label, { content: getCenterContent(), position: "center" }), data.map((entry, index) => (_jsx(Cell, { fill: entry.color, style: { outline: 'none' } }, `cell-${entry.key}`)))] }), _jsx(Tooltip, { content: getTooltip }), showLegend && _jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '0.6rem' } })] }) }) })), _jsx("style", { children: `
+    return (_jsxs(_Fragment, { children: [loading || !hasData ? (_jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsx(Center, { h: height, w: "100%", style: { position: 'relative' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", style: { outline: 'none' }, children: _jsxs(RechartsPieChart, { style: { outline: 'none' }, children: [_jsxs(Pie, { data: transformedData, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, dataKey: "value", style: { outline: 'none' }, children: [_jsx(Label, { content: getCenterContent(), position: "center" }), data.map((entry, index) => (_jsx(Cell, { fill: entry.color, style: { outline: 'none' } }, `cell-${entry.key}`)))] }), _jsx(Tooltip, { content: getTooltip }), showLegend && _jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '6px' } })] }) }) })), _jsx("style", { children: `
         .recharts-legend-item-text {
           font-family: ${textStyle.label.fontFamily};
           font-size: ${textStyle.label.fontSize};

package/dist/components/Data/PieChart/PieChart.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/PieChart/PieChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAmE7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
+{"version":3,"file":"PieChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/PieChart/PieChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAmE7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

package/dist/components/Data/PieChart/PieChart.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numberFormats } from "../../../constants/data";
 import { primary, success, warning } from "../../../constants/colors";
+import { spacing } from '../../../constants/spacing';
 import { Box } from "../../Layout/Box/Box";
 import { Group } from "../../Layout/Group/Group";
 import { PieChart } from "./PieChart";
@@ -87,7 +88,7 @@ export const Default = {
     render: (args) => (_jsx(Box, { w: "100%", maw: 480, h: 360, children: _jsx(PieChart, { ...args }) })),
 };
 export const Formats = {
-    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: fmt, height: "100%", showLegend: false }) }, fmt))) })),
+    render: () => (_jsx(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: fmt, height: "100%", showLegend: false }) }, fmt))) })),
 };
 export const WithCenterContent = {
     render: () => (_jsx(Box, { w: "100%", maw: 480, h: 360, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", centerContent: {
@@ -97,7 +98,7 @@ export const WithCenterContent = {
             } }) })),
 };
 export const DonutGeometry = {
-    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 0, outerRadius: 100, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 80, outerRadius: 100, showLegend: false }) })] })),
+    render: () => (_jsxs(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 0, outerRadius: 100, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 80, outerRadius: 100, showLegend: false }) })] })),
 };
 export const PaddingAngle = {
     name: "Slice gaps (paddingAngle)",
@@ -108,7 +109,7 @@ export const PaddingAngle = {
             },
         },
     },
-    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 0, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 8, showLegend: false }) })] })),
+    render: () => (_jsxs(Group, { align: "flex-start", gap: spacing.lg, styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 0, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 8, showLegend: false }) })] })),
 };
 export const WithoutLegend = {
     render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", showLegend: false }) })),

package/dist/components/Data/Progress/Progress.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA6E/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}
+{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA6E/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}

package/dist/components/Data/Progress/Progress.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { primary, purple, success } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Stack } from '../../Layout/Stack/Stack';
 import { Progress } from './Progress';
 const presetOptions = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -7,7 +8,7 @@ const meta = {
     title: 'Components/Data/Progress',
     component: Progress,
     decorators: [
-        (Story) => (_jsx("div", { style: { width: '25rem' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { width: '250px' }, children: _jsx(Story, {}) })),
     ],
     parameters: {
         layout: 'centered',
@@ -88,16 +89,16 @@ export const Default = {
     },
 };
 export const Values = {
-    render: () => (_jsxs(Stack, { spacing: "md", children: [_jsx(Progress, { value: 0, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 25, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 50, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 100, scale: "xl", cornerRadius: "xl" })] })),
+    render: () => (_jsxs(Stack, { spacing: spacing.md, children: [_jsx(Progress, { value: 0, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 25, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 50, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 100, scale: "xl", cornerRadius: "xl" })] })),
 };
 export const Scale = {
-    render: () => (_jsx(Stack, { spacing: "md", children: presetOptions.map((preset) => (_jsx(Progress, { value: 60, scale: preset, cornerRadius: "md" }, preset))) })),
+    render: () => (_jsx(Stack, { spacing: spacing.md, children: presetOptions.map((preset) => (_jsx(Progress, { value: 60, scale: preset, cornerRadius: "md" }, preset))) })),
 };
 export const CornerRadius = {
-    render: () => (_jsx(Stack, { spacing: "md", children: presetOptions.map((radius) => (_jsx(Progress, { value: 60, scale: "xl", cornerRadius: radius }, radius))) })),
+    render: () => (_jsx(Stack, { spacing: spacing.md, children: presetOptions.map((radius) => (_jsx(Progress, { value: 60, scale: "xl", cornerRadius: radius }, radius))) })),
 };
 export const Striped = {
-    render: () => (_jsx(Stack, { spacing: "md", children: _jsx(Progress, { value: 55, scale: "xl", cornerRadius: "xl", striped: true }) })),
+    render: () => (_jsx(Stack, { spacing: spacing.md, children: _jsx(Progress, { value: 55, scale: "xl", cornerRadius: "xl", striped: true }) })),
 };
 export const WithLabel = {
     args: {
@@ -141,6 +142,6 @@ export const Width = {
         value: 45,
         scale: 'xl',
         cornerRadius: 'xl',
-        width: '24rem',
+        width: '240px',
     },
 };

package/dist/components/Data/RemovableItemList/RemovableItemList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemovableItemList.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/RemovableItemList/RemovableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,iBAAiB,GAAI,6CAAkD,sBAAsB,4CAgElG,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"RemovableItemList.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/RemovableItemList/RemovableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,iBAAiB,GAAI,6CAAkD,sBAAsB,4CAgElG,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Data/RemovableItemList/RemovableItemList.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from '@mantine/core';
 import { neutral, error } from '../../../constants/colors';
 import { fontStyle } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
 import { Title } from '../../Typography/Title/Title';
 const RemovableItemList = ({ items, onRemove, title, disabledIndices = [] }) => {
     const style = {
@@ -16,14 +17,14 @@ const RemovableItemList = ({ items, onRemove, title, disabledIndices = [] }) =>
         titleContainer: {
             display: 'flex',
             alignItems: 'center',
-            padding: '1.2rem 1.6rem',
+            padding: `${spacing.md} ${spacing.lg}`,
             backgroundColor: neutral[50],
         },
         itemContainer: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
-            padding: '1.2rem 1.6rem',
+            padding: `${spacing.md} ${spacing.lg}`,
         },
         itemText: {
             ...fontStyle['body'],
@@ -37,7 +38,7 @@ const RemovableItemList = ({ items, onRemove, title, disabledIndices = [] }) =>
                             opacity: disabledIndices.includes(index) ? 0.5 : 1,
                             cursor: disabledIndices.includes(index) ? 'default' : 'pointer',
                             color: disabledIndices.includes(index) ? neutral[200] : error[100],
-                            fontSize: '1.625rem',
+                            fontSize: '16.25px',
                             fontWeight: 100,
                         }, onClick: () => !disabledIndices.includes(index) && onRemove(item, index) }))] }, index)))] }));
 };

package/dist/components/Info/Badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwD9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwD9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}

package/dist/components/Info/Badge/Badge.stories.js

@@ -3,6 +3,7 @@ import { IconCheck, IconCircleFilled } from '@tabler/icons-react';
 import { Badge } from './Badge';
 import { Group } from '../../Layout/Group/Group';
 import { Stack } from '../../Layout/Stack/Stack';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Info/Badge',
     component: Badge,
@@ -79,14 +80,14 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
 };
 export const Colors = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
 };
 export const WithLeftIcon = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
 };

package/dist/components/Info/Badge/sizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/sizes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/sizes.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/components/Info/Badge/sizes.js

@@ -1,23 +1,24 @@
 import { inputFontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
 export const badgeSizes = {
     sm: {
         mantineSize: 'md',
-        padding: '0.4rem 0.8rem',
-        height: '1.5rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '15px',
         fontSize: inputFontSize['sm'],
         iconSize: 10,
     },
     md: {
         mantineSize: 'lg',
-        padding: '0.4rem 0.8rem',
-        height: '2.5rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '25px',
         fontSize: inputFontSize['md'],
         iconSize: 14,
     },
     lg: {
         mantineSize: 'xl',
-        padding: '0.4rem 0.8rem',
-        height: '3rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '30px',
         fontSize: inputFontSize['lg'],
         iconSize: 16,
     },

package/dist/components/Info/Badge/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}