@coveord/plasma-mantine 52.26.3 → 52.26.4

package/dist/esm/theme/Theme.js

@@ -1,68 +1,65 @@
-import { _ as _define_property } from "@swc/helpers/_/_define_property";
-import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckSize16Px, InfoSize24Px } from "@coveord/plasma-react-icons";
-import { color } from "@coveord/plasma-tokens";
-import { getSize, getStylesRef, rem } from "@mantine/core";
-import { PlasmaColors } from "./PlasmaColors";
-export var plasmaTheme = {
+import { CheckSize16Px, InfoSize24Px } from '@coveord/plasma-react-icons';
+import { color } from '@coveord/plasma-tokens';
+import { getSize, getStylesRef, rem } from '@mantine/core';
+import { PlasmaColors } from './PlasmaColors';
+export const plasmaTheme = {
     // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
-    colorScheme: "light",
-    fontFamily: "canada-type-gibson, sans-serif",
+    colorScheme: 'light',
+    fontFamily: 'canada-type-gibson, sans-serif',
     black: color.primary.gray[9],
     defaultRadius: 8,
     lineHeight: 1.5,
     spacing: {
-        xs: "8px",
-        sm: "16px",
-        md: "24px",
-        lg: "32px",
-        xl: "40px"
+        xs: '8px',
+        sm: '16px',
+        md: '24px',
+        lg: '32px',
+        xl: '40px'
     },
-    primaryColor: "action",
+    primaryColor: 'action',
     headings: {
-        fontFamily: "canada-type-gibson, sans-serif",
+        fontFamily: 'canada-type-gibson, sans-serif',
         fontWeight: 500,
         sizes: {
             h1: {
-                fontSize: "48px",
+                fontSize: '48px',
                 lineHeight: undefined,
                 fontWeight: 300
             },
             h2: {
-                fontSize: "32px",
+                fontSize: '32px',
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h3: {
-                fontSize: "24px",
+                fontSize: '24px',
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h4: {
-                fontSize: "18px",
+                fontSize: '18px',
                 lineHeight: undefined,
                 fontWeight: 300
             },
             h5: {
-                fontSize: "14px",
+                fontSize: '14px',
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h6: {
-                fontSize: "12px",
+                fontSize: '12px',
                 lineHeight: undefined,
                 fontWeight: 500
             }
         }
     },
     shadows: {
-        xs: "0px 1px 0px rgba(4, 8, 31, 0.08)",
-        sm: "0px 2px 4px rgba(4, 8, 31, 0.12)",
-        md: "0px 4px 8px rgba(4, 8, 31, 0.08)",
-        lg: "0px 8px 16px rgba(7, 12, 41, 0.06)",
-        xl: "0px 16px 24px rgba(4, 8, 31, 0.06)"
+        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',
+        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',
+        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',
+        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
+        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)'
     },
     colors: PlasmaColors,
     components: {
@@ -71,7 +68,7 @@ export var plasmaTheme = {
                 icon: /*#__PURE__*/ _jsx(InfoSize24Px, {
                     height: 24
                 }),
-                color: "navy"
+                color: 'navy'
             },
             styles: {
                 title: {
@@ -82,8 +79,8 @@ export var plasmaTheme = {
         Title: {
             styles: {
                 root: {
-                    "&:is(h1,h2,h3,h4,h5,h6)": {
-                        letterSpacing: "0.011em"
+                    '&:is(h1,h2,h3,h4,h5,h6)': {
+                        letterSpacing: '0.011em'
                     }
                 }
             }
@@ -92,72 +89,62 @@ export var plasmaTheme = {
             defaultProps: {
                 weight: 300
             },
-            styles: function(theme, param, param1) {
-                var ref = _object_destructuring_empty(param), size = param1.size;
-                return {
+            styles: (theme, {}, { size })=>({
                     root: {
                         fontSize: getSize({
-                            size: size !== null && size !== void 0 ? size : "sm",
+                            size: size ?? 'sm',
                             sizes: theme.fontSizes
                         })
                     }
-                };
-            }
+                })
         },
         Button: {
-            styles: function() {
-                return {
+            styles: ()=>({
                     root: {
                         fontWeight: 400
                     }
-                };
-            },
+                }),
             variants: {
-                outline: function() {
-                    return {
+                outline: ()=>({
                         root: {
-                            backgroundColor: "white"
+                            backgroundColor: 'white'
                         }
-                    };
-                }
+                    })
             }
         },
         Modal: {
-            styles: function(theme, param, param1) {
-                var fullScreen = param.fullScreen, padding = param.padding, size = param1.size, variant = param1.variant;
-                return {
+            styles: (theme, { fullScreen, padding }, { size, variant })=>({
                     content: {
-                        flex: fullScreen ? "0 0 100%" : "0 0 ".concat(getSize({
-                            size: size,
+                        flex: fullScreen ? '0 0 100%' : `0 0 ${getSize({
+                            size,
                             sizes: {
                                 xs: rem(432),
                                 sm: rem(664),
                                 md: rem(896),
                                 lg: rem(1120),
-                                xl: rem("88%")
+                                xl: rem('88%')
                             }
-                        })),
-                        overflow: "auto"
+                        })}`,
+                        overflow: 'auto'
                     },
                     title: {
-                        width: "100%",
+                        width: '100%',
                         fontSize: theme.headings.sizes.h3.fontSize,
                         lineHeight: theme.headings.sizes.h3.lineHeight,
                         fontWeight: 500
                     },
                     header: {
-                        borderBottom: variant !== "prompt" ? "1px solid ".concat(color.primary.gray[3]) : null
+                        borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null
                     },
                     body: {
-                        "&:not(:only-child)": {
-                            paddingTop: variant === "prompt" ? 0 : getSize({
+                        '&:not(:only-child)': {
+                            paddingTop: variant === 'prompt' ? 0 : getSize({
                                 size: padding,
                                 sizes: plasmaTheme.spacing
                             })
                         }
                     }
-                };
-            }
+                })
         },
         ModalOverlay: {
             defaultProps: {
@@ -169,8 +156,7 @@ export var plasmaTheme = {
             defaultProps: {
                 withAsterisk: false
             },
-            styles: function(theme) {
-                return {
+            styles: (theme)=>({
                     label: {
                         marginBottom: theme.spacing.xs
                     },
@@ -188,8 +174,7 @@ export var plasmaTheme = {
                         color: theme.colors.red[9],
                         lineHeight: theme.lineHeight
                     }
-                };
-            }
+                })
         },
         TextInput: {
             defaultProps: {
@@ -198,7 +183,7 @@ export var plasmaTheme = {
         },
         Tooltip: {
             defaultProps: {
-                color: "navy",
+                color: 'navy',
                 maw: 300,
                 multiline: true,
                 withArrow: true,
@@ -208,71 +193,67 @@ export var plasmaTheme = {
         },
         Loader: {
             defaultProps: {
-                variant: "dots",
-                color: "action"
+                variant: 'dots',
+                color: 'action'
             }
         },
         DateRangePicker: {
             styles: {
                 cell: {
-                    textAlign: "center"
+                    textAlign: 'center'
                 }
             }
         },
         Anchor: {
             defaultProps: {
-                color: "action.6"
+                color: 'action.6'
             },
-            styles: function(theme) {
-                return {
-                    root: _object_spread({}, theme.fn.hover({
-                        textDecoration: "underline",
-                        color: theme.colors.action[8]
-                    }))
-                };
-            }
+            styles: (theme)=>({
+                    root: {
+                        ...theme.fn.hover({
+                            textDecoration: 'underline',
+                            color: theme.colors.action[8]
+                        })
+                    }
+                })
         },
         Checkbox: {
             defaultProps: {
-                radius: "sm"
+                radius: 'sm'
             },
-            styles: function(theme) {
-                return {
+            styles: (theme)=>({
                     label: {
                         fontSize: theme.fontSizes.sm,
                         fontWeight: 300
                     }
-                };
-            }
+                })
         },
         List: {
-            styles: function() {
-                return {
+            styles: ()=>({
                     root: {
-                        listStyleType: "disc"
+                        listStyleType: 'disc'
                     }
-                };
-            }
+                })
         },
         Radio: {
             styles: {
                 labelWrapper: {
-                    display: "flex",
-                    alignItems: "flex-start"
+                    display: 'flex',
+                    alignItems: 'flex-start'
                 }
             }
         },
         Popover: {
             defaultProps: {
-                shadow: "md",
+                shadow: 'md',
                 withArrow: true
             }
         },
         Badge: {
             styles: {
                 root: {
-                    textTransform: "none",
-                    padding: "4px 8px",
+                    textTransform: 'none',
+                    padding: '4px 8px',
                     fontWeight: 500
                 }
             }
@@ -289,73 +270,65 @@ export var plasmaTheme = {
             }
         },
         Notification: {
-            styles: function(theme, param) {
-                var notificationType = param.color;
-                var _theme_colors;
-                return {
+            styles: (theme, { color: notificationType })=>({
                     root: {
                         borderColor: theme.colors.gray[3],
                         backgroundColor: theme.colors.gray[0],
                         boxShadow: theme.shadows.lg,
                         padding: theme.spacing.sm,
-                        "&[data-with-icon]": {
+                        '&[data-with-icon]': {
                             paddingLeft: theme.spacing.sm
                         }
                     },
                     icon: {
-                        backgroundColor: "transparent",
+                        backgroundColor: 'transparent',
                         marginRight: theme.spacing.sm,
-                        color: (_theme_colors = theme.colors) === null || _theme_colors === void 0 ? void 0 : _theme_colors[notificationType][6]
+                        color: theme.colors?.[notificationType][6]
                     },
                     closeButton: {
                         margin: theme.spacing.xs,
                         color: theme.colors.gray[5]
                     }
-                };
-            },
+                }),
             defaultProps: {
                 icon: /*#__PURE__*/ _jsx(InfoSize24Px, {
                     height: 24
                 }),
-                color: "info"
+                color: 'info'
             }
         },
         Skeleton: {
             styles: {
                 visible: {
-                    "&::before": {
-                        zIndex: "unset"
+                    '&::before': {
+                        zIndex: 'unset'
                     },
-                    "&::after": {
-                        zIndex: "unset"
+                    '&::after': {
+                        zIndex: 'unset'
                     }
                 }
             }
         },
         SegmentedControl: {
-            styles: function(theme) {
-                return {
+            styles: (theme)=>({
                     root: {
                         backgroundColor: theme.colors.gray[2]
                     }
-                };
-            }
+                })
         },
         Stepper: {
             defaultProps: {
-                size: "xs",
+                size: 'xs',
                 completedIcon: /*#__PURE__*/ _jsx(CheckSize16Px, {})
             },
-            styles: function(theme, param, param1) {
-                var ref = _object_destructuring_empty(param), size = param1.size;
-                return {
+            styles: (theme, {}, { size })=>({
                     step: {
-                        "&[disabled]": {
+                        '&[disabled]': {
                             color: theme.colors.gray[5],
-                            "& .mantine-Stepper-stepDescription": {
+                            '& .mantine-Stepper-stepDescription': {
                                 color: theme.colors.gray[5]
                             },
-                            "& .mantine-Stepper-stepIcon": {
+                            '& .mantine-Stepper-stepIcon': {
                                 borderColor: theme.colors.gray[1]
                             }
                         }
@@ -363,12 +336,12 @@ export var plasmaTheme = {
                     stepIcon: {
                         fontWeight: 500,
                         backgroundColor: theme.colors.gray[1],
-                        color: "inherit",
-                        border: "".concat(rem(1), " solid ").concat(theme.colors.gray[3]),
-                        "&[data-progress]": {
+                        color: 'inherit',
+                        border: `${rem(1)} solid ${theme.colors.gray[3]}`,
+                        '&[data-progress]': {
                             backgroundColor: theme.white
                         },
-                        "&[data-completed]": {
+                        '&[data-completed]': {
                             backgroundColor: theme.white,
                             borderColor: theme.colors.lime[6],
                             color: theme.colors.lime[6]
@@ -381,7 +354,7 @@ export var plasmaTheme = {
                     stepDescription: {
                         color: theme.colors.gray[7],
                         fontSize: getSize({
-                            size: size,
+                            size,
                             sizes: theme.fontSizes
                         })
                     },
@@ -393,86 +366,84 @@ export var plasmaTheme = {
                         backgroundColor: theme.colors.gray[3]
                     },
                     verticalSeparator: {
-                        borderLeft: "".concat(rem(1), " solid ").concat(theme.colors.gray[3])
+                        borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`
                     },
                     verticalSeparatorActive: {
                         borderColor: theme.colors.gray[3]
                     }
-                };
-            }
+                })
         },
         Tabs: {
-            styles: function(theme, param) {
-                var orientation = param.orientation;
-                var _obj;
-                return {
-                    tabsList: _define_property({}, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat(rem(1), " solid ").concat(theme.colors.gray[3])),
-                    tab: (_obj = {}, _define_property(_obj, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat(rem(1), " solid transparent")), _define_property(_obj, orientation === "horizontal" ? "marginBottom" : "marginRight", rem(-1)), _obj)
-                };
-            }
+            styles: (theme, { orientation })=>({
+                    tabsList: {
+                        [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${theme.colors.gray[3]}`
+                    },
+                    tab: {
+                        [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,
+                        [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1)
+                    }
+                })
         },
         Select: {
-            styles: function(theme) {
-                return {
+            styles: (theme)=>({
                     input: {
-                        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7]
+                        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7]
                     },
                     item: {
-                        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-                        "&[data-hovered]": {
-                            backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
+                        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+                        '&[data-hovered]': {
+                            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1]
                         },
-                        "&[data-selected]": _object_spread({
+                        '&[data-selected]': {
                             backgroundColor: theme.fn.variant({
-                                variant: "light"
+                                variant: 'light'
                             }).background,
                             color: theme.fn.variant({
-                                variant: "light"
-                            }).color
-                        }, theme.fn.hover({
-                            backgroundColor: theme.fn.variant({
-                                variant: "light"
-                            }).hover
-                        }))
+                                variant: 'light'
+                            }).color,
+                            ...theme.fn.hover({
+                                backgroundColor: theme.fn.variant({
+                                    variant: 'light'
+                                }).hover
+                            })
+                        }
                     }
-                };
-            }
+                })
         },
         NavLink: {
-            styles: function(theme) {
-                return {
-                    root: _object_spread({
+            styles: (theme)=>({
+                    root: {
                         color: theme.colors.gray[6],
-                        borderRadius: "".concat(theme.defaultRadius, "px 0px 0px ").concat(theme.defaultRadius, "px")
-                    }, theme.fn.hover({
-                        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-                    })),
+                        borderRadius: `${theme.defaultRadius}px 0px 0px ${theme.defaultRadius}px`,
+                        ...theme.fn.hover({
+                            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+                        })
+                    },
                     label: {
-                        ref: getStylesRef("label"),
+                        ref: getStylesRef('label'),
                         fontWeight: 500
                     },
-                    children: _define_property({}, ".".concat(getStylesRef("label")), {
-                        fontWeight: 300
-                    })
-                };
-            }
+                    children: {
+                        [`.${getStylesRef('label')}`]: {
+                            fontWeight: 300
+                        }
+                    }
+                })
         },
         Navbar: {
-            styles: function(theme) {
-                return {
+            styles: (theme)=>({
                     root: {
                         borderColor: theme.colors.gray[3]
                     }
-                };
-            }
+                })
         },
         ScrollArea: {
             styles: {
                 viewport: {
                     // https://github.com/radix-ui/primitives/issues/926
-                    "&[data-radix-scroll-area-viewport]": {
-                        "& > :first-of-type": {
-                            display: "block !important"
+                    '&[data-radix-scroll-area-viewport]': {
+                        '& > :first-of-type': {
+                            display: 'block !important'
                         }
                     }
                 }
@@ -480,7 +451,7 @@ export var plasmaTheme = {
         },
         Divider: {
             defaultProps: {
-                color: "gray.3"
+                color: 'gray.3'
             }
         }
     }