@bitrise/bitkit-v2 0.3.319 → 0.3.321

package/dist/components/BitkitTagsInput/BitkitTagsInput.d.ts

@@ -5,6 +5,14 @@ export interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children'
     blurBehavior?: TagsInput.RootProps['blurBehavior'];
     defaultValue?: string[];
     delimiter?: TagsInput.RootProps['delimiter'];
+    /**
+     * Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered
+     * in the red color set (like BitkitTag `colorVariant="red"`). Unlike `validate` — which gates
+     * whether a tag can be *added* — this styles tags that are already in the list (e.g. a pasted
+     * or pre-filled value that fails a format check). While any tag is invalid the whole field flips
+     * to the error state automatically; pass `errorText` to surface the accompanying message.
+     */
+    isValueInvalid?: (value: string) => boolean;
     max?: number;
     onValueChange?: TagsInput.RootProps['onValueChange'];
     placeholder?: string;

package/dist/components/BitkitTagsInput/BitkitTagsInput.js

@@ -4,7 +4,7 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitLabel from "../BitkitLabel/BitkitLabel.js";
 import BitkitField from "../BitkitField/BitkitField.js";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TagsInput } from "@chakra-ui/react/tags-input";
 //#region lib/components/BitkitTagsInput/BitkitTagsInput.tsx
