@box/content-field 1.40.31 → 1.40.33

package/dist/chunks/content-field-icon.js

@@ -1,63 +1,40 @@
-import { useBlueprintModernization as a } from "@box/blueprint-web";
-import { FolderVariable as _, FileVariable as d } from "@box/blueprint-web-assets/icons/Content";
-import { Folder as b, FileDefault as F } from "@box/blueprint-web-assets/icons/Fill";
-import { bpSpace060 as r, Space6 as t, bpSpace040 as c, Space4 as i } from "@box/blueprint-web-assets/tokens/tokens";
-import { createElement as l } from "react";
-import { jsx as e } from "react/jsx-runtime";
-import '../styles/content-field-icon.css';const m = "_contentFieldWrapper_1r9pn_1", C = "_contentField_1r9pn_1", u = "_inlineError_1r9pn_64", h = "_contentButton_1r9pn_68", I = "_error_1r9pn_82", f = "_hasSelection_1r9pn_86", v = "_disabled_1r9pn_99", B = "_labelWrapper_1r9pn_116", E = "_contentLabel_1r9pn_122", S = "_variable_1r9pn_127", W = "_variableError_1r9pn_131", V = "_circledIconContainer_1r9pn_135", z = "_clearButton_1r9pn_146", L = {
-  contentFieldWrapper: m,
-  contentField: C,
-  inlineError: u,
-  contentButton: h,
-  error: I,
-  hasSelection: f,
-  disabled: v,
-  labelWrapper: B,
-  contentLabel: E,
-  variable: S,
-  variableError: W,
-  circledIconContainer: V,
-  clearButton: z
-}, s = ({
-  icon: o
-}) => {
-  const {
-    enableModernizedComponents: n
-  } = a();
-  return /* @__PURE__ */ l(o, {
-    role: "presentation",
-    height: n ? r : t,
-    width: n ? r : t
-  });
-}, p = ({
-  icon: o
-}) => {
-  const {
-    enableModernizedComponents: n
-  } = a();
-  return /* @__PURE__ */ e("div", {
-    className: L.circledIconContainer,
-    children: /* @__PURE__ */ l(o, {
-      role: "presentation",
-      height: n ? c : i,
-      width: n ? c : i
-    })
-  });
-}, D = () => /* @__PURE__ */ e(p, {
-  icon: b
-}), N = () => /* @__PURE__ */ e(p, {
-  icon: F
-}), k = () => /* @__PURE__ */ e(s, {
-  icon: _
-}), q = () => /* @__PURE__ */ e(s, {
-  icon: d
-});
-export {
-  s as C,
-  q as a,
-  k as b,
-  N as c,
-  D as d,
-  p as e,
-  L as s
-};
+import { useBlueprintModernization as e } from "@box/blueprint-web";
+import { FileDefault as t, Folder as n } from "@box/blueprint-web-assets/icons/Fill";
+import { Space4 as r, Space6 as i, bpSpace040 as a, bpSpace060 as o } from "@box/blueprint-web-assets/tokens/tokens";
+import { createElement as s } from "react";
+import { FileVariable as c, FolderVariable as l } from "@box/blueprint-web-assets/icons/Content";
+import { jsx as u } from "react/jsx-runtime";
+import '../styles/content-field-icon.css';var d = {
+	contentFieldWrapper: "_contentFieldWrapper_1r9pn_1",
+	contentField: "_contentField_1r9pn_1",
+	inlineError: "_inlineError_1r9pn_64",
+	contentButton: "_contentButton_1r9pn_68",
+	error: "_error_1r9pn_82",
+	hasSelection: "_hasSelection_1r9pn_86",
+	disabled: "_disabled_1r9pn_99",
+	labelWrapper: "_labelWrapper_1r9pn_116",
+	contentLabel: "_contentLabel_1r9pn_122",
+	variable: "_variable_1r9pn_127",
+	variableError: "_variableError_1r9pn_131",
+	circledIconContainer: "_circledIconContainer_1r9pn_135",
+	clearButton: "_clearButton_1r9pn_146",
+	variableIcon: "_variableIcon_1r9pn_190"
+}, f = ({ icon: t }) => {
+	let { enableModernizedComponents: n } = e();
+	return /* @__PURE__ */ s(t, {
+		role: "presentation",
+		height: n ? o : i,
+		width: n ? o : i
+	});
+}, p = ({ icon: t }) => {
+	let { enableModernizedComponents: n } = e();
+	return /* @__PURE__ */ u("div", {
+		className: d.circledIconContainer,
+		children: /* @__PURE__ */ s(t, {
+			role: "presentation",
+			height: n ? a : r,
+			width: n ? a : r
+		})
+	});
+}, m = () => /* @__PURE__ */ u(p, { icon: n }), h = () => /* @__PURE__ */ u(p, { icon: t }), g = () => /* @__PURE__ */ u(f, { icon: l }), _ = () => /* @__PURE__ */ u(f, { icon: c });
+export { _ as a, f as i, h as n, g as o, m as r, d as s, p as t };

