@taiv/ui 1.3.3 → 1.4.0

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { CardProps } from '../../Layout/Card';
+import { CardProps } from '../../Layout/Card/Card';
 import { ChartProps } from '../Chart';
 export interface ChartCardProps extends ChartProps, Omit<CardProps, 'children'> {
     title: string;
     subtitle?: string;
+    tooltip?: React.ReactNode;
 }
 export declare const ChartCard: React.FC<ChartCardProps>;
 //# sourceMappingURL=ChartCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/ChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAK7C,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe9C,CAAC"}
+{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/ChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAO7C,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.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card } from '../../Layout/Card';
+import { Card } from '../../Layout/Card/Card';
 import { Chart } from '../Chart';
-import { Stack } from '../../Layout/Stack';
+import { Stack } from '../../Layout/Stack/Stack';
 import { Title } from '../../Typography/Title';
 import { Text } from '../../Typography/Text';
-export const ChartCard = ({ title, subtitle, series, yAxisFormat, xAxisFormat, showLegend, loading, height = '30rem', ...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: [_jsx(Title, { variant: "cardHeader", children: title }), 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 { InfoTooltip } from '../../Info/Tooltips/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; }` })] }));
 };

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { CardProps } from '../../Layout/Card';
+import { CardProps } from '../../Layout/Card/Card';
 import { PieChartProps } from '../PieChart';
 export interface PieChartCardProps extends PieChartProps, Omit<CardProps, 'children'> {
     title: string;
     subtitle?: string;
+    tooltip?: React.ReactNode;
     height?: number | string;
 }
 export declare const PieChartCard: React.FC<PieChartCardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"PieChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/PieChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAY,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqCpD,CAAC"}
+{"version":3,"file":"PieChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/PieChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAY,aAAa,EAAE,MAAM,aAAa,CAAC;AAOtD,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.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card } from '../../Layout/Card';
+import { Card } from '../../Layout/Card/Card';
 import { PieChart } from '../PieChart';
-import { Stack } from '../../Layout/Stack';
+import { Stack } from '../../Layout/Stack/Stack';
 import { Title } from '../../Typography/Title';
 import { Text } from '../../Typography/Text';
-export const PieChartCard = ({ title, subtitle, data, 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: [_jsx(Title, { variant: "cardHeader", children: title }), 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; }` })] }));
+import { InfoTooltip } from '../../Info/Tooltips/InfoTooltip';
+import { Group } from '@mantine/core';
+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; }` })] }));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardProps } from '../../Layout/Card';
+import { CardProps } from '../../Layout/Card/Card';
 import { primitives } from '../../../constants/colors';
 import { formats } from '../../../constants/data';
 export interface StatsCardProps extends Omit<CardProps, 'children'> {

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

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOpD,OAAO,EAAE,UAAU,EAAoB,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,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.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOzD,OAAO,EAAE,UAAU,EAAoB,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,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.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from '../../Layout/Card';
+import { Card } from '../../Layout/Card/Card';
 import { InfoTooltip } from '../../Info/Tooltips/InfoTooltip';
 import { Text } from '../../Typography/Text';
 import { Title } from '../../Typography/Title';
-import { Group } from '../../Layout/Group';
-import { Stack } from '../../Layout/Stack';
-import { IconBadge } from '../../Misc/IconBadge';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { IconBadge } from '../../Misc/IconBadge/IconBadge';
 import { success, neutral } from '../../../constants/colors';
 import { formats } from '../../../constants/data';
 export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, ...cardProps }) => {

package/dist/components/Data/Chart.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from '../Typography/Text';
-import { Center } from '../Layout/Center';
-import { Box } from '../Layout/Box';
-import { Stack } from '../Layout/Stack';
-import { Group } from '../Layout/Group';
+import { Center } from '../Layout/Center/Center';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
+import { Group } from '../Layout/Group/Group';
 import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { getChartFormatter } from '../../utils/charts';
 import { fontStyle } from '../../constants/font';

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

@@ -16,6 +16,6 @@ interface CheckboxTableProps {
     showColumnTitles?: boolean;
     outlines?: boolean;
 }
-declare const CheckboxTable: ({ columns, data, className, onRowClick, title, subtitle, showColumnTitles, outlines, }: CheckboxTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxTable: ({ columns, data, className, onRowClick, title, subtitle, showColumnTitles, outlines }: CheckboxTableProps) => import("react/jsx-runtime").JSX.Element;
 export { CheckboxTable };
 //# sourceMappingURL=CheckboxTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxTable.d.ts","sourceRoot":"","sources":["../../../src/components/Data/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,wFASpB,kBAAkB,4CAuHpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"CheckboxTable.d.ts","sourceRoot":"","sources":["../../../src/components/Data/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"}

package/dist/components/Data/CheckboxTable.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMobile } from '../../hooks/useMediaQuery';
-import { Checkbox } from '../Inputs/Controls/Checkbox';
-import { Group } from '../Layout/Group';
-import { Box } from '../Layout/Box';
-import { Center } from '../Layout/Center';
-import { Stack } from '../Layout/Stack';
+import { Checkbox } from '../Inputs/Controls/Checkbox/Checkbox';
+import { Group } from '../Layout/Group/Group';
+import { Box } from '../Layout/Box/Box';
+import { Center } from '../Layout/Center/Center';
+import { Stack } from '../Layout/Stack/Stack';
 import { Title } from '../Typography/Title';
 import { neutral } from '../../constants/colors';
 import { fontStyle } from '../../constants/font';
-const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, subtitle, showColumnTitles = false, outlines = false, }) => {
+const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, subtitle, showColumnTitles = false, outlines = false }) => {
     const isMobile = useMobile();
     const style = {
         container: {

package/dist/components/Data/PieChart.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, Label } from 'recharts';
 import { Text } from '../Typography/Text';
-import { Center } from '../Layout/Center';
-import { Group } from '../Layout/Group';
+import { Center } from '../Layout/Center/Center';
+import { Group } from '../Layout/Group/Group';
 import { Title } from '../Typography/Title';
-import { Stack } from '../Layout/Stack';
-import { Box } from '../Layout/Box';
+import { Stack } from '../Layout/Stack/Stack';
+import { Box } from '../Layout/Box/Box';
 import { neutral } from '../../constants/colors';
 import { textStyle } from '../../constants/font';
 import { getChartFormatter } from '../../utils/charts';

package/dist/components/Info/InfoCard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardProps } from '../Layout/Card';
+import { CardProps } from '../Layout/Card/Card';
 import { colors } from '../../constants/colors';
 export interface InfoCardProps extends Omit<CardProps, 'children'> {
     children: React.ReactNode;

package/dist/components/Info/InfoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/Info/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/Info/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}

package/dist/components/Info/InfoCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '../Layout/Card';
-import { Center } from '../Layout/Center';
+import { Card } from '../Layout/Card/Card';
+import { Center } from '../Layout/Center/Center';
 import { colors } from '../../constants/colors';
 export const InfoCard = ({ children, variant = 'primary', ...cardProps }) => {
     const colorPalette = colors[variant];

package/dist/components/Info/Modals/Modal.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal as MantineModal } from '@mantine/core';
 import { neutral } from '../../../constants/colors';
 import { Title } from '../../Typography/Title';
-import { Stack } from '../../Layout/Stack';
-import { Center } from '../../Layout/Center';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Center } from '../../Layout/Center/Center';
 // Base modal is intended to be extended and customized - use InfoModal or ConfirmationModal for common use cases
 export const Modal = ({ opened, onClose, icon, title, subtitle, children, width = '40rem' }) => {
     return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: '16px', overlayProps: {

package/dist/components/Info/Notifications/variants.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { primary, error, success, warning } from '../../../constants/colors';
-import { Loader } from '../../Layout/Loader';
+import { Loader } from '../../Layout/Loader/Loader';
 export const componentVariants = {
     success: {
         defaultTitle: 'Success!',

package/dist/components/Info/Tooltips/FormulaTooltip.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../Layout/Box';
+import { Box } from '../../Layout/Box/Box';
 import { Text } from '../../Typography/Text';
 import { Formula } from '../../Typography/Formula';
-import { Stack } from '../../Layout/Stack';
+import { Stack } from '../../Layout/Stack/Stack';
 import { blue } from '../../../constants/colors';
-import { Center } from '../../Layout/Center';
+import { Center } from '../../Layout/Center/Center';
 const FormulaTooltip = ({ title, description, expression }) => {
     return (_jsx(Box, { p: "0.8rem", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.8rem", sx: { maxWidth: '375px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: '1.6rem 2.4rem', borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
 };

package/dist/components/Info/Tooltips/InfoTooltip.d.ts

@@ -9,13 +9,28 @@ interface InfoTooltipProps {
     className?: string;
     styles?: Record<string, CSSObject>;
     maxWidth?: string;
+    variant?: keyof typeof componentVariants;
 }
+declare const componentVariants: {
+    info: {
+        color: "#D9D9D9";
+        icon: string;
+    };
+    warning: {
+        color: "#FE9A00";
+        icon: string;
+    };
+    error: {
+        color: "#FB2C36";
+        icon: string;
+    };
+};
 declare const componentSizes: {
     readonly sm: "1.2rem";
     readonly md: "1.6rem";
     readonly lg: "2rem";
     readonly xl: "2.4rem";
 };
-declare const InfoTooltip: ({ text, content, position, size, offset, className, styles, maxWidth }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const InfoTooltip: ({ text, content, position, size, offset, className, styles, maxWidth, variant }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { InfoTooltip };
 //# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/components/Info/Tooltips/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,wEAA6F,gBAAgB,4CAcjI,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;CAatB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,iFAA+G,gBAAgB,4CAcnJ,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Info/Tooltips/InfoTooltip.js

@@ -1,20 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { neutral } from '../../../constants/colors';
+import { error, neutral, warning } from '../../../constants/colors';
 import { Tooltip } from './Tooltip';
+const componentVariants = {
+    info: {
+        color: neutral[100],
+        icon: 'fas fa-info-circle',
+    },
+    warning: {
+        color: warning[100],
+        icon: 'fas fa-exclamation-circle',
+    },
+    error: {
+        color: error[100],
+        icon: 'fas fa-exclamation-circle',
+    },
+};
 const componentSizes = {
     sm: '1.2rem',
     md: '1.6rem',
     lg: '2rem',
     xl: '2.4rem',
 };
-const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles, maxWidth }) => {
+const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles, maxWidth, variant = 'info' }) => {
     const style = {
         icon: {
-            color: neutral[100],
+            color: componentVariants[variant].color,
             fontSize: componentSizes[size],
         },
         ...styles,
     };
-    return (_jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: "fas fa-info-circle", style: style.icon }) }));
+    return (_jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) }));
 };
 export { InfoTooltip };

