@bitrise/bitkit-v2 0.3.359-beta.2314 → 0.3.359

package/dist/components/BitkitRadio/BitkitRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup, useRadioGroupStyles } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n> &\n  DataAttr;\n\ntype BitkitRadioBaseProps = {\n  badge?: 'off' | 'on';\n  inputProps?: RadioInputProps;\n  state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\n/**\n * A radio has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a radio in a layout with no room for one, like a table row\n * selector — an `aria-label`, which is applied to the hidden input instead of being rendered.\n */\nexport type BitkitRadioProps<T extends NonNullable<ReactNode> = NonNullable<ReactNode>> = BitkitRadioBaseProps &\n  (\n    | {\n        helperText?: ReactNode;\n        /**\n         * The visible label, which is where the radio gets its accessible name from. It has to be\n         * non-empty — an empty string is a compile error. When the layout has no room for a visible\n         * label, pass `aria-label` instead of an empty `labelText`.\n         */\n        labelText: T extends '' ? never : T;\n      }\n    | { 'aria-label': string; helperText?: never; labelText?: null }\n  );\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n  const { 'aria-label': ariaLabel, badge, helperText, inputProps, labelText, state, ...rest } = props;\n  const styles = useRadioGroupStyles();\n  const hasHelperText = !isEmptyNode(helperText);\n  const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n  // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n  // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n  // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n  // recipe's _disabled: { cursor: 'not-allowed' } sits.\n  return (\n    <RadioGroup.Item\n      cursor={state === 'skeleton' ? 'default' : undefined}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <RadioGroup.ItemHiddenInput aria-label={ariaLabel} ref={ref} {...inputProps} />\n      <Skeleton borderRadius=\"50%\" loading={state === 'skeleton'}>\n        <RadioGroup.ItemIndicator />\n      </Skeleton>\n      {!!badge && (\n        <Skeleton loading={state === 'skeleton'}>\n          <BitkitBadge colorVariant={badge === 'on' ? 'green' : 'neutral'} css={styles.badge}>\n            {badge}\n          </BitkitBadge>\n        </Skeleton>\n      )}\n      {hasLabel && (\n        <Skeleton loading={state === 'skeleton'}>\n          <RadioGroup.ItemText as=\"div\">\n            {labelText}\n            {hasHelperText && (\n              <Text color={state === 'disabled' ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n                {helperText}\n              </Text>\n            )}\n          </RadioGroup.ItemText>\n        </Skeleton>\n      )}\n    </RadioGroup.Item>\n  );\n});\n\nBitkitRadio.displayName = 'BitkitRadio';\n\n// The generic is what makes `labelText=\"\"` a compile error: `Exclude` cannot narrow `string` to\n// \"non-empty string\", but a conditional type on an inferred literal can. The cast carries the\n// generic through the call site, which `forwardRef`'s own signature would erase.\nexport default BitkitRadio as <T extends NonNullable<ReactNode>>(\n  props: BitkitRadioProps<T> & { ref?: Ref<HTMLInputElement> },\n) => ReactElement;\n"],"mappings":";;;;;;;;AA8CA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,cAAc,WAAW,OAAO,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CAC9F,MAAM,SAAS,oBAAoB;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,WAAW,CAAC,YAAY,SAAS,KAAK;CAM5C,OACE,qBAAC,WAAW,MAAZ;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;EAHN,UAAA;GAKE,oBAAC,WAAW,iBAAZ;IAA4B,cAAY;IAAgB;IAAK,GAAI;GAAa,CAAA;GAC9E,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;IAC9C,UAAA,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,KAAK,OAAO;KAC1E,UAAA;IACU,CAAA;GACL,CAAA;GAEX,YACC,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,WAAW,UAAZ;KAAqB,IAAG;KAAxB,UAAA,CACG,WACA,iBACC,oBAAC,MAAD;MAAM,OAAO,UAAU,aAAa,kBAAkB;MAAe,WAAU;MAC5E,UAAA;KACG,CAAA,CAEW;;GACb,CAAA;EAEG;;AAErB,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup, useRadioGroupStyles } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n> &\n  DataAttr;\n\nexport type BitkitRadioProps = {\n  badge?: 'off' | 'on';\n  helperText?: ReactNode;\n  inputProps?: RadioInputProps;\n  labelText: ReactNode;\n  state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n  const { badge, helperText, inputProps, labelText, state, ...rest } = props;\n  const styles = useRadioGroupStyles();\n\n  // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n  // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n  // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n  // recipe's _disabled: { cursor: 'not-allowed' } sits.\n  return (\n    <RadioGroup.Item\n      cursor={state === 'skeleton' ? 'default' : undefined}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} />\n      <Skeleton borderRadius=\"50%\" loading={state === 'skeleton'}>\n        <RadioGroup.ItemIndicator />\n      </Skeleton>\n      {!!badge && (\n        <Skeleton loading={state === 'skeleton'}>\n          <BitkitBadge colorVariant={badge === 'on' ? 'green' : 'neutral'} css={styles.badge}>\n            {badge}\n          </BitkitBadge>\n        </Skeleton>\n      )}\n      <Skeleton loading={state === 'skeleton'}>\n        <RadioGroup.ItemText as=\"div\">\n          {labelText}\n          {!!helperText && (\n            <Text color={state === 'disabled' ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n              {helperText}\n            </Text>\n          )}\n        </RadioGroup.ItemText>\n      </Skeleton>\n    </RadioGroup.Item>\n  );\n});\n\nBitkitRadio.displayName = 'BitkitRadio';\n\nexport default BitkitRadio;\n"],"mappings":";;;;;;;AA4BA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACrE,MAAM,SAAS,oBAAoB;CAMnC,OACE,qBAAC,WAAW,MAAZ;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;EAHN,UAAA;GAKE,oBAAC,WAAW,iBAAZ;IAAiC;IAAK,GAAI;GAAa,CAAA;GACvD,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;IAC9C,UAAA,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,KAAK,OAAO;KAC1E,UAAA;IACU,CAAA;GACL,CAAA;GAEZ,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,WAAW,UAAZ;KAAqB,IAAG;KAAxB,UAAA,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAO,UAAU,aAAa,kBAAkB;MAAe,WAAU;MAC5E,UAAA;KACG,CAAA,CAEW;;GACb,CAAA;EACK;;AAErB,CAAC;AAED,YAAY,cAAc"}

package/dist/components/BitkitRadioItem/BitkitRadioItem.d.ts

@@ -0,0 +1,30 @@
+import { RadioGroup } from '@chakra-ui/react/radio-group';
+import { DataAttr } from '@chakra-ui/react/styled-system';
+import { InputHTMLAttributes } from 'react';
+/**
+ * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state
+ * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —
+ * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to
+ * things like `data-testid`.
+ */
+type RadioInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'> & DataAttr;
+export interface BitkitRadioItemProps extends Omit<RadioGroup.ItemProps, 'children' | 'disabled'> {
+    /** Props forwarded to the underlying radio `<input>` (e.g. `data-testid`). */
+    inputProps?: RadioInputProps;
+    /**
+     * Accessible name for the radio. Not rendered — this is an icon-only control — so it's required to
+     * keep the radio from ending up with an empty accessible name.
+     */
+    label: string;
+    state?: 'disabled';
+}
+/**
+ * An icon-only radio: the styled indicator without any label chrome. Use it to place radios inside a
+ * custom layout — table cells, a shared CSS grid, a virtualized list — where BitkitRadioGroup's
+ * fieldset wrapper doesn't fit. Compose it under a Chakra `RadioGroup.Root` (kept layout-neutral with
+ * `css` / `asChild`): the grouping semantics come from that root and the Bitkit visual from the
+ * theme, while `label` supplies the required accessible name. Reach for BitkitRadio instead whenever
+ * a visible label fits.
+ */
+declare const BitkitRadioItem: import('react').ForwardRefExoticComponent<BitkitRadioItemProps & import('react').RefAttributes<HTMLInputElement>>;
+export default BitkitRadioItem;

package/dist/components/BitkitRadioItem/BitkitRadioItem.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup } from "@chakra-ui/react/radio-group";
+//#region lib/components/BitkitRadioItem/BitkitRadioItem.tsx
+/**
+* An icon-only radio: the styled indicator without any label chrome. Use it to place radios inside a
+* custom layout — table cells, a shared CSS grid, a virtualized list — where BitkitRadioGroup's
+* fieldset wrapper doesn't fit. Compose it under a Chakra `RadioGroup.Root` (kept layout-neutral with
+* `css` / `asChild`): the grouping semantics come from that root and the Bitkit visual from the
+* theme, while `label` supplies the required accessible name. Reach for BitkitRadio instead whenever
+* a visible label fits.
+*/
+var BitkitRadioItem = forwardRef((props, ref) => {
+	const { inputProps, label, state, ...rest } = props;
+	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
+		disabled: state === "disabled",
+		...rest,
+		children: [/* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {
+			ref,
+			...inputProps,
+			"aria-label": label
+		}), /* @__PURE__ */ jsx(RadioGroup.ItemIndicator, {})]
+	});
+});
+BitkitRadioItem.displayName = "BitkitRadioItem";
+//#endregion
+export { BitkitRadioItem as default };
+
+//# sourceMappingURL=BitkitRadioItem.js.map

