@bitrise/bitkit-v2 0.3.353 → 0.3.355
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/BitkitCloseButton/BitkitCloseButton.d.ts +5 -0
- package/dist/components/BitkitCloseButton/BitkitCloseButton.js +2 -2
- package/dist/components/BitkitCloseButton/BitkitCloseButton.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToaster.js +6 -2
- package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
- package/dist/theme/slot-recipes/Avatar.recipe.d.ts +12 -12
- package/dist/theme/slot-recipes/Avatar.recipe.js +12 -12
- package/dist/theme/slot-recipes/Avatar.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Toast.recipe.js +3 -3
- package/dist/theme/slot-recipes/Toast.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +12 -12
- package/dist/theme/tokens/index.d.ts +3 -0
- package/dist/theme/tokens/zIndex.d.ts +3 -0
- package/dist/theme/tokens/zIndex.js +1 -0
- package/dist/theme/tokens/zIndex.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
|
|
2
2
|
export interface BitkitCloseButtonProps extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {
|
|
3
|
+
/**
|
|
4
|
+
* Hover label for the button. Defaults to `aria-label` — set it when the accessible name is
|
|
5
|
+
* too long to read well as a tooltip.
|
|
6
|
+
*/
|
|
7
|
+
tooltipText?: string;
|
|
3
8
|
}
|
|
4
9
|
declare const BitkitCloseButton: import('react').ForwardRefExoticComponent<BitkitCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
5
10
|
export default BitkitCloseButton;
|
|
@@ -5,11 +5,11 @@ import { forwardRef } from "react";
|
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
//#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
|
|
7
7
|
var BitkitCloseButton = forwardRef((props, ref) => {
|
|
8
|
-
const { "aria-label": ariaLabel = "Close", size, colorVariant, css, ...rest } = props;
|
|
8
|
+
const { "aria-label": ariaLabel = "Close", size, colorVariant, css, tooltipText, ...rest } = props;
|
|
9
9
|
const style = useRecipe({ key: "closeButton" });
|
|
10
10
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
11
11
|
disabled: rest.disabled,
|
|
12
|
-
text: ariaLabel,
|
|
12
|
+
text: tooltipText ?? ariaLabel,
|
|
13
13
|
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
14
14
|
ref,
|
|
15
15
|
"aria-label": ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {\n /**\n * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is\n * too long to read well as a tooltip.\n */\n tooltipText?: string;\n}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, tooltipText, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={tooltipText ?? ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAeA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,aAAa,GAAG,SAAS;CAE7F,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM,eAAe;EAChE,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -3,15 +3,17 @@ import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
|
|
|
3
3
|
import { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
|
|
4
4
|
import { toaster } from "./BitkitToast.js";
|
|
5
5
|
import { Box } from "@chakra-ui/react/box";
|
|
6
|
-
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
+
import { useSlotRecipe, useToken } from "@chakra-ui/react/styled-system";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Text } from "@chakra-ui/react/text";
|
|
9
9
|
import { Toast, Toaster } from "@chakra-ui/react/toast";
|
|
10
10
|
//#region lib/components/BitkitToast/BitkitToaster.tsx
|
|
11
11
|
var BitkitToaster = () => {
|
|
12
12
|
const toastRecipe = useSlotRecipe({ key: "toast" });
|
|
13
|
+
const [zIndex] = useToken("zIndex", "toast");
|
|
13
14
|
return /* @__PURE__ */ jsx(Toaster, {
|
|
14
15
|
toaster,
|
|
16
|
+
style: { zIndex },
|
|
15
17
|
children: (toast) => {
|
|
16
18
|
const variant = toast.type;
|
|
17
19
|
const styles = toastRecipe({ variant });
|
|
@@ -51,8 +53,10 @@ var BitkitToaster = () => {
|
|
|
51
53
|
toast.closable && /* @__PURE__ */ jsx(Toast.CloseTrigger, {
|
|
52
54
|
asChild: true,
|
|
53
55
|
children: /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
56
|
+
"aria-label": "Dismiss notification",
|
|
54
57
|
colorVariant: BUTTON_COLORS_MAP[variant],
|
|
55
|
-
size: "sm"
|
|
58
|
+
size: "sm",
|
|
59
|
+
tooltipText: "Dismiss"
|
|
56
60
|
})
|
|
57
61
|
})
|
|
58
62
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n\n return (\n <Toaster toaster={toaster}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant} {...toast.meta?.dataAttributes}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action &&\n (toast.meta.action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n href={toast.meta.action.href}\n isExternal={toast.meta.action.target === '_blank'}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n target={toast.meta.action.target}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ))}\n {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n </Box>\n {toast.closable && (\n <Toast.CloseTrigger asChild>\n <BitkitCloseButton colorVariant={BUTTON_COLORS_MAP[variant]}
|
|
1
|
+
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe, useToken } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n const [zIndex] = useToken('zIndex', 'toast');\n\n return (\n <Toaster toaster={toaster} style={{ zIndex }}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant} {...toast.meta?.dataAttributes}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action &&\n (toast.meta.action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n href={toast.meta.action.href}\n isExternal={toast.meta.action.target === '_blank'}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n target={toast.meta.action.target}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ))}\n {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n </Box>\n {toast.closable && (\n <Toast.CloseTrigger asChild>\n <BitkitCloseButton\n aria-label=\"Dismiss notification\"\n colorVariant={BUTTON_COLORS_MAP[variant]}\n size=\"sm\"\n tooltipText=\"Dismiss\"\n />\n </Toast.CloseTrigger>\n )}\n </Toast.Root>\n );\n }}\n </Toaster>\n );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAClD,MAAM,CAAC,UAAU,SAAS,UAAU,OAAO;CAE3C,OACE,oBAAC,SAAD;EAAkB;EAAS,OAAO,EAAE,OAAO;EACvC,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAAS,GAAI,MAAM,MAAM;IAA9C,UAAA;KACE,oBAAC,eAAD,EAAe,KAAK,OAAO,KAAO,CAAA;KAClC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA;OACG,CAAC,CAAC,MAAM,SAAS,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAM,MAAmB,CAAA;OACzD,oBAAC,MAAM,aAAP,EAAA,UAAoB,MAAM,YAA+B,CAAA;OACxD,CAAC,CAAC,MAAM,MAAM,WACZ,MAAM,KAAK,OAAO,SAAS,KAAA,IAC1B,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,MAAM,MAAM,KAAK,OAAO;QACxB,YAAY,MAAM,KAAK,OAAO,WAAW;QACzC,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QACzB,QAAQ,MAAM,KAAK,OAAO;QAEzB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA,IAEnB,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QAExB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA;OAEtB,CAAC,CAAC,MAAM,MAAM,aAAa,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA,MAAM,KAAK;OAAgB,CAAA;MAClF;;KACJ,MAAM,YACL,oBAAC,MAAM,cAAP;MAAoB,SAAA;MAClB,UAAA,oBAAC,mBAAD;OACE,cAAW;OACX,cAAc,kBAAkB;OAChC,MAAK;OACL,aAAY;MACb,CAAA;KACiB,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
|
|
@@ -7,11 +7,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
7
7
|
borderRadius: number;
|
|
8
8
|
};
|
|
9
9
|
image: {
|
|
10
|
-
borderRadius:
|
|
10
|
+
borderRadius: "calc({radii.4} - 1px)";
|
|
11
11
|
};
|
|
12
12
|
fallback: {
|
|
13
13
|
textStyle: "comp/avatar/24";
|
|
14
|
-
borderRadius:
|
|
14
|
+
borderRadius: "calc({radii.4} - 1px)";
|
|
15
15
|
};
|
|
16
16
|
icon: {
|
|
17
17
|
width: number;
|
|
@@ -28,11 +28,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
28
28
|
borderRadius: number;
|
|
29
29
|
};
|
|
30
30
|
image: {
|
|
31
|
-
borderRadius:
|
|
31
|
+
borderRadius: "calc({radii.6} - 1px)";
|
|
32
32
|
};
|
|
33
33
|
fallback: {
|
|
34
34
|
textStyle: "comp/avatar/32";
|
|
35
|
-
borderRadius:
|
|
35
|
+
borderRadius: "calc({radii.6} - 1px)";
|
|
36
36
|
};
|
|
37
37
|
icon: {
|
|
38
38
|
width: number;
|
|
@@ -53,11 +53,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
53
53
|
borderRadius: number;
|
|
54
54
|
};
|
|
55
55
|
image: {
|
|
56
|
-
borderRadius:
|
|
56
|
+
borderRadius: "calc({radii.8} - 1px)";
|
|
57
57
|
};
|
|
58
58
|
fallback: {
|
|
59
59
|
textStyle: "comp/avatar/40";
|
|
60
|
-
borderRadius:
|
|
60
|
+
borderRadius: "calc({radii.8} - 1px)";
|
|
61
61
|
};
|
|
62
62
|
icon: {
|
|
63
63
|
width: number;
|
|
@@ -78,11 +78,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
78
78
|
borderRadius: "10";
|
|
79
79
|
};
|
|
80
80
|
image: {
|
|
81
|
-
borderRadius: "10";
|
|
81
|
+
borderRadius: "calc({radii.10} - 1px)";
|
|
82
82
|
};
|
|
83
83
|
fallback: {
|
|
84
84
|
textStyle: "comp/avatar/48";
|
|
85
|
-
borderRadius: "10";
|
|
85
|
+
borderRadius: "calc({radii.10} - 1px)";
|
|
86
86
|
};
|
|
87
87
|
icon: {
|
|
88
88
|
width: number;
|
|
@@ -103,11 +103,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
103
103
|
borderRadius: number;
|
|
104
104
|
};
|
|
105
105
|
image: {
|
|
106
|
-
borderRadius:
|
|
106
|
+
borderRadius: "calc({radii.12} - 1px)";
|
|
107
107
|
};
|
|
108
108
|
fallback: {
|
|
109
109
|
textStyle: "comp/avatar/64";
|
|
110
|
-
borderRadius:
|
|
110
|
+
borderRadius: "calc({radii.12} - 1px)";
|
|
111
111
|
};
|
|
112
112
|
icon: {
|
|
113
113
|
width: number;
|
|
@@ -128,11 +128,11 @@ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
128
128
|
borderRadius: number;
|
|
129
129
|
};
|
|
130
130
|
image: {
|
|
131
|
-
borderRadius:
|
|
131
|
+
borderRadius: "calc({radii.16} - 1px)";
|
|
132
132
|
};
|
|
133
133
|
fallback: {
|
|
134
134
|
textStyle: "comp/avatar/128";
|
|
135
|
-
borderRadius:
|
|
135
|
+
borderRadius: "calc({radii.16} - 1px)";
|
|
136
136
|
};
|
|
137
137
|
icon: {
|
|
138
138
|
width: number;
|
|
@@ -51,10 +51,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
51
51
|
height: 24,
|
|
52
52
|
borderRadius: 4
|
|
53
53
|
},
|
|
54
|
-
image: { borderRadius: 4 },
|
|
54
|
+
image: { borderRadius: "calc({radii.4} - 1px)" },
|
|
55
55
|
fallback: {
|
|
56
56
|
textStyle: "comp/avatar/24",
|
|
57
|
-
borderRadius: 4
|
|
57
|
+
borderRadius: "calc({radii.4} - 1px)"
|
|
58
58
|
},
|
|
59
59
|
icon: {
|
|
60
60
|
width: 16,
|
|
@@ -68,10 +68,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
68
68
|
height: 32,
|
|
69
69
|
borderRadius: 6
|
|
70
70
|
},
|
|
71
|
-
image: { borderRadius: 6 },
|
|
71
|
+
image: { borderRadius: "calc({radii.6} - 1px)" },
|
|
72
72
|
fallback: {
|
|
73
73
|
textStyle: "comp/avatar/32",
|
|
74
|
-
borderRadius: 6
|
|
74
|
+
borderRadius: "calc({radii.6} - 1px)"
|
|
75
75
|
},
|
|
76
76
|
icon: {
|
|
77
77
|
width: 20,
|
|
@@ -91,10 +91,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
91
91
|
height: 40,
|
|
92
92
|
borderRadius: 8
|
|
93
93
|
},
|
|
94
|
-
image: { borderRadius: 8 },
|
|
94
|
+
image: { borderRadius: "calc({radii.8} - 1px)" },
|
|
95
95
|
fallback: {
|
|
96
96
|
textStyle: "comp/avatar/40",
|
|
97
|
-
borderRadius: 8
|
|
97
|
+
borderRadius: "calc({radii.8} - 1px)"
|
|
98
98
|
},
|
|
99
99
|
icon: {
|
|
100
100
|
width: 24,
|
|
@@ -114,10 +114,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
114
114
|
height: 48,
|
|
115
115
|
borderRadius: "10"
|
|
116
116
|
},
|
|
117
|
-
image: { borderRadius: "10" },
|
|
117
|
+
image: { borderRadius: "calc({radii.10} - 1px)" },
|
|
118
118
|
fallback: {
|
|
119
119
|
textStyle: "comp/avatar/48",
|
|
120
|
-
borderRadius: "10"
|
|
120
|
+
borderRadius: "calc({radii.10} - 1px)"
|
|
121
121
|
},
|
|
122
122
|
icon: {
|
|
123
123
|
width: 32,
|
|
@@ -137,10 +137,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
137
137
|
height: 64,
|
|
138
138
|
borderRadius: 12
|
|
139
139
|
},
|
|
140
|
-
image: { borderRadius: 12 },
|
|
140
|
+
image: { borderRadius: "calc({radii.12} - 1px)" },
|
|
141
141
|
fallback: {
|
|
142
142
|
textStyle: "comp/avatar/64",
|
|
143
|
-
borderRadius: 12
|
|
143
|
+
borderRadius: "calc({radii.12} - 1px)"
|
|
144
144
|
},
|
|
145
145
|
icon: {
|
|
146
146
|
width: 48,
|
|
@@ -160,10 +160,10 @@ var avatarSlotRecipe = defineSlotRecipe({
|
|
|
160
160
|
height: 128,
|
|
161
161
|
borderRadius: 16
|
|
162
162
|
},
|
|
163
|
-
image: { borderRadius: 16 },
|
|
163
|
+
image: { borderRadius: "calc({radii.16} - 1px)" },
|
|
164
164
|
fallback: {
|
|
165
165
|
textStyle: "comp/avatar/128",
|
|
166
|
-
borderRadius: 16
|
|
166
|
+
borderRadius: "calc({radii.16} - 1px)"
|
|
167
167
|
},
|
|
168
168
|
icon: {
|
|
169
169
|
width: 96,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Avatar.recipe.ts"],"sourcesContent":["import { avatarAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst avatarSlotRecipe = defineSlotRecipe({\n slots: [...avatarAnatomy.keys(), 'icon', 'badge', 'badgeContainer'],\n className: 'avatar',\n base: {\n root: {\n alignItems: 'center',\n border: '1px solid',\n borderColor: 'border/minimal',\n display: 'inline-flex',\n flexShrink: '0',\n justifyContent: 'center',\n position: 'relative',\n userSelect: 'none',\n verticalAlign: 'top',\n '&:has([data-part=image][data-state=visible])': {\n backgroundColor: 'transparent',\n },\n },\n image: {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n fallback: {},\n icon: {},\n badge: {\n width: 16,\n height: 16,\n },\n badgeContainer: {\n display: 'flex',\n boxShadow: 'elevation/sm',\n position: 'absolute',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'text/secondary',\n backgroundColor: 'background/primary',\n },\n },\n\n variants: {\n size: {\n '24': {\n root: { width: 24, height: 24, borderRadius: 4 },\n image: { borderRadius: 4 },\n fallback: { textStyle: 'comp/avatar/24', borderRadius: 4 },\n icon: { width: 16, height: 16 },\n badgeContainer: { display: 'none' },\n },\n '32': {\n root: { width: 32, height: 32, borderRadius: 6 },\n image: { borderRadius: 6 },\n fallback: { textStyle: 'comp/avatar/32', borderRadius: 6 },\n icon: { width: 20, height: 20 },\n badgeContainer: { width: 16, height: 16, bottom: -5, right: -5, borderRadius: 4 },\n },\n '40': {\n root: { width: 40, height: 40, borderRadius: 8 },\n image: { borderRadius: 8 },\n fallback: { textStyle: 'comp/avatar/40', borderRadius: 8 },\n icon: { width: 24, height: 24 },\n badgeContainer: { width: 16, height: 16, bottom: -2, right: -2, borderRadius: 4 },\n },\n '48': {\n root: { width: 48, height: 48, borderRadius: '10' },\n image: { borderRadius: '10' },\n fallback: { textStyle: 'comp/avatar/48', borderRadius: '10' },\n icon: { width: 32, height: 32 },\n badgeContainer: { width: 24, height: 24, bottom: -7, right: -7, borderRadius: '50%' },\n },\n '64': {\n root: { width: 64, height: 64, borderRadius: 12 },\n image: { borderRadius: 12 },\n fallback: { textStyle: 'comp/avatar/64', borderRadius: 12 },\n icon: { width: 48, height: 48 },\n badgeContainer: { width: 24, height: 24, bottom: -5, right: -5, borderRadius: '50%' },\n },\n '128': {\n root: { width: 128, height: 128, borderRadius: 16 },\n image: { borderRadius: 16 },\n fallback: { textStyle: 'comp/avatar/128', borderRadius: 16 },\n icon: { width: 96, height: 96 },\n badgeContainer: { display: 'none' },\n },\n },\n\n variant: {\n circle: {\n root: { borderRadius: '50%' },\n image: { borderRadius: '50%' },\n fallback: { borderRadius: '50%' },\n },\n rounded: {},\n },\n\n colorVariant: {\n neutral: { root: { color: 'color/neutral/strong', backgroundColor: 'color/neutral/subtle' } },\n purple: { root: { color: 'color/purple/strong', backgroundColor: 'color/purple/subtle' } },\n indigo: { root: { color: 'color/indigo/strong', backgroundColor: 'color/indigo/subtle' } },\n blue: { root: { color: 'color/blue/strong', backgroundColor: 'color/blue/subtle' } },\n green: { root: { color: 'color/green/strong', backgroundColor: 'color/green/subtle' } },\n yellow: { root: { color: 'color/yellow/strong', backgroundColor: 'color/yellow/subtle' } },\n red: { root: { color: 'color/red/strong', backgroundColor: 'color/red/subtle' } },\n orange: { root: { color: 'color/orange/strong', backgroundColor: 'color/orange/subtle' } },\n turquoise: { root: { color: 'color/turquoise/strong', backgroundColor: 'color/turquoise/subtle' } },\n },\n },\n\n defaultVariants: {\n colorVariant: 'neutral',\n size: '32',\n variant: 'circle',\n },\n});\n\nexport default avatarSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,mBAAmB,iBAAiB;CACxC,OAAO;EAAC,GAAG,cAAc,KAAK;EAAG;EAAQ;EAAS;CAAgB;CAClE,WAAW;CACX,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,aAAa;GACb,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,YAAY;GACZ,eAAe;GACf,gDAAgD,EAC9C,iBAAiB,cACnB;EACF;EACA,OAAO;GACL,OAAO;GACP,QAAQ;GACR,WAAW;EACb;EACA,UAAU,CAAC;EACX,MAAM,CAAC;EACP,OAAO;GACL,OAAO;GACP,QAAQ;EACV;EACA,gBAAgB;GACd,SAAS;GACT,WAAW;GACX,UAAU;GACV,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,iBAAiB;EACnB;CACF;CAEA,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,MAAM;KAAE,OAAO;KAAI,QAAQ;KAAI,cAAc;IAAE;IAC/C,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"Avatar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Avatar.recipe.ts"],"sourcesContent":["import { avatarAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst avatarSlotRecipe = defineSlotRecipe({\n slots: [...avatarAnatomy.keys(), 'icon', 'badge', 'badgeContainer'],\n className: 'avatar',\n base: {\n root: {\n alignItems: 'center',\n border: '1px solid',\n borderColor: 'border/minimal',\n display: 'inline-flex',\n flexShrink: '0',\n justifyContent: 'center',\n position: 'relative',\n userSelect: 'none',\n verticalAlign: 'top',\n '&:has([data-part=image][data-state=visible])': {\n backgroundColor: 'transparent',\n },\n },\n image: {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n fallback: {},\n icon: {},\n badge: {\n width: 16,\n height: 16,\n },\n badgeContainer: {\n display: 'flex',\n boxShadow: 'elevation/sm',\n position: 'absolute',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'text/secondary',\n backgroundColor: 'background/primary',\n },\n },\n\n variants: {\n size: {\n '24': {\n root: { width: 24, height: 24, borderRadius: 4 },\n image: { borderRadius: 'calc({radii.4} - 1px)' },\n fallback: { textStyle: 'comp/avatar/24', borderRadius: 'calc({radii.4} - 1px)' },\n icon: { width: 16, height: 16 },\n badgeContainer: { display: 'none' },\n },\n '32': {\n root: { width: 32, height: 32, borderRadius: 6 },\n image: { borderRadius: 'calc({radii.6} - 1px)' },\n fallback: { textStyle: 'comp/avatar/32', borderRadius: 'calc({radii.6} - 1px)' },\n icon: { width: 20, height: 20 },\n badgeContainer: { width: 16, height: 16, bottom: -5, right: -5, borderRadius: 4 },\n },\n '40': {\n root: { width: 40, height: 40, borderRadius: 8 },\n image: { borderRadius: 'calc({radii.8} - 1px)' },\n fallback: { textStyle: 'comp/avatar/40', borderRadius: 'calc({radii.8} - 1px)' },\n icon: { width: 24, height: 24 },\n badgeContainer: { width: 16, height: 16, bottom: -2, right: -2, borderRadius: 4 },\n },\n '48': {\n root: { width: 48, height: 48, borderRadius: '10' },\n image: { borderRadius: 'calc({radii.10} - 1px)' },\n fallback: { textStyle: 'comp/avatar/48', borderRadius: 'calc({radii.10} - 1px)' },\n icon: { width: 32, height: 32 },\n badgeContainer: { width: 24, height: 24, bottom: -7, right: -7, borderRadius: '50%' },\n },\n '64': {\n root: { width: 64, height: 64, borderRadius: 12 },\n image: { borderRadius: 'calc({radii.12} - 1px)' },\n fallback: { textStyle: 'comp/avatar/64', borderRadius: 'calc({radii.12} - 1px)' },\n icon: { width: 48, height: 48 },\n badgeContainer: { width: 24, height: 24, bottom: -5, right: -5, borderRadius: '50%' },\n },\n '128': {\n root: { width: 128, height: 128, borderRadius: 16 },\n image: { borderRadius: 'calc({radii.16} - 1px)' },\n fallback: { textStyle: 'comp/avatar/128', borderRadius: 'calc({radii.16} - 1px)' },\n icon: { width: 96, height: 96 },\n badgeContainer: { display: 'none' },\n },\n },\n\n variant: {\n circle: {\n root: { borderRadius: '50%' },\n image: { borderRadius: '50%' },\n fallback: { borderRadius: '50%' },\n },\n rounded: {},\n },\n\n colorVariant: {\n neutral: { root: { color: 'color/neutral/strong', backgroundColor: 'color/neutral/subtle' } },\n purple: { root: { color: 'color/purple/strong', backgroundColor: 'color/purple/subtle' } },\n indigo: { root: { color: 'color/indigo/strong', backgroundColor: 'color/indigo/subtle' } },\n blue: { root: { color: 'color/blue/strong', backgroundColor: 'color/blue/subtle' } },\n green: { root: { color: 'color/green/strong', backgroundColor: 'color/green/subtle' } },\n yellow: { root: { color: 'color/yellow/strong', backgroundColor: 'color/yellow/subtle' } },\n red: { root: { color: 'color/red/strong', backgroundColor: 'color/red/subtle' } },\n orange: { root: { color: 'color/orange/strong', backgroundColor: 'color/orange/subtle' } },\n turquoise: { root: { color: 'color/turquoise/strong', backgroundColor: 'color/turquoise/subtle' } },\n },\n },\n\n defaultVariants: {\n colorVariant: 'neutral',\n size: '32',\n variant: 'circle',\n },\n});\n\nexport default avatarSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -18,8 +18,8 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
18
18
|
minWidth: 0
|
|
19
19
|
},
|
|
20
20
|
description: {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
paddingBlockStart: "2",
|
|
22
|
+
textStyle: "comp/notification/message"
|
|
23
23
|
},
|
|
24
24
|
icon: {
|
|
25
25
|
alignSelf: "flex-start",
|
|
@@ -34,7 +34,7 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
34
34
|
boxShadow: "elevation/lg",
|
|
35
35
|
display: "flex",
|
|
36
36
|
gap: "8",
|
|
37
|
-
paddingBlock:
|
|
37
|
+
paddingBlock: rem(15),
|
|
38
38
|
paddingInline: "12",
|
|
39
39
|
position: "relative",
|
|
40
40
|
translate: "var(--x) var(--y)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n },\n description: {\n
|
|
1
|
+
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n },\n description: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n icon: {\n alignSelf: 'flex-start',\n flexShrink: 0,\n height: '24',\n width: '24',\n },\n root: {\n alignItems: 'flex-start',\n border: '1px solid',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n gap: '8',\n // `rem(15)` block padding (not 16) lands the toast on the designed heights once the 1px\n // border is added — Figma measures its 16px padding from the frame edge, stroke included:\n // 56px message-only, 102px message + action, 116px title + message + timestamp, 128px\n // title + message + action. Same compensation as BitkitAlert's `rem(11)`.\n paddingBlock: rem(15),\n paddingInline: '12',\n position: 'relative',\n translate: 'var(--x) var(--y)',\n width: rem(480),\n willChange: 'translate, opacity, scale',\n transition: 'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',\n transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',\n _closed: {\n transition: 'translate 400ms, scale 400ms, opacity 200ms',\n transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',\n },\n },\n timestamp: {\n marginBlockStart: '16',\n textStyle: 'comp/notification/message',\n },\n title: {\n marginBlockEnd: '2',\n textStyle: 'comp/notification/title',\n },\n closeTrigger: {\n insetBlockStart: '12',\n insetInlineEnd: '12',\n position: 'absolute',\n },\n },\n variants: {\n variant: Object.fromEntries(\n NOTIFICATION_VARIANTS.map((v) => [\n v,\n {\n icon: { color: ICONS_MAP[v] },\n root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n },\n ]),\n ),\n },\n defaultVariants: {\n variant: 'info',\n },\n});\n\nexport default toastSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO;EAAC,GAAG,aAAa,KAAK;EAAG;EAAW;EAAQ;CAAW;CAC9D,MAAM;EACJ,eAAe,EACb,kBAAkB,KACpB;EACA,SAAS;GACP,MAAM;GACN,UAAU;EACZ;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,MAAM;GACJ,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,SAAS;GACT,KAAK;GAKL,cAAc,IAAI,EAAE;GACpB,eAAe;GACf,UAAU;GACV,WAAW;GACX,OAAO,IAAI,GAAG;GACd,YAAY;GACZ,YAAY;GACZ,0BAA0B;GAC1B,SAAS;IACP,YAAY;IACZ,0BAA0B;GAC5B;EACF;EACA,WAAW;GACT,kBAAkB;GAClB,WAAW;EACb;EACA,OAAO;GACL,gBAAgB;GAChB,WAAW;EACb;EACA,cAAc;GACZ,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;EACZ;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,MAAM,EAAE,OAAO,UAAU,GAAG;EAC5B,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
|
|
@@ -68,11 +68,11 @@ declare const slotRecipes: {
|
|
|
68
68
|
borderRadius: number;
|
|
69
69
|
};
|
|
70
70
|
image: {
|
|
71
|
-
borderRadius:
|
|
71
|
+
borderRadius: "calc({radii.4} - 1px)";
|
|
72
72
|
};
|
|
73
73
|
fallback: {
|
|
74
74
|
textStyle: "comp/avatar/24";
|
|
75
|
-
borderRadius:
|
|
75
|
+
borderRadius: "calc({radii.4} - 1px)";
|
|
76
76
|
};
|
|
77
77
|
icon: {
|
|
78
78
|
width: number;
|
|
@@ -89,11 +89,11 @@ declare const slotRecipes: {
|
|
|
89
89
|
borderRadius: number;
|
|
90
90
|
};
|
|
91
91
|
image: {
|
|
92
|
-
borderRadius:
|
|
92
|
+
borderRadius: "calc({radii.6} - 1px)";
|
|
93
93
|
};
|
|
94
94
|
fallback: {
|
|
95
95
|
textStyle: "comp/avatar/32";
|
|
96
|
-
borderRadius:
|
|
96
|
+
borderRadius: "calc({radii.6} - 1px)";
|
|
97
97
|
};
|
|
98
98
|
icon: {
|
|
99
99
|
width: number;
|
|
@@ -114,11 +114,11 @@ declare const slotRecipes: {
|
|
|
114
114
|
borderRadius: number;
|
|
115
115
|
};
|
|
116
116
|
image: {
|
|
117
|
-
borderRadius:
|
|
117
|
+
borderRadius: "calc({radii.8} - 1px)";
|
|
118
118
|
};
|
|
119
119
|
fallback: {
|
|
120
120
|
textStyle: "comp/avatar/40";
|
|
121
|
-
borderRadius:
|
|
121
|
+
borderRadius: "calc({radii.8} - 1px)";
|
|
122
122
|
};
|
|
123
123
|
icon: {
|
|
124
124
|
width: number;
|
|
@@ -139,11 +139,11 @@ declare const slotRecipes: {
|
|
|
139
139
|
borderRadius: "10";
|
|
140
140
|
};
|
|
141
141
|
image: {
|
|
142
|
-
borderRadius: "10";
|
|
142
|
+
borderRadius: "calc({radii.10} - 1px)";
|
|
143
143
|
};
|
|
144
144
|
fallback: {
|
|
145
145
|
textStyle: "comp/avatar/48";
|
|
146
|
-
borderRadius: "10";
|
|
146
|
+
borderRadius: "calc({radii.10} - 1px)";
|
|
147
147
|
};
|
|
148
148
|
icon: {
|
|
149
149
|
width: number;
|
|
@@ -164,11 +164,11 @@ declare const slotRecipes: {
|
|
|
164
164
|
borderRadius: number;
|
|
165
165
|
};
|
|
166
166
|
image: {
|
|
167
|
-
borderRadius:
|
|
167
|
+
borderRadius: "calc({radii.12} - 1px)";
|
|
168
168
|
};
|
|
169
169
|
fallback: {
|
|
170
170
|
textStyle: "comp/avatar/64";
|
|
171
|
-
borderRadius:
|
|
171
|
+
borderRadius: "calc({radii.12} - 1px)";
|
|
172
172
|
};
|
|
173
173
|
icon: {
|
|
174
174
|
width: number;
|
|
@@ -189,11 +189,11 @@ declare const slotRecipes: {
|
|
|
189
189
|
borderRadius: number;
|
|
190
190
|
};
|
|
191
191
|
image: {
|
|
192
|
-
borderRadius:
|
|
192
|
+
borderRadius: "calc({radii.16} - 1px)";
|
|
193
193
|
};
|
|
194
194
|
fallback: {
|
|
195
195
|
textStyle: "comp/avatar/128";
|
|
196
|
-
borderRadius:
|
|
196
|
+
borderRadius: "calc({radii.16} - 1px)";
|
|
197
197
|
};
|
|
198
198
|
icon: {
|
|
199
199
|
width: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n toast: {\n value: 1550,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,OAAO,EACL,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
|