@bitrise/bitkit-v2 0.3.477-beta.3026 → 0.3.477

package/dist/components/BitkitSteps/BitkitSteps.d.ts

@@ -11,6 +11,8 @@ export interface BitkitStepsProps extends Omit<StepsRootProps, 'children' | 'cou
      * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.
      */
     orientation?: 'horizontal' | 'vertical';
+    /** The step whose label is emphasized; defaults to `step`. */
+    selectedStep?: number;
     step?: number;
 }
 export interface BitkitStepsItemProps {

package/dist/components/BitkitSteps/BitkitSteps.js

@@ -41,9 +41,10 @@ var renderLabel = (label, action) => {
 	});
 };
 var BitkitSteps = forwardRef((props, ref) => {
-	const { children, orientation = "horizontal", step: stepProp, ...rest } = props;
+	const { children, orientation = "horizontal", selectedStep, step: stepProp, ...rest } = props;
 	const stepCardCtx = useStepCardContext();
 	const step = stepProp ?? stepCardCtx?.step ?? 0;
+	const selected = selectedStep ?? step;
 	const count = Children.count(children);
 	return /* @__PURE__ */ jsx(Steps.Root, {
 		ref,
@@ -53,17 +54,20 @@ var BitkitSteps = forwardRef((props, ref) => {
 		orientation,
 		step,
 		children: /* @__PURE__ */ jsx(Steps.List, { children: Children.map(children, (child, index) => {
-			if (isValidElement(child)) return cloneElement(child, { _index: index });
+			if (isValidElement(child)) return cloneElement(child, {
+				_index: index,
+				_selected: index === selected
+			});
 			return child;
 		}) })
 	});
 });
 BitkitSteps.displayName = "BitkitSteps";
 var BitkitStepsItem = forwardRef((props, ref) => {
-	const { _index = 0, action, helperText, label, state } = props;
+	const { _index = 0, _selected = false, action, helperText, label, state } = props;
 	const styles = useStepsStyles();
 	const status = getEffectiveStatus(state, _index, useStepsContext().value);
-	const resolvedAction = status === "completed" ? action : void 0;
+	const resolvedAction = (status === "completed" || status === "inProgress") && !_selected ? action : void 0;
 	const statusAttr = { "data-step-status": status };
 	return /* @__PURE__ */ jsxs(Steps.Item, {
 		...statusAttr,
@@ -78,6 +82,7 @@ var BitkitStepsItem = forwardRef((props, ref) => {
 				css: styles.trigger,
 				children: [/* @__PURE__ */ jsx(Steps.Title, {
 					...statusAttr,
+					"data-selected": _selected || void 0,
 					children: renderLabel(label, resolvedAction)
 				}), helperText && /* @__PURE__ */ jsx(Steps.Description, {
 					...statusAttr,

package/dist/components/BitkitSteps/BitkitSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n  itemState: BitkitStepsItemState | undefined,\n  index: number,\n  step: number,\n): EffectiveStatus => {\n  if (itemState === 'disabled') return 'disabled';\n  if (itemState === 'invalid') return 'invalid';\n  if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n  if (index < step) return 'completed';\n  if (index === step) return 'inProgress';\n  return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n  if (status === 'completed') return <IconCheck size=\"16\" />;\n  if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n  if (status === 'invalid') return '!';\n  return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n  if (!action) return label;\n\n  // Links don't look like links at rest — only the underline + purple color on hover reveals\n  // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n  // already adds the underline on hover; we only need to swap the color.\n  if (action.href) {\n    return (\n      <Link\n        _hover={{ color: 'text/link' }}\n        href={action.href}\n        onClick={action.onClick}\n        rel={action.isExternal ? 'noopener noreferrer' : undefined}\n        target={action.isExternal ? '_blank' : undefined}\n      >\n        {label}\n      </Link>\n    );\n  }\n\n  return (\n    <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n      {label}\n    </Link>\n  );\n};\n\nexport interface BitkitStepsProps extends Omit<\n  StepsRootProps,\n  'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n  children: ReactNode;\n  /**\n   * `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout\n   * below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed\n   * state. `vertical` stays vertical at every width.\n   *\n   * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n  const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n  const stepCardCtx = useStepCardContext();\n  const step = stepProp ?? stepCardCtx?.step ?? 0;\n  const count = Children.count(children);\n\n  return (\n    <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n      <Steps.List>\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, { _index: index });\n          }\n          return child;\n        })}\n      </Steps.List>\n    </Steps.Root>\n  );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n  action?: {\n    href?: string;\n    isExternal?: boolean;\n    onClick?: () => void;\n  };\n  /**\n   * A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at\n   * every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.\n   */\n  helperText?: ReactNode;\n  label: string;\n  state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n  _index?: number;\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n  const { _index = 0, action, helperText, label, state } = props as BitkitStepsItemInternalProps;\n\n  const styles = useStepsStyles();\n  const stepsCtx = useStepsContext();\n  const status = getEffectiveStatus(state, _index, stepsCtx.value);\n  const resolvedAction = status === 'completed' ? action : undefined;\n  const statusAttr = { 'data-step-status': status };\n\n  return (\n    <Steps.Item {...statusAttr} index={_index} ref={ref}>\n      <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n      <Box css={styles.trigger}>\n        <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n        {helperText && <Steps.Description {...statusAttr}>{helperText}</Steps.Description>}\n      </Box>\n      <Steps.Separator />\n    </Steps.Item>\n  );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;EAEtC,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;EAC7E,UAAA;CACG,CAAA;AAEV;AAkBA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;EAC3F,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD,EAAE,QAAQ,MAAM,CAAC;GAE5F,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAqB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,SAAS,GAAG,QAAQ,YAAY,OAAO,UAAU;CAEzD,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,CAAA,CAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;EAAhD,UAAA;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;IAAa,UAAA,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;KAAa,UAAA,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,cAAc,oBAAC,MAAM,aAAP;KAAmB,GAAI;KAAa,UAAA;IAA8B,CAAA,CAC9E;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n  itemState: BitkitStepsItemState | undefined,\n  index: number,\n  step: number,\n): EffectiveStatus => {\n  if (itemState === 'disabled') return 'disabled';\n  if (itemState === 'invalid') return 'invalid';\n  if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n  if (index < step) return 'completed';\n  if (index === step) return 'inProgress';\n  return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n  if (status === 'completed') return <IconCheck size=\"16\" />;\n  if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n  if (status === 'invalid') return '!';\n  return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n  if (!action) return label;\n\n  // Links don't look like links at rest — only the underline + purple color on hover reveals\n  // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n  // already adds the underline on hover; we only need to swap the color.\n  if (action.href) {\n    return (\n      <Link\n        _hover={{ color: 'text/link' }}\n        href={action.href}\n        onClick={action.onClick}\n        rel={action.isExternal ? 'noopener noreferrer' : undefined}\n        target={action.isExternal ? '_blank' : undefined}\n      >\n        {label}\n      </Link>\n    );\n  }\n\n  return (\n    <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n      {label}\n    </Link>\n  );\n};\n\nexport interface BitkitStepsProps extends Omit<\n  StepsRootProps,\n  'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n  children: ReactNode;\n  /**\n   * `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout\n   * below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed\n   * state. `vertical` stays vertical at every width.\n   *\n   * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** The step whose label is emphasized; defaults to `step`. */\n  selectedStep?: number;\n  step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n  const { children, orientation = 'horizontal', selectedStep, step: stepProp, ...rest } = props;\n  const stepCardCtx = useStepCardContext();\n  const step = stepProp ?? stepCardCtx?.step ?? 0;\n  const selected = selectedStep ?? step;\n  const count = Children.count(children);\n\n  return (\n    <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n      <Steps.List>\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n              _index: index,\n              _selected: index === selected,\n            });\n          }\n          return child;\n        })}\n      </Steps.List>\n    </Steps.Root>\n  );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n  action?: {\n    href?: string;\n    isExternal?: boolean;\n    onClick?: () => void;\n  };\n  /**\n   * A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at\n   * every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.\n   */\n  helperText?: ReactNode;\n  label: string;\n  state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n  _index?: number;\n  _selected?: boolean;\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n  const { _index = 0, _selected = false, action, helperText, label, state } = props as BitkitStepsItemInternalProps;\n\n  const styles = useStepsStyles();\n  const stepsCtx = useStepsContext();\n  const status = getEffectiveStatus(state, _index, stepsCtx.value);\n  const isReached = status === 'completed' || status === 'inProgress';\n  const resolvedAction = isReached && !_selected ? action : undefined;\n  const statusAttr = { 'data-step-status': status };\n\n  return (\n    <Steps.Item {...statusAttr} index={_index} ref={ref}>\n      <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n      <Box css={styles.trigger}>\n        <Steps.Title {...statusAttr} data-selected={_selected || undefined}>\n          {renderLabel(label, resolvedAction)}\n        </Steps.Title>\n        {helperText && <Steps.Description {...statusAttr}>{helperText}</Steps.Description>}\n      </Box>\n      <Steps.Separator />\n    </Steps.Item>\n  );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;EAEtC,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;EAC7E,UAAA;CACG,CAAA;AAEV;AAoBA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CACxF,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,WAAW,gBAAgB;CACjC,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;EAC3F,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD;IACvE,QAAQ;IACR,WAAW,UAAU;GACvB,CAAC;GAEH,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAsB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,SAAS,GAAG,YAAY,OAAO,QAAQ,YAAY,OAAO,UAAU;CAE5E,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,CAAA,CAAS,KAAK;CAE/D,MAAM,kBADY,WAAW,eAAe,WAAW,iBACnB,CAAC,YAAY,SAAS,KAAA;CAC1D,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;EAAhD,UAAA;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;IAAa,UAAA,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;KAAY,iBAAe,aAAa,KAAA;KACtD,UAAA,YAAY,OAAO,cAAc;IACvB,CAAA,GACZ,cAAc,oBAAC,MAAM,aAAP;KAAmB,GAAI;KAAa,UAAA;IAA8B,CAAA,CAC9E;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -94,6 +94,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 BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, } 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

@@ -383,12 +383,10 @@ 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 } from "./theme/slot-recipes/UIHeader.recipe.js";
-import BitkitUIHeader_default from "./components/BitkitUIHeader/BitkitUIHeader.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.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, 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, 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, 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;