package/dist/components/Inputs/Buttons/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps as MantineButtonProps } from '@mantine/core';
+import { componentSizes } from './sizes';
+import { componentVariants } from './variants';
+export interface ButtonProps extends MantineButtonProps {
+    onClick?: () => void;
+    size?: keyof typeof componentSizes;
+    variant?: keyof typeof componentVariants;
+    fullWidth?: boolean;
+    toggled?: boolean;
+}
+export declare const Button: ({ onClick, size, variant, fullWidth, toggled, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Inputs/Buttons/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,GAAI,kEAAqG,WAAW,4CAkCtI,CAAC"}

package/dist/components/Inputs/Buttons/Button/Button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MantineButton } from '@mantine/core';
+import { fontBase, fontWeight } from '../../../../constants/font';
+import { componentSizes } from './sizes';
+import { componentVariants } from './variants';
+export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, styles, ...props }) => {
+    const selectedVariant = componentVariants[variant];
+    const selectedSize = componentSizes[size];
+    // Apply active styles for nav variant when isActive is true
+    const getVariantStyles = () => {
+        if (toggled) {
+            return {
+                ...selectedVariant,
+                ...selectedVariant['&:toggled'],
+            };
+        }
+        return selectedVariant;
+    };
+    const style = {
+        root: {
+            borderRadius: '8px',
+            border: '1px solid white',
+            width: fullWidth ? '100%' : 'fit-content',
+            height: `${selectedSize.height}rem`,
+            padding: selectedSize.padding,
+            minWidth: `${selectedSize.minWidth}rem`,
+            fontSize: selectedSize.fontSize,
+            ...getVariantStyles(),
+        },
+        label: {
+            ...fontBase,
+            fontWeight: fontWeight['semibold'],
+        },
+        ...styles,
+    };
+    return _jsx(MantineButton, { styles: style, size: size, onClick: onClick, ...props });
+};

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2F7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}

