@bitrise/bitkit-v2 0.3.478-beta.3036 → 0.3.479
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/BitkitCalendar/BitkitCalendar.d.ts +0 -12
- package/dist/components/BitkitCalendar/BitkitCalendar.js +1 -7
- package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarContent.d.ts +1 -5
- package/dist/components/BitkitCalendar/components/CalendarContent.js +43 -60
- package/dist/components/BitkitCalendar/components/CalendarContent.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonth.d.ts +2 -4
- package/dist/components/BitkitCalendar/components/CalendarMonth.js +5 -15
- package/dist/components/BitkitCalendar/components/CalendarMonth.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts +1 -2
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js +2 -3
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts +1 -3
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts +1 -3
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts +0 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.js +3 -5
- package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js +0 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts +1 -2
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js +2 -3
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
- package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +0 -2
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js +1 -2
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts +3 -4
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js +2 -3
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -1
- package/dist/components/BitkitPageHeader/BitkitPageHeader.d.ts +14 -0
- package/dist/components/BitkitPageHeader/BitkitPageHeader.js +62 -36
- package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +24 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +74 -6
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.js +1 -0
- package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
- package/dist/components/index.d.ts +1 -7
- package/dist/main.js +7 -8
- package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +0 -15
- package/dist/theme/slot-recipes/DatePicker.recipe.js +22 -72
- package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +0 -85
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js +10 -35
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Menu.recipe.js +1 -6
- package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageHeader.recipe.d.ts +23 -1
- package/dist/theme/slot-recipes/PageHeader.recipe.js +63 -0
- package/dist/theme/slot-recipes/PageHeader.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +49 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +93 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Tag.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/index.d.ts +59 -160
- package/dist/theme/slot-recipes/index.js +0 -4
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/BitkitPortalContext.js +2 -3
- package/dist/utilities/BitkitPortalContext.js.map +1 -1
- package/docs/v1-to-v2-migration-guide.md +1 -48
- package/package.json +1 -1
- package/dist/components/BitkitFilter/BitkitFilter.context.d.ts +0 -65
- package/dist/components/BitkitFilter/BitkitFilter.context.js +0 -82
- package/dist/components/BitkitFilter/BitkitFilter.context.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilter.d.ts +0 -55
- package/dist/components/BitkitFilter/BitkitFilter.js +0 -247
- package/dist/components/BitkitFilter/BitkitFilter.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilter.utils.d.ts +0 -18
- package/dist/components/BitkitFilter/BitkitFilter.utils.js +0 -42
- package/dist/components/BitkitFilter/BitkitFilter.utils.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilterAdd.d.ts +0 -18
- package/dist/components/BitkitFilter/BitkitFilterAdd.js +0 -200
- package/dist/components/BitkitFilter/BitkitFilterAdd.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilterDateRange.d.ts +0 -26
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js +0 -118
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilterSearch.d.ts +0 -23
- package/dist/components/BitkitFilter/BitkitFilterSearch.js +0 -72
- package/dist/components/BitkitFilter/BitkitFilterSearch.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilterSelect.d.ts +0 -61
- package/dist/components/BitkitFilter/BitkitFilterSelect.js +0 -149
- package/dist/components/BitkitFilter/BitkitFilterSelect.js.map +0 -1
- package/dist/components/BitkitFilter/BitkitFilterSwitch.d.ts +0 -28
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js +0 -87
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js.map +0 -1
- package/dist/components/BitkitFilter/components/FilterChip.d.ts +0 -23
- package/dist/components/BitkitFilter/components/FilterChip.js +0 -66
- package/dist/components/BitkitFilter/components/FilterChip.js.map +0 -1
- package/dist/components/BitkitFilter/components/FilterField.d.ts +0 -15
- package/dist/components/BitkitFilter/components/FilterField.js +0 -60
- package/dist/components/BitkitFilter/components/FilterField.js.map +0 -1
- package/dist/components/BitkitFilter/components/FilterPanel.d.ts +0 -42
- package/dist/components/BitkitFilter/components/FilterPanel.js +0 -126
- package/dist/components/BitkitFilter/components/FilterPanel.js.map +0 -1
- package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts +0 -15
- package/dist/components/BitkitFilter/components/FilterSearchInput.js +0 -41
- package/dist/components/BitkitFilter/components/FilterSearchInput.js.map +0 -1
- package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts +0 -45
- package/dist/components/BitkitFilter/components/FilterSelectForm.js +0 -324
- package/dist/components/BitkitFilter/components/FilterSelectForm.js.map +0 -1
- package/dist/theme/slot-recipes/Filter.recipe.d.ts +0 -37
- package/dist/theme/slot-recipes/Filter.recipe.js +0 -649
- package/dist/theme/slot-recipes/Filter.recipe.js.map +0 -1
- package/dist/theme/slot-recipes/Listbox.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Listbox.recipe.js +0 -92
- package/dist/theme/slot-recipes/Listbox.recipe.js.map +0 -1
|
@@ -7,6 +7,14 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
|
7
7
|
"body",
|
|
8
8
|
"contentBlock",
|
|
9
9
|
"divider",
|
|
10
|
+
"drawerBackdrop",
|
|
11
|
+
"drawerCloseButton",
|
|
12
|
+
"drawerContent",
|
|
13
|
+
"drawerHeader",
|
|
14
|
+
"drawerHeaderAvatar",
|
|
15
|
+
"drawerHeaderSecondaryText",
|
|
16
|
+
"drawerHeaderTextBlock",
|
|
17
|
+
"drawerHeaderTitle",
|
|
10
18
|
"footer",
|
|
11
19
|
"item",
|
|
12
20
|
"itemIcon",
|
|
@@ -50,6 +58,55 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
|
50
58
|
tablet: rem(240)
|
|
51
59
|
}
|
|
52
60
|
},
|
|
61
|
+
drawerBackdrop: { background: "utilities/overlay-dark" },
|
|
62
|
+
drawerContent: {
|
|
63
|
+
boxShadow: "elevation/lg",
|
|
64
|
+
overflow: "visible",
|
|
65
|
+
width: rem(320),
|
|
66
|
+
maxWidth: "calc(100vw - 56px)"
|
|
67
|
+
},
|
|
68
|
+
drawerCloseButton: {
|
|
69
|
+
alignItems: "center",
|
|
70
|
+
display: "flex",
|
|
71
|
+
height: rem(56),
|
|
72
|
+
insetBlockStart: 0,
|
|
73
|
+
insetInlineEnd: "100%",
|
|
74
|
+
paddingInlineEnd: "8",
|
|
75
|
+
position: "absolute"
|
|
76
|
+
},
|
|
77
|
+
drawerHeader: {
|
|
78
|
+
alignItems: "center",
|
|
79
|
+
borderBlockEndColor: "border/regular",
|
|
80
|
+
borderBlockEndStyle: "solid",
|
|
81
|
+
borderBlockEndWidth: "1",
|
|
82
|
+
display: "flex",
|
|
83
|
+
flexShrink: 0,
|
|
84
|
+
minHeight: rem(56),
|
|
85
|
+
paddingBlockEnd: "12",
|
|
86
|
+
paddingBlockStart: "12",
|
|
87
|
+
paddingInlineEnd: "24",
|
|
88
|
+
paddingInlineStart: "16"
|
|
89
|
+
},
|
|
90
|
+
drawerHeaderAvatar: {
|
|
91
|
+
display: "flex",
|
|
92
|
+
flexShrink: 0
|
|
93
|
+
},
|
|
94
|
+
drawerHeaderTextBlock: {
|
|
95
|
+
display: "flex",
|
|
96
|
+
flex: 1,
|
|
97
|
+
flexDirection: "column",
|
|
98
|
+
minWidth: 0
|
|
99
|
+
},
|
|
100
|
+
drawerHeaderTitle: {
|
|
101
|
+
color: "text/primary",
|
|
102
|
+
textStyle: "heading/mobile/h2",
|
|
103
|
+
truncate: true
|
|
104
|
+
},
|
|
105
|
+
drawerHeaderSecondaryText: {
|
|
106
|
+
color: "text/secondary",
|
|
107
|
+
textStyle: "body/md/regular",
|
|
108
|
+
truncate: true
|
|
109
|
+
},
|
|
53
110
|
body: {
|
|
54
111
|
display: "flex",
|
|
55
112
|
flex: 1,
|
|
@@ -285,6 +342,40 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
|
285
342
|
}
|
|
286
343
|
},
|
|
287
344
|
variants: {
|
|
345
|
+
/**
|
|
346
|
+
* `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the
|
|
347
|
+
* width, so the navigation itself gives up its own and scrolls within the panel.
|
|
348
|
+
*/
|
|
349
|
+
layout: {
|
|
350
|
+
hidden: { root: { display: {
|
|
351
|
+
base: "none",
|
|
352
|
+
tablet: "flex"
|
|
353
|
+
} } },
|
|
354
|
+
drawer: { root: {
|
|
355
|
+
borderInlineEndWidth: 0,
|
|
356
|
+
flex: 1,
|
|
357
|
+
maxWidth: "none",
|
|
358
|
+
minHeight: "auto",
|
|
359
|
+
minWidth: 0,
|
|
360
|
+
overflowY: "auto",
|
|
361
|
+
width: "full"
|
|
362
|
+
} },
|
|
363
|
+
static: {}
|
|
364
|
+
},
|
|
365
|
+
/**
|
|
366
|
+
* The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or
|
|
367
|
+
* an entity — app or user — whose name steps down a size to make room for its secondary text.
|
|
368
|
+
*/
|
|
369
|
+
hasSecondaryText: {
|
|
370
|
+
true: {
|
|
371
|
+
drawerHeader: { gap: "12" },
|
|
372
|
+
drawerHeaderTitle: { textStyle: "heading/mobile/h3" }
|
|
373
|
+
},
|
|
374
|
+
false: {
|
|
375
|
+
drawerHeader: { gap: "8" },
|
|
376
|
+
drawerHeaderTextBlock: { paddingInlineStart: "4" }
|
|
377
|
+
}
|
|
378
|
+
},
|
|
288
379
|
hasBack: {
|
|
289
380
|
true: {
|
|
290
381
|
title: {
|
|
@@ -388,7 +479,9 @@ var pageSidebarSlotRecipe = defineSlotRecipe({
|
|
|
388
479
|
},
|
|
389
480
|
defaultVariants: {
|
|
390
481
|
hasBack: false,
|
|
482
|
+
hasSecondaryText: false,
|
|
391
483
|
isDisabled: false,
|
|
484
|
+
layout: "static",
|
|
392
485
|
notRequired: false,
|
|
393
486
|
selected: false
|
|
394
487
|
}
|
|
@@ -1 +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 'progressBlocker',\n 'progressConnector',\n 'progressContentBlock',\n 'progressIcon',\n 'progressLabel',\n 'progressRow',\n 'progressSecondaryText',\n 'progressTextBlock',\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 // Half of the gap to the footer block; the footer carries the other half. Split that way so\n // this one is also the sidebar's bottom padding when there is no footer -- 8 either way,\n // rather than the body's whole 16 becoming the bottom edge. 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 the gap. Margins do not collapse in a flex column, so the two add up.\n marginBlockEnd: '8',\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 // The other half of the gap to the body — see its `marginBlockEnd`.\n marginBlockStart: '8',\n paddingBlock: '8',\n },\n /**\n * The progress item's own text, rather than `itemLabel`: that slot grows to fill the row, which\n * here belongs to the blocker so the connector can run to the trailing edge.\n */\n progressLabel: {\n color: 'text/primary',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n /** Follows the label after a middle dot, which the component renders. */\n progressSecondaryText: {\n color: 'text/tertiary',\n flexShrink: 0,\n textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n /**\n * Badge and connector as one unit, taking the width the text leaves.\n *\n * `fit-content` rather than 0: the flex basis is 0, so with a shrinking text block beside it\n * there is no free space to grow into and the block would be handed the whole row -- leaving\n * the badge, which does not shrink, hanging off the trailing edge. The floor is the badge; the\n * connector inside is basis 0 and contributes nothing to it.\n */\n progressBlocker: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '12',\n minWidth: 'fit-content',\n },\n /**\n * The status icon's own slot rather than `itemIcon`: that one brightens to `icon/primary` with\n * the row, which is right for navigation and wrong here -- hovering a stage would drop the\n * colour that says where it stands.\n */\n progressIcon: {\n // The colour a status-less icon takes -- the approvals step's, which the design draws in the\n // same `icon/secondary` as the navigation icons. `iconColor` overrides it per stage.\n color: 'icon/secondary',\n flexShrink: 0,\n // Its own slot rather than `itemIcon`, but it does brighten with the row: the design moves the\n // icon to `icon/primary` on hover and active. That only ever reaches a colour this recipe\n // supplied -- a consumer's `iconColor` is an inline, unlayered `color` and beats it -- so a\n // stage's status survives the hover while a status-less icon follows the row.\n _groupHover: {\n color: 'icon/primary',\n },\n },\n /**\n * Label and secondary text read as one line, so they sit closer than the row's own 12 gap.\n *\n * It shrinks before the blocker does: `item` clips its overflow, so without this a long stage\n * name is cut mid-word and pushes the secondary text and the connector off the row. The\n * blocker keeps `flex: 1`, so it still takes the slack whenever the text is short enough.\n */\n progressTextBlock: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 1,\n gap: '4',\n minWidth: 0,\n },\n /**\n * The progress row's block padding, which does not follow the navigation row's to 12 on mobile:\n * the design keeps this row on 8 at both widths, so it is 44 tall on mobile against a nav row's\n * 48. Layered over `item` rather than replacing it -- everything else about the row is shared.\n */\n progressRow: {\n paddingBlock: '8',\n },\n /** With the row above: 2 either side of the line box at both widths, so the block is 28. */\n progressContentBlock: {\n paddingBlock: '2',\n },\n progressConnector: {\n borderColor: 'border/minimal',\n borderStyle: 'dashed',\n flex: 1,\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 progressIcon: {\n color: 'icon/disabled',\n _groupHover: {\n color: 'icon/disabled',\n },\n },\n progressLabel: {\n color: 'text/disabled',\n },\n progressSecondaryText: {\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 progressIcon: {\n color: 'icon/interactive',\n _groupHover: {\n color: 'icon/interactive-hover',\n },\n },\n progressLabel: {\n textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n },\n },\n false: {},\n },\n /**\n * A stage the release does not have to clear. Everything steps down one level -- the icon to\n * tertiary, the label to secondary -- so the row reads as present but not awaited. Hover and\n * active take both back to the row's ordinary colours, as they do for a required stage.\n *\n * `selected` wins over it, resolved in the component rather than here. The design draws the\n * pair (`selected=yes, notRequired=true`) and gives it the selected row's icon and label with\n * the `not required` secondary text kept, which is what dropping this variant produces.\n */\n notRequired: {\n true: {\n progressIcon: {\n color: 'icon/tertiary',\n _groupHover: { color: 'icon/primary' },\n },\n progressLabel: {\n color: 'text/secondary',\n _groupHover: { color: 'text/primary' },\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n hasBack: false,\n isDisabled: false,\n notRequired: false,\n selected: false,\n },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":"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"}
|
|
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 'drawerBackdrop',\n 'drawerCloseButton',\n 'drawerContent',\n 'drawerHeader',\n 'drawerHeaderAvatar',\n 'drawerHeaderSecondaryText',\n 'drawerHeaderTextBlock',\n 'drawerHeaderTitle',\n 'footer',\n 'item',\n 'itemIcon',\n 'itemLabel',\n 'progressBlocker',\n 'progressConnector',\n 'progressContentBlock',\n 'progressIcon',\n 'progressLabel',\n 'progressRow',\n 'progressSecondaryText',\n 'progressTextBlock',\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 // The mobile drawer (Figma `PageSidebar - mobile`, `23512:27095`). The `Drawer.*` parts carry\n // the registered `drawer` recipe — motion, layering, the trailing-edge positioner — so only\n // what differs from it lives here.\n drawerBackdrop: {\n background: 'utilities/overlay-dark',\n },\n drawerContent: {\n boxShadow: 'elevation/lg',\n // The close button hangs off the leading edge, so the panel must not clip it.\n overflow: 'visible',\n width: rem(320),\n // 320 for the panel plus the 56 the close button column takes. Narrower phones give the panel\n // up, not the button — at a hard 320 the button would be the part pushed off-screen.\n maxWidth: 'calc(100vw - 56px)',\n },\n drawerCloseButton: {\n alignItems: 'center',\n display: 'flex',\n // As tall as the header row, so the button centres on it.\n height: rem(56),\n insetBlockStart: 0,\n insetInlineEnd: '100%',\n paddingInlineEnd: '8',\n position: 'absolute',\n },\n drawerHeader: {\n alignItems: 'center',\n borderBlockEndColor: 'border/regular',\n borderBlockEndStyle: 'solid',\n borderBlockEndWidth: '1',\n display: 'flex',\n flexShrink: 0,\n minHeight: rem(56),\n paddingBlockEnd: '12',\n paddingBlockStart: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n drawerHeaderAvatar: {\n display: 'flex',\n flexShrink: 0,\n },\n drawerHeaderTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n drawerHeaderTitle: {\n color: 'text/primary',\n textStyle: 'heading/mobile/h2',\n truncate: true,\n },\n drawerHeaderSecondaryText: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n truncate: true,\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 // Half of the gap to the footer block; the footer carries the other half. Split that way so\n // this one is also the sidebar's bottom padding when there is no footer -- 8 either way,\n // rather than the body's whole 16 becoming the bottom edge. 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 the gap. Margins do not collapse in a flex column, so the two add up.\n marginBlockEnd: '8',\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 // The other half of the gap to the body — see its `marginBlockEnd`.\n marginBlockStart: '8',\n paddingBlock: '8',\n },\n /**\n * The progress item's own text, rather than `itemLabel`: that slot grows to fill the row, which\n * here belongs to the blocker so the connector can run to the trailing edge.\n */\n progressLabel: {\n color: 'text/primary',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n /** Follows the label after a middle dot, which the component renders. */\n progressSecondaryText: {\n color: 'text/tertiary',\n flexShrink: 0,\n textStyle: { base: 'body/lg/regular', tablet: 'body/md/regular' },\n whiteSpace: 'nowrap',\n },\n /**\n * Badge and connector as one unit, taking the width the text leaves.\n *\n * `fit-content` rather than 0: the flex basis is 0, so with a shrinking text block beside it\n * there is no free space to grow into and the block would be handed the whole row -- leaving\n * the badge, which does not shrink, hanging off the trailing edge. The floor is the badge; the\n * connector inside is basis 0 and contributes nothing to it.\n */\n progressBlocker: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '12',\n minWidth: 'fit-content',\n },\n /**\n * The status icon's own slot rather than `itemIcon`: that one brightens to `icon/primary` with\n * the row, which is right for navigation and wrong here -- hovering a stage would drop the\n * colour that says where it stands.\n */\n progressIcon: {\n // The colour a status-less icon takes -- the approvals step's, which the design draws in the\n // same `icon/secondary` as the navigation icons. `iconColor` overrides it per stage.\n color: 'icon/secondary',\n flexShrink: 0,\n // Its own slot rather than `itemIcon`, but it does brighten with the row: the design moves the\n // icon to `icon/primary` on hover and active. That only ever reaches a colour this recipe\n // supplied -- a consumer's `iconColor` is an inline, unlayered `color` and beats it -- so a\n // stage's status survives the hover while a status-less icon follows the row.\n _groupHover: {\n color: 'icon/primary',\n },\n },\n /**\n * Label and secondary text read as one line, so they sit closer than the row's own 12 gap.\n *\n * It shrinks before the blocker does: `item` clips its overflow, so without this a long stage\n * name is cut mid-word and pushes the secondary text and the connector off the row. The\n * blocker keeps `flex: 1`, so it still takes the slack whenever the text is short enough.\n */\n progressTextBlock: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 1,\n gap: '4',\n minWidth: 0,\n },\n /**\n * The progress row's block padding, which does not follow the navigation row's to 12 on mobile:\n * the design keeps this row on 8 at both widths, so it is 44 tall on mobile against a nav row's\n * 48. Layered over `item` rather than replacing it -- everything else about the row is shared.\n */\n progressRow: {\n paddingBlock: '8',\n },\n /** With the row above: 2 either side of the line box at both widths, so the block is 28. */\n progressContentBlock: {\n paddingBlock: '2',\n },\n progressConnector: {\n borderColor: 'border/minimal',\n borderStyle: 'dashed',\n flex: 1,\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 /**\n * `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the\n * width, so the navigation itself gives up its own and scrolls within the panel.\n */\n layout: {\n // `useResponsive` reports desktop until it has measured, so an opted-in sidebar would paint\n // in the flow on a phone and then jump into the drawer. Hidden below `tablet` instead: the\n // drawer branch takes over as soon as the measurement lands, with nothing to remove.\n hidden: {\n root: {\n display: { base: 'none', tablet: 'flex' },\n },\n },\n drawer: {\n root: {\n borderInlineEndWidth: 0,\n flex: 1,\n maxWidth: 'none',\n minHeight: 'auto',\n minWidth: 0,\n overflowY: 'auto',\n width: 'full',\n },\n },\n static: {},\n },\n /**\n * The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or\n * an entity — app or user — whose name steps down a size to make room for its secondary text.\n */\n hasSecondaryText: {\n true: {\n drawerHeader: { gap: '12' },\n drawerHeaderTitle: { textStyle: 'heading/mobile/h3' },\n },\n false: {\n drawerHeader: { gap: '8' },\n drawerHeaderTextBlock: { paddingInlineStart: '4' },\n },\n },\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 progressIcon: {\n color: 'icon/disabled',\n _groupHover: {\n color: 'icon/disabled',\n },\n },\n progressLabel: {\n color: 'text/disabled',\n },\n progressSecondaryText: {\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 progressIcon: {\n color: 'icon/interactive',\n _groupHover: {\n color: 'icon/interactive-hover',\n },\n },\n progressLabel: {\n textStyle: { base: 'body/lg/semibold', tablet: 'body/md/semibold' },\n },\n },\n false: {},\n },\n /**\n * A stage the release does not have to clear. Everything steps down one level -- the icon to\n * tertiary, the label to secondary -- so the row reads as present but not awaited. Hover and\n * active take both back to the row's ordinary colours, as they do for a required stage.\n *\n * `selected` wins over it, resolved in the component rather than here. The design draws the\n * pair (`selected=yes, notRequired=true`) and gives it the selected row's icon and label with\n * the `not required` secondary text kept, which is what dropping this variant produces.\n */\n notRequired: {\n true: {\n progressIcon: {\n color: 'icon/tertiary',\n _groupHover: { color: 'icon/primary' },\n },\n progressLabel: {\n color: 'text/secondary',\n _groupHover: { color: 'text/primary' },\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n hasBack: false,\n hasSecondaryText: false,\n isDisabled: false,\n layout: 'static',\n notRequired: false,\n selected: false,\n },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const tagSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "
|
|
1
|
+
declare const tagSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
|
|
2
2
|
colorVariant: {
|
|
3
3
|
neutral: {
|
|
4
4
|
root: {
|
|
@@ -609,25 +609,10 @@ declare const slotRecipes: {
|
|
|
609
609
|
device: {
|
|
610
610
|
mobile: {
|
|
611
611
|
content: {
|
|
612
|
-
minWidth: number;
|
|
613
612
|
boxShadow: "none";
|
|
614
613
|
paddingBlock: "16";
|
|
615
614
|
paddingInline: "16";
|
|
616
615
|
};
|
|
617
|
-
view: {
|
|
618
|
-
gap: "16";
|
|
619
|
-
};
|
|
620
|
-
tableHeader: {
|
|
621
|
-
height: "40";
|
|
622
|
-
maxWidth: "none";
|
|
623
|
-
minWidth: number;
|
|
624
|
-
textStyle: "body/lg/regular";
|
|
625
|
-
width: "auto";
|
|
626
|
-
};
|
|
627
|
-
tableCellTrigger: {
|
|
628
|
-
height: "40";
|
|
629
|
-
textStyle: "body/lg/regular";
|
|
630
|
-
};
|
|
631
616
|
};
|
|
632
617
|
};
|
|
633
618
|
}>;
|
|
@@ -718,91 +703,6 @@ declare const slotRecipes: {
|
|
|
718
703
|
height: "16";
|
|
719
704
|
} | undefined;
|
|
720
705
|
};
|
|
721
|
-
lg: {
|
|
722
|
-
trigger: {
|
|
723
|
-
height: "40";
|
|
724
|
-
paddingBlock: "8";
|
|
725
|
-
paddingInlineEnd: `${number}rem`;
|
|
726
|
-
paddingInlineStart: "8";
|
|
727
|
-
textStyle: "body/lg/regular";
|
|
728
|
-
'&:has([data-slot="avatar"])'?: {
|
|
729
|
-
paddingBlock: `${number}rem`;
|
|
730
|
-
paddingInlineStart: `${number}rem`;
|
|
731
|
-
} | undefined;
|
|
732
|
-
};
|
|
733
|
-
indicatorGroup: {
|
|
734
|
-
paddingInlineEnd: "4";
|
|
735
|
-
};
|
|
736
|
-
indicator: {
|
|
737
|
-
_icon: {
|
|
738
|
-
width: "16";
|
|
739
|
-
height: "16";
|
|
740
|
-
};
|
|
741
|
-
};
|
|
742
|
-
checkbox?: {
|
|
743
|
-
width: "24";
|
|
744
|
-
height: "24";
|
|
745
|
-
} | undefined;
|
|
746
|
-
item?: {
|
|
747
|
-
'&:has([data-slot="avatar"])': {
|
|
748
|
-
paddingInlineStart: "12";
|
|
749
|
-
paddingInlineEnd: "24";
|
|
750
|
-
paddingBlock: "8";
|
|
751
|
-
gap: "8";
|
|
752
|
-
};
|
|
753
|
-
'&:has([data-slot="checkbox"])': {
|
|
754
|
-
minHeight: "48";
|
|
755
|
-
paddingInlineEnd: "24";
|
|
756
|
-
paddingBlock: "12";
|
|
757
|
-
gap: "12";
|
|
758
|
-
};
|
|
759
|
-
paddingInline: "16";
|
|
760
|
-
paddingBlock: "12";
|
|
761
|
-
textStyle: "body/lg/regular";
|
|
762
|
-
_selected: {
|
|
763
|
-
textStyle: "body/lg/semibold";
|
|
764
|
-
};
|
|
765
|
-
} | undefined;
|
|
766
|
-
content?: {
|
|
767
|
-
'--select-menu-list-max-height': `${number}rem`;
|
|
768
|
-
} | undefined;
|
|
769
|
-
itemLabel?: {
|
|
770
|
-
textStyle: "body/lg/regular";
|
|
771
|
-
lineHeight: "normal";
|
|
772
|
-
} | undefined;
|
|
773
|
-
itemLoadingLabel?: {
|
|
774
|
-
textStyle: "body/lg/regular";
|
|
775
|
-
} | undefined;
|
|
776
|
-
emptyState?: {
|
|
777
|
-
paddingBlock: "12";
|
|
778
|
-
} | undefined;
|
|
779
|
-
errorState?: {
|
|
780
|
-
paddingBlock: "8";
|
|
781
|
-
} | undefined;
|
|
782
|
-
errorLabel?: {
|
|
783
|
-
textStyle: "body/lg/regular";
|
|
784
|
-
} | undefined;
|
|
785
|
-
action?: {
|
|
786
|
-
minHeight: "48";
|
|
787
|
-
paddingBlock: "12";
|
|
788
|
-
textStyle: "body/lg/regular";
|
|
789
|
-
lineHeight: "normal";
|
|
790
|
-
} | undefined;
|
|
791
|
-
searchInputGroup?: {
|
|
792
|
-
height: `${number}rem`;
|
|
793
|
-
paddingBlock: "16";
|
|
794
|
-
} | undefined;
|
|
795
|
-
searchInput?: {
|
|
796
|
-
textStyle: "body/lg/regular";
|
|
797
|
-
} | undefined;
|
|
798
|
-
searchClear?: {
|
|
799
|
-
padding: "8";
|
|
800
|
-
} | undefined;
|
|
801
|
-
itemIndicator?: {
|
|
802
|
-
width: "24";
|
|
803
|
-
height: "24";
|
|
804
|
-
} | undefined;
|
|
805
|
-
};
|
|
806
706
|
};
|
|
807
707
|
}>;
|
|
808
708
|
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", {
|
|
@@ -1184,42 +1084,6 @@ declare const slotRecipes: {
|
|
|
1184
1084
|
};
|
|
1185
1085
|
};
|
|
1186
1086
|
}>;
|
|
1187
|
-
filter: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "mobileListCheckbox" | "mobileListCheck" | "patternResults" | "patternResultsLabel" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
|
|
1188
|
-
pageLayout: {
|
|
1189
|
-
capped: {
|
|
1190
|
-
root: {
|
|
1191
|
-
borderBlockEndWidth: "1";
|
|
1192
|
-
borderColor: "border/regular";
|
|
1193
|
-
paddingInline: {
|
|
1194
|
-
base: "16";
|
|
1195
|
-
tablet: "32";
|
|
1196
|
-
};
|
|
1197
|
-
};
|
|
1198
|
-
};
|
|
1199
|
-
full: {
|
|
1200
|
-
root: {
|
|
1201
|
-
borderBlockEndWidth: "1";
|
|
1202
|
-
borderColor: "border/regular";
|
|
1203
|
-
paddingInlineEnd: {
|
|
1204
|
-
base: "16";
|
|
1205
|
-
tablet: "32";
|
|
1206
|
-
};
|
|
1207
|
-
paddingInlineStart: {
|
|
1208
|
-
base: "16";
|
|
1209
|
-
tablet: "24";
|
|
1210
|
-
};
|
|
1211
|
-
};
|
|
1212
|
-
};
|
|
1213
|
-
};
|
|
1214
|
-
contentAlign: {
|
|
1215
|
-
center: {};
|
|
1216
|
-
start: {
|
|
1217
|
-
root: {
|
|
1218
|
-
justifyContent: "flex-start";
|
|
1219
|
-
};
|
|
1220
|
-
};
|
|
1221
|
-
};
|
|
1222
|
-
}>;
|
|
1223
1087
|
imageCropper: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "image" | "root" | "handle" | "viewport" | "selection", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "image" | "root" | "handle" | "viewport" | "selection">>;
|
|
1224
1088
|
inlineLoading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root", {
|
|
1225
1089
|
size: {
|
|
@@ -1280,27 +1144,6 @@ declare const slotRecipes: {
|
|
|
1280
1144
|
};
|
|
1281
1145
|
};
|
|
1282
1146
|
}>;
|
|
1283
|
-
listbox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "root" | "item" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "empty", {
|
|
1284
|
-
size: {
|
|
1285
|
-
md: {};
|
|
1286
|
-
lg: {
|
|
1287
|
-
content: {
|
|
1288
|
-
maxHeight: "none";
|
|
1289
|
-
paddingBlock: "8";
|
|
1290
|
-
};
|
|
1291
|
-
item: {
|
|
1292
|
-
minHeight: "48";
|
|
1293
|
-
textStyle: "body/lg/regular";
|
|
1294
|
-
_selected: {
|
|
1295
|
-
textStyle: "body/lg/regular";
|
|
1296
|
-
};
|
|
1297
|
-
};
|
|
1298
|
-
empty: {
|
|
1299
|
-
textStyle: "body/lg/regular";
|
|
1300
|
-
};
|
|
1301
|
-
};
|
|
1302
|
-
};
|
|
1303
|
-
}>;
|
|
1304
1147
|
markdown: import('@chakra-ui/react').SlotRecipeDefinition<"blockquote" | "root", {
|
|
1305
1148
|
size: {
|
|
1306
1149
|
sm: {
|
|
@@ -1694,7 +1537,7 @@ declare const slotRecipes: {
|
|
|
1694
1537
|
};
|
|
1695
1538
|
};
|
|
1696
1539
|
}>;
|
|
1697
|
-
pageHeader: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
|
|
1540
|
+
pageHeader: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "sectionTitle" | "headerBlock" | "contentBlock" | "titleBar" | "textBlock" | "titleRow" | "actionBlock" | "menuButton" | "sectionBlock", {
|
|
1698
1541
|
contentVariant: {
|
|
1699
1542
|
title: {
|
|
1700
1543
|
titleBlock: {
|
|
@@ -1748,6 +1591,22 @@ declare const slotRecipes: {
|
|
|
1748
1591
|
true: {};
|
|
1749
1592
|
false: {};
|
|
1750
1593
|
};
|
|
1594
|
+
hasSidebar: {
|
|
1595
|
+
true: {
|
|
1596
|
+
headerBlock: {
|
|
1597
|
+
base: {
|
|
1598
|
+
gap: "8";
|
|
1599
|
+
paddingBlockStart: "12";
|
|
1600
|
+
};
|
|
1601
|
+
};
|
|
1602
|
+
title: {
|
|
1603
|
+
base: {
|
|
1604
|
+
textStyle: "heading/mobile/h3";
|
|
1605
|
+
};
|
|
1606
|
+
};
|
|
1607
|
+
};
|
|
1608
|
+
false: {};
|
|
1609
|
+
};
|
|
1751
1610
|
hasDivider: {
|
|
1752
1611
|
true: {};
|
|
1753
1612
|
false: {
|
|
@@ -1929,7 +1788,47 @@ declare const slotRecipes: {
|
|
|
1929
1788
|
};
|
|
1930
1789
|
};
|
|
1931
1790
|
}>;
|
|
1932
|
-
pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
1791
|
+
pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "drawerHeader" | "divider" | "drawerBackdrop" | "drawerCloseButton" | "drawerContent" | "drawerHeaderAvatar" | "drawerHeaderSecondaryText" | "drawerHeaderTextBlock" | "drawerHeaderTitle" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
|
|
1792
|
+
layout: {
|
|
1793
|
+
hidden: {
|
|
1794
|
+
root: {
|
|
1795
|
+
display: {
|
|
1796
|
+
base: "none";
|
|
1797
|
+
tablet: "flex";
|
|
1798
|
+
};
|
|
1799
|
+
};
|
|
1800
|
+
};
|
|
1801
|
+
drawer: {
|
|
1802
|
+
root: {
|
|
1803
|
+
borderInlineEndWidth: number;
|
|
1804
|
+
flex: number;
|
|
1805
|
+
maxWidth: "none";
|
|
1806
|
+
minHeight: "auto";
|
|
1807
|
+
minWidth: number;
|
|
1808
|
+
overflowY: "auto";
|
|
1809
|
+
width: "full";
|
|
1810
|
+
};
|
|
1811
|
+
};
|
|
1812
|
+
static: {};
|
|
1813
|
+
};
|
|
1814
|
+
hasSecondaryText: {
|
|
1815
|
+
true: {
|
|
1816
|
+
drawerHeader: {
|
|
1817
|
+
gap: "12";
|
|
1818
|
+
};
|
|
1819
|
+
drawerHeaderTitle: {
|
|
1820
|
+
textStyle: "heading/mobile/h3";
|
|
1821
|
+
};
|
|
1822
|
+
};
|
|
1823
|
+
false: {
|
|
1824
|
+
drawerHeader: {
|
|
1825
|
+
gap: "8";
|
|
1826
|
+
};
|
|
1827
|
+
drawerHeaderTextBlock: {
|
|
1828
|
+
paddingInlineStart: "4";
|
|
1829
|
+
};
|
|
1830
|
+
};
|
|
1831
|
+
};
|
|
1933
1832
|
hasBack: {
|
|
1934
1833
|
true: {
|
|
1935
1834
|
title: {
|
|
@@ -3209,7 +3108,7 @@ declare const slotRecipes: {
|
|
|
3209
3108
|
md: {};
|
|
3210
3109
|
};
|
|
3211
3110
|
}>;
|
|
3212
|
-
tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "
|
|
3111
|
+
tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
|
|
3213
3112
|
colorVariant: {
|
|
3214
3113
|
neutral: {
|
|
3215
3114
|
root: {
|
|
@@ -22,13 +22,11 @@ import expandableCardSlotRecipe from "./ExpandableCard.recipe.js";
|
|
|
22
22
|
import fieldSlotRecipe from "./Field.recipe.js";
|
|
23
23
|
import fieldsetSlotRecipe from "./Fieldset.recipe.js";
|
|
24
24
|
import fileUploadSlotRecipe from "./FileUpload.recipe.js";
|
|
25
|
-
import filterSlotRecipe from "./Filter.recipe.js";
|
|
26
25
|
import groupHeadingRecipe from "./GroupHeading.recipe.js";
|
|
27
26
|
import imageCropperSlotRecipe from "./ImageCropper.recipe.js";
|
|
28
27
|
import inlineLoadingRecipe from "./InlineLoading.recipe.js";
|
|
29
28
|
import labeledDataSlotRecipe from "./LabeledData.recipe.js";
|
|
30
29
|
import listSlotRecipe from "./List.recipe.js";
|
|
31
|
-
import listboxSlotRecipe from "./Listbox.recipe.js";
|
|
32
30
|
import markdownSlotRecipe from "./Markdown.recipe.js";
|
|
33
31
|
import markdownCardSlotRecipe from "./MarkdownCard.recipe.js";
|
|
34
32
|
import menuSlotRecipe from "./Menu.recipe.js";
|
|
@@ -89,11 +87,9 @@ var slotRecipes = {
|
|
|
89
87
|
groupHeading: groupHeadingRecipe,
|
|
90
88
|
fieldset: fieldsetSlotRecipe,
|
|
91
89
|
fileUpload: fileUploadSlotRecipe,
|
|
92
|
-
filter: filterSlotRecipe,
|
|
93
90
|
imageCropper: imageCropperSlotRecipe,
|
|
94
91
|
inlineLoading: inlineLoadingRecipe,
|
|
95
92
|
list: listSlotRecipe,
|
|
96
|
-
listbox: listboxSlotRecipe,
|
|
97
93
|
markdown: markdownSlotRecipe,
|
|
98
94
|
markdownCard: markdownCardSlotRecipe,
|
|
99
95
|
menu: menuSlotRecipe,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport
|
|
1
|
+
{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiSideNavSlotRecipe from './UISideNav.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageHeader: pageHeaderSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tableCard: tableCardSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n toggletip: toggletipSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAeC;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,WAAW;AACb"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { createContext
|
|
1
|
+
import { createContext } from "react";
|
|
2
2
|
//#region lib/utilities/BitkitPortalContext.ts
|
|
3
3
|
var BitkitPortalContext = createContext({ disablePortal: false });
|
|
4
|
-
var usePortalContext = () => useContext(BitkitPortalContext);
|
|
5
4
|
//#endregion
|
|
6
|
-
export { BitkitPortalContext as default
|
|
5
|
+
export { BitkitPortalContext as default };
|
|
7
6
|
|
|
8
7
|
//# sourceMappingURL=BitkitPortalContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPortalContext.js","names":[],"sources":["../../lib/utilities/BitkitPortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst BitkitPortalContext = createContext({ disablePortal: false });\n\nexport const usePortalContext = () => useContext(BitkitPortalContext);\n\nexport default BitkitPortalContext;\n"],"mappings":";;AAEA,IAAM,sBAAsB,cAAc,EAAE,eAAe,MAAM,CAAC
|
|
1
|
+
{"version":3,"file":"BitkitPortalContext.js","names":[],"sources":["../../lib/utilities/BitkitPortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst BitkitPortalContext = createContext({ disablePortal: false });\n\nexport const usePortalContext = () => useContext(BitkitPortalContext);\n\nexport default BitkitPortalContext;\n"],"mappings":";;AAEA,IAAM,sBAAsB,cAAc,EAAE,eAAe,MAAM,CAAC"}
|