@bitrise/bitkit-v2 0.3.116 → 0.3.118

package/dist/components/BitkitAlert/BitkitAlert.d.ts

@@ -0,0 +1,21 @@
+import { AlertRootProps } from '@chakra-ui/react/alert';
+import { JSX } from 'react';
+export type AlertVariants = 'ai' | 'critical' | 'info' | 'progress' | 'success' | 'warning';
+export declare const BUTTON_COLORS_MAP: Record<AlertVariants, string>;
+export declare const ICONS_MAP: Record<AlertVariants, JSX.Element>;
+export type ActionProps = {
+    href?: string;
+    label: string;
+    onClick?: () => void;
+    target?: HTMLAnchorElement['target'];
+};
+export interface BitkitAlertProps extends AlertRootProps {
+    action?: ActionProps;
+    dismissible?: boolean;
+    messageText: string;
+    onClose?: () => void;
+    titleText?: string;
+    variant: AlertVariants;
+}
+declare const BitkitAlert: (props: BitkitAlertProps) => import("react/jsx-runtime").JSX.Element;
+export default BitkitAlert;

package/dist/components/BitkitAlert/BitkitAlert.js

@@ -0,0 +1,63 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Alert as t } from "@chakra-ui/react/alert";
+import { Spinner as f } from "@chakra-ui/react/spinner";
+import g from "../../icons/24x24/IconCheck24.js";
+import d from "../../icons/24x24/IconErrorCircleFilled24.js";
+import h from "../../icons/24x24/IconInfoCircle24.js";
+import C from "../../icons/24x24/IconSparkleFilled24.js";
+import I from "../../icons/24x24/IconWarning24.js";
+import { rem as k } from "../../theme/themeUtils.js";
+import u from "../BitkitCloseButton/BitkitCloseButton.js";
+import S from "../BitkitColorButton/BitkitColorButton.js";
+const l = {
+  ai: "indigo",
+  critical: "red",
+  info: "blue",
+  progress: "purple",
+  success: "green",
+  warning: "yellow"
+}, B = {
+  ai: /* @__PURE__ */ r(C, {}),
+  critical: /* @__PURE__ */ r(d, {}),
+  info: /* @__PURE__ */ r(h, {}),
+  progress: /* @__PURE__ */ r(f, { width: "20", height: "20", margin: "2" }),
+  success: /* @__PURE__ */ r(g, {}),
+  warning: /* @__PURE__ */ r(I, {})
+}, M = (c) => {
+  const { action: i, dismissible: s, messageText: a, onClose: m, titleText: e, variant: o, ...p } = c;
+  return /* @__PURE__ */ n(t.Root, { variant: o, ...p, children: [
+    /* @__PURE__ */ r(t.Indicator, { asChild: o !== "progress", children: B[o] }),
+    /* @__PURE__ */ n(t.Content, { children: [
+      e && /* @__PURE__ */ r(t.Title, { children: e }),
+      /* @__PURE__ */ r(t.Description, { children: a })
+    ] }),
+    !!i && /* @__PURE__ */ r(
+      S,
+      {
+        as: i.href ? "a" : "button",
+        colorPalette: l[o],
+        ...i.href && { href: i.href, target: i.target },
+        onClick: i.onClick,
+        marginInlineStart: "16",
+        marginInlineEnd: "12",
+        whiteSpace: "nowrap",
+        children: i.label
+      }
+    ),
+    !!s && /* @__PURE__ */ r(
+      u,
+      {
+        alignSelf: "flex-start",
+        marginBlockStart: k(7),
+        size: "sm",
+        onClick: m,
+        colorPalette: l[o]
+      }
+    )
+  ] });
+};
+export {
+  l as BUTTON_COLORS_MAP,
+  B as ICONS_MAP,
+  M as default
+};

package/dist/components/BitkitCard/BitkitCard.js