package/dist/components/Inputs/Buttons/Button/Button.stories.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './Button';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Buttons/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe Button component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: "Controls the button's height, padding, and font size",
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'cancel', 'success', 'warning', 'text', 'nav'],
+            description: "Defines the button's visual style and color scheme",
+            table: {
+                type: { summary: "'primary' | 'secondary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav'" },
+                defaultValue: { summary: "'primary'" },
+            },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'Button label or content',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Makes the button span the full width of its container. Useful for modals, forms, etc. with a proper Grid layout',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        leftIcon: {
+            control: { type: 'text' },
+            description: 'Adds icon before button label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        rightIcon: {
+            control: { type: 'text' },
+            description: 'Adds icon after button label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'MantineStylesObject' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        loading: {
+            control: { type: 'boolean' },
+            description: 'Indicate loading state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '() => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'Button',
+        size: 'md',
+        variant: 'primary',
+        disabled: false,
+        loading: false,
+        fullWidth: false,
+        leftIcon: undefined,
+        rightIcon: undefined,
+        styles: {},
+        onClick: () => { },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "cancel", children: "Cancel" }), _jsx(Button, { variant: "success", children: "Success" }), _jsx(Button, { variant: "warning", children: "Warning" }), _jsx(Button, { variant: "text", children: "Text" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { styles: {
+                    root: {
+                        borderRadius: '20px',
+                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                        '&:hover': {
+                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+                        },
+                    },
+                }, children: "Gradient Button" }), _jsx(Button, { styles: {
+                    root: {
+                        borderRadius: '0px',
+                        background: 'black',
+                        color: 'white',
+                        border: '2px solid white',
+                        '&:hover': {
+                            background: 'white',
+                            color: 'black',
+                        },
+                    },
+                }, children: "Custom Border" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Button
+  styles={{
+    root: {
+      borderRadius: '20px',
+      background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+      '&:hover': {
+        background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+      },
+    },
+  }}
+>
+  Gradient Button
+</Button>
+
+<Button
+  styles={{
+    root: {
+      borderRadius: '0px',
+      background: 'black',
+      color: 'white',
+      border: '2px solid white',
+      '&:hover': {
+        background: 'white',
+        color: 'black',
+      },
+    },
+  }}
+>
+  Custom Border
+</Button>`,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Buttons/Button/sizes.d.ts

@@ -0,0 +1,25 @@
+declare const componentSizes: {
+    sm: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+    md: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+    lg: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+};
+export { componentSizes };
+//# sourceMappingURL=sizes.d.ts.map

package/dist/components/Inputs/Buttons/Button/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/sizes.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Inputs/Buttons/Button/sizes.js

@@ -0,0 +1,7 @@
+import { fontSize } from '../../../../constants/font';
+const componentSizes = {
+    sm: { height: 3, ...fontSize['sm'], padding: '0.8rem 1.8rem', minWidth: 6.8 },
+    md: { height: 4, ...fontSize['md'], padding: '0.8rem 2.4rem', minWidth: 11.2 },
+    lg: { height: 4.8, ...fontSize['lg'], padding: '0.8rem 4rem', minWidth: 15.2 },
+};
+export { componentSizes };