@alveole/components 0.13.2 → 0.14.1

package/dist/ui/Button/Button.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ActivityIndicator, Pressable } from 'react-native';
+import { Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Button.styles';
+export const Button = React.forwardRef(function Button(props, ref) {
+    const { title, type, size, variant, disabled, startIcon, endIcon, noPadding, borderNone, leftAlign, isLoading, ContainerProps = {}, ...buttonProps } = props;
+    const { style, hoverStyle, ...containerProps } = ContainerProps;
+    const styles = useStyles();
+    const containerSize = size === 'sm'
+        ? styles.smContainer
+        : size === 'lg'
+            ? styles.lgContainer
+            : size === 'xs'
+                ? styles.xsContainer
+                : styles.mdContainer;
+    const titleSize = size === 'sm' ? styles.smTitle : size === 'lg' ? styles.lgTitle : size === 'xs' ? styles.xsTitle : styles.mdTitle;
+    const noPaddingStyle = { paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 };
+    const buttonContainerStyle = () => {
+        let applicableStyles = {
+            ...styles.container,
+            ...(startIcon
+                ? size === 'sm'
+                    ? styles.smContainerStartIcon
+                    : size === 'lg'
+                        ? styles.lgContainerStartIcon
+                        : styles.mdContainerStartIcon
+                : {}),
+            ...(endIcon
+                ? size === 'sm'
+                    ? styles.smContainerEndIcon
+                    : size === 'lg'
+                        ? styles.lgContainerEndIcon
+                        : styles.mdContainerEndIcon
+                : {}),
+        };
+        if (variant === 'primary') {
+            applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
+        }
+        else if (variant === 'secondary') {
+            applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
+        }
+        else if (variant === 'tertiary') {
+            applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
+        }
+        else if (variant === 'link') {
+            applicableStyles = { ...applicableStyles, ...styles.linkContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
+        }
+        return {
+            ...applicableStyles,
+            ...containerSize,
+            ...(noPadding ? noPaddingStyle : {}),
+            ...(borderNone ? { borderRadius: 0 } : {}),
+            ...(leftAlign ? { justifyContent: 'left' } : {}),
+        };
+    };
+    const buttonContainerHoverStyle = () => {
+        if (disabled)
+            return {};
+        if (variant === 'primary')
+            return styles.primaryContainerHover;
+        else if (variant === 'secondary')
+            return styles.secondaryContainerHover;
+        else if (variant === 'tertiary')
+            return styles.tertiaryContainerHover;
+        else if (variant === 'link')
+            return styles.linkContainerHover;
+    };
+    const textStyle = (state) => {
+        let applicableStyles = styles.title;
+        if (variant === 'primary') {
+            applicableStyles = { ...applicableStyles, ...styles.primaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.primaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.primaryTitleHover };
+        }
+        else if (variant === 'secondary') {
+            applicableStyles = { ...applicableStyles, ...styles.secondaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleHover };
+        }
+        else if (variant === 'tertiary') {
+            applicableStyles = { ...applicableStyles, ...styles.tertiaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleHover };
+        }
+        else if (variant === 'link') {
+            applicableStyles = { ...applicableStyles, ...styles.linkTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.linkTitleHover };
+        }
+        return { ...applicableStyles, ...titleSize };
+    };
+    const iconStyle = (state) => {
+        const iconSize = size === 'lg' ? 'md' : 'sm';
+        if (variant === 'primary') {
+            if (disabled)
+                return { size: iconSize, color: styles.primaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.primaryIconHover.color };
+            return { size: iconSize, color: styles.primaryIcon.color };
+        }
+        else if (variant === 'secondary') {
+            if (disabled)
+                return { size: iconSize, color: styles.secondaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.secondaryIconHover.color };
+            return { size: iconSize, color: styles.secondaryIcon.color };
+        }
+        else if (variant === 'tertiary') {
+            if (disabled)
+                return { size: iconSize, color: styles.tertiaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.tertiaryIconHover.color };
+            return { size: iconSize, color: styles.tertiaryIcon.color };
+        }
+        else if (variant === 'link') {
+            if (state.hovered)
+                return { size: iconSize, color: styles.linkTitleHover.color };
+            return { size: iconSize, color: styles.linkIcon.color };
+        }
+        return { size: iconSize };
+    };
+    return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...buttonProps, children: (state) => (_jsxs(Box, { style: [buttonContainerStyle(), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": false, style: textStyle({ hovered: !!state.hovered }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
+});

package/dist/ui/Button/Button.stories.d.ts

@@ -0,0 +1,249 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").PressableProps, "children" | "style"> & {
+        title: string;
+        size?: "xs" | "sm" | "md" | "lg";
+        variant: "primary" | "secondary" | "tertiary" | "link";
+        startIcon?: import("..").IconProps["name"];
+        endIcon?: import("..").IconProps["name"];
+        ContainerProps?: import("../..").BoxProps;
+        noPadding?: boolean;
+        borderNone?: boolean;
+        leftAlign?: boolean;
+        type?: "button" | "submit";
+        isLoading?: boolean;
+    } & import("react").RefAttributes<import("react-native").View>>;
+    styleFn: () => {
+        container: {
+            borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "center";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            marginTop: string;
+            marginBottom: string;
+        };
+        buttonLoader: {
+            position: "absolute";
+            right: import("@alveole/theme").Spacing;
+        };
+        title: {
+            cursor: "pointer";
+            minWidth: import("@alveole/theme").Spacing;
+            textAlign: "center";
+        };
+        primaryTitle: {
+            color: "#F2F9FF";
+        };
+        primaryContainer: {
+            backgroundColor: "#002764";
+        } | {
+            shadowColor: import("@alveole/theme").Color;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+            backgroundColor: "#002764";
+        } | {
+            boxShadow: string;
+            backgroundColor: "#002764";
+        };
+        primaryTitleHover: {
+            color: "#F2F9FF";
+        };
+        primaryContainerHover: {
+            backgroundColor: "#0048AC";
+        };
+        secondaryTitle: {
+            color: "#151617";
+        };
+        secondaryContainer: {
+            borderWidth: number;
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+        };
+        secondaryTitleHover: {
+            color: "#151617";
+        };
+        secondaryContainerHover: {
+            borderColor: "#DEE3EC";
+            backgroundColor: "rgba(0, 0, 0, 0.04)";
+        };
+        tertiaryTitle: {
+            color: "#151617";
+        };
+        tertiaryContainer: {};
+        tertiaryTitleHover: {
+            color: "#151617";
+        };
+        tertiaryContainerHover: {
+            backgroundColor: "rgba(0, 0, 0, 0.04)";
+        };
+        linkTitle: {
+            color: "#076D8A";
+        };
+        linkContainer: {
+            backgroundColor: "transparent";
+        };
+        linkTitleHover: {
+            color: "#076D8A";
+        };
+        linkContainerHover: {
+            backgroundColor: "transparent";
+        };
+        xsContainer: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        smContainer: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        mdContainer: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        lgContainer: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        smContainerIconOnly: {
+            padding: import("@alveole/theme").Spacing;
+        };
+        mdContainerIconOnly: {
+            padding: import("@alveole/theme").Spacing;
+        };
+        lgContainerIconOnly: {
+            padding: import("@alveole/theme").Spacing;
+        };
+        xsTitle: {
+            readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            readonly fontSize: 12;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0;
+        };
+        smTitle: {
+            readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0;
+        };
+        mdTitle: {
+            readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0;
+        };
+        lgTitle: {
+            readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0;
+        };
+        smContainerStartIcon: {
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        mdContainerStartIcon: {
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        lgContainerStartIcon: {
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        smContainerEndIcon: {
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        mdContainerEndIcon: {
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        lgContainerEndIcon: {
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        primaryTitleDisabled: {
+            cursor: "not-allowed";
+            color: "#8D97AC";
+        };
+        primaryContainerDisabled: {
+            cursor: "not-allowed";
+            backgroundColor: "#E6EAF1";
+        };
+        secondaryTitleDisabled: {
+            cursor: "not-allowed";
+            color: "#8D97AC";
+        };
+        secondaryContainerDisabled: {
+            cursor: "not-allowed";
+        };
+        tertiaryTitleDisabled: {
+            cursor: "not-allowed";
+            color: "#8D97AC";
+        };
+        tertiaryContainerDisabled: {
+            cursor: "not-allowed";
+        };
+        primaryIcon: {
+            color: "#F2F9FF";
+        };
+        primaryIconHover: {
+            color: "#F2F9FF";
+        };
+        primaryIconDisabled: {
+            color: "#8D97AC";
+        };
+        secondaryIcon: {
+            color: "#151617";
+        };
+        secondaryIconHover: {
+            color: "#151617";
+        };
+        secondaryIconDisabled: {
+            color: "#8D97AC";
+        };
+        tertiaryIcon: {
+            color: "#151617";
+        };
+        tertiaryIconHover: {
+            color: "#151617";
+        };
+        tertiaryIconDisabled: {
+            color: "#8D97AC";
+        };
+        linkIcon: {
+            color: "#076D8A";
+        };
+    };
+};
+export default _default;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Primary: () => import("react/jsx-runtime").JSX.Element;
+export declare const Secondary: () => import("react/jsx-runtime").JSX.Element;
+export declare const Tertiary: () => import("react/jsx-runtime").JSX.Element;
+export declare const Link: () => import("react/jsx-runtime").JSX.Element;
+export declare const Icons: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/ui/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC"}

package/dist/ui/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Button } from './Button';
+import { useStyles } from './Button.styles';
+import { ButtonIcon } from './ButtonIcon';
+export default {
+    title: 'Button',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-548',
+    description: 'Boutons de type Pressable (React Native) avec différentes tailles et variants.',
+    component: Button,
+    styleFn: useStyles,
+};
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Bouton sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Bouton md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Bouton lg" })] }));
+export const Primary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Bouton primary" }), _jsx(Button, { variant: "primary", title: "Disabled", disabled: true })] }));
+export const Secondary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", title: "Bouton secondary" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true })] }));
+export const Tertiary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "tertiary", title: "Bouton tertiary" }), _jsx(Button, { variant: "tertiary", title: "Disabled", disabled: true })] }));
+export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true })] }));
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Start Icon", startIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" })] }));