@@ -3,7 +3,7 @@ import { Card as t } from "@chakra-ui/react/card";
 import { forwardRef as e } from "react";
 const m = e((o, i) => {
   const { children: d, ...a } = o;
-  return /* @__PURE__ */ r(t.Root, { ref: i, ...a, children: /* @__PURE__ */ r(t.Body, { children: d }) });
+  return /* @__PURE__ */ r(t.Root, { asChild: !0, ref: i, ...a, children: /* @__PURE__ */ r(t.Body, { children: d }) });
 });
 m.displayName = "BitkitCard";
 export {

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BitkitActionBar, type BitkitActionBarProps } from './BitkitActionBar/BitkitActionBar';
+export { default as BitkitAlert, type BitkitAlertProps } from './BitkitAlert/BitkitAlert';
 export { default as BitkitAvatar, type BitkitAvatarProps } from './BitkitAvatar/BitkitAvatar';
 export { default as BitkitBadge, type BitkitBadgeProps } from './BitkitBadge/BitkitBadge';
 export { default as BitkitButton, type BitkitButtonProps } from './BitkitButton/BitkitButton';
@@ -13,7 +14,6 @@ export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from
 export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
 export { default as BitkitInteractiveTooltip, type BitkitInteractiveTooltipProps, } from './BitkitInteractiveTooltip/BitkitInteractiveTooltip';
 export { default as BitkitNativeSelect, type BitkitNativeSelectProps } from './BitkitNativeSelect/BitkitNativeSelect';
-export { default as BitkitNotification, type BitkitNotificationProps } from './BitkitNotification/BitkitNotification';
 export { default as BitkitNumberInput, type BitkitNumberInputProps } from './BitkitNumberInput/BitkitNumberInput';
 export { default as BitkitSelect, type BitkitSelectProps } from './BitkitSelect/BitkitSelect';
 export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';

package/dist/main.js

@@ -1,21 +1,21 @@
 import { default as r } from "./providers/BitkitProvider.js";
 import { default as a } from "./theme/index.js";
 import { default as l } from "./components/BitkitActionBar/BitkitActionBar.js";
-import { default as s } from "./components/BitkitAvatar/BitkitAvatar.js";
-import { default as c } from "./components/BitkitBadge/BitkitBadge.js";
-import { default as p } from "./components/BitkitButton/BitkitButton.js";
-import { default as x } from "./components/BitkitCard/BitkitCard.js";
-import { default as i } from "./components/BitkitCheckbox/BitkitCheckbox.js";
-import { default as h } from "./components/BitkitCheckboxGroup/BitkitCheckboxGroup.js";
-import { default as k } from "./components/BitkitCloseButton/BitkitCloseButton.js";
-import { default as w } from "./components/BitkitColorButton/BitkitColorButton.js";
-import { default as b } from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
-import { default as F } from "./components/BitkitEmptyState/BitkitEmptyState.js";
-import { default as P } from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
-import { default as y } from "./components/BitkitField/BitkitField.js";
-import { default as T } from "./components/BitkitInteractiveTooltip/BitkitInteractiveTooltip.js";
-import { default as L } from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
-import { default as W } from "./components/BitkitNotification/BitkitNotification.js";
+import { default as s } from "./components/BitkitAlert/BitkitAlert.js";
+import { default as c } from "./components/BitkitAvatar/BitkitAvatar.js";
+import { default as p } from "./components/BitkitBadge/BitkitBadge.js";
+import { default as x } from "./components/BitkitButton/BitkitButton.js";
+import { default as i } from "./components/BitkitCard/BitkitCard.js";
+import { default as h } from "./components/BitkitCheckbox/BitkitCheckbox.js";
+import { default as k } from "./components/BitkitCheckboxGroup/BitkitCheckboxGroup.js";
+import { default as w } from "./components/BitkitCloseButton/BitkitCloseButton.js";
+import { default as b } from "./components/BitkitColorButton/BitkitColorButton.js";
+import { default as F } from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
+import { default as P } from "./components/BitkitEmptyState/BitkitEmptyState.js";
+import { default as y } from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
+import { default as T } from "./components/BitkitField/BitkitField.js";
+import { default as L } from "./components/BitkitInteractiveTooltip/BitkitInteractiveTooltip.js";
+import { default as W } from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
 import { default as U } from "./components/BitkitNumberInput/BitkitNumberInput.js";
 import { default as O } from "./components/BitkitSelect/BitkitSelect.js";
 import { default as z } from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
