@bitrise/bitkit-v2 0.3.501-beta.3227 → 0.3.502-beta.3231

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js

@@ -8,7 +8,7 @@ import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx
 var HELPER_DOT = "•";
 var BitkitSectionHeading = forwardRef((props, ref) => {
-	const { children, css, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
+	const { children, css, headingId, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "sectionHeading" })();
 	const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];
 	const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);
@@ -26,6 +26,7 @@ var BitkitSectionHeading = forwardRef((props, ref) => {
 				}), /* @__PURE__ */ jsx(Text, {
 					as: headingLevel,
 					css: styles.label,
+					id: headingId,
 					children: label
 				})]
 			}), hasHelper && /* @__PURE__ */ jsxs(chakra.div, {

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  /**\n   * The heading tag the label renders as, so the section fits the page's outline. Only the tag\n   * changes: the label keeps the `heading/h3` look at every level.\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const { children, css, headingLevel = 'h3', helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <Text as={headingLevel} css={styles.label}>\n            {label}\n          </Text>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;;AAsBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,KAAK,eAAe,MAAM,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAGtG,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,MAAD;KAAM,IAAI;KAAc,KAAK,OAAO;KACjC,UAAA;IACG,CAAA,CACI;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  /** `id` of the heading element itself, for a `<section aria-labelledby>` to take its name from the label alone. */\n  headingId?: string;\n  /**\n   * The heading tag the label renders as, so the section fits the page's outline. Only the tag\n   * changes: the label keeps the `heading/h3` look at every level.\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const {\n    children,\n    css,\n    headingId,\n    headingLevel = 'h3',\n    helperText,\n    helperTooltip,\n    icon: Icon,\n    label,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <Text as={headingLevel} css={styles.label} id={headingId}>\n            {label}\n          </Text>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;;AAwBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,KACA,WACA,eAAe,MACf,YACA,eACA,MAAM,MACN,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,MAAD;KAAM,IAAI;KAAc,KAAK,OAAO;KAAO,IAAI;KAC5C,UAAA;IACG,CAAA,CACI;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitStepsCard/BitkitStepsCard.d.ts

@@ -13,6 +13,8 @@ export interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'
 export interface BitkitStepsCardStepProps {
     children?: ReactNode;
     description?: ReactNode;
+    /** The tag the title renders as, so it fits the page's outline: `h2` when nothing but the page header is above it. */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     title?: ReactNode;
 }
 export interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {

package/dist/components/BitkitStepsCard/BitkitStepsCard.js

@@ -51,7 +51,7 @@ var BitkitStepsCardBody = forwardRef((props, ref) => {
 BitkitStepsCardBody.displayName = "BitkitStepsCardBody";
 var hasContent = (node) => node !== null && node !== void 0 && node !== "";
 var BitkitStepsCardStep = (props) => {
-	const { _index = 0, children, description, title } = props;
+	const { _index = 0, children, description, headingLevel = "h3", title } = props;
 	const { step } = useStepCardContext() ?? { step: 0 };
 	const styles = useStepsCardStyles();
 	if (_index !== step) return null;
@@ -60,6 +60,7 @@ var BitkitStepsCardStep = (props) => {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(showTitle || showDescription) && /* @__PURE__ */ jsxs(Box, {
 		css: styles.titleGroup,
 		children: [showTitle && /* @__PURE__ */ jsx(Card.Title, {
+			as: headingLevel,
 			css: styles.title,
 			children: title
 		}), showDescription && /* @__PURE__ */ jsx(Card.Description, {

package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitStepsCard.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, css, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={[styles.root, css]} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={[styles.header, css]} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.body, css]} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && <Card.Title css={styles.title}>{title}</Card.Title>}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,SAAS;CACzC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,CAAC,OAAO,MAAM,GAAG;GAAG,UAAA;GAAS,GAAI;GACxD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAC/C,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAYxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CACrD,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAK,OAAN;GAAY,KAAK,OAAO;GAAQ,UAAA;EAAkB,CAAA,GAC/D,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}
+{"version":3,"file":"BitkitStepsCard.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, css, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={[styles.root, css]} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={[styles.header, css]} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.body, css]} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  /** The tag the title renders as, so it fits the page's outline: `h2` when nothing but the page header is above it. */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, headingLevel = 'h3', title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && (\n            <Card.Title as={headingLevel} css={styles.title}>\n              {title}\n            </Card.Title>\n          )}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,SAAS;CACzC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,CAAC,OAAO,MAAM,GAAG;GAAG,UAAA;GAAS,GAAI;GACxD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAC/C,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAcxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,eAAe,MAAM,UAAU;CAC1E,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aACC,oBAAC,KAAK,OAAN;GAAY,IAAI;GAAc,KAAK,OAAO;GACvC,UAAA;EACS,CAAA,GAEb,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}

package/dist/components/BitkitSwitch/BitkitSwitch.d.ts

@@ -1,3 +1,3 @@
 import { BitkitSwitchProps } from './BitkitSwitch.types';
-declare const BitkitSwitch: import('react').ForwardRefExoticComponent<BitkitSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;
+declare const BitkitSwitch: import('react').ForwardRefExoticComponent<BitkitSwitchProps & import('react').RefAttributes<HTMLElement>>;
 export default BitkitSwitch;

package/dist/components/BitkitSwitch/BitkitSwitch.js

@@ -5,7 +5,7 @@ import BitkitSwitchLabel from "./components/BitkitSwitchLabel.js";
 import BitkitSwitchReadOnly from "./components/BitkitSwitchReadOnly.js";
 import BitkitSwitchValueText from "./components/BitkitSwitchValueText.js";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react/box";
 import { Skeleton } from "@chakra-ui/react/skeleton";
@@ -89,48 +89,66 @@ var BitkitSwitchDynamicText = forwardRef((props, ref) => {
 });
 BitkitSwitchDynamicText.displayName = "BitkitSwitchDynamicText";
 var BitkitSwitchFixed = forwardRef((props, ref) => {
-	const { icon, inputRef, label, optional, tooltip, helperText, size = "lg", state = "default", ...rest } = props;
-	return /* @__PURE__ */ jsxs(Switch.Root, {
-		ref,
-		gap: "24",
+	const { icon, ids, inputRef, label, optional, tooltip, helperText, size = "lg", state = "default", ...rest } = props;
+	const id = useId();
+	const switchIds = {
+		hiddenInput: `${id}-input`,
+		label: `${id}-label`,
+		...ids
+	};
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		asChild: true,
+		ids: switchIds,
 		size,
-		width: "100%",
-		display: "flex",
 		readOnly: state === "readOnly",
 		disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
 		...rest,
-		children: [
-			/* @__PURE__ */ jsx(Switch.HiddenInput, { ref: inputRef }),
-			/* @__PURE__ */ jsxs(Box, {
-				display: "flex",
-				flex: "1",
-				flexDirection: "column",
-				gap: "4",
-				minWidth: "0",
-				children: [/* @__PURE__ */ jsx(BitkitSwitchLabel, {
-					icon,
-					label,
-					state,
-					tooltip,
-					optional
-				}), /* @__PURE__ */ jsx(BitkitSwitchHelperText, {
+		children: /* @__PURE__ */ jsxs(Box, {
+			ref,
+			gap: "24",
+			width: "100%",
+			display: "flex",
+			children: [
+				/* @__PURE__ */ jsx(Switch.HiddenInput, { ref: inputRef }),
+				/* @__PURE__ */ jsxs(Box, {
+					display: "flex",
+					flex: "1",
+					flexDirection: "column",
+					gap: "4",
+					minWidth: "0",
+					children: [/* @__PURE__ */ jsx(BitkitSwitchLabel, {
+						icon,
+						id: switchIds.label,
+						label,
+						state,
+						tooltip,
+						optional
+					}), /* @__PURE__ */ jsx(BitkitSwitchHelperText, {
+						state,
+						helperText
+					})]
+				}),
+				/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
 					state,
-					helperText
-				})]
-			}),
-			/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
-				state,
-				children: /* @__PURE__ */ jsx(Skeleton, {
-					loading: state === "skeleton",
-					borderRadius: "12",
-					height: size === "md" ? "16" : "24",
-					children: /* @__PURE__ */ jsxs(Switch.Control, { children: [/* @__PURE__ */ jsx(Switch.Thumb, {}), /* @__PURE__ */ jsx(Switch.Indicator, {
-						fallback: /* @__PURE__ */ jsx(IconCross, { size: size === "md" ? "16" : "24" }),
-						children: /* @__PURE__ */ jsx(IconCheck, { size: size === "md" ? "16" : "24" })
-					})] })
+					children: /* @__PURE__ */ jsx(Skeleton, {
+						loading: state === "skeleton",
+						borderRadius: "12",
+						height: size === "md" ? "16" : "24",
+						children: /* @__PURE__ */ jsx(Box, {
+							asChild: true,
+							display: "flex",
+							children: /* @__PURE__ */ jsx("label", {
+								htmlFor: switchIds.hiddenInput,
+								children: /* @__PURE__ */ jsxs(Switch.Control, { children: [/* @__PURE__ */ jsx(Switch.Thumb, {}), /* @__PURE__ */ jsx(Switch.Indicator, {
+									fallback: /* @__PURE__ */ jsx(IconCross, { size: size === "md" ? "16" : "24" }),
+									children: /* @__PURE__ */ jsx(IconCheck, { size: size === "md" ? "16" : "24" })
+								})] })
+							})
+						})
+					})
 				})
-			})
-		]
+			]
+		})
 	});
 });
 BitkitSwitchFixed.displayName = "BitkitSwitchFixed";

package/dist/components/BitkitSwitch/BitkitSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n  BitkitSwitchAnyVariantProps,\n  BitkitSwitchDefaultProps,\n  BitkitSwitchDynamicTextProps,\n  BitkitSwitchFixedProps,\n  BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n  const { hideLabel, inputRef, label, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      ref={ref}\n      size={size}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={inputRef} />\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n      {/* `srOnly` rather than a hidden label passed in by the consumer: it positions the element\n          absolutely, so it leaves the flex flow and the root's gap no longer reserves space for it. */}\n      {label && <Switch.Label srOnly={hideLabel}>{label}</Switch.Label>}\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n  (props, ref) => {\n    const {\n      inputRef,\n      label,\n      optional,\n      tooltip,\n      helperText,\n      valueText,\n      size = 'lg',\n      state = 'default',\n      ...rest\n    } = props;\n\n    const recipe = useSlotRecipe({ key: 'switch' });\n    const styles = recipe({ size });\n\n    return (\n      <Switch.Root\n        ref={ref}\n        gap=\"4\"\n        size={size}\n        flexDirection=\"column\"\n        alignItems=\"flex-start\"\n        readOnly={state === 'readOnly'}\n        disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n        {...rest}\n      >\n        <Switch.HiddenInput ref={inputRef} />\n        <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n        <Box css={styles.root}>\n          <BitkitSwitchReadOnly state={state}>\n            <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n              <Switch.Control>\n                <Switch.Thumb />\n                <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n                  <IconCheck size={size === 'md' ? '16' : '24'} />\n                </Switch.Indicator>\n              </Switch.Control>\n            </Skeleton>\n          </BitkitSwitchReadOnly>\n          <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n        </Box>\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Switch.Root>\n    );\n  },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitchFixed = forwardRef<HTMLLabelElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n  const { icon, inputRef, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      ref={ref}\n      gap=\"24\"\n      size={size}\n      width=\"100%\"\n      display=\"flex\"\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={inputRef} />\n      <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" gap=\"4\" minWidth=\"0\">\n        <BitkitSwitchLabel icon={icon} label={label} state={state} tooltip={tooltip} optional={optional} />\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Box>\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchFixed.displayName = 'BitkitSwitchFixed';\n\nconst BitkitSwitch = forwardRef<HTMLLabelElement, BitkitSwitchProps>((props, ref) => {\n  // At runtime (e.g. a shared Storybook meta) sibling-variant props may still flow in, so split them\n  // off here and forward only what the chosen variant consumes — otherwise they leak to the DOM.\n  const { variant, hideLabel, icon, inputRef, tooltip, optional, valueText, helperText, ...rest } =\n    props as BitkitSwitchAnyVariantProps;\n\n  if (variant === 'dynamic-text') {\n    return (\n      <BitkitSwitchDynamicText\n        ref={ref}\n        inputRef={inputRef}\n        tooltip={tooltip}\n        optional={optional}\n        valueText={valueText}\n        helperText={helperText}\n        {...rest}\n      />\n    );\n  }\n\n  if (variant === 'fixed') {\n    return (\n      <BitkitSwitchFixed\n        ref={ref}\n        icon={icon}\n        inputRef={inputRef}\n        tooltip={tooltip}\n        optional={optional}\n        helperText={helperText as ReactNode}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <BitkitSwitchDefault\n      ref={ref}\n      hideLabel={hideLabel}\n      inputRef={inputRef}\n      {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)}\n    />\n  );\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { type ForwardedRef, forwardRef, type ReactNode, useId } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n  BitkitSwitchAnyVariantProps,\n  BitkitSwitchDefaultProps,\n  BitkitSwitchDynamicTextProps,\n  BitkitSwitchFixedProps,\n  BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n  const { hideLabel, inputRef, label, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      ref={ref}\n      size={size}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={inputRef} />\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n      {/* `srOnly` rather than a hidden label passed in by the consumer: it positions the element\n          absolutely, so it leaves the flex flow and the root's gap no longer reserves space for it. */}\n      {label && <Switch.Label srOnly={hideLabel}>{label}</Switch.Label>}\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n  (props, ref) => {\n    const {\n      inputRef,\n      label,\n      optional,\n      tooltip,\n      helperText,\n      valueText,\n      size = 'lg',\n      state = 'default',\n      ...rest\n    } = props;\n\n    const recipe = useSlotRecipe({ key: 'switch' });\n    const styles = recipe({ size });\n\n    return (\n      <Switch.Root\n        ref={ref}\n        gap=\"4\"\n        size={size}\n        flexDirection=\"column\"\n        alignItems=\"flex-start\"\n        readOnly={state === 'readOnly'}\n        disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n        {...rest}\n      >\n        <Switch.HiddenInput ref={inputRef} />\n        <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n        <Box css={styles.root}>\n          <BitkitSwitchReadOnly state={state}>\n            <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n              <Switch.Control>\n                <Switch.Thumb />\n                <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n                  <IconCheck size={size === 'md' ? '16' : '24'} />\n                </Switch.Indicator>\n              </Switch.Control>\n            </Skeleton>\n          </BitkitSwitchReadOnly>\n          <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n        </Box>\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Switch.Root>\n    );\n  },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitchFixed = forwardRef<HTMLDivElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n  const { icon, ids, inputRef, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n  const id = useId();\n  const switchIds = { hiddenInput: `${id}-input`, label: `${id}-label`, ...ids };\n\n  return (\n    <Switch.Root\n      asChild\n      ids={switchIds}\n      size={size}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n      {...rest}\n    >\n      <Box ref={ref} gap=\"24\" width=\"100%\" display=\"flex\">\n        <Switch.HiddenInput ref={inputRef} />\n        <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" gap=\"4\" minWidth=\"0\">\n          <BitkitSwitchLabel\n            icon={icon}\n            id={switchIds.label}\n            label={label}\n            state={state}\n            tooltip={tooltip}\n            optional={optional}\n          />\n          <BitkitSwitchHelperText state={state} helperText={helperText} />\n        </Box>\n        <BitkitSwitchReadOnly state={state}>\n          <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n            <Box asChild display=\"flex\">\n              <label htmlFor={switchIds.hiddenInput}>\n                <Switch.Control>\n                  <Switch.Thumb />\n                  <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n                    <IconCheck size={size === 'md' ? '16' : '24'} />\n                  </Switch.Indicator>\n                </Switch.Control>\n              </label>\n            </Box>\n          </Skeleton>\n        </BitkitSwitchReadOnly>\n      </Box>\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchFixed.displayName = 'BitkitSwitchFixed';\n\nconst BitkitSwitch = forwardRef<HTMLElement, BitkitSwitchProps>((props, ref) => {\n  // At runtime (e.g. a shared Storybook meta) sibling-variant props may still flow in, so split them\n  // off here and forward only what the chosen variant consumes — otherwise they leak to the DOM.\n  const { variant, hideLabel, icon, inputRef, tooltip, optional, valueText, helperText, ...rest } =\n    props as BitkitSwitchAnyVariantProps;\n\n  if (variant === 'dynamic-text') {\n    return (\n      <BitkitSwitchDynamicText\n        ref={ref as ForwardedRef<HTMLLabelElement>}\n        inputRef={inputRef}\n        tooltip={tooltip}\n        optional={optional}\n        valueText={valueText}\n        helperText={helperText}\n        {...rest}\n      />\n    );\n  }\n\n  if (variant === 'fixed') {\n    return (\n      <BitkitSwitchFixed\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        icon={icon}\n        inputRef={inputRef}\n        tooltip={tooltip}\n        optional={optional}\n        helperText={helperText as ReactNode}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <BitkitSwitchDefault\n      ref={ref as ForwardedRef<HTMLLabelElement>}\n      hideLabel={hideLabel}\n      inputRef={inputRef}\n      {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)}\n    />\n  );\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":"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"}

package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.d.ts

@@ -2,6 +2,7 @@ import { BitkitIconComponent } from '../../../icons';
 import { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';
 type Props = Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'> & {
     icon?: BitkitIconComponent;
+    id?: string;
 };
-declare const BitkitSwitchLabel: ({ label, state, tooltip, optional, icon: Icon }: Props) => import('react').JSX.Element | null;
+declare const BitkitSwitchLabel: ({ label, state, tooltip, optional, icon: Icon, id }: Props) => import('react').JSX.Element | null;
 export default BitkitSwitchLabel;

package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js

@@ -6,7 +6,7 @@ import { Text } from "@chakra-ui/react/text";
 import { Flex } from "@chakra-ui/react/flex";
 import { useSwitchContext } from "@chakra-ui/react/switch";
 //#region lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx
-var BitkitSwitchLabel = ({ label, state, tooltip, optional, icon: Icon }) => {
+var BitkitSwitchLabel = ({ label, state, tooltip, optional, icon: Icon, id }) => {
 	const { disabled } = useSwitchContext();
 	if (isEmptyNode(label)) return null;
 	const shouldShowAsDisabled = disabled && state !== "disabledInput" && state !== "skeleton";
@@ -20,6 +20,7 @@ var BitkitSwitchLabel = ({ label, state, tooltip, optional, icon: Icon }) => {
 			}),
 			/* @__PURE__ */ jsx(Text, {
 				as: "span",
+				id,
 				textStyle: "body/md/semibold",
 				color: shouldShowAsDisabled ? "text/disabled" : "text/primary",
 				children: label

package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSwitchLabel.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx"],"sourcesContent":["import { Flex } from '@chakra-ui/react/flex';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport { type BitkitIconComponent, IconInfoCircle } from '../../../icons';\nimport { isEmptyNode } from '../../../utilities/isEmptyNode';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\n\ntype Props = Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'> & {\n  icon?: BitkitIconComponent;\n};\n\nconst BitkitSwitchLabel = ({ label, state, tooltip, optional, icon: Icon }: Props) => {\n  const { disabled } = useSwitchContext();\n\n  if (isEmptyNode(label)) {\n    return null;\n  }\n\n  const shouldShowAsDisabled = disabled && state !== 'disabledInput' && state !== 'skeleton';\n\n  return (\n    <Flex gap=\"4\" alignItems=\"center\">\n      {!!Icon && <Icon size=\"16\" color={shouldShowAsDisabled ? 'icon/disabled' : 'icon/primary'} />}\n\n      <Text as=\"span\" textStyle=\"body/md/semibold\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/primary'}>\n        {label}\n      </Text>\n\n      {!!optional && (\n        <Text as=\"span\" textStyle=\"body/md/regular\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/helper'}>\n          (optional)\n        </Text>\n      )}\n\n      {!!tooltip && (\n        <BitkitTooltip text={tooltip}>\n          <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n        </BitkitTooltip>\n      )}\n    </Flex>\n  );\n};\n\nexport default BitkitSwitchLabel;\n"],"mappings":";;;;;;;;AAaA,IAAM,qBAAqB,EAAE,OAAO,OAAO,SAAS,UAAU,MAAM,WAAkB;CACpF,MAAM,EAAE,aAAa,iBAAiB;CAEtC,IAAI,YAAY,KAAK,GACnB,OAAO;CAGT,MAAM,uBAAuB,YAAY,UAAU,mBAAmB,UAAU;CAEhF,OACE,qBAAC,MAAD;EAAM,KAAI;EAAI,YAAW;EAAzB,UAAA;GACG,CAAC,CAAC,QAAQ,oBAAC,MAAD;IAAM,MAAK;IAAK,OAAO,uBAAuB,kBAAkB;GAAiB,CAAA;GAE5F,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAmB,OAAO,uBAAuB,kBAAkB;IAC1F,UAAA;GACG,CAAA;GAEL,CAAC,CAAC,YACD,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAkB,OAAO,uBAAuB,kBAAkB;IAAe,UAAA;GAErG,CAAA;GAGP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;IACnB,UAAA,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;EAEb;;AAEV"}
+{"version":3,"file":"BitkitSwitchLabel.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx"],"sourcesContent":["import { Flex } from '@chakra-ui/react/flex';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport { type BitkitIconComponent, IconInfoCircle } from '../../../icons';\nimport { isEmptyNode } from '../../../utilities/isEmptyNode';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\n\ntype Props = Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'> & {\n  icon?: BitkitIconComponent;\n  id?: string;\n};\n\nconst BitkitSwitchLabel = ({ label, state, tooltip, optional, icon: Icon, id }: Props) => {\n  const { disabled } = useSwitchContext();\n\n  if (isEmptyNode(label)) {\n    return null;\n  }\n\n  const shouldShowAsDisabled = disabled && state !== 'disabledInput' && state !== 'skeleton';\n\n  return (\n    <Flex gap=\"4\" alignItems=\"center\">\n      {!!Icon && <Icon size=\"16\" color={shouldShowAsDisabled ? 'icon/disabled' : 'icon/primary'} />}\n\n      <Text\n        as=\"span\"\n        id={id}\n        textStyle=\"body/md/semibold\"\n        color={shouldShowAsDisabled ? 'text/disabled' : 'text/primary'}\n      >\n        {label}\n      </Text>\n\n      {!!optional && (\n        <Text as=\"span\" textStyle=\"body/md/regular\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/helper'}>\n          (optional)\n        </Text>\n      )}\n\n      {!!tooltip && (\n        <BitkitTooltip text={tooltip}>\n          <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n        </BitkitTooltip>\n      )}\n    </Flex>\n  );\n};\n\nexport default BitkitSwitchLabel;\n"],"mappings":";;;;;;;;AAcA,IAAM,qBAAqB,EAAE,OAAO,OAAO,SAAS,UAAU,MAAM,MAAM,SAAgB;CACxF,MAAM,EAAE,aAAa,iBAAiB;CAEtC,IAAI,YAAY,KAAK,GACnB,OAAO;CAGT,MAAM,uBAAuB,YAAY,UAAU,mBAAmB,UAAU;CAEhF,OACE,qBAAC,MAAD;EAAM,KAAI;EAAI,YAAW;EAAzB,UAAA;GACG,CAAC,CAAC,QAAQ,oBAAC,MAAD;IAAM,MAAK;IAAK,OAAO,uBAAuB,kBAAkB;GAAiB,CAAA;GAE5F,oBAAC,MAAD;IACE,IAAG;IACC;IACJ,WAAU;IACV,OAAO,uBAAuB,kBAAkB;IAE/C,UAAA;GACG,CAAA;GAEL,CAAC,CAAC,YACD,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAkB,OAAO,uBAAuB,kBAAkB;IAAe,UAAA;GAErG,CAAA;GAGP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;IACnB,UAAA,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;EAEb;;AAEV"}

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export { default as BitkitCodeSnippet, type BitkitCodeSnippetProps } from './Bit
 export { default as BitkitCollapsible, type BitkitCollapsibleProps } from './BitkitCollapsible/BitkitCollapsible';
 export { default as BitkitColorButton, type BitkitColorButtonProps } from './BitkitColorButton/BitkitColorButton';
 export { default as BitkitCombobox, type BitkitComboboxProps } from './BitkitCombobox/BitkitCombobox';
+export { type BitkitContentWidth, default as BitkitContentWrapper, type BitkitContentWrapperProps, } from './BitkitContentWrapper/BitkitContentWrapper';
 export { default as BitkitControlButton, type BitkitControlButtonProps, } from './BitkitControlButton/BitkitControlButton';
 export { default as BitkitDataWidget, type BitkitDataWidgetProps } from './BitkitDataWidget/BitkitDataWidget';
 export { default as BitkitDatePicker, type BitkitDatePickerProps } from './BitkitDatePicker/BitkitDatePicker';
@@ -58,6 +59,7 @@ export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } fr
 export { default as BitkitPageFooter, type BitkitPageFooterItemProps, type BitkitPageFooterProps, } from './BitkitPageFooter/BitkitPageFooter';
 export { default as BitkitPageHeader, type BitkitPageHeaderProps } from './BitkitPageHeader/BitkitPageHeader';
 export { default as BitkitPageSidebar, type BitkitPageSidebarBodyProps, type BitkitPageSidebarDividerProps, type BitkitPageSidebarDrawerHeaderProps, type BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProgressItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
+export { default as BitkitPageSubheader, type BitkitPageSubheaderProps, } from './BitkitPageSubheader/BitkitPageSubheader';
 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';

package/dist/main.js

@@ -323,6 +323,7 @@ import BitkitLabel from "./components/BitkitLabel/BitkitLabel.js";
 import BitkitCollapsible from "./components/BitkitCollapsible/BitkitCollapsible.js";
 import BitkitField from "./components/BitkitField/BitkitField.js";
 import BitkitCombobox_default from "./components/BitkitCombobox/BitkitCombobox.js";
+import BitkitContentWrapper from "./components/BitkitContentWrapper/BitkitContentWrapper.js";
 import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
 import BitkitDatePicker from "./components/BitkitDatePicker/BitkitDatePicker.js";
 import BitkitToggletip from "./components/BitkitToggletip/BitkitToggletip.js";
@@ -362,6 +363,7 @@ import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOver
 import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
 import BitkitPageHeader from "./components/BitkitPageHeader/BitkitPageHeader.js";
 import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
+import BitkitPageSubheader from "./components/BitkitPageSubheader/BitkitPageSubheader.js";
 import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
 import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
 import BitkitPopover from "./components/BitkitPopover/BitkitPopover.js";
@@ -397,4 +399,4 @@ 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 { BitbotLogoWithText, BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUIHeader_default as BitkitUIHeader, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbotIntercomWhite, 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, IconModeDark, IconModeLight, IconModeSystem, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiHeaderHeight, uiHeaderHeightPx, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitbotLogoWithText, 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, BitkitContentWrapper, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPageSubheader, 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, IconBitbotIntercomWhite, 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, IconModeDark, IconModeLight, IconModeSystem, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiHeaderHeight, uiHeaderHeightPx, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };

package/dist/theme/common/ContentWidth.common.d.ts

@@ -0,0 +1,20 @@
+/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */
+declare const contentWidthStyles: {
+    readonly '640': {
+        readonly maxWidth: "layout/maxWidth/640";
+    };
+    readonly '960': {
+        readonly maxWidth: "layout/maxWidth/960";
+    };
+    readonly '1280': {
+        readonly maxWidth: "layout/maxWidth/1280";
+    };
+    readonly '1616': {
+        readonly maxWidth: "layout/maxWidth/1616";
+    };
+    readonly full: {};
+};
+export type ContentWidth = keyof typeof contentWidthStyles;
+/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */
+export declare const contentMaxWidth: (contentWidth?: ContentWidth) => "layout/maxWidth/640" | "layout/maxWidth/960" | "layout/maxWidth/1280" | "layout/maxWidth/1616" | undefined;
+export default contentWidthStyles;

package/dist/theme/common/ContentWidth.common.js

@@ -0,0 +1,15 @@
+//#region lib/theme/common/ContentWidth.common.ts
+/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */
+var contentWidthStyles = {
+	"640": { maxWidth: "layout/maxWidth/640" },
+	"960": { maxWidth: "layout/maxWidth/960" },
+	"1280": { maxWidth: "layout/maxWidth/1280" },
+	"1616": { maxWidth: "layout/maxWidth/1616" },
+	full: {}
+};
+/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */
+var contentMaxWidth = (contentWidth) => contentWidth && contentWidth !== "full" ? contentWidthStyles[contentWidth].maxWidth : void 0;
+//#endregion
+export { contentMaxWidth, contentWidthStyles as default };
+
+//# sourceMappingURL=ContentWidth.common.js.map

package/dist/theme/common/ContentWidth.common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWidth.common.js","names":[],"sources":["../../../lib/theme/common/ContentWidth.common.ts"],"sourcesContent":["/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */\nconst contentWidthStyles = {\n  '640': { maxWidth: 'layout/maxWidth/640' },\n  '960': { maxWidth: 'layout/maxWidth/960' },\n  '1280': { maxWidth: 'layout/maxWidth/1280' },\n  '1616': { maxWidth: 'layout/maxWidth/1616' },\n  full: {},\n} as const;\n\nexport type ContentWidth = keyof typeof contentWidthStyles;\n\n/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */\nexport const contentMaxWidth = (contentWidth?: ContentWidth) =>\n  contentWidth && contentWidth !== 'full' ? contentWidthStyles[contentWidth].maxWidth : undefined;\n\nexport default contentWidthStyles;\n"],"mappings":";;AACA,IAAM,qBAAqB;CACzB,OAAO,EAAE,UAAU,sBAAsB;CACzC,OAAO,EAAE,UAAU,sBAAsB;CACzC,QAAQ,EAAE,UAAU,uBAAuB;CAC3C,QAAQ,EAAE,UAAU,uBAAuB;CAC3C,MAAM,CAAC;AACT;;AAKA,IAAa,mBAAmB,iBAC9B,gBAAgB,iBAAiB,SAAS,mBAAmB,aAAa,CAAC,WAAW,KAAA"}

package/dist/theme/recipes/ContentWrapper.recipe.d.ts

@@ -0,0 +1,18 @@
+declare const contentWrapperRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    contentWidth: {
+        readonly '640': {
+            readonly maxWidth: "layout/maxWidth/640";
+        };
+        readonly '960': {
+            readonly maxWidth: "layout/maxWidth/960";
+        };
+        readonly '1280': {
+            readonly maxWidth: "layout/maxWidth/1280";
+        };
+        readonly '1616': {
+            readonly maxWidth: "layout/maxWidth/1616";
+        };
+        readonly full: {};
+    };
+}>;
+export default contentWrapperRecipe;

package/dist/theme/recipes/ContentWrapper.recipe.js

@@ -0,0 +1,29 @@
+import contentWidthStyles from "../common/ContentWidth.common.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/ContentWrapper.recipe.ts
+var contentWrapperRecipe = defineRecipe({
+	className: "content-wrapper",
+	base: {
+		columnGap: {
+			base: "32",
+			desktop: "64"
+		},
+		display: "grid",
+		gridTemplateColumns: "minmax(0, 1fr)",
+		"& > *": { minWidth: 0 },
+		marginInline: "auto",
+		paddingBlockEnd: "48",
+		paddingBlockStart: "32",
+		paddingInline: {
+			base: "16",
+			tablet: "32"
+		},
+		rowGap: "32",
+		width: "100%"
+	},
+	variants: { contentWidth: contentWidthStyles }
+});
+//#endregion
+export { contentWrapperRecipe as default };
+
+//# sourceMappingURL=ContentWrapper.recipe.js.map

package/dist/theme/recipes/ContentWrapper.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWrapper.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ContentWrapper.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nimport contentWidthStyles from '../common/ContentWidth.common';\n\nconst contentWrapperRecipe = defineRecipe({\n  className: 'content-wrapper',\n  base: {\n    columnGap: { base: '32', desktop: '64' },\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    // Lets a `1fr` column shrink below its content's width instead of overflowing the page.\n    '& > *': { minWidth: 0 },\n    marginInline: 'auto',\n    paddingBlockEnd: '48',\n    paddingBlockStart: '32',\n    paddingInline: { base: '16', tablet: '32' },\n    rowGap: '32',\n    width: '100%',\n  },\n  variants: {\n    contentWidth: contentWidthStyles,\n  },\n});\n\nexport default contentWrapperRecipe;\n"],"mappings":";;;AAIA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,WAAW;GAAE,MAAM;GAAM,SAAS;EAAK;EACvC,SAAS;EACT,qBAAqB;EAErB,SAAS,EAAE,UAAU,EAAE;EACvB,cAAc;EACd,iBAAiB;EACjB,mBAAmB;EACnB,eAAe;GAAE,MAAM;GAAM,QAAQ;EAAK;EAC1C,QAAQ;EACR,OAAO;CACT;CACA,UAAU,EACR,cAAc,mBAChB;AACF,CAAC"}

package/dist/theme/recipes/index.js

@@ -4,6 +4,7 @@ import textareaRecipe from "./Textarea.recipe.js";
 import badgeRecipe from "./Badge.recipe.js";
 import buttonRecipe from "./Button.recipe.js";
 import closeButtonRecipe from "./CloseButton.recipe.js";
+import contentWrapperRecipe from "./ContentWrapper.recipe.js";
 import controlButtonRecipe from "./ControlButton.recipe.js";
 import definitionTooltipRecipe from "./DefinitionTooltip.recipe.js";
 import iconRecipe from "./Icon.recipe.js";
@@ -23,6 +24,7 @@ var recipes = {
 	closeButton: closeButtonRecipe,
 	controlButton: controlButtonRecipe,
 	colorButton: colorButtonRecipe,
+	contentWrapper: contentWrapperRecipe,
 	definitionTooltip: definitionTooltipRecipe,
 	icon: iconRecipe,
 	input: inputRecipe,

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

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

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

@@ -27,13 +27,5 @@ declare const filterSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             };
         };
     };
-    contentAlign: {
-        center: {};
-        start: {
-            root: {
-                justifyContent: "flex-start";
-            };
-        };
-    };
 }>;
 export default filterSlotRecipe;

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

@@ -619,36 +619,30 @@ var filterSlotRecipe = defineSlotRecipe({
 			width: "48"
 		}
 	},
-	variants: {
-		pageLayout: {
-			capped: {
-				root: {
-					borderBlockEndWidth: "1",
-					borderColor: "border/regular",
-					paddingBlock: "12"
-				},
-				content: { paddingInline: {
-					base: "16",
-					tablet: "32"
-				} }
+	variants: { pageLayout: {
+		capped: {
+			root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12"
 			},
-			full: {
-				root: {
-					borderBlockEndWidth: "1",
-					borderColor: "border/regular",
-					paddingBlock: "12"
-				},
-				content: { paddingInline: {
-					base: "16",
-					tablet: "32"
-				} }
-			}
-		},
-		contentAlign: {
-			center: {},
-			start: { root: { justifyContent: "flex-start" } }
+			content: { paddingInline: {
+				base: "16",
+				tablet: "32"
+			} }
+		},
+		full: {
+			root: {
+				borderBlockEndWidth: "1",
+				borderColor: "border/regular",
+				paddingBlock: "12"
+			},
+			content: { paddingInline: {
+				base: "16",
+				tablet: "32"
+			} }
 		}
-	}
+	} }
 });
 //#endregion
 export { filterSlotRecipe as default };