@@ -16,13 +16,22 @@ var rejectEmpty = ({ inputValue }) => inputValue.trim().length > 0;
 * number of tags — a live counter is then shown next to the label.
 */
 var BitkitTagsInput = forwardRef((props, ref) => {
-	const { addOnPaste = true, blurBehavior = "add", defaultValue, delimiter = /[\s,]+/, max, onValueChange, placeholder, size = "lg", state, validate, value, badge, label, optional, tooltip, ...fieldProps } = props;
+	const { addOnPaste = true, blurBehavior = "add", defaultValue, delimiter = /[\s,]+/, isValueInvalid, max, onValueChange, placeholder, size = "lg", state, validate, value, badge, label, optional, tooltip, ...fieldProps } = props;
 	const effectiveValidate = (details) => rejectEmpty(details) && (validate?.(details) ?? true);
 	const styles = useSlotRecipe({ key: "tagsInput" })({ size });
-	const hasWarning = state === "warning" || !!fieldProps.warningText;
-	const isInvalid = state === "error" || !!fieldProps.errorText;
-	const isDisabled = state === "disabled";
-	const isReadOnly = state === "readOnly";
+	const [uncontrolledValues, setUncontrolledValues] = useState(defaultValue ?? []);
+	const currentValues = value ?? uncontrolledValues;
+	const handleValueChange = (details) => {
+		if (value === void 0) setUncontrolledValues(details.value);
+		onValueChange?.(details);
+	};
+	const hasInvalidTag = !!isValueInvalid && currentValues.some(isValueInvalid);
+	const effectiveState = hasInvalidTag && state !== "disabled" && state !== "readOnly" ? "error" : state;
+	const showInvalidTags = hasInvalidTag && effectiveState !== "disabled" && effectiveState !== "readOnly";
+	const hasWarning = effectiveState === "warning" || !!fieldProps.warningText;
+	const isInvalid = effectiveState === "error" || !!fieldProps.errorText;
+	const isDisabled = effectiveState === "disabled";
+	const isReadOnly = effectiveState === "readOnly";
 	let statusIcon = void 0;
 	if (isInvalid) statusIcon = /* @__PURE__ */ jsx(IconErrorCircleFilled, {
 		color: "icon/negative",
@@ -37,7 +46,7 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 		disabled: isDisabled,
 		invalid: isInvalid,
 		max,
-		onValueChange,
+		onValueChange: handleValueChange,
 		readOnly: isReadOnly,
 		size,
 		validate: effectiveValidate,
@@ -45,7 +54,7 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 		children: /* @__PURE__ */ jsx(TagsInput.Context, { children: ({ value: tagValues }) => /* @__PURE__ */ jsxs(BitkitField, {
 			optional,
 			ref,
-			state,
+			state: effectiveState,
 			...fieldProps,
 			counterText: void 0,
 			children: [
@@ -64,7 +73,10 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 					children: [tagValues.map((tagValue, index) => /* @__PURE__ */ jsxs(TagsInput.Item, {
 						index,
 						value: tagValue,
-						children: [/* @__PURE__ */ jsxs(TagsInput.ItemPreview, { children: [/* @__PURE__ */ jsx(TagsInput.ItemText, { children: tagValue }), !isReadOnly && /* @__PURE__ */ jsx(TagsInput.ItemDeleteTrigger, { children: /* @__PURE__ */ jsx(IconCross, { size: "16" }) })] }), /* @__PURE__ */ jsx(TagsInput.ItemInput, {})]
+						children: [/* @__PURE__ */ jsxs(TagsInput.ItemPreview, {
+							"data-invalid": showInvalidTags && isValueInvalid?.(tagValue) || void 0,
+							children: [/* @__PURE__ */ jsx(TagsInput.ItemText, { children: tagValue }), !isReadOnly && /* @__PURE__ */ jsx(TagsInput.ItemDeleteTrigger, { children: /* @__PURE__ */ jsx(IconCross, { size: "16" }) })]
+						}), /* @__PURE__ */ jsx(TagsInput.ItemInput, {})]
 					}, tagValue)), /* @__PURE__ */ jsx(TagsInput.Input, { placeholder })]
 				}), (statusIcon || tagValues.length > 0 && !isDisabled && !isReadOnly) && /* @__PURE__ */ jsxs(chakra.div, {
 					css: styles.suffixBlock,

package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' | 'counterText' | 'state'> {\n  addOnPaste?: TagsInput.RootProps['addOnPaste'];\n  blurBehavior?: TagsInput.RootProps['blurBehavior'];\n  defaultValue?: string[];\n  delimiter?: TagsInput.RootProps['delimiter'];\n  max?: number;\n  onValueChange?: TagsInput.RootProps['onValueChange'];\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  validate?: TagsInput.RootProps['validate'];\n  value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/**\n * A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n  const {\n    addOnPaste = true,\n    blurBehavior = 'add',\n    defaultValue,\n    // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n    // \"alpha,  beta\" doesn't spawn an empty tag between the alpha and beta.\n    delimiter = /[\\s,]+/,\n    max,\n    onValueChange,\n    placeholder,\n    size = 'lg',\n    state,\n    validate,\n    value,\n    // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n    // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n    badge,\n    label,\n    optional,\n    tooltip,\n    ...fieldProps\n  } = props;\n\n  // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n  // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n  const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n    rejectEmpty(details) && (validate?.(details) ?? true);\n\n  const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n\n  let statusIcon = undefined;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n  }\n\n  return (\n    <TagsInput.Root\n      addOnPaste={addOnPaste}\n      blurBehavior={blurBehavior}\n      defaultValue={defaultValue}\n      delimiter={delimiter}\n      disabled={isDisabled}\n      invalid={isInvalid}\n      max={max}\n      onValueChange={onValueChange}\n      readOnly={isReadOnly}\n      size={size}\n      validate={effectiveValidate}\n      value={value}\n    >\n      <TagsInput.Context>\n        {({ value: tagValues }) => (\n          // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n          // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n          // rendered via TagsInput.Label instead.\n          <BitkitField optional={optional} ref={ref} state={state} {...fieldProps} counterText={undefined}>\n            {(!!label || !!badge || max !== undefined) && (\n              // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n              // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n              // documented composition — it associates with TagsInput.Input.\n              <TagsInput.Label asChild>\n                <BitkitLabel\n                  badge={badge}\n                  counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n                  optional={optional}\n                  tooltip={tooltip}\n                >\n                  {label}\n                </BitkitLabel>\n              </TagsInput.Label>\n            )}\n            <TagsInput.Control>\n              <chakra.div css={styles.tagsBlock}>\n                {tagValues.map((tagValue, index) => (\n                  <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n                    <TagsInput.ItemPreview>\n                      <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n                      {!isReadOnly && (\n                        <TagsInput.ItemDeleteTrigger>\n                          <IconCross size=\"16\" />\n                        </TagsInput.ItemDeleteTrigger>\n                      )}\n                    </TagsInput.ItemPreview>\n                    <TagsInput.ItemInput />\n                  </TagsInput.Item>\n                ))}\n                <TagsInput.Input placeholder={placeholder} />\n              </chakra.div>\n              {(statusIcon || (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n                <chakra.div css={styles.suffixBlock}>\n                  {statusIcon}\n                  {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n                    <TagsInput.ClearTrigger css={styles.clearTrigger}>\n                      <IconCross size={size === 'lg' ? '24' : '16'} />\n                    </TagsInput.ClearTrigger>\n                  )}\n                </chakra.div>\n              )}\n            </TagsInput.Control>\n            <TagsInput.HiddenInput />\n          </BitkitField>\n        )}\n      </TagsInput.Context>\n    </TagsInput.Root>\n  );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,eAA6D,EAAE,iBAAiB,WAAW,KAAK,CAAC,CAAC,SAAS;;;;;;;AAQjH,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,aAAa,MACb,eAAe,OACf,cAGA,YAAY,UACZ,KACA,eACA,aACA,OAAO,MACP,OACA,UACA,OAGA,OACA,OACA,UACA,SACA,GAAG,eACD;CAIJ,MAAM,qBAAmE,YACvE,YAAY,OAAO,MAAM,WAAW,OAAO,KAAK;CAElD,MAAM,SAAS,cAAc,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;CAE3D,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAE7B,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAGtE,OACE,oBAAC,UAAU,MAAX;EACc;EACE;EACA;EACH;EACX,UAAU;EACV,SAAS;EACJ;EACU;EACf,UAAU;EACJ;EACN,UAAU;EACH;YAEP,oBAAC,UAAU,SAAX,EAAA,WACI,EAAE,OAAO,gBAIT,qBAAC,aAAD;GAAuB;GAAe;GAAY;GAAO,GAAI;GAAY,aAAa,KAAA;aAAtF;KACI,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,QAAQ,KAAA,MAI9B,oBAAC,UAAU,OAAX;KAAiB,SAAA;eACf,oBAAC,aAAD;MACS;MACP,aAAa,QAAQ,KAAA,IAAY,GAAG,UAAU,OAAO,GAAG,QAAQ,KAAA;MACtD;MACD;gBAER;KACU,CAAA;IACE,CAAA;IAEnB,qBAAC,UAAU,SAAX,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,UAAU,KAAK,UAAU,UACxB,qBAAC,UAAU,MAAX;MAAuB;MAAsB,OAAO;gBAApD,CACE,qBAAC,UAAU,aAAX,EAAA,UAAA,CACE,oBAAC,UAAU,UAAX,EAAA,UAAqB,SAA6B,CAAA,GACjD,CAAC,cACA,oBAAC,UAAU,mBAAX,EAAA,UACE,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,EACK,CAAA,CAEV,EAAA,CAAA,GACvB,oBAAC,UAAU,WAAX,CAAsB,CAAA,CACR;QAVmB,QAUnB,CACjB,GACD,oBAAC,UAAU,OAAX,EAA8B,YAAc,CAAA,CAClC;SACV,cAAe,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,eACvD,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,YACA,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,cACvC,oBAAC,UAAU,cAAX;MAAwB,KAAK,OAAO;gBAClC,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KACzB,CAAA,CAEhB;MAEG,EAAA,CAAA;IACnB,oBAAC,UAAU,aAAX,CAAwB,CAAA;GACb;KAEE,CAAA;CACL,CAAA;AAEpB,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef, useState } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' | 'counterText' | 'state'> {\n  addOnPaste?: TagsInput.RootProps['addOnPaste'];\n  blurBehavior?: TagsInput.RootProps['blurBehavior'];\n  defaultValue?: string[];\n  delimiter?: TagsInput.RootProps['delimiter'];\n  /**\n   * Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered\n   * in the red color set (like BitkitTag `colorVariant=\"red\"`). Unlike `validate` — which gates\n   * whether a tag can be *added* — this styles tags that are already in the list (e.g. a pasted\n   * or pre-filled value that fails a format check). While any tag is invalid the whole field flips\n   * to the error state automatically; pass `errorText` to surface the accompanying message.\n   */\n  isValueInvalid?: (value: string) => boolean;\n  max?: number;\n  onValueChange?: TagsInput.RootProps['onValueChange'];\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  validate?: TagsInput.RootProps['validate'];\n  value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/**\n * A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n  const {\n    addOnPaste = true,\n    blurBehavior = 'add',\n    defaultValue,\n    // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n    // \"alpha,  beta\" doesn't spawn an empty tag between the alpha and beta.\n    delimiter = /[\\s,]+/,\n    isValueInvalid,\n    max,\n    onValueChange,\n    placeholder,\n    size = 'lg',\n    state,\n    validate,\n    value,\n    // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n    // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n    badge,\n    label,\n    optional,\n    tooltip,\n    ...fieldProps\n  } = props;\n\n  // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n  // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n  const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n    rejectEmpty(details) && (validate?.(details) ?? true);\n\n  const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n  // Mirror the tag list so we can detect invalid tags outside TagsInput.Context (the Root's\n  // `invalid` prop, which drives the control border, must be known before the context renders).\n  // In controlled mode `value` is authoritative; uncontrolled we track our own copy via onValueChange.\n  const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(defaultValue ?? []);\n  const currentValues = value ?? uncontrolledValues;\n  const handleValueChange: NonNullable<TagsInput.RootProps['onValueChange']> = (details) => {\n    if (value === undefined) {\n      setUncontrolledValues(details.value);\n    }\n    onValueChange?.(details);\n  };\n\n  const hasInvalidTag = !!isValueInvalid && currentValues.some(isValueInvalid);\n  const effectiveState = hasInvalidTag && state !== 'disabled' && state !== 'readOnly' ? 'error' : state;\n  const showInvalidTags = hasInvalidTag && effectiveState !== 'disabled' && effectiveState !== 'readOnly';\n\n  const hasWarning = effectiveState === 'warning' || !!fieldProps.warningText;\n  const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n  const isDisabled = effectiveState === 'disabled';\n  const isReadOnly = effectiveState === 'readOnly';\n\n  let statusIcon = undefined;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n  }\n\n  return (\n    <TagsInput.Root\n      addOnPaste={addOnPaste}\n      blurBehavior={blurBehavior}\n      defaultValue={defaultValue}\n      delimiter={delimiter}\n      disabled={isDisabled}\n      invalid={isInvalid}\n      max={max}\n      onValueChange={handleValueChange}\n      readOnly={isReadOnly}\n      size={size}\n      validate={effectiveValidate}\n      value={value}\n    >\n      <TagsInput.Context>\n        {({ value: tagValues }) => (\n          // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n          // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n          // rendered via TagsInput.Label instead.\n          <BitkitField optional={optional} ref={ref} state={effectiveState} {...fieldProps} counterText={undefined}>\n            {(!!label || !!badge || max !== undefined) && (\n              // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n              // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n              // documented composition — it associates with TagsInput.Input.\n              <TagsInput.Label asChild>\n                <BitkitLabel\n                  badge={badge}\n                  counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n                  optional={optional}\n                  tooltip={tooltip}\n                >\n                  {label}\n                </BitkitLabel>\n              </TagsInput.Label>\n            )}\n            <TagsInput.Control>\n              <chakra.div css={styles.tagsBlock}>\n                {tagValues.map((tagValue, index) => (\n                  <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n                    <TagsInput.ItemPreview data-invalid={(showInvalidTags && isValueInvalid?.(tagValue)) || undefined}>\n                      <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n                      {!isReadOnly && (\n                        <TagsInput.ItemDeleteTrigger>\n                          <IconCross size=\"16\" />\n                        </TagsInput.ItemDeleteTrigger>\n                      )}\n                    </TagsInput.ItemPreview>\n                    <TagsInput.ItemInput />\n                  </TagsInput.Item>\n                ))}\n                <TagsInput.Input placeholder={placeholder} />\n              </chakra.div>\n              {(statusIcon || (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n                <chakra.div css={styles.suffixBlock}>\n                  {statusIcon}\n                  {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n                    <TagsInput.ClearTrigger css={styles.clearTrigger}>\n                      <IconCross size={size === 'lg' ? '24' : '16'} />\n                    </TagsInput.ClearTrigger>\n                  )}\n                </chakra.div>\n              )}\n            </TagsInput.Control>\n            <TagsInput.HiddenInput />\n          </BitkitField>\n        )}\n      </TagsInput.Context>\n    </TagsInput.Root>\n  );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,eAA6D,EAAE,iBAAiB,WAAW,KAAK,CAAC,CAAC,SAAS;;;;;;;AAQjH,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,aAAa,MACb,eAAe,OACf,cAGA,YAAY,UACZ,gBACA,KACA,eACA,aACA,OAAO,MACP,OACA,UACA,OAGA,OACA,OACA,UACA,SACA,GAAG,eACD;CAIJ,MAAM,qBAAmE,YACvE,YAAY,OAAO,MAAM,WAAW,OAAO,KAAK;CAElD,MAAM,SAAS,cAAc,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;CAK3D,MAAM,CAAC,oBAAoB,yBAAyB,SAAmB,gBAAgB,CAAC,CAAC;CACzF,MAAM,gBAAgB,SAAS;CAC/B,MAAM,qBAAwE,YAAY;EACxF,IAAI,UAAU,KAAA,GACZ,sBAAsB,QAAQ,KAAK;EAErC,gBAAgB,OAAO;CACzB;CAEA,MAAM,gBAAgB,CAAC,CAAC,kBAAkB,cAAc,KAAK,cAAc;CAC3E,MAAM,iBAAiB,iBAAiB,UAAU,cAAc,UAAU,aAAa,UAAU;CACjG,MAAM,kBAAkB,iBAAiB,mBAAmB,cAAc,mBAAmB;CAE7F,MAAM,aAAa,mBAAmB,aAAa,CAAC,CAAC,WAAW;CAChE,MAAM,YAAY,mBAAmB,WAAW,CAAC,CAAC,WAAW;CAC7D,MAAM,aAAa,mBAAmB;CACtC,MAAM,aAAa,mBAAmB;CAEtC,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAGtE,OACE,oBAAC,UAAU,MAAX;EACc;EACE;EACA;EACH;EACX,UAAU;EACV,SAAS;EACJ;EACL,eAAe;EACf,UAAU;EACJ;EACN,UAAU;EACH;YAEP,oBAAC,UAAU,SAAX,EAAA,WACI,EAAE,OAAO,gBAIT,qBAAC,aAAD;GAAuB;GAAe;GAAK,OAAO;GAAgB,GAAI;GAAY,aAAa,KAAA;aAA/F;KACI,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,QAAQ,KAAA,MAI9B,oBAAC,UAAU,OAAX;KAAiB,SAAA;eACf,oBAAC,aAAD;MACS;MACP,aAAa,QAAQ,KAAA,IAAY,GAAG,UAAU,OAAO,GAAG,QAAQ,KAAA;MACtD;MACD;gBAER;KACU,CAAA;IACE,CAAA;IAEnB,qBAAC,UAAU,SAAX,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,UAAU,KAAK,UAAU,UACxB,qBAAC,UAAU,MAAX;MAAuB;MAAsB,OAAO;gBAApD,CACE,qBAAC,UAAU,aAAX;OAAuB,gBAAe,mBAAmB,iBAAiB,QAAQ,KAAM,KAAA;iBAAxF,CACE,oBAAC,UAAU,UAAX,EAAA,UAAqB,SAA6B,CAAA,GACjD,CAAC,cACA,oBAAC,UAAU,mBAAX,EAAA,UACE,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,EACK,CAAA,CAEV;UACvB,oBAAC,UAAU,WAAX,CAAsB,CAAA,CACR;QAVmB,QAUnB,CACjB,GACD,oBAAC,UAAU,OAAX,EAA8B,YAAc,CAAA,CAClC;SACV,cAAe,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,eACvD,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,YACA,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,cACvC,oBAAC,UAAU,cAAX;MAAwB,KAAK,OAAO;gBAClC,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KACzB,CAAA,CAEhB;MAEG,EAAA,CAAA;IACnB,oBAAC,UAAU,aAAX,CAAwB,CAAA;GACb;KAEE,CAAA;CACL,CAAA;AAEpB,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitToast/BitkitToast.d.ts

@@ -18,4 +18,14 @@ export type BitkitToastProps = {
 };
 export declare const toaster: import('@zag-js/toast').Store<any>;
 declare const createBitkitToast: (props: BitkitToastProps) => string;
+/**
+ * Closes the toast with the given id — the one `createBitkitToast` returns — or every
+ * visible toast when called without an id — note that an `undefined` id counts as "no id",
+ * so guard ids that may not be set yet. Use it to close `duration: Infinity` toasts
+ * (`critical`, `progress`) from code once the operation they report on ends, and to clean
+ * up toasts between tests. The node is unmounted 200ms after the call — Zag's fixed
+ * `removeDelay`, which cuts the exit transition short rather than waiting it out — so in
+ * tests, assert its absence with `waitFor` or advance the timers.
+ */
+export declare const dismissBitkitToast: (id?: string) => void;
 export default createBitkitToast;

package/dist/components/BitkitToast/BitkitToast.js

@@ -37,7 +37,17 @@ var createBitkitToast = (props) => {
 		type: variant
 	});
 };
+/**
+* Closes the toast with the given id — the one `createBitkitToast` returns — or every
+* visible toast when called without an id — note that an `undefined` id counts as "no id",
+* so guard ids that may not be set yet. Use it to close `duration: Infinity` toasts
+* (`critical`, `progress`) from code once the operation they report on ends, and to clean
+* up toasts between tests. The node is unmounted 200ms after the call — Zag's fixed
+* `removeDelay`, which cuts the exit transition short rather than waiting it out — so in
+* tests, assert its absence with `waitFor` or advance the timers.
+*/
+var dismissBitkitToast = (id) => toaster.dismiss(id);
 //#endregion
-export { createBitkitToast as default, toaster };
+export { createBitkitToast as default, dismissBitkitToast, toaster };
 
 //# sourceMappingURL=BitkitToast.js.map

package/dist/components/BitkitToast/BitkitToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n  action?: NotificationAction;\n  dismissible?: boolean;\n  /**\n   * How long the toast stays visible, in milliseconds. Overrides the per-variant\n   * default for any variant: 5000ms for `ai`/`info`/`success`/`warning`, `Infinity`\n   * for `critical` and `progress`. Pass `Infinity` to make a toast persist.\n   */\n  duration?: number;\n  messageText: ReactNode;\n  timestamp?: string;\n  titleText?: ReactNode;\n  variant: BitkitToastVariant;\n};\n\n// Zag's internal priority table only knows its 5 built-in types and crashes\n// on our custom variants (ai/critical/progress). We replicate Zag's algorithm\n// with our full variant set and compute priority ourselves, so the broken\n// lookup is never reached. Each tuple is [actionable, nonActionable] — mirrors\n// Zag, which ranks actionable toasts higher. Lower number = higher in the stack.\nconst TOAST_PRIORITIES = {\n  critical: [1, 2], // ~ Zag \"error\"   — most urgent\n  warning: [3, 6], //  = Zag \"warning\"\n  progress: [4, 5], // ~ Zag \"loading\"\n  success: [5, 7], //  = Zag \"success\"\n  ai: [6, 8], //       ~ Zag \"info\"\n  info: [6, 8], //     = Zag \"info\"    — least urgent\n} as const satisfies Record<BitkitToastVariant, readonly [number, number]>;\n\n// Same name-collision problem as the priorities above: Zag keys its timeout table\n// by its own type names, so only info/warning/success happen to match ours and the\n// rest silently fall back to its 5000ms DEFAULT. We own the full table instead.\n// `critical` and `progress` persist until dismissed — an error the user must see,\n// and an operation that is still running, should not disappear on a timer.\nconst TOAST_DURATIONS = {\n  ai: 5000,\n  critical: Infinity,\n  info: 5000,\n  progress: Infinity,\n  success: 5000,\n  warning: 5000,\n} as const satisfies Record<BitkitToastVariant, number>;\n\nexport const toaster = createToaster({\n  max: 5,\n  placement: 'top-end',\n  pauseOnPageIdle: true,\n});\n\nconst createBitkitToast = (props: BitkitToastProps) => {\n  const { action, dismissible = true, duration, messageText, timestamp, titleText, variant } = props;\n\n  const [actionable, nonActionable] = TOAST_PRIORITIES[variant];\n\n  return toaster.create({\n    closable: dismissible,\n    description: messageText,\n    duration: duration ?? TOAST_DURATIONS[variant],\n    meta: { action, timestamp },\n    priority: action ? actionable : nonActionable,\n    title: titleText,\n    type: variant,\n  });\n};\n\nexport default createBitkitToast;\n"],"mappings":";;AA4BA,IAAM,mBAAmB;CACvB,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,IAAI,CAAC,GAAG,CAAC;CACT,MAAM,CAAC,GAAG,CAAC;AACb;AAOA,IAAM,kBAAkB;CACtB,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,UAAU,cAAc;CACnC,KAAK;CACL,WAAW;CACX,iBAAiB;AACnB,CAAC;AAED,IAAM,qBAAqB,UAA4B;CACrD,MAAM,EAAE,QAAQ,cAAc,MAAM,UAAU,aAAa,WAAW,WAAW,YAAY;CAE7F,MAAM,CAAC,YAAY,iBAAiB,iBAAiB;CAErD,OAAO,QAAQ,OAAO;EACpB,UAAU;EACV,aAAa;EACb,UAAU,YAAY,gBAAgB;EACtC,MAAM;GAAE;GAAQ;EAAU;EAC1B,UAAU,SAAS,aAAa;EAChC,OAAO;EACP,MAAM;CACR,CAAC;AACH"}
+{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n  action?: NotificationAction;\n  dismissible?: boolean;\n  /**\n   * How long the toast stays visible, in milliseconds. Overrides the per-variant\n   * default for any variant: 5000ms for `ai`/`info`/`success`/`warning`, `Infinity`\n   * for `critical` and `progress`. Pass `Infinity` to make a toast persist.\n   */\n  duration?: number;\n  messageText: ReactNode;\n  timestamp?: string;\n  titleText?: ReactNode;\n  variant: BitkitToastVariant;\n};\n\n// Zag's internal priority table only knows its 5 built-in types and crashes\n// on our custom variants (ai/critical/progress). We replicate Zag's algorithm\n// with our full variant set and compute priority ourselves, so the broken\n// lookup is never reached. Each tuple is [actionable, nonActionable] — mirrors\n// Zag, which ranks actionable toasts higher. Lower number = higher in the stack.\nconst TOAST_PRIORITIES = {\n  critical: [1, 2], // ~ Zag \"error\"   — most urgent\n  warning: [3, 6], //  = Zag \"warning\"\n  progress: [4, 5], // ~ Zag \"loading\"\n  success: [5, 7], //  = Zag \"success\"\n  ai: [6, 8], //       ~ Zag \"info\"\n  info: [6, 8], //     = Zag \"info\"    — least urgent\n} as const satisfies Record<BitkitToastVariant, readonly [number, number]>;\n\n// Same name-collision problem as the priorities above: Zag keys its timeout table\n// by its own type names, so only info/warning/success happen to match ours and the\n// rest silently fall back to its 5000ms DEFAULT. We own the full table instead.\n// `critical` and `progress` persist until dismissed — an error the user must see,\n// and an operation that is still running, should not disappear on a timer.\nconst TOAST_DURATIONS = {\n  ai: 5000,\n  critical: Infinity,\n  info: 5000,\n  progress: Infinity,\n  success: 5000,\n  warning: 5000,\n} as const satisfies Record<BitkitToastVariant, number>;\n\nexport const toaster = createToaster({\n  max: 5,\n  placement: 'top-end',\n  pauseOnPageIdle: true,\n});\n\nconst createBitkitToast = (props: BitkitToastProps) => {\n  const { action, dismissible = true, duration, messageText, timestamp, titleText, variant } = props;\n\n  const [actionable, nonActionable] = TOAST_PRIORITIES[variant];\n\n  return toaster.create({\n    closable: dismissible,\n    description: messageText,\n    duration: duration ?? TOAST_DURATIONS[variant],\n    meta: { action, timestamp },\n    priority: action ? actionable : nonActionable,\n    title: titleText,\n    type: variant,\n  });\n};\n\n/**\n * Closes the toast with the given id — the one `createBitkitToast` returns — or every\n * visible toast when called without an id — note that an `undefined` id counts as \"no id\",\n * so guard ids that may not be set yet. Use it to close `duration: Infinity` toasts\n * (`critical`, `progress`) from code once the operation they report on ends, and to clean\n * up toasts between tests. The node is unmounted 200ms after the call — Zag's fixed\n * `removeDelay`, which cuts the exit transition short rather than waiting it out — so in\n * tests, assert its absence with `waitFor` or advance the timers.\n */\nexport const dismissBitkitToast = (id?: string) => toaster.dismiss(id);\n\nexport default createBitkitToast;\n"],"mappings":";;AA4BA,IAAM,mBAAmB;CACvB,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,IAAI,CAAC,GAAG,CAAC;CACT,MAAM,CAAC,GAAG,CAAC;AACb;AAOA,IAAM,kBAAkB;CACtB,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,UAAU,cAAc;CACnC,KAAK;CACL,WAAW;CACX,iBAAiB;AACnB,CAAC;AAED,IAAM,qBAAqB,UAA4B;CACrD,MAAM,EAAE,QAAQ,cAAc,MAAM,UAAU,aAAa,WAAW,WAAW,YAAY;CAE7F,MAAM,CAAC,YAAY,iBAAiB,iBAAiB;CAErD,OAAO,QAAQ,OAAO;EACpB,UAAU;EACV,aAAa;EACb,UAAU,YAAY,gBAAgB;EACtC,MAAM;GAAE;GAAQ;EAAU;EAC1B,UAAU,SAAS,aAAa;EAChC,OAAO;EACP,MAAM;CACR,CAAC;AACH;;;;;;;;;;AAWA,IAAa,sBAAsB,OAAgB,QAAQ,QAAQ,EAAE"}

package/dist/components/index.d.ts

@@ -80,7 +80,7 @@ export { default as BitkitTag, type BitkitTagProps } from './BitkitTag/BitkitTag
 export { default as BitkitTagsInput, type BitkitTagsInputProps } from './BitkitTagsInput/BitkitTagsInput';
 export { default as BitkitTextArea, type BitkitTextAreaProps } from './BitkitTextArea/BitkitTextArea';
 export { default as BitkitTextInput, type BitkitTextInputProps } from './BitkitTextInput/BitkitTextInput';
-export { type BitkitToastProps, default as createBitkitToast } from './BitkitToast/BitkitToast';
+export { type BitkitToastProps, default as createBitkitToast, dismissBitkitToast } from './BitkitToast/BitkitToast';
 export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './BitkitToggleButton/BitkitToggleButton';
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';

package/dist/main.js

@@ -366,10 +366,10 @@ import BitkitSortableColumnHeader from "./components/BitkitTable/BitkitSortableC
 import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
 import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
 import BitkitTextArea from "./components/BitkitTextArea/BitkitTextArea.js";
-import createBitkitToast from "./components/BitkitToast/BitkitToast.js";
+import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/BitkitToast.js";
 import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive, useStepperDialog };
+export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useResponsive, useStepperDialog };

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

@@ -100,7 +100,17 @@ var tagsInputSlotRecipe = defineSlotRecipe({
 				borderColor: "border/disabled",
 				color: "text/on-disabled"
 			},
-			"&:not(:has(button))": { paddingInlineEnd: "8" }
+			"&:not(:has(button))": { paddingInlineEnd: "8" },
+			"&[data-invalid]": {
+				background: "color/red/subtle",
+				borderColor: "color/red/muted",
+				color: "color/red/strong",
+				_highlighted: { background: "color/red/moderate" },
+				"& [data-part=\"item-delete-trigger\"]": {
+					color: "color/red/strong",
+					_hover: { background: "color/red/moderate" }
+				}
+			}
 		},
 		itemText: {
 			overflow: "hidden",

package/dist/theme/slot-recipes/TagsInput.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n  className: 'tags-input',\n  slots: extendedTagsInputAnatomy.keys(),\n  base: {\n    root: {\n      width: 'full',\n    },\n    control: {\n      alignItems: 'flex-start',\n      background: 'background/primary',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      boxShadow: 'inset/field',\n      display: 'flex',\n      height: rem(88),\n      overflowY: 'auto',\n      transition: 'border-color 200ms',\n      _focusWithin: {\n        focusRing: 'outside',\n      },\n      _hover: {\n        borderColor: 'border/hover',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n        _hover: {\n          borderColor: 'border/error',\n        },\n      },\n      _disabled: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        cursor: 'not-allowed',\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n      },\n    },\n    tagsBlock: {\n      alignContent: 'flex-start',\n      alignItems: 'center',\n      display: 'flex',\n      flex: '1',\n      flexWrap: 'wrap',\n      gap: '8',\n      minWidth: 0,\n    },\n    suffixBlock: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      display: 'flex',\n      flexShrink: '0',\n      gap: '8',\n      paddingInline: '4',\n      position: 'sticky',\n      top: 0,\n      '&:has(button)': {\n        paddingInline: 0,\n      },\n    },\n    input: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      lineHeight: 'normal',\n      minWidth: rem(80),\n      outline: 'none',\n      // Per Figma, the empty-state placeholder is offset 4px further from the control's\n      // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n      // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n      // the typing <input> itself so tag chips (which live alongside but not inside the\n      // input) remain flush with the control's padding.\n      paddingInlineStart: '4',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        _placeholder: {\n          color: 'text/disabled',\n        },\n      },\n      _readOnly: {\n        display: 'none',\n      },\n    },\n    item: {\n      display: 'flex',\n      maxWidth: '100%',\n      minWidth: 0,\n    },\n    itemPreview: {\n      alignItems: 'center',\n      background: 'color/neutral/subtle',\n      borderColor: 'color/neutral/muted',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      color: 'text/primary',\n      display: 'flex',\n      gap: '4',\n      height: '24',\n      maxWidth: '100%',\n      overflow: 'hidden',\n      paddingBlock: '2',\n      paddingInlineEnd: '1',\n      paddingInlineStart: '8',\n      textStyle: 'comp/tag/sm',\n      _highlighted: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        color: 'text/on-disabled',\n      },\n      '&:not(:has(button))': {\n        paddingInlineEnd: '8',\n      },\n    },\n    itemText: {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    itemInput: {\n      background: 'transparent',\n      height: '24',\n      minWidth: '20',\n      outline: 'none',\n    },\n    itemDeleteTrigger: {\n      alignItems: 'center',\n      borderRadius: '2',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: '0',\n      height: '20',\n      justifyContent: 'center',\n      width: '20',\n      _hover: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        opacity: '0.5',\n      },\n    },\n    clearTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      justifyContent: 'center',\n      padding: '4',\n      _hover: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        opacity: '0.5',\n      },\n    },\n  },\n  variants: {\n    size: {\n      // Padding values below match the Figma control + input layer spec exactly\n      // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n      // The outer control carries the size-specific padding; the inner tagsBlock adds a\n      // constant 4px horizontal padding (set in the base) around the content regardless of size.\n      md: {\n        control: {\n          paddingInlineEnd: '12',\n          paddingInlineStart: '8',\n        },\n        // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n        // at the control's inner top and its vertical center lines up with the first tag-row /\n        // placeholder center — matches Figma's filled-state layout.\n        tagsBlock: {\n          paddingBlock: '8',\n        },\n        suffixBlock: {\n          height: '40',\n        },\n        input: {\n          height: '24',\n          fontSize: '0.875rem',\n          fontWeight: '400',\n          lineHeight: 'normal',\n        },\n      },\n      lg: {\n        control: {\n          paddingInlineEnd: '16',\n          paddingInlineStart: '12',\n        },\n        tagsBlock: {\n          paddingBlock: '12',\n        },\n        suffixBlock: {\n          height: '48',\n        },\n        input: {\n          fontSize: '1rem',\n          fontWeight: '400',\n          lineHeight: 'normal',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n  className: 'tags-input',\n  slots: extendedTagsInputAnatomy.keys(),\n  base: {\n    root: {\n      width: 'full',\n    },\n    control: {\n      alignItems: 'flex-start',\n      background: 'background/primary',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      boxShadow: 'inset/field',\n      display: 'flex',\n      height: rem(88),\n      overflowY: 'auto',\n      transition: 'border-color 200ms',\n      _focusWithin: {\n        focusRing: 'outside',\n      },\n      _hover: {\n        borderColor: 'border/hover',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n        _hover: {\n          borderColor: 'border/error',\n        },\n      },\n      _disabled: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        cursor: 'not-allowed',\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        _hover: {\n          borderColor: 'border/disabled',\n        },\n      },\n    },\n    tagsBlock: {\n      alignContent: 'flex-start',\n      alignItems: 'center',\n      display: 'flex',\n      flex: '1',\n      flexWrap: 'wrap',\n      gap: '8',\n      minWidth: 0,\n    },\n    suffixBlock: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      display: 'flex',\n      flexShrink: '0',\n      gap: '8',\n      paddingInline: '4',\n      position: 'sticky',\n      top: 0,\n      '&:has(button)': {\n        paddingInline: 0,\n      },\n    },\n    input: {\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      flex: '1',\n      lineHeight: 'normal',\n      minWidth: rem(80),\n      outline: 'none',\n      // Per Figma, the empty-state placeholder is offset 4px further from the control's\n      // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n      // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n      // the typing <input> itself so tag chips (which live alongside but not inside the\n      // input) remain flush with the control's padding.\n      paddingInlineStart: '4',\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        _placeholder: {\n          color: 'text/disabled',\n        },\n      },\n      _readOnly: {\n        display: 'none',\n      },\n    },\n    item: {\n      display: 'flex',\n      maxWidth: '100%',\n      minWidth: 0,\n    },\n    itemPreview: {\n      alignItems: 'center',\n      background: 'color/neutral/subtle',\n      borderColor: 'color/neutral/muted',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      color: 'text/primary',\n      display: 'flex',\n      gap: '4',\n      height: '24',\n      maxWidth: '100%',\n      overflow: 'hidden',\n      paddingBlock: '2',\n      paddingInlineEnd: '1',\n      paddingInlineStart: '8',\n      textStyle: 'comp/tag/sm',\n      _highlighted: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n        color: 'text/on-disabled',\n      },\n      '&:not(:has(button))': {\n        paddingInlineEnd: '8',\n      },\n      '&[data-invalid]': {\n        background: 'color/red/subtle',\n        borderColor: 'color/red/muted',\n        color: 'color/red/strong',\n        _highlighted: {\n          background: 'color/red/moderate',\n        },\n        '& [data-part=\"item-delete-trigger\"]': {\n          color: 'color/red/strong',\n          _hover: {\n            background: 'color/red/moderate',\n          },\n        },\n      },\n    },\n    itemText: {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    itemInput: {\n      background: 'transparent',\n      height: '24',\n      minWidth: '20',\n      outline: 'none',\n    },\n    itemDeleteTrigger: {\n      alignItems: 'center',\n      borderRadius: '2',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: '0',\n      height: '20',\n      justifyContent: 'center',\n      width: '20',\n      _hover: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        opacity: '0.5',\n      },\n    },\n    clearTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      display: 'flex',\n      justifyContent: 'center',\n      padding: '4',\n      _hover: {\n        background: 'color/neutral/moderate',\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        opacity: '0.5',\n      },\n    },\n  },\n  variants: {\n    size: {\n      // Padding values below match the Figma control + input layer spec exactly\n      // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n      // The outer control carries the size-specific padding; the inner tagsBlock adds a\n      // constant 4px horizontal padding (set in the base) around the content regardless of size.\n      md: {\n        control: {\n          paddingInlineEnd: '12',\n          paddingInlineStart: '8',\n        },\n        // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n        // at the control's inner top and its vertical center lines up with the first tag-row /\n        // placeholder center — matches Figma's filled-state layout.\n        tagsBlock: {\n          paddingBlock: '8',\n        },\n        suffixBlock: {\n          height: '40',\n        },\n        input: {\n          height: '24',\n          fontSize: '0.875rem',\n          fontWeight: '400',\n          lineHeight: 'normal',\n        },\n      },\n      lg: {\n        control: {\n          paddingInlineEnd: '16',\n          paddingInlineStart: '12',\n        },\n        tagsBlock: {\n          paddingBlock: '12',\n        },\n        suffixBlock: {\n          height: '48',\n        },\n        input: {\n          fontSize: '1rem',\n          fontWeight: '400',\n          lineHeight: 'normal',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}

package/package.json

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