@@ -565,21 +565,21 @@ import { default as q1 } from "./icons/24x24/IconXcode24.js";
 import { default as $1 } from "./icons/24x24/IconXTwitter24.js";
 export {
   l as BitkitActionBar,
-  s as BitkitAvatar,
-  c as BitkitBadge,
-  p as BitkitButton,
-  x as BitkitCard,
-  i as BitkitCheckbox,
-  h as BitkitCheckboxGroup,
-  k as BitkitCloseButton,
-  w as BitkitColorButton,
-  b as BitkitDefinitionTooltip,
-  F as BitkitEmptyState,
-  P as BitkitExpandableCard,
-  y as BitkitField,
-  T as BitkitInteractiveTooltip,
-  L as BitkitNativeSelect,
-  W as BitkitNotification,
+  s as BitkitAlert,
+  c as BitkitAvatar,
+  p as BitkitBadge,
+  x as BitkitButton,
+  i as BitkitCard,
+  h as BitkitCheckbox,
+  k as BitkitCheckboxGroup,
+  w as BitkitCloseButton,
+  b as BitkitColorButton,
+  F as BitkitDefinitionTooltip,
+  P as BitkitEmptyState,
+  y as BitkitExpandableCard,
+  T as BitkitField,
+  L as BitkitInteractiveTooltip,
+  W as BitkitNativeSelect,
   U as BitkitNumberInput,
   r as BitkitProvider,
   O as BitkitSelect,

package/dist/theme/semantic-tokens/semanticColors.js

@@ -624,22 +624,34 @@ const r = l.colors(
       },
       "ai-gradient": {
         base: {
-          value: "linear-gradient(90deg, {colors.sys.purple} 0%, {colors.sys.indigo} 50%, {colors.sys.blue} 100%)"
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple} 0%, {colors.sys.indigo} 50%, {colors.sys.blue} 100%)"
+          }
         },
         bold: {
-          value: "linear-gradient(90deg, {colors.sys.purple.bold} 0%, {colors.sys.indigo.bold} 50%, {colors.sys.blue.bold} 100%)"
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple.bold} 0%, {colors.sys.indigo.bold} 50%, {colors.sys.blue.bold} 100%)"
+          }
         },
-        muted: {
-          value: "linear-gradient(90deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
+        minimal: {
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
+          }
         },
         moderate: {
-          value: "linear-gradient(90deg, {colors.sys.purple.moderate} 0%, {colors.sys.indigo.moderate} 50%, {colors.sys.blue.moderate} 100%)"
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple.moderate} 0%, {colors.sys.indigo.moderate} 50%, {colors.sys.blue.moderate} 100%)"
+          }
         },
-        subtle: {
-          value: "linear-gradient(90deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
+        muted: {
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
+          }
         },
-        minimal: {
-          value: "linear-gradient(90deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
+        subtle: {
+          value: {
+            _light: "linear-gradient(90deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
+          }
         }
       }
     },
@@ -1666,24 +1678,24 @@ const r = l.colors(
         },
         "minimal-vertical": {
           value: {
-            _light: "linear-gradient(180deg, rgba({colors.sys.purple.minimal}, 1) 0%, rgba({colors.sys.indigo.minimal}, 1) 50%, rgba({colors.sys.blue.minimal}, 1) 100%)"
+            _light: "linear-gradient(180deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
           }
         }
       },
       border: {
         regular: {
           value: {
-            _light: "linear-gradient(135deg, rgba({colors.sys.purple.subtle}, 1) 0%, rgba({colors.sys.indigo.subtle}, 1) 50%, rgba({colors.sys.blue.subtle}, 1) 100%)"
+            _light: "linear-gradient(135deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
           }
         },
         minimal: {
           value: {
-            _light: "linear-gradient(135deg, rgba({colors.sys.purple.minimal}, 1) 0%, rgba({colors.sys.indigo.minimal}, 1) 50%, rgba({colors.sys.blue.minimal}, 1) 100%)"
+            _light: "linear-gradient(135deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
           }
         },
         strong: {
           value: {
-            _light: "linear-gradient(135deg, rgba({colors.sys.purple.muted}, 1) 0%, rgba({colors.sys.indigo.muted}, 1) 50%, rgba({colors.sys.blue.muted}, 1) 100%)"
+            _light: "linear-gradient(135deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
           }
         }
       }

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

