@bitrise/bitkit-v2 0.3.414 → 0.3.415

package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts

@@ -0,0 +1,85 @@
+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", {
+    hasBack: {
+        true: {
+            title: {
+                paddingBlockEnd: "8";
+                paddingInlineStart: "16";
+            };
+            titleBlock: {
+                gap: "4";
+                paddingBlock: "4";
+            };
+        };
+        false: {
+            title: {
+                paddingBlockEnd: "16";
+                paddingInlineStart: "24";
+            };
+            titleBlock: {
+                paddingBlock: "6";
+            };
+        };
+    };
+    isDisabled: {
+        true: {
+            item: {
+                cursor: "not-allowed";
+                _hover: {
+                    background: "transparent";
+                    _active: {
+                        background: "transparent";
+                    };
+                };
+                _active: {
+                    background: "transparent";
+                };
+            };
+            itemIcon: {
+                color: "icon/disabled";
+                _groupHover: {
+                    color: "icon/disabled";
+                };
+            };
+            itemLabel: {
+                color: "text/disabled";
+            };
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            item: {
+                background: "background/selected";
+                _hover: {
+                    background: "background/selected-hover";
+                    _active: {
+                        background: {
+                            base: "background/selected-hover";
+                            tablet: "background/selected-active";
+                        };
+                    };
+                };
+                _active: {
+                    background: {
+                        base: "background/selected-hover";
+                        tablet: "background/selected-active";
+                    };
+                };
+            };
+            itemIcon: {
+                color: "icon/interactive";
+                _groupHover: {
+                    color: "icon/interactive-hover";
+                };
+            };
+            itemLabel: {
+                textStyle: {
+                    base: "body/lg/semibold";
+                    tablet: "body/md/semibold";
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export default pageSidebarSlotRecipe;

package/dist/theme/slot-recipes/PageSidebar.recipe.js

@@ -0,0 +1,276 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/PageSidebar.recipe.ts
+var pageSidebarSlotRecipe = defineSlotRecipe({
+	className: "page-sidebar",
+	slots: [
+		"body",
+		"contentBlock",
+		"divider",
+		"footer",
+		"item",
+		"itemIcon",
+		"itemLabel",
+		"project",
+		"projectLabel",
+		"projectValue",
+		"projectValueWrapper",
+		"root",
+		"selectionMarker",
+		"suffixIcon",
+		"title",
+		"titleBlock",
+		"titleText"
+	],
+	base: {
+		root: {
+			background: "background/primary",
+			borderInlineEndColor: "border/regular",
+			borderInlineEndStyle: "solid",
+			borderInlineEndWidth: "1",
+			display: "flex",
+			flexDirection: "column",
+			minHeight: "100dvh",
+			maxWidth: {
+				base: "none",
+				tablet: rem(320)
+			},
+			minWidth: rem(240),
+			paddingBlockStart: "16",
+			width: {
+				base: "full",
+				tablet: rem(240)
+			}
+		},
+		body: {
+			display: "flex",
+			flex: 1,
+			flexDirection: "column",
+			marginBlockEnd: "16",
+			width: "full"
+		},
+		title: {
+			alignItems: "center",
+			color: "text/primary",
+			display: "flex",
+			flexShrink: 0,
+			overflow: "clip",
+			paddingInlineEnd: "32"
+		},
+		titleBlock: {
+			alignItems: "center",
+			display: "flex",
+			minWidth: 0
+		},
+		titleText: {
+			textStyle: "heading/h3",
+			whiteSpace: "nowrap"
+		},
+		item: {
+			alignItems: "center",
+			cursor: "pointer",
+			display: "flex",
+			focusVisibleRing: "inside",
+			gap: "12",
+			overflow: "clip",
+			paddingBlock: {
+				base: "12",
+				tablet: "8"
+			},
+			paddingInline: "24",
+			position: "relative",
+			width: "full",
+			_hover: {
+				background: {
+					base: "background/hover",
+					tablet: "background/secondary"
+				},
+				_active: { background: {
+					base: "background/active",
+					tablet: "background/tertiary"
+				} }
+			},
+			_active: { background: {
+				base: "background/active",
+				tablet: "background/tertiary"
+			} },
+			_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+		},
+		contentBlock: {
+			alignItems: "center",
+			display: "flex",
+			flex: 1,
+			gap: "12",
+			minWidth: 0,
+			paddingBlock: {
+				base: "0",
+				tablet: "2"
+			}
+		},
+		itemIcon: {
+			color: "icon/secondary",
+			flexShrink: 0,
+			_groupHover: { color: "icon/primary" }
+		},
+		itemLabel: {
+			color: "text/primary",
+			flex: 1,
+			minWidth: 0,
+			overflow: "hidden",
+			textAlign: "start",
+			textOverflow: "ellipsis",
+			textStyle: {
+				base: "body/lg/regular",
+				tablet: "body/md/regular"
+			},
+			whiteSpace: "nowrap"
+		},
+		suffixIcon: {
+			color: "icon/tertiary",
+			flexShrink: 0
+		},
+		selectionMarker: {
+			background: "border/selected",
+			borderEndStartRadius: {
+				base: "0",
+				tablet: "2"
+			},
+			borderStartStartRadius: {
+				base: "0",
+				tablet: "2"
+			},
+			height: "full",
+			insetBlockStart: 0,
+			insetInlineEnd: 0,
+			position: "absolute",
+			width: {
+				base: "4",
+				tablet: "2"
+			}
+		},
+		footer: {
+			borderBlockStart: "1px solid",
+			borderColor: "border/minimal",
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			paddingBlock: "8"
+		},
+		project: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "4",
+			justifyContent: "center",
+			overflow: "clip",
+			paddingBlockEnd: {
+				base: "12",
+				tablet: "8"
+			},
+			paddingBlockStart: "8",
+			paddingInlineEnd: {
+				base: "24",
+				tablet: "32"
+			},
+			paddingInlineStart: "24",
+			whiteSpace: "nowrap"
+		},
+		projectLabel: {
+			color: "text/tertiary",
+			textStyle: "heading/h6"
+		},
+		projectValue: {
+			color: "text/body",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			textStyle: "body/lg/semibold"
+		},
+		projectValueWrapper: {
+			display: "flex",
+			minWidth: 0
+		},
+		divider: {
+			borderColor: "border/minimal",
+			marginBlock: {
+				base: "20",
+				tablet: "16"
+			},
+			marginInline: "24",
+			width: "auto"
+		}
+	},
+	variants: {
+		hasBack: {
+			true: {
+				title: {
+					paddingBlockEnd: "8",
+					paddingInlineStart: "16"
+				},
+				titleBlock: {
+					gap: "4",
+					paddingBlock: "4"
+				}
+			},
+			false: {
+				title: {
+					paddingBlockEnd: "16",
+					paddingInlineStart: "24"
+				},
+				titleBlock: { paddingBlock: "6" }
+			}
+		},
+		isDisabled: {
+			true: {
+				item: {
+					cursor: "not-allowed",
+					_hover: {
+						background: "transparent",
+						_active: { background: "transparent" }
+					},
+					_active: { background: "transparent" }
+				},
+				itemIcon: {
+					color: "icon/disabled",
+					_groupHover: { color: "icon/disabled" }
+				},
+				itemLabel: { color: "text/disabled" }
+			},
+			false: {}
+		},
+		selected: {
+			true: {
+				item: {
+					background: "background/selected",
+					_hover: {
+						background: "background/selected-hover",
+						_active: { background: {
+							base: "background/selected-hover",
+							tablet: "background/selected-active"
+						} }
+					},
+					_active: { background: {
+						base: "background/selected-hover",
+						tablet: "background/selected-active"
+					} }
+				},
+				itemIcon: {
+					color: "icon/interactive",
+					_groupHover: { color: "icon/interactive-hover" }
+				},
+				itemLabel: { textStyle: {
+					base: "body/lg/semibold",
+					tablet: "body/md/semibold"
+				} }
+			},
+			false: {}
+		}
+	},
+	defaultVariants: {
+		hasBack: false,
+		isDisabled: false,
+		selected: false
+	}
+});
+//#endregion
+export { pageSidebarSlotRecipe as default };
+
+//# sourceMappingURL=PageSidebar.recipe.js.map

package/dist/theme/slot-recipes/PageSidebar.recipe.js.map

@@ -0,0 +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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"}

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

@@ -1419,6 +1419,90 @@ declare const slotRecipes: {
             };
         };
     }>;
+    pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
+        hasBack: {
+            true: {
+                title: {
+                    paddingBlockEnd: "8";
+                    paddingInlineStart: "16";
+                };
+                titleBlock: {
+                    gap: "4";
+                    paddingBlock: "4";
+                };
+            };
+            false: {
+                title: {
+                    paddingBlockEnd: "16";
+                    paddingInlineStart: "24";
+                };
+                titleBlock: {
+                    paddingBlock: "6";
+                };
+            };
+        };
+        isDisabled: {
+            true: {
+                item: {
+                    cursor: "not-allowed";
+                    _hover: {
+                        background: "transparent";
+                        _active: {
+                            background: "transparent";
+                        };
+                    };
+                    _active: {
+                        background: "transparent";
+                    };
+                };
+                itemIcon: {
+                    color: "icon/disabled";
+                    _groupHover: {
+                        color: "icon/disabled";
+                    };
+                };
+                itemLabel: {
+                    color: "text/disabled";
+                };
+            };
+            false: {};
+        };
+        selected: {
+            true: {
+                item: {
+                    background: "background/selected";
+                    _hover: {
+                        background: "background/selected-hover";
+                        _active: {
+                            background: {
+                                base: "background/selected-hover";
+                                tablet: "background/selected-active";
+                            };
+                        };
+                    };
+                    _active: {
+                        background: {
+                            base: "background/selected-hover";
+                            tablet: "background/selected-active";
+                        };
+                    };
+                };
+                itemIcon: {
+                    color: "icon/interactive";
+                    _groupHover: {
+                        color: "icon/interactive-hover";
+                    };
+                };
+                itemLabel: {
+                    textStyle: {
+                        base: "body/lg/semibold";
+                        tablet: "body/md/semibold";
+                    };
+                };
+            };
+            false: {};
+        };
+    }>;
     pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
         variant: {
             card: {
@@ -1755,27 +1839,6 @@ declare const slotRecipes: {
             };
         };
     }>;