package/dist/ui/Button/Button.styles.d.ts

@@ -0,0 +1,222 @@
+export declare const useStyles: () => {
+    container: {
+        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        marginTop: string;
+        marginBottom: string;
+    };
+    buttonLoader: {
+        position: "absolute";
+        right: import("@alveole/theme").Spacing;
+    };
+    title: {
+        cursor: "pointer";
+        minWidth: import("@alveole/theme").Spacing;
+        textAlign: "center";
+    };
+    primaryTitle: {
+        color: "#F2F9FF";
+    };
+    primaryContainer: {
+        backgroundColor: "#002764";
+    } | {
+        shadowColor: import("@alveole/theme").Color;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: "#002764";
+    } | {
+        boxShadow: string;
+        backgroundColor: "#002764";
+    };
+    primaryTitleHover: {
+        color: "#F2F9FF";
+    };
+    primaryContainerHover: {
+        backgroundColor: "#0048AC";
+    };
+    secondaryTitle: {
+        color: "#151617";
+    };
+    secondaryContainer: {
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+    };
+    secondaryTitleHover: {
+        color: "#151617";
+    };
+    secondaryContainerHover: {
+        borderColor: "#DEE3EC";
+        backgroundColor: "rgba(0, 0, 0, 0.04)";
+    };
+    tertiaryTitle: {
+        color: "#151617";
+    };
+    tertiaryContainer: {};
+    tertiaryTitleHover: {
+        color: "#151617";
+    };
+    tertiaryContainerHover: {
+        backgroundColor: "rgba(0, 0, 0, 0.04)";
+    };
+    linkTitle: {
+        color: "#076D8A";
+    };
+    linkContainer: {
+        backgroundColor: "transparent";
+    };
+    linkTitleHover: {
+        color: "#076D8A";
+    };
+    linkContainerHover: {
+        backgroundColor: "transparent";
+    };
+    xsContainer: {
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    smContainer: {
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    mdContainer: {
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    lgContainer: {
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    smContainerIconOnly: {
+        padding: import("@alveole/theme").Spacing;
+    };
+    mdContainerIconOnly: {
+        padding: import("@alveole/theme").Spacing;
+    };
+    lgContainerIconOnly: {
+        padding: import("@alveole/theme").Spacing;
+    };
+    xsTitle: {
+        readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        readonly fontSize: 12;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    smTitle: {
+        readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        readonly fontSize: 14;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    mdTitle: {
+        readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        readonly fontSize: 14;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    lgTitle: {
+        readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        readonly fontSize: 16;
+        readonly lineHeight: 24;
+        readonly letterSpacing: 0;
+    };
+    smContainerStartIcon: {
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    mdContainerStartIcon: {
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    lgContainerStartIcon: {
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    smContainerEndIcon: {
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    mdContainerEndIcon: {
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    lgContainerEndIcon: {
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    primaryTitleDisabled: {
+        cursor: "not-allowed";
+        color: "#8D97AC";
+    };
+    primaryContainerDisabled: {
+        cursor: "not-allowed";
+        backgroundColor: "#E6EAF1";
+    };
+    secondaryTitleDisabled: {
+        cursor: "not-allowed";
+        color: "#8D97AC";
+    };
+    secondaryContainerDisabled: {
+        cursor: "not-allowed";
+    };
+    tertiaryTitleDisabled: {
+        cursor: "not-allowed";
+        color: "#8D97AC";
+    };
+    tertiaryContainerDisabled: {
+        cursor: "not-allowed";
+    };
+    primaryIcon: {
+        color: "#F2F9FF";
+    };
+    primaryIconHover: {
+        color: "#F2F9FF";
+    };
+    primaryIconDisabled: {
+        color: "#8D97AC";
+    };
+    secondaryIcon: {
+        color: "#151617";
+    };
+    secondaryIconHover: {
+        color: "#151617";
+    };
+    secondaryIconDisabled: {
+        color: "#8D97AC";
+    };
+    tertiaryIcon: {
+        color: "#151617";
+    };
+    tertiaryIconHover: {
+        color: "#151617";
+    };
+    tertiaryIconDisabled: {
+        color: "#8D97AC";
+    };
+    linkIcon: {
+        color: "#076D8A";
+    };
+};
+//# sourceMappingURL=Button.styles.d.ts.map

package/dist/ui/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MnB,CAAC"}