@bitrise/bitkit-v2 0.3.369 → 0.3.370
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitDialog/DialogBodyContext.js +23 -20
- package/dist/components/BitkitDialog/DialogBodyContext.js.map +1 -1
- package/dist/theme/slot-recipes/Dialog.recipe.d.ts +1 -7
- package/dist/theme/slot-recipes/Dialog.recipe.js +11 -6
- package/dist/theme/slot-recipes/Dialog.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +1 -7
- package/package.json +1 -1
|
@@ -36,27 +36,30 @@ var ScrollableDialogBody = ({ children, ...props }) => {
|
|
|
36
36
|
resizeObserver.disconnect();
|
|
37
37
|
};
|
|
38
38
|
}, [open, updateScrollButtonVisibility]);
|
|
39
|
-
return /* @__PURE__ */
|
|
39
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
40
40
|
css: styles.scrollBody,
|
|
41
|
-
children:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
css: styles.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
children: /* @__PURE__ */ jsxs(Box, {
|
|
42
|
+
css: styles.scrollArea,
|
|
43
|
+
children: [/* @__PURE__ */ jsx(Dialog.Body, {
|
|
44
|
+
ref: contentRef,
|
|
45
|
+
...props,
|
|
46
|
+
children
|
|
47
|
+
}), isScrollButtonVisible && /* @__PURE__ */ jsxs(Fragment$1, { children: [showScrollGradient && /* @__PURE__ */ jsx(Box, { css: styles.scrollGradient }), /* @__PURE__ */ jsx(chakra.button, {
|
|
48
|
+
"aria-label": "Scroll to bottom",
|
|
49
|
+
css: styles.scrollButton,
|
|
50
|
+
type: "button",
|
|
51
|
+
onClick: () => {
|
|
52
|
+
contentRef.current?.scrollTo({
|
|
53
|
+
top: contentRef.current.scrollHeight,
|
|
54
|
+
behavior: "smooth"
|
|
55
|
+
});
|
|
56
|
+
},
|
|
57
|
+
children: /* @__PURE__ */ jsx(IconArrowDown, {
|
|
58
|
+
color: "icon/tertiary",
|
|
59
|
+
size: "16"
|
|
60
|
+
})
|
|
61
|
+
})] })]
|
|
62
|
+
})
|
|
60
63
|
});
|
|
61
64
|
};
|
|
62
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogBodyContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogBodyContext.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogContext, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\n\ninterface DialogBodyContextValue {\n scrollBehavior: 'inside' | 'outside';\n showScrollGradient: boolean;\n}\n\nexport const DialogBodyContext = createContext<DialogBodyContextValue>({\n scrollBehavior: 'outside',\n showScrollGradient: true,\n});\n\nexport const resolveScrollBehavior = (\n variant: 'overflowContent' | undefined,\n scrollBehavior: 'inside' | 'outside' | undefined,\n): 'inside' | 'outside' | undefined => (variant === 'overflowContent' ? 'inside' : scrollBehavior);\n\nconst ScrollableDialogBody = ({ children, ...props }: Dialog.BodyProps) => {\n const { showScrollGradient } = useContext(DialogBodyContext);\n const styles = useDialogStyles();\n const { open } = useDialogContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Dialog.Body ref={contentRef} {...props}>\n
|
|
1
|
+
{"version":3,"file":"DialogBodyContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogBodyContext.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogContext, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\n\ninterface DialogBodyContextValue {\n scrollBehavior: 'inside' | 'outside';\n showScrollGradient: boolean;\n}\n\nexport const DialogBodyContext = createContext<DialogBodyContextValue>({\n scrollBehavior: 'outside',\n showScrollGradient: true,\n});\n\nexport const resolveScrollBehavior = (\n variant: 'overflowContent' | undefined,\n scrollBehavior: 'inside' | 'outside' | undefined,\n): 'inside' | 'outside' | undefined => (variant === 'overflowContent' ? 'inside' : scrollBehavior);\n\nconst ScrollableDialogBody = ({ children, ...props }: Dialog.BodyProps) => {\n const { showScrollGradient } = useContext(DialogBodyContext);\n const styles = useDialogStyles();\n const { open } = useDialogContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Box css={styles.scrollArea}>\n <Dialog.Body ref={contentRef} {...props}>\n {children}\n </Dialog.Body>\n {isScrollButtonVisible && (\n <>\n {showScrollGradient && <Box css={styles.scrollGradient} />}\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n </Box>\n );\n};\n\n/**\n * Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls\n * internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).\n */\nconst DialogBody = ({ children, ...rest }: Dialog.BodyProps) => {\n const { scrollBehavior } = useContext(DialogBodyContext);\n\n if (scrollBehavior === 'inside') {\n return <ScrollableDialogBody {...rest}>{children}</ScrollableDialogBody>;\n }\n return <Dialog.Body {...rest}>{children}</Dialog.Body>;\n};\n\nexport default DialogBody;\n"],"mappings":";;;;;;;AAYA,IAAa,oBAAoB,cAAsC;CACrE,gBAAgB;CAChB,oBAAoB;AACtB,CAAC;AAED,IAAa,yBACX,SACA,mBACsC,YAAY,oBAAoB,WAAW;AAEnF,IAAM,wBAAwB,EAAE,UAAU,GAAG,YAA8B;CACzE,MAAM,EAAE,uBAAuB,WAAW,iBAAiB;CAC3D,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS;EAEvB,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,oBAAC,KAAD;EAAK,KAAK,OAAO;EACf,UAAA,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,OAAO,MAAR;IAAa,KAAK;IAAY,GAAI;IAC/B;GACU,CAAA,GACZ,yBACC,qBAAA,YAAA,EAAA,UAAA,CACG,sBAAsB,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GACzD,oBAAC,OAAO,QAAR;IACE,cAAW;IACX,KAAK,OAAO;IACZ,MAAK;IACL,eAAe;KACb,WAAW,SAAS,SAAS;MAAE,KAAK,WAAW,QAAQ;MAAc,UAAU;KAAS,CAAC;IAC3F;IAEA,UAAA,oBAAC,eAAD;KAAe,OAAM;KAAgB,MAAK;IAAM,CAAA;GACnC,CAAA,CACf,EAAA,CAAA,CAED;;CACF,CAAA;AAET;;;;;AAMA,IAAM,cAAc,EAAE,UAAU,GAAG,WAA6B;CAC9D,MAAM,EAAE,mBAAmB,WAAW,iBAAiB;CAEvD,IAAI,mBAAmB,UACrB,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAO;CAA+B,CAAA;CAEzE,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;EAAO;CAAsB,CAAA;AACvD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
|
|
1
|
+
declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollArea" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
|
|
2
2
|
scrollBehavior: {
|
|
3
3
|
inside: {
|
|
4
4
|
body: {
|
|
@@ -109,12 +109,6 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
109
109
|
insetEnd: "12";
|
|
110
110
|
top: "12";
|
|
111
111
|
};
|
|
112
|
-
scrollGradient: {
|
|
113
|
-
bottom: "16";
|
|
114
|
-
};
|
|
115
|
-
scrollButton: {
|
|
116
|
-
bottom: "8";
|
|
117
|
-
};
|
|
118
112
|
};
|
|
119
113
|
};
|
|
120
114
|
}>;
|
|
@@ -7,6 +7,7 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
7
7
|
slots: [
|
|
8
8
|
...dialogAnatomy.keys(),
|
|
9
9
|
"label",
|
|
10
|
+
"scrollArea",
|
|
10
11
|
"scrollBody",
|
|
11
12
|
"scrollButton",
|
|
12
13
|
"scrollGradient",
|
|
@@ -97,9 +98,15 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
97
98
|
display: "flex",
|
|
98
99
|
flexDirection: "column",
|
|
99
100
|
minHeight: 0,
|
|
100
|
-
position: "relative",
|
|
101
101
|
_last: { paddingBlockEnd: "48" }
|
|
102
102
|
},
|
|
103
|
+
scrollArea: {
|
|
104
|
+
display: "flex",
|
|
105
|
+
flex: "1",
|
|
106
|
+
flexDirection: "column",
|
|
107
|
+
minHeight: 0,
|
|
108
|
+
position: "relative"
|
|
109
|
+
},
|
|
103
110
|
footer: {
|
|
104
111
|
paddingBlockEnd: "32",
|
|
105
112
|
paddingBlockStart: "24",
|
|
@@ -117,7 +124,7 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
117
124
|
borderColor: "border/minimal",
|
|
118
125
|
borderRadius: "100%",
|
|
119
126
|
borderWidth: "1",
|
|
120
|
-
bottom: "
|
|
127
|
+
bottom: "8",
|
|
121
128
|
boxShadow: "elevation/lg",
|
|
122
129
|
cursor: "pointer",
|
|
123
130
|
display: "flex",
|
|
@@ -142,7 +149,7 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
142
149
|
},
|
|
143
150
|
scrollGradient: {
|
|
144
151
|
background: "linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)",
|
|
145
|
-
bottom:
|
|
152
|
+
bottom: 0,
|
|
146
153
|
height: "32",
|
|
147
154
|
pointerEvents: "none",
|
|
148
155
|
position: "absolute",
|
|
@@ -234,9 +241,7 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
234
241
|
closeTrigger: {
|
|
235
242
|
insetEnd: "12",
|
|
236
243
|
top: "12"
|
|
237
|
-
}
|
|
238
|
-
scrollGradient: { bottom: "16" },
|
|
239
|
-
scrollButton: { bottom: "8" }
|
|
244
|
+
}
|
|
240
245
|
} }
|
|
241
246
|
},
|
|
242
247
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'heading/h2',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n
|
|
1
|
+
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollArea',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'heading/h2',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n _last: {\n paddingBlockEnd: '48',\n },\n },\n // Hugs the body exactly, so the gradient and the scroll button anchor to the end of the\n // scrollable content. They can't hang off `scrollBody`: that carries the trailing padding,\n // which only applies when no footer follows.\n scrollArea: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n minHeight: 0,\n position: 'relative',\n },\n footer: {\n paddingBlockEnd: '32',\n paddingBlockStart: '24',\n paddingInline: '32',\n },\n closeTrigger: {\n insetEnd: '24',\n position: 'absolute',\n top: '24',\n },\n scrollButton: {\n alignItems: 'center',\n alignSelf: 'center',\n background: 'background/primary',\n borderColor: 'border/minimal',\n borderRadius: '100%',\n borderWidth: '1',\n bottom: '8',\n boxShadow: 'elevation/lg',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n position: 'absolute',\n width: '32',\n },\n stepDescription: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n stepHeader: {\n overflowY: 'auto',\n },\n stepTitle: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n stepTitleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n scrollGradient: {\n background: 'linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)',\n bottom: 0,\n height: '32',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%',\n },\n },\n variants: {\n scrollBehavior: {\n inside: {\n body: {\n overflowY: 'auto',\n _last: {\n paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n },\n },\n content: {\n maxHeight: 'calc(100dvh - 96px)',\n overflow: 'hidden',\n },\n },\n outside: {\n positioner: {\n overflow: 'auto',\n paddingBlock: { base: 0, tablet: '10vh' },\n },\n content: {\n marginBlock: { base: 0, tablet: 'auto' },\n },\n },\n },\n size: {\n full: {\n body: {\n minHeight: 0,\n overflowY: 'auto',\n },\n content: {\n borderRadius: '8',\n height: '100%',\n maxHeight: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n width: '100%',\n },\n positioner: {\n padding: '32',\n },\n },\n lg: {\n content: {\n width: { base: '100%', tablet: rem(800) },\n },\n },\n md: {\n content: {\n width: { base: '100%', tablet: rem(640) },\n },\n },\n sm: {\n content: {\n width: { base: '100%', tablet: rem(480) },\n },\n },\n },\n variant: {\n overflowContent: {\n content: {\n maxHeight: 'calc(100dvh - 48px)',\n overflow: 'hidden',\n },\n header: {\n gap: '8',\n paddingBlockEnd: '8',\n paddingBlockStart: '16',\n paddingInline: '16',\n },\n title: {\n paddingInlineEnd: '32',\n textStyle: 'heading/h4',\n },\n body: {\n overflowY: 'auto',\n paddingBlockEnd: '8',\n paddingInline: '16',\n _last: {\n paddingBlockEnd: 0,\n },\n },\n scrollBody: {\n _last: {\n paddingBlockEnd: '16',\n },\n },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: 0,\n paddingInline: '16',\n },\n closeTrigger: {\n insetEnd: '12',\n top: '12',\n },\n },\n },\n },\n defaultVariants: {\n scrollBehavior: 'outside',\n size: 'md',\n },\n});\n\nexport default dialogSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -682,7 +682,7 @@ declare const slotRecipes: {
|
|
|
682
682
|
};
|
|
683
683
|
};
|
|
684
684
|
}>;
|
|
685
|
-
dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
|
|
685
|
+
dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollArea" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
|
|
686
686
|
scrollBehavior: {
|
|
687
687
|
inside: {
|
|
688
688
|
body: {
|
|
@@ -793,12 +793,6 @@ declare const slotRecipes: {
|
|
|
793
793
|
insetEnd: "12";
|
|
794
794
|
top: "12";
|
|
795
795
|
};
|
|
796
|
-
scrollGradient: {
|
|
797
|
-
bottom: "16";
|
|
798
|
-
};
|
|
799
|
-
scrollButton: {
|
|
800
|
-
bottom: "8";
|
|
801
|
-
};
|
|
802
796
|
};
|
|
803
797
|
};
|
|
804
798
|
}>;
|