@cruk/chakra-components 1.0.4 → 1.0.6-alpha.0

package/dist/types/src/theme/r4l/components/input.d.ts

@@ -2,16 +2,13 @@ export declare const inputTheme: {
     baseStyle?: {
         field: {
             fontFamily: string;
+            fontWeight: number;
             fontSize: {
                 base: "text.sm";
-                lg: "text.lg";
+                lg: "text.md";
             };
             borderRadius: string;
             cursor: string;
-            _placeholder: {
-                base: string;
-                lg: string;
-            };
         };
     };
     sizes?: {
@@ -20,70 +17,106 @@ export declare const inputTheme: {
         }>;
     };
     variants?: {
-        outline: {
+        outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
             field: {
                 height: {
                     base: "50px";
-                    lg: "53px";
+                    lg: "52px";
                 };
-                border: string;
+                py: string;
                 borderColor: string;
+                boxSizing: string;
+                transition: string;
                 _hover: {
-                    borderColor: string;
-                    borderWidth: string;
+                    "&:not(:focus):not(:disabled)": {
+                        borderColor: string;
+                        boxShadow: string;
+                        outline: number;
+                        transition: string;
+                        "&:not(:has(+ .chakra-input__left-element))": {
+                            px: string;
+                        };
+                    };
+                    "&:disabled": {
+                        borderColor: string;
+                        boxShadow: string;
+                    };
+                };
+                _groupHover: {
+                    "&:not(:focus):not(:disabled)": {
+                        borderColor: string;
+                        boxShadow: string;
+                        borderWidth: number;
+                        outline: number;
+                        transition: string;
+                        "&:not(:has(+ .chakra-input__left-element))": {
+                            px: string;
+                        };
+                    };
+                    "&:disabled": {
+                        borderColor: string;
+                        boxShadow: string;
+                    };
                 };
                 _placeholder: {
                     color: string;
-                    fontSize: string;
+                    fontSize: {
+                        base: "text.sm";
+                        lg: "text.md";
+                    };
+                };
+                _readOnly: {
+                    boxShadow: string;
+                    userSelect: string;
                 };
                 _focus: {
-                    borderWidth: string;
+                    zIndex: number;
                     borderColor: string;
-                    _placeholder: {
-                        color: string;
-                        fontSize: string;
+                    boxShadow: string;
+                    outline: number;
+                    borderWidth: number;
+                    "&:not(:has(+ .chakra-input__left-element))": {
+                        px: string;
                     };
                 };
                 _focusVisible: {
-                    borderWidth: string;
+                    zIndex: number;
                     borderColor: string;
                     boxShadow: string;
+                    outline: number;
                 };
                 _disabled: {
-                    borderWidth: string;
                     borderColor: string;
                     bg: string;
                     cursor: string;
                     opacity: string;
                     color: string;
-                    _hover: {
-                        boxShadow: string;
-                        borderWidth: string;
-                        borderColor: string;
-                    };
-                    _placeholder: {
-                        color: string;
-                        fontSize: string;
-                    };
+                    boxShadow: string;
                 };
                 _invalid: {
-                    borderWidth: string;
                     borderColor: string;
                     boxShadow: string;
                     _hover: {
                         borderColor: string;
                         boxShadow: string;
                     };
+                    _groupHover: {
+                        borderColor: string;
+                        boxShadow: string;
+                    };
                     _focus: {
                         borderColor: string;
+                        boxShadow: string;
                     };
                     _focusVisible: {
                         borderColor: string;
+                        boxShadow: string;
                     };
                 };
             };
             addon: {
                 fontFamily: string;
+                fontWeight: number;
                 fontSize: string;
                 borderRadius: string;
                 bg: string;
@@ -96,34 +129,60 @@ export declare const inputTheme: {
             };
             group: {
                 borderColor: string;
-                ".chakra-numberinput__field": {
-                    borderRadius: number;
-                    border: string;
-                    borderColor: string;
-                };
                 ".chakra-input__left-element": {
                     borderRight: string;
                     borderRightColor: string;
                     paddingX: number;
                     width: string;
                 };
+                ".chakra-input__right-addon": {
+                    borderWidth: string;
+                    borderColor: string;
+                    borderLeft: string;
+                    paddingX: number;
+                };
+                _groupHover: {
+                    ".chakra-input[disabled] + .chakra-input__right-addon": {
+                        borderColor: string;
+                        borderWidth: string;
+                        bg: string;
+                        cursor: string;
+                        opacity: string;
+                        color: string;
+                    };
+                    ".chakra-input__right-addon": {
+                        borderWidth: string;
+                        borderColor: string;
+                        px: string;
+                    };
+                };
                 _hover: {
-                    ".chakra-input__left-element": {
-                        borderRightColor: string;
+                    ".chakra-input__right-addon": {
+                        borderWidth: string;
+                        borderColor: string;
+                        px: string;
                     };
                 };
                 ".chakra-input:focus + .chakra-input__left-element": {
                     borderRightColor: string;
                 };
-                ".chakra-input[aria-invalid=true] + .chakra-input__left-element": {
-                    borderRightColor: string;
+                ".chakra-input:focus + .chakra-input__right-addon": {
+                    borderColor: string;
+                    borderWidth: string;
+                    px: string;
                 };
-                ".chakra-input[disabled] + .chakra-input__left-element": {
+                ".chakra-input[aria-invalid=true] + .chakra-input__right-addon": {
+                    borderColor: string;
+                    borderWidth: string;
+                    px: string;
+                };
+                ".chakra-input[aria-invalid=true] + .chakra-input__left-element": {
                     borderRightColor: string;
-                    color: string;
                 };
-                ".chakra-input__right-element + .chakra-icon": {
-                    color: string;
+                ".chakra-input[disabled] + .chakra-input__right-addon": {
+                    borderColor: string;
+                    backgroundColor: string;
+                    borderWidth: string;
                 };
             };
         };

package/dist/types/src/theme/r4l/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/input.ts"],"names":[],"mappings":"AA4IA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/input.ts"],"names":[],"mappings":"AAyMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/types/src/theme/r4l/components/link.d.ts

@@ -1,6 +1,7 @@
 export declare const linkTheme: {
     baseStyle?: {
         fontFamily: string;
+        fontWeight: number;
         color: string;
         textDecoration: string;
         fontSize: string;
@@ -25,7 +26,7 @@ export declare const linkTheme: {
     };
     variants?: {
         altInline: {
-            fontFamily: string;
+            fontWeight: number;
             color: string;
             textDecoration: string;
             fontSize: string;
@@ -47,6 +48,7 @@ export declare const linkTheme: {
         };
         navigation: {
             fontFamily: string;
+            fontWeight: number;
             color: string;
             textDecoration: string;
             _hover: {
@@ -62,6 +64,7 @@ export declare const linkTheme: {
         };
         navigationAlt: {
             fontFamily: string;
+            fontWeight: number;
             textDecoration: string;
             _hover: {
                 textDecoration: string;

package/dist/types/src/theme/r4l/components/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/types/src/theme/r4l/components/list.d.ts

@@ -0,0 +1,48 @@
+declare const listTheme: {
+    baseStyle?: {
+        container: {
+            paddingInlineStart: string;
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+        };
+        icon: {
+            marginEnd: number;
+            display: string;
+            verticalAlign: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "icon" | "item")[];
+        }>;
+    };
+    variants?: {
+        checklist: {
+            item: {
+                fontSize: {
+                    base: "text.sm";
+                    lg: "text.md";
+                };
+                display: string;
+                textOverflow: string;
+                paddingBottom: number;
+                marginBottom: number;
+                fontFamily: string;
+                fontWeight: number;
+                color: string;
+            };
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "checklist";
+        colorScheme?: string;
+    };
+    parts: ("container" | "icon" | "item")[];
+};
+export default listTheme;
+//# sourceMappingURL=list.d.ts.map

package/dist/types/src/theme/r4l/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/list.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/types/src/theme/r4l/components/popover.d.ts

@@ -0,0 +1,165 @@
+declare const popoverTheme: {
+    baseStyle?: {
+        content: {
+            fontFamily: string;
+            fontWeight: number;
+            borderRadius: string;
+            cursor: string;
+            backgroundColor: string;
+            border: number;
+            padding: string;
+            maxWidth: {
+                base: "unset";
+                lg: "480px";
+            };
+            fontSize: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            lineHeight: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            marginX: {
+                base: number;
+                xl: number;
+            };
+        };
+        arrow: {
+            border: string;
+            borderColor: string;
+        };
+        header: {
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontWeight: number;
+            letterSpacing: string;
+            border: string;
+            textAlign: string;
+            lineHeight: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            fontSize: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            width: string;
+            overlay: {
+                base: string;
+                lg: string;
+            };
+        };
+        body: {
+            backgroundColor: string;
+            color: string;
+            fontFamily: string;
+            fontWeight: number;
+            letterSpacing: string;
+            alignSelf: string;
+            border: string;
+            width: string;
+            height: string;
+            paddingInlineStart: string;
+            paddingInlineEnd: string;
+            fontSize: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            lineHeight: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            a: {
+                _visited: {
+                    color: string;
+                };
+                _hover: {
+                    color: string;
+                };
+                color: string;
+            };
+            "> div": {
+                " > p": {
+                    color: string;
+                    paddingBottom: string;
+                    "> span": {
+                        color: string;
+                    };
+                };
+            };
+        };
+        closeButton: {
+            top: string;
+            right: string;
+            height: string;
+            backgroundColor: string;
+            color: string;
+            "> svg": {
+                height: string;
+                width: string;
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("header" | "closeButton" | "body" | "footer" | "content" | "popper" | "arrow")[];
+        }>;
+    };
+    variants?: {
+        secondary: {
+            content: {
+                "--popper-arrow-size": string;
+                backgroundColor: string;
+                border: string;
+                borderLeft: string;
+                borderColor: string;
+                _focus: {
+                    boxShadow: string;
+                };
+                padding: number;
+                width: string;
+                maxWidth: {
+                    base: "350px";
+                    md: "450px";
+                    lg: "550px";
+                };
+            };
+            arrow: {
+                border: string;
+                backgroundColor: string;
+                borderColor: string;
+                "--popper-arrow-default-shadow": string;
+            };
+            header: {};
+            body: {
+                backgroundColor: string;
+                width: string;
+                maxWidth: {
+                    base: "350px";
+                    md: "450px";
+                    lg: "550px";
+                };
+                a: {
+                    _visited: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                    };
+                    color: string;
+                };
+            };
+            closeButton: {};
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "secondary";
+        colorScheme?: string;
+    };
+    parts: ("header" | "closeButton" | "body" | "footer" | "content" | "popper" | "arrow")[];
+};
+export default popoverTheme;
+//# sourceMappingURL=popover.d.ts.map

package/dist/types/src/theme/r4l/components/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/popover.ts"],"names":[],"mappings":"AAiGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqChB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/types/src/theme/r4l/components/select.d.ts

@@ -14,14 +14,16 @@ declare const selectTheme: {
                     base: "50px";
                     lg: "53px";
                 };
-                fontSize: {
-                    base: "text.sm";
-                    lg: "text.lg";
-                };
                 border: string;
                 borderColor: string;
                 borderRadius: string;
                 color: string;
+                fontFamily: string;
+                fontWeight: number;
+                fontSize: {
+                    base: "text.sm";
+                    lg: "text.md";
+                };
                 _hover: {
                     border: string;
                     borderColor: string;

package/dist/types/src/theme/r4l/components/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/select.ts"],"names":[],"mappings":"AAqEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGf,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/select.ts"],"names":[],"mappings":"AAuEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/types/src/theme/r4l/components/simpleHeader.d.ts

@@ -1,9 +1,39 @@
 export declare const simpleHeaderTheme: {
     baseStyle?: {
         backgroundColor: string;
-        padding: number;
+        padding: {
+            base: "8px";
+            md: "24px";
+            lg: "24px";
+            xl: "24px";
+        };
+        paddingLeft: {
+            base: "8px";
+            md: "24px";
+            lg: "32px";
+            xl: "32px";
+        };
+        paddingRight: {
+            base: "8px";
+            md: "24px";
+            lg: "32px";
+            xl: "32px";
+        };
+        paddingTop: {
+            base: "8px";
+            md: "24px";
+            lg: "24px";
+            xl: "24px";
+        };
+        paddingBottom: {
+            base: "8px";
+            md: "24px";
+            lg: "24px";
+            xl: "24px";
+        };
         "> h2": {
             fontFamily: string;
+            fontWeight: number;
             fontSize: {
                 base: "headings.lg";
                 lg: "headings.xl";
@@ -14,6 +44,41 @@ export declare const simpleHeaderTheme: {
             };
             marginTop: number;
         };
+        "> h1": {
+            fontWeight: number;
+        };
+        "& div": {
+            marginTop: {
+                base: "12px";
+                lg: "16px";
+                xl: "16px";
+            };
+            "> p": {
+                fontFamily: string;
+                fontWeight: number;
+                fontSize: {
+                    base: "headings.lg";
+                    lg: "headings.xl";
+                    xl: "headings.xl";
+                };
+                fontStyle: string;
+                lineHeight: {
+                    base: "36px";
+                    lg: "42px";
+                    xl: "42px";
+                };
+            };
+        };
+        "> .cta-btn": {
+            marginTop: {
+                base: "24px";
+                lg: "32px";
+                xl: "32px";
+            };
+            "> a": {
+                margin: number;
+            };
+        };
         "> hr": {
             width: string;
             height: string;

package/dist/types/src/theme/r4l/components/simpleHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/simpleHeader.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB5B,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"simpleHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/simpleHeader.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE5B,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/dist/types/src/theme/r4l/components/table.d.ts

@@ -0,0 +1,58 @@
+export declare const tableTheme: {
+    baseStyle?: {
+        table: {
+            th: {
+                fontFamily: string;
+                fontSize: {
+                    base: "text.md";
+                    lg: "text.lg";
+                };
+                color: string;
+                textTransform: string;
+                letterSpacing: string;
+                borderBottom: string;
+                py: number;
+                textAlign: string;
+                px: number;
+                padding: string;
+            };
+            "th p": {
+                fontFamily: string;
+                fontWeight: number;
+                color: string;
+            };
+            tr: {
+                borderBottom: string;
+            };
+            td: {
+                fontFamily: string;
+                fontSize: {
+                    base: "text.sm";
+                    lg: "text.md";
+                };
+                py: number;
+                px: number;
+                padding: string;
+            };
+            "tr > * + *": {
+                paddingLeft: number;
+            };
+            "td > * + *": {
+                paddingLeft: number;
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+};
+export default tableTheme;
+//# sourceMappingURL=table.d.ts.map

package/dist/types/src/theme/r4l/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/r4l/components/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/types/src/theme/r4l/components/tag.d.ts

@@ -5,7 +5,7 @@ declare const tagTheme: {
             borderRadius: string;
             color: string;
             fontFamily: string;
-            fontWeight: string;
+            fontWeight: number;
             fontSize: {
                 base: "text.xs";
                 lg: "text.sm";
@@ -26,7 +26,7 @@ declare const tagTheme: {
                 borderRadius: string;
                 color: string;
                 fontFamily: string;
-                fontWeight: string;
+                fontWeight: number;
                 fontSize: {
                     base: "text.xs";
                     lg: "text.sm";