@bitrise/bitkit-v2 0.3.136 → 0.3.138

package/dist/components/BitkitCalendar/components/CalendarSelect.js

@@ -1,30 +1,30 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { createListCollection as u } from "@chakra-ui/react/collection";
 import { Portal as h } from "@chakra-ui/react/portal";
 import { Select as r } from "@chakra-ui/react/select";
 import { useSlotRecipe as f } from "@chakra-ui/react/styled-system";
 import g from "../../../utilities/AssetSelectChevron.js";
 import S from "../../BitkitSelectMenu/BitkitSelectMenu.js";
-const C = (i) => {
-  const { contentProps: c, controlProps: l, defaultValue: n, items: s, onValueChange: a, value: d } = i, p = u({
-    items: s,
+const C = (c) => {
+  const { contentProps: l, controlProps: n, defaultValue: s, items: a, onValueChange: d, value: p } = c, o = u({
+    items: a,
     groupBy: (m) => m.group || ""
   }), t = f({ key: "datePickerSelect" })();
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ i(
     r.Root,
     {
-      collection: p,
-      defaultValue: n,
-      onValueChange: a,
+      collection: o,
+      defaultValue: s,
+      onValueChange: d,
       size: "md",
-      value: d,
+      value: p,
       children: [
         /* @__PURE__ */ e(r.HiddenSelect, {}),
-        /* @__PURE__ */ o(r.Control, { ...l, children: [
+        /* @__PURE__ */ i(r.Control, { ...n, children: [
           /* @__PURE__ */ e(r.Trigger, { css: t.trigger, children: /* @__PURE__ */ e(r.ValueText, {}) }),
           /* @__PURE__ */ e(r.IndicatorGroup, { css: t.indicatorGroup, children: /* @__PURE__ */ e(r.Indicator, { asChild: !0, css: t.indicator, children: /* @__PURE__ */ e(g, { width: "20", height: "20" }) }) })
         ] }),
-        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ e(S, { contentProps: c }) }) })
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ e(S, { collection: o, contentProps: l }) }) })
       ]
     }
   );

package/dist/components/BitkitSelect/BitkitSelect.d.ts

