@jeromefitz/design-system 3.4.1 → 3.5.0-canary.3

package/{Alert-fc80a7a6.d.ts → Alert-2d248f02.d.ts}

@@ -12,38 +12,41 @@ declare const Alert: _stitches_react_types_styled_component.StyledComponent<"div
     };
     border: string;
     borderRadius: string;
+    color: string;
     variants: {
-        size: {
-            '1': {
-                p: string;
-            };
-        };
         variant: {
             loContrast: {
+                borderColor: string;
+            };
+            brand: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
             };
-            gray: {
+            error: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
             };
-            blue: {
+            info: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
             };
-            green: {
+            success: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
             };
-            red: {
+            warning: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
             };
         };
     };
     defaultVariants: {
-        size: "1";
-        variant: "gray";
+        variant: "loContrast";
     };
 }]>, {
     bp1: string;

package/{Badge-2b51a718.d.ts → Badge-b8768fb1.d.ts}

@@ -39,6 +39,11 @@ declare const Badge: _stitches_react_types_styled_component.StyledComponent<"spa
     borderRadius: string;
     whiteSpace: string;
     fontVariantNumeric: string;
+    fontVariationSettings: string;
+    fontWeight: string;
+    '@media (prefers-reduced-motion: no-preference)': {
+        transition: string;
+    };
     variants: {
         size: {
             '1': {
@@ -52,7 +57,28 @@ declare const Badge: _stitches_react_types_styled_component.StyledComponent<"spa
                 fontSize: string;
             };
         };
-        variant: {};
+        variant: {
+            red: {
+                backgroundColor: string;
+                color: string;
+            };
+            brand: {
+                backgroundColor: string;
+                color: string;
+            };
+            blue: {
+                backgroundColor: string;
+                color: string;
+            };
+            green: {
+                backgroundColor: string;
+                color: string;
+            };
+            orange: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
         interactive: {
             true: {};
         };
@@ -76,6 +102,7 @@ declare const Badge: _stitches_react_types_styled_component.StyledComponent<"spa
     }[];
     defaultVariants: {
         size: "1";
+        interactive: false;
     };
 }]>, {
     bp1: string;

package/{Callout-d5bb472d.d.ts → Callout-38709052.d.ts}

@@ -1,10 +1,10 @@
 import React__default from 'react';
 
-declare type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+declare type CalloutVariant = 'error' | 'info' | 'note' | 'quote' | 'success' | 'warning';
 interface CalloutProps {
     children: React__default.ReactNode;
     label?: React__default.ReactNode | string;
-    variant: CalloutVariant;
+    variant?: CalloutVariant;
 }
 
 declare const Callout: (props: CalloutProps) => JSX.Element;

package/Card-12bdd1c0.d.ts

@@ -0,0 +1,522 @@
+import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
+import * as _stitches_react_types_config from '@stitches/react/types/config';
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+
+declare const Card: _stitches_react_types_styled_component.StyledComponent<"div", _stitches_react_types_styled_component.StyledComponentProps<[{
+    appearance: string;
+    border: string;
+    boxSizing: string;
+    font: string;
+    lineHeight: string;
+    outline: string;
+    padding: number;
+    textAlign: string;
+    verticalAlign: string;
+    WebkitTapHighlightColor: string;
+    backgroundColor: string;
+    display: string;
+    textDecoration: string;
+    color: string;
+    flexShrink: number;
+    borderRadius: string;
+    position: string;
+    '&::before': {
+        boxSizing: string;
+        content: string;
+        position: string;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        boxShadow: string;
+        borderRadius: string;
+        pointerEvents: string;
+    };
+    variants: {
+        variant: {
+            interactive: {
+                '@hover': {
+                    '&:hover': {
+                        '&::before': {
+                            boxShadow: string;
+                        };
+                    };
+                };
+                '&:focus': {
+                    '&::before': {
+                        boxShadow: string;
+                    };
+                };
+            };
+            ghost: {
+                backgroundColor: string;
+                willChange: string;
+                '@media (prefers-reduced-motion: no-preference)': {
+                    transition: string;
+                };
+                '&::before': {
+                    boxShadow: string;
+                    opacity: string;
+                    '@media (prefers-reduced-motion: no-preference)': {
+                        transition: string;
+                    };
+                };
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                        transform: string;
+                        '&::before': {
+                            opacity: string;
+                        };
+                    };
+                };
+                '&:active': {
+                    transform: string;
+                    transition: string;
+                    '&::before': {
+                        boxShadow: string;
+                        opacity: string;
+                    };
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+            active: {
+                transform: string;
+                transition: string;
+                '&::before': {
+                    boxShadow: string;
+                    opacity: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+}]>, {
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
+}, _stitches_react_types_css_util.CSS<{
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
+}, {
+    borderWidths: unknown;
+    borderStyles: unknown;
+    colors: unknown;
+    fonts: {
+        'fallback-mono': string;
+        'fallback-sans': string;
+        'fallback-serif': string;
+        mono: string;
+        sans: string;
+        serif: string;
+    };
+    fontSizes: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    fontWeights: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    letterSpacings: unknown;
+    lineHeights: unknown;
+    radii: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        pill: string;
+        round: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        toast: string;
+    };
+    sizes: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    space: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+    };
+    transitions: unknown;
+    zIndices: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        max: string;
+        toast: string;
+    };
+    foo: {
+        bar: string;
+    };
+}, _stitches_react_types_config.DefaultThemeMap, {
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "padding";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "padding";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingTop";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "paddingTop";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingRight";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "paddingRight";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingBottom";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "paddingBottom";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingLeft";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "paddingLeft";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingLeft";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "paddingLeft";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "paddingLeft";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "paddingTop";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "paddingTop";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "paddingTop";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "margin";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "margin";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "marginTop";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "marginTop";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "marginRight";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "marginRight";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "marginBottom";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "marginBottom";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "marginLeft";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "marginLeft";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "marginLeft";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "marginLeft";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "marginLeft";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "marginTop";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "marginTop";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "marginTop";
+        };
+    };
+    ta: (value: string | number | {
+        readonly [$$ScaleValue]: "textAlign";
+    }) => {
+        textAlign: string | number | {
+            readonly [$$ScaleValue]: "textAlign";
+        };
+    };
+    fd: (value: string | number | {
+        readonly [$$ScaleValue]: "flexDirection";
+    }) => {
+        flexDirection: string | number | {
+            readonly [$$ScaleValue]: "flexDirection";
+        };
+    };
+    fw: (value: string | number | {
+        readonly [$$ScaleValue]: "flexWrap";
+    }) => {
+        flexWrap: string | number | {
+            readonly [$$ScaleValue]: "flexWrap";
+        };
+    };
+    ai: (value: string | number | {
+        readonly [$$ScaleValue]: "alignItems";
+    }) => {
+        alignItems: string | number | {
+            readonly [$$ScaleValue]: "alignItems";
+        };
+    };
+    ac: (value: string | number | {
+        readonly [$$ScaleValue]: "alignContent";
+    }) => {
+        alignContent: string | number | {
+            readonly [$$ScaleValue]: "alignContent";
+        };
+    };
+    jc: (value: string | number | {
+        readonly [$$ScaleValue]: "justifyContent";
+    }) => {
+        justifyContent: string | number | {
+            readonly [$$ScaleValue]: "justifyContent";
+        };
+    };
+    as: (value: string | number | {
+        readonly [$$ScaleValue]: "alignSelf";
+    }) => {
+        alignSelf: string | number | {
+            readonly [$$ScaleValue]: "alignSelf";
+        };
+    };
+    fg: (value: string | number | {
+        readonly [$$ScaleValue]: "flexGrow";
+    }) => {
+        flexGrow: string | number | {
+            readonly [$$ScaleValue]: "flexGrow";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$ScaleValue]: "flexShrink";
+    }) => {
+        flexShrink: string | number | {
+            readonly [$$ScaleValue]: "flexShrink";
+        };
+    };
+    fb: (value: string | number | {
+        readonly [$$ScaleValue]: "flexBasis";
+    }) => {
+        flexBasis: string | number | {
+            readonly [$$ScaleValue]: "flexBasis";
+        };
+    };
+    bc: (value: string | number | {
+        readonly [$$ScaleValue]: "backgroundColor";
+    }) => {
+        backgroundColor: string | number | {
+            readonly [$$ScaleValue]: "backgroundColor";
+        };
+    };
+    br: (value: string | number | {
+        readonly [$$ScaleValue]: "borderRadius";
+    }) => {
+        borderRadius: string | number | {
+            readonly [$$ScaleValue]: "borderRadius";
+        };
+    };
+    btrr: (value: string | number | {
+        readonly [$$ScaleValue]: "borderTopRightRadius";
+    }) => {
+        borderTopRightRadius: string | number | {
+            readonly [$$ScaleValue]: "borderTopRightRadius";
+        };
+    };
+    bbrr: (value: string | number | {
+        readonly [$$ScaleValue]: "borderBottomRightRadius";
+    }) => {
+        borderBottomRightRadius: string | number | {
+            readonly [$$ScaleValue]: "borderBottomRightRadius";
+        };
+    };
+    bblr: (value: string | number | {
+        readonly [$$ScaleValue]: "borderBottomLeftRadius";
+    }) => {
+        borderBottomLeftRadius: string | number | {
+            readonly [$$ScaleValue]: "borderBottomLeftRadius";
+        };
+    };
+    btlr: (value: string | number | {
+        readonly [$$ScaleValue]: "borderTopLeftRadius";
+    }) => {
+        borderTopLeftRadius: string | number | {
+            readonly [$$ScaleValue]: "borderTopLeftRadius";
+        };
+    };
+    bs: (value: string | number | {
+        readonly [$$ScaleValue]: "boxShadow";
+    }) => {
+        boxShadow: string | number | {
+            readonly [$$ScaleValue]: "boxShadow";
+        };
+    };
+    lh: (value: string | number | {
+        readonly [$$ScaleValue]: "lineHeight";
+    }) => {
+        lineHeight: string | number | {
+            readonly [$$ScaleValue]: "lineHeight";
+        };
+    };
+    ox: (value: string | number | {
+        readonly [$$ScaleValue]: "overflowX";
+    }) => {
+        overflowX: string | number | {
+            readonly [$$ScaleValue]: "overflowX";
+        };
+    };
+    oy: (value: string | number | {
+        readonly [$$ScaleValue]: "overflowY";
+    }) => {
+        overflowY: string | number | {
+            readonly [$$ScaleValue]: "overflowY";
+        };
+    };
+    pe: (value: string | number | {
+        readonly [$$ScaleValue]: "pointerEvents";
+    }) => {
+        pointerEvents: string | number | {
+            readonly [$$ScaleValue]: "pointerEvents";
+        };
+    };
+    us: (value: string | number | {
+        readonly [$$ScaleValue]: "userSelect";
+    }) => {
+        WebkitUserSelect: string | number | {
+            readonly [$$ScaleValue]: "userSelect";
+        };
+        userSelect: string | number | {
+            readonly [$$ScaleValue]: "userSelect";
+        };
+    };
+    userSelect: (value: string | number | {
+        readonly [$$ScaleValue]: "userSelect";
+    }) => {
+        WebkitUserSelect: string | number | {
+            readonly [$$ScaleValue]: "userSelect";
+        };
+        userSelect: string | number | {
+            readonly [$$ScaleValue]: "userSelect";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "width";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "width";
+        };
+        height: string | number | {
+            readonly [$$ScaleValue]: "width";
+        };
+    };
+    appearance: (value: string | number | {
+        readonly [$$ScaleValue]: "appearance";
+    }) => {
+        WebkitAppearance: string | number | {
+            readonly [$$ScaleValue]: "appearance";
+        };
+        appearance: string | number | {
+            readonly [$$ScaleValue]: "appearance";
+        };
+    };
+    backgroundClip: (value: string | number | {
+        readonly [$$ScaleValue]: "backgroundClip";
+    }) => {
+        WebkitBackgroundClip: string | number | {
+            readonly [$$ScaleValue]: "backgroundClip";
+        };
+        backgroundClip: string | number | {
+            readonly [$$ScaleValue]: "backgroundClip";
+        };
+    };
+}>>;
+
+export { Card as C };