@bitrise/bitkit-v2 0.3.482-beta.3116 → 0.3.482

package/dist/components/index.d.ts

@@ -100,6 +100,5 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
-export { default as BitkitUIHeader, type BitkitUIHeaderAccountProps, type BitkitUIHeaderBadge, type BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, uiHeaderHeightPx, } from './BitkitUIHeader/BitkitUIHeader';
 export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
 export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

@@ -385,11 +385,9 @@ import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/
 import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
-import { uiHeaderHeight, uiHeaderHeightPx } from "./theme/slot-recipes/UIHeader.recipe.js";
-import BitkitUIHeader_default from "./components/BitkitUIHeader/BitkitUIHeader.js";
 import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
 import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
 import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.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, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUIHeader_default as BitkitUIHeader, BitkitUISideNav_default as BitkitUISideNav, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiHeaderHeight, uiHeaderHeightPx, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };

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

@@ -0,0 +1,525 @@
+declare const recipes: {
+    badge: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xs: {
+                minWidth: "20";
+                paddingBlock: "2";
+            };
+            sm: {
+                minWidth: "24";
+                paddingBlock: "4";
+            };
+        };
+        colorVariant: {
+            neutral: {
+                color: "color/neutral/strong";
+                background: "color/neutral/subtle";
+            };
+            purple: {
+                color: "color/purple/strong";
+                background: "color/purple/subtle";
+            };
+            blue: {
+                color: "color/blue/strong";
+                background: "color/blue/subtle";
+            };
+            green: {
+                color: "color/green/strong";
+                background: "color/green/subtle";
+            };
+            yellow: {
+                color: "color/yellow/strong";
+                background: "color/yellow/subtle";
+            };
+            red: {
+                color: "color/red/strong";
+                background: "color/red/subtle";
+            };
+            orange: {
+                color: "color/orange/strong";
+                background: "color/orange/subtle";
+            };
+            turquoise: {
+                color: "color/turquoise/strong";
+                background: "color/turquoise/subtle";
+            };
+            'ai-gradient': {
+                color: "status/ai/text";
+                background: "gradient/ai/background/subtle";
+            };
+        };
+        variant: {
+            subtle: {};
+            bold: {
+                color: "text/on-color";
+            };
+        };
+    }>;
+    button: import('@chakra-ui/react').RecipeDefinition<{
+        variant: Record<NonNullable<"primary" | "secondary" | "tertiary" | "danger-primary" | "danger-secondary" | "danger-tertiary" | "ai-primary" | "ai-secondary" | "ai-tertiary">, import('@chakra-ui/react').SystemStyleObject>;
+        size: {
+            sm: {
+                minWidth: "32";
+                height: "32";
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "comp/button/sm";
+            };
+            md: {
+                minWidth: "40";
+                height: "40";
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "comp/button/md";
+            };
+            lg: {
+                minWidth: "48";
+                height: "48";
+                padding: `${number}rem`;
+                textStyle: "comp/button/lg";
+            };
+        };
+    }>;
+    closeButton: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xs: {
+                h: "24";
+                w: "24";
+            };
+            sm: {
+                h: "32";
+                w: "32";
+            };
+            md: {
+                h: "40";
+                w: "40";
+            };
+        };
+        colorVariant: {
+            neutral: {
+                color: "color/neutral/strong";
+                '&:hover': {
+                    backgroundColor: "color/neutral/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/neutral/moderate";
+                };
+            };
+            blue: {
+                color: "color/blue/strong";
+                '&:hover': {
+                    backgroundColor: "color/blue/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/blue/moderate";
+                };
+            };
+            green: {
+                color: "color/green/strong";
+                '&:hover': {
+                    backgroundColor: "color/green/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/green/moderate";
+                };
+            };
+            red: {
+                color: "color/red/strong";
+                '&:hover': {
+                    backgroundColor: "color/red/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/red/moderate";
+                };
+            };
+            yellow: {
+                color: "color/yellow/strong";
+                '&:hover': {
+                    backgroundColor: "color/yellow/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/yellow/moderate";
+                };
+            };
+            purple: {
+                color: "color/purple/strong";
+                '&:hover': {
+                    backgroundColor: "color/purple/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/purple/moderate";
+                };
+            };
+            indigo: {
+                color: "color/indigo/strong";
+                '&:hover': {
+                    backgroundColor: "color/indigo/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/indigo/moderate";
+                };
+            };
+            white: {
+                color: "icon/on-contrast";
+            };
+        };
+    }>;
+    controlButton: import('@chakra-ui/react').RecipeDefinition<{
+        isDanger: {
+            false: {
+                color: "button/control/fg";
+                _hover: {
+                    background: "button/control/bg-hover";
+                    color: "button/control/fg-hover";
+                    _active: {
+                        background: "button/control/bg-active";
+                        color: "button/control/fg-active";
+                    };
+                };
+                _active: {
+                    background: "button/control/bg-active";
+                    color: "button/control/fg-active";
+                };
+                _disabled: {
+                    color: "button/control/fg-disabled!";
+                };
+            };
+            true: {
+                color: "button/control-danger/fg";
+                _hover: {
+                    background: "button/control-danger/bg-hover";
+                    color: "button/control-danger/fg-hover";
+                    _active: {
+                        background: "button/control-danger/bg-active";
+                        color: "button/control-danger/fg-active";
+                    };
+                };
+                _active: {
+                    background: "button/control-danger/bg-active";
+                    color: "button/control-danger/fg-active";
+                };
+                _disabled: {
+                    color: "button/control-danger/fg-disabled!";
+                };
+            };
+        };
+        size: {
+            xxs: {
+                padding: "4";
+            };
+            xs: {
+                padding: "8";
+            };
+            sm: {
+                padding: "4";
+            };
+            md: {
+                padding: "8";
+            };
+            lg: {
+                padding: "12";
+            };
+        };
+    }>;
+    colorButton: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            sm: {
+                height: "32";
+                paddingInline: "12";
+                textStyle: "comp/button/sm";
+            };
+            md: {
+                height: "40";
+                paddingInline: "12";
+                textStyle: "comp/button/md";
+            };
+            lg: {
+                height: "48";
+                paddingInline: "16";
+                textStyle: "comp/button/lg";
+            };
+        };
+        colorVariant: {
+            neutral: {
+                color: "color/neutral/strong";
+                '&:hover': {
+                    backgroundColor: "color/neutral/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/neutral/moderate";
+                };
+            };
+            blue: {
+                color: "color/blue/strong";
+                '&:hover': {
+                    backgroundColor: "color/blue/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/blue/moderate";
+                };
+            };
+            green: {
+                color: "color/green/strong";
+                '&:hover': {
+                    backgroundColor: "color/green/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/green/moderate";
+                };
+            };
+            red: {
+                color: "color/red/strong";
+                '&:hover': {
+                    backgroundColor: "color/red/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/red/moderate";
+                };
+            };
+            yellow: {
+                color: "color/yellow/strong";
+                '&:hover': {
+                    backgroundColor: "color/yellow/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/yellow/moderate";
+                };
+            };
+            purple: {
+                color: "color/purple/strong";
+                '&:hover': {
+                    backgroundColor: "color/purple/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/purple/moderate";
+                };
+            };
+            orange: {
+                color: "color/orange/strong";
+                '&:hover': {
+                    backgroundColor: "color/orange/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/orange/moderate";
+                };
+            };
+            turquoise: {
+                color: "color/turquoise/strong";
+                '&:hover': {
+                    backgroundColor: "color/turquoise/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/turquoise/moderate";
+                };
+            };
+            indigo: {
+                color: "color/indigo/strong";
+                '&:hover': {
+                    backgroundColor: "color/indigo/subtle";
+                };
+                '&:active': {
+                    backgroundColor: "color/indigo/moderate";
+                };
+            };
+            white: {
+                color: "text/on-color";
+                borderColor: "border/inverse";
+                '&:hover': {
+                    backgroundColor: "color/white/15";
+                };
+                '&:active': {
+                    backgroundColor: "color/white/30";
+                };
+            };
+        };
+    }>;
+    definitionTooltip: import('@chakra-ui/react').RecipeDefinition<{
+        method: {
+            click: {
+                cursor: "pointer";
+            };
+            hover: {
+                cursor: "default";
+            };
+        };
+        textSize: {
+            lg: {
+                textStyle: "body/lg/regular";
+            };
+            md: {
+                textStyle: "body/md/regular";
+                textUnderlineOffset: "0.25em";
+            };
+            sm: {
+                textStyle: "body/sm/regular";
+                textUnderlineOffset: "0.25em";
+            };
+        };
+    }>;
+    icon: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+    input: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            md: {
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "body/md/regular";
+                '--input-height': `${number}rem`;
+            };
+            lg: {
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "body/lg/regular";
+                '--input-height': `${number}rem`;
+            };
+        };
+    }>;
+    inputAddon: import('@chakra-ui/react').RecipeDefinition<{
+        position: {
+            start: {
+                borderInlineStartWidth: "1";
+                borderStartStartRadius: "4";
+                borderEndStartRadius: "4";
+            };
+            end: {
+                borderInlineWidth: "1";
+                borderStartEndRadius: "4";
+                borderEndEndRadius: "4";
+            };
+        };
+        size: {
+            md: {
+                paddingInline: `${number}rem`;
+                textStyle: "body/md/regular";
+            };
+            lg: {
+                paddingInline: `${number}rem`;
+                textStyle: "body/lg/regular";
+            };
+        };
+    }>;
+    link: import('@chakra-ui/react').RecipeDefinition<{
+        colorVariant: {
+            purple: {
+                color: "text/link";
+                _hover: {
+                    color: "text/link-hover";
+                };
+            };
+        };
+    }>;
+    linkButton: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            lg: {
+                textStyle: "body/lg/regular";
+            };
+            md: {
+                textStyle: "body/md/regular";
+            };
+            sm: {
+                textStyle: "body/sm/regular";
+            };
+        };
+    }>;
+    selectableTag: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+    separator: import('@chakra-ui/react').RecipeDefinition<{
+        variant: {};
+        orientation: {
+            horizontal: {
+                borderTopWidth: "var(--separator-thickness)";
+                width: "100%";
+            };
+            vertical: {
+                borderInlineStartWidth: "var(--separator-thickness)";
+                minHeight: "20";
+            };
+        };
+        size: {
+            '1': {
+                '--separator-thickness': "1px";
+            };
+            '2': {
+                '--separator-thickness': "2px";
+            };
+        };
+    }>;
+    skeleton: import('@chakra-ui/react').RecipeDefinition<{
+        loading: {
+            true: {
+                position: "relative";
+                overflow: "hidden";
+                backgroundColor: "utilities/skeleton";
+                borderColor: "transparent";
+                backgroundClip: "padding-box";
+                cursor: "default";
+                color: "transparent";
+                pointerEvents: "none";
+                userSelect: "none";
+                flexShrink: "0";
+                '&::before, *': {
+                    visibility: "hidden";
+                };
+                '&::after': import('@chakra-ui/react').SystemStyleObject;
+            };
+            false: {
+                animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";
+            };
+        };
+    }>;
+    spinner: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            md: {
+                '--spinner-size': "sizes.12";
+            };
+            lg: {
+                '--spinner-size': "sizes.20";
+            };
+        };
+        variant: {
+            primary: {
+                '--spinner-color': "colors.icon/primary";
+            };
+            purple: {
+                '--spinner-color': "colors.color/purple/strong";
+            };
+            white: {
+                '--spinner-color': "colors.icon/on-color";
+            };
+            'on-disabled': {
+                '--spinner-color': "colors.icon/on-disabled";
+            };
+        };
+    }>;
+    textarea: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            md: {
+                '&[rows="1"]': {
+                    paddingBlock: `${number}rem`;
+                };
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "body/md/regular";
+                '--input-height': `${number}rem`;
+            };
+            lg: {
+                paddingInline: `${number}rem`;
+                paddingBlock: `${number}rem`;
+                textStyle: "body/lg/regular";
+                '--input-height': `${number}rem`;
+            };
+        };
+    }>;
+    toggleButton: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            sm: {
+                padding: "8";
+            };
+            md: {
+                padding: "12";
+            };
+            lg: {
+                padding: "12";
+            };
+        };
+    }>;
+};
+export default recipes;