package/dist/esm/index.js

@@ -1,4 +1,2 @@
-import { ContentField as t } from "./lib/content-field.js";
-export {
-  t as ContentField
-};
+import { ContentField as e } from "./lib/content-field.js";
+export { e as ContentField };

package/dist/esm/lib/content-field-icon.js

@@ -1,15 +1,2 @@
-import "@box/blueprint-web";
-import "@box/blueprint-web-assets/icons/Content";
-import "@box/blueprint-web-assets/icons/Fill";
-import "@box/blueprint-web-assets/tokens/tokens";
-import "react";
-import { e as d, c as F, d as c, C, a as m, b as p } from "../../chunks/content-field-icon.js";
-import "react/jsx-runtime";
-export {
-  d as ContentFieldCircledIcon,
-  F as ContentFieldFileIcon,
-  c as ContentFieldFolderIcon,
-  C as ContentFieldIcon,
-  m as ContentFieldVariableFileIcon,
-  p as ContentFieldVariableFolderIcon
-};
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/content-field-icon.js";
+export { a as ContentFieldCircledIcon, n as ContentFieldFileIcon, i as ContentFieldFolderIcon, t as ContentFieldIcon, e as ContentFieldVariableFileIcon, r as ContentFieldVariableFolderIcon };

package/dist/esm/lib/content-field.js