@@ -1,101 +1,64 @@
-declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator" | "actionable" | "contentBox", {
-    dismissible: {
-        true: {
-            actionable: {
-                mr: "4";
-            };
-        };
-    };
+declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
     variant: {
         ai: {
             root: {
-                backgroundColor: "status/ai/bg";
-                borderColor: "status/ai/border";
+                border: "1px solid transparent";
+                background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
+                color: "status/ai/text";
             };
             indicator: {
                 color: "status/ai/icon";
             };
-            title: {
-                color: "status/ai/text";
-            };
-            description: {
-                color: "status/ai/text";
-            };
         };
         critical: {
             root: {
                 backgroundColor: "status/critical/bg";
                 borderColor: "status/critical/border";
+                color: "status/critical/text";
             };
             indicator: {
                 color: "status/critical/icon";
             };
-            title: {
-                color: "status/critical/text";
-            };
-            description: {
-                color: "status/critical/text";
-            };
         };
         info: {
             root: {
                 backgroundColor: "status/info/bg";
                 borderColor: "status/info/border";
+                color: "status/info/text";
             };
             indicator: {
                 color: "status/info/icon";
             };
-            title: {
-                color: "status/info/text";
-            };
-            description: {
-                color: "status/info/text";
-            };
         };
         progress: {
             root: {
                 backgroundColor: "status/progress/bg";
                 borderColor: "status/progress/border";
+                color: "status/progress/text";
             };
             indicator: {
                 color: "status/progress/icon";
             };
-            title: {
-                color: "status/progress/text";
-            };
-            description: {
-                color: "status/progress/text";
-            };
         };
         success: {
             root: {
                 backgroundColor: "status/success/bg";
                 borderColor: "status/success/border";
+                color: "status/success/text";
             };
             indicator: {
                 color: "status/success/icon";
             };
-            title: {
-                color: "status/success/text";
-            };
-            description: {
-                color: "status/success/text";
-            };
         };
         warning: {
             root: {
                 backgroundColor: "status/warning/bg";
                 borderColor: "status/warning/border";
+                color: "status/warning/text";
             };
             indicator: {
                 color: "status/warning/icon";
             };
-            title: {
-                color: "status/warning/text";
-            };
-            description: {
-                color: "status/warning/text";
-            };
         };
     };
 }>;

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

@@ -1,143 +1,100 @@
 import { alertAnatomy as t } from "@chakra-ui/react/anatomy";