package/dist/theme/recipes/index.js

@@ -15,7 +15,6 @@ import separatorRecipe from "./Separator.recipe.js";
 import skeletonRecipe from "./Skeleton.recipe.js";
 import spinnerRecipe from "./Spinner.recipe.js";
 import toggleButtonRecipe from "./ToggleButton.recipe.js";
-import uiHeaderButtonRecipe from "./UIHeaderButton.recipe.js";
 //#region lib/theme/recipes/index.ts
 var recipes = {
 	badge: badgeRecipe,
@@ -34,8 +33,7 @@ var recipes = {
 	skeleton: skeletonRecipe,
 	spinner: spinnerRecipe,
 	textarea: textareaRecipe,
-	toggleButton: toggleButtonRecipe,
-	uiHeaderButton: uiHeaderButtonRecipe
+	toggleButton: toggleButtonRecipe
 };
 //#endregion
 export { recipes as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\nimport uiHeaderButtonRecipe from './UIHeaderButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n  uiHeaderButton: uiHeaderButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;CACd,gBAAgB;AAClB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;AAChB"}

package/dist/theme/semantic-tokens/index.d.ts

@@ -1697,11 +1697,6 @@ declare const semanticTokens: {
                 base: string;
             };
         };
-        'sys/ui/sidenav/separator': {
-            value: {
-                base: string;
-            };
-        };
         'sys/ui/sidenav/item/bg': {
             value: {
                 base: string;
@@ -1742,6 +1737,11 @@ declare const semanticTokens: {
                 base: string;
             };
         };
+        'sys/ui/sidenav/separator': {
+            value: {
+                base: string;
+            };
+        };
         'sys/ui/sidenav/badge/green': {
             value: {
                 base: string;

package/dist/theme/semantic-tokens/semanticColors.d.ts

@@ -1696,11 +1696,6 @@ declare const semanticColors: {
             base: string;
         };
     };
-    'sys/ui/sidenav/separator': {
-        value: {
-            base: string;
-        };
-    };
     'sys/ui/sidenav/item/bg': {
         value: {
             base: string;
@@ -1741,6 +1736,11 @@ declare const semanticColors: {
             base: string;
         };
     };
+    'sys/ui/sidenav/separator': {
+        value: {
+            base: string;
+        };
+    };
     'sys/ui/sidenav/badge/green': {
         value: {
             base: string;

package/dist/theme/semantic-tokens/semanticColors.js

@@ -598,7 +598,6 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/header/badge/red": { value: { base: "{colors.red.60}" } },
 	"sys/ui/header/badge/indigo": { value: { base: "{colors.indigo.90}" } },
 	"sys/ui/sidenav/bg": { value: { base: "{colors.purple.10}" } },
-	"sys/ui/sidenav/separator": { value: { base: "{colors.color/white/20}" } },
 	"sys/ui/sidenav/item/bg": { value: { base: "{colors.color/transparent}" } },
 	"sys/ui/sidenav/item/bg-hover": { value: { base: "{colors.color/white/10}" } },
 	"sys/ui/sidenav/item/bg-active": { value: { base: "{colors.color/white/20}" } },
@@ -607,6 +606,7 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/sidenav/item/fg-hover": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/fg-active": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/indicator": { value: { base: "{colors.color/white/80}" } },
+	"sys/ui/sidenav/separator": { value: { base: "{colors.white.20}" } },
 	"sys/ui/sidenav/badge/green": { value: { base: "{colors.green.60}" } },
 	"sys/ui/sidenav/badge/red": { value: { base: "{colors.red.60}" } },
 	"sys/ui/sidenav/badge/neutral": { value: { base: "{colors.neutral.40}" } },