@bitrise/bitkit-v2 0.3.383 → 0.3.385

package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.d.ts

@@ -0,0 +1,23 @@
+import { Table } from '@chakra-ui/react/table';
+import { BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';
+/**
+ * Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition
+ * — on top of everything a `Table.ColumnHeader` takes. The two the header owns are gone: `textSize`,
+ * because the point is to keep the header's own type, and the tooltip's `truncate`, because the title
+ * always truncates and `truncate` stays the header cell's own style prop.
+ */
+export interface BitkitDefinitionColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {
+}
+/**
+ * A column header whose title is a glossary term: underlined, and revealing what the column means on
+ * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
+ * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
+ *
+ * That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
+ * the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
+ *
+ * Only the title is the trigger, so the rest of the header stays inert. Everything else a
+ * `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.
+ */
+declare const BitkitDefinitionColumnHeader: import('react').ForwardRefExoticComponent<BitkitDefinitionColumnHeaderProps & import('react').RefAttributes<HTMLTableCellElement>>;
+export default BitkitDefinitionColumnHeader;

package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js

@@ -0,0 +1,53 @@
+import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
+//#region lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx
+/**
+* A column header whose title is a glossary term: underlined, and revealing what the column means on
+* demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
+* title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
+*
+* That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
+* the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
+*
+* Only the title is the trigger, so the rest of the header stays inert. Everything else a
+* `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.
+*/
+var BitkitDefinitionColumnHeader = forwardRef(({ button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = "click", placement, text, ...rest }, ref) => {
+	const styles = useTableStyles();
+	const [open, setOpen] = useState(false);
+	const isClick = method === "click";
+	return /* @__PURE__ */ jsx(Table.ColumnHeader, {
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsx(BitkitTooltip, {
+			button,
+			closeOnClick: isClick ? false : void 0,
+			disablePortal,
+			learnMoreTarget,
+			learnMoreUrl,
+			onOpenChange: isClick ? ({ open: nextOpen }) => {
+				if (!nextOpen) setOpen(false);
+			} : void 0,
+			open: isClick ? open : void 0,
+			openDelay: isClick ? Infinity : void 0,
+			placement,
+			text,
+			children: /* @__PURE__ */ jsx(chakra.button, {
+				"aria-expanded": isClick ? open : void 0,
+				css: styles.definitionTrigger,
+				onClick: isClick ? () => setOpen(!open) : void 0,
+				truncate: true,
+				type: "button",
+				children
+			})
+		})
+	});
+});
+BitkitDefinitionColumnHeader.displayName = "BitkitDefinitionColumnHeader";
+//#endregion
+export { BitkitDefinitionColumnHeader as default };
+
+//# sourceMappingURL=BitkitDefinitionColumnHeader.js.map

package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitDefinitionColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx"],"sourcesContent":["import { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, useState } from 'react';\n\nimport { type BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n/**\n * Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition\n * — on top of everything a `Table.ColumnHeader` takes. The two the header owns are gone: `textSize`,\n * because the point is to keep the header's own type, and the tooltip's `truncate`, because the title\n * always truncates and `truncate` stays the header cell's own style prop.\n */\nexport interface BitkitDefinitionColumnHeaderProps\n  extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {}\n\n/**\n * A column header whose title is a glossary term: underlined, and revealing what the column means on\n * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the\n * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.\n *\n * That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:\n * the latter's recipe always applies a `textSize`, and there is no value for it that means \"inherit\".\n *\n * Only the title is the trigger, so the rest of the header stays inert. Everything else a\n * `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.\n */\nconst BitkitDefinitionColumnHeader = forwardRef<HTMLTableCellElement, BitkitDefinitionColumnHeaderProps>(\n  (\n    { button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = 'click', placement, text, ...rest },\n    ref,\n  ) => {\n    const styles = useTableStyles();\n    const [open, setOpen] = useState(false);\n    const isClick = method === 'click';\n\n    return (\n      <Table.ColumnHeader ref={ref} {...rest}>\n        <BitkitTooltip\n          button={button}\n          closeOnClick={isClick ? false : undefined}\n          disablePortal={disablePortal}\n          learnMoreTarget={learnMoreTarget}\n          learnMoreUrl={learnMoreUrl}\n          onOpenChange={\n            isClick\n              ? ({ open: nextOpen }) => {\n                  if (!nextOpen) setOpen(false);\n                }\n              : undefined\n          }\n          open={isClick ? open : undefined}\n          openDelay={isClick ? Infinity : undefined}\n          placement={placement}\n          text={text}\n        >\n          {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n          <chakra.button\n            aria-expanded={isClick ? open : undefined}\n            css={styles.definitionTrigger}\n            onClick={isClick ? () => setOpen(!open) : undefined}\n            truncate\n            type=\"button\"\n          >\n            {children}\n          </chakra.button>\n        </BitkitTooltip>\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitDefinitionColumnHeader.displayName = 'BitkitDefinitionColumnHeader';\n\nexport default BitkitDefinitionColumnHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,+BAA+B,YAEjC,EAAE,QAAQ,UAAU,eAAe,iBAAiB,cAAc,SAAS,SAAS,WAAW,MAAM,GAAG,QACxG,QACG;CACH,MAAM,SAAS,eAAe;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,WAAW;CAE3B,OACE,oBAAC,MAAM,cAAP;EAAyB;EAAK,GAAI;EAChC,UAAA,oBAAC,eAAD;GACU;GACR,cAAc,UAAU,QAAQ,KAAA;GACjB;GACE;GACH;GACd,cACE,WACK,EAAE,MAAM,eAAe;IACtB,IAAI,CAAC,UAAU,QAAQ,KAAK;GAC9B,IACA,KAAA;GAEN,MAAM,UAAU,OAAO,KAAA;GACvB,WAAW,UAAU,WAAW,KAAA;GACrB;GACL;GAGN,UAAA,oBAAC,OAAO,QAAR;IACE,iBAAe,UAAU,OAAO,KAAA;IAChC,KAAK,OAAO;IACZ,SAAS,gBAAgB,QAAQ,CAAC,IAAI,IAAI,KAAA;IAC1C,UAAA;IACA,MAAK;IAEJ;GACY,CAAA;EACF,CAAA;CACG,CAAA;AAExB,CACF;AAEA,6BAA6B,cAAc"}

package/dist/components/index.d.ts

@@ -74,6 +74,7 @@ export { default as BitkitSteps, type BitkitStepsItemProps, type BitkitStepsItem
 export { default as BitkitStepsCard, type BitkitStepsCardBodyProps, type BitkitStepsCardFooterProps, type BitkitStepsCardHeaderProps, type BitkitStepsCardProps, type BitkitStepsCardStepProps, } from './BitkitStepsCard/BitkitStepsCard';
 export { default as BitkitSwitch, type BitkitSwitchProps } from './BitkitSwitch';
 export { type BitkitBulkActionsItems, type BitkitBulkActionsLabels, default as BitkitBulkActionsRow, type BitkitBulkActionsRowProps, } from './BitkitTable/BitkitBulkActionsRow';
+export { default as BitkitDefinitionColumnHeader, type BitkitDefinitionColumnHeaderProps, } from './BitkitTable/BitkitDefinitionColumnHeader';
 export { default as BitkitExpandableRow, type BitkitExpandableRowProps } from './BitkitTable/BitkitExpandableRow';
 export { default as BitkitFilterRow, type BitkitFilterRowProps } from './BitkitTable/BitkitFilterRow';
 export { default as BitkitLinkedRow, type BitkitLinkedRowLinkCellProps, type BitkitLinkedRowProps, } from './BitkitTable/BitkitLinkedRow';

package/dist/main.js

@@ -362,6 +362,7 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
 import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
 import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
 import BitkitBulkActionsRow from "./components/BitkitTable/BitkitBulkActionsRow.js";
+import BitkitDefinitionColumnHeader from "./components/BitkitTable/BitkitDefinitionColumnHeader.js";
 import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
 import BitkitFilterRow from "./components/BitkitTable/BitkitFilterRow.js";
 import BitkitLinkedRow_default from "./components/BitkitTable/BitkitLinkedRow.js";
@@ -378,4 +379,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionColumnHeader, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };

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

@@ -1,4 +1,4 @@
-declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
+declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
     variant: {
         default: {
             root: {
@@ -114,6 +114,9 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
                     borderBottomWidth: number;
                     borderTopStyle: "solid";
                     borderTopWidth: "1";
+                    height: "auto";
+                    paddingBlock: number;
+                    paddingInline: number;
                 };
                 '& > :where(label):only-child': {
                     display: string;

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

@@ -11,6 +11,7 @@ var tableSlotRecipe = defineSlotRecipe({
 		"actionsGroup",
 		"bulkActionsGroup",
 		"bulkActionsButtons",
+		"definitionTrigger",
 		"expandCell",
 		"expandTrigger",
 		"expandableRow",
@@ -61,6 +62,17 @@ var tableSlotRecipe = defineSlotRecipe({
 			gap: "12",
 			marginInlineStart: "auto"
 		},
+		definitionTrigger: {
+			color: "inherit",
+			cursor: "pointer",
+			font: "inherit",
+			letterSpacing: "inherit",
+			maxWidth: "full",
+			textDecoration: "underline dotted",
+			textDecorationColor: "color/neutral/bold",
+			textUnderlineOffset: "0.25em",
+			_hover: { textDecorationColor: "color/purple/base" }
+		},
 		expandCell: {
 			paddingBlock: 0,
 			paddingInline: 0,
@@ -243,7 +255,10 @@ var tableSlotRecipe = defineSlotRecipe({
 					"tfoot &": {
 						borderBottomWidth: 0,
 						borderTopStyle: "solid",
-						borderTopWidth: "1"
+						borderTopWidth: "1",
+						height: "auto",
+						paddingBlock: 0,
+						paddingInline: 0
 					}
 				},
 				body: {

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

@@ -1 +1 @@
-{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n  '& > :where(label):only-child': {\n    display: 'flex',\n  },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n  className: 'table',\n  slots: [\n    ...tableAnatomy.keys(),\n    'actionsCell',\n    'actionsGroup',\n    'bulkActionsGroup',\n    'bulkActionsButtons',\n    'expandCell',\n    'expandTrigger',\n    'expandableRow',\n    'expandedCell',\n    'expandedContent',\n    'expandedRow',\n    'filterControls',\n    'linkedRow',\n    'rowLink',\n    'sortColumnHeader',\n    'sortTrigger',\n    'utilityCell',\n  ],\n  base: {\n    root: {\n      fontVariantNumeric: 'lining-nums tabular-nums',\n      textAlign: 'start',\n      width: 'full',\n    },\n    caption: {\n      captionSide: 'top !important',\n      textAlign: 'start',\n      '& > * + *': {\n        marginBlockStart: '4',\n      },\n    },\n    cell: {\n      color: 'text/body',\n      textStyle: 'body/md/regular',\n    },\n    actionsCell: {\n      textAlign: 'end',\n      whiteSpace: 'nowrap',\n      // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n      // content's own width collapses the column around the buttons and leaves the rest to\n      // the data columns.\n      width: '1%',\n    },\n    actionsGroup: {\n      alignItems: 'center',\n      display: 'inline-flex',\n      gap: '8',\n      position: 'relative',\n    },\n    bulkActionsGroup: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n    },\n    bulkActionsButtons: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      marginInlineStart: 'auto',\n    },\n    expandCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      verticalAlign: 'middle',\n      width: '48',\n    },\n    // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n    // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n    // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n    expandTrigger: {\n      alignItems: 'center',\n      background: 'none',\n      border: 'none',\n      cursor: 'pointer',\n      display: 'flex',\n      height: '32',\n      justifyContent: 'center',\n      marginInlineStart: '12',\n      padding: 0,\n      width: '32',\n    },\n    expandableRow: {\n      '& > td': {\n        borderBottomWidth: 0,\n      },\n    },\n    expandedCell: {\n      height: 0,\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    expandedContent: {\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      marginInlineEnd: '16',\n      marginInlineStart: '48',\n      paddingBlockEnd: '24',\n      paddingBlockStart: '16',\n      paddingInlineEnd: '16',\n      paddingInlineStart: '12',\n    },\n    expandedRow: {\n      _hover: {\n        background: 'none',\n      },\n    },\n    filterControls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: '16',\n      width: 'full',\n    },\n    linkedRow: {\n      position: 'relative',\n      _hover: {\n        backgroundColor: 'background/secondary',\n      },\n      '& :where(a:not([data-row-link]), button, input, label, select)': {\n        position: 'relative',\n        zIndex: '1',\n      },\n    },\n    rowLink: {\n      textDecoration: 'none',\n      // The row's own background change is the hover affordance; the link recipe's hover\n      // underline would fire on every row hover, since the stretched pseudo covers the row.\n      _hover: {\n        textDecoration: 'none',\n      },\n      _after: {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n      },\n      _focusVisible: {\n        outline: 'none',\n        _after: {\n          outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n          outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n        },\n      },\n    },\n    sortColumnHeader: {\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    sortTrigger: {\n      alignItems: 'center',\n      appearance: 'none',\n      background: 'none',\n      border: 'none',\n      color: 'inherit',\n      cursor: 'pointer',\n      display: 'flex',\n      font: 'inherit',\n      gap: '8',\n      height: 'full',\n      paddingBlock: '12',\n      paddingInline: '16',\n      userSelect: 'none',\n      width: 'full',\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n      _hover: {\n        backgroundColor: 'background/active',\n      },\n    },\n    utilityCell: {\n      height: 'auto',\n      paddingBlock: '12',\n      paddingInline: '16',\n    },\n  },\n  variants: {\n    variant: {\n      default: {\n        root: {\n          borderColor: 'border/regular',\n          borderRadius: '4',\n          borderStyle: 'solid',\n          borderWidth: '1',\n          overflow: 'hidden',\n        },\n        header: {\n          '& :where(th)': {\n            backgroundColor: 'background/tertiary',\n          },\n        },\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          paddingBlock: '12',\n          paddingInline: '16',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '16',\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n      borderless: {\n        columnHeader: {\n          borderBottomColor: 'border/regular',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/regular',\n          borderTopColor: 'border/regular',\n          paddingInline: '12',\n        },\n        footer: {\n          borderTopColor: 'border/regular',\n        },\n      },\n      card: {\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          height: '48',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '12',\n        },\n        row: {\n          'thead &, tbody &': {\n            '& > :where(td, th):first-child': {\n              paddingInlineStart: '24',\n            },\n            '& > :where(td, th):last-child': {\n              paddingInlineEnd: '24',\n            },\n          },\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n    },\n    size: {\n      sm: {\n        cell: {\n          height: '48',\n        },\n      },\n      md: {\n        cell: {\n          height: rem(56),\n        },\n      },\n      lg: {\n        cell: {\n          height: '64',\n        },\n      },\n    },\n    // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n    // that the row is clickable, so it says nothing about the row being interactive — turn it off\n    // for short, static tables where there is no place to lose.\n    rowHover: {\n      true: {},\n      false: {},\n    },\n    layout: {\n      table: {\n        root: {\n          borderCollapse: 'separate',\n          borderSpacing: '0',\n        },\n        caption: {\n          marginBlockEnd: '24',\n        },\n        columnHeader: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          color: 'text/primary',\n          fontWeight: 'bold',\n          textAlign: 'start',\n          textStyle: 'heading/h5',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n        },\n        cell: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n          // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n          // so the body/footer divider has to live on the footer's cells.\n          'tfoot &': {\n            borderBottomWidth: 0,\n            borderTopStyle: 'solid',\n            borderTopWidth: '1',\n          },\n        },\n        body: {\n          '& :where(tr)': {\n            '&:has(input:checked), &[data-selected]': {\n              backgroundColor: 'background/selected',\n              _hover: {\n                backgroundColor: 'background/selected',\n              },\n            },\n          },\n          '& :where(tr:last-child) td': {\n            borderBottomWidth: 0,\n          },\n        },\n      },\n      stacked: {\n        root: {\n          display: 'block',\n        },\n        caption: {\n          display: 'block',\n          padding: '16',\n          backgroundColor: 'background/secondary',\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n        },\n        header: {\n          borderWidth: 0,\n          clip: 'rect(0, 0, 0, 0)',\n          height: '1',\n          margin: '-1px',\n          overflow: 'hidden',\n          padding: 0,\n          position: 'absolute',\n          whiteSpace: 'nowrap',\n          width: '1',\n        },\n        body: {\n          display: 'block',\n        },\n        row: {\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          display: 'block',\n          paddingBlock: '12',\n          '&:last-child': {\n            borderBottomWidth: 0,\n          },\n        },\n        cell: {\n          alignItems: 'center',\n          display: 'flex',\n          minHeight: '48',\n          paddingInline: '16',\n          _before: {\n            alignSelf: 'center',\n            color: 'text/primary',\n            content: 'attr(data-label)',\n            flexShrink: 0,\n            fontWeight: 'semibold',\n            marginInlineEnd: '16',\n            width: '96',\n          },\n          'tfoot &': {\n            display: 'block',\n            paddingInline: 0,\n            _before: {\n              content: 'none',\n            },\n          },\n        },\n        // display: block takes tfoot out of the table model, so a border on it does render here\n        footer: {\n          borderTopStyle: 'solid',\n          borderTopWidth: '1',\n          display: 'block',\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      css: {\n        row: {\n          borderBottomColor: 'border/regular',\n        },\n      },\n      layout: 'stacked',\n      variant: 'borderless',\n    },\n    // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n    // whose cells run vertically, so an inline indent on only the first and last one reads as a\n    // misalignment — everything goes back to the stacked layout's own 16px.\n    {\n      css: {\n        cell: {\n          paddingInline: '16',\n        },\n        row: {\n          'thead &, tbody &': {\n            '& > :where(td, th):first-child': {\n              paddingInlineStart: '16',\n            },\n            '& > :where(td, th):last-child': {\n              paddingInlineEnd: '16',\n            },\n          },\n        },\n      },\n      layout: 'stacked',\n      variant: 'card',\n    },\n    // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n    // regardless of declaration order — so only a compound variant can release it. Stacked cells\n    // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n    // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n    {\n      css: {\n        cell: {\n          height: 'auto',\n        },\n      },\n      layout: 'stacked',\n    },\n    // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n    // renders rows as blocks and never tinted them.\n    {\n      css: {\n        body: {\n          '& :where(tr)': {\n            _hover: {\n              backgroundColor: 'background/secondary',\n            },\n          },\n        },\n      },\n      layout: 'table',\n      rowHover: true,\n    },\n  ],\n  defaultVariants: {\n    layout: 'table',\n    rowHover: true,\n    size: 'lg',\n    variant: 'default',\n  },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n  '& > :where(label):only-child': {\n    display: 'flex',\n  },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n  className: 'table',\n  slots: [\n    ...tableAnatomy.keys(),\n    'actionsCell',\n    'actionsGroup',\n    'bulkActionsGroup',\n    'bulkActionsButtons',\n    'definitionTrigger',\n    'expandCell',\n    'expandTrigger',\n    'expandableRow',\n    'expandedCell',\n    'expandedContent',\n    'expandedRow',\n    'filterControls',\n    'linkedRow',\n    'rowLink',\n    'sortColumnHeader',\n    'sortTrigger',\n    'utilityCell',\n  ],\n  base: {\n    root: {\n      fontVariantNumeric: 'lining-nums tabular-nums',\n      textAlign: 'start',\n      width: 'full',\n    },\n    caption: {\n      captionSide: 'top !important',\n      textAlign: 'start',\n      '& > * + *': {\n        marginBlockStart: '4',\n      },\n    },\n    cell: {\n      color: 'text/body',\n      textStyle: 'body/md/regular',\n    },\n    actionsCell: {\n      textAlign: 'end',\n      whiteSpace: 'nowrap',\n      // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n      // content's own width collapses the column around the buttons and leaves the rest to\n      // the data columns.\n      width: '1%',\n    },\n    actionsGroup: {\n      alignItems: 'center',\n      display: 'inline-flex',\n      gap: '8',\n      position: 'relative',\n    },\n    bulkActionsGroup: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n    },\n    bulkActionsButtons: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      marginInlineStart: 'auto',\n    },\n    // The column header's own `heading/h5` has to survive, so the trigger inherits its type and\n    // colour rather than setting them — which is what rules out BitkitDefinitionTooltip in a header,\n    // since its recipe always pins a textStyle. The offset is that recipe's own value for 14px type.\n    definitionTrigger: {\n      color: 'inherit',\n      cursor: 'pointer',\n      font: 'inherit',\n      letterSpacing: 'inherit',\n      maxWidth: 'full',\n      textDecoration: 'underline dotted',\n      textDecorationColor: 'color/neutral/bold',\n      textUnderlineOffset: '0.25em',\n      _hover: {\n        textDecorationColor: 'color/purple/base',\n      },\n    },\n    expandCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      verticalAlign: 'middle',\n      width: '48',\n    },\n    // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n    // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n    // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n    expandTrigger: {\n      alignItems: 'center',\n      background: 'none',\n      border: 'none',\n      cursor: 'pointer',\n      display: 'flex',\n      height: '32',\n      justifyContent: 'center',\n      marginInlineStart: '12',\n      padding: 0,\n      width: '32',\n    },\n    expandableRow: {\n      '& > td': {\n        borderBottomWidth: 0,\n      },\n    },\n    expandedCell: {\n      height: 0,\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    expandedContent: {\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      marginInlineEnd: '16',\n      marginInlineStart: '48',\n      paddingBlockEnd: '24',\n      paddingBlockStart: '16',\n      paddingInlineEnd: '16',\n      paddingInlineStart: '12',\n    },\n    expandedRow: {\n      _hover: {\n        background: 'none',\n      },\n    },\n    filterControls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: '16',\n      width: 'full',\n    },\n    linkedRow: {\n      position: 'relative',\n      _hover: {\n        backgroundColor: 'background/secondary',\n      },\n      '& :where(a:not([data-row-link]), button, input, label, select)': {\n        position: 'relative',\n        zIndex: '1',\n      },\n    },\n    rowLink: {\n      textDecoration: 'none',\n      // The row's own background change is the hover affordance; the link recipe's hover\n      // underline would fire on every row hover, since the stretched pseudo covers the row.\n      _hover: {\n        textDecoration: 'none',\n      },\n      _after: {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n      },\n      _focusVisible: {\n        outline: 'none',\n        _after: {\n          outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n          outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n        },\n      },\n    },\n    sortColumnHeader: {\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    sortTrigger: {\n      alignItems: 'center',\n      appearance: 'none',\n      background: 'none',\n      border: 'none',\n      color: 'inherit',\n      cursor: 'pointer',\n      display: 'flex',\n      font: 'inherit',\n      gap: '8',\n      height: 'full',\n      paddingBlock: '12',\n      paddingInline: '16',\n      userSelect: 'none',\n      width: 'full',\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n      _hover: {\n        backgroundColor: 'background/active',\n      },\n    },\n    utilityCell: {\n      height: 'auto',\n      paddingBlock: '12',\n      paddingInline: '16',\n    },\n  },\n  variants: {\n    variant: {\n      default: {\n        root: {\n          borderColor: 'border/regular',\n          borderRadius: '4',\n          borderStyle: 'solid',\n          borderWidth: '1',\n          overflow: 'hidden',\n        },\n        header: {\n          '& :where(th)': {\n            backgroundColor: 'background/tertiary',\n          },\n        },\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          paddingBlock: '12',\n          paddingInline: '16',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '16',\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n      borderless: {\n        columnHeader: {\n          borderBottomColor: 'border/regular',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/regular',\n          borderTopColor: 'border/regular',\n          paddingInline: '12',\n        },\n        footer: {\n          borderTopColor: 'border/regular',\n        },\n      },\n      card: {\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          height: '48',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '12',\n        },\n        row: {\n          'thead &, tbody &': {\n            '& > :where(td, th):first-child': {\n              paddingInlineStart: '24',\n            },\n            '& > :where(td, th):last-child': {\n              paddingInlineEnd: '24',\n            },\n          },\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n    },\n    size: {\n      sm: {\n        cell: {\n          height: '48',\n        },\n      },\n      md: {\n        cell: {\n          height: rem(56),\n        },\n      },\n      lg: {\n        cell: {\n          height: '64',\n        },\n      },\n    },\n    // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n    // that the row is clickable, so it says nothing about the row being interactive — turn it off\n    // for short, static tables where there is no place to lose.\n    rowHover: {\n      true: {},\n      false: {},\n    },\n    layout: {\n      table: {\n        root: {\n          borderCollapse: 'separate',\n          borderSpacing: '0',\n        },\n        caption: {\n          marginBlockEnd: '24',\n        },\n        columnHeader: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          color: 'text/primary',\n          fontWeight: 'bold',\n          textAlign: 'start',\n          textStyle: 'heading/h5',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n        },\n        cell: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n          // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n          // so the body/footer divider has to live on the footer's cells.\n          // A footer holds one full-width block (pagination, a \"new item\" action) that brings its\n          // own padding and height, so the body cell's 16px inset and fixed row height would\n          // double up on it.\n          'tfoot &': {\n            borderBottomWidth: 0,\n            borderTopStyle: 'solid',\n            borderTopWidth: '1',\n            height: 'auto',\n            paddingBlock: 0,\n            paddingInline: 0,\n          },\n        },\n        body: {\n          '& :where(tr)': {\n            '&:has(input:checked), &[data-selected]': {\n              backgroundColor: 'background/selected',\n              _hover: {\n                backgroundColor: 'background/selected',\n              },\n            },\n          },\n          '& :where(tr:last-child) td': {\n            borderBottomWidth: 0,\n          },\n        },\n      },\n      stacked: {\n        root: {\n          display: 'block',\n        },\n        caption: {\n          display: 'block',\n          padding: '16',\n          backgroundColor: 'background/secondary',\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n        },\n        header: {\n          borderWidth: 0,\n          clip: 'rect(0, 0, 0, 0)',\n          height: '1',\n          margin: '-1px',\n          overflow: 'hidden',\n          padding: 0,\n          position: 'absolute',\n          whiteSpace: 'nowrap',\n          width: '1',\n        },\n        body: {\n          display: 'block',\n        },\n        row: {\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          display: 'block',\n          paddingBlock: '12',\n          '&:last-child': {\n            borderBottomWidth: 0,\n          },\n        },\n        cell: {\n          alignItems: 'center',\n          display: 'flex',\n          minHeight: '48',\n          paddingInline: '16',\n          _before: {\n            alignSelf: 'center',\n            color: 'text/primary',\n            content: 'attr(data-label)',\n            flexShrink: 0,\n            fontWeight: 'semibold',\n            marginInlineEnd: '16',\n            width: '96',\n          },\n          'tfoot &': {\n            display: 'block',\n            paddingInline: 0,\n            _before: {\n              content: 'none',\n            },\n          },\n        },\n        // display: block takes tfoot out of the table model, so a border on it does render here\n        footer: {\n          borderTopStyle: 'solid',\n          borderTopWidth: '1',\n          display: 'block',\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      css: {\n        row: {\n          borderBottomColor: 'border/regular',\n        },\n      },\n      layout: 'stacked',\n      variant: 'borderless',\n    },\n    // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n    // whose cells run vertically, so an inline indent on only the first and last one reads as a\n    // misalignment — everything goes back to the stacked layout's own 16px.\n    {\n      css: {\n        cell: {\n          paddingInline: '16',\n        },\n        row: {\n          'thead &, tbody &': {\n            '& > :where(td, th):first-child': {\n              paddingInlineStart: '16',\n            },\n            '& > :where(td, th):last-child': {\n              paddingInlineEnd: '16',\n            },\n          },\n        },\n      },\n      layout: 'stacked',\n      variant: 'card',\n    },\n    // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n    // regardless of declaration order — so only a compound variant can release it. Stacked cells\n    // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n    // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n    {\n      css: {\n        cell: {\n          height: 'auto',\n        },\n      },\n      layout: 'stacked',\n    },\n    // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n    // renders rows as blocks and never tinted them.\n    {\n      css: {\n        body: {\n          '& :where(tr)': {\n            _hover: {\n              backgroundColor: 'background/secondary',\n            },\n          },\n        },\n      },\n      layout: 'table',\n      rowHover: true,\n    },\n  ],\n  defaultVariants: {\n    layout: 'table',\n    rowHover: true,\n    size: 'lg',\n    variant: 'default',\n  },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}

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

@@ -20,7 +20,8 @@ var tourSlotRecipe = defineSlotRecipe({
 			_open: {
 				animationStyle: "fade-in",
 				animationDuration: "moderate"
-			}
+			},
+			_closed: { display: "none" }
 		},
 		spotlight: {
 			borderRadius: "4",

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

@@ -1 +1 @@
-{"version":3,"file":"Tour.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tour.recipe.ts"],"sourcesContent":["// The Tour parts come from Ark UI, so the anatomy comes from there too — Chakra has no `tour`\n// counterpart yet (chakra-ui/chakra-ui#10410 is still open).\nimport { tourAnatomy } from '@ark-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tourSlotRecipe = defineSlotRecipe({\n  className: 'tour',\n  slots: [...tourAnatomy.keys(), 'actions', 'badge', 'header', 'media', 'titleGroup', 'titleRow'] as const,\n  base: {\n    backdrop: {\n      background: 'utilities/overlay',\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n      // No exit animation: Ark sets `hidden` on the backdrop and the content the moment the tour\n      // closes, so the node is `display: none` in the same frame and an exit animation can never\n      // paint — it only leaves the animation assigned, which flashes the card back in for a frame\n      // on the next render. Most visible on steps without a backdrop, where nothing masks it.\n    },\n    // Sits on the same layer as the backdrop and after it in DOM order, so the ring around the\n    // highlighted element paints over the dimmed page.\n    spotlight: {\n      borderRadius: '4',\n      outline: '2px solid',\n      outlineColor: 'interactive/highlight',\n      zIndex: 'dialogOverlay',\n    },\n    // Zag positions and layers this one inline, writing\n    // `z-index: calc(var(--tour-layer) + var(--tour-z-index))` and expecting us to supply the base.\n    // Without it the calc is invalid, the positioner falls back to `auto` — and since it opens its\n    // own stacking context (`isolation: isolate`), the card's own z-index can't reach past it, so\n    // the whole card ends up under the backdrop and swallows every click. The plain `zIndex` is the\n    // fallback for the day Zag stops writing that inline.\n    positioner: {\n      '--tour-z-index': 'zIndex.dialog',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n      maxHeight: 'var(--available-height, 100dvh)',\n      maxWidth: '100%',\n      outline: 'none',\n      padding: '16',\n      position: 'relative',\n      width: rem(360),\n      zIndex: 'dialog',\n      // Fade only, no scale: Zag puts `--transform-origin` at the arrow tip, so a `scale-in` grows\n      // the card away from the highlight — a 360x300 card gains ~15 of height on the way in, which\n      // reads as the card repositioning itself rather than appearing.\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n    },\n    header: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n    },\n    titleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    // flex-start, not center: the badge is as tall as one line of the title, so it lines up with\n    // the first line instead of floating beside the middle of a title that wrapped.\n    titleRow: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '8',\n    },\n    badge: {\n      flexShrink: 0,\n    },\n    title: {\n      color: 'text/primary',\n      textStyle: 'heading/h4',\n    },\n    progressText: {\n      color: 'text/secondary',\n      textStyle: 'body/sm/regular',\n    },\n    description: {\n      color: 'text/body',\n      minHeight: 0,\n      overflowY: 'auto',\n      textStyle: 'body/md/regular',\n    },\n    // These two margins stack on the content's own 8 gap, which is how the layout spec builds the\n    // spacing: 16 between the description and the visual, and 24 above the footer. The footer gets\n    // nothing below it, so the card's own 16 padding is the whole gap under the buttons.\n    media: {\n      marginBlockStart: '8',\n    },\n    control: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n      marginBlockStart: '16',\n    },\n    actions: {\n      display: 'flex',\n      gap: '8',\n      marginInlineStart: 'auto',\n    },\n    closeTrigger: {\n      flexShrink: 0,\n    },\n    arrow: {\n      // Popper draws the arrow as a square rotated 45°, so the visible triangle is `size * √2`\n      // wide and `size / √2` tall — 11.3 gives the design's 16×8.\n      '--arrow-size': rem(11.3),\n      '--arrow-background': 'colors.background/primary',\n      // Size and out-of-flow positioning are set here, not only by Popper's inline styles, because\n      // the component keeps this element out of Zag's `hidden` (see BitkitTour): Popper derives the\n      // card's distance from the anchor as `offset.mainAxis + arrowEl.clientHeight / 2`, read off\n      // the DOM. A `display: none` arrow measures 0, which puts the card 6 short of the design's 12\n      // on the first pass. `absolute` keeps it from adding its height to the card while it waits\n      // for Popper's own inline placement.\n      height: 'var(--arrow-size)',\n      position: 'absolute',\n      width: 'var(--arrow-size)',\n    },\n    arrowTip: {\n      borderColor: 'border/minimal',\n      borderInlineStartWidth: '1',\n      borderTopWidth: '1',\n    },\n  },\n});\n\nexport default tourSlotRecipe;\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAW;EAAS;EAAU;EAAS;EAAc;CAAU;CAC9F,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,QAAQ;GACR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;EAKF;EAGA,WAAW;GACT,cAAc;GACd,SAAS;GACT,cAAc;GACd,QAAQ;EACV;EAOA,YAAY;GACV,kBAAkB;GAClB,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW;GACX,UAAU;GACV,SAAS;GACT,SAAS;GACT,UAAU;GACV,OAAO,IAAI,GAAG;GACd,QAAQ;GAIR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EAGA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,OAAO,EACL,YAAY,EACd;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAIA,OAAO,EACL,kBAAkB,IACpB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,kBAAkB;EACpB;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,mBAAmB;EACrB;EACA,cAAc,EACZ,YAAY,EACd;EACA,OAAO;GAGL,gBAAgB,IAAI,IAAI;GACxB,sBAAsB;GAOtB,QAAQ;GACR,UAAU;GACV,OAAO;EACT;EACA,UAAU;GACR,aAAa;GACb,wBAAwB;GACxB,gBAAgB;EAClB;CACF;AACF,CAAC"}
+{"version":3,"file":"Tour.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tour.recipe.ts"],"sourcesContent":["// The Tour parts come from Ark UI, so the anatomy comes from there too — Chakra has no `tour`\n// counterpart yet (chakra-ui/chakra-ui#10410 is still open).\nimport { tourAnatomy } from '@ark-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tourSlotRecipe = defineSlotRecipe({\n  className: 'tour',\n  slots: [...tourAnatomy.keys(), 'actions', 'badge', 'header', 'media', 'titleGroup', 'titleRow'] as const,\n  base: {\n    backdrop: {\n      background: 'utilities/overlay',\n      zIndex: 'dialogOverlay',\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n      // No exit animation: Ark sets `hidden` on the backdrop and the content the moment the tour\n      // closes, so the node is `display: none` in the same frame and an exit animation can never\n      // paint — it only leaves the animation assigned, which flashes the card back in for a frame\n      // on the next render. Most visible on steps without a backdrop, where nothing masks it.\n      //\n      // And this is what keeps the dimming off the page once the tour is over. Ark's `Tour.Backdrop`\n      // writes `hidden={!tour.step?.backdrop}` *after* every other prop, Zag defaults `backdrop` to\n      // true on a tooltip step, and the step outlives the tour — so a backdrop still in the DOM when\n      // the tour closes is visible, whatever its `data-state` says. `unmountOnExit` is meant to take\n      // it out first, but that goes through the presence machine, which reads the computed\n      // `animation-name` in a `raf` and, on anything other than `none`, waits for an `animationend`\n      // that never arrives — leaving the page dimmed for good. Seen in production, on a page that\n      // re-renders while the tour closes. `display: none` needs nothing to happen at the right time.\n      _closed: {\n        display: 'none',\n      },\n    },\n    // Sits on the same layer as the backdrop and after it in DOM order, so the ring around the\n    // highlighted element paints over the dimmed page.\n    spotlight: {\n      borderRadius: '4',\n      outline: '2px solid',\n      outlineColor: 'interactive/highlight',\n      zIndex: 'dialogOverlay',\n    },\n    // Zag positions and layers this one inline, writing\n    // `z-index: calc(var(--tour-layer) + var(--tour-z-index))` and expecting us to supply the base.\n    // Without it the calc is invalid, the positioner falls back to `auto` — and since it opens its\n    // own stacking context (`isolation: isolate`), the card's own z-index can't reach past it, so\n    // the whole card ends up under the backdrop and swallows every click. The plain `zIndex` is the\n    // fallback for the day Zag stops writing that inline.\n    positioner: {\n      '--tour-z-index': 'zIndex.dialog',\n      zIndex: 'dialog',\n    },\n    content: {\n      background: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n      maxHeight: 'var(--available-height, 100dvh)',\n      maxWidth: '100%',\n      outline: 'none',\n      padding: '16',\n      position: 'relative',\n      width: rem(360),\n      zIndex: 'dialog',\n      // Fade only, no scale: Zag puts `--transform-origin` at the arrow tip, so a `scale-in` grows\n      // the card away from the highlight — a 360x300 card gains ~15 of height on the way in, which\n      // reads as the card repositioning itself rather than appearing.\n      _open: {\n        animationStyle: 'fade-in',\n        animationDuration: 'moderate',\n      },\n    },\n    header: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n    },\n    titleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    // flex-start, not center: the badge is as tall as one line of the title, so it lines up with\n    // the first line instead of floating beside the middle of a title that wrapped.\n    titleRow: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      gap: '8',\n    },\n    badge: {\n      flexShrink: 0,\n    },\n    title: {\n      color: 'text/primary',\n      textStyle: 'heading/h4',\n    },\n    progressText: {\n      color: 'text/secondary',\n      textStyle: 'body/sm/regular',\n    },\n    description: {\n      color: 'text/body',\n      minHeight: 0,\n      overflowY: 'auto',\n      textStyle: 'body/md/regular',\n    },\n    // These two margins stack on the content's own 8 gap, which is how the layout spec builds the\n    // spacing: 16 between the description and the visual, and 24 above the footer. The footer gets\n    // nothing below it, so the card's own 16 padding is the whole gap under the buttons.\n    media: {\n      marginBlockStart: '8',\n    },\n    control: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'space-between',\n      marginBlockStart: '16',\n    },\n    actions: {\n      display: 'flex',\n      gap: '8',\n      marginInlineStart: 'auto',\n    },\n    closeTrigger: {\n      flexShrink: 0,\n    },\n    arrow: {\n      // Popper draws the arrow as a square rotated 45°, so the visible triangle is `size * √2`\n      // wide and `size / √2` tall — 11.3 gives the design's 16×8.\n      '--arrow-size': rem(11.3),\n      '--arrow-background': 'colors.background/primary',\n      // Size and out-of-flow positioning are set here, not only by Popper's inline styles, because\n      // the component keeps this element out of Zag's `hidden` (see BitkitTour): Popper derives the\n      // card's distance from the anchor as `offset.mainAxis + arrowEl.clientHeight / 2`, read off\n      // the DOM. A `display: none` arrow measures 0, which puts the card 6 short of the design's 12\n      // on the first pass. `absolute` keeps it from adding its height to the card while it waits\n      // for Popper's own inline placement.\n      height: 'var(--arrow-size)',\n      position: 'absolute',\n      width: 'var(--arrow-size)',\n    },\n    arrowTip: {\n      borderColor: 'border/minimal',\n      borderInlineStartWidth: '1',\n      borderTopWidth: '1',\n    },\n  },\n});\n\nexport default tourSlotRecipe;\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAW;EAAS;EAAU;EAAS;EAAc;CAAU;CAC9F,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,QAAQ;GACR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GAcA,SAAS,EACP,SAAS,OACX;EACF;EAGA,WAAW;GACT,cAAc;GACd,SAAS;GACT,cAAc;GACd,QAAQ;EACV;EAOA,YAAY;GACV,kBAAkB;GAClB,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACL,WAAW;GACX,UAAU;GACV,SAAS;GACT,SAAS;GACT,UAAU;GACV,OAAO,IAAI,GAAG;GACd,QAAQ;GAIR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EAGA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,OAAO,EACL,YAAY,EACd;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;GACX,WAAW;GACX,WAAW;EACb;EAIA,OAAO,EACL,kBAAkB,IACpB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,kBAAkB;EACpB;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,mBAAmB;EACrB;EACA,cAAc,EACZ,YAAY,EACd;EACA,OAAO;GAGL,gBAAgB,IAAI,IAAI;GACxB,sBAAsB;GAOtB,QAAQ;GACR,UAAU;GACV,OAAO;EACT;EACA,UAAU;GACR,aAAa;GACb,wBAAwB;GACxB,gBAAgB;EAClB;CACF;AACF,CAAC"}

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

@@ -2112,7 +2112,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
+    table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
         variant: {
             default: {
                 root: {
@@ -2228,6 +2228,9 @@ declare const slotRecipes: {
                         borderBottomWidth: number;
                         borderTopStyle: "solid";
                         borderTopWidth: "1";
+                        height: "auto";
+                        paddingBlock: number;
+                        paddingInline: number;
                     };
                     '& > :where(label):only-child': {
                         display: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.383",
+  "version": "0.3.385",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",