@commercetools/nimbus 2.0.1-rc2 → 2.0.1-rc4

package/dist/theme/slot-recipes/index.d.ts

@@ -0,0 +1,1489 @@
+/**
+ * Keys for the slotRecipes object MUST be a valid JS identifier!!!!!!!!!!
+ *
+ * you MUST be able to access the key with dot notation: ✅ slotRecipes.exampleComponent ✅
+ * NOT with bracket notation: ❌ slotRecipes["example-component"] ❌
+ *
+ * Failure to do so will make it so that `pnpm build-theme-typings` will fail silently
+ * due to some truly awful interplay between `@chakra-ui/cli` and `prettier`
+ *
+ * Silent failure results in there being no generated types for slot recipes, and causes all kinds of
+ * false typescript errors that are really hard to debug. */
+export declare const slotRecipes: {
+    accordion: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "disclosure" | "trigger" | "panel" | "accordionTitle" | "headerContentRight", {
+        size: {
+            md: {
+                trigger: {
+                    "--font-size": "fontSizes.500";
+                    "& svg": {
+                        "--width": "sizes.600";
+                        "--height": "sizes.600";
+                    };
+                };
+                panel: {
+                    "--padding-top": "spacing.600";
+                    "--padding-bottom": "spacing.800";
+                    "--padding-left": "spacing.800";
+                };
+            };
+            sm: {
+                trigger: {
+                    "--font-size": "fontSizes.400";
+                    "& svg": {
+                        "--width": "sizes.500";
+                        "--height": "sizes.500";
+                    };
+                };
+                panel: {
+                    "--padding-top": "spacing.400";
+                    "--padding-bottom": "spacing.600";
+                    "--padding-left": "spacing.700";
+                };
+            };
+        };
+    }>;
+    alert: import('@chakra-ui/react').SlotRecipeDefinition<"description" | "root" | "icon" | "title" | "actions" | "dismissButton", {
+        tone: {
+            critical: {
+                root: {
+                    colorPalette: "critical";
+                };
+            };
+            info: {
+                root: {
+                    colorPalette: "info";
+                };
+            };
+            warning: {
+                root: {
+                    colorPalette: "amber";
+                };
+            };
+            positive: {
+                root: {
+                    colorPalette: "positive";
+                };
+            };
+        };
+        variant: {
+            flat: {};
+            outlined: {
+                root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.5";
+                    backgroundColor: "colorPalette.2";
+                    padding: "200";
+                    borderRadius: "200";
+                };
+            };
+        };
+    }>;
+    calendar: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "root" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "root" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
+    rangeCalendar: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "root" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "root" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
+    dateInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", {
+        size: {
+            sm: {
+                root: {
+                    h: "800";
+                    textStyle: "sm";
+                    px: "300";
+                    gap: "100";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    h: "1000";
+                    textStyle: "md";
+                    px: "400";
+                    gap: "200";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "neutral.1";
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+            ghost: {
+                root: {
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+            plain: {
+                root: {
+                    px: "0";
+                    outline: "none!";
+                    boxShadow: "none!";
+                    bg: "transparent!";
+                };
+            };
+        };
+    }>;
+    dateRangePicker: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "popover" | "group" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", {
+        size: {
+            sm: {
+                group: {
+                    height: "800";
+                    pr: "calc({spacing.1400} + {spacing.400})";
+                };
+                trigger: {
+                    top: "50";
+                };
+            };
+            md: {
+                group: {
+                    height: "1000";
+                    pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})";
+                };
+                trigger: {
+                    top: "100";
+                };
+            };
+        };
+        variant: {
+            solid: {};
+            ghost: {
+                group: {
+                    bg: "transparent";
+                    px: "300";
+                    _hover: {
+                        bg: "primary.2";
+                    };
+                };
+            };
+        };
+    }>;
+    datePicker: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "popover" | "group" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", {
+        size: {
+            sm: {};
+            md: {};
+        };
+        variant: {
+            solid: {};
+            ghost: {};
+        };
+    }>;
+    dataTable: import('@chakra-ui/react').SlotRecipeDefinition<"table" | "cell" | "body" | "root" | "column" | "row" | "header" | "footer" | "selectionCell" | "expandButton" | "nestedIcon" | "headerSortIcon" | "columnResizer", {
+        truncated: {
+            true: {
+                root: {
+                    "& .truncated-cell": {
+                        maxWidth: "200px";
+                        overflow: "hidden";
+                        textOverflow: "ellipsis";
+                        whiteSpace: "nowrap";
+                    };
+                };
+            };
+        };
+        density: {
+            default: {
+                cell: {
+                    paddingTop: "400";
+                    paddingBottom: "400";
+                };
+            };
+            condensed: {
+                cell: {
+                    paddingTop: "300";
+                    paddingBottom: "300";
+                };
+            };
+        };
+    }>;
+    radioInput: import('@chakra-ui/react').SlotRecipeDefinition<"option" | "root", {
+        orientation: {
+            horizontal: {
+                root: {
+                    flexDirection: "row";
+                    gap: "600";
+                };
+            };
+            vertical: {
+                root: {
+                    flexDirection: "column";
+                    alignItems: "flex-start";
+                    gap: "400";
+                };
+            };
+        };
+    }>;
+    combobox: import('@chakra-ui/react').SlotRecipeDefinition<"option" | "value" | "root" | "leadingElement" | "options" | "optionGroup" | "buttonGroup" | "popover" | "multiSelectInput" | "optionIndicator" | "optionContent", {
+        size: {
+            sm: {
+                value: {
+                    minH: "800";
+                    textStyle: "sm";
+                    pl: "calc(var(--leading-element-width) + {sizes.100})";
+                };
+                leadingElement: {
+                    minH: "800";
+                    pl: "300";
+                };
+            };
+            md: {
+                value: {
+                    minH: "1000";
+                    textStyle: "md";
+                    pl: "calc(var(--leading-element-width) + {sizes.200})";
+                };
+                leadingElement: {
+                    minH: "1000";
+                    pl: "400";
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    width: "7200";
+                };
+                value: {
+                    width: "100%";
+                    "--border-width"?: "sizes.25" | undefined;
+                    "--border-color"?: "colors.neutral.7" | undefined;
+                };
+            };
+            ghost: {
+                root: {
+                    maxW: "7200";
+                    bg?: "transparent" | undefined;
+                    "&:hover"?: {
+                        bg: "primaryAlpha.2";
+                    } | undefined;
+                };
+                value: {
+                    bg: "transparent";
+                    "--border-width"?: "sizes.25" | undefined;
+                    "--border-color"?: "transparent" | undefined;
+                };
+            };
+        };
+        selectionMode: {
+            multiple: {
+                options: {
+                    boxShadow: "none";
+                    px: "200";
+                    my: "200";
+                    minW: "unset";
+                    "& section:first-of-type > header": {
+                        mt: number;
+                    };
+                };
+                option: {
+                    colorPalette: "primary";
+                    display: "flex";
+                    alignItems: "flex-start";
+                    justifyContent: "center";
+                    position: "relative";
+                    cursor: "pointer";
+                    gap: "200";
+                    mb: "var(--focus-ring-width)";
+                    "&:last-of-type": {
+                        mb: number;
+                    };
+                    '&[aria-selected="true"]': {
+                        bg: "unset";
+                    };
+                    '&[data-focused="true"]': {
+                        outlineWidth: "var(--focus-ring-width)";
+                        outlineColor: "var(--focus-ring-color)";
+                        outlineStyle: "var(--focus-ring-style)";
+                        bg: "unset";
+                    };
+                    _hover: {
+                        bg: "primary.2";
+                    };
+                };
+            };
+            single: {};
+            none: {};
+        };
+    }>;
+    progressBar: import('@chakra-ui/react').SlotRecipeDefinition<"fill" | "value" | "root" | "label" | "track", {
+        size: {
+            "2xs": {
+                root: {
+                    "--progress-bar-radius": "{radii.300}";
+                    "--progress-bar-font-size": "{fontSizes.350}";
+                    "--progress-bar-height": "{sizes.300}";
+                    "--progress-bar-line-height": "{fontSizes.500}";
+                };
+            };
+            md: {
+                root: {
+                    "--progress-bar-radius": "{radii.600}";
+                    "--progress-bar-font-size": "{fontSizes.400}";
+                    "--progress-bar-height": "{sizes.600}";
+                    "--progress-bar-line-height": "{fontSizes.600}";
+                };
+            };
+        };
+        isDynamic: {
+            true: {
+                fill: {
+                    "--progress-bar-animation": "gradient-shimmer 4s ease-in-out infinite";
+                    "&[data-complete='true']": {
+                        "--progress-bar-animation": "none";
+                    };
+                };
+            };
+        };
+        isIndeterminate: {
+            true: {
+                fill: {
+                    "--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite";
+                    width: "40% !important";
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--progress-bar-text-color": "{colors.neutral.12}";
+                    "--progress-bar-track-bg": "{colors.neutralAlpha.3}";
+                };
+            };
+            contrast: {
+                root: {
+                    "--progress-bar-text-color": "{colors.colorPalette.contrast}";
+                    "--progress-bar-track-bg": "{colors.colorPalette.contrast/15}";
+                };
+                fill: {
+                    bgImage: "linear-gradient(90deg, {colors.colorPalette.contrast/25}, {colors.colorPalette.contrast}, {colors.colorPalette.contrast/25})";
+                };
+            };
+        };
+        layout: {
+            minimal: {
+                label: {
+                    display: "none";
+                };
+                value: {
+                    display: "none";
+                };
+            };
+            inline: {
+                root: {
+                    flexDirection: "row";
+                    alignItems: "center";
+                    gap: "400";
+                };
+                track: {
+                    flex: number;
+                };
+            };
+            stacked: {
+                root: {
+                    flexDirection: "column";
+                    gap: "200";
+                };
+                text: {
+                    display: "flex";
+                    justifyContent: "space-between";
+                    alignItems: "center";
+                    width: "100%";
+                };
+            };
+        };
+    }>;
+    menu: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger" | "popover" | "item" | "section" | "sectionLabel" | "submenu", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger" | "popover" | "item" | "section" | "sectionLabel" | "submenu">>;
+    textInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "input", {
+        size: {
+            sm: {
+                root: {
+                    height: "800";
+                    px: "300";
+                    gap: "100";
+                    textStyle: "sm";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    height: "1000";
+                    px: "400";
+                    gap: "200";
+                    textStyle: "md";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "primary.1";
+                };
+            };
+            ghost: {};
+        };
+    }>;
+    splitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "buttonGroup" | "primaryButton" | "dropdownTrigger", {
+        variant: {
+            solid: {
+                dropdownTrigger: {
+                    borderLeftColor: "colorPalette.contrast";
+                };
+            };
+            ghost: {
+                dropdownTrigger: {
+                    borderLeftColor: "colorPalette.7";
+                };
+            };
+            outline: {};
+            subtle: {};
+            link: {};
+        };
+    }>;
+    drawer: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "modal" | "trigger" | "title" | "header" | "footer" | "modalOverlay" | "closeTrigger", {
+        showBackdrop: {
+            true: {
+                modalOverlay: {
+                    bg: {
+                        _dark: "bg/20";
+                        _light: "fg/20";
+                    };
+                    backdropFilter: "blur({sizes.100})";
+                };
+            };
+            false: {
+                modalOverlay: {
+                    bg: "transparent";
+                };
+            };
+        };
+        placement: {
+            left: {
+                modal: {
+                    justifyContent: "flex-start";
+                    alignItems: "stretch";
+                    "&[data-entering]": {
+                        animationName: "slide-from-left-full";
+                    };
+                    "&[data-exiting]": {
+                        animationName: "slide-to-left-full";
+                    };
+                };
+                content: {
+                    "--drawer-base-margin": number;
+                    mx: number;
+                    height: "100vh";
+                    maxH: "100vh";
+                    borderRadius: number;
+                };
+            };
+            right: {
+                modal: {
+                    justifyContent: "flex-end";
+                    alignItems: "stretch";
+                    "&[data-entering]": {
+                        animationName: "slide-from-right-full";
+                    };
+                    "&[data-exiting]": {
+                        animationName: "slide-to-right-full";
+                    };
+                };
+                content: {
+                    "--drawer-base-margin": number;
+                    mx: number;
+                    height: "100vh";
+                    maxH: "100vh";
+                    borderRadius: number;
+                };
+            };
+            top: {
+                modal: {
+                    alignItems: "flex-start";
+                    justifyContent: "stretch";
+                    "&[data-entering]": {
+                        animationName: "slide-from-top-full";
+                    };
+                    "&[data-exiting]": {
+                        animationName: "slide-to-top-full";
+                    };
+                };
+                content: {
+                    "--drawer-base-margin": number;
+                    mx: number;
+                    width: "100vw";
+                    borderRadius: number;
+                };
+            };
+            bottom: {
+                modal: {
+                    alignItems: "flex-end";
+                    justifyContent: "stretch";
+                    "&[data-entering]": {
+                        animationName: "slide-from-bottom-full";
+                    };
+                    "&[data-exiting]": {
+                        animationName: "slide-to-bottom-full";
+                    };
+                };
+                content: {
+                    "--drawer-base-margin": number;
+                    mx: number;
+                    width: "100vw";
+                    borderRadius: number;
+                };
+            };
+        };
+    }>;
+    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "panel" | "list" | "tab" | "panels", {
+        orientation: {
+            horizontal: {
+                root: {
+                    flexDirection: "column";
+                };
+                list: {
+                    borderBottom: "{spacing.25} {colors.neutral.6} solid";
+                };
+                tab: {
+                    borderBottom: "{spacing.50} solid transparent";
+                    marginRight: "-25";
+                    _selected: {
+                        borderBottomColor: "primary.9";
+                    };
+                };
+            };
+            vertical: {
+                root: {
+                    flexDirection: "row";
+                };
+                list: {
+                    flexDirection: "column";
+                };
+                tab: {
+                    justifyContent: "flex-start";
+                };
+            };
+        };
+        placement: {
+            start: {};
+            end: {};
+        };
+        size: {
+            sm: {
+                tab: {
+                    "--tabs-font-size": "fontSizes.300";
+                    "--tabs-padding-top": "spacing.100";
+                    "--tabs-padding-right": "spacing.300";
+                    "--tabs-padding-bottom": "spacing.100";
+                    "--tabs-padding-left": "spacing.300";
+                };
+            };
+            md: {
+                tab: {
+                    "--tabs-font-size": "fontSizes.350";
+                    "--tabs-padding-top": "spacing.200";
+                    "--tabs-padding-right": "spacing.400";
+                    "--tabs-padding-bottom": "spacing.200";
+                    "--tabs-padding-left": "spacing.400";
+                };
+            };
+            lg: {
+                tab: {
+                    "--tabs-font-size": "fontSizes.400";
+                    "--tabs-padding-top": "spacing.300";
+                    "--tabs-padding-right": "spacing.600";
+                    "--tabs-padding-bottom": "spacing.300";
+                    "--tabs-padding-left": "spacing.600";
+                };
+            };
+        };
+    }>;
+    localizedField: import('@chakra-ui/react').SlotRecipeDefinition<"description" | "root" | "label" | "error" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", {
+        size: {
+            md: {
+                root: {
+                    "--localized-field-font-size": "fontSizes.350";
+                    "--localized-field-line-height": "lineHeights.500";
+                };
+            };
+            sm: {
+                root: {
+                    "--localized-field-font-size": "fontSizes.300";
+                    "--localized-field-line-height": "lineHeights.450";
+                };
+            };
+        };
+        type: {
+            text: {};
+            multiLine: {};
+            money: {};
+            richText: {};
+        };
+    }>;
+    card: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "header", {
+        cardPadding: {
+            sm: {
+                root: {
+                    padding: "200";
+                };
+            };
+            md: {
+                root: {
+                    padding: "400";
+                };
+            };
+            lg: {
+                root: {
+                    padding: "600";
+                };
+            };
+        };
+        borderStyle: {
+            none: {};
+            outlined: {
+                root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.3";
+                };
+            };
+        };
+        elevation: {
+            none: {};
+            elevated: {
+                root: {
+                    shadow: "1";
+                };
+            };
+        };
+        backgroundStyle: {
+            default: {
+                root: {
+                    backgroundColor: "colorPalette.contrast";
+                };
+            };
+            muted: {
+                root: {
+                    backgroundColor: "colorPalette.2";
+                };
+            };
+        };
+    }>;
+    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "indicator", {
+        size: {
+            md: {
+                label: {
+                    fontSize: "350";
+                    fontWeight: "400";
+                    lineHeight: "400";
+                };
+                indicator: {
+                    w: "400";
+                    h: "400";
+                    zIndex: number;
+                    _after: {
+                        position: "absolute";
+                        content: "''";
+                        width: "600";
+                        height: "600";
+                        zIndex: number;
+                    };
+                };
+            };
+        };
+    }>;
+    collapsibleMotion: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger">>;
+    dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "modal" | "root" | "trigger" | "title" | "header" | "footer" | "modalOverlay" | "closeTrigger", {
+        placement: {
+            center: {
+                modal: {
+                    alignItems: "center";
+                };
+                content: {
+                    "--dialog-base-margin": "auto";
+                    mx: "auto";
+                };
+            };
+            top: {
+                modal: {
+                    alignItems: "flex-start";
+                };
+                content: {
+                    "--dialog-base-margin": "spacing.1600";
+                    mx: "auto";
+                };
+            };
+            bottom: {
+                modal: {
+                    alignItems: "flex-end";
+                };
+                content: {
+                    "--dialog-base-margin": "spacing.1600";
+                    mx: "auto";
+                };
+            };
+        };
+        scrollBehavior: {
+            inside: {
+                modal: {
+                    overflow: "hidden";
+                };
+                content: {
+                    maxH: "calc(100% - 7.5rem)";
+                };
+                body: {
+                    overflow: "auto";
+                    focusVisibleRing: "outside";
+                };
+            };
+            outside: {
+                modal: {
+                    overflow: "auto";
+                };
+            };
+        };
+    }>;
+    fieldErrors: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "message", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "message">>;
+    formField: import('@chakra-ui/react').SlotRecipeDefinition<"description" | "root" | "label" | "popover" | "input" | "error", {
+        size: {
+            md: {
+                root: {
+                    "--form-field-font-size": "fontSizes.350";
+                    "--form-field-line-height": "lineHeights.500";
+                };
+            };
+            sm: {
+                root: {
+                    "--form-field-font-size": "fontSizes.300";
+                    "--form-field-line-height": "lineHeights.450";
+                };
+            };
+        };
+        direction: {
+            column: {
+                root: {
+                    gridTemplateAreas: "\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n";
+                };
+                input: {
+                    mt: "var(--grid-gap)";
+                };
+                description: {
+                    mt: "var(--grid-gap)";
+                };
+                error: {
+                    mt: "var(--grid-gap)";
+                };
+            };
+            row: {
+                root: {
+                    gridTemplateAreas: "\n\"label input\"\n\"label description\"\n\"label error\"\n";
+                    gridTemplateColumns: "auto 1fr";
+                    gridColumnGap: "200";
+                };
+                description: {
+                    mt: "var(--grid-gap)";
+                };
+                error: {
+                    mt: "var(--grid-gap)";
+                };
+            };
+        };
+    }>;
+    list: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item", {
+        variant: {
+            marker: {
+                root: {
+                    listStyle: "revert";
+                    listStylePosition: "inside";
+                };
+                item: {
+                    _marker: {
+                        color: "fg.subtle";
+                    };
+                };
+            };
+            plain: {
+                item: {
+                    alignItems: "flex-start";
+                    display: "inline-flex";
+                };
+            };
+        };
+        align: {
+            center: {
+                item: {
+                    alignItems: "center";
+                };
+            };
+            start: {
+                item: {
+                    alignItems: "flex-start";
+                };
+            };
+            end: {
+                item: {
+                    alignItems: "flex-end";
+                };
+            };
+        };
+    }>;
+    moneyInput: import('@chakra-ui/react').SlotRecipeDefinition<"container" | "root" | "currencySelect" | "currencyLabel" | "amountInput" | "badge", {
+        size: {
+            sm: {
+                root: {
+                    fontSize: "fontSize.20";
+                    "& .nimbus-select__trigger": {
+                        width: "2600";
+                    };
+                };
+                currencySelect: {
+                    padding: "0 spacing.20";
+                };
+                amountInput: {
+                    paddingRight: "spacing.30";
+                };
+                currencyLabel: {
+                    fontSize: "300";
+                    lineHeight: "450";
+                };
+            };
+            md: {
+                root: {
+                    fontSize: "fontSize.30";
+                    "& .nimbus-select__trigger": {
+                        width: "2800";
+                    };
+                };
+                currencySelect: {
+                    padding: "0 spacing.25";
+                };
+                amountInput: {
+                    paddingRight: "spacing.40";
+                };
+                currencyLabel: {
+                    fontSize: "350";
+                    lineHeight: "500";
+                };
+            };
+        };
+    }>;
+    multilineTextInput: import('@chakra-ui/react').SlotRecipeDefinition<"textarea" | "root" | "leadingElement", {
+        size: {
+            sm: {
+                root: {
+                    minH: "800";
+                    textStyle: "sm";
+                    gap: "100";
+                    pl: "300";
+                };
+                textarea: {
+                    pr: "300";
+                    py: "100";
+                };
+                leadingElement: {
+                    pt: "200";
+                    "& svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    minH: "1000";
+                    textStyle: "md";
+                    gap: "200";
+                    pl: "400";
+                };
+                textarea: {
+                    py: "200";
+                    pr: "400";
+                };
+                leadingElement: {
+                    pt: "200";
+                    "& svg": {
+                        mt: "50";
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "neutral.1";
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+            ghost: {
+                root: {
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+        };
+    }>;
+    numberInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "input" | "incrementButton" | "decrementButton", {
+        size: {
+            sm: {
+                root: {
+                    pl: "300";
+                    pr: "900";
+                    gap: "100";
+                };
+                input: {
+                    h: "800";
+                    textStyle: "sm";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    pl: "400";
+                    pr: "1000";
+                    gap: "200";
+                };
+                input: {
+                    h: "1000";
+                    textStyle: "md";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+                trailingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "neutral.1";
+                };
+                incrementButton: {
+                    "&[data-invalid='true']": {
+                        borderTop: "2px solid var(--border-color)";
+                        borderRight: "2px solid var(--border-color)";
+                    };
+                    borderTop: "var(--border-width) solid var(--border-color)";
+                    borderRight: "var(--border-width) solid var(--border-color)";
+                    borderLeft: "var(--border-width) solid var(--border-color)";
+                    boxShadow: "inset 0 -0.5px 0 0 var(--border-color)";
+                    _hover: {
+                        backgroundColor: "primaryAlpha.4";
+                    };
+                };
+                decrementButton: {
+                    "&[data-invalid='true']": {
+                        borderBottom: "2px solid var(--border-color)";
+                        borderRight: "2px solid var(--border-color)";
+                    };
+                    borderBottom: "var(--border-width) solid var(--border-color)";
+                    borderRight: "var(--border-width) solid var(--border-color)";
+                    borderLeft: "var(--border-width) solid var(--border-color)";
+                    boxShadow: "inset 0 0.5px 0 0 var(--border-color)";
+                    _hover: {
+                        backgroundColor: "primaryAlpha.4";
+                    };
+                };
+            };
+            ghost: {
+                root: {
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+                incrementButton: {
+                    "&[data-invalid='true']": {
+                        borderTop: "2px solid var(--border-color)";
+                        borderRight: "2px solid var(--border-color)";
+                    };
+                    _hover: {
+                        backgroundColor: "primaryAlpha.4";
+                    };
+                };
+                decrementButton: {
+                    "&[data-invalid='true']": {
+                        borderBottom: "2px solid var(--border-color)";
+                        borderRight: "2px solid var(--border-color)";
+                    };
+                    _hover: {
+                        backgroundColor: "primaryAlpha.4";
+                    };
+                };
+            };
+        };
+    }>;
+    richTextInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "toolbar" | "editable", {}>;
+    scopedSearchInput: import('@chakra-ui/react').SlotRecipeDefinition<"container" | "root" | "selectWrapper" | "searchWrapper", {
+        size: {
+            sm: {};
+            md: {};
+        };
+    }>;
+    draggableList: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "empty" | "itemContent", {
+        size: {
+            sm: {};
+            md: {
+                item: {
+                    minH: "800";
+                };
+            };
+        };
+    }>;
+    searchInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "input", {
+        size: {
+            sm: {
+                root: {
+                    height: "800";
+                    px: "300";
+                    gap: "100";
+                    textStyle: "sm";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    height: "1000";
+                    px: "400";
+                    gap: "200";
+                    textStyle: "md";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "primary.1";
+                };
+            };
+            ghost: {};
+        };
+    }>;
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"option" | "root" | "trigger" | "leadingElement" | "triggerLabel" | "options" | "optionGroup", {
+        size: {
+            sm: {
+                root: {};
+                trigger: {
+                    px: "300";
+                    gap: "100";
+                    h: "800";
+                    textStyle: "sm";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {};
+                trigger: {
+                    h: "1000";
+                    px: "400";
+                    gap: "200";
+                    textStyle: "md";
+                };
+                leadingElement: {
+                    "& > svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            outline: {
+                root: {
+                    bg: "primary.1";
+                    "&:hover": {
+                        bg: "primary.2";
+                    };
+                };
+                trigger: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                };
+            };
+            ghost: {
+                root: {
+                    bg: "transparent";
+                    "&:hover": {
+                        bg: "primaryAlpha.2";
+                    };
+                };
+                trigger: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "transparent";
+                };
+            };
+        };
+        isClearable: {
+            false: {
+                triggerLabel: {
+                    "--button-safespace": "sizes.1000";
+                };
+            };
+        };
+    }>;
+    switch: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "track" | "thumb", {
+        size: {
+            sm: {
+                track: {
+                    "--track-height": "sizes.400";
+                    "--track-width": "sizes.700";
+                };
+                thumb: {
+                    "--thumb-size": "sizes.400";
+                };
+                label: {
+                    "--label-font-size": "fontSizes.350";
+                };
+            };
+            md: {
+                track: {
+                    "--track-height": "sizes.600";
+                    "--track-width": "sizes.1100";
+                };
+                thumb: {
+                    "--thumb-size": "sizes.600";
+                };
+                label: {
+                    "--label-font-size": "fontSizes.400";
+                };
+            };
+        };
+    }>;
+    table: import('@chakra-ui/react').SlotRecipeDefinition<"cell" | "body" | "caption" | "root" | "row" | "header" | "footer" | "columnHeader", {
+        interactive: {
+            true: {
+                body: {
+                    "& tr": {
+                        _hover: {
+                            bg: "colorPalette.subtle";
+                        };
+                    };
+                };
+            };
+        };
+        stickyHeader: {
+            true: {
+                header: {
+                    "& :where(tr)": {
+                        top: "var(--table-sticky-offset, 0)";
+                        position: "sticky";
+                        zIndex: number;
+                    };
+                };
+            };
+        };
+        striped: {
+            true: {
+                row: {
+                    "&:nth-of-type(odd) td": {
+                        bg: "bg.muted";
+                    };
+                };
+            };
+        };
+        showColumnBorder: {
+            true: {
+                columnHeader: {
+                    "&:not(:last-of-type)": {
+                        borderInlineEndWidth: "1px";
+                    };
+                };
+                cell: {
+                    "&:not(:last-of-type)": {
+                        borderInlineEndWidth: "1px";
+                    };
+                };
+            };
+        };
+        variant: {
+            line: {
+                columnHeader: {
+                    borderBottomWidth: "1px";
+                };
+                cell: {
+                    borderBottomWidth: "1px";
+                };
+                row: {
+                    bg: "bg";
+                };
+            };
+            outline: {
+                root: {
+                    boxShadow: "0 0 0 1px {colors.border}";
+                    overflow: "hidden";
+                };
+                columnHeader: {
+                    borderBottomWidth: "1px";
+                };
+                header: {
+                    bg: "bg.muted";
+                };
+                row: {
+                    "&:not(:last-of-type)": {
+                        borderBottomWidth: "1px";
+                    };
+                };
+                footer: {
+                    borderTopWidth: "1px";
+                };
+            };
+        };
+        size: {
+            sm: {
+                root: {
+                    textStyle: "sm";
+                };
+                columnHeader: {
+                    px: "200";
+                    py: "200";
+                };
+                cell: {
+                    px: "200";
+                    py: "200";
+                };
+            };
+            md: {
+                root: {
+                    textStyle: "sm";
+                };
+                columnHeader: {
+                    px: "300";
+                    py: "300";
+                };
+                cell: {
+                    px: "300";
+                    py: "300";
+                };
+            };
+            lg: {
+                root: {
+                    textStyle: "md";
+                };
+                columnHeader: {
+                    px: "400";
+                    py: "300";
+                };
+                cell: {
+                    px: "400";
+                    py: "300";
+                };
+            };
+        };
+    }>;
+    taggroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "tagList" | "tag", {
+        size: {
+            sm: {
+                tag: {
+                    minH: "600";
+                    paddingX: "200";
+                    fontSize: "350";
+                    lineHeight: "400";
+                };
+            };
+            md: {
+                tag: {
+                    minH: "800";
+                    paddingX: "200";
+                    paddingY: "100";
+                };
+            };
+            lg: {
+                tag: {
+                    minH: "1000";
+                    padding: "200";
+                };
+            };
+        };
+    }>;
+    timeInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", {
+        size: {
+            sm: {
+                root: {
+                    h: number;
+                    gap: number;
+                    px: number;
+                };
+                segment: {
+                    textStyle: "sm";
+                };
+                leadingElement: {
+                    "& svg": {
+                        boxSize: "400";
+                    };
+                };
+                trailingElement: {
+                    "& svg": {
+                        boxSize: "400";
+                    };
+                };
+            };
+            md: {
+                root: {
+                    h: number;
+                    gap: number;
+                    px: number;
+                };
+                segment: {
+                    textStyle: "md";
+                };
+                leadingElement: {
+                    "& svg": {
+                        boxSize: "500";
+                    };
+                };
+                trailingElement: {
+                    "& svg": {
+                        boxSize: "500";
+                    };
+                };
+            };
+        };
+        variant: {
+            solid: {
+                root: {
+                    "--border-width": "sizes.25";
+                    "--border-color": "colors.neutral.7";
+                    backgroundColor: "neutral.1";
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+            ghost: {
+                root: {
+                    _hover: {
+                        backgroundColor: "primary.2";
+                    };
+                };
+            };
+        };
+    }>;
+    toggleButtonGroup: import('@chakra-ui/react').SlotRecipeDefinition<"button" | "root", {
+        size: {
+            xs: {
+                button: {
+                    h: "800";
+                    minW: "800";
+                    fontSize: "350";
+                    fontWeight: "500";
+                    lineHeight: "400";
+                    px: "300";
+                    gap: "100";
+                    _icon: {
+                        width: "500";
+                        height: "500";
+                    };
+                } | undefined;
+            };
+            md: {
+                button: {
+                    h: "1000";
+                    minW: "1000";
+                    fontSize: "400";
+                    lineHeight: "500";
+                    px: "400";
+                    gap: "200";
+                    _icon: {
+                        width: "600";
+                        height: "600";
+                    };
+                } | undefined;
+            };
+        };
+        tone: {
+            primary: {
+                button: {
+                    colorPalette: "primary";
+                };
+            };
+            critical: {
+                button: {
+                    colorPalette: "critical";
+                };
+            };
+            neutral: {
+                button: {
+                    colorPalette: "neutral";
+                };
+            };
+        };
+    }>;
+};