-import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
-const i = o({
+import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
+import { rem as o } from "../themeUtils.js";
+const e = r({
   className: "alert",
-  slots: [...t.keys(), "actionable", "contentBox"],
+  slots: t.keys(),
   base: {
-    actionable: {
-      alignSelf: "center",
-      flexGrow: 0,
-      flexShrink: 0,
-      mr: "8"
-    },
-    content: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "flex-start",
-      gap: "8",
-      padding: "8",
-      flex: "1",
-      width: "100%"
-    },
-    contentBox: {
-      flex: "1",
-      padding: "4px 8px 4px 4px"
-    },
-    description: {
-      textStyle: "comp/notification/message"
-    },
-    indicator: {
-      paddingTop: "4"
-    },
     root: {
       display: "flex",
-      alignItems: "flex-start",
+      alignItems: "center",
       border: "1px solid",
       borderRadius: "8",
+      paddingInlineStart: o(11),
+      paddingInlineEnd: o(7),
       width: "100%"
     },
+    indicator: {
+      alignSelf: "flex-start",
+      marginBlock: o(11),
+      marginInlineEnd: "8",
+      width: "24",
+      height: "24"
+    },
+    content: {
+      paddingBlock: o(11),
+      flex: "1"
+    },
     title: {
       textStyle: "comp/notification/title",
-      marginBottom: "4"
+      "& + *": {
+        marginBlockStart: "4"
+      }
+    },
+    description: {
+      textStyle: "comp/notification/message"
     }
   },
   variants: {
-    dismissible: {
-      true: {
-        actionable: {
-          mr: "4"
-        }
-      }
-    },
     variant: {
       ai: {
         root: {
-          backgroundColor: "status/ai/bg",
-          borderColor: "status/ai/border"
+          border: "1px solid transparent",
+          background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box",
+          color: "status/ai/text"
         },
         indicator: {
           color: "status/ai/icon"
-        },
-        title: {
-          color: "status/ai/text"
-        },
-        description: {
-          color: "status/ai/text"
         }
       },
       critical: {
         root: {
           backgroundColor: "status/critical/bg",
-          borderColor: "status/critical/border"
+          borderColor: "status/critical/border",
+          color: "status/critical/text"
         },
         indicator: {
           color: "status/critical/icon"
-        },
-        title: {
-          color: "status/critical/text"
-        },
-        description: {
-          color: "status/critical/text"
         }
       },
       info: {
         root: {
           backgroundColor: "status/info/bg",
-          borderColor: "status/info/border"
+          borderColor: "status/info/border",
+          color: "status/info/text"
         },
         indicator: {
           color: "status/info/icon"
-        },
-        title: {
-          color: "status/info/text"
-        },
-        description: {
-          color: "status/info/text"
         }
       },
       progress: {
         root: {
           backgroundColor: "status/progress/bg",
-          borderColor: "status/progress/border"
+          borderColor: "status/progress/border",
+          color: "status/progress/text"
         },
         indicator: {
           color: "status/progress/icon"
-        },
-        title: {
-          color: "status/progress/text"
-        },
-        description: {
-          color: "status/progress/text"
         }
       },
       success: {
         root: {
           backgroundColor: "status/success/bg",
-          borderColor: "status/success/border"
+          borderColor: "status/success/border",
+          color: "status/success/text"
         },
         indicator: {
           color: "status/success/icon"
-        },
-        title: {
-          color: "status/success/text"
-        },
-        description: {
-          color: "status/success/text"
         }
       },
       warning: {
         root: {
           backgroundColor: "status/warning/bg",
-          borderColor: "status/warning/border"
+          borderColor: "status/warning/border",
+          color: "status/warning/text"
         },
         indicator: {
           color: "status/warning/icon"
-        },
-        title: {
-          color: "status/warning/text"
-        },
-        description: {
-          color: "status/warning/text"
         }
       }
     }
@@ -147,5 +104,5 @@ const i = o({
   }
 });
 export {
-  i as default
+  e as default
 };

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

@@ -1,4 +1,4 @@
-declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
+declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "description" | "root", {
     elevation: {
         true: {
             root: {
@@ -12,7 +12,7 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
             };
         };
     };
-    padding: {
+    paddingSize: {
         sm: {
             body: {
                 padding: "16";
@@ -20,8 +20,8 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
         };
         md: {
             body: {
-                paddingX: "24";
-                paddingY: "16";
+                paddingInline: "24";
+                paddingBlock: "16";
             };
         };
         lg: {

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

@@ -24,7 +24,7 @@ const e = r({
         }
       }
     },
-    padding: {
+    paddingSize: {
       sm: {
         body: {
           padding: "16"
@@ -32,8 +32,8 @@ const e = r({
       },
       md: {
         body: {
-          paddingX: "24",
-          paddingY: "16"
+          paddingInline: "24",
+          paddingBlock: "16"
         }
       },
       lg: {
@@ -45,7 +45,7 @@ const e = r({
   },
   defaultVariants: {
     elevation: !0,
-    padding: "lg"
+    paddingSize: "lg"
   }
 });
 export {

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

@@ -1,2 +1,2 @@
-declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
+declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
 export default checkboxSlotRecipe;

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

@@ -1,4 +1,4 @@
-declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
+declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
     colorScheme: {
         white: {
             root: {

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

@@ -1,4 +1,4 @@
-declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix", {
+declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "description" | "root" | "collapsible" | "secdText" | "suffix", {
     size: {
         md: {
             header: {

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

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
     size: {
         md: {
             item: {

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

@@ -1,4 +1,4 @@
-declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
+declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
     size: {
         sm: {
             root: {

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

@@ -1,4 +1,4 @@
-declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
+declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
     variant: {
         line: {
             list: {

package/dist/theme/slot-recipes/index.d.ts

@@ -184,7 +184,7 @@ declare const slotRecipes: {
             rounded: {};
         };
     }>;
-    card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
+    card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "description" | "root", {
         elevation: {
             true: {
                 root: {
@@ -198,7 +198,7 @@ declare const slotRecipes: {
                 };
             };
         };
-        padding: {
+        paddingSize: {
             sm: {
                 body: {
                     padding: "16";
@@ -206,8 +206,8 @@ declare const slotRecipes: {
             };
             md: {
                 body: {
-                    paddingX: "24";
-                    paddingY: "16";
+                    paddingInline: "24";
+                    paddingBlock: "16";
                 };
             };
             lg: {
@@ -217,8 +217,8 @@ declare const slotRecipes: {
             };
         };
     }>;
-    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
-    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
+    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
+    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
         colorScheme: {
             white: {
                 root: {
@@ -232,7 +232,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "description" | "root" | "collapsible" | "secdText" | "suffix", {
         size: {
             md: {
                 header: {
@@ -275,104 +275,67 @@ declare const slotRecipes: {
             };
         };
     }>;
-    alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator" | "actionable" | "contentBox", {
-        dismissible: {
-            true: {
-                actionable: {
-                    mr: "4";
-                };
-            };
-        };
+    alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
         variant: {
             ai: {
                 root: {
-                    backgroundColor: "status/ai/bg";
-                    borderColor: "status/ai/border";
+                    border: "1px solid transparent";
+                    background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
+                    color: "status/ai/text";
                 };
                 indicator: {
                     color: "status/ai/icon";
                 };
-                title: {
-                    color: "status/ai/text";
-                };
-                description: {
-                    color: "status/ai/text";
-                };
             };
             critical: {
                 root: {
                     backgroundColor: "status/critical/bg";
                     borderColor: "status/critical/border";
+                    color: "status/critical/text";
                 };
                 indicator: {
                     color: "status/critical/icon";
                 };
-                title: {
-                    color: "status/critical/text";
-                };
-                description: {
-                    color: "status/critical/text";
-                };
             };
             info: {
                 root: {
                     backgroundColor: "status/info/bg";
                     borderColor: "status/info/border";
+                    color: "status/info/text";
                 };
                 indicator: {
                     color: "status/info/icon";
                 };
-                title: {
-                    color: "status/info/text";
-                };
-                description: {
-                    color: "status/info/text";
-                };
             };
             progress: {
                 root: {
                     backgroundColor: "status/progress/bg";
                     borderColor: "status/progress/border";
+                    color: "status/progress/text";
                 };
                 indicator: {
                     color: "status/progress/icon";
                 };
-                title: {
-                    color: "status/progress/text";
-                };
-                description: {
-                    color: "status/progress/text";
-                };
             };
             success: {
                 root: {
                     backgroundColor: "status/success/bg";
                     borderColor: "status/success/border";
+                    color: "status/success/text";
                 };
                 indicator: {
                     color: "status/success/icon";
                 };
-                title: {
-                    color: "status/success/text";
-                };
-                description: {
-                    color: "status/success/text";
-                };
             };
             warning: {
                 root: {
                     backgroundColor: "status/warning/bg";
                     borderColor: "status/warning/border";
+                    color: "status/warning/text";
                 };
                 indicator: {
                     color: "status/warning/icon";
                 };
-                title: {
-                    color: "status/warning/text";
-                };
-                description: {
-                    color: "status/warning/text";
-                };
             };
         };
     }>;
@@ -392,7 +355,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
         size: {
             md: {
                 item: {
@@ -424,7 +387,7 @@ declare const slotRecipes: {
             lg: {};
         };
     }>;
-    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
+    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
         size: {
             sm: {
                 root: {
@@ -454,7 +417,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
+    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
         variant: {
             line: {
                 list: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.116",
+  "version": "0.3.118",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -55,24 +55,24 @@
   },
   "devDependencies": {
     "@bitrise/eslint-plugin": "^4.1.0",
-    "@chakra-ui/cli": "^3.32.0",
+    "@chakra-ui/cli": "^3.33.0",
     "@figma-export/cli": "^6.3.0",
     "@figma-export/output-components-as-svg": "^6.2.4",
     "@figma-export/transform-svg-with-svgo": "^6.2.4",
     "@google-cloud/storage": "^7.19.0",
-    "@storybook/addon-docs": "10.2.7",
-    "@storybook/react-vite": "10.2.7",
+    "@storybook/addon-docs": "10.2.11",
+    "@storybook/react-vite": "10.2.11",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^24.10.11",
-    "@types/react": "^19.2.13",
+    "@types/node": "^24.10.13",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
-    "axios": "^1.13.4",
+    "@vitejs/plugin-react": "^5.1.4",
+    "axios": "^1.13.5",
     "es-toolkit": "^1.44.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "release-it": "^19.2.4",
-    "storybook": "10.2.7",
+    "storybook": "10.2.11",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
@@ -80,7 +80,7 @@
     "vite-plugin-svgr": "^4.5.0"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.32.0",
+    "@chakra-ui/react": "^3.33.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource-variable/figtree": "^5.2.10",

package/dist/components/BitkitNotification/BitkitNotification.d.ts

@@ -1,18 +0,0 @@
-import { AlertRootProps } from '@chakra-ui/react/alert';
-export type NotificationVariants = 'ai' | 'critical' | 'info' | 'progress' | 'success' | 'warning';
-export type ActionProps = {
-    label: string;
-    href?: string;
-    target?: string;
-    onClick?: () => void;
-};
-export interface BitkitNotificationProps extends AlertRootProps {
-    actionable?: ActionProps;
-    dismissable?: boolean;
-    messageText: string;
-    onClose?: () => void;
-    titleText?: string;
-    variant: NotificationVariants;
-}
-declare const BitkitNotification: (props: BitkitNotificationProps) => import("react/jsx-runtime").JSX.Element;
-export default BitkitNotification;

package/dist/components/BitkitNotification/BitkitNotification.js

@@ -1,51 +0,0 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { Alert as e } from "@chakra-ui/react/alert";
-import { Box as d } from "@chakra-ui/react/box";
-import { Spinner as h } from "@chakra-ui/react/spinner";
-import { useSlotRecipe as u } from "@chakra-ui/react/styled-system";
-import C from "../../icons/24x24/IconCheck24.js";
-import g from "../../icons/24x24/IconErrorCircleFilled24.js";
-import k from "../../icons/24x24/IconInfoCircle24.js";
-import B from "../../icons/24x24/IconSparkleFilled24.js";
-import I from "../../icons/24x24/IconWarning24.js";
-import x from "../BitkitCloseButton/BitkitCloseButton.js";
-import b from "../BitkitColorButton/BitkitColorButton.js";
-const s = {
-  ai: "turquoise",
-  critical: "red",
-  info: "blue",
-  progress: "purple",
-  success: "green",
-  warning: "yellow"
-}, S = {
-  ai: /* @__PURE__ */ o(B, {}),
-  critical: /* @__PURE__ */ o(g, {}),
-  info: /* @__PURE__ */ o(k, {}),
-  progress: /* @__PURE__ */ o(h, {}),
-  success: /* @__PURE__ */ o(C, {}),
-  warning: /* @__PURE__ */ o(I, {})
-}, v = (a) => {
-  const { actionable: r, dismissible: n, messageText: m, onClose: p, titleText: c, variant: t, ...f } = a, i = u({ key: "alert" })({ variant: t, dismissible: n });
-  return /* @__PURE__ */ o(e.Root, { variant: t, ...f, children: /* @__PURE__ */ l(e.Content, { children: [
-    /* @__PURE__ */ o(e.Indicator, { css: i.indicator, children: S[t] }),
-    /* @__PURE__ */ l(d, { css: i.contentBox, children: [
-      c && /* @__PURE__ */ o(e.Title, { children: c }),
-      /* @__PURE__ */ o(e.Description, { children: m })
-    ] }),
-    !!r && /* @__PURE__ */ o(
-      b,
-      {
-        as: r.href ? "a" : "button",
-        colorPalette: s[t],
-        css: i.actionable,
-        ...r.href && { href: r.href, target: r.target },
-        onClick: r.onClick,
-        children: r.label
-      }
-    ),
-    !!n && /* @__PURE__ */ o(x, { size: "sm", onClick: p, colorPalette: s[t] })
-  ] }) });
-};
-export {
-  v as default
-};