@bitrise/bitkit-v2 0.3.397 → 0.3.398

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.
@@ -1,10 +1,6 @@
1
1
  import { BoxProps } from '@chakra-ui/react/box';
2
- export type RibbonActionProps = {
3
- href?: string;
4
- label: string;
5
- onClick?: () => void;
6
- target?: HTMLAnchorElement['target'];
7
- };
2
+ import { NotificationAction } from '../common/notificationMaps';
3
+ export type RibbonActionProps = NotificationAction;
8
4
  export type RibbonLinkProps = {
9
5
  href?: string;
10
6
  label: string;
@@ -32,16 +32,18 @@ var BitkitRibbon = forwardRef((props, ref) => {
32
32
  href: action.href,
33
33
  isExternal: action.target === "_blank",
34
34
  onClick: action.onClick,
35
+ state: action.state,
35
36
  target: action.target,
36
37
  children: action.label
37
38
  }) : /* @__PURE__ */ jsx(BitkitColorButton, {
38
39
  colorVariant,
39
40
  onClick: action.onClick,
41
+ state: action.state,
40
42
  children: action.label
41
43
  }))]
42
44
  }), onDismiss && /* @__PURE__ */ jsx(BitkitCloseButton, {
43
45
  colorVariant,
44
- flexShrink: "0",
46
+ css: styles.closeButton,
45
47
  size: "sm",
46
48
  onClick: onDismiss
47
49
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action &&\n (action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={colorVariant}\n href={action.href}\n isExternal={action.target === '_blank'}\n onClick={action.onClick}\n target={action.target}\n >\n {action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick}>\n {action.label}\n </BitkitColorButton>\n ))}\n </chakra.div>\n {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n </Box>\n );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAC5D,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aAAa,oBAAC,mBAAD;GAAiC;GAAc,YAAW;GAAI,MAAK;GAAK,SAAS;EAAY,CAAA,CACxG;;AAET,CAAC;AAED,aAAa,cAAc"}
1
+ {"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type RibbonActionProps = NotificationAction;\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action &&\n (action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={colorVariant}\n href={action.href}\n isExternal={action.target === '_blank'}\n onClick={action.onClick}\n state={action.state}\n target={action.target}\n >\n {action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick} state={action.state}>\n {action.label}\n </BitkitColorButton>\n ))}\n </chakra.div>\n {onDismiss && (\n <BitkitCloseButton colorVariant={colorVariant} css={styles.closeButton} size=\"sm\" onClick={onDismiss} />\n )}\n </Box>\n );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AAyBA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,OAAO,OAAO;IACd,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAAS,OAAO,OAAO;IACnF,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aACC,oBAAC,mBAAD;GAAiC;GAAc,KAAK,OAAO;GAAa,MAAK;GAAK,SAAS;EAAY,CAAA,CAEtG;;AAET,CAAC;AAED,aAAa,cAAc"}
@@ -7,8 +7,8 @@ export type NotificationAction = {
7
7
  /**
8
8
  * Disabled or loading state of the action button.
9
9
  *
10
- * Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions
11
- * render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`
10
+ * Known gap: not every consumer can honour the full range. Alert, Toast, PromoBanner and Ribbon
11
+ * actions render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`
12
12
  * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so
13
13
  * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s
14
14
  * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`
@@ -1 +1 @@
1
- {"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n href?: string;\n label: string;\n onClick?: () => void;\n /**\n * Disabled or loading state of the action button.\n *\n * Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions\n * render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`\n * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so\n * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s\n * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`\n * kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the\n * same trick — its own change.\n */\n state?: 'disabled' | 'loading';\n target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n ai: 'indigo',\n critical: 'red',\n info: 'blue',\n progress: 'purple',\n success: 'green',\n warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n ai: IconSparkleFilled,\n critical: IconErrorCircleFilled,\n info: IconInfoCircle,\n progress: Spinner,\n success: IconCheck,\n warning: IconWarning,\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,sBAAgE;CAC3E,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX"}
1
+ {"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n href?: string;\n label: string;\n onClick?: () => void;\n /**\n * Disabled or loading state of the action button.\n *\n * Known gap: not every consumer can honour the full range. Alert, Toast, PromoBanner and Ribbon\n * actions render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`\n * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so\n * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s\n * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`\n * kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the\n * same trick — its own change.\n */\n state?: 'disabled' | 'loading';\n target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n ai: 'indigo',\n critical: 'red',\n info: 'blue',\n progress: 'purple',\n success: 'green',\n warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n ai: IconSparkleFilled,\n critical: IconErrorCircleFilled,\n info: IconInfoCircle,\n progress: Spinner,\n success: IconCheck,\n warning: IconWarning,\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,sBAAgE;CAC3E,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX"}
@@ -1,4 +1,4 @@
1
- declare const ribbonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", {
1
+ declare const ribbonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "closeButton" | "root" | "textBlock", {
2
2
  colorVariant: {
3
3
  blue: {
4
4
  root: {
@@ -1,3 +1,4 @@
1
+ import { rem } from "../themeUtils.js";
1
2
  import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
2
3
  //#region lib/theme/slot-recipes/Ribbon.recipe.ts
3
4
  var ribbonSlotRecipe = defineSlotRecipe({
@@ -5,33 +6,72 @@ var ribbonSlotRecipe = defineSlotRecipe({
5
6
  slots: [
6
7
  "root",
7
8
  "content",
8
- "textBlock"
9
+ "textBlock",
10
+ "closeButton"
9
11
  ],
10
12
  base: {
11
13
  root: {
12
- alignItems: "center",
14
+ alignItems: {
15
+ base: "flex-start",
16
+ tablet: "center"
17
+ },
13
18
  borderBlockStyle: "solid",
14
19
  borderBlockWidth: "1",
15
20
  display: "flex",
21
+ gap: {
22
+ base: "12",
23
+ tablet: 0
24
+ },
16
25
  paddingBlock: "12",
17
- paddingInline: "24",
26
+ paddingInline: {
27
+ base: "16",
28
+ tablet: "24"
29
+ },
18
30
  width: "full"
19
31
  },
20
32
  content: {
21
- alignItems: "center",
33
+ alignItems: {
34
+ base: "flex-start",
35
+ tablet: "center"
36
+ },
22
37
  display: "flex",
23
38
  flex: "1 0 0",
24
- gap: "16",
39
+ flexDirection: {
40
+ base: "column",
41
+ tablet: "row"
42
+ },
43
+ gap: {
44
+ base: "12",
45
+ tablet: "16"
46
+ },
25
47
  justifyContent: "center",
26
48
  minHeight: "32",
27
49
  minWidth: 0
28
50
  },
29
51
  textBlock: {
30
- alignItems: "baseline",
52
+ alignItems: {
53
+ base: "flex-start",
54
+ tablet: "baseline"
55
+ },
31
56
  display: "flex",
57
+ flexDirection: {
58
+ base: "column",
59
+ tablet: "row"
60
+ },
32
61
  gap: "4",
33
62
  minWidth: 0,
34
- textStyle: "body/md/regular"
63
+ textStyle: "body/md/regular",
64
+ width: {
65
+ base: "full",
66
+ tablet: "auto"
67
+ }
68
+ },
69
+ closeButton: {
70
+ flexShrink: 0,
71
+ marginInlineEnd: {
72
+ base: rem(-4),
73
+ tablet: 0
74
+ }
35
75
  }
36
76
  },
37
77
  variants: { colorVariant: {
@@ -1 +1 @@
1
- {"version":3,"file":"Ribbon.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Ribbon.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst ribbonSlotRecipe = defineSlotRecipe({\n className: 'ribbon',\n slots: ['root', 'content', 'textBlock'],\n base: {\n root: {\n alignItems: 'center',\n borderBlockStyle: 'solid',\n borderBlockWidth: '1',\n display: 'flex',\n paddingBlock: '12',\n paddingInline: '24',\n width: 'full',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n flex: '1 0 0',\n gap: '16',\n justifyContent: 'center',\n minHeight: '32',\n minWidth: 0,\n },\n textBlock: {\n alignItems: 'baseline',\n display: 'flex',\n gap: '4',\n minWidth: 0,\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n colorVariant: {\n blue: { root: { background: 'color/blue/subtle', borderColor: 'color/blue/muted', color: 'color/blue/strong' } },\n green: {\n root: { background: 'color/green/subtle', borderColor: 'color/green/muted', color: 'color/green/strong' },\n },\n yellow: {\n root: { background: 'color/yellow/minimal', borderColor: 'color/yellow/muted', color: 'color/yellow/strong' },\n },\n red: { root: { background: 'color/red/subtle', borderColor: 'color/red/muted', color: 'color/red/strong' } },\n purple: {\n root: { background: 'color/purple/subtle', borderColor: 'color/purple/muted', color: 'color/purple/strong' },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'blue',\n },\n});\n\nexport default ribbonSlotRecipe;\n"],"mappings":";;AAEA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;CAAW;CACtC,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,kBAAkB;GAClB,kBAAkB;GAClB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;EACT;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,gBAAgB;GAChB,WAAW;GACX,UAAU;EACZ;EACA,WAAW;GACT,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,WAAW;EACb;CACF;CACA,UAAU,EACR,cAAc;EACZ,MAAM,EAAE,MAAM;GAAE,YAAY;GAAqB,aAAa;GAAoB,OAAO;EAAoB,EAAE;EAC/G,OAAO,EACL,MAAM;GAAE,YAAY;GAAsB,aAAa;GAAqB,OAAO;EAAqB,EAC1G;EACA,QAAQ,EACN,MAAM;GAAE,YAAY;GAAwB,aAAa;GAAsB,OAAO;EAAsB,EAC9G;EACA,KAAK,EAAE,MAAM;GAAE,YAAY;GAAoB,aAAa;GAAmB,OAAO;EAAmB,EAAE;EAC3G,QAAQ,EACN,MAAM;GAAE,YAAY;GAAuB,aAAa;GAAsB,OAAO;EAAsB,EAC7G;CACF,EACF;CACA,iBAAiB,EACf,cAAc,OAChB;AACF,CAAC"}
1
+ {"version":3,"file":"Ribbon.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Ribbon.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst ribbonSlotRecipe = defineSlotRecipe({\n className: 'ribbon',\n slots: ['root', 'content', 'textBlock', 'closeButton'],\n base: {\n root: {\n // Below tablet everything stacks, so the close button rides at the top of the block\n // instead of being centred against it.\n alignItems: { base: 'flex-start', tablet: 'center' },\n borderBlockStyle: 'solid',\n borderBlockWidth: '1',\n display: 'flex',\n // On desktop the close button sits flush after the content and relies on its own\n // 8px icon inset; stacked, the wrapped text needs real space before it.\n gap: { base: '12', tablet: 0 },\n paddingBlock: '12',\n paddingInline: { base: '16', tablet: '24' },\n width: 'full',\n },\n content: {\n // `flex-start` rather than `stretch`: the text block opts back into full width below,\n // while the action button keeps its intrinsic width instead of spanning the ribbon.\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n flex: '1 0 0',\n flexDirection: { base: 'column', tablet: 'row' },\n gap: { base: '12', tablet: '16' },\n justifyContent: 'center',\n minHeight: '32',\n minWidth: 0,\n },\n textBlock: {\n alignItems: { base: 'flex-start', tablet: 'baseline' },\n display: 'flex',\n // Below tablet title, message and link each get their own line. As a row they would\n // shrink into narrow side-by-side columns instead of wrapping.\n flexDirection: { base: 'column', tablet: 'row' },\n gap: '4',\n minWidth: 0,\n textStyle: 'body/md/regular',\n width: { base: 'full', tablet: 'auto' },\n },\n closeButton: {\n flexShrink: 0,\n // Stacked, Figma leaves 12px to the right of the close button while the text keeps the\n // root's 16px inline padding. The bleed buys back those 4px without moving the content.\n marginInlineEnd: { base: rem(-4), tablet: 0 },\n },\n },\n variants: {\n colorVariant: {\n blue: { root: { background: 'color/blue/subtle', borderColor: 'color/blue/muted', color: 'color/blue/strong' } },\n green: {\n root: { background: 'color/green/subtle', borderColor: 'color/green/muted', color: 'color/green/strong' },\n },\n yellow: {\n root: { background: 'color/yellow/minimal', borderColor: 'color/yellow/muted', color: 'color/yellow/strong' },\n },\n red: { root: { background: 'color/red/subtle', borderColor: 'color/red/muted', color: 'color/red/strong' } },\n purple: {\n root: { background: 'color/purple/subtle', borderColor: 'color/purple/muted', color: 'color/purple/strong' },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'blue',\n },\n});\n\nexport default ribbonSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;EAAa;CAAa;CACrD,MAAM;EACJ,MAAM;GAGJ,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAS;GACnD,kBAAkB;GAClB,kBAAkB;GAClB,SAAS;GAGT,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAE;GAC7B,cAAc;GACd,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC1C,OAAO;EACT;EACA,SAAS;GAGP,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAS;GACnD,SAAS;GACT,MAAM;GACN,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,gBAAgB;GAChB,WAAW;GACX,UAAU;EACZ;EACA,WAAW;GACT,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAW;GACrD,SAAS;GAGT,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;GACL,UAAU;GACV,WAAW;GACX,OAAO;IAAE,MAAM;IAAQ,QAAQ;GAAO;EACxC;EACA,aAAa;GACX,YAAY;GAGZ,iBAAiB;IAAE,MAAM,IAAI,EAAE;IAAG,QAAQ;GAAE;EAC9C;CACF;CACA,UAAU,EACR,cAAc;EACZ,MAAM,EAAE,MAAM;GAAE,YAAY;GAAqB,aAAa;GAAoB,OAAO;EAAoB,EAAE;EAC/G,OAAO,EACL,MAAM;GAAE,YAAY;GAAsB,aAAa;GAAqB,OAAO;EAAqB,EAC1G;EACA,QAAQ,EACN,MAAM;GAAE,YAAY;GAAwB,aAAa;GAAsB,OAAO;EAAsB,EAC9G;EACA,KAAK,EAAE,MAAM;GAAE,YAAY;GAAoB,aAAa;GAAmB,OAAO;EAAmB,EAAE;EAC3G,QAAQ,EACN,MAAM;GAAE,YAAY;GAAuB,aAAa;GAAsB,OAAO;EAAsB,EAC7G;CACF,EACF;CACA,iBAAiB,EACf,cAAc,OAChB;AACF,CAAC"}
@@ -1655,7 +1655,7 @@ declare const slotRecipes: {
1655
1655
  };
1656
1656
  };
1657
1657
  }>;
1658
- ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", {
1658
+ ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "closeButton" | "root" | "textBlock", {
1659
1659
  colorVariant: {
1660
1660
  blue: {
1661
1661
  root: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.397",
4
+ "version": "0.3.398",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",