package/dist/components/BitkitRadioItem/BitkitRadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitRadioItem.js","names":[],"sources":["../../../lib/components/BitkitRadioItem/BitkitRadioItem.tsx"],"sourcesContent":["import { RadioGroup } from '@chakra-ui/react/radio-group';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type InputHTMLAttributes } from 'react';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n> &\n  DataAttr;\n\nexport interface BitkitRadioItemProps extends Omit<RadioGroup.ItemProps, 'children' | 'disabled'> {\n  /** Props forwarded to the underlying radio `<input>` (e.g. `data-testid`). */\n  inputProps?: RadioInputProps;\n  /**\n   * Accessible name for the radio. Not rendered — this is an icon-only control — so it's required to\n   * keep the radio from ending up with an empty accessible name.\n   */\n  label: string;\n  state?: 'disabled';\n}\n\n/**\n * An icon-only radio: the styled indicator without any label chrome. Use it to place radios inside a\n * custom layout — table cells, a shared CSS grid, a virtualized list — where BitkitRadioGroup's\n * fieldset wrapper doesn't fit. Compose it under a Chakra `RadioGroup.Root` (kept layout-neutral with\n * `css` / `asChild`): the grouping semantics come from that root and the Bitkit visual from the\n * theme, while `label` supplies the required accessible name. Reach for BitkitRadio instead whenever\n * a visible label fits.\n */\nconst BitkitRadioItem = forwardRef<HTMLInputElement, BitkitRadioItemProps>((props, ref) => {\n  const { inputProps, label, state, ...rest } = props;\n\n  return (\n    <RadioGroup.Item disabled={state === 'disabled'} {...rest}>\n      <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} aria-label={label} />\n      <RadioGroup.ItemIndicator />\n    </RadioGroup.Item>\n  );\n});\n\nBitkitRadioItem.displayName = 'BitkitRadioItem';\n\nexport default BitkitRadioItem;\n"],"mappings":";;;;;;;;;;;;AAmCA,IAAM,kBAAkB,YAAoD,OAAO,QAAQ;CACzF,MAAM,EAAE,YAAY,OAAO,OAAO,GAAG,SAAS;CAE9C,OACE,qBAAC,WAAW,MAAZ;EAAiB,UAAU,UAAU;EAAY,GAAI;EAArD,UAAA,CACE,oBAAC,WAAW,iBAAZ;GAAiC;GAAK,GAAI;GAAY,cAAY;EAAQ,CAAA,GAC1E,oBAAC,WAAW,eAAZ,CAA2B,CAAA,CACZ;;AAErB,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/index.d.ts

