@taiv/ui 1.13.0 → 1.14.0

package/dist/components/Typography/Fraction/Fraction.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fraction } from './Fraction';
 import { Stack } from '../../Layout/Stack/Stack';
 import { primary } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Typography/Fraction',
     component: Fraction,
@@ -72,7 +73,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Stack, { gap: "1.5rem", children: [_jsx(Fraction, { numerator: "1", denominator: "2", variant: "body" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "subtle" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "label" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "caption" })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsx(Fraction, { numerator: "1", denominator: "2", variant: "body" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "subtle" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "label" }), _jsx(Fraction, { numerator: "1", denominator: "2", variant: "caption" })] })),
 };
 export const CustomOverrides = {
     parameters: {

package/dist/components/Typography/Text/Text.stories.js

@@ -77,7 +77,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Text, { variant: "body", children: "This is body text" }), _jsx(Text, { variant: "subtle", children: "This is subtle text" }), _jsx(Text, { variant: "label", children: "This is label text" }), _jsx(Text, { variant: "caption", children: "This is caption text" })] })),
+    render: () => (_jsxs(Stack, { gap: "10px", children: [_jsx(Text, { variant: "body", children: "This is body text" }), _jsx(Text, { variant: "subtle", children: "This is subtle text" }), _jsx(Text, { variant: "label", children: "This is label text" }), _jsx(Text, { variant: "caption", children: "This is caption text" })] })),
 };
 export const CustomOverrides = {
     parameters: {

package/dist/components/Typography/Title/Title.stories.js

@@ -77,7 +77,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "header", children: "Header" }), _jsx(Title, { variant: "sectionHeader", children: "Section Header" }), _jsx(Title, { variant: "subheader", children: "Subheader" }), _jsx(Title, { variant: "sectionSubheader", children: "Section Subheader" }), _jsx(Title, { variant: "cardHeader", children: "Card Header" }), _jsx(Title, { variant: "cardSubheader", children: "Card Subheader" })] })),
+    render: () => (_jsxs(Stack, { gap: "10px", children: [_jsx(Title, { variant: "header", children: "Header" }), _jsx(Title, { variant: "sectionHeader", children: "Section Header" }), _jsx(Title, { variant: "subheader", children: "Subheader" }), _jsx(Title, { variant: "sectionSubheader", children: "Section Subheader" }), _jsx(Title, { variant: "cardHeader", children: "Card Header" }), _jsx(Title, { variant: "cardSubheader", children: "Card Subheader" })] })),
 };
 export const CustomOverrides = {
     parameters: {

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { AutoComplete } from './Inputs/TextInputs/AutoComplete/AutoComplete';
 export { Button } from './Inputs/Buttons/Button/Button';
 export { IconButton } from './Inputs/Buttons/IconButton/IconButton';
 export { UnstyledButton } from './Inputs/Buttons/UnstyledButton/UnstyledButton';
+export { SSOButton } from './Inputs/Buttons/SSOButton/SSOButton';
 export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
 export { Radio } from './Inputs/Controls/Radio/Radio';
 export { RadioList } from './Inputs/Controls/RadioList/RadioList';
@@ -61,4 +62,6 @@ export { Transition } from './Misc/Transition/Transition';
 export { IconBadge } from './Misc/IconBadge/IconBadge';
 export { LoadingOverlay } from './Misc/LoadingOverlay/LoadingOverlay';
 export { Skeleton } from './Misc/Skeleton/Skeleton';
+export { Stepper } from './Misc/Stepper/Stepper';
+export { Step } from './Misc/Stepper/Step';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/index.js

@@ -23,6 +23,7 @@ export { AutoComplete } from './Inputs/TextInputs/AutoComplete/AutoComplete';
 export { Button } from './Inputs/Buttons/Button/Button';
 export { IconButton } from './Inputs/Buttons/IconButton/IconButton';
 export { UnstyledButton } from './Inputs/Buttons/UnstyledButton/UnstyledButton';
+export { SSOButton } from './Inputs/Buttons/SSOButton/SSOButton';
 export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
 export { Radio } from './Inputs/Controls/Radio/Radio';
 export { RadioList } from './Inputs/Controls/RadioList/RadioList';
@@ -66,3 +67,5 @@ export { Transition } from './Misc/Transition/Transition';
 export { IconBadge } from './Misc/IconBadge/IconBadge';
 export { LoadingOverlay } from './Misc/LoadingOverlay/LoadingOverlay';
 export { Skeleton } from './Misc/Skeleton/Skeleton';
+export { Stepper } from './Misc/Stepper/Stepper';
+export { Step } from './Misc/Stepper/Step';

package/dist/constants/breakpoints.d.ts

@@ -1,4 +1,4 @@
-export declare const BREAKPOINTS: {
+export declare const breakpoints: {
     readonly MOBILE: 640;
     readonly TABLET: 768;
     readonly LAPTOP: 1024;

package/dist/constants/breakpoints.js

@@ -1,5 +1,5 @@
 // Breakpoints in px - from Tailwind CSS
-export const BREAKPOINTS = {
+export const breakpoints = {
     MOBILE: 640,
     TABLET: 768,
     LAPTOP: 1024,

package/dist/constants/font.js

@@ -16,19 +16,19 @@ const fontBase = {
 };
 // Input font sizes are slightly smaller - this is for visual hierarchy
 const inputFontSize = {
-    sm: { fontSize: '1.15rem', lineHeight: '1.8rem' }, //~12px
-    md: { fontSize: '1.35rem', lineHeight: '2rem' }, //~14px
-    lg: { fontSize: '1.5rem', lineHeight: '2.2rem' }, //~16px
+    sm: { fontSize: '11.5px', lineHeight: '18px' }, //~12px
+    md: { fontSize: '13.5px', lineHeight: '20px' }, //~14px
+    lg: { fontSize: '15px', lineHeight: '22px' }, //~16px
 };
 // Base font sizes
 const fontSize = {
-    xs: { fontSize: '1rem', lineHeight: '1.6rem' }, //10px
-    sm: { fontSize: '1.2rem', lineHeight: '2rem' }, //12px
-    md: { fontSize: '1.4rem', lineHeight: '2.2rem' }, //14px
-    lg: { fontSize: '1.6rem', lineHeight: '2.4rem' }, //16px
-    xl: { fontSize: '2rem', lineHeight: '2.8rem' }, //20px
-    '2xl': { fontSize: '2.4rem', lineHeight: '3.2rem' }, //24px
-    '3xl': { fontSize: '2.8rem', lineHeight: '3.6rem' }, //28px
+    xs: { fontSize: '10px', lineHeight: '16px' }, //10px
+    sm: { fontSize: '12px', lineHeight: '20px' }, //12px
+    md: { fontSize: '14px', lineHeight: '22px' }, //14px
+    lg: { fontSize: '16px', lineHeight: '24px' }, //16px
+    xl: { fontSize: '20px', lineHeight: '28px' }, //20px
+    '2xl': { fontSize: '24px', lineHeight: '32px' }, //24px
+    '3xl': { fontSize: '28px', lineHeight: '36px' }, //28px
 };
 // Variants for body text
 const textStyle = {

package/dist/constants/index.d.ts

@@ -2,4 +2,5 @@ export * from './colors';
 export * from './font';
 export * from './breakpoints';
 export * from './data';
+export * from './spacing';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

package/dist/constants/index.js

@@ -2,3 +2,4 @@ export * from './colors';
 export * from './font';
 export * from './breakpoints';
 export * from './data';
+export * from './spacing';

package/dist/constants/spacing.d.ts

@@ -0,0 +1,12 @@
+export declare const spacing: {
+    none: string;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+export declare const none: string, xxs: string, xs: string, sm: string, md: string, lg: string, xl: string, xxl: string;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/constants/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/constants/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;CASnB,CAAC;AAEF,eAAO,MAAQ,IAAI,UAAE,GAAG,UAAE,EAAE,UAAE,EAAE,UAAE,EAAE,UAAE,EAAE,UAAE,EAAE,UAAE,GAAG,QAAY,CAAC"}

package/dist/constants/spacing.js

@@ -0,0 +1,11 @@
+export const spacing = {
+    none: '0px',
+    xxs: '2px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    xxl: '32px',
+};
+export const { none, xxs, xs, sm, md, lg, xl, xxl } = spacing;

package/dist/docs/AIGeneratedBanner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "../components";
 export function AIGeneratedBanner() {
-    return (_jsx("blockquote", { style: { marginBottom: '1rem' }, children: _jsxs(Text, { children: ["\uD83E\uDD16 ", _jsx("b", { children: "AI-generated:" }), " This doc was generated by AI and hasn't been human-edited yet."] }) }));
+    return (_jsx("blockquote", { style: { marginBottom: '10px' }, children: _jsxs(Text, { children: ["\uD83E\uDD16 ", _jsx("b", { children: "AI-generated:" }), " This doc was generated by AI and hasn't been human-edited yet."] }) }));
 }

package/dist/docs/design/Colors.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colors.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/design/Colors.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAmDtB,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC"}
+{"version":3,"file":"Colors.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/design/Colors.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAmDtB,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC"}

package/dist/docs/design/Colors.stories.js

@@ -3,6 +3,7 @@ import { Group } from '../../components/Layout/Group/Group';
 import { Stack } from '../../components/Layout/Stack/Stack';
 import { Text } from '../../components/Typography/Text/Text';
 import { colors, primitives } from '../../constants/colors';
+import { spacing } from '../../constants/spacing';
 const meta = {
     title: 'Design/Colors',
     tags: ['!dev'],
@@ -11,18 +12,18 @@ const meta = {
     },
 };
 export default meta;
-const Swatch = ({ color, label }) => (_jsxs(Stack, { gap: "0.4rem", align: "center", children: [_jsx("div", { style: {
+const Swatch = ({ color, label }) => (_jsxs(Stack, { gap: spacing.xs, align: "center", children: [_jsx("div", { style: {
                 width: '64px',
                 height: '64px',
                 borderRadius: '8px',
                 backgroundColor: color,
                 border: '1px solid rgba(0,0,0,0.1)',
             } }), _jsx(Text, { size: "xs", color: "dimmed", children: label }), _jsx(Text, { size: "xs", color: "dimmed", children: color })] }));
-const ThemeRow = ({ semantic, primitive, shades, }) => (_jsxs(Stack, { gap: "0.8rem", children: [_jsxs(Group, { gap: "0.4rem", children: [_jsx(Text, { weight: "bold", children: semantic }), _jsxs(Text, { children: ["(", primitive, ")"] })] }), _jsx(Group, { gap: "1.6rem", children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
-const ColorRow = ({ name, shades }) => (_jsxs(Stack, { gap: "0.8rem", children: [_jsx(Text, { weight: "bold", transform: "capitalize", children: name }), _jsx(Group, { gap: "1.6rem", children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
+const ThemeRow = ({ semantic, primitive, shades, }) => (_jsxs(Stack, { gap: spacing.sm, children: [_jsxs(Group, { gap: spacing.xs, children: [_jsx(Text, { weight: "bold", children: semantic }), _jsxs(Text, { children: ["(", primitive, ")"] })] }), _jsx(Group, { gap: spacing.lg, children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
+const ColorRow = ({ name, shades }) => (_jsxs(Stack, { gap: spacing.sm, children: [_jsx(Text, { weight: "bold", transform: "capitalize", children: name }), _jsx(Group, { gap: spacing.lg, children: Object.entries(shades).map(([shade, hex]) => (_jsx(Swatch, { color: hex, label: shade }, shade))) })] }));
 export const TaivLight = {
-    render: () => (_jsxs(Stack, { gap: "2.4rem", align: "flex-start", children: [_jsxs(Group, { gap: "1.6rem", children: [_jsx(Swatch, { color: "#000000", label: "black" }), _jsx(Swatch, { color: "#FFFFFF", label: "white" })] }), _jsx(ThemeRow, { semantic: "primary", primitive: "blue", shades: colors.primary }), _jsx(ThemeRow, { semantic: "neutral", primitive: "gray", shades: colors.neutral }), _jsx(ThemeRow, { semantic: "success", primitive: "green", shades: colors.success }), _jsx(ThemeRow, { semantic: "warning", primitive: "yellow", shades: colors.warning }), _jsx(ThemeRow, { semantic: "error", primitive: "red", shades: colors.error })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.xl, align: "flex-start", children: [_jsxs(Group, { gap: spacing.lg, children: [_jsx(Swatch, { color: "#000000", label: "black" }), _jsx(Swatch, { color: "#FFFFFF", label: "white" })] }), _jsx(ThemeRow, { semantic: "primary", primitive: "blue", shades: colors.primary }), _jsx(ThemeRow, { semantic: "neutral", primitive: "gray", shades: colors.neutral }), _jsx(ThemeRow, { semantic: "success", primitive: "green", shades: colors.success }), _jsx(ThemeRow, { semantic: "warning", primitive: "yellow", shades: colors.warning }), _jsx(ThemeRow, { semantic: "error", primitive: "red", shades: colors.error })] })),
 };
 export const AdditionalPrimitives = {
-    render: () => (_jsxs(Stack, { gap: "2.4rem", children: [_jsx(ColorRow, { name: "purple", shades: primitives.purple }), _jsx(ColorRow, { name: "salmon", shades: primitives.salmon })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.xl, children: [_jsx(ColorRow, { name: "purple", shades: primitives.purple }), _jsx(ColorRow, { name: "salmon", shades: primitives.salmon })] })),
 };

package/dist/docs/design/Spacing.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const AllTokens: Story;
+//# sourceMappingURL=Spacing.stories.d.ts.map

package/dist/docs/design/Spacing.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/design/Spacing.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAoBtB,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC"}

package/dist/docs/design/Spacing.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group } from '../../components/Layout/Group/Group';
+import { Stack } from '../../components/Layout/Stack/Stack';
+import { Text } from '../../components/Typography/Text/Text';
+import { spacing } from '../../constants/spacing';
+import { neutral } from '../../constants/colors';
+const meta = {
+    title: 'Design/Spacing',
+    tags: ['!dev'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const SpacingRow = ({ name, value }) => (_jsxs(Group, { gap: spacing.lg, align: "center", style: { width: '400px' }, children: [_jsx(Text, { variant: "label", style: { width: '60px', flexShrink: 0 }, children: _jsx("code", { children: name }) }), _jsx("div", { style: {
+                height: '24px',
+                width: value,
+                backgroundColor: neutral[200],
+                borderRadius: '3px',
+                flexShrink: 0,
+            } }), _jsx(Text, { variant: "caption", style: { color: neutral[200] }, children: value })] }));
+export const AllTokens = {
+    render: () => (_jsx(Stack, { gap: spacing.lg, align: "flex-start", children: Object.entries(spacing).map(([name, value]) => (_jsx(SpacingRow, { name: name, value: value }, name))) })),
+};

package/dist/hooks/useConfirmationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useConfirmationModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
+import { spacing } from '../constants/spacing';
 import { Title } from '../components/Typography/Title/Title';
 import { Stack } from '../components/Layout/Stack/Stack';
 import { Center } from '../components/Layout/Center/Center';
@@ -10,7 +11,7 @@ import { Button } from '../components/Inputs/Buttons/Button/Button';
 import { Group } from '../components/Layout/Group/Group';
 export const useConfirmationModal = () => {
     const show = (options) => {
-        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '40rem' } = options;
+        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '400px' } = options;
         const handleConfirm = () => {
             if (onConfirm)
                 onConfirm();
@@ -23,16 +24,16 @@ export const useConfirmationModal = () => {
         };
         const selectedVariant = modalVariants[variant];
         const iconContainer = {
-            width: '4.2rem',
-            height: '4.2rem',
+            width: '42px',
+            height: '42px',
             borderRadius: '50%',
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
-        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         const ConfirmModalContent = () => {
-            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
         };
         modals.open({
             children: _jsx(ConfirmModalContent, {}),
@@ -44,13 +45,13 @@ export const useConfirmationModal = () => {
                     boxShadow: '0px 0px 19px 0px #00000040',
                 },
                 header: {
-                    padding: '0.8rem',
+                    padding: spacing.sm,
                 },
                 close: {
                     borderRadius: '16px',
                     backgroundColor: neutral[50],
-                    width: '1.8rem',
-                    height: '1.8rem',
+                    width: '18px',
+                    height: '18px',
                     '&:hover': {
                         backgroundColor: neutral[50],
                     },
@@ -59,7 +60,7 @@ export const useConfirmationModal = () => {
                     },
                 },
                 body: {
-                    padding: '0 3.2rem 1.6rem 3.2rem',
+                    padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
                 },
             },
         });

package/dist/hooks/useInfoModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useInfoModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
+import { spacing } from '../constants/spacing';
 import { Title } from '../components/Typography/Title/Title';
 import { Stack } from '../components/Layout/Stack/Stack';
 import { Center } from '../components/Layout/Center/Center';
@@ -9,7 +10,7 @@ import { modalVariants } from '../components/Info/Modals/variants';
 import { Button } from '../components/Inputs/Buttons/Button/Button';
 export const useInfoModal = () => {
     const show = (options) => {
-        const { variant = 'info', title, message, icon, onConfirm, size = '35rem' } = options;
+        const { variant = 'info', title, message, icon, onConfirm, size = '350px' } = options;
         const handleConfirm = () => {
             if (onConfirm)
                 onConfirm();
@@ -17,16 +18,16 @@ export const useInfoModal = () => {
         };
         const selectedVariant = modalVariants[variant];
         const iconContainer = {
-            width: '4.2rem',
-            height: '4.2rem',
+            width: '42px',
+            height: '42px',
             borderRadius: '50%',
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
-        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         const InfoModalContent = () => {
-            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
         };
         modals.open({
             children: _jsx(InfoModalContent, {}),
@@ -38,13 +39,13 @@ export const useInfoModal = () => {
                     boxShadow: '0px 0px 19px 0px #00000040',
                 },
                 header: {
-                    padding: '0.8rem',
+                    padding: spacing.sm,
                 },
                 close: {
                     borderRadius: '16px',
                     backgroundColor: neutral[50],
-                    width: '1.8rem',
-                    height: '1.8rem',
+                    width: '18px',
+                    height: '18px',
                     '&:hover': {
                         backgroundColor: neutral[50],
                     },
@@ -53,7 +54,7 @@ export const useInfoModal = () => {
                     },
                 },
                 body: {
-                    padding: '0 3.2rem 1.6rem 3.2rem',
+                    padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
                 },
             },
         });

package/dist/hooks/useMediaQuery.d.ts

@@ -1,7 +1,7 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
-import { BREAKPOINTS } from '../constants/breakpoints';
+import { breakpoints } from '../constants/breakpoints';
 export declare const useMediaQuery: typeof useMantineMediaQuery;
-export declare const useScreenSize: () => keyof typeof BREAKPOINTS;
+export declare const useScreenSize: () => keyof typeof breakpoints;
 export declare const useMobile: () => boolean;
 export declare const useTablet: () => boolean;
 export declare const useLaptop: () => boolean;

package/dist/hooks/useMediaQuery.js

@@ -1,5 +1,5 @@
 import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
-import { BREAKPOINTS } from '../constants/breakpoints';
+import { breakpoints } from '../constants/breakpoints';
 export const useMediaQuery = useMantineMediaQuery;
 export const useScreenSize = () => {
     const isMobile = useMobile();
@@ -16,8 +16,8 @@ export const useScreenSize = () => {
         return 'DESKTOP';
     return 'WIDE';
 };
-export const useMobile = () => useMediaQuery(`(max-width: ${BREAKPOINTS.MOBILE}px)`);
-export const useTablet = () => useMediaQuery(`(max-width: ${BREAKPOINTS.TABLET}px)`);
-export const useLaptop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.LAPTOP}px)`);
-export const useDesktop = () => useMediaQuery(`(max-width: ${BREAKPOINTS.DESKTOP}px)`);
-export const useWide = () => useMediaQuery(`(max-width: ${BREAKPOINTS.WIDE}px)`);
+export const useMobile = () => useMediaQuery(`(max-width: ${breakpoints.MOBILE}px)`);
+export const useTablet = () => useMediaQuery(`(max-width: ${breakpoints.TABLET}px)`);
+export const useLaptop = () => useMediaQuery(`(max-width: ${breakpoints.LAPTOP}px)`);
+export const useDesktop = () => useMediaQuery(`(max-width: ${breakpoints.DESKTOP}px)`);
+export const useWide = () => useMediaQuery(`(max-width: ${breakpoints.WIDE}px)`);

package/package.json

@@ -1,24 +1,5 @@
 {
-  "name": "@taiv/ui",
-  "version": "1.13.0",
   "author": "Taiv",
-  "description": "Taiv's web UI Toolkit built on Mantine v6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/alborz-taiv/taiv-ui"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "npm link && tsc --watch",
-    "clean": "rm -rf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@mantine/core": "^6.0.0",
@@ -30,11 +11,9 @@
     "dayjs": "^1.11.18",
     "recharts": "^2.8.0"
   },
-  "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
-  },
+  "description": "Taiv's web UI Toolkit built on Mantine v6",
   "devDependencies": {
+    "@biomejs/biome": "2.4",
     "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-onboarding": "^10.3.3",
     "@storybook/react-vite": "^10.3.3",
@@ -46,9 +25,41 @@
   },
   "exports": {
     ".": "./dist/components/index.js",
-    "./hooks": "./dist/hooks/index.js",
     "./constants": "./dist/constants/index.js",
-    "./utils": "./dist/utils/index.js",
-    "./types": "./dist/types/index.js"
-  }
+    "./hooks": "./dist/hooks/index.js",
+    "./types": "./dist/types/index.js",
+    "./utils": "./dist/utils/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "name": "@taiv/ui",
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alborz-taiv/taiv-ui"
+  },
+  "scripts": {
+    "assist": "biome check --linter-enabled=false --formatter-enabled=false src",
+    "assist:fix": "biome check --linter-enabled=false --formatter-enabled=false --write src",
+    "biome:check": "biome check src",
+    "biome:check:path": "biome check",
+    "biome:fix": "biome check --write src",
+    "biome:fix:path": "biome check --write",
+    "build": "tsc",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf dist",
+    "dev": "npm link && tsc --watch",
+    "format": "biome check --linter-enabled=false --assist-enabled=false src",
+    "format:fix": "biome check --linter-enabled=false --assist-enabled=false --write src",
+    "lint": "biome check --formatter-enabled=false --assist-enabled=false src",
+    "lint:fix": "biome check --formatter-enabled=false --assist-enabled=false --write src",
+    "storybook": "storybook dev -p 6006"
+  },
+  "types": "dist/index.d.ts",
+  "version": "1.14.0"
 }