@bitrise/bitkit-v2 0.3.413 → 0.3.415
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/BitkitControlButton/BitkitControlButton.js +1 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +263 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/main.js +2 -2
- package/dist/theme/slot-recipes/Collapsible.recipe.js +0 -1
- package/dist/theme/slot-recipes/Collapsible.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/InlineLoading.recipe.d.ts +2 -10
- package/dist/theme/slot-recipes/InlineLoading.recipe.js +2 -2
- package/dist/theme/slot-recipes/InlineLoading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/LabeledData.recipe.js +1 -2
- package/dist/theme/slot-recipes/LabeledData.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/List.recipe.js +0 -1
- package/dist/theme/slot-recipes/List.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Markdown.recipe.js +7 -10
- package/dist/theme/slot-recipes/Markdown.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/OverflowContent.recipe.js +0 -1
- package/dist/theme/slot-recipes/OverflowContent.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +85 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +276 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Stat.recipe.js +1 -2
- package/dist/theme/slot-recipes/Stat.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Table.recipe.js +1 -4
- package/dist/theme/slot-recipes/Table.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/TreeView.recipe.js +0 -1
- package/dist/theme/slot-recipes/TreeView.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +86 -31
- package/dist/theme/slot-recipes/index.js +2 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/useIsTruncated.d.ts +27 -0
- package/dist/utilities/useIsTruncated.js +54 -0
- package/dist/utilities/useIsTruncated.js.map +1 -0
- package/docs/v1-to-v2-migration-guide.md +9 -6
- package/package.json +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
- package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +0 -1
|
@@ -18,9 +18,9 @@ var inlineLoadingRecipe = defineSlotRecipe({
|
|
|
18
18
|
lg: { label: { textStyle: "body/lg/regular" } }
|
|
19
19
|
},
|
|
20
20
|
status: {
|
|
21
|
-
error: {
|
|
21
|
+
error: {},
|
|
22
22
|
loading: { root: { color: "text/secondary" } },
|
|
23
|
-
success: {
|
|
23
|
+
success: {}
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineLoading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/InlineLoading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst inlineLoadingRecipe = defineSlotRecipe({\n className: 'inline-loading',\n slots: ['root', 'label'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '8',\n },\n label: {},\n },\n variants: {\n size: {\n sm: {\n label: { textStyle: 'body/sm/regular' },\n },\n md: {\n label: { textStyle: 'body/md/regular' },\n },\n lg: {\n label: { textStyle: 'body/lg/regular' },\n },\n },\n status: {\n error: {
|
|
1
|
+
{"version":3,"file":"InlineLoading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/InlineLoading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst inlineLoadingRecipe = defineSlotRecipe({\n className: 'inline-loading',\n slots: ['root', 'label'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '8',\n },\n label: {},\n },\n variants: {\n size: {\n sm: {\n label: { textStyle: 'body/sm/regular' },\n },\n md: {\n label: { textStyle: 'body/md/regular' },\n },\n lg: {\n label: { textStyle: 'body/lg/regular' },\n },\n },\n status: {\n error: {},\n loading: {\n root: { color: 'text/secondary' },\n },\n success: {},\n },\n },\n defaultVariants: {\n size: 'md',\n status: 'loading',\n },\n});\n\nexport default inlineLoadingRecipe;\n"],"mappings":";;AAEA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO,CAAC,QAAQ,OAAO;CACvB,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,OAAO,CAAC;CACV;CACA,UAAU;EACR,MAAM;GACJ,IAAI,EACF,OAAO,EAAE,WAAW,kBAAkB,EACxC;GACA,IAAI,EACF,OAAO,EAAE,WAAW,kBAAkB,EACxC;GACA,IAAI,EACF,OAAO,EAAE,WAAW,kBAAkB,EACxC;EACF;EACA,QAAQ;GACN,OAAO,CAAC;GACR,SAAS,EACP,MAAM,EAAE,OAAO,iBAAiB,EAClC;GACA,SAAS,CAAC;EACZ;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;AACF,CAAC"}
|
|
@@ -26,8 +26,7 @@ var labeledDataSlotRecipe = defineSlotRecipe({
|
|
|
26
26
|
alignItems: "baseline",
|
|
27
27
|
gap: "2",
|
|
28
28
|
fontFeatureSettings: "pnum",
|
|
29
|
-
fontVariantNumeric: "proportional-nums"
|
|
30
|
-
color: "text/body"
|
|
29
|
+
fontVariantNumeric: "proportional-nums"
|
|
31
30
|
},
|
|
32
31
|
limit: {
|
|
33
32
|
color: "text/secondary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledData.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/LabeledData.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst labeledDataSlotRecipe = defineSlotRecipe({\n className: 'labeled-data',\n slots: ['root', 'label', 'value', 'limit', 'helpText'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n label: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n textStyle: 'body/md/semibold',\n },\n value: {\n display: 'inline-flex',\n alignItems: 'baseline',\n gap: '2',\n fontFeatureSettings: 'pnum',\n fontVariantNumeric: 'proportional-nums',\n
|
|
1
|
+
{"version":3,"file":"LabeledData.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/LabeledData.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst labeledDataSlotRecipe = defineSlotRecipe({\n className: 'labeled-data',\n slots: ['root', 'label', 'value', 'limit', 'helpText'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n label: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n textStyle: 'body/md/semibold',\n },\n value: {\n display: 'inline-flex',\n alignItems: 'baseline',\n gap: '2',\n fontFeatureSettings: 'pnum',\n fontVariantNumeric: 'proportional-nums',\n },\n limit: {\n color: 'text/secondary',\n fontWeight: 'initial',\n letterSpacing: 'initial',\n },\n helpText: {\n textStyle: 'body/md/regular',\n color: 'text/tertiary',\n },\n },\n variants: {\n size: {\n lg: {\n label: { color: 'text/primary' },\n value: { textStyle: 'comp/data/sm' },\n limit: { textStyle: 'body/md/regular' },\n },\n '2xl': {\n label: { color: 'text/secondary' },\n value: { textStyle: 'comp/data/md' },\n limit: { textStyle: 'body/xl/regular' },\n },\n '3xl': {\n label: { color: 'text/secondary' },\n value: { textStyle: 'comp/data/lg' },\n limit: { textStyle: 'body/2xl/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default labeledDataSlotRecipe;\n"],"mappings":";;AAEA,IAAM,wBAAwB,iBAAiB;CAC7C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAS;EAAS;EAAS;CAAU;CACrD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,SAAS;GACT,KAAK;GACL,YAAY;GACZ,WAAW;EACb;EACA,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK;GACL,qBAAqB;GACrB,oBAAoB;EACtB;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,eAAe;EACjB;EACA,UAAU;GACR,WAAW;GACX,OAAO;EACT;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO,EAAE,OAAO,eAAe;GAC/B,OAAO,EAAE,WAAW,eAAe;GACnC,OAAO,EAAE,WAAW,kBAAkB;EACxC;EACA,OAAO;GACL,OAAO,EAAE,OAAO,iBAAiB;GACjC,OAAO,EAAE,WAAW,eAAe;GACnC,OAAO,EAAE,WAAW,kBAAkB;EACxC;EACA,OAAO;GACL,OAAO,EAAE,OAAO,iBAAiB;GACjC,OAAO,EAAE,WAAW,eAAe;GACnC,OAAO,EAAE,WAAW,mBAAmB;EACzC;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/List.recipe.ts"],"sourcesContent":["import { listAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst listSlotRecipe = defineSlotRecipe({\n className: 'list',\n slots: listAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n item: {\n alignItems: 'flex-start',\n
|
|
1
|
+
{"version":3,"file":"List.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/List.recipe.ts"],"sourcesContent":["import { listAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst listSlotRecipe = defineSlotRecipe({\n className: 'list',\n slots: listAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n item: {\n alignItems: 'flex-start',\n display: 'inline-flex',\n whiteSpace: 'normal',\n },\n indicator: {\n alignItems: 'center',\n color: 'text/secondary',\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n },\n },\n variants: {\n size: {\n lg: {\n item: {\n textStyle: 'body/lg/regular',\n },\n indicator: {\n height: '24',\n width: '24',\n },\n },\n md: {\n item: {\n textStyle: 'body/md/regular',\n },\n indicator: {\n height: '20',\n width: '20',\n },\n },\n sm: {\n item: {\n textStyle: 'body/sm/regular',\n },\n indicator: {\n height: '16',\n width: '16',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default listSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,YAAY,KAAK;CACxB,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,YAAY;EACd;EACA,WAAW;GACT,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,MAAM,EACJ,WAAW,kBACb;GACA,WAAW;IACT,QAAQ;IACR,OAAO;GACT;EACF;EACA,IAAI;GACF,MAAM,EACJ,WAAW,kBACb;GACA,WAAW;IACT,QAAQ;IACR,OAAO;GACT;EACF;EACA,IAAI;GACF,MAAM,EACJ,WAAW,kBACb;GACA,WAAW;IACT,QAAQ;IACR,OAAO;GACT;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -3,16 +3,13 @@ import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
|
3
3
|
var markdownSlotRecipe = defineSlotRecipe({
|
|
4
4
|
className: "markdown",
|
|
5
5
|
slots: ["root", "blockquote"],
|
|
6
|
-
base: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
color: "text/secondary"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
6
|
+
base: { blockquote: {
|
|
7
|
+
borderInlineStart: "2px solid",
|
|
8
|
+
borderColor: "border/regular",
|
|
9
|
+
paddingInlineStart: "16",
|
|
10
|
+
paddingBlock: "8",
|
|
11
|
+
color: "text/secondary"
|
|
12
|
+
} },
|
|
16
13
|
variants: { size: {
|
|
17
14
|
sm: { root: { textStyle: "body/sm/regular" } },
|
|
18
15
|
md: { root: { textStyle: "body/md/regular" } },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Markdown.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst markdownSlotRecipe = defineSlotRecipe({\n className: 'markdown',\n slots: ['root', 'blockquote'],\n base: {\n
|
|
1
|
+
{"version":3,"file":"Markdown.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Markdown.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst markdownSlotRecipe = defineSlotRecipe({\n className: 'markdown',\n slots: ['root', 'blockquote'],\n base: {\n blockquote: {\n borderInlineStart: '2px solid',\n borderColor: 'border/regular',\n paddingInlineStart: '16',\n paddingBlock: '8',\n color: 'text/secondary',\n },\n },\n variants: {\n size: {\n sm: {\n root: {\n textStyle: 'body/sm/regular',\n },\n },\n md: {\n root: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n root: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default markdownSlotRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,CAAC,QAAQ,YAAY;CAC5B,MAAM,EACJ,YAAY;EACV,mBAAmB;EACnB,aAAa;EACb,oBAAoB;EACpB,cAAc;EACd,OAAO;CACT,EACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM,EACJ,WAAW,kBACb,EACF;EACA,IAAI,EACF,MAAM,EACJ,WAAW,kBACb,EACF;EACA,IAAI,EACF,MAAM,EACJ,WAAW,kBACb,EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowContent.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/OverflowContent.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst overflowContentSlotRecipe = defineSlotRecipe({\n className: 'overflowContent',\n slots: ['root', 'preview', 'action'] as const,\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '4',\n },\n preview: {\n
|
|
1
|
+
{"version":3,"file":"OverflowContent.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/OverflowContent.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst overflowContentSlotRecipe = defineSlotRecipe({\n className: 'overflowContent',\n slots: ['root', 'preview', 'action'] as const,\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n gap: '4',\n },\n preview: {\n flex: '1',\n minWidth: 0,\n overflow: 'hidden',\n position: 'relative',\n textOverflow: 'ellipsis',\n textStyle: 'body/md/regular',\n whiteSpace: 'nowrap',\n _after: {\n background: 'linear-gradient(to left, {colors.neutral.100} 0%, transparent 100%)',\n content: '\"\"',\n height: '100%',\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n top: 0,\n width: '32',\n },\n },\n action: {\n flexShrink: '0',\n },\n },\n});\n\nexport default overflowContentSlotRecipe;\n"],"mappings":";;AAEA,IAAM,4BAA4B,iBAAiB;CACjD,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;CAAQ;CACnC,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,SAAS;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,UAAU;GACV,cAAc;GACd,WAAW;GACX,YAAY;GACZ,QAAQ;IACN,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,eAAe;IACf,UAAU;IACV,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,QAAQ,EACN,YAAY,IACd;CACF;AACF,CAAC"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
2
|
+
hasBack: {
|
|
3
|
+
true: {
|
|
4
|
+
title: {
|
|
5
|
+
paddingBlockEnd: "8";
|
|
6
|
+
paddingInlineStart: "16";
|
|
7
|
+
};
|
|
8
|
+
titleBlock: {
|
|
9
|
+
gap: "4";
|
|
10
|
+
paddingBlock: "4";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
false: {
|
|
14
|
+
title: {
|
|
15
|
+
paddingBlockEnd: "16";
|
|
16
|
+
paddingInlineStart: "24";
|
|
17
|
+
};
|
|
18
|
+
titleBlock: {
|
|
19
|
+
paddingBlock: "6";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
isDisabled: {
|
|
24
|
+
true: {
|
|
25
|
+
item: {
|
|
26
|
+
cursor: "not-allowed";
|
|
27
|
+
_hover: {
|
|
28
|
+
background: "transparent";
|
|
29
|
+
_active: {
|
|
30
|
+
background: "transparent";
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
_active: {
|
|
34
|
+
background: "transparent";
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
itemIcon: {
|
|
38
|
+
color: "icon/disabled";
|
|
39
|
+
_groupHover: {
|
|
40
|
+
color: "icon/disabled";
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
itemLabel: {
|
|
44
|
+
color: "text/disabled";
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
false: {};
|
|
48
|
+
};
|
|
49
|
+
selected: {
|
|
50
|
+
true: {
|
|
51
|
+
item: {
|
|
52
|
+
background: "background/selected";
|
|
53
|
+
_hover: {
|
|
54
|
+
background: "background/selected-hover";
|
|
55
|
+
_active: {
|
|
56
|
+
background: {
|
|
57
|
+
base: "background/selected-hover";
|
|
58
|
+
tablet: "background/selected-active";
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
_active: {
|
|
63
|
+
background: {
|
|
64
|
+
base: "background/selected-hover";
|
|
65
|
+
tablet: "background/selected-active";
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
itemIcon: {
|
|
70
|
+
color: "icon/interactive";
|
|
71
|
+
_groupHover: {
|
|
72
|
+
color: "icon/interactive-hover";
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
itemLabel: {
|
|
76
|
+
textStyle: {
|
|
77
|
+
base: "body/lg/semibold";
|
|
78
|
+
tablet: "body/md/semibold";
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
false: {};
|
|
83
|
+
};
|
|
84
|
+
}>;
|
|
85
|
+
export default pageSidebarSlotRecipe;
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
import { rem } from "../themeUtils.js";
|
|
2
|
+
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
+
//#region lib/theme/slot-recipes/PageSidebar.recipe.ts
|
|
4
|
+
var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
5
|
+
className: "page-sidebar",
|
|
6
|
+
slots: [
|
|
7
|
+
"body",
|
|
8
|
+
"contentBlock",
|
|
9
|
+
"divider",
|
|
10
|
+
"footer",
|
|
11
|
+
"item",
|
|
12
|
+
"itemIcon",
|
|
13
|
+
"itemLabel",
|
|
14
|
+
"project",
|
|
15
|
+
"projectLabel",
|
|
16
|
+
"projectValue",
|
|
17
|
+
"projectValueWrapper",
|
|
18
|
+
"root",
|
|
19
|
+
"selectionMarker",
|
|
20
|
+
"suffixIcon",
|
|
21
|
+
"title",
|
|
22
|
+
"titleBlock",
|
|
23
|
+
"titleText"
|
|
24
|
+
],
|
|
25
|
+
base: {
|
|
26
|
+
root: {
|
|
27
|
+
background: "background/primary",
|
|
28
|
+
borderInlineEndColor: "border/regular",
|
|
29
|
+
borderInlineEndStyle: "solid",
|
|
30
|
+
borderInlineEndWidth: "1",
|
|
31
|
+
display: "flex",
|
|
32
|
+
flexDirection: "column",
|
|
33
|
+
minHeight: "100dvh",
|
|
34
|
+
maxWidth: {
|
|
35
|
+
base: "none",
|
|
36
|
+
tablet: rem(320)
|
|
37
|
+
},
|
|
38
|
+
minWidth: rem(240),
|
|
39
|
+
paddingBlockStart: "16",
|
|
40
|
+
width: {
|
|
41
|
+
base: "full",
|
|
42
|
+
tablet: rem(240)
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
body: {
|
|
46
|
+
display: "flex",
|
|
47
|
+
flex: 1,
|
|
48
|
+
flexDirection: "column",
|
|
49
|
+
marginBlockEnd: "16",
|
|
50
|
+
width: "full"
|
|
51
|
+
},
|
|
52
|
+
title: {
|
|
53
|
+
alignItems: "center",
|
|
54
|
+
color: "text/primary",
|
|
55
|
+
display: "flex",
|
|
56
|
+
flexShrink: 0,
|
|
57
|
+
overflow: "clip",
|
|
58
|
+
paddingInlineEnd: "32"
|
|
59
|
+
},
|
|
60
|
+
titleBlock: {
|
|
61
|
+
alignItems: "center",
|
|
62
|
+
display: "flex",
|
|
63
|
+
minWidth: 0
|
|
64
|
+
},
|
|
65
|
+
titleText: {
|
|
66
|
+
textStyle: "heading/h3",
|
|
67
|
+
whiteSpace: "nowrap"
|
|
68
|
+
},
|
|
69
|
+
item: {
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
cursor: "pointer",
|
|
72
|
+
display: "flex",
|
|
73
|
+
focusVisibleRing: "inside",
|
|
74
|
+
gap: "12",
|
|
75
|
+
overflow: "clip",
|
|
76
|
+
paddingBlock: {
|
|
77
|
+
base: "12",
|
|
78
|
+
tablet: "8"
|
|
79
|
+
},
|
|
80
|
+
paddingInline: "24",
|
|
81
|
+
position: "relative",
|
|
82
|
+
width: "full",
|
|
83
|
+
_hover: {
|
|
84
|
+
background: {
|
|
85
|
+
base: "background/hover",
|
|
86
|
+
tablet: "background/secondary"
|
|
87
|
+
},
|
|
88
|
+
_active: { background: {
|
|
89
|
+
base: "background/active",
|
|
90
|
+
tablet: "background/tertiary"
|
|
91
|
+
} }
|
|
92
|
+
},
|
|
93
|
+
_active: { background: {
|
|
94
|
+
base: "background/active",
|
|
95
|
+
tablet: "background/tertiary"
|
|
96
|
+
} },
|
|
97
|
+
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
98
|
+
},
|
|
99
|
+
contentBlock: {
|
|
100
|
+
alignItems: "center",
|
|
101
|
+
display: "flex",
|
|
102
|
+
flex: 1,
|
|
103
|
+
gap: "12",
|
|
104
|
+
minWidth: 0,
|
|
105
|
+
paddingBlock: {
|
|
106
|
+
base: "0",
|
|
107
|
+
tablet: "2"
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
itemIcon: {
|
|
111
|
+
color: "icon/secondary",
|
|
112
|
+
flexShrink: 0,
|
|
113
|
+
_groupHover: { color: "icon/primary" }
|
|
114
|
+
},
|
|
115
|
+
itemLabel: {
|
|
116
|
+
color: "text/primary",
|
|
117
|
+
flex: 1,
|
|
118
|
+
minWidth: 0,
|
|
119
|
+
overflow: "hidden",
|
|
120
|
+
textAlign: "start",
|
|
121
|
+
textOverflow: "ellipsis",
|
|
122
|
+
textStyle: {
|
|
123
|
+
base: "body/lg/regular",
|
|
124
|
+
tablet: "body/md/regular"
|
|
125
|
+
},
|
|
126
|
+
whiteSpace: "nowrap"
|
|
127
|
+
},
|
|
128
|
+
suffixIcon: {
|
|
129
|
+
color: "icon/tertiary",
|
|
130
|
+
flexShrink: 0
|
|
131
|
+
},
|
|
132
|
+
selectionMarker: {
|
|
133
|
+
background: "border/selected",
|
|
134
|
+
borderEndStartRadius: {
|
|
135
|
+
base: "0",
|
|
136
|
+
tablet: "2"
|
|
137
|
+
},
|
|
138
|
+
borderStartStartRadius: {
|
|
139
|
+
base: "0",
|
|
140
|
+
tablet: "2"
|
|
141
|
+
},
|
|
142
|
+
height: "full",
|
|
143
|
+
insetBlockStart: 0,
|
|
144
|
+
insetInlineEnd: 0,
|
|
145
|
+
position: "absolute",
|
|
146
|
+
width: {
|
|
147
|
+
base: "4",
|
|
148
|
+
tablet: "2"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
footer: {
|
|
152
|
+
borderBlockStart: "1px solid",
|
|
153
|
+
borderColor: "border/minimal",
|
|
154
|
+
display: "flex",
|
|
155
|
+
flexDirection: "column",
|
|
156
|
+
flexShrink: 0,
|
|
157
|
+
paddingBlock: "8"
|
|
158
|
+
},
|
|
159
|
+
project: {
|
|
160
|
+
display: "flex",
|
|
161
|
+
flexDirection: "column",
|
|
162
|
+
gap: "4",
|
|
163
|
+
justifyContent: "center",
|
|
164
|
+
overflow: "clip",
|
|
165
|
+
paddingBlockEnd: {
|
|
166
|
+
base: "12",
|
|
167
|
+
tablet: "8"
|
|
168
|
+
},
|
|
169
|
+
paddingBlockStart: "8",
|
|
170
|
+
paddingInlineEnd: {
|
|
171
|
+
base: "24",
|
|
172
|
+
tablet: "32"
|
|
173
|
+
},
|
|
174
|
+
paddingInlineStart: "24",
|
|
175
|
+
whiteSpace: "nowrap"
|
|
176
|
+
},
|
|
177
|
+
projectLabel: {
|
|
178
|
+
color: "text/tertiary",
|
|
179
|
+
textStyle: "heading/h6"
|
|
180
|
+
},
|
|
181
|
+
projectValue: {
|
|
182
|
+
color: "text/body",
|
|
183
|
+
overflow: "hidden",
|
|
184
|
+
textOverflow: "ellipsis",
|
|
185
|
+
textStyle: "body/lg/semibold"
|
|
186
|
+
},
|
|
187
|
+
projectValueWrapper: {
|
|
188
|
+
display: "flex",
|
|
189
|
+
minWidth: 0
|
|
190
|
+
},
|
|
191
|
+
divider: {
|
|
192
|
+
borderColor: "border/minimal",
|
|
193
|
+
marginBlock: {
|
|
194
|
+
base: "20",
|
|
195
|
+
tablet: "16"
|
|
196
|
+
},
|
|
197
|
+
marginInline: "24",
|
|
198
|
+
width: "auto"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
variants: {
|
|
202
|
+
hasBack: {
|
|
203
|
+
true: {
|
|
204
|
+
title: {
|
|
205
|
+
paddingBlockEnd: "8",
|
|
206
|
+
paddingInlineStart: "16"
|
|
207
|
+
},
|
|
208
|
+
titleBlock: {
|
|
209
|
+
gap: "4",
|
|
210
|
+
paddingBlock: "4"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
false: {
|
|
214
|
+
title: {
|
|
215
|
+
paddingBlockEnd: "16",
|
|
216
|
+
paddingInlineStart: "24"
|
|
217
|
+
},
|
|
218
|
+
titleBlock: { paddingBlock: "6" }
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
isDisabled: {
|
|
222
|
+
true: {
|
|
223
|
+
item: {
|
|
224
|
+
cursor: "not-allowed",
|
|
225
|
+
_hover: {
|
|
226
|
+
background: "transparent",
|
|
227
|
+
_active: { background: "transparent" }
|
|
228
|
+
},
|
|
229
|
+
_active: { background: "transparent" }
|
|
230
|
+
},
|
|
231
|
+
itemIcon: {
|
|
232
|
+
color: "icon/disabled",
|
|
233
|
+
_groupHover: { color: "icon/disabled" }
|
|
234
|
+
},
|
|
235
|
+
itemLabel: { color: "text/disabled" }
|
|
236
|
+
},
|
|
237
|
+
false: {}
|
|
238
|
+
},
|
|
239
|
+
selected: {
|
|
240
|
+
true: {
|
|
241
|
+
item: {
|
|
242
|
+
background: "background/selected",
|
|
243
|
+
_hover: {
|
|
244
|
+
background: "background/selected-hover",
|
|
245
|
+
_active: { background: {
|
|
246
|
+
base: "background/selected-hover",
|
|
247
|
+
tablet: "background/selected-active"
|
|
248
|
+
} }
|
|
249
|
+
},
|
|
250
|
+
_active: { background: {
|
|
251
|
+
base: "background/selected-hover",
|
|
252
|
+
tablet: "background/selected-active"
|
|
253
|
+
} }
|
|
254
|
+
},
|
|
255
|
+
itemIcon: {
|
|
256
|
+
color: "icon/interactive",
|
|
257
|
+
_groupHover: { color: "icon/interactive-hover" }
|
|
258
|
+
},
|
|
259
|
+
itemLabel: { textStyle: {
|
|
260
|
+
base: "body/lg/semibold",
|
|
261
|
+
tablet: "body/md/semibold"
|
|
262
|
+
} }
|
|
263
|
+
},
|
|
264
|
+
false: {}
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
defaultVariants: {
|
|
268
|
+
hasBack: false,
|
|
269
|
+
isDisabled: false,
|
|
270
|
+
selected: false
|
|
271
|
+
}
|
|
272
|
+
});
|
|
273
|
+
//#endregion
|
|
274
|
+
export { pageSidebarSlotRecipe as default };
|
|
275
|
+
|
|
276
|
+
//# sourceMappingURL=PageSidebar.recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageSidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst pageSidebarSlotRecipe = defineSlotRecipe({\n className: 'page-sidebar',\n slots: [\n 'body',\n 'contentBlock',\n 'divider',\n 'footer',\n 'item',\n 'itemIcon',\n 'itemLabel',\n 'project',\n 'projectLabel',\n 'projectValue',\n 'projectValueWrapper',\n 'root',\n 'selectionMarker',\n 'suffixIcon',\n 'title',\n 'titleBlock',\n 'titleText',\n ],\n base: {\n root: {\n background: 'background/primary',\n // Longhands, not the `borderInlineEnd: '1px solid'` shorthand: that shorthand carries no\n // colour, so it resets it to `currentColor` if it lands after `borderColor` — which is what\n // sorting these keys alphabetically did, turning the rule dark.\n borderInlineEndColor: 'border/regular',\n borderInlineEndStyle: 'solid',\n borderInlineEndWidth: '1',\n display: 'flex',\n flexDirection: 'column',\n // `minHeight` rather than `height`: on a short navigation the sidebar still reaches the\n // bottom of the viewport, but a long one grows past it and scrolls with the page as one\n // block — the footer is part of that scroll, not pinned to the bottom.\n minHeight: '100dvh',\n // Below `tablet` the sidebar is the whole view — Figma's mobile frame (`23056:50745`) is the\n // full 375 of the phone, not a 240 column beside a page.\n maxWidth: { base: 'none', tablet: rem(320) },\n minWidth: rem(240),\n paddingBlockStart: '16',\n width: { base: 'full', tablet: rem(240) },\n },\n body: {\n display: 'flex',\n // Absorbs the slack so the footer sits at the bottom when the navigation is short, and\n // simply grows when it is long.\n flex: 1,\n flexDirection: 'column',\n // The minimum gap between the navigation and the footer block. It is a margin so it stays\n // outside the items' own box, and `flex: 1` above means any extra space lands in the body\n // rather than widening this gap.\n marginBlockEnd: '16',\n width: 'full',\n },\n title: {\n alignItems: 'center',\n color: 'text/primary',\n display: 'flex',\n flexShrink: 0,\n overflow: 'clip',\n paddingInlineEnd: '32',\n },\n titleBlock: {\n alignItems: 'center',\n display: 'flex',\n minWidth: 0,\n },\n titleText: {\n textStyle: 'heading/h3',\n whiteSpace: 'nowrap',\n },\n item: {\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n focusVisibleRing: 'inside',\n gap: '12',\n overflow: 'clip',\n // 48 tall on mobile against 40 on desktop — the row is a touch target there.\n paddingBlock: { base: '12', tablet: '8' },\n paddingInline: '24',\n position: 'relative',\n width: 'full',\n // Mobile reaches for `background/hover` / `background/active` where desktop uses the\n // `secondary` / `tertiary` surfaces. The two happen to resolve close, but they are separate\n // tokens in the design and the mobile item (`9221:4406`) binds these.\n _hover: {\n background: { base: 'background/hover', tablet: 'background/secondary' },\n _active: {\n background: { base: 'background/active', tablet: 'background/tertiary' },\n },\n },\n _active: {\n background: { base: 'background/active', tablet: 'background/tertiary' },\n },\n // `focusVisibleRing: 'inside'` still resolves to `outline-offset: 0`, which draws the ring\n // just outside the border box. The item spans the sidebar's full width, so that would bleed\n // past the sidebar's edges — pull the whole ring inside the item instead.\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n contentBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '12',\n minWidth: 0,\n // Pads the 16px icon out to the 24px line box on desktop. The mobile icon is already 24, so\n // there is nothing to make up — the row would just grow past 48.\n paddingBlock: { base: '0', tablet: '2' },\n },\n itemIcon: {\n color: 'icon/secondary',\n flexShrink: 0,\n _groupHover: {\n color: 'icon/primary',\n },\n },\n itemLabel: {\n color: 'text/primary',\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n textAlign: 'start',\n textOverflow: 'ellipsis',\n textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n suffixIcon: {\n color: 'icon/tertiary',\n flexShrink: 0,\n },\n selectionMarker: {\n background: 'border/selected',\n // Mobile draws the marker as a plain 4px edge (`9221:4417`); desktop as a 2px rounded rule.\n borderEndStartRadius: { base: '0', tablet: '2' },\n borderStartStartRadius: { base: '0', tablet: '2' },\n height: 'full',\n insetBlockStart: 0,\n insetInlineEnd: 0,\n position: 'absolute',\n width: { base: '4', tablet: '2' },\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n display: 'flex',\n flexDirection: 'column',\n // The body above absorbs the free space, so the footer needs no positioning of its own —\n // it just must not be squashed by a long list.\n flexShrink: 0,\n paddingBlock: '8',\n },\n project: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n justifyContent: 'center',\n overflow: 'clip',\n paddingBlockEnd: { base: '12', tablet: '8' },\n paddingBlockStart: '8',\n paddingInlineEnd: { base: '24', tablet: '32' },\n paddingInlineStart: '24',\n whiteSpace: 'nowrap',\n },\n projectLabel: {\n color: 'text/tertiary',\n textStyle: 'heading/h6',\n },\n projectValue: {\n color: 'text/body',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/semibold',\n },\n projectValueWrapper: {\n display: 'flex',\n minWidth: 0,\n },\n divider: {\n // Both of the sidebar's separator roles are `border/minimal` — the group header\n // (`20014:6508`) and this plain rule (`20014:6511`) — against `border/regular` for the general\n // Separator component. The override is per-slot for that reason, not to limit blast radius.\n borderColor: 'border/minimal',\n // Mobile's separator row is 40 tall, which centres the rule at 19.5 a side; 20 is the token\n // next to it and the resulting 1px lands nowhere the eye can find it.\n marginBlock: { base: '20', tablet: '16' },\n marginInline: '24',\n width: 'auto',\n },\n },\n variants: {\n hasBack: {\n // Redlines on the sub view (Figma `- page sidebar - interactions`): the title block sits at\n // x/y 16, is 40 tall, and the 32px back button sits at y 20 — i.e. the 4px padding belongs to\n // the block wrapping button + text, not to the text. Header totals 16 + 40 + 8 = 64.\n true: {\n title: {\n paddingBlockEnd: '8',\n paddingInlineStart: '16',\n },\n titleBlock: {\n gap: '4',\n paddingBlock: '4',\n },\n },\n // Main view: no button, so the text alone is the block — 6 + 28 + 6 = 40, header 16+40+16 = 72.\n false: {\n title: {\n paddingBlockEnd: '16',\n paddingInlineStart: '24',\n },\n titleBlock: {\n paddingBlock: '6',\n },\n },\n },\n isDisabled: {\n true: {\n item: {\n cursor: 'not-allowed',\n _hover: {\n background: 'transparent',\n _active: {\n background: 'transparent',\n },\n },\n _active: {\n background: 'transparent',\n },\n },\n itemIcon: {\n color: 'icon/disabled',\n _groupHover: {\n color: 'icon/disabled',\n },\n },\n itemLabel: {\n color: 'text/disabled',\n },\n },\n false: {},\n },\n selected: {\n true: {\n item: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n _active: {\n background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n },\n },\n _active: {\n background: { base: 'background/selected-hover', tablet: 'background/selected-active' },\n },\n },\n itemIcon: {\n color: 'icon/interactive',\n _groupHover: {\n color: 'icon/interactive-hover',\n },\n },\n itemLabel: {\n textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n hasBack: false,\n isDisabled: false,\n selected: false,\n },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -25,8 +25,7 @@ var statSlotRecipe = defineSlotRecipe({
|
|
|
25
25
|
gap: "4",
|
|
26
26
|
alignItems: "center",
|
|
27
27
|
fontFeatureSettings: "pnum",
|
|
28
|
-
fontVariantNumeric: "proportional-nums"
|
|
29
|
-
color: "text/body"
|
|
28
|
+
fontVariantNumeric: "proportional-nums"
|
|
30
29
|
},
|
|
31
30
|
helpText: {
|
|
32
31
|
display: "inline-flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stat.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Stat.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst statSlotRecipe = defineSlotRecipe({\n className: 'stat',\n slots: ['root', 'label', 'value', 'helpText'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n label: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n textStyle: 'body/md/semibold',\n },\n value: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n fontFeatureSettings: 'pnum',\n fontVariantNumeric: 'proportional-nums',\n
|
|
1
|
+
{"version":3,"file":"Stat.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Stat.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst statSlotRecipe = defineSlotRecipe({\n className: 'stat',\n slots: ['root', 'label', 'value', 'helpText'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n label: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n textStyle: 'body/md/semibold',\n },\n value: {\n display: 'inline-flex',\n gap: '4',\n alignItems: 'center',\n fontFeatureSettings: 'pnum',\n fontVariantNumeric: 'proportional-nums',\n },\n helpText: {\n display: 'inline-flex',\n flexWrap: 'wrap',\n gap: '4',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n lg: {\n label: { color: 'text/primary' },\n value: { textStyle: 'comp/data/sm' },\n },\n '2xl': {\n label: { color: 'text/secondary' },\n value: { textStyle: 'comp/data/md' },\n },\n '3xl': {\n label: { color: 'text/secondary' },\n value: { textStyle: 'comp/data/lg' },\n },\n },\n variant: {\n default: {},\n compact: {\n root: {\n display: 'inline-flex',\n alignItems: 'flex-end',\n },\n value: {\n textStyle: 'body/md/regular',\n },\n helpText: {\n textStyle: 'body/sm/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default statSlotRecipe;\n"],"mappings":";;AAEA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO;EAAC;EAAQ;EAAS;EAAS;CAAU;CAC5C,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,SAAS;GACT,KAAK;GACL,YAAY;GACZ,WAAW;EACb;EACA,OAAO;GACL,SAAS;GACT,KAAK;GACL,YAAY;GACZ,qBAAqB;GACrB,oBAAoB;EACtB;EACA,UAAU;GACR,SAAS;GACT,UAAU;GACV,KAAK;GACL,WAAW;EACb;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,OAAO,EAAE,OAAO,eAAe;IAC/B,OAAO,EAAE,WAAW,eAAe;GACrC;GACA,OAAO;IACL,OAAO,EAAE,OAAO,iBAAiB;IACjC,OAAO,EAAE,WAAW,eAAe;GACrC;GACA,OAAO;IACL,OAAO,EAAE,OAAO,iBAAiB;IACjC,OAAO,EAAE,WAAW,eAAe;GACrC;EACF;EACA,SAAS;GACP,SAAS,CAAC;GACV,SAAS;IACP,MAAM;KACJ,SAAS;KACT,YAAY;IACd;IACA,OAAO,EACL,WAAW,kBACb;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
|
|
@@ -37,10 +37,7 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
37
37
|
textAlign: "start",
|
|
38
38
|
"& > * + *": { marginBlockStart: "4" }
|
|
39
39
|
},
|
|
40
|
-
cell: {
|
|
41
|
-
color: "text/body",
|
|
42
|
-
textStyle: "body/md/regular"
|
|
43
|
-
},
|
|
40
|
+
cell: { textStyle: "body/md/regular" },
|
|
44
41
|
actionsCell: {
|
|
45
42
|
textAlign: "end",
|
|
46
43
|
whiteSpace: "nowrap",
|