@@ -1,102 +1,77 @@
-import { Button as b } from "@ariakit/react";
-import { useBlueprintModernization as T, useUniqueId as g, Text as k, InlineError as R } from "@box/blueprint-web";
-import { XMark as W } from "@box/blueprint-web-assets/icons/Fill";
-import { bpSpace040 as h, Space6 as C } from "@box/blueprint-web-assets/tokens/tokens";
-import p from "clsx";
-import { forwardRef as j, useRef as w } from "react";
-import { useIntl as z } from "react-intl";
-import { s as e, C as D, a as L, b as q, c as O, d as P } from "../../chunks/content-field-icon.js";
-import { useContentFieldTooltip as U } from "./hooks/useContentFieldTooltip.js";
-import X from "./messages.js";
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-const A = (n) => n?.type === "variable", G = ({
-  icon: n,
-  variant: r,
-  isVariableWithTitle: c
-}) => n ? /* @__PURE__ */ t(D, {
-  icon: n
-}) : c ? r === "file" ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(q, {}) : r === "file" ? /* @__PURE__ */ t(O, {}) : /* @__PURE__ */ t(P, {}), oe = /* @__PURE__ */ j(({
-  icon: n,
-  placeholder: r,
-  onClick: c,
-  onClear: F,
-  title: a,
-  error: o,
-  disabled: i = !1,
-  variant: I = "folder",
-  ...v
-}, y) => {
-  const B = z(), {
-    enableModernizedComponents: d
-  } = T(), {
-    titleValue: l
-  } = a ?? {}, m = w(null), N = l ?? r, {
-    TooltipComponent: V,
-    tooltipProps: x
-  } = U(m, a), E = (S) => {
-    m.current?.focus(), F(S);
-  }, u = g("inline-error-"), s = A(a) && !!l, M = o ? "error" : "standard";
-  return /* @__PURE__ */ f("div", {
-    ref: y,
-    className: e.contentFieldWrapper,
-    "data-modern": d,
-    children: [/* @__PURE__ */ f("div", {
-      className: e.contentField,
-      children: [/* @__PURE__ */ t(V, {
-        ...x,
-        variant: M,
-        children: /* @__PURE__ */ f(b, {
-          "aria-describedby": u,
-          className: p(e.contentButton, {
-            [e.hasSelection]: a,
-            [e.error]: !!o,
-            [e.disabled]: i
-          }),
-          disabled: i,
-          onClick: c,
-          type: "button",
-          ...v,
-          children: [/* @__PURE__ */ t(G, {
-            icon: n,
-            isVariableWithTitle: s,
-            variant: I
-          }), /* @__PURE__ */ t("div", {
-            className: e.labelWrapper,
-            children: /* @__PURE__ */ t(k, {
-              ref: m,
-              as: "span",
-              className: p(e.contentLabel, {
-                [e.variable]: s,
-                [e.variableError]: s && o
-              }),
-              variant: s ? "bodyDefaultBold" : "bodyDefault",
-              children: N
-            })
-          })]
-        })
-      }), l && /* @__PURE__ */ t(b, {
-        "aria-label": B.formatMessage(X.clearButtonLabel),
-        className: p(e.clearButton, {
-          [e.hasSelection]: l,
-          [e.error]: !!o,
-          [e.disabled]: i
-        }),
-        disabled: i,
-        onClick: E,
-        type: "button",
-        children: /* @__PURE__ */ t(W, {
-          height: d ? h : C,
-          role: "presentation",
-          width: d ? h : C
-        })
-      })]
-    }), /* @__PURE__ */ t(R, {
-      className: e.inlineError,
-      id: u,
-      children: o
-    })]
-  });
+import { a as e, i as t, n, o as r, r as i, s as a } from "../../chunks/content-field-icon.js";
+import { useContentFieldTooltip as o } from "./hooks/useContentFieldTooltip.js";
+import s from "./messages.js";
+import { Button as c } from "@ariakit/react";
+import { InlineError as l, Text as u, useBlueprintModernization as d, useUniqueId as f } from "@box/blueprint-web";
+import { XMark as p } from "@box/blueprint-web-assets/icons/Fill";
+import { Space6 as m, bpSpace040 as h } from "@box/blueprint-web-assets/tokens/tokens";
+import g from "clsx";
+import { forwardRef as _, useRef as v } from "react";
+import { useIntl as y } from "react-intl";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+var S = (e) => e?.type === "variable", C = ({ icon: a, variant: o, isVariableWithTitle: s }) => a ? /* @__PURE__ */ b(t, { icon: a }) : b(s ? o === "file" ? e : r : o === "file" ? n : i, {}), w = /* @__PURE__ */ _(({ icon: e, placeholder: t, onClick: n, onClear: r, title: i, error: _, disabled: w = !1, variant: T = "folder", ...E }, D) => {
+	let O = y(), { enableModernizedComponents: k } = d(), { titleValue: A } = i ?? {}, j = v(null), M = A ?? t, { TooltipComponent: N, tooltipProps: P } = o(j, i), F = (e) => {
+		j.current?.focus(), r(e);
+	}, I = f("inline-error-"), L = S(i) && !!A, R = _ ? "error" : "standard";
+	return /* @__PURE__ */ x("div", {
+		ref: D,
+		className: a.contentFieldWrapper,
+		"data-modern": k,
+		children: [/* @__PURE__ */ x("div", {
+			className: a.contentField,
+			children: [/* @__PURE__ */ b(N, {
+				...P,
+				variant: R,
+				children: /* @__PURE__ */ x(c, {
+					"aria-describedby": I,
+					className: g(a.contentButton, {
+						[a.hasSelection]: i,
+						[a.error]: !!_,
+						[a.disabled]: w
+					}),
+					disabled: w,
+					onClick: n,
+					type: "button",
+					...E,
+					children: [/* @__PURE__ */ b(C, {
+						icon: e,
+						isVariableWithTitle: L,
+						variant: T
+					}), /* @__PURE__ */ b("div", {
+						className: a.labelWrapper,
+						children: /* @__PURE__ */ b(u, {
+							ref: j,
+							as: "span",
+							className: g(a.contentLabel, {
+								[a.variable]: L,
+								[a.variableError]: L && _
+							}),
+							variant: L ? "bodyDefaultBold" : "bodyDefault",
+							children: M
+						})
+					})]
+				})
+			}), A && /* @__PURE__ */ b(c, {
+				"aria-label": O.formatMessage(s.clearButtonLabel),
+				className: g(a.clearButton, {
+					[a.hasSelection]: A,
+					[a.error]: !!_,
+					[a.disabled]: w
+				}),
+				disabled: w,
+				onClick: F,
+				type: "button",
+				children: /* @__PURE__ */ b(p, {
+					height: k ? h : m,
+					role: "presentation",
+					width: k ? h : m
+				})
+			})]
+		}), /* @__PURE__ */ b(l, {
+			className: a.inlineError,
+			id: I,
+			children: _
+		})]
+	});
 });
-export {
-  oe as ContentField
-};
+export { w as ContentField };

package/dist/esm/lib/hooks/useContentFieldTooltip.js

@@ -1,20 +1,15 @@
-import { useFullTextTooltip as n, Tooltip as r } from "@box/blueprint-web";
-const s = (e, o) => {
-  const {
-    Wrapper: p,
-    wrapperProps: l
-  } = n({
-    ref: e,
-    textValue: o?.titleValue
-  }), t = o?.type === "variable";
-  return {
-    TooltipComponent: t ? r : p,
-    tooltipProps: {
-      content: t ? o?.technicalName : o?.titleValue,
-      wrapperProps: l
-    }
-  };
-};
-export {
-  s as useContentFieldTooltip
+import { Tooltip as e, useFullTextTooltip as t } from "@box/blueprint-web";
+var n = (n, r) => {
+	let { Wrapper: i, wrapperProps: a } = t({
+		ref: n,
+		textValue: r?.titleValue
+	}), o = r?.type === "variable";
+	return {
+		TooltipComponent: o ? e : i,
+		tooltipProps: {
+			content: o ? r?.technicalName : r?.titleValue,
+			wrapperProps: a
+		}
+	};
 };
+export { n as useContentFieldTooltip };

package/dist/esm/lib/messages.js

@@ -1,10 +1,6 @@
 import { defineMessages as e } from "react-intl";
-const t = e({
-  clearButtonLabel: {
-    id: "contentField.clearButtonLabel",
-    defaultMessage: "Clear"
-  }
-});
-export {
-  t as default
-};
+var t = e({ clearButtonLabel: {
+	id: "contentField.clearButtonLabel",
+	defaultMessage: "Clear"
+} });
+export { t as default };

package/dist/styles/content-field-icon.css

@@ -1 +1 @@
-._contentFieldWrapper_1r9pn_1[data-modern=false]{--content-field-border-radius: var(--radius-2);--content-field-content-button-padding-x: var(--space-3);--content-field-clear-button-padding-x: var(--space-2);--content-field-anti-border-jitter-padding: var(--border-1);--content-field-inactive-surface-background: var(--surface-cta-surface-secondary);--content-field-inactive-surface-border-width: var(--border-1);--content-field-inactive-surface-border-color: var(--border-cta-border-secondary);--content-field-active-surface-background: var(--surface-cta-surface-secondary-hover);--content-field-font-size: var(--body-default-bold-font-size);--content-field-focus-surface-border-width: var(--border-2);--content-field-focus-surface-border-color: var(--outline-focus-on-light);--content-field-error-border-width: var(--border-2);--content-field-error-border-color: var(--border-dropdown-border-error);--content-field-error-border-hover-background-color: var(--border-cta-border-secondary);--content-field-height: var(--size-10);--content-field-box-shadow: var(--dropshadow-2);--content-field-gap: var(--space-2);--content-field-padding-block: var(--space-2);--content-field-circled-icon-container-size: var(--space-6);--content-field-circled-icon-container-background: var(--surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom: var(--space-1);--content-field-inline-error-margin-block-start: var(--space-2)}._contentFieldWrapper_1r9pn_1[data-modern=true]{--content-field-border-radius: var(--bp-radius-06);--content-field-content-button-padding-x: var(--bp-space-030);--content-field-clear-button-padding-x: var(--bp-space-030);--content-field-anti-border-jitter-padding: var(--bp-border-01);--content-field-inactive-surface-background: var(--bp-surface-cta-surface-secondary);--content-field-inactive-surface-border-width: var(--bp-border-01);--content-field-inactive-surface-border-color: var(--bp-border-cta-border-secondary);--content-field-active-surface-background: var(--bp-surface-cta-surface-secondary-hover);--content-field-font-size: var(--bp-font-size-05);--content-field-focus-surface-border-width: var(--bp-border-02);--content-field-focus-surface-border-color: var(--bp-outline-focus-on-light);--content-field-error-border-width: var(--bp-border-02);--content-field-error-border-color: var(--bp-border-dropdown-border-error);--content-field-error-border-hover-background-color: var(--bp-border-cta-border-secondary);--content-field-height: var(--bp-size-100);--content-field-box-shadow: var(--dropshadow-2);--content-field-gap: var(--bp-space-020);--content-field-padding-block: var(--bp-space-020);--content-field-circled-icon-container-size: var(--bp-space-060);--content-field-circled-icon-container-background: var(--bp-surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom: var(--bp-space-010);--content-field-inline-error-margin-block-start: var(--bp-space-020)}._contentFieldWrapper_1r9pn_1{width:100%}._contentField_1r9pn_1{display:flex;flex-direction:row;justify-content:space-between;height:var(--content-field-height);border-radius:var(--content-field-border-radius);box-shadow:var(--content-field-box-shadow)}._inlineError_1r9pn_64{margin-block-start:var(--content-field-inline-error-margin-block-start)}._contentButton_1r9pn_68{all:unset;display:flex;flex:1;gap:var(--content-field-gap);align-items:center;font-size:var(--content-field-font-size);min-width:0;padding:var(--content-field-anti-border-jitter-padding) var(--content-field-content-button-padding-x);border-radius:var(--content-field-border-radius);cursor:pointer;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color)}._contentButton_1r9pn_68._error_1r9pn_82{position:relative;border:var(--content-field-error-border-width) solid var(--content-field-error-border-color)}._contentButton_1r9pn_68._error_1r9pn_82._hasSelection_1r9pn_86:hover:after{position:absolute;top:0;width:1px;height:100%;background-color:var(--content-field-error-border-hover-background-color);content:"";right:0}._contentButton_1r9pn_68._hasSelection_1r9pn_86{border-right:none;border-radius:var(--content-field-border-radius) 0 0 var(--content-field-border-radius)}._contentButton_1r9pn_68._disabled_1r9pn_99{opacity:.5;border-right:none}._contentButton_1r9pn_68:hover{background:var(--content-field-active-surface-background)}._contentButton_1r9pn_68:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._contentButton_1r9pn_68:focus-visible:not(._error_1r9pn_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-content-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116{display:flex;flex-grow:1;align-items:center;min-width:0}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122._variable_1r9pn_127{color:var(--purple-rain-100);text-decoration:underline}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122._variableError_1r9pn_131{color:var(--text-text-error-on-light)}._circledIconContainer_1r9pn_135{display:flex;align-items:center;justify-content:center;width:var(--content-field-circled-icon-container-size);min-width:var(--content-field-circled-icon-container-size);height:var(--content-field-circled-icon-container-size);background:var(--content-field-circled-icon-container-background);border-radius:50%}._clearButton_1r9pn_146{all:unset;border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);display:flex;align-items:center;padding:var(--content-field-anti-border-jitter-padding) var(--content-field-clear-button-padding-x);background:var(--content-field-inactive-surface-background);border-left:none;border-radius:0 var(--content-field-border-radius) var(--content-field-border-radius) 0;cursor:pointer}._clearButton_1r9pn_146:hover{background:var(--content-field-active-surface-background)}._clearButton_1r9pn_146._error_1r9pn_82{position:relative;border:var(--content-field-error-border-width) solid var(--content-field-error-border-color)}._clearButton_1r9pn_146._error_1r9pn_82._hasSelection_1r9pn_86:hover:after{position:absolute;top:0;width:1px;height:100%;background-color:var(--content-field-error-border-hover-background-color);content:"";left:-1px}._clearButton_1r9pn_146._error_1r9pn_82{border-left:none}._clearButton_1r9pn_146:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._clearButton_1r9pn_146:focus-visible:not(._error_1r9pn_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-clear-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._clearButton_1r9pn_146._disabled_1r9pn_99{opacity:.5;border-left:none}._variableIcon_1r9pn_190{margin-bottom:var(--content-field-variable-icon-margin-bottom)}
+._contentFieldWrapper_1r9pn_1[data-modern=false]{--content-field-border-radius:var(--radius-2);--content-field-content-button-padding-x:var(--space-3);--content-field-clear-button-padding-x:var(--space-2);--content-field-anti-border-jitter-padding:var(--border-1);--content-field-inactive-surface-background:var(--surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--border-1);--content-field-inactive-surface-border-color:var(--border-cta-border-secondary);--content-field-active-surface-background:var(--surface-cta-surface-secondary-hover);--content-field-font-size:var(--body-default-bold-font-size);--content-field-focus-surface-border-width:var(--border-2);--content-field-focus-surface-border-color:var(--outline-focus-on-light);--content-field-error-border-width:var(--border-2);--content-field-error-border-color:var(--border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--border-cta-border-secondary);--content-field-height:var(--size-10);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--space-2);--content-field-padding-block:var(--space-2);--content-field-circled-icon-container-size:var(--space-6);--content-field-circled-icon-container-background:var(--surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--space-1);--content-field-inline-error-margin-block-start:var(--space-2)}._contentFieldWrapper_1r9pn_1[data-modern=true]{--content-field-border-radius:var(--bp-radius-06);--content-field-content-button-padding-x:var(--bp-space-030);--content-field-clear-button-padding-x:var(--bp-space-030);--content-field-anti-border-jitter-padding:var(--bp-border-01);--content-field-inactive-surface-background:var(--bp-surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--bp-border-01);--content-field-inactive-surface-border-color:var(--bp-border-cta-border-secondary);--content-field-active-surface-background:var(--bp-surface-cta-surface-secondary-hover);--content-field-font-size:var(--bp-font-size-05);--content-field-focus-surface-border-width:var(--bp-border-02);--content-field-focus-surface-border-color:var(--bp-outline-focus-on-light);--content-field-error-border-width:var(--bp-border-02);--content-field-error-border-color:var(--bp-border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--bp-border-cta-border-secondary);--content-field-height:var(--bp-size-100);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--bp-space-020);--content-field-padding-block:var(--bp-space-020);--content-field-circled-icon-container-size:var(--bp-space-060);--content-field-circled-icon-container-background:var(--bp-surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--bp-space-010);--content-field-inline-error-margin-block-start:var(--bp-space-020)}._contentFieldWrapper_1r9pn_1{width:100%}._contentField_1r9pn_1{height:var(--content-field-height);border-radius:var(--content-field-border-radius);box-shadow:var(--content-field-box-shadow);flex-direction:row;justify-content:space-between;display:flex}._inlineError_1r9pn_64{margin-block-start:var(--content-field-inline-error-margin-block-start)}._contentButton_1r9pn_68{all:unset;gap:var(--content-field-gap);font-size:var(--content-field-font-size);min-width:0;padding:var(--content-field-anti-border-jitter-padding) var(--content-field-content-button-padding-x);border-radius:var(--content-field-border-radius);cursor:pointer;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);flex:1;align-items:center;display:flex}._contentButton_1r9pn_68._error_1r9pn_82{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._contentButton_1r9pn_68._error_1r9pn_82._hasSelection_1r9pn_86:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;right:0}._contentButton_1r9pn_68._hasSelection_1r9pn_86{border-radius:var(--content-field-border-radius) 0 0 var(--content-field-border-radius);border-right:none}._contentButton_1r9pn_68._disabled_1r9pn_99{opacity:.5;border-right:none}._contentButton_1r9pn_68:hover{background:var(--content-field-active-surface-background)}._contentButton_1r9pn_68:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._contentButton_1r9pn_68:focus-visible:not(._error_1r9pn_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-content-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116{flex-grow:1;align-items:center;min-width:0;display:flex}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122._variable_1r9pn_127{color:var(--purple-rain-100);text-decoration:underline}._contentButton_1r9pn_68 ._labelWrapper_1r9pn_116 span._contentLabel_1r9pn_122._variableError_1r9pn_131{color:var(--text-text-error-on-light)}._circledIconContainer_1r9pn_135{width:var(--content-field-circled-icon-container-size);min-width:var(--content-field-circled-icon-container-size);height:var(--content-field-circled-icon-container-size);background:var(--content-field-circled-icon-container-background);border-radius:50%;justify-content:center;align-items:center;display:flex}._clearButton_1r9pn_146{all:unset;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);padding:var(--content-field-anti-border-jitter-padding) var(--content-field-clear-button-padding-x);background:var(--content-field-inactive-surface-background);border-radius:0 var(--content-field-border-radius) var(--content-field-border-radius) 0;cursor:pointer;border-left:none;align-items:center;display:flex}._clearButton_1r9pn_146:hover{background:var(--content-field-active-surface-background)}._clearButton_1r9pn_146._error_1r9pn_82{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._clearButton_1r9pn_146._error_1r9pn_82._hasSelection_1r9pn_86:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;left:-1px}._clearButton_1r9pn_146._error_1r9pn_82{border-left:none}._clearButton_1r9pn_146:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._clearButton_1r9pn_146:focus-visible:not(._error_1r9pn_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-clear-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._clearButton_1r9pn_146._disabled_1r9pn_99{opacity:.5;border-left:none}._variableIcon_1r9pn_190{margin-bottom:var(--content-field-variable-icon-margin-bottom)}

package/package.json

@@ -1,20 +1,20 @@
 {
     "name": "@box/content-field",
-    "version": "1.40.31",
+    "version": "1.40.33",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@ariakit/react": "^0.4.21",
-        "@box/blueprint-web": "^14.4.4",
-        "@box/blueprint-web-assets": "^4.112.0",
+        "@box/blueprint-web": "^14.6.0",
+        "@box/blueprint-web-assets": "^4.112.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^14.4.4",
-        "@box/blueprint-web-assets": "^4.112.0",
-        "@box/eslint-plugin-blueprint": "1.1.11",
-        "@box/storybook-utils": "0.17.27",
+        "@box/blueprint-web": "^14.6.0",
+        "@box/blueprint-web-assets": "^4.112.2",
+        "@box/eslint-plugin-blueprint": "1.1.12",
+        "@box/storybook-utils": "0.17.29",
         "@testing-library/react": "^15.0.6",
         "react-intl": "^6.4.2"
     },