@@ -1,7 +1,7 @@
 import { FieldRootProps } from '@chakra-ui/react/field';
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectContentProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectContentProps, BitkitSelectMenuCreateItemProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
 export type BitkitSelectProps = FieldRootProps & {
     contentProps?: BitkitSelectContentProps;
@@ -9,11 +9,7 @@ export type BitkitSelectProps = FieldRootProps & {
     errorText?: BitkitFieldProps['errorText'];
     helperText?: BitkitFieldProps['helperText'];
     isLoading?: boolean;
-    items: Array<{
-        group?: string;
-        value: string;
-        label: string;
-    }>;
+    items: Array<BitkitSelectMenuItemProps>;
     label?: BitkitFieldProps['label'];
     onValueChange?: (newVal: string) => void;
     optional?: BitkitFieldProps['optional'];
@@ -25,12 +21,6 @@ export type BitkitSelectProps = FieldRootProps & {
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
     warningText?: BitkitFieldProps['warningText'];
-} & ({
-    hasSearch: true;
-    onSearchChange?: (searchText: string) => void;
-} | {
-    hasSearch?: false;
-    onSearchChange?: never;
-});
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
 declare const BitkitSelect: import('react').ForwardRefExoticComponent<BitkitSelectProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelect;

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -1,84 +1,95 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { createListCollection as w } from "@chakra-ui/react/collection";
-import { Portal as b } from "@chakra-ui/react/portal";
-import { Select as r } from "@chakra-ui/react/select";
-import { forwardRef as z } from "react";
-import O from "../../utilities/AssetSelectChevron.js";
-import j from "../BitkitField/BitkitField.js";
-import F from "../BitkitSelectMenu/BitkitSelectMenu.js";
-import L from "../../icons/IconErrorCircleFilled.js";
-import R from "../../icons/IconWarningYellow.js";
-const A = z((d, s) => {
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Box as L } from "@chakra-ui/react/box";
+import { createListCollection as j } from "@chakra-ui/react/collection";
+import { Portal as F } from "@chakra-ui/react/portal";
+import { Select as r, useSelectContext as H } from "@chakra-ui/react/select";
+import { forwardRef as R } from "react";
+import A from "../../utilities/AssetSelectChevron.js";
+import E from "../BitkitField/BitkitField.js";
+import G from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import M from "../../icons/IconErrorCircleFilled.js";
+import N from "../../icons/IconWarningYellow.js";
+const W = ({ placeholder: i, state: n, size: m }) => {
+  const o = H().selectedItems, c = o[0]?.icon, a = o[0]?.label, s = m === "md" ? "16" : "24";
+  return o[0] ? /* @__PURE__ */ e(r.ValueText, { placeholder: i || n === "readOnly" ? "(not selected)" : "Select an option", children: /* @__PURE__ */ d(L, { display: "flex", alignItems: "center", gap: "8", children: [
+    c && /* @__PURE__ */ e(c, { size: s }),
+    a
+  ] }) }) : /* @__PURE__ */ e(r.ValueText, { placeholder: i ?? (n === "readOnly" ? "(not selected)" : "Select an option") });
+}, Y = R((i, n) => {
   const {
-    contentProps: h,
-    defaultValue: n,
-    errorText: a,
-    hasSearch: p,
-    helperText: m,
-    isLoading: u,
-    items: f,
-    label: g,
-    onSearchChange: S,
-    onValueChange: v,
-    optional: C,
-    placeholder: x,
-    selectProps: I,
-    size: t = "md",
-    state: o,
-    tooltip: y,
-    triggerProps: B,
-    value: c,
-    warningText: P,
-    ...T
-  } = d, V = o === "error" || !!a, k = w({
-    items: f,
-    groupBy: (i) => i.group || ""
+    contentProps: m,
+    createItemHref: h,
+    createItemLabel: o,
+    createItemProps: c,
+    defaultValue: a,
+    errorText: s,
+    hasSearch: g,
+    helperText: S,
+    isLoading: I,
+    items: x,
+    label: C,
+    onCreateItem: v,
+    onSearchChange: y,
+    onValueChange: V,
+    optional: b,
+    placeholder: B,
+    selectProps: P,
+    size: l = "md",
+    state: t,
+    tooltip: T,
+    triggerProps: z,
+    value: u,
+    warningText: k,
+    ...w
+  } = i, O = t === "error" || !!s, f = j({
+    items: x,
+    groupBy: (p) => p.group || ""
   });
   return /* @__PURE__ */ e(
-    j,
+    E,
     {
-      disabled: o === "disabled",
-      errorText: a,
-      helperText: m,
-      invalid: V,
-      label: g,
-      optional: C,
-      readOnly: o === "readOnly",
-      ref: s,
-      tooltip: y,
-      warningText: P,
-      ...T,
-      children: /* @__PURE__ */ l(
+      disabled: t === "disabled",
+      errorText: s,
+      helperText: S,
+      invalid: O,
+      label: C,
+      optional: b,
+      readOnly: t === "readOnly",
+      ref: n,
+      tooltip: T,
+      warningText: k,
+      ...w,
+      children: /* @__PURE__ */ d(
         r.Root,
         {
-          collection: k,
-          size: t,
-          ...I,
-          defaultValue: n ? [n] : void 0,
-          onValueChange: (i) => v?.(i.value[0]),
-          value: c ? [c] : void 0,
+          collection: f,
+          size: l,
+          ...P,
+          defaultValue: a ? [a] : void 0,
+          onValueChange: (p) => V?.(p.value[0]),
+          value: u ? [u] : void 0,
           children: [
             /* @__PURE__ */ e(r.HiddenSelect, {}),
-            /* @__PURE__ */ l(r.Control, { children: [
-              /* @__PURE__ */ e(r.Trigger, { ...B, children: /* @__PURE__ */ e(
-                r.ValueText,
-                {
-                  placeholder: x || o === "readOnly" ? "(not selected)" : "Select an option"
-                }
-              ) }),
-              /* @__PURE__ */ l(r.IndicatorGroup, { children: [
-                o === "error" && /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(L, { size: t === "lg" ? "24" : "16", color: "icon/negative" }) }),
-                o === "warning" && /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(R, { size: t === "lg" ? "24" : "16" }) }),
-                /* @__PURE__ */ e(r.Indicator, { asChild: !0, children: /* @__PURE__ */ e(O, {}) })
+            /* @__PURE__ */ d(r.Control, { children: [
+              /* @__PURE__ */ e(r.Trigger, { ...z, children: /* @__PURE__ */ e(W, { placeholder: B, size: l, state: t }) }),
+              /* @__PURE__ */ d(r.IndicatorGroup, { children: [
+                t === "error" && /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(M, { size: l === "lg" ? "24" : "16", color: "icon/negative" }) }),
+                t === "warning" && /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(N, { size: l === "lg" ? "24" : "16" }) }),
+                /* @__PURE__ */ e(r.Indicator, { asChild: !0, children: /* @__PURE__ */ e(A, {}) })
               ] })
             ] }),
-            /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ e(
-              F,
+            /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ e(
+              G,
               {
-                contentProps: h,
-                isLoading: u,
-                ...p ? { hasSearch: !0, onSearchChange: S } : { hasSearch: !1 },
-                size: t
+                collection: f,
+                createItemHref: h,
+                createItemLabel: o,
+                createItemProps: c,
+                contentProps: m,
+                isLoading: I,
+                onCreateItem: v,
+                ...g ? { hasSearch: !0, onSearchChange: y } : { hasSearch: !1 },
+                size: l
               }
             ) }) })
           ]
@@ -87,7 +98,7 @@ const A = z((d, s) => {
     }
   );
 });
-A.displayName = "BitkitSelect";
+Y.displayName = "BitkitSelect";
 export {
-  A as default
+  Y as default
 };

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts

@@ -1,9 +1,15 @@
+import { ListCollection } from '@chakra-ui/react/collection';
 import { SelectContentProps } from '@chakra-ui/react/select';
-export type BitkitSelectMenuProps = {
-    contentProps?: BitkitSelectContentProps;
+import { AnchorHTMLAttributes } from 'react';
+import { BitkitIconComponent } from '../../icons';
+export type BitkitSelectMenuCreateItemProps = {
+    createItemHref?: string;
+    createItemLabel?: string;
+    createItemProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    onCreateItem?: () => void;
+};
+export type BitkitSelectMenuSearchProps = {
     hasSearch?: boolean;
-    isLoading?: boolean;
-    size?: 'md' | 'lg';
 } & ({
     hasSearch: true;
     onSearchChange?: (searchText: string) => void;
@@ -11,6 +17,19 @@ export type BitkitSelectMenuProps = {
     hasSearch?: false;
     onSearchChange?: never;
 });
+export type BitkitSelectMenuItemProps = {
+    value: string;
+    label: string;
+    group?: string;
+    icon?: BitkitIconComponent;
+};
+export type BitkitSelectMenuProps = {
+    collection: ListCollection<BitkitSelectMenuItemProps>;
+    contentProps?: BitkitSelectContentProps;
+    isLoading?: boolean;
+    size?: 'md' | 'lg';
+    variant?: 'select' | 'combobox';
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
 export type BitkitSelectContentProps = SelectContentProps;
 declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<BitkitSelectMenuProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelectMenu;

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -1,42 +1,76 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Box as s } from "@chakra-ui/react/box";
-import { Input as x } from "@chakra-ui/react/input";
-import { InputGroup as I } from "@chakra-ui/react/input-group";
-import { useSelectContext as S, Select as i } from "@chakra-ui/react/select";
-import { Separator as y } from "@chakra-ui/react/separator";
-import { Spinner as C } from "@chakra-ui/react/spinner";
-import { useSlotRecipe as k } from "@chakra-ui/react/styled-system";
-import { Text as a } from "@chakra-ui/react/text";
-import { forwardRef as G } from "react";
-import b from "../../icons/IconMagnifier.js";
-import v from "../../icons/IconCheck.js";
-const L = G((m, l) => {
-  const { contentProps: p = {}, hasSearch: d = !1, isLoading: f = !1, onSearchChange: h, size: n } = m, { collection: u } = S(), t = k({ key: "select" })({ size: n });
-  return /* @__PURE__ */ o(i.Content, { css: t.content, ref: l, ...p, children: [
-    d && /* @__PURE__ */ e(
-      I,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Box as l } from "@chakra-ui/react/box";
+import { Combobox as z } from "@chakra-ui/react/combobox";
+import { Input as v } from "@chakra-ui/react/input";
+import { InputGroup as G } from "@chakra-ui/react/input-group";
+import { Select as L } from "@chakra-ui/react/select";
+import { Separator as j } from "@chakra-ui/react/separator";
+import { Spinner as B } from "@chakra-ui/react/spinner";
+import { useSlotRecipe as M } from "@chakra-ui/react/styled-system";
+import { Text as d } from "@chakra-ui/react/text";
+import { forwardRef as P } from "react";
+import w from "../../icons/IconMagnifier.js";
+import N from "../../icons/IconCheck.js";
+import R from "../../icons/IconPlus.js";
+const E = P((f, h) => {
+  const {
+    collection: u,
+    contentProps: I = {},
+    hasSearch: x = !1,
+    isLoading: S = !1,
+    onSearchChange: g,
+    size: s,
+    variant: y = "select",
+    createItemLabel: b = "Create item",
+    onCreateItem: m,
+    createItemHref: n,
+    createItemProps: C
+  } = f, o = y === "combobox" ? z : L, r = M({ key: "select" })({ size: s }), i = s === "md" ? "16" : "24";
+  return /* @__PURE__ */ t(o.Content, { css: r.content, ref: h, ...I, children: [
+    x && /* @__PURE__ */ e(
+      G,
       {
-        startElement: /* @__PURE__ */ e(b, { size: n === "lg" ? "24" : "16", color: "icon/tertiary" }),
-        css: t.searchInputGroup,
-        children: /* @__PURE__ */ e(x, { placeholder: "Search...", css: t.searchInput, onChange: (r) => h?.(r.target.value) })
+        startElement: /* @__PURE__ */ e(w, { size: i, color: "icon/tertiary" }),
+        css: r.searchInputGroup,
+        children: /* @__PURE__ */ e(v, { placeholder: "Search...", css: r.searchInput, onChange: (c) => g?.(c.target.value) })
       }
     ),
-    /* @__PURE__ */ e(s, { overflowY: "auto", children: f ? /* @__PURE__ */ o(s, { display: "flex", alignItems: "center", gap: "12", justifyContent: "left", css: t.item, children: [
-      /* @__PURE__ */ e(C, { variant: "purple" }),
-      /* @__PURE__ */ e(a, { color: "text/secondary", textStyle: "body/md/regular", children: "Loading..." })
-    ] }) : u.group().map(([r, g]) => /* @__PURE__ */ o(i.ItemGroup, { children: [
-      r && /* @__PURE__ */ o(i.ItemGroupLabel, { css: t.itemGroupLabel, children: [
-        /* @__PURE__ */ e(a, { color: "text/tertiary", flexShrink: "0", textStyle: "heading/h6", children: r }),
-        /* @__PURE__ */ e(y, { flex: "1" })
+    /* @__PURE__ */ e(l, { overflowY: "auto", children: S ? /* @__PURE__ */ t(l, { display: "flex", alignItems: "center", gap: "12", justifyContent: "left", css: r.item, children: [
+      /* @__PURE__ */ e(B, { variant: "purple" }),
+      /* @__PURE__ */ e(d, { color: "text/secondary", textStyle: "body/md/regular", children: "Loading..." })
+    ] }) : u.group().map(([c, k]) => /* @__PURE__ */ t(o.ItemGroup, { children: [
+      c && /* @__PURE__ */ t(o.ItemGroupLabel, { css: r.itemGroupLabel, children: [
+        /* @__PURE__ */ e(d, { color: "text/tertiary", flexShrink: "0", textStyle: "heading/h6", children: c }),
+        /* @__PURE__ */ e(j, { flex: "1" })
       ] }),
-      g.map((c) => /* @__PURE__ */ o(i.Item, { css: t.item, item: c, ref: l, children: [
-        c.label,
-        /* @__PURE__ */ e(i.ItemIndicator, { children: /* @__PURE__ */ e(v, { size: n === "lg" ? "24" : "16", css: t.itemIndicator }) })
-      ] }, c.value))
-    ] }, r)) })
+      k.map((a) => {
+        const p = a.icon;
+        return /* @__PURE__ */ t(o.Item, { css: r.item, item: a, children: [
+          /* @__PURE__ */ t(l, { display: "flex", alignItems: "center", gap: "8", children: [
+            p && /* @__PURE__ */ e(p, { color: "icon/primary", size: i }),
+            a.label
+          ] }),
+          /* @__PURE__ */ e(o.ItemIndicator, { asChild: !0, children: /* @__PURE__ */ e(N, { size: i, css: r.itemIndicator }) })
+        ] }, a.value);
+      })
+    ] }, c)) }),
+    (n || m) && /* @__PURE__ */ t(
+      l,
+      {
+        as: n ? "a" : "button",
+        css: r.createItem,
+        ...n ? { href: n } : {},
+        onClick: m,
+        ...C,
+        children: [
+          /* @__PURE__ */ e(R, { size: i, color: "button/secondary/icon" }),
+          b
+        ]
+      }
+    )
   ] });
 });
-L.displayName = "BitkitSelectMenu";
+E.displayName = "BitkitSelectMenu";
 export {
-  L as default
+  E as default
 };

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

@@ -1,7 +1,7 @@
 import { alertAnatomy as t } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
 import { rem as o } from "../themeUtils.js";
-const e = r({
+const n = r({
   className: "alert",
   slots: t.keys(),
   base: {
@@ -32,7 +32,10 @@ const e = r({
       }
     },
     description: {
-      textStyle: "comp/notification/message"
+      textStyle: "comp/notification/message",
+      "&:first-child": {
+        marginBlockStart: "2"
+      }
     }
   },
   variants: {
@@ -104,5 +107,5 @@ const e = r({
   }
 });
 export {
-  e as default
+  n as default
 };

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

@@ -33,6 +33,11 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                 textStyle: "body/md/regular";
                 '--input-height': string;
             } | undefined;
+            createItem?: {
+                color: "text/primary";
+                py: "16";
+                textStyle: "body/md/regular";
+            } | undefined;
         };
     };
 }>;

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

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput" | "createItemContainer" | "createItem", {
     size: {
         md: {
             item: {
@@ -22,6 +22,11 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                 textStyle: "body/md/regular";
                 '--input-height': string;
             };
+            createItem: {
+                color: "text/primary";
+                py: "16";
+                textStyle: "body/md/regular";
+            };
             trigger: {
                 textStyle: "body/md/regular";
                 py: string;

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

@@ -1,9 +1,9 @@
 import { selectAnatomy as t } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
 import { rem as e } from "../themeUtils.js";
-const l = o({
+const a = o({
   className: "select",
-  slots: [...t.keys(), "searchInputGroup", "searchInput"],
+  slots: [...t.keys(), "searchInputGroup", "searchInput", "createItemContainer", "createItem"],
   base: {
     trigger: {
       display: "flex",
@@ -129,6 +129,35 @@ const l = o({
       borderColor: "border/minimal",
       appearance: "none",
       paddingLeft: "16"
+    },
+    createItem: {
+      borderTop: "1px solid",
+      borderColor: "border/minimal",
+      display: "flex",
+      alignItems: "center",
+      gap: "12",
+      paddingInlineEnd: "24",
+      paddingInlineStart: "16",
+      py: "20",
+      color: "text/primary",
+      textStyle: "body/lg/regular",
+      textDecoration: "none",
+      width: "100%",
+      cursor: "pointer",
+      textAlign: "start",
+      _hover: {
+        bg: "button/secondary/bg-hover",
+        textDecoration: "none",
+        _active: {
+          bg: "button/secondary/bg-active"
+        }
+      },
+      _active: {
+        bg: "button/secondary/bg-active"
+      },
+      _focusVisible: {
+        outlineOffset: "-3px"
+      }
     }
   },
   variants: {
@@ -155,6 +184,11 @@ const l = o({
           textStyle: "body/md/regular",
           "--input-height": e(24)
         },
+        createItem: {
+          color: "text/primary",
+          py: "16",
+          textStyle: "body/md/regular"
+        },
         trigger: {
           textStyle: "body/md/regular",
           py: e(9)
@@ -168,5 +202,5 @@ const l = o({
   }
 });
 export {
-  l as selectSlotRecipe
+  a as selectSlotRecipe
 };

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

@@ -292,6 +292,11 @@ declare const slotRecipes: {
                     textStyle: "body/md/regular";
                     '--input-height': string;
                 } | undefined;
+                createItem?: {
+                    color: "text/primary";
+                    py: "16";
+                    textStyle: "body/md/regular";
+                } | undefined;
             };
         };
     }>;
@@ -499,7 +504,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput" | "createItemContainer" | "createItem", {
         size: {
             md: {
                 item: {
@@ -523,6 +528,11 @@ declare const slotRecipes: {
                     textStyle: "body/md/regular";
                     '--input-height': string;
                 };
+                createItem: {
+                    color: "text/primary";
+                    py: "16";
+                    textStyle: "body/md/regular";
+                };
                 trigger: {
                     textStyle: "body/md/regular";
                     py: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.136",
+  "version": "0.3.138",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",