-    sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
-        selected: {
-            true: {
-                item: {
-                    background: "background/selected";
-                    _hover: {
-                        background: "background/selected-hover";
-                    };
-                };
-                itemIcon: {
-                    color: "icon/interactive";
-                };
-                itemLabel: {
-                    textStyle: "body/lg/semibold";
-                };
-                selectionMarker: {
-                    display: "block";
-                };
-            };
-        };
-    }>;
     select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
         hasStatusIcon: {
             true: {

package/dist/theme/slot-recipes/index.js

@@ -34,6 +34,7 @@ import nativeSelectSlotRecipe from "./NativeSelect.recipe.js";
 import noteCardSlotRecipe from "./NoteCard.recipe.js";
 import overflowContentSlotRecipe from "./OverflowContent.recipe.js";
 import pageFooterSlotRecipe from "./PageFooter.recipe.js";
+import pageSidebarSlotRecipe from "./PageSidebar.recipe.js";
 import paginationSlotRecipe from "./Pagination.recipe.js";
 import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
 import popoverSlotRecipe from "./Popover.recipe.js";
@@ -44,7 +45,6 @@ import ribbonSlotRecipe from "./Ribbon.recipe.js";
 import sectionHeadingRecipe from "./SectionHeading.recipe.js";
 import segmentGroupSlotRecipe from "./SegmentGroup.recipe.js";
 import settingsCardSlotRecipe from "./SettingsCard.recipe.js";
-import sidebarSlotRecipe from "./Sidebar.recipe.js";
 import splitButtonSlotRecipe from "./SplitButton.recipe.js";
 import statSlotRecipe from "./Stat.recipe.js";
 import stepCardSlotRecipe from "./StepCard.recipe.js";
@@ -96,6 +96,7 @@ var slotRecipes = {
 	numberInput: numberInputSlotRecipe,
 	overflowContent: overflowContentSlotRecipe,
 	pageFooter: pageFooterSlotRecipe,
+	pageSidebar: pageSidebarSlotRecipe,
 	pagination: paginationSlotRecipe,
 	paginationLoadMore: paginationLoadMoreRecipe,
 	popover: popoverSlotRecipe,
@@ -106,7 +107,6 @@ var slotRecipes = {
 	sectionHeading: sectionHeadingRecipe,
 	labeledData: labeledDataSlotRecipe,
 	segmentGroup: segmentGroupSlotRecipe,
-	sidebar: sidebarSlotRecipe,
 	select: selectSlotRecipe,
 	settingsCard: settingsCardSlotRecipe,
 	splitButton: splitButtonSlotRecipe,

package/dist/theme/slot-recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 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 sidebarSlotRecipe from './Sidebar.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 tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.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  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  sidebar: sidebarSlotRecipe,\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  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,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,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,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,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}
+{"version":3,"file":"index.js","names":[],"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 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 tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.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  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  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,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,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;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,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}

package/dist/utilities/useIsTruncated.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Reports whether an element's text is actually clipped by its own box.
+ *
+ * `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
+ * that repeats a label the user can already read in full is noise — so pass the result as its
+ * `disabled` prop to keep it out of the way when the text fits.
+ *
+ * Attach the returned `ref` to the element that truncates:
+ *
+ * ```tsx
+ * const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
+ * <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
+ *   <Text ref={ref} truncate>{label}</Text>
+ * </BitkitOverflowTooltip>
+ * ```
+ *
+ * The measured node is tracked in state rather than a `RefObject` so that it can be an effect
+ * dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
+ * when React swaps the node — which happens whenever an element changes type, say a row rendering
+ * as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
+ * result would freeze at whatever it last measured.
+ */
+declare const useIsTruncated: <T extends HTMLElement>(value?: unknown) => {
+    isTruncated: boolean;
+    ref: import('react').Dispatch<import('react').SetStateAction<T | null>>;
+};
+export default useIsTruncated;

package/dist/utilities/useIsTruncated.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+//#region lib/utilities/useIsTruncated.ts
+/**
+* Reports whether an element's text is actually clipped by its own box.
+*
+* `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip
+* that repeats a label the user can already read in full is noise — so pass the result as its
+* `disabled` prop to keep it out of the way when the text fits.
+*
+* Attach the returned `ref` to the element that truncates:
+*
+* ```tsx
+* const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);
+* <BitkitOverflowTooltip disabled={!isTruncated} text={label}>
+*   <Text ref={ref} truncate>{label}</Text>
+* </BitkitOverflowTooltip>
+* ```
+*
+* The measured node is tracked in state rather than a `RefObject` so that it can be an effect
+* dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run
+* when React swaps the node — which happens whenever an element changes type, say a row rendering
+* as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the
+* result would freeze at whatever it last measured.
+*/
+var useIsTruncated = (value) => {
+	const [node, setNode] = useState(null);
+	const [isTruncated, setIsTruncated] = useState(false);
+	useEffect(() => {
+		if (!node) return;
+		const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);
+		measure();
+		let cancelled = false;
+		document.fonts?.ready.then(() => {
+			if (!cancelled) measure();
+		});
+		if (typeof ResizeObserver === "undefined") return () => {
+			cancelled = true;
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+		};
+	}, [node, value]);
+	return {
+		isTruncated,
+		ref: setNode
+	};
+};
+//#endregion
+export { useIsTruncated as default };
+
+//# sourceMappingURL=useIsTruncated.js.map

package/dist/utilities/useIsTruncated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsTruncated.js","names":[],"sources":["../../lib/utilities/useIsTruncated.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Reports whether an element's text is actually clipped by its own box.\n *\n * `BitkitOverflowTooltip` shows its tooltip unconditionally unless told otherwise, and a tooltip\n * that repeats a label the user can already read in full is noise — so pass the result as its\n * `disabled` prop to keep it out of the way when the text fits.\n *\n * Attach the returned `ref` to the element that truncates:\n *\n * ```tsx\n * const { isTruncated, ref } = useIsTruncated<HTMLParagraphElement>(label);\n * <BitkitOverflowTooltip disabled={!isTruncated} text={label}>\n *   <Text ref={ref} truncate>{label}</Text>\n * </BitkitOverflowTooltip>\n * ```\n *\n * The measured node is tracked in state rather than a `RefObject` so that it can be an effect\n * dependency: a `RefObject`'s identity never changes, so an effect keyed on it would not re-run\n * when React swaps the node — which happens whenever an element changes type, say a row rendering\n * as `<a>` instead of `<button>`. The observer would stay attached to the detached node and the\n * result would freeze at whatever it last measured.\n */\nconst useIsTruncated = <T extends HTMLElement>(value?: unknown) => {\n  const [node, setNode] = useState<T | null>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  useEffect(() => {\n    // No reset when the node is missing: React nulls the ref and hands over the replacement in the\n    // same commit, and the effect re-runs to measure it. Resetting here would only add a render.\n    if (!node) {\n      return;\n    }\n\n    // 1px of slack: sub-pixel text metrics make `scrollWidth` exceed `clientWidth` by a fraction on\n    // labels that actually fit, which would show a tooltip repeating the whole visible label.\n    const measure = () => setIsTruncated(node.scrollWidth > node.clientWidth + 1);\n\n    measure();\n\n    // The element's own box is fixed by its container, so swapping the fallback font for the real\n    // one changes how wide the *text* renders without ever resizing the element — a ResizeObserver\n    // never fires for that. Re-measure once the webfonts are in.\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        measure();\n      }\n    });\n\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        cancelled = true;\n      };\n    }\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [node, value]);\n\n  return { isTruncated, ref: setNode };\n};\n\nexport default useIsTruncated;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAM,kBAAyC,UAAoB;CACjE,MAAM,CAAC,MAAM,WAAW,SAAmB,IAAI;CAC/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,gBAAgB;EAGd,IAAI,CAAC,MACH;EAKF,MAAM,gBAAgB,eAAe,KAAK,cAAc,KAAK,cAAc,CAAC;EAE5E,QAAQ;EAKR,IAAI,YAAY;EAChB,SAAc,OAAO,MAAM,WAAW;GACpC,IAAI,CAAC,WACH,QAAQ;EAEZ,CAAC;EAED,IAAI,OAAO,mBAAmB,aAC5B,aAAa;GACX,YAAY;EACd;EAGF,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EAErB,aAAa;GACX,YAAY;GACZ,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OAAO;EAAE;EAAa,KAAK;CAAQ;AACrC"}