@bitrise/bitkit-v2 0.3.451 → 0.3.453

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
3
3
  import { BitkitIconComponent } from '../../icons';
4
4
  type BitkitListSize = 'lg' | 'md' | 'sm';
5
5
  type BitkitListTextColor = 'body' | 'secondary';
6
- interface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {
6
+ interface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'columnGap' | 'gap' | 'gridColumnGap' | 'gridGap' | 'gridRowGap' | 'rowGap' | 'size' | 'spaceX' | 'spaceY'> {
7
7
  children: ReactNode;
8
8
  colorVariant?: 'neutral' | 'purple';
9
9
  textColor?: BitkitListTextColor;
@@ -11,6 +11,7 @@ var [BitkitListProvider, useBitkitListContext] = createContext$1({
11
11
  hookName: "useBitkitListContext",
12
12
  providerName: "<BitkitList />"
13
13
  });
14
+ /** Item spacing is fixed by the list recipe; `gap` and the other spacing props are not accepted. */
14
15
  var BitkitList = forwardRef((props, ref) => {
15
16
  const { children, colorVariant = "neutral", size = "lg", textColor = "body", variant = "unordered", ...rest } = props;
16
17
  const rootProps = variant === "ordered" ? {
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n const content = (\n <Box flex=\"1\" minWidth=\"0\">\n {children}\n {helperText && (\n <Text color=\"text/secondary\" textStyle={size === 'lg' ? 'body/md/regular' : 'body/sm/regular'}>\n {helperText}\n </Text>\n )}\n </Box>\n );\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n // Marker size and spacing follow the list's size, never an item's helperText, so every\n // marker in one list matches. The recipe sizes the indicator per list size.\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={size === 'lg' ? '12' : '8'}>\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
1
+ {"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<\n ListRootProps,\n | 'colorPalette'\n | 'columnGap'\n | 'gap'\n | 'gridColumnGap'\n | 'gridGap'\n | 'gridRowGap'\n | 'rowGap'\n | 'size'\n | 'spaceX'\n | 'spaceY'\n> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\n/** Item spacing is fixed by the list recipe; `gap` and the other spacing props are not accepted. */\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n const content = (\n <Box flex=\"1\" minWidth=\"0\">\n {children}\n {helperText && (\n <Text color=\"text/secondary\" textStyle={size === 'lg' ? 'body/md/regular' : 'body/sm/regular'}>\n {helperText}\n </Text>\n )}\n </Box>\n );\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n // Marker size and spacing follow the list's size, never an item's helperText, so every\n // marker in one list matches. The recipe sizes the indicator per list size.\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={size === 'lg' ? '12' : '8'}>\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
@@ -3,6 +3,11 @@ import { ReactNode } from 'react';
3
3
  import { BitkitIconComponent } from '../../icons';
4
4
  export interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {
5
5
  children?: ReactNode;
6
+ /**
7
+ * The heading tag the label renders as, so the section fits the page's outline. Only the tag
8
+ * changes: the label keeps the `heading/h3` look at every level.
9
+ */
10
+ headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
6
11
  helperText?: ReactNode | ReactNode[];
7
12
  helperTooltip?: string;
8
13
  icon?: BitkitIconComponent;
@@ -4,10 +4,11 @@ import { Box } from "@chakra-ui/react/box";
4
4
  import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
5
5
  import { Fragment, forwardRef } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
+ import { Text } from "@chakra-ui/react/text";
7
8
  //#region lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx
8
9
  var HELPER_DOT = "•";
9
10
  var BitkitSectionHeading = forwardRef((props, ref) => {
10
- const { children, css, helperText, helperTooltip, icon: Icon, label, ...rest } = props;
11
+ const { children, css, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
11
12
  const styles = useSlotRecipe({ key: "sectionHeading" })();
12
13
  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];
13
14
  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);
@@ -22,7 +23,8 @@ var BitkitSectionHeading = forwardRef((props, ref) => {
22
23
  children: [Icon && /* @__PURE__ */ jsx(Icon, {
23
24
  css: styles.icon,
24
25
  size: "24"
25
- }), /* @__PURE__ */ jsx(chakra.h3, {
26
+ }), /* @__PURE__ */ jsx(Text, {
27
+ as: headingLevel,
26
28
  css: styles.label,
27
29
  children: label
28
30
  })]
@@ -1 +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 { 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 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, 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 <chakra.h3 css={styles.label}>{label}</chakra.h3>\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":";;;;;;;AAgBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,KAAK,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAGjF,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,OAAO,IAAR;KAAW,KAAK,OAAO;KAAQ,UAAA;IAAiB,CAAA,CACtC;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"}
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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.451",
4
+ "version": "0.3.453",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",