@@ -49,6 +49,7 @@ export { default as BitkitNumberInput, type BitkitNumberInputProps } from './Bit
 export { default as BitkitOverflowContent, type BitkitOverflowContentProps, } from './BitkitOverflowContent/BitkitOverflowContent';
 export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } from './BitkitOverflowTooltip/BitkitOverflowTooltip';
 export { default as BitkitPageFooter, type BitkitPageFooterItemProps, type BitkitPageFooterProps, } from './BitkitPageFooter/BitkitPageFooter';
+export { default as BitkitPageSidebar, type BitkitPageSidebarBodyProps, type BitkitPageSidebarDividerProps, type BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
 export { default as BitkitPagination, type BitkitPaginationLabels, type BitkitPaginationProps, } from './BitkitPagination/BitkitPagination';
 export { default as BitkitPaginationLoadMore, type BitkitPaginationLoadMoreProps, } from './BitkitPaginationLoadMore/BitkitPaginationLoadMore';
 export { default as BitkitPopover, type BitkitPopoverProps } from './BitkitPopover/BitkitPopover';
@@ -56,6 +57,7 @@ export { default as BitkitProgressBar, type BitkitProgressBarProps, type BitkitP
 export { default as BitkitPromoBanner, type BitkitPromoBannerProps } from './BitkitPromoBanner/BitkitPromoBanner';
 export { default as BitkitRadio, type BitkitRadioProps } from './BitkitRadio/BitkitRadio';
 export { default as BitkitRadioGroup, type BitkitRadioGroupProps } from './BitkitRadioGroup/BitkitRadioGroup';
+export { default as BitkitRadioItem, type BitkitRadioItemProps } from './BitkitRadioItem/BitkitRadioItem';
 export { default as BitkitRibbon, type BitkitRibbonProps } from './BitkitRibbon/BitkitRibbon';
 export { default as BitkitSearchInput, type BitkitSearchInputProps } from './BitkitSearchInput/BitkitSearchInput';
 export { default as BitkitSectionHeading, type BitkitSectionHeadingProps, } from './BitkitSectionHeading/BitkitSectionHeading';
@@ -65,7 +67,6 @@ export { default as BitkitSelectableTag, type BitkitSelectableTagItemProps, type
 export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
 export { default as BitkitSelectMenuAction, type BitkitSelectMenuActionProps, } from './BitkitSelectMenu/BitkitSelectMenuAction';
 export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
-export { default as BitkitSidebar, type BitkitSidebarFooterProps, type BitkitSidebarGroupHeadingProps, type BitkitSidebarItemProps, type BitkitSidebarProjectProps, type BitkitSidebarProps, type BitkitSidebarTitleProps, } from './BitkitSidebar/BitkitSidebar';
 export { default as BitkitSkeletonGroup, type BitkitSkeletonGroupProps, } from './BitkitSkeletonGroup/BitkitSkeletonGroup';
 export { default as BitkitSpinner, type BitkitSpinnerProps } from './BitkitSpinner/BitkitSpinner';
 export { default as BitkitSplitButton, type BitkitSplitButtonProps } from './BitkitSplitButton/BitkitSplitButton';

package/dist/main.js

@@ -339,6 +339,7 @@ import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.
 import BitkitOverflowContent from "./components/BitkitOverflowContent/BitkitOverflowContent.js";
 import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOverflowTooltip.js";
 import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
+import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
 import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
 import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
 import BitkitPopover from "./components/BitkitPopover/BitkitPopover.js";
@@ -346,6 +347,7 @@ import BitkitProgressBar from "./components/BitkitProgressBar/BitkitProgressBar.
 import BitkitPromoBanner from "./components/BitkitPromoBanner/BitkitPromoBanner.js";
 import BitkitRadio from "./components/BitkitRadio/BitkitRadio.js";
 import BitkitRadioGroup from "./components/BitkitRadioGroup/BitkitRadioGroup.js";
+import BitkitRadioItem from "./components/BitkitRadioItem/BitkitRadioItem.js";
 import BitkitRibbon from "./components/BitkitRibbon/BitkitRibbon.js";
 import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
 import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
@@ -354,7 +356,6 @@ import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/
 import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
 import BitkitSelectableTag_default from "./components/BitkitSelectableTag/BitkitSelectableTag.js";
 import BitkitSettingsCard_default from "./components/BitkitSettingsCard/BitkitSettingsCard.js";
-import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
 import BitkitSkeletonGroup from "./components/BitkitSkeletonGroup/BitkitSkeletonGroup.js";
 import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
 import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
@@ -373,4 +374,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, BitkitActionBar, 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, BitkitExpandableRow, BitkitField, BitkitFileInput, 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, 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, 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, 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, BitkitActionBar, 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, BitkitExpandableRow, BitkitField, BitkitFileInput, 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, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRadioItem, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, 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/GroupHeading.recipe.js

@@ -34,7 +34,10 @@ var groupHeadingRecipe = defineSlotRecipe({
 			flexShrink: 0,
 			textStyle: "heading/h6"
 		},
-		separator: { flex: 1 }
+		separator: {
+			borderColor: "border/minimal",
+			flex: 1
+		}
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n  className: 'group-heading',\n  slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      overflow: 'clip',\n      paddingBlockEnd: '4',\n      paddingBlockStart: '8',\n      paddingInlineEnd: '8',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '4',\n    },\n    icon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    label: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: 'heading/h6',\n    },\n    separator: {\n      flex: 1,\n    },\n  },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW,EACT,MAAM,EACR;CACF;AACF,CAAC"}
+{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n  className: 'group-heading',\n  slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      overflow: 'clip',\n      paddingBlockEnd: '4',\n      paddingBlockStart: '8',\n      paddingInlineEnd: '8',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '4',\n    },\n    icon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    label: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: 'heading/h6',\n    },\n    separator: {\n      // Lighter than the shared `Separator` recipe's `border/regular`, and that difference is in the\n      // design: Figma's general Separator component (`62:701`) is `border/regular` #dfdae1, while the\n      // Page sidebar's group header (`20014:6508`) draws its rule in `border/minimal` #efebef. A rule\n      // that trails a label is quieter than one that stands alone.\n      //\n      // It sits here rather than in the sidebar so every group heading matches — the select menu's\n      // group labels included. They render this same component, so a heading looks the same wherever\n      // it appears instead of the sidebar owning a private variant.\n      borderColor: 'border/minimal',\n      flex: 1,\n    },\n  },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW;GAST,aAAa;GACb,MAAM;EACR;CACF;AACF,CAAC"}

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

@@ -0,0 +1,82 @@
+declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
+    hasBack: {
+        true: {
+            title: {
+                paddingBlockEnd: "8";
+                paddingInlineStart: "16";
+            };
+            titleBlock: {
+                gap: "4";
+                paddingBlock: "4";
+            };
+        };
+        false: {
+            title: {
+                paddingBlockEnd: "16";
+                paddingInlineStart: "24";
+            };
+            titleBlock: {
+                paddingBlock: "6";
+            };
+        };
+    };
+    isDisabled: {
+        true: {
+            item: {
+                cursor: "not-allowed";
+                _hover: {
+                    background: "transparent";
+                    _active: {
+                        background: "transparent";
+                    };
+                };
+                _active: {
+                    background: "transparent";
+                };
+            };
+            itemIcon: {
+                color: "icon/disabled";
+                _groupHover: {
+                    color: "icon/disabled";
+                };
+            };
+            itemLabel: {
+                color: "text/disabled";
+            };
+            suffixIcon: {
+                display: "none";
+                _groupHover: {
+                    display: "none";
+                };
+            };
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            item: {
+                background: "background/selected";
+                _hover: {
+                    background: "background/selected-hover";
+                    _active: {
+                        background: "background/selected-active";
+                    };
+                };
+                _active: {
+                    background: "background/selected-active";
+                };
+            };
+            itemIcon: {
+                color: "icon/interactive";
+                _groupHover: {
+                    color: "icon/interactive-hover";
+                };
+            };
+            itemLabel: {
+                textStyle: "body/md/semibold";
+            };
+        };
+        false: {};
+    };
+}>;
+export default pageSidebarSlotRecipe;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst pageSidebarSlotRecipe = defineSlotRecipe({\n  className: 'page-sidebar',\n  slots: [\n    'body',\n    'contentBlock',\n    'divider',\n    'footer',\n    'item',\n    'itemIcon',\n    'itemLabel',\n    'project',\n    'projectLabel',\n    'projectValue',\n    'projectValueWrapper',\n    'root',\n    'selectionMarker',\n    'suffixIcon',\n    'title',\n    'titleBlock',\n    'titleText',\n  ],\n  base: {\n    root: {\n      background: 'background/primary',\n      // Longhands, not the `borderInlineEnd: '1px solid'` shorthand: that shorthand carries no\n      // colour, so it resets it to `currentColor` if it lands after `borderColor` — which is what\n      // sorting these keys alphabetically did, turning the rule dark.\n      borderInlineEndColor: 'border/regular',\n      borderInlineEndStyle: 'solid',\n      borderInlineEndWidth: '1',\n      display: 'flex',\n      flexDirection: 'column',\n      // `minHeight` rather than `height`: on a short navigation the sidebar still reaches the\n      // bottom of the viewport, but a long one grows past it and scrolls with the page as one\n      // block — the footer is part of that scroll, not pinned to the bottom.\n      minHeight: '100dvh',\n      maxWidth: rem(320),\n      minWidth: rem(240),\n      paddingBlockStart: '16',\n      width: rem(240),\n    },\n    body: {\n      display: 'flex',\n      // Absorbs the slack so the footer sits at the bottom when the navigation is short, and\n      // simply grows when it is long.\n      flex: 1,\n      flexDirection: 'column',\n      // The minimum gap between the navigation and the footer block. It is a margin so it stays\n      // outside the items' own box, and `flex: 1` above means any extra space lands in the body\n      // rather than widening this gap.\n      marginBlockEnd: '16',\n      width: 'full',\n    },\n    title: {\n      alignItems: 'center',\n      color: 'text/primary',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'clip',\n      paddingInlineEnd: '32',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      minWidth: 0,\n    },\n    titleText: {\n      textStyle: 'heading/h3',\n      whiteSpace: 'nowrap',\n    },\n    item: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      focusVisibleRing: 'inside',\n      gap: '12',\n      overflow: 'clip',\n      paddingBlock: '8',\n      paddingInline: '24',\n      position: 'relative',\n      width: 'full',\n      _hover: {\n        background: 'background/secondary',\n        _active: {\n          background: 'background/tertiary',\n        },\n      },\n      _active: {\n        background: 'background/tertiary',\n      },\n      // `focusVisibleRing: 'inside'` still resolves to `outline-offset: 0`, which draws the ring\n      // just outside the border box. The item spans the sidebar's full width, so that would bleed\n      // past the sidebar's edges — pull the whole ring inside the item instead.\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    contentBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      gap: '12',\n      minWidth: 0,\n      paddingBlock: '2',\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      flexShrink: 0,\n      _groupHover: {\n        color: 'icon/primary',\n      },\n    },\n    itemLabel: {\n      color: 'text/primary',\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textAlign: 'start',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/md/regular',\n      whiteSpace: 'nowrap',\n    },\n    suffixIcon: {\n      color: 'icon/tertiary',\n      display: 'none',\n      flexShrink: 0,\n      _groupHover: {\n        display: 'block',\n      },\n    },\n    selectionMarker: {\n      background: 'border/selected',\n      borderEndStartRadius: '2',\n      borderStartStartRadius: '2',\n      height: 'full',\n      insetBlockStart: 0,\n      insetInlineEnd: 0,\n      position: 'absolute',\n      width: '2',\n    },\n    footer: {\n      borderBlockStart: '1px solid',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      flexDirection: 'column',\n      // The body above absorbs the free space, so the footer needs no positioning of its own —\n      // it just must not be squashed by a long list.\n      flexShrink: 0,\n      paddingBlock: '8',\n    },\n    project: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n      justifyContent: 'center',\n      overflow: 'clip',\n      paddingBlock: '8',\n      paddingInlineEnd: '32',\n      paddingInlineStart: '24',\n      whiteSpace: 'nowrap',\n    },\n    projectLabel: {\n      color: 'text/tertiary',\n      textStyle: 'heading/h6',\n    },\n    projectValue: {\n      color: 'text/body',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      textStyle: 'body/lg/semibold',\n    },\n    projectValueWrapper: {\n      display: 'flex',\n      minWidth: 0,\n    },\n    divider: {\n      // Both of the sidebar's separator roles are `border/minimal` in Figma — the group header\n      // (`20014:6508`) and this plain rule (`20014:6511`) — against `border/regular` for the general\n      // Separator component. The override is per-slot for that reason, not to limit blast radius.\n      borderColor: 'border/minimal',\n      marginBlock: '16',\n      marginInline: '24',\n      width: 'auto',\n    },\n  },\n  variants: {\n    hasBack: {\n      // Redlines on the sub view (Figma `- page sidebar - interactions`): the title block sits at\n      // x/y 16, is 40 tall, and the 32px back button sits at y 20 — i.e. the 4px padding belongs to\n      // the block wrapping button + text, not to the text. Header totals 16 + 40 + 8 = 64.\n      true: {\n        title: {\n          paddingBlockEnd: '8',\n          paddingInlineStart: '16',\n        },\n        titleBlock: {\n          gap: '4',\n          paddingBlock: '4',\n        },\n      },\n      // Main view: no button, so the text alone is the block — 6 + 28 + 6 = 40, header 16+40+16 = 72.\n      false: {\n        title: {\n          paddingBlockEnd: '16',\n          paddingInlineStart: '24',\n        },\n        titleBlock: {\n          paddingBlock: '6',\n        },\n      },\n    },\n    isDisabled: {\n      true: {\n        item: {\n          cursor: 'not-allowed',\n          _hover: {\n            background: 'transparent',\n            _active: {\n              background: 'transparent',\n            },\n          },\n          _active: {\n            background: 'transparent',\n          },\n        },\n        itemIcon: {\n          color: 'icon/disabled',\n          _groupHover: {\n            color: 'icon/disabled',\n          },\n        },\n        itemLabel: {\n          color: 'text/disabled',\n        },\n        suffixIcon: {\n          display: 'none',\n          _groupHover: {\n            display: 'none',\n          },\n        },\n      },\n      false: {},\n    },\n    selected: {\n      true: {\n        item: {\n          background: 'background/selected',\n          _hover: {\n            background: 'background/selected-hover',\n            _active: {\n              background: 'background/selected-active',\n            },\n          },\n          _active: {\n            background: 'background/selected-active',\n          },\n        },\n        itemIcon: {\n          color: 'icon/interactive',\n          _groupHover: {\n            color: 'icon/interactive-hover',\n          },\n        },\n        itemLabel: {\n          textStyle: 'body/md/semibold',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    hasBack: false,\n    isDisabled: false,\n    selected: false,\n  },\n});\n\nexport default pageSidebarSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,wBAAwB,iBAAiB;CAC7C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GAIZ,sBAAsB;GACtB,sBAAsB;GACtB,sBAAsB;GACtB,SAAS;GACT,eAAe;GAIf,WAAW;GACX,UAAU,IAAI,GAAG;GACjB,UAAU,IAAI,GAAG;GACjB,mBAAmB;GACnB,OAAO,IAAI,GAAG;EAChB;EACA,MAAM;GACJ,SAAS;GAGT,MAAM;GACN,eAAe;GAIf,gBAAgB;GAChB,OAAO;EACT;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,UAAU;GACV,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,UAAU;EACZ;EACA,WAAW;GACT,WAAW;GACX,YAAY;EACd;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,kBAAkB;GAClB,KAAK;GACL,UAAU;GACV,cAAc;GACd,eAAe;GACf,UAAU;GACV,OAAO;GACP,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,sBACd;GACF;GACA,SAAS,EACP,YAAY,sBACd;GAIA,eAAe,EACb,eAAe,qCACjB;EACF;EACA,cAAc;GACZ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GACV,cAAc;EAChB;EACA,UAAU;GACR,OAAO;GACP,YAAY;GACZ,aAAa,EACX,OAAO,eACT;EACF;EACA,WAAW;GACT,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,WAAW;GACX,cAAc;GACd,WAAW;GACX,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,aAAa,EACX,SAAS,QACX;EACF;EACA,iBAAiB;GACf,YAAY;GACZ,sBAAsB;GACtB,wBAAwB;GACxB,QAAQ;GACR,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;GACV,OAAO;EACT;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,eAAe;GAGf,YAAY;GACZ,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,gBAAgB;GAChB,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,YAAY;EACd;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,UAAU;GACV,cAAc;GACd,WAAW;EACb;EACA,qBAAqB;GACnB,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GAIP,aAAa;GACb,aAAa;GACb,cAAc;GACd,OAAO;EACT;CACF;CACA,UAAU;EACR,SAAS;GAIP,MAAM;IACJ,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY;KACV,KAAK;KACL,cAAc;IAChB;GACF;GAEA,OAAO;IACL,OAAO;KACL,iBAAiB;KACjB,oBAAoB;IACtB;IACA,YAAY,EACV,cAAc,IAChB;GACF;EACF;EACA,YAAY;GACV,MAAM;IACJ,MAAM;KACJ,QAAQ;KACR,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY,cACd;KACF;KACA,SAAS,EACP,YAAY,cACd;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,gBACT;IACF;IACA,WAAW,EACT,OAAO,gBACT;IACA,YAAY;KACV,SAAS;KACT,aAAa,EACX,SAAS,OACX;IACF;GACF;GACA,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IACJ,MAAM;KACJ,YAAY;KACZ,QAAQ;MACN,YAAY;MACZ,SAAS,EACP,YAAY,6BACd;KACF;KACA,SAAS,EACP,YAAY,6BACd;IACF;IACA,UAAU;KACR,OAAO;KACP,aAAa,EACX,OAAO,yBACT;IACF;IACA,WAAW,EACT,WAAW,mBACb;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,UAAU;CACZ;AACF,CAAC"}