@box/metadata-editor 0.67.14 → 0.68.0

package/chunks/utils.js

@@ -0,0 +1,35 @@
+import "../styles/utils.css";
+import { BoxAiLogo as r } from "@box/blueprint-web-assets/icons/Logo";
+import n from "../esm/lib/components/interactive-text/interactive-text.js";
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+const x = "_noAttributesText_ix3i9_753", c = "_fieldWrapper_ix3i9_757", b = "_hasSuggestion_ix3i9_762", p = "_error_ix3i9_770", d = "_dateField_ix3i9_782", g = "_suggestionApplied_ix3i9_786", m = "_comboboxContainer_ix3i9_786", u = "_labelWrapper_ix3i9_800", T = "_labelText_ix3i9_806", A = "_labelIcon_ix3i9_809", e = {
+  noAttributesText: x,
+  fieldWrapper: c,
+  hasSuggestion: b,
+  error: p,
+  dateField: d,
+  suggestionApplied: g,
+  comboboxContainer: m,
+  labelWrapper: u,
+  labelText: T,
+  labelIcon: A
+}, F = (o, i, a = !1, s = "label") => (l) => /* @__PURE__ */ _("div", {
+  className: e.labelWrapper,
+  children: [i ? /* @__PURE__ */ t(n, {
+    as: s,
+    className: e.labelText,
+    tooltipText: i,
+    ...l,
+    children: o
+  }) : /* @__PURE__ */ t("label", {
+    className: e.labelText,
+    ...l,
+    children: o
+  }), a && /* @__PURE__ */ t(r, {
+    className: e.labelIcon
+  })]
+});
+export {
+  F as g,
+  e as s
+};

package/esm/lib/components/metadata-editor-fields/components/metadata-date-field/metadata-date-field.js

@@ -1,67 +1,68 @@
-import { DateI18nProvider as L, DatePicker as T } from "@box/blueprint-web";
-import { useFormikContext as V, getIn as A, Field as C } from "formik";
-import { forwardRef as w, useMemo as I } from "react";
-import { useIntl as N } from "react-intl";
-import { convertToDatePickerValue as z, convertToFormikValue as B } from "./date-conversion-utils.js";
-import { useDateInternationalization as O } from "./use-date-internationalization.js";
+import { DateI18nProvider as T, DatePicker as V } from "@box/blueprint-web";
+import { useFormikContext as A, getIn as C, Field as w } from "formik";
+import { forwardRef as I, useMemo as N } from "react";
+import { useIntl as z } from "react-intl";
+import { convertToDatePickerValue as B, convertToFormikValue as O } from "./date-conversion-utils.js";
+import { useDateInternationalization as $ } from "./use-date-internationalization.js";
 import a from "../../../../messages.js";
-import { getFieldLabel as $ } from "../../utils.js";
+import { g as j } from "../../../../../../chunks/utils.js";
 import { jsx as r } from "react/jsx-runtime";
-const K = /* @__PURE__ */ w(({
+const Q = /* @__PURE__ */ I(({
   className: s,
   description: c,
-  disableForm: m,
-  fieldNamePrefix: d,
-  label: i,
-  onValueEdited: f,
-  portalElement: u,
+  isAiSuggestionApplied: m,
+  disableForm: d,
+  fieldNamePrefix: f,
+  label: n,
+  onValueEdited: u,
+  portalElement: p,
   updateModePrefix: h
-}, p) => {
-  const o = `${h ?? d}.value`, e = N(), {
-    values: D,
+}, D) => {
+  const o = `${h ?? f}.value`, e = z(), {
+    values: g,
     setFieldTouched: M,
-    setFieldValue: g
-  } = V(), {
-    localTimezone: k
-  } = O(e.locale), n = A(D, o), v = I(() => z(n), [n]), b = {
+    setFieldValue: k
+  } = A(), {
+    localTimezone: v
+  } = $(e.locale), i = C(g, o), b = N(() => B(i), [i]), F = {
     clearDatePickerAriaLabel: e.formatMessage(a.clearSelectedDate),
     nextMonthAriaLabel: e.formatMessage(a.switchToNextMonth),
     openCalendarDropdownAriaLabel: e.formatMessage(a.openCalendar),
     previousMonthAriaLabel: e.formatMessage(a.switchToNextMonth)
-  }, F = (t) => {
-    const l = B(t, k);
-    g(o, l), f();
-  }, P = () => {
+  }, P = (t) => {
+    const l = O(t, v);
+    k(o, l), u();
+  }, x = () => {
     M(o, !0);
   };
   return /* @__PURE__ */ r("div", {
-    "data-testid": `${i}-field`,
-    children: /* @__PURE__ */ r(L, {
+    "data-testid": `${n}-field`,
+    children: /* @__PURE__ */ r(T, {
       locale: e.locale,
-      children: /* @__PURE__ */ r(C, {
+      children: /* @__PURE__ */ r(w, {
         name: o,
         children: ({
           field: t,
           meta: l
-        }) => /* @__PURE__ */ r(T, {
+        }) => /* @__PURE__ */ r(V, {
           ...t,
-          ...b,
-          ref: p,
+          ...F,
+          ref: D,
           calendarAriaLabel: e.formatMessage(a.selectDate),
           className: s,
           error: l.error,
-          isDisabled: m,
-          label: $(i, c),
-          onBlur: () => P(),
-          onChange: (x) => F(x),
-          portalElement: u,
-          value: v
+          isDisabled: d,
+          label: j(n, c, m, "span"),
+          onBlur: () => x(),
+          onChange: (L) => P(L),
+          portalElement: p,
+          value: b
         })
       })
     })
   });
 });
 export {
-  K as MetadataDateField,
-  K as default
+  Q as MetadataDateField,
+  Q as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-enum-field/metadata-enum-field.js

@@ -1,51 +1,52 @@
 import { Select as l, SELECT_EMPTY_VALUE as r } from "@box/blueprint-web";
-import { useFormikContext as V, getIn as C, Field as L } from "formik";
-import { forwardRef as P } from "react";
-import { useIntl as $, FormattedMessage as b } from "react-intl";
+import { useFormikContext as C, getIn as L, Field as P } from "formik";
+import { forwardRef as $ } from "react";
+import { useIntl as b, FormattedMessage as j } from "react-intl";
 import d from "../../../../messages.js";
-import { getFieldLabel as j } from "../../utils.js";
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
-const R = /* @__PURE__ */ P(({
+import { g as w } from "../../../../../../chunks/utils.js";
+import { jsx as t, jsxs as I } from "react/jsx-runtime";
+const U = /* @__PURE__ */ $(({
   className: i,
-  description: u,
-  disableForm: p,
+  isAiSuggestionApplied: u,
+  description: p,
+  disableForm: f,
   fieldNamePrefix: s,
-  updateModePrefix: f,
+  updateModePrefix: h,
   label: n,
-  onValueEdited: h,
-  options: v,
-  portalElement: g
-}, E) => {
+  onValueEdited: v,
+  options: g,
+  portalElement: E
+}, F) => {
   const {
-    setFieldValue: F,
-    values: x
-  } = V(), M = $(), m = `${f ?? s}.value`, o = v || C(x, `${s}.options`, []).map(({
+    setFieldValue: x,
+    values: M
+  } = C(), V = b(), m = `${h ?? s}.value`, o = g || L(M, `${s}.options`, []).map(({
     key: a
-  }) => a), c = M.formatMessage(d.selectValuePlaceholder);
+  }) => a), c = V.formatMessage(d.selectValuePlaceholder);
   return /* @__PURE__ */ t("div", {
     "data-testid": `${n}-field`,
-    children: /* @__PURE__ */ t(L, {
+    children: /* @__PURE__ */ t(P, {
       name: m,
       children: ({
         field: a
       }) => /* @__PURE__ */ t(l, {
-        ref: E,
+        ref: F,
         className: i,
-        disabled: p,
-        label: j(n, u),
+        disabled: f,
+        label: w(n, p, u),
         onValueChange: (e) => {
-          F(m, e === r ? "" : e), h();
+          x(m, e === r ? "" : e), v();
         },
         placeholder: c,
         ...a,
         value: a.value === r ? "" : a.value,
-        children: /* @__PURE__ */ w(l.Content, {
-          container: g,
+        children: /* @__PURE__ */ I(l.Content, {
+          container: E,
           onEscapeKeyDown: (e) => e.stopPropagation(),
           children: [/* @__PURE__ */ t(l.Option, {
             text: c,
             value: r,
-            children: /* @__PURE__ */ t(b, {
+            children: /* @__PURE__ */ t(j, {
               ...d.selectValuePlaceholder
             })
           }), o == null ? void 0 : o.map((e) => /* @__PURE__ */ t(l.Option, {
@@ -59,6 +60,6 @@ const R = /* @__PURE__ */ P(({
   });
 });
 export {
-  R as MetadataEnumField,
-  R as default
+  U as MetadataEnumField,
+  U as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-float-field/metadata-float-field.js

@@ -1,55 +1,56 @@
-import { TextInput as R } from "@box/blueprint-web";
-import { useFormikContext as T, getIn as V, Field as $ } from "formik";
-import { forwardRef as b, useRef as B } from "react";
-import { getFieldLabel as I } from "../../utils.js";
-import { fieldDefaultProps as M } from "../constants.js";
-import { useFloatValidation as O } from "./use-float-validation.js";
+import { TextInput as T } from "@box/blueprint-web";
+import { useFormikContext as V, getIn as $, Field as b } from "formik";
+import { forwardRef as B, useRef as I } from "react";
+import { g as M } from "../../../../../../chunks/utils.js";
+import { fieldDefaultProps as O } from "../constants.js";
+import { useFloatValidation as j } from "./use-float-validation.js";
 import { jsx as r } from "react/jsx-runtime";
-const q = /* @__PURE__ */ b(({
+const y = /* @__PURE__ */ B(({
   className: l,
   description: i,
+  isAiSuggestionApplied: d,
   label: o,
-  fieldNamePrefix: d,
-  disableForm: n,
-  onValueEdited: s,
-  updateModePrefix: u
-}, f) => {
+  fieldNamePrefix: n,
+  disableForm: s,
+  onValueEdited: u,
+  updateModePrefix: f
+}, m) => {
   const {
-    values: m,
-    setFieldValue: c,
-    setFieldTouched: p
-  } = T(), t = `${u ?? d}.value`, F = V(m, t), a = B(F), {
-    validateFloats: h
-  } = O(), v = (e) => {
-    a.current = e, c(t, e), s();
-  }, g = (e) => {
-    p(e, !0);
+    values: c,
+    setFieldValue: p,
+    setFieldTouched: F
+  } = V(), t = `${f ?? n}.value`, h = $(c, t), a = I(h), {
+    validateFloats: g
+  } = j(), v = (e) => {
+    a.current = e, p(t, e), u();
+  }, x = (e) => {
+    F(e, !0);
   };
   return /* @__PURE__ */ r("div", {
     "data-testid": `${o}-field`,
-    children: /* @__PURE__ */ r($, {
+    children: /* @__PURE__ */ r(b, {
       name: `${t}`,
-      validate: () => h(a.current),
+      validate: () => g(a.current),
       children: ({
         field: e,
-        meta: x
-      }) => /* @__PURE__ */ r(R, {
-        ...M,
+        meta: C
+      }) => /* @__PURE__ */ r(T, {
+        ...O,
         ...e,
-        ref: f,
+        ref: m,
         className: l,
-        disabled: n,
-        error: x.error,
+        disabled: s,
+        error: C.error,
         inputMode: "decimal",
-        label: I(o, i),
-        onBlur: () => g(t),
-        onChange: (C) => v(C.currentTarget.value),
+        label: M(o, i, d),
+        onBlur: () => x(t),
+        onChange: (R) => v(R.currentTarget.value),
         placeholder: "0"
       })
     })
   });
 });
 export {
-  q as MetadataFloatField,
-  q as default
+  y as MetadataFloatField,
+  y as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -1,52 +1,53 @@
-import { Combobox as b } from "@box/blueprint-web";
-import { useFormikContext as w, getIn as x, Field as L } from "formik";
-import { forwardRef as M } from "react";
-import { useIntl as $ } from "react-intl";
-import I from "../../../../messages.js";
-import { getFieldLabel as V } from "../../utils.js";
-import { fieldDefaultProps as j } from "../constants.js";
+import { Combobox as w } from "@box/blueprint-web";
+import { useFormikContext as x, getIn as L, Field as M } from "formik";
+import { forwardRef as $ } from "react";
+import { useIntl as I } from "react-intl";
+import V from "../../../../messages.js";
+import { g as j } from "../../../../../../chunks/utils.js";
+import { fieldDefaultProps as k } from "../constants.js";
 import { jsx as o } from "react/jsx-runtime";
-const z = /* @__PURE__ */ M(({
-  className: i,
-  description: s,
-  disableForm: n,
+const A = /* @__PURE__ */ $(({
+  className: s,
+  isAiSuggestionApplied: i,
+  description: n,
+  disableForm: m,
   fieldNamePrefix: r,
   label: l,
-  onValueEdited: m,
-  options: u,
-  portalElement: d,
-  updateModePrefix: p
-}, f) => {
+  onValueEdited: u,
+  options: d,
+  portalElement: p,
+  updateModePrefix: f
+}, c) => {
   const {
-    setFieldValue: c,
+    setFieldValue: g,
     values: F
-  } = w(), g = $(), a = `${p ?? r}.value`, h = u || x(F, `${r}.options`, []).map(({
+  } = x(), h = I(), a = `${f ?? r}.value`, v = d || L(F, `${r}.options`, []).map(({
     key: e
-  }) => e), v = (e, t) => t.toLowerCase().includes(e.toLowerCase());
+  }) => e), C = (e, t) => t.toLowerCase().includes(e.toLowerCase());
   return /* @__PURE__ */ o("div", {
     "data-testid": `${l}-field`,
-    children: /* @__PURE__ */ o(L, {
+    children: /* @__PURE__ */ o(M, {
       name: a,
       children: ({
         field: e
       }) => {
         var t;
-        return /* @__PURE__ */ o(b, {
-          ...j,
-          ref: f,
+        return /* @__PURE__ */ o(w, {
+          ...k,
+          ref: c,
           as: "input",
-          className: i,
-          disabled: n,
-          filterFn: v,
-          label: V(l, s),
+          className: s,
+          disabled: m,
+          filterFn: C,
+          label: j(l, n, i),
           multiselect: !0,
           name: e.name,
-          onValueChange: (C) => {
-            c(a, C), m();
+          onValueChange: (b) => {
+            g(a, b), u();
           },
-          options: h,
-          placeholder: ((t = e.value) == null ? void 0 : t.length) === 0 ? g.formatMessage(I.multiselectPlaceholder) : "",
-          portalElement: d,
+          options: v,
+          placeholder: ((t = e.value) == null ? void 0 : t.length) === 0 ? h.formatMessage(V.multiselectPlaceholder) : "",
+          portalElement: p,
           value: e.value
         });
       }
@@ -54,6 +55,6 @@ const z = /* @__PURE__ */ M(({
   });
 });
 export {
-  z as MetadataMultiSelectField,
-  z as default
+  A as MetadataMultiSelectField,
+  A as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-string-field/metadata-string-field.js

@@ -1,44 +1,45 @@
-import { TextInput as u } from "@box/blueprint-web";
-import { Field as c } from "formik";
-import { forwardRef as g } from "react";
-import { useIntl as h } from "react-intl";
-import F from "../../../../messages.js";
-import { getFieldLabel as x } from "../../utils.js";
-import { fieldDefaultProps as M } from "../constants.js";
+import { TextInput as c } from "@box/blueprint-web";
+import { Field as g } from "formik";
+import { forwardRef as h } from "react";
+import { useIntl as F } from "react-intl";
+import x from "../../../../messages.js";
+import { g as M } from "../../../../../../chunks/utils.js";
+import { fieldDefaultProps as b } from "../constants.js";
 import { jsx as e } from "react/jsx-runtime";
-const b = /* @__PURE__ */ g(({
+const v = /* @__PURE__ */ h(({
   className: t,
-  description: o,
-  disableForm: a,
-  fieldNamePrefix: i,
+  description: a,
+  isAiSuggestionApplied: o,
+  disableForm: i,
+  fieldNamePrefix: l,
   label: r,
-  onValueEdited: l,
-  updateModePrefix: d
-}, m) => {
-  const f = h(), s = `${d ?? i}.value`;
+  onValueEdited: d,
+  updateModePrefix: m
+}, f) => {
+  const s = F(), n = `${m ?? l}.value`;
   return /* @__PURE__ */ e("div", {
     "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ e(c, {
-      name: s,
+    children: /* @__PURE__ */ e(g, {
+      name: n,
       children: ({
-        field: n,
-        meta: p
-      }) => /* @__PURE__ */ e(u, {
-        ...M,
-        ...n,
-        ref: m,
+        field: p,
+        meta: u
+      }) => /* @__PURE__ */ e(c, {
+        ...b,
+        ...p,
+        ref: f,
         className: t,
-        disabled: a,
-        error: p.error,
-        label: x(r, o),
-        onChangeCapture: l,
-        placeholder: f.formatMessage(F.setValuePlaceholder)
+        disabled: i,
+        error: u.error,
+        label: M(r, a, o),
+        onChangeCapture: d,
+        placeholder: s.formatMessage(x.setValuePlaceholder)
       })
     })
   });
 });
-b.displayName = "MetadataStringField";
+v.displayName = "MetadataStringField";
 export {
-  b as MetadataStringField,
-  b as default
+  v as MetadataStringField,
+  v as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.js

@@ -1,56 +1,57 @@
-import { useFormikContext as C, getIn as I, Field as M } from "formik";
-import { forwardRef as R } from "react";
-import { useIntl as V } from "react-intl";
-import $ from "../../../../messages.js";
-import { ComboboxWithApiPagination as j } from "../../../combobox-with-api-pagination/combobox-with-api-pagination.js";
-import { getFieldLabel as w } from "../../utils.js";
+import { useFormikContext as I, getIn as M, Field as R } from "formik";
+import { forwardRef as V } from "react";
+import { useIntl as $ } from "react-intl";
+import j from "../../../../messages.js";
+import { ComboboxWithApiPagination as w } from "../../../combobox-with-api-pagination/combobox-with-api-pagination.js";
+import { g as A } from "../../../../../../chunks/utils.js";
 import { jsx as o } from "react/jsx-runtime";
-const z = /* @__PURE__ */ R(({
+const B = /* @__PURE__ */ V(({
   description: m,
   disableForm: n,
+  isAiSuggestionApplied: s,
   fieldNamePrefix: r,
   label: a,
-  portalElement: s,
-  taxonomyOptionsFetcher: d,
-  updateModePrefix: c,
-  className: u
-}, f) => {
-  const p = V(), i = `${c ?? r}.value`, {
+  portalElement: d,
+  taxonomyOptionsFetcher: c,
+  updateModePrefix: u,
+  className: f
+}, p) => {
+  const g = $(), i = `${u ?? r}.value`, {
     setFieldValue: h,
     values: l
-  } = C(), {
+  } = I(), {
     metadata: {
       templateKey: F,
-      scope: g
+      scope: x
     }
-  } = l, x = I(l, r), {
-    key: v,
+  } = l, v = M(l, r), {
+    key: y,
     optionsRules: {
-      multiSelect: y,
+      multiSelect: b,
       selectableLevels: e
     }
-  } = x, b = (t) => d(g, F, v, e == null ? void 0 : e[0], t);
+  } = v, k = (t) => c(x, F, y, e == null ? void 0 : e[0], t);
   return /* @__PURE__ */ o("div", {
     "data-testid": `${a}-field`,
-    children: /* @__PURE__ */ o(M, {
+    children: /* @__PURE__ */ o(R, {
       name: i,
       children: ({
         field: t
-      }) => /* @__PURE__ */ o(j, {
-        ref: f,
-        className: u,
-        defaultFetcher: b,
+      }) => /* @__PURE__ */ o(w, {
+        ref: p,
+        className: f,
+        defaultFetcher: k,
         disabled: n,
-        label: w(a, m),
-        multiselect: y,
-        onValueChange: (k) => h(i, k),
-        placeholder: p.formatMessage($.taxonomyPlaceholder),
-        portalElement: s,
+        label: A(a, m, s),
+        multiselect: b,
+        onValueChange: (C) => h(i, C),
+        placeholder: g.formatMessage(j.taxonomyPlaceholder),
+        portalElement: d,
         value: t.value
       })
     })
   });
 });
 export {
-  z as MetadataTaxonomyField
+  B as MetadataTaxonomyField
 };

package/esm/lib/components/metadata-editor-fields/metadata-editor-field-wrapper.js

@@ -1,12 +1,78 @@
-import "clsx";
-import "formik";
-import "lodash/isUndefined";
-import "react";
-import "./components/ai-suggestion-field/ai-suggestion-field.js";
-import "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
-import "./editor-field-types.js";
-import { M as f } from "../../../../chunks/metadata-editor-field-wrapper.js";
-import "react/jsx-runtime";
+import V from "clsx";
+import { useFormikContext as k } from "formik";
+import w from "lodash/isUndefined";
+import { forwardRef as E, useState as y } from "react";
+import { AiSuggestionField as P } from "./components/ai-suggestion-field/ai-suggestion-field.js";
+import { UpdateModeFieldWrapper as R } from "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import { editorFieldTypes as T } from "./editor-field-types.js";
+import { s as i } from "../../../../chunks/utils.js";
+import { jsx as o, jsxs as U } from "react/jsx-runtime";
+const H = /* @__PURE__ */ E(({
+  disableForm: l,
+  portalElement: d,
+  field: e,
+  index: h,
+  taxonomyOptionsFetcher: u
+}, g) => {
+  var A;
+  const {
+    setFieldValue: m
+  } = k(), [x, n] = y(!0), [a, p] = y(!1), r = T[e.type], {
+    aiSuggestion: t,
+    type: c,
+    value: F
+  } = e, M = r && !e.hidden, N = !w(e.updateMode), s = `metadata.fields[${h}]`, W = e.type === "taxonomy" && ((A = e.optionsRules) == null ? void 0 : A.multiSelect), S = t && x, v = V({
+    [i.suggestionApplied]: a,
+    [i.hasSuggestion]: S,
+    [i.dateField]: c === "date"
+  });
+  if (!M)
+    return null;
+  const f = () => {
+    a && p(!1);
+  };
+  return N ? /* @__PURE__ */ o(R, {
+    fieldNamePrefix: s,
+    fieldType: e.type,
+    isTaxonomyMultiSelect: W,
+    children: /* @__PURE__ */ o(r, {
+      ref: g,
+      description: e.description,
+      disableForm: l,
+      fieldNamePrefix: s,
+      isAiSuggestionApplied: !1,
+      label: e.displayName,
+      onValueEdited: f,
+      portalElement: d,
+      taxonomyOptionsFetcher: u
+    })
+  }, e.key) : /* @__PURE__ */ U("div", {
+    className: i.fieldWrapper,
+    children: [/* @__PURE__ */ o(r, {
+      ref: g,
+      className: v,
+      description: e.description,
+      disableForm: l,
+      fieldNamePrefix: s,
+      isAiSuggestionApplied: a,
+      label: e.displayName,
+      onValueEdited: f,
+      portalElement: d,
+      taxonomyOptionsFetcher: u
+    }), S && /* @__PURE__ */ o(P, {
+      aiSuggestion: t,
+      onAiSuggestionAppend: () => {
+        const I = e.type === "multiSelect" ? [F, t].flat() : t;
+        m(`${s}.value`, I), n(!1), p(!0);
+      },
+      onAiSuggestionIgnore: () => n(!1),
+      onAiSuggestionReplace: () => {
+        m(`${s}.value`, t), n(!1), p(!0);
+      },
+      type: c
+    })]
+  }, e.key);
+});
 export {
-  f as MetadataEditorFieldWrapper
+  H as MetadataEditorFieldWrapper
 };

package/esm/lib/components/metadata-editor-fields/metadata-editor-fields.js

@@ -1,18 +1,19 @@
 import { useRef as f, useEffect as l } from "react";
 import { Text as c } from "@box/blueprint-web";
-import { useFormikContext as d, getIn as u, FieldArray as p } from "formik";
+import { useFormikContext as d, getIn as p, FieldArray as u } from "formik";
 import { FormattedMessage as x } from "react-intl";
 import g from "../../messages.js";
-import { M as h, s as F } from "../../../../chunks/metadata-editor-field-wrapper.js";
+import { MetadataEditorFieldWrapper as h } from "./metadata-editor-field-wrapper.js";
+import { s as F } from "../../../../chunks/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-const k = (m) => {
+const C = (m) => {
   const {
     values: i
-  } = d(), o = "metadata.fields", r = u(i, o), s = f(null), a = r.findIndex((e) => !e.hidden);
+  } = d(), o = "metadata.fields", r = p(i, o), s = f(null), a = r.findIndex((e) => !e.hidden);
   return l(() => {
     var e;
     a > -1 && ((e = s.current) == null || e.focus());
-  }, []), r.length ? /* @__PURE__ */ t(p, {
+  }, []), r.length ? /* @__PURE__ */ t(u, {
     name: o,
     validateOnChange: !1,
     children: () => r.map((e, n) => /* @__PURE__ */ t(h, {
@@ -31,6 +32,6 @@ const k = (m) => {
   });
 };
 export {
-  k as TemplateInstance,
-  k as default
+  C as TemplateInstance,
+  C as default
 };

package/esm/lib/components/metadata-editor-fields/utils.js

@@ -1,13 +1,7 @@
-import o from "../interactive-text/interactive-text.js";
-import { jsx as i } from "react/jsx-runtime";
-const n = (t, e) => e ? ({
-  ...r
-}) => /* @__PURE__ */ i(o, {
-  ...r,
-  as: "label",
-  tooltipText: e,
-  children: t
-}) : t;
+import "@box/blueprint-web-assets/icons/Logo";
+import "../interactive-text/interactive-text.js";
+import { g as m } from "../../../../chunks/utils.js";
+import "react/jsx-runtime";
 export {
-  n as getFieldLabel
+  m as getFieldLabel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.67.14",
+  "version": "0.68.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/babel-plugin-target-attributes": "1.3.0",
-    "@box/blueprint-web": "^7.36.2",
+    "@box/blueprint-web": "^7.36.3",
     "@box/blueprint-web-assets": "^4.28.0",
     "@box/storybook-utils": "^0.7.0",
     "@testing-library/react": "^15.0.6",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "f127b11dc4b59418aa99af4725e798f2e1f48c15"
+  "gitHead": "cb9d1103ad345206637fdc35e1650751ae752a0a"
 }

package/styles/{metadata-editor-field-wrapper.css → utils.css}

@@ -1 +1 @@
-:root{--notification-default-paragraph-indent: 0rem;--notification-default-paragraph-spacing: 0;--notification-default-text-case: none;--notification-default-text-decoration: none;--notification-default-letter-spacing: .01875rem;--notification-default-font-size: .5625rem;--notification-default-line-height: .75rem;--breakpoint-xlarge: 1219px;--breakpoint-large: 1023px;--breakpoint-medium: 767px;--breakpoint-small: 374px;--animation-easing-ease-base: cubic-bezier(.16, 1, .3, 1);--animation-duration-4: .4s;--animation-duration-3: .3s;--animation-duration-2: .2s;--text-decoration-underline: underline;--font-weights-black: 900;--font-weights-bold: 700;--font-weights-semibold: 600;--font-weights-regular: 400;--font-families-sans: Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--border-8: .5rem;--border-6: .375rem;--border-4: .25rem;--white-opacity-30: #ffffff4d;--white-opacity-70: #ffffffb3;--size-20: 5rem;--size-18: 4.5rem;--size-16: 4rem;--size-15: 3.75rem;--size-14: 3.5rem;--size-12: 3rem;--size-11: 2.75rem;--size-10: 2.5rem;--size-9: 2.25rem;--size-8: 2rem;--size-7: 1.75rem;--size-6: 1.5rem;--size-5: 1.25rem;--size-4: 1rem;--size-3: .75rem;--size-2: .5rem;--size-1: .25rem;--size-05: .125rem;--black-opacity-00: rgba(0, 0, 0, 0);--black-opacity-04: rgba(0, 0, 0, .04);--black-opacity-08: rgba(0, 0, 0, .08);--black-opacity-50: rgba(0, 0, 0, .5);--black-opacity-60: rgba(0, 0, 0, .6);--black-opacity-80: rgba(0, 0, 0, .8);--innershadow-1: inset 0 .125rem .25rem 0 rgba(0, 0, 0, .1);--dropshadow-1: 0 0 .5rem 0 rgba(0, 0, 0, .05);--dropshadow-2: 0 .0625rem .25rem 0 rgba(0, 0, 0, .1);--dropshadow-3-inverse: 0 -.25rem .75rem 0 rgba(0, 0, 0, .1);--dropshadow-3: 0 .25rem .75rem 0 rgba(0, 0, 0, .1);--space-20: 5rem;--space-18: 4.5rem;--space-16: 4rem;--space-15: 3.75rem;--space-14: 3.5rem;--space-12: 3rem;--space-11: 2.75rem;--space-10: 2.5rem;--space-9: 2.25rem;--space-8: 2rem;--space-7: 1.75rem;--space-6: 1.5rem;--space-5: 1.25rem;--space-4: 1rem;--space-3: .75rem;--space-2: .5rem;--space-1: .25rem;--space-05: .125rem;--border-3: .1875rem;--border-2: .125rem;--border-1: .0625rem;--radius-half: 2rem;--radius-8: 1.75rem;--radius-7: 1.5rem;--radius-6: 1.25rem;--radius-5: 1rem;--radius-4: .75rem;--radius-3: .5rem;--radius-2: .375rem;--radius-1: .25rem;--radius-05: .125rem;--link-default-text-case: none;--link-default-paragraph-indent: 0rem;--link-default-paragraph-spacing: 0;--link-default-letter-spacing: .01875rem;--link-default-font-size: .875rem;--link-default-line-height: 1.25rem;--label-default-text-decoration: none;--label-default-text-case: none;--label-default-paragraph-spacing: 0;--label-default-letter-spacing: .0375rem;--label-default-font-size: .625rem;--label-default-line-height: 1rem;--label-bold-text-decoration: none;--label-bold-text-case: none;--label-bold-paragraph-spacing: 0;--label-bold-letter-spacing: .0375rem;--label-bold-font-size: .625rem;--label-bold-line-height: 1rem;--caption-default-text-decoration: none;--caption-default-text-case: none;--caption-default-paragraph-spacing: 0;--caption-default-letter-spacing: .01875rem;--caption-default-font-size: .75rem;--caption-default-line-height: .875rem;--caption-bold-text-decoration: none;--caption-bold-text-case: none;--caption-bold-paragraph-spacing: 0;--caption-bold-letter-spacing: .01875rem;--caption-bold-font-size: .75rem;--caption-bold-line-height: .875rem;--body-default-text-decoration: none;--body-default-text-case: none;--body-default-paragraph-spacing: 0;--body-default-letter-spacing: .01875rem;--body-default-font-size: .875rem;--body-default-line-height: 1.25rem;--body-default-semibold-text-decoration: none;--body-default-semibold-text-case: none;--body-default-semibold-paragraph-spacing: 0;--body-default-semibold-letter-spacing: .01875rem;--body-default-semibold-font-size: .875rem;--body-default-semibold-line-height: 1.25rem;--body-default-bold-text-decoration: none;--body-default-bold-text-case: none;--body-default-bold-paragraph-spacing: 0;--body-default-bold-letter-spacing: .01875rem;--body-default-bold-font-size: .875rem;--body-default-bold-line-height: 1.25rem;--body-large-bold-text-decoration: none;--body-large-bold-text-case: none;--body-large-bold-paragraph-spacing: 0;--body-large-bold-letter-spacing: .01875rem;--body-large-bold-font-size: 1rem;--body-large-bold-line-height: 1.5rem;--body-large-text-decoration: none;--body-large-text-case: none;--body-large-paragraph-spacing: 0;--body-large-letter-spacing: .01875rem;--body-large-font-size: 1rem;--body-large-line-height: 1.5rem;--title-mondo-text-decoration: none;--title-mondo-text-case: none;--title-mondo-paragraph-spacing: 0;--title-mondo-letter-spacing: 0;--title-mondo-font-size: 2.25rem;--title-mondo-line-height: 2.75rem;--title-x-large-text-decoration: none;--title-x-large-text-case: none;--title-x-large-paragraph-spacing: 0;--title-x-large-letter-spacing: .01875rem;--title-x-large-font-size: 1.3125rem;--title-x-large-line-height: 2rem;--title-large-text-decoration: none;--title-large-text-case: none;--title-large-paragraph-spacing: 0;--title-large-letter-spacing: .01875rem;--title-large-font-size: 1.125rem;--title-large-line-height: 1.5rem;--title-medium-text-decoration: none;--title-medium-text-case: none;--title-medium-paragraph-spacing: 0;--title-medium-letter-spacing: .01875rem;--title-medium-font-size: 1rem;--title-medium-line-height: 1.5rem;--title-small-text-decoration: none;--title-small-text-case: none;--title-small-paragraph-spacing: 0;--title-small-letter-spacing: .01875rem;--title-small-font-size: .9375rem;--title-small-line-height: 1.25rem;--title-subtitle-text-decoration: none;--title-subtitle-text-case: none;--title-subtitle-paragraph-spacing: 0;--title-subtitle-letter-spacing: .01875rem;--title-subtitle-font-size: .875rem;--title-subtitle-line-height: 1.25rem;--grimace-02: #fbfbfe;--grimace-05: #f6f4fc;--grimace-180: #0e0827;--grimace-170: #160b3a;--grimace-160: #1d0f4e;--grimace-150: #241361;--grimace-120: #3a1e9b;--grimace-110: #4122af;--grimace-100: #4826c2;--grimace-50: #a392e0;--grimace-20: #dad4f3;--grimace-10: #ece9f8;--purple-rain-02: #fdfbff;--purple-rain-05: #faf5fe;--purple-rain-180: #200d2f;--purple-rain-170: #301347;--purple-rain-160: #40195f;--purple-rain-150: #4f1f76;--purple-rain-120: #7f32be;--purple-rain-110: #8f39d5;--purple-rain-100: #9f3fed;--purple-rain-50: #cf9ff6;--purple-rain-20: #ecd9fb;--purple-rain-10: #f5ebfd;--yellow-02: #fffefa;--yellow-05: #fffdf2;--yellow-180: #332b00;--yellow-170: #4c4000;--yellow-160: #665600;--yellow-150: #806b00;--yellow-120: #ccac00;--yellow-110: #e6c100;--yellow-100: #ffd700;--yellow-50: #ffeb7f;--yellow-20: #fff7cc;--yellow-10: #fffbe5;--yellorange-02: #fffefb;--yellorange-05: #fefbf3;--yellorange-180: #312405;--yellorange-170: #493608;--yellorange-160: #62480b;--yellorange-150: #7a590d;--yellorange-120: #c48f16;--yellorange-110: #dca118;--yellorange-100: #f5b31b;--yellorange-50: #fad98d;--yellorange-20: #fdf0d1;--yellorange-10: #fef7e8;--orange-02: #fffdfb;--orange-05: #fef8f3;--orange-180: #301a05;--orange-170: #482708;--orange-160: #60340a;--orange-150: #78400d;--orange-120: #c16715;--orange-110: #d97417;--orange-100: #f1811a;--orange-50: #f8c08c;--orange-20: #fce6d1;--orange-10: #fdf2e8;--watermelon-red-02: #fffbfc;--watermelon-red-05: #fef5f6;--watermelon-red-180: #2f0b11;--watermelon-red-170: #47101a;--watermelon-red-160: #5f1623;--watermelon-red-150: #761b2b;--watermelon-red-120: #be2c46;--watermelon-red-110: #d5324e;--watermelon-red-100: #ed3757;--watermelon-red-50: #f69bab;--watermelon-red-20: #fbd7dd;--watermelon-red-10: #fdebee;--green-light-02: #fbfefd;--green-light-05: #f4fcf8;--green-light-180: #08271a;--green-light-170: #0b3a27;--green-light-160: #0f4e34;--green-light-150: #136140;--green-light-120: #1e9b67;--green-light-110: #22af74;--green-light-100: #26c281;--green-light-50: #92e0c0;--green-light-20: #d4f3e6;--green-light-10: #e9f8f2;--light-blue-02: #fbfdff;--light-blue-05: #f4f9ff;--light-blue-180: #071b32;--light-blue-170: #0b284c;--light-blue-160: #0e3665;--light-blue-150: #12437e;--light-blue-120: #1d6bca;--light-blue-110: #2079e3;--light-blue-100: #2486fc;--light-blue-50: #91c2fd;--light-blue-20: #d3e7fe;--light-blue-10: #e9f2fe;--dark-blue-02: #fafbfd;--dark-blue-05: #f2f5f9;--dark-blue-180: #000c1a;--dark-blue-170: #001228;--dark-blue-160: #001835;--dark-blue-150: #001e42;--dark-blue-120: #00306a;--dark-blue-110: #003677;--dark-blue-100: #003c84;--dark-blue-50: #7f9dc1;--dark-blue-20: #ccd8e6;--dark-blue-10: #e5ebf2;--box-blue-02: #fafcfe;--box-blue-05: #f2f7fd;--box-blue-180: #00132b;--box-blue-170: #001d40;--box-blue-160: #002755;--box-blue-150: #00316b;--box-blue-120: #004eaa;--box-blue-110: #0057c0;--box-blue-100: #0061d5;--box-blue-80: #3381dd;--box-blue-50: #7fb0ea;--box-blue-40: #99c0ee;--box-blue-30: #b2cff2;--box-blue-20: #ccdff7;--box-blue-10: #e5effa;--gray-white: #ffffff;--gray-black: #000000;--gray-05: #f4f4f4;--gray-02: #fbfbfb;--gray-100: #222222;--gray-90: #383838;--gray-80: #4e4e4e;--gray-65: #6f6f6f;--gray-50: #909090;--gray-40: #a7a7a7;--gray-30: #bcbcbc;--gray-20: #d3d3d3;--gray-10: #e8e8e8;--brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);--brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);--brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);--border-cta-border-outline-disabled: #646464;--surface-badge-video-surface: #009aed;--surface-badge-keynote-surface: #0a84ff;--surface-badge-pages-surface: #ff9500;--surface-badge-sheets-surface: #21a464;--surface-badge-docs-surface: #4083f7;--surface-badge-pdf-surface: #d0021b;--surface-surface-brand-disabled: #0061d5;--surface-surface-brand-busy: #0061d5;--surface-surface-brand-pressed: #004eac;--surface-surface-brand-hover: #006ae9;--surface-surface-brand: #0061d5;--notification-default-font-weight: 700;--notification-default-font-family: var(--font-families-sans);--motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);--link-default-text-decoration: var(--text-decoration-underline);--link-default-font-weight: 400;--link-default-font-family: var(--font-families-sans);--label-default-font-weight: 400;--label-default-font-family: var(--font-families-sans);--label-bold-font-weight: 700;--label-bold-font-family: var(--font-families-sans);--caption-default-font-weight: 400;--caption-default-font-family: var(--font-families-sans);--caption-bold-font-weight: 700;--caption-bold-font-family: var(--font-families-sans);--body-default-font-weight: 400;--body-default-font-family: var(--font-families-sans);--body-default-semibold-font-weight: 600;--body-default-semibold-font-family: var(--font-families-sans);--body-default-bold-font-weight: 700;--body-default-bold-font-family: var(--font-families-sans);--body-large-bold-font-weight: 700;--body-large-bold-font-family: var(--font-families-sans);--body-large-font-weight: 400;--body-large-font-family: var(--font-families-sans);--title-mondo-font-weight: 900;--title-mondo-font-family: var(--font-families-sans);--title-x-large-font-weight: 700;--title-x-large-font-family: var(--font-families-sans);--title-large-font-weight: 700;--title-large-font-family: var(--font-families-sans);--title-medium-font-weight: 700;--title-medium-font-family: var(--font-families-sans);--title-small-font-weight: 700;--title-small-font-family: var(--font-families-sans);--title-subtitle-font-weight: 700;--title-subtitle-font-family: var(--font-families-sans);--brand-sign-tertiary: var(--dark-blue-10);--brand-sign-secondary: var(--dark-blue-20);--brand-sign-primary: var(--dark-blue-100);--brand-docgen-tertiary: var(--grimace-10);--brand-docgen-secondary: var(--grimace-20);--brand-docgen-primary: var(--grimace-120);--brand-forms-tertiary: var(--green-light-10);--brand-forms-secondary: var(--green-light-20);--brand-forms-primary: var(--green-light-120);--brand-box-tertiary: var(--box-blue-10);--brand-box-secondary: var(--box-blue-20);--brand-box-primary: var(--box-blue-100);--overlay-modal-overlay: var(--black-opacity-80);--overlay-sidepanel-overlay: var(--black-opacity-50);--text-toggletext-text: var(--box-blue-170);--text-text-on-light-disabled: var(--gray-30);--text-cta-link-disabled: var(--box-blue-30);--text-cta-promo: var(--grimace-100);--text-cta-link-secondary-hover: var(--gray-65);--text-cta-link-secondary-pressed: var(--gray-65);--text-cta-link-secondary: var(--gray-65);--text-text-error-on-light: var(--watermelon-red-110);--text-nav-text-on-light-focus: var(--gray-white);--text-nav-text-on-light-selected: var(--gray-white);--text-nav-text-on-light-hover: var(--gray-white);--text-nav-text-on-light: var(--gray-white);--text-nav-text-on-dark-focus: var(--gray-white);--text-nav-text-on-dark-selected: var(--gray-white);--text-nav-text-on-dark-hover: var(--gray-white);--text-nav-text-on-dark: var(--gray-white);--text-cta-link-pressed: var(--light-blue-100);--text-cta-link-hover: var(--light-blue-120);--text-cta-link: var(--box-blue-100);--text-text-brand-on-color: var(--gray-white);--text-text-on-dark: var(--gray-white);--text-text-on-light-secondary-hover: var(--gray-80);--text-text-on-light-tertiary: var(--gray-50);--text-text-on-light-secondary: var(--gray-65);--text-text-on-light: var(--gray-100);--outline-focus-on-dark: var(--gray-white);--outline-focus-on-light: var(--light-blue-100);--icon-icon-blue: var(--box-blue-100);--icon-cta-icon-on-color-pressed: var(--gray-black);--icon-cta-icon-on-color-hover: var(--gray-black);--icon-cta-icon-on-color: var(--gray-black);--icon-cta-icon-utility-pressed: var(--gray-black);--icon-cta-icon-utility-hover: var(--gray-black);--icon-cta-icon-utility: var(--gray-80);--icon-cta-icon-pressed: var(--gray-100);--icon-cta-icon-hover: var(--gray-100);--icon-cta-icon: var(--gray-65);--icon-nav-icon-on-light-focus: var(--gray-100);--icon-nav-icon-on-light-selected: var(--gray-100);--icon-nav-icon-on-light-hover: var(--gray-100);--icon-nav-icon-on-light: var(--gray-100);--icon-nav-icon-on-dark-focus: var(--gray-white);--icon-nav-icon-on-dark-selected: var(--gray-white);--icon-nav-icon-on-dark-hover: var(--gray-white);--icon-nav-icon-on-dark: var(--gray-white);--icon-icon-required-on-light: var(--watermelon-red-110);--icon-icon-error-on-light: var(--watermelon-red-110);--icon-icon-on-dark: var(--gray-white);--icon-icon-on-light-tertiary: var(--gray-50);--icon-icon-on-light-secondary: var(--gray-65);--icon-icon-on-light: var(--gray-100);--border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);--border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);--border-toggletext-border-off-ai: var(--gray-30);--border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);--border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);--border-toggletext-border-on-ai: var(--brand-box-ai-100);--border-toggletext-border-on-pressed: var(--box-blue-30);--border-toggletext-border-on-hover: var(--box-blue-20);--border-toggletext-border-on: var(--box-blue-05);--border-toggletext-border-off-pressed: var(--gray-65);--border-toggletext-border-off-hover: var(--gray-65);--border-toggletext-border-off: var(--gray-65);--border-radiotile-border-selected: var(--box-blue-100);--border-radiotile-border-hover: var(--gray-30);--border-radiotile-border: var(--gray-30);--border-cta-border-secondary-disabled: var(--gray-10);--border-toggle-border-on: var(--box-blue-40);--border-contentbutton-border-selected: var(--gray-50);--border-cta-border-ai: var(--brand-box-ai-100);--border-card-border-ai: var(--brand-box-ai-100);--border-toggle-border: var(--gray-30);--border-badge-border: var(--gray-white);--border-collapsible-border: var(--gray-20);--border-filterchip-border-multi-on-hover: var(--box-blue-40);--border-filterchip-border-multi-on: var(--box-blue-40);--border-gridthumbnail-border: var(--gray-10);--border-search-global-border-hover: var(--gray-10);--border-search-border-hover: var(--gray-65);--border-search-border: var(--gray-05);--border-status-border-hover: var(--black-opacity-04);--border-avatar-border-pressed: var(--black-opacity-08);--border-avatar-border-hover: var(--black-opacity-04);--border-inputchip-border-error: var(--watermelon-red-100);--border-card-border-pressed: var(--gray-10);--border-divider-border: var(--gray-10);--border-checkbox-border-selected-hover: var(--light-blue-110);--border-checkbox-border-selected: var(--box-blue-100);--border-checkbox-border-hover: var(--gray-80);--border-checkbox-border: var(--gray-65);--border-radio-border-hover: var(--gray-80);--border-radio-border-selected-hover: var(--light-blue-110);--border-radio-border-selected: var(--box-blue-100);--border-radio-border: var(--gray-65);--border-switch-border-hover: var(--gray-30);--border-switch-border: var(--gray-30);--border-item-small-border-selected: var(--box-blue-100);--border-item-border-selected: var(--box-blue-100);--border-item-border-hover: var(--gray-10);--border-cta-border-outline-pressed: var(--gray-black);--border-cta-border-outline-hover: var(--gray-black);--border-cta-border-outline: var(--gray-black);--border-tab-border-hover: var(--gray-30);--border-tab-border: var(--gray-10);--border-tab-border-selected-focus: var(--box-blue-100);--border-tab-border-selected-hover: var(--box-blue-100);--border-tab-border-selected: var(--box-blue-100);--border-tooltip-border-error: var(--watermelon-red-50);--border-dropdown-border-error-focus: var(--watermelon-red-100);--border-dropdown-border-error-hover: var(--watermelon-red-100);--border-dropdown-border-error: var(--watermelon-red-100);--border-dropdown-border-focus: var(--box-blue-100);--border-dropdown-border-hover: var(--gray-65);--border-dropdown-border: var(--gray-30);--border-input-border-error-focus: var(--watermelon-red-100);--border-input-border-error-hover: var(--watermelon-red-100);--border-input-border-error: var(--watermelon-red-100);--border-input-border-focus: var(--light-blue-100);--border-input-border-hover: var(--gray-65);--border-input-border: var(--gray-50);--border-message-border-error-secondary: var(--watermelon-red-50);--border-message-border-error: var(--watermelon-red-100);--border-message-border-warning-secondary: var(--yellorange-50);--border-message-border-warning: var(--yellorange-100);--border-message-border-success-secondary: var(--green-light-50);--border-message-border-success: var(--green-light-100);--border-message-border-info-secondary: var(--light-blue-50);--border-message-border-info: var(--box-blue-100);--border-message-border-generic-secondary: var(--gray-50);--border-message-border-generic: var(--gray-100);--border-card-border-focus: var(--box-blue-100);--border-card-border-hover: var(--gray-10);--border-card-border: var(--gray-10);--border-cta-border-secondary-hover: var(--gray-30);--border-cta-border-secondary-pressed: var(--gray-30);--border-cta-border-secondary: var(--gray-30);--surface-toggletext-surface-off-ai-pressed: var(--gray-10);--surface-toggletext-surface-off-ai-hover: var(--gray-05);--surface-toggletext-surface-off-ai: var(--gray-white);--surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);--surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);--surface-toggletext-surface-on-ai: var(--brand-box-ai-100);--surface-toggletext-surface-on-pressed: var(--box-blue-30);--surface-toggletext-surface-on-hover: var(--box-blue-20);--surface-toggletext-surface-on: var(--box-blue-05);--surface-radiotile-surface-selected: var(--box-blue-05);--surface-radiotile-surface-hover: var(--gray-05);--surface-radiotile-surface: var(--gray-white);--surface-cta-surface-disabled: var(--box-blue-30);--surface-toggle-surface-on-pressed: var(--box-blue-30);--surface-toggle-surface-off-pressed: var(--gray-10);--surface-toolbar-surface: var(--gray-100);--surface-contentswitcher-surface: var(--gray-10);--surface-contentbutton-surface-surface-selected: var(--gray-white);--surface-cta-surface-promo-focus-pressed: var(--grimace-120);--surface-cta-surface-promo-focus: var(--grimace-100);--surface-cta-surface-promo-pressed: var(--grimace-120);--surface-cta-surface-promo-hover: var(--grimace-100);--surface-cta-surface-promo: var(--grimace-110);--surface-upload-surface-brand-neutral: var(--box-blue-100);--surface-illustration-surface-box: var(--box-blue-100);--surface-illustration-surface-box-neutral: var(--box-blue-100);--surface-progressbar-surface-brand: var(--box-blue-100);--surface-nav-surface-brand: var(--box-blue-100);--surface-text-highlight-surface: var(--yellow-20);--surface-toggle-surface-pressed-hover: var(--box-blue-80);--surface-toggle-surface-pressed: var(--box-blue-100);--surface-toggle-surface-hover: var(--gray-05);--surface-toggle-surface: var(--gray-white);--surface-dropdown-secondary-surface-pressed: var(--gray-10);--surface-dropdown-secondary-surface-hover: var(--gray-05);--surface-dropdown-secondary-surface: var(--gray-white);--surface-dropdown-primary-surface-pressed: var(--gray-10);--surface-dropdown-primary-surface-hover: var(--gray-05);--surface-option-grid-surface-selected: var(--black-opacity-08);--surface-option-grid-surface-hover: var(--black-opacity-04);--surface-page-surface: var(--gray-white);--surface-chip-button-surface-hover: var(--black-opacity-08);--surface-chip-button-surface: var(--black-opacity-04);--surface-badge-notification-surface: var(--watermelon-red-110);--surface-badge-progress-surface: var(--yellorange-100);--surface-badge-offline-surface: var(--green-light-100);--surface-badge-collection-surface: var(--gray-10);--surface-badge-pin-surface: var(--gray-10);--surface-badge-online-surface: var(--green-light-120);--surface-badge-coadmin-surface: var(--purple-rain-100);--surface-badge-admin-surface: var(--dark-blue-100);--surface-badge-external-surface: var(--gray-50);--surface-badge-error-surface: var(--watermelon-red-110);--surface-badge-rejected-surface: var(--watermelon-red-110);--surface-badge-completed-surface: var(--green-light-100);--surface-badge-annotation-surface: var(--yellorange-100);--surface-badge-taskapproval-surface: var(--light-blue-120);--surface-badge-task-surface: var(--light-blue-100);--surface-badge-mention-surface: var(--light-blue-120);--surface-badge-relay-surface: var(--light-blue-120);--surface-badge-foldershared-surface: var(--light-blue-100);--surface-badge-folderexternal-surface: var(--gray-65);--surface-badge-boxnote-surface: var(--gray-10);--surface-badge-canvas-surface: var(--orange-100);--surface-badge-image-surface: var(--green-light-100);--surface-accordion-surface-hover: var(--gray-05);--surface-accordion-surface: var(--gray-white);--surface-tab-surface-pressed: var(--gray-10);--surface-tab-surface-hover: var(--gray-05);--surface-day-surface-selected-hover: var(--dark-blue-100);--surface-day-surface-selected: var(--box-blue-100);--surface-day-surface-hover: var(--gray-05);--surface-day-surface: var(--gray-white);--surface-search-surface-focused: var(--gray-white);--surface-search-surface-hover: var(--gray-02);--surface-search-global-surface: var(--gray-05);--surface-search-surface: var(--gray-05);--surface-scrollbar-surface: var(--black-opacity-50);--surface-sliderthumb-surface-hover: var(--light-blue-100);--surface-sliderthumb-surface: var(--box-blue-100);--surface-slidertrack-surface: var(--gray-65);--surface-filterchip-surface-single-on-hover: var(--box-blue-100);--surface-filterchip-surface-single-on: var(--box-blue-100);--surface-filterchip-surface-single-hover: var(--black-opacity-08);--surface-filterchip-surface-single: var(--black-opacity-04);--surface-filterchip-surface-multi-on-hover: var(--box-blue-20);--surface-filterchip-surface-multi-on: var(--box-blue-10);--surface-filterchip-surface-multi-hover: var(--black-opacity-08);--surface-filterchip-surface-multi: var(--black-opacity-04);--surface-inputchip-surface-error: var(--watermelon-red-10);--surface-inputchip-surface-hover: var(--gray-10);--surface-inputchip-surface: var(--gray-10);--surface-ghost-surface-secondary: var(--gray-05);--surface-ghost-surface: var(--gray-02);--surface-checkbox-surface-selected-hover: var(--light-blue-110);--surface-checkbox-surface-selected: var(--box-blue-100);--surface-checkbox-surface-hover: var(--gray-white);--surface-checkbox-surface: var(--gray-white);--surface-radio-surface-selected-hover: var(--light-blue-110);--surface-radio-surface-selected: var(--box-blue-100);--surface-radio-surface-hover: var(--gray-white);--surface-radio-surface: var(--gray-white);--surface-switch-surface-on-hover: var(--light-blue-110);--surface-switch-surface-on: var(--box-blue-100);--surface-switch-surface-off-hover: var(--gray-30);--surface-switch-surface-off: var(--gray-20);--surface-switch-surface-hover: var(--gray-white);--surface-switch-surface: var(--gray-white);--surface-item-small-surface-selected: var(--box-blue-05);--surface-item-small-surface-hover: var(--gray-05);--surface-item-small-surface: var(--gray-white);--surface-item-surface-selected: var(--box-blue-05);--surface-item-surface-hover: var(--gray-white);--surface-status-surface-gray-focus: var(--gray-10);--surface-status-surface-gray-hover: var(--gray-10);--surface-status-surface-gray: var(--gray-10);--surface-status-surface-boxblue-focus: var(--box-blue-100);--surface-status-surface-boxblue-hover: var(--box-blue-100);--surface-status-surface-boxblue: var(--box-blue-100);--surface-status-surface-green-focus: var(--green-light-50);--surface-status-surface-green-hover: var(--green-light-50);--surface-status-surface-green: var(--green-light-50);--surface-status-surface-dark-blue-focus: var(--dark-blue-50);--surface-status-surface-dark-blue-hover: var(--dark-blue-50);--surface-status-surface-dark-blue: var(--dark-blue-50);--surface-status-surface-light-blue-focus: var(--light-blue-50);--surface-status-surface-light-blue-hover: var(--light-blue-50);--surface-status-surface-light-blue: var(--light-blue-50);--surface-status-surface-purple-focus: var(--purple-rain-50);--surface-status-surface-purple-hover: var(--purple-rain-50);--surface-status-surface-purple: var(--purple-rain-50);--surface-status-surface-red-focus: var(--watermelon-red-50);--surface-status-surface-red-hover: var(--watermelon-red-50);--surface-status-surface-red: var(--watermelon-red-50);--surface-status-surface-orange-focus: var(--orange-50);--surface-status-surface-orange-hover: var(--orange-50);--surface-status-surface-orange: var(--orange-50);--surface-status-surface-yellow-focus: var(--yellow-50);--surface-status-surface-yellow-hover: var(--yellow-50);--surface-status-surface-yellow: var(--yellow-50);--surface-cta-surface-tertiary-promo-focus-pressed: var(--grimace-20);--surface-cta-surface-tertiary-promo-focus: var(--grimace-05);--surface-cta-surface-tertiary-promo-pressed: var(--grimace-20);--surface-cta-surface-tertiary-promo-hover: var(--grimace-05);--surface-cta-surface-tertiary-promo: var(--grimace-10);--surface-cta-surface-tertiary-pressed: var(--gray-10);--surface-cta-surface-tertiary-hover: var(--gray-05);--surface-cta-surface-tertiary: var(--gray-white);--surface-cta-surface-icon-utility-pressed: var(--gray-30);--surface-cta-surface-icon-utility-hover: var(--gray-20);--surface-cta-surface-icon-utility: var(--gray-10);--surface-cta-surface-icon-pressed: var(--black-opacity-08);--surface-cta-surface-icon-hover: var(--black-opacity-04);--surface-cta-surface-icon-disabled: var(--black-opacity-00);--surface-cta-surface-icon: var(--black-opacity-00);--surface-cta-surface-outline-pressed: var(--black-opacity-08);--surface-cta-surface-outline-hover: var(--black-opacity-04);--surface-cta-surface-outline: var(--black-opacity-00);--surface-status-surface-inprogress: var(--yellorange-100);--surface-status-surface-uploading: var(--box-blue-100);--surface-status-surface-scheduled: var(--purple-rain-100);--surface-status-surface-pending: var(--gray-40);--surface-status-surface-error: var(--watermelon-red-100);--surface-status-surface-success: var(--green-light-100);--surface-status-surface-generic: var(--gray-40);--surface-filter-surface-selected-focus: var(--box-blue-100);--surface-filter-surface-selected: var(--box-blue-100);--surface-filter-surface-focus: var(--box-blue-100);--surface-filter-surface-hover: var(--box-blue-100);--surface-filter-surface: var(--box-blue-100);--surface-pill-surface-focus: var(--gray-10);--surface-pill-surface-hover: var(--gray-10);--surface-pill-surface: var(--gray-10);--surface-message-surface-promo-secondary: var(--grimace-10);--surface-message-surface-success-secondary: var(--green-light-10);--surface-message-surface-success: var(--green-light-20);--surface-message-surface-info-secondary: var(--light-blue-10);--surface-message-surface-info: var(--light-blue-20);--surface-message-surface-generic-secondary: var(--gray-10);--surface-message-surface-generic: var(--gray-10);--surface-tooltip-surface-error: var(--watermelon-red-10);--surface-tooltip-surface: var(--gray-80);--surface-message-surface-error-secondary: var(--watermelon-red-10);--surface-message-surface-error: var(--watermelon-red-20);--surface-message-surface-warning-secondary: var(--yellorange-10);--surface-message-surface-warning: var(--yellorange-20);--surface-toggle-surface-on-hover: var(--box-blue-20);--surface-toggle-surface-on: var(--box-blue-10);--surface-toggle-surface-off-hover: var(--gray-05);--surface-input-surface-error-focus: var(--gray-white);--surface-input-surface-error-hover: var(--gray-white);--surface-input-surface-error: var(--gray-white);--surface-input-surface-focus: var(--gray-white);--surface-input-surface-hover: var(--gray-white);--surface-input-surface: var(--gray-white);--surface-dropdown-surface-error-focus: var(--gray-white);--surface-dropdown-surface-error-hover: var(--gray-white);--surface-dropdown-surface-error: var(--gray-white);--surface-dropdown-surface-focus: var(--gray-white);--surface-dropdown-surface-hover: var(--gray-white);--surface-dropdown-surface: var(--gray-white);--surface-cta-surface-secondary-focus-pressed: var(--gray-10);--surface-cta-surface-secondary-pressed: var(--gray-10);--surface-cta-surface-secondary-focus: var(--gray-05);--surface-cta-surface-secondary-hover: var(--gray-05);--surface-cta-surface-secondary-disabled: var(--gray-white);--surface-cta-surface-secondary-busy: var(--gray-white);--surface-cta-surface-secondary: var(--gray-white);--surface-surface-brand-secondary: var(--box-blue-10);--surface-menu-surface-focus: var(--gray-05);--surface-menu-surface-pressed: var(--gray-05);--surface-menu-surface-hover: var(--gray-05);--surface-menu-surface: var(--gray-white);--surface-card-surface-pressed: var(--gray-02);--surface-card-surface-focus: var(--box-blue-05);--surface-card-surface-hover: var(--gray-white);--surface-card-surface: var(--gray-white);--surface-surface-secondary-focus: var(--gray-02);--surface-surface-secondary-hover: var(--gray-05);--surface-surface-quaternary: var(--gray-20);--surface-surface-tertiary: var(--gray-10);--surface-surface-secondary: var(--gray-02);--surface-surface-hover: var(--gray-05);--surface-surface: var(--gray-white);--background-background: var(--gray-white)}._noAttributesText_13fs7_753{text-align:center}._fieldWrapper_13fs7_757{isolation:isolate;position:relative}._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>input,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>button,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>div[role=group]>div,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>div>div{border-bottom:none!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>input:not(:disabled):not(:focus-visible):not(._error_13fs7_770):hover,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>button:not(:disabled):not(:focus-visible):not(._error_13fs7_770):hover,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>div[role=group]>div:not(:disabled):not(:focus-visible):not(._error_13fs7_770):hover,._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762>div>div:not(:disabled):not(:focus-visible):not(._error_13fs7_770):hover{border-bottom:none}._fieldWrapper_13fs7_757 ._hasSuggestion_13fs7_762 div[role=group]>div{margin-left:var(--border-1);margin-right:var(--border-1)}._fieldWrapper_13fs7_757 ._dateField_13fs7_782>div[role=group]>div{padding-inline:.75rem}._fieldWrapper_13fs7_757 ._suggestionApplied_13fs7_786>._comboboxContainer_13fs7_786,._fieldWrapper_13fs7_757 ._suggestionApplied_13fs7_786>input,._fieldWrapper_13fs7_757 ._suggestionApplied_13fs7_786>button,._fieldWrapper_13fs7_757 ._suggestionApplied_13fs7_786>div[role=group]>div,._fieldWrapper_13fs7_757 ._suggestionApplied_13fs7_786>div>div{border:double var(--border-1) transparent!important;box-sizing:border-box!important;border-radius:var(--radius-2);background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#fe03dc 0%,#2784fa 100%)!important;background-origin:border-box!important;background-clip:padding-box,border-box!important;outline:none}
+:root{--notification-default-paragraph-indent: 0rem;--notification-default-paragraph-spacing: 0;--notification-default-text-case: none;--notification-default-text-decoration: none;--notification-default-letter-spacing: .01875rem;--notification-default-font-size: .5625rem;--notification-default-line-height: .75rem;--breakpoint-xlarge: 1219px;--breakpoint-large: 1023px;--breakpoint-medium: 767px;--breakpoint-small: 374px;--animation-easing-ease-base: cubic-bezier(.16, 1, .3, 1);--animation-duration-4: .4s;--animation-duration-3: .3s;--animation-duration-2: .2s;--text-decoration-underline: underline;--font-weights-black: 900;--font-weights-bold: 700;--font-weights-semibold: 600;--font-weights-regular: 400;--font-families-sans: Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--border-8: .5rem;--border-6: .375rem;--border-4: .25rem;--white-opacity-30: #ffffff4d;--white-opacity-70: #ffffffb3;--size-20: 5rem;--size-18: 4.5rem;--size-16: 4rem;--size-15: 3.75rem;--size-14: 3.5rem;--size-12: 3rem;--size-11: 2.75rem;--size-10: 2.5rem;--size-9: 2.25rem;--size-8: 2rem;--size-7: 1.75rem;--size-6: 1.5rem;--size-5: 1.25rem;--size-4: 1rem;--size-3: .75rem;--size-2: .5rem;--size-1: .25rem;--size-05: .125rem;--black-opacity-00: rgba(0, 0, 0, 0);--black-opacity-04: rgba(0, 0, 0, .04);--black-opacity-08: rgba(0, 0, 0, .08);--black-opacity-50: rgba(0, 0, 0, .5);--black-opacity-60: rgba(0, 0, 0, .6);--black-opacity-80: rgba(0, 0, 0, .8);--innershadow-1: inset 0 .125rem .25rem 0 rgba(0, 0, 0, .1);--dropshadow-1: 0 0 .5rem 0 rgba(0, 0, 0, .05);--dropshadow-2: 0 .0625rem .25rem 0 rgba(0, 0, 0, .1);--dropshadow-3-inverse: 0 -.25rem .75rem 0 rgba(0, 0, 0, .1);--dropshadow-3: 0 .25rem .75rem 0 rgba(0, 0, 0, .1);--space-20: 5rem;--space-18: 4.5rem;--space-16: 4rem;--space-15: 3.75rem;--space-14: 3.5rem;--space-12: 3rem;--space-11: 2.75rem;--space-10: 2.5rem;--space-9: 2.25rem;--space-8: 2rem;--space-7: 1.75rem;--space-6: 1.5rem;--space-5: 1.25rem;--space-4: 1rem;--space-3: .75rem;--space-2: .5rem;--space-1: .25rem;--space-05: .125rem;--border-3: .1875rem;--border-2: .125rem;--border-1: .0625rem;--radius-half: 2rem;--radius-8: 1.75rem;--radius-7: 1.5rem;--radius-6: 1.25rem;--radius-5: 1rem;--radius-4: .75rem;--radius-3: .5rem;--radius-2: .375rem;--radius-1: .25rem;--radius-05: .125rem;--link-default-text-case: none;--link-default-paragraph-indent: 0rem;--link-default-paragraph-spacing: 0;--link-default-letter-spacing: .01875rem;--link-default-font-size: .875rem;--link-default-line-height: 1.25rem;--label-default-text-decoration: none;--label-default-text-case: none;--label-default-paragraph-spacing: 0;--label-default-letter-spacing: .0375rem;--label-default-font-size: .625rem;--label-default-line-height: 1rem;--label-bold-text-decoration: none;--label-bold-text-case: none;--label-bold-paragraph-spacing: 0;--label-bold-letter-spacing: .0375rem;--label-bold-font-size: .625rem;--label-bold-line-height: 1rem;--caption-default-text-decoration: none;--caption-default-text-case: none;--caption-default-paragraph-spacing: 0;--caption-default-letter-spacing: .01875rem;--caption-default-font-size: .75rem;--caption-default-line-height: .875rem;--caption-bold-text-decoration: none;--caption-bold-text-case: none;--caption-bold-paragraph-spacing: 0;--caption-bold-letter-spacing: .01875rem;--caption-bold-font-size: .75rem;--caption-bold-line-height: .875rem;--body-default-text-decoration: none;--body-default-text-case: none;--body-default-paragraph-spacing: 0;--body-default-letter-spacing: .01875rem;--body-default-font-size: .875rem;--body-default-line-height: 1.25rem;--body-default-semibold-text-decoration: none;--body-default-semibold-text-case: none;--body-default-semibold-paragraph-spacing: 0;--body-default-semibold-letter-spacing: .01875rem;--body-default-semibold-font-size: .875rem;--body-default-semibold-line-height: 1.25rem;--body-default-bold-text-decoration: none;--body-default-bold-text-case: none;--body-default-bold-paragraph-spacing: 0;--body-default-bold-letter-spacing: .01875rem;--body-default-bold-font-size: .875rem;--body-default-bold-line-height: 1.25rem;--body-large-bold-text-decoration: none;--body-large-bold-text-case: none;--body-large-bold-paragraph-spacing: 0;--body-large-bold-letter-spacing: .01875rem;--body-large-bold-font-size: 1rem;--body-large-bold-line-height: 1.5rem;--body-large-text-decoration: none;--body-large-text-case: none;--body-large-paragraph-spacing: 0;--body-large-letter-spacing: .01875rem;--body-large-font-size: 1rem;--body-large-line-height: 1.5rem;--title-mondo-text-decoration: none;--title-mondo-text-case: none;--title-mondo-paragraph-spacing: 0;--title-mondo-letter-spacing: 0;--title-mondo-font-size: 2.25rem;--title-mondo-line-height: 2.75rem;--title-x-large-text-decoration: none;--title-x-large-text-case: none;--title-x-large-paragraph-spacing: 0;--title-x-large-letter-spacing: .01875rem;--title-x-large-font-size: 1.3125rem;--title-x-large-line-height: 2rem;--title-large-text-decoration: none;--title-large-text-case: none;--title-large-paragraph-spacing: 0;--title-large-letter-spacing: .01875rem;--title-large-font-size: 1.125rem;--title-large-line-height: 1.5rem;--title-medium-text-decoration: none;--title-medium-text-case: none;--title-medium-paragraph-spacing: 0;--title-medium-letter-spacing: .01875rem;--title-medium-font-size: 1rem;--title-medium-line-height: 1.5rem;--title-small-text-decoration: none;--title-small-text-case: none;--title-small-paragraph-spacing: 0;--title-small-letter-spacing: .01875rem;--title-small-font-size: .9375rem;--title-small-line-height: 1.25rem;--title-subtitle-text-decoration: none;--title-subtitle-text-case: none;--title-subtitle-paragraph-spacing: 0;--title-subtitle-letter-spacing: .01875rem;--title-subtitle-font-size: .875rem;--title-subtitle-line-height: 1.25rem;--grimace-02: #fbfbfe;--grimace-05: #f6f4fc;--grimace-180: #0e0827;--grimace-170: #160b3a;--grimace-160: #1d0f4e;--grimace-150: #241361;--grimace-120: #3a1e9b;--grimace-110: #4122af;--grimace-100: #4826c2;--grimace-50: #a392e0;--grimace-20: #dad4f3;--grimace-10: #ece9f8;--purple-rain-02: #fdfbff;--purple-rain-05: #faf5fe;--purple-rain-180: #200d2f;--purple-rain-170: #301347;--purple-rain-160: #40195f;--purple-rain-150: #4f1f76;--purple-rain-120: #7f32be;--purple-rain-110: #8f39d5;--purple-rain-100: #9f3fed;--purple-rain-50: #cf9ff6;--purple-rain-20: #ecd9fb;--purple-rain-10: #f5ebfd;--yellow-02: #fffefa;--yellow-05: #fffdf2;--yellow-180: #332b00;--yellow-170: #4c4000;--yellow-160: #665600;--yellow-150: #806b00;--yellow-120: #ccac00;--yellow-110: #e6c100;--yellow-100: #ffd700;--yellow-50: #ffeb7f;--yellow-20: #fff7cc;--yellow-10: #fffbe5;--yellorange-02: #fffefb;--yellorange-05: #fefbf3;--yellorange-180: #312405;--yellorange-170: #493608;--yellorange-160: #62480b;--yellorange-150: #7a590d;--yellorange-120: #c48f16;--yellorange-110: #dca118;--yellorange-100: #f5b31b;--yellorange-50: #fad98d;--yellorange-20: #fdf0d1;--yellorange-10: #fef7e8;--orange-02: #fffdfb;--orange-05: #fef8f3;--orange-180: #301a05;--orange-170: #482708;--orange-160: #60340a;--orange-150: #78400d;--orange-120: #c16715;--orange-110: #d97417;--orange-100: #f1811a;--orange-50: #f8c08c;--orange-20: #fce6d1;--orange-10: #fdf2e8;--watermelon-red-02: #fffbfc;--watermelon-red-05: #fef5f6;--watermelon-red-180: #2f0b11;--watermelon-red-170: #47101a;--watermelon-red-160: #5f1623;--watermelon-red-150: #761b2b;--watermelon-red-120: #be2c46;--watermelon-red-110: #d5324e;--watermelon-red-100: #ed3757;--watermelon-red-50: #f69bab;--watermelon-red-20: #fbd7dd;--watermelon-red-10: #fdebee;--green-light-02: #fbfefd;--green-light-05: #f4fcf8;--green-light-180: #08271a;--green-light-170: #0b3a27;--green-light-160: #0f4e34;--green-light-150: #136140;--green-light-120: #1e9b67;--green-light-110: #22af74;--green-light-100: #26c281;--green-light-50: #92e0c0;--green-light-20: #d4f3e6;--green-light-10: #e9f8f2;--light-blue-02: #fbfdff;--light-blue-05: #f4f9ff;--light-blue-180: #071b32;--light-blue-170: #0b284c;--light-blue-160: #0e3665;--light-blue-150: #12437e;--light-blue-120: #1d6bca;--light-blue-110: #2079e3;--light-blue-100: #2486fc;--light-blue-50: #91c2fd;--light-blue-20: #d3e7fe;--light-blue-10: #e9f2fe;--dark-blue-02: #fafbfd;--dark-blue-05: #f2f5f9;--dark-blue-180: #000c1a;--dark-blue-170: #001228;--dark-blue-160: #001835;--dark-blue-150: #001e42;--dark-blue-120: #00306a;--dark-blue-110: #003677;--dark-blue-100: #003c84;--dark-blue-50: #7f9dc1;--dark-blue-20: #ccd8e6;--dark-blue-10: #e5ebf2;--box-blue-02: #fafcfe;--box-blue-05: #f2f7fd;--box-blue-180: #00132b;--box-blue-170: #001d40;--box-blue-160: #002755;--box-blue-150: #00316b;--box-blue-120: #004eaa;--box-blue-110: #0057c0;--box-blue-100: #0061d5;--box-blue-80: #3381dd;--box-blue-50: #7fb0ea;--box-blue-40: #99c0ee;--box-blue-30: #b2cff2;--box-blue-20: #ccdff7;--box-blue-10: #e5effa;--gray-white: #ffffff;--gray-black: #000000;--gray-05: #f4f4f4;--gray-02: #fbfbfb;--gray-100: #222222;--gray-90: #383838;--gray-80: #4e4e4e;--gray-65: #6f6f6f;--gray-50: #909090;--gray-40: #a7a7a7;--gray-30: #bcbcbc;--gray-20: #d3d3d3;--gray-10: #e8e8e8;--brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);--brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);--brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);--border-cta-border-outline-disabled: #646464;--surface-badge-video-surface: #009aed;--surface-badge-keynote-surface: #0a84ff;--surface-badge-pages-surface: #ff9500;--surface-badge-sheets-surface: #21a464;--surface-badge-docs-surface: #4083f7;--surface-badge-pdf-surface: #d0021b;--surface-surface-brand-disabled: #0061d5;--surface-surface-brand-busy: #0061d5;--surface-surface-brand-pressed: #004eac;--surface-surface-brand-hover: #006ae9;--surface-surface-brand: #0061d5;--notification-default-font-weight: 700;--notification-default-font-family: var(--font-families-sans);--motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);--link-default-text-decoration: var(--text-decoration-underline);--link-default-font-weight: 400;--link-default-font-family: var(--font-families-sans);--label-default-font-weight: 400;--label-default-font-family: var(--font-families-sans);--label-bold-font-weight: 700;--label-bold-font-family: var(--font-families-sans);--caption-default-font-weight: 400;--caption-default-font-family: var(--font-families-sans);--caption-bold-font-weight: 700;--caption-bold-font-family: var(--font-families-sans);--body-default-font-weight: 400;--body-default-font-family: var(--font-families-sans);--body-default-semibold-font-weight: 600;--body-default-semibold-font-family: var(--font-families-sans);--body-default-bold-font-weight: 700;--body-default-bold-font-family: var(--font-families-sans);--body-large-bold-font-weight: 700;--body-large-bold-font-family: var(--font-families-sans);--body-large-font-weight: 400;--body-large-font-family: var(--font-families-sans);--title-mondo-font-weight: 900;--title-mondo-font-family: var(--font-families-sans);--title-x-large-font-weight: 700;--title-x-large-font-family: var(--font-families-sans);--title-large-font-weight: 700;--title-large-font-family: var(--font-families-sans);--title-medium-font-weight: 700;--title-medium-font-family: var(--font-families-sans);--title-small-font-weight: 700;--title-small-font-family: var(--font-families-sans);--title-subtitle-font-weight: 700;--title-subtitle-font-family: var(--font-families-sans);--brand-sign-tertiary: var(--dark-blue-10);--brand-sign-secondary: var(--dark-blue-20);--brand-sign-primary: var(--dark-blue-100);--brand-docgen-tertiary: var(--grimace-10);--brand-docgen-secondary: var(--grimace-20);--brand-docgen-primary: var(--grimace-120);--brand-forms-tertiary: var(--green-light-10);--brand-forms-secondary: var(--green-light-20);--brand-forms-primary: var(--green-light-120);--brand-box-tertiary: var(--box-blue-10);--brand-box-secondary: var(--box-blue-20);--brand-box-primary: var(--box-blue-100);--overlay-modal-overlay: var(--black-opacity-80);--overlay-sidepanel-overlay: var(--black-opacity-50);--text-toggletext-text: var(--box-blue-170);--text-text-on-light-disabled: var(--gray-30);--text-cta-link-disabled: var(--box-blue-30);--text-cta-promo: var(--grimace-100);--text-cta-link-secondary-hover: var(--gray-65);--text-cta-link-secondary-pressed: var(--gray-65);--text-cta-link-secondary: var(--gray-65);--text-text-error-on-light: var(--watermelon-red-110);--text-nav-text-on-light-focus: var(--gray-white);--text-nav-text-on-light-selected: var(--gray-white);--text-nav-text-on-light-hover: var(--gray-white);--text-nav-text-on-light: var(--gray-white);--text-nav-text-on-dark-focus: var(--gray-white);--text-nav-text-on-dark-selected: var(--gray-white);--text-nav-text-on-dark-hover: var(--gray-white);--text-nav-text-on-dark: var(--gray-white);--text-cta-link-pressed: var(--light-blue-100);--text-cta-link-hover: var(--light-blue-120);--text-cta-link: var(--box-blue-100);--text-text-brand-on-color: var(--gray-white);--text-text-on-dark: var(--gray-white);--text-text-on-light-secondary-hover: var(--gray-80);--text-text-on-light-tertiary: var(--gray-50);--text-text-on-light-secondary: var(--gray-65);--text-text-on-light: var(--gray-100);--outline-focus-on-dark: var(--gray-white);--outline-focus-on-light: var(--light-blue-100);--icon-icon-blue: var(--box-blue-100);--icon-cta-icon-on-color-pressed: var(--gray-black);--icon-cta-icon-on-color-hover: var(--gray-black);--icon-cta-icon-on-color: var(--gray-black);--icon-cta-icon-utility-pressed: var(--gray-black);--icon-cta-icon-utility-hover: var(--gray-black);--icon-cta-icon-utility: var(--gray-80);--icon-cta-icon-pressed: var(--gray-100);--icon-cta-icon-hover: var(--gray-100);--icon-cta-icon: var(--gray-65);--icon-nav-icon-on-light-focus: var(--gray-100);--icon-nav-icon-on-light-selected: var(--gray-100);--icon-nav-icon-on-light-hover: var(--gray-100);--icon-nav-icon-on-light: var(--gray-100);--icon-nav-icon-on-dark-focus: var(--gray-white);--icon-nav-icon-on-dark-selected: var(--gray-white);--icon-nav-icon-on-dark-hover: var(--gray-white);--icon-nav-icon-on-dark: var(--gray-white);--icon-icon-required-on-light: var(--watermelon-red-110);--icon-icon-error-on-light: var(--watermelon-red-110);--icon-icon-on-dark: var(--gray-white);--icon-icon-on-light-tertiary: var(--gray-50);--icon-icon-on-light-secondary: var(--gray-65);--icon-icon-on-light: var(--gray-100);--border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);--border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);--border-toggletext-border-off-ai: var(--gray-30);--border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);--border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);--border-toggletext-border-on-ai: var(--brand-box-ai-100);--border-toggletext-border-on-pressed: var(--box-blue-30);--border-toggletext-border-on-hover: var(--box-blue-20);--border-toggletext-border-on: var(--box-blue-05);--border-toggletext-border-off-pressed: var(--gray-65);--border-toggletext-border-off-hover: var(--gray-65);--border-toggletext-border-off: var(--gray-65);--border-radiotile-border-selected: var(--box-blue-100);--border-radiotile-border-hover: var(--gray-30);--border-radiotile-border: var(--gray-30);--border-cta-border-secondary-disabled: var(--gray-10);--border-toggle-border-on: var(--box-blue-40);--border-contentbutton-border-selected: var(--gray-50);--border-cta-border-ai: var(--brand-box-ai-100);--border-card-border-ai: var(--brand-box-ai-100);--border-toggle-border: var(--gray-30);--border-badge-border: var(--gray-white);--border-collapsible-border: var(--gray-20);--border-filterchip-border-multi-on-hover: var(--box-blue-40);--border-filterchip-border-multi-on: var(--box-blue-40);--border-gridthumbnail-border: var(--gray-10);--border-search-global-border-hover: var(--gray-10);--border-search-border-hover: var(--gray-65);--border-search-border: var(--gray-05);--border-status-border-hover: var(--black-opacity-04);--border-avatar-border-pressed: var(--black-opacity-08);--border-avatar-border-hover: var(--black-opacity-04);--border-inputchip-border-error: var(--watermelon-red-100);--border-card-border-pressed: var(--gray-10);--border-divider-border: var(--gray-10);--border-checkbox-border-selected-hover: var(--light-blue-110);--border-checkbox-border-selected: var(--box-blue-100);--border-checkbox-border-hover: var(--gray-80);--border-checkbox-border: var(--gray-65);--border-radio-border-hover: var(--gray-80);--border-radio-border-selected-hover: var(--light-blue-110);--border-radio-border-selected: var(--box-blue-100);--border-radio-border: var(--gray-65);--border-switch-border-hover: var(--gray-30);--border-switch-border: var(--gray-30);--border-item-small-border-selected: var(--box-blue-100);--border-item-border-selected: var(--box-blue-100);--border-item-border-hover: var(--gray-10);--border-cta-border-outline-pressed: var(--gray-black);--border-cta-border-outline-hover: var(--gray-black);--border-cta-border-outline: var(--gray-black);--border-tab-border-hover: var(--gray-30);--border-tab-border: var(--gray-10);--border-tab-border-selected-focus: var(--box-blue-100);--border-tab-border-selected-hover: var(--box-blue-100);--border-tab-border-selected: var(--box-blue-100);--border-tooltip-border-error: var(--watermelon-red-50);--border-dropdown-border-error-focus: var(--watermelon-red-100);--border-dropdown-border-error-hover: var(--watermelon-red-100);--border-dropdown-border-error: var(--watermelon-red-100);--border-dropdown-border-focus: var(--box-blue-100);--border-dropdown-border-hover: var(--gray-65);--border-dropdown-border: var(--gray-30);--border-input-border-error-focus: var(--watermelon-red-100);--border-input-border-error-hover: var(--watermelon-red-100);--border-input-border-error: var(--watermelon-red-100);--border-input-border-focus: var(--light-blue-100);--border-input-border-hover: var(--gray-65);--border-input-border: var(--gray-50);--border-message-border-error-secondary: var(--watermelon-red-50);--border-message-border-error: var(--watermelon-red-100);--border-message-border-warning-secondary: var(--yellorange-50);--border-message-border-warning: var(--yellorange-100);--border-message-border-success-secondary: var(--green-light-50);--border-message-border-success: var(--green-light-100);--border-message-border-info-secondary: var(--light-blue-50);--border-message-border-info: var(--box-blue-100);--border-message-border-generic-secondary: var(--gray-50);--border-message-border-generic: var(--gray-100);--border-card-border-focus: var(--box-blue-100);--border-card-border-hover: var(--gray-10);--border-card-border: var(--gray-10);--border-cta-border-secondary-hover: var(--gray-30);--border-cta-border-secondary-pressed: var(--gray-30);--border-cta-border-secondary: var(--gray-30);--surface-toggletext-surface-off-ai-pressed: var(--gray-10);--surface-toggletext-surface-off-ai-hover: var(--gray-05);--surface-toggletext-surface-off-ai: var(--gray-white);--surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);--surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);--surface-toggletext-surface-on-ai: var(--brand-box-ai-100);--surface-toggletext-surface-on-pressed: var(--box-blue-30);--surface-toggletext-surface-on-hover: var(--box-blue-20);--surface-toggletext-surface-on: var(--box-blue-05);--surface-radiotile-surface-selected: var(--box-blue-05);--surface-radiotile-surface-hover: var(--gray-05);--surface-radiotile-surface: var(--gray-white);--surface-cta-surface-disabled: var(--box-blue-30);--surface-toggle-surface-on-pressed: var(--box-blue-30);--surface-toggle-surface-off-pressed: var(--gray-10);--surface-toolbar-surface: var(--gray-100);--surface-contentswitcher-surface: var(--gray-10);--surface-contentbutton-surface-surface-selected: var(--gray-white);--surface-cta-surface-promo-focus-pressed: var(--grimace-120);--surface-cta-surface-promo-focus: var(--grimace-100);--surface-cta-surface-promo-pressed: var(--grimace-120);--surface-cta-surface-promo-hover: var(--grimace-100);--surface-cta-surface-promo: var(--grimace-110);--surface-upload-surface-brand-neutral: var(--box-blue-100);--surface-illustration-surface-box: var(--box-blue-100);--surface-illustration-surface-box-neutral: var(--box-blue-100);--surface-progressbar-surface-brand: var(--box-blue-100);--surface-nav-surface-brand: var(--box-blue-100);--surface-text-highlight-surface: var(--yellow-20);--surface-toggle-surface-pressed-hover: var(--box-blue-80);--surface-toggle-surface-pressed: var(--box-blue-100);--surface-toggle-surface-hover: var(--gray-05);--surface-toggle-surface: var(--gray-white);--surface-dropdown-secondary-surface-pressed: var(--gray-10);--surface-dropdown-secondary-surface-hover: var(--gray-05);--surface-dropdown-secondary-surface: var(--gray-white);--surface-dropdown-primary-surface-pressed: var(--gray-10);--surface-dropdown-primary-surface-hover: var(--gray-05);--surface-option-grid-surface-selected: var(--black-opacity-08);--surface-option-grid-surface-hover: var(--black-opacity-04);--surface-page-surface: var(--gray-white);--surface-chip-button-surface-hover: var(--black-opacity-08);--surface-chip-button-surface: var(--black-opacity-04);--surface-badge-notification-surface: var(--watermelon-red-110);--surface-badge-progress-surface: var(--yellorange-100);--surface-badge-offline-surface: var(--green-light-100);--surface-badge-collection-surface: var(--gray-10);--surface-badge-pin-surface: var(--gray-10);--surface-badge-online-surface: var(--green-light-120);--surface-badge-coadmin-surface: var(--purple-rain-100);--surface-badge-admin-surface: var(--dark-blue-100);--surface-badge-external-surface: var(--gray-50);--surface-badge-error-surface: var(--watermelon-red-110);--surface-badge-rejected-surface: var(--watermelon-red-110);--surface-badge-completed-surface: var(--green-light-100);--surface-badge-annotation-surface: var(--yellorange-100);--surface-badge-taskapproval-surface: var(--light-blue-120);--surface-badge-task-surface: var(--light-blue-100);--surface-badge-mention-surface: var(--light-blue-120);--surface-badge-relay-surface: var(--light-blue-120);--surface-badge-foldershared-surface: var(--light-blue-100);--surface-badge-folderexternal-surface: var(--gray-65);--surface-badge-boxnote-surface: var(--gray-10);--surface-badge-canvas-surface: var(--orange-100);--surface-badge-image-surface: var(--green-light-100);--surface-accordion-surface-hover: var(--gray-05);--surface-accordion-surface: var(--gray-white);--surface-tab-surface-pressed: var(--gray-10);--surface-tab-surface-hover: var(--gray-05);--surface-day-surface-selected-hover: var(--dark-blue-100);--surface-day-surface-selected: var(--box-blue-100);--surface-day-surface-hover: var(--gray-05);--surface-day-surface: var(--gray-white);--surface-search-surface-focused: var(--gray-white);--surface-search-surface-hover: var(--gray-02);--surface-search-global-surface: var(--gray-05);--surface-search-surface: var(--gray-05);--surface-scrollbar-surface: var(--black-opacity-50);--surface-sliderthumb-surface-hover: var(--light-blue-100);--surface-sliderthumb-surface: var(--box-blue-100);--surface-slidertrack-surface: var(--gray-65);--surface-filterchip-surface-single-on-hover: var(--box-blue-100);--surface-filterchip-surface-single-on: var(--box-blue-100);--surface-filterchip-surface-single-hover: var(--black-opacity-08);--surface-filterchip-surface-single: var(--black-opacity-04);--surface-filterchip-surface-multi-on-hover: var(--box-blue-20);--surface-filterchip-surface-multi-on: var(--box-blue-10);--surface-filterchip-surface-multi-hover: var(--black-opacity-08);--surface-filterchip-surface-multi: var(--black-opacity-04);--surface-inputchip-surface-error: var(--watermelon-red-10);--surface-inputchip-surface-hover: var(--gray-10);--surface-inputchip-surface: var(--gray-10);--surface-ghost-surface-secondary: var(--gray-05);--surface-ghost-surface: var(--gray-02);--surface-checkbox-surface-selected-hover: var(--light-blue-110);--surface-checkbox-surface-selected: var(--box-blue-100);--surface-checkbox-surface-hover: var(--gray-white);--surface-checkbox-surface: var(--gray-white);--surface-radio-surface-selected-hover: var(--light-blue-110);--surface-radio-surface-selected: var(--box-blue-100);--surface-radio-surface-hover: var(--gray-white);--surface-radio-surface: var(--gray-white);--surface-switch-surface-on-hover: var(--light-blue-110);--surface-switch-surface-on: var(--box-blue-100);--surface-switch-surface-off-hover: var(--gray-30);--surface-switch-surface-off: var(--gray-20);--surface-switch-surface-hover: var(--gray-white);--surface-switch-surface: var(--gray-white);--surface-item-small-surface-selected: var(--box-blue-05);--surface-item-small-surface-hover: var(--gray-05);--surface-item-small-surface: var(--gray-white);--surface-item-surface-selected: var(--box-blue-05);--surface-item-surface-hover: var(--gray-white);--surface-status-surface-gray-focus: var(--gray-10);--surface-status-surface-gray-hover: var(--gray-10);--surface-status-surface-gray: var(--gray-10);--surface-status-surface-boxblue-focus: var(--box-blue-100);--surface-status-surface-boxblue-hover: var(--box-blue-100);--surface-status-surface-boxblue: var(--box-blue-100);--surface-status-surface-green-focus: var(--green-light-50);--surface-status-surface-green-hover: var(--green-light-50);--surface-status-surface-green: var(--green-light-50);--surface-status-surface-dark-blue-focus: var(--dark-blue-50);--surface-status-surface-dark-blue-hover: var(--dark-blue-50);--surface-status-surface-dark-blue: var(--dark-blue-50);--surface-status-surface-light-blue-focus: var(--light-blue-50);--surface-status-surface-light-blue-hover: var(--light-blue-50);--surface-status-surface-light-blue: var(--light-blue-50);--surface-status-surface-purple-focus: var(--purple-rain-50);--surface-status-surface-purple-hover: var(--purple-rain-50);--surface-status-surface-purple: var(--purple-rain-50);--surface-status-surface-red-focus: var(--watermelon-red-50);--surface-status-surface-red-hover: var(--watermelon-red-50);--surface-status-surface-red: var(--watermelon-red-50);--surface-status-surface-orange-focus: var(--orange-50);--surface-status-surface-orange-hover: var(--orange-50);--surface-status-surface-orange: var(--orange-50);--surface-status-surface-yellow-focus: var(--yellow-50);--surface-status-surface-yellow-hover: var(--yellow-50);--surface-status-surface-yellow: var(--yellow-50);--surface-cta-surface-tertiary-promo-focus-pressed: var(--grimace-20);--surface-cta-surface-tertiary-promo-focus: var(--grimace-05);--surface-cta-surface-tertiary-promo-pressed: var(--grimace-20);--surface-cta-surface-tertiary-promo-hover: var(--grimace-05);--surface-cta-surface-tertiary-promo: var(--grimace-10);--surface-cta-surface-tertiary-pressed: var(--gray-10);--surface-cta-surface-tertiary-hover: var(--gray-05);--surface-cta-surface-tertiary: var(--gray-white);--surface-cta-surface-icon-utility-pressed: var(--gray-30);--surface-cta-surface-icon-utility-hover: var(--gray-20);--surface-cta-surface-icon-utility: var(--gray-10);--surface-cta-surface-icon-pressed: var(--black-opacity-08);--surface-cta-surface-icon-hover: var(--black-opacity-04);--surface-cta-surface-icon-disabled: var(--black-opacity-00);--surface-cta-surface-icon: var(--black-opacity-00);--surface-cta-surface-outline-pressed: var(--black-opacity-08);--surface-cta-surface-outline-hover: var(--black-opacity-04);--surface-cta-surface-outline: var(--black-opacity-00);--surface-status-surface-inprogress: var(--yellorange-100);--surface-status-surface-uploading: var(--box-blue-100);--surface-status-surface-scheduled: var(--purple-rain-100);--surface-status-surface-pending: var(--gray-40);--surface-status-surface-error: var(--watermelon-red-100);--surface-status-surface-success: var(--green-light-100);--surface-status-surface-generic: var(--gray-40);--surface-filter-surface-selected-focus: var(--box-blue-100);--surface-filter-surface-selected: var(--box-blue-100);--surface-filter-surface-focus: var(--box-blue-100);--surface-filter-surface-hover: var(--box-blue-100);--surface-filter-surface: var(--box-blue-100);--surface-pill-surface-focus: var(--gray-10);--surface-pill-surface-hover: var(--gray-10);--surface-pill-surface: var(--gray-10);--surface-message-surface-promo-secondary: var(--grimace-10);--surface-message-surface-success-secondary: var(--green-light-10);--surface-message-surface-success: var(--green-light-20);--surface-message-surface-info-secondary: var(--light-blue-10);--surface-message-surface-info: var(--light-blue-20);--surface-message-surface-generic-secondary: var(--gray-10);--surface-message-surface-generic: var(--gray-10);--surface-tooltip-surface-error: var(--watermelon-red-10);--surface-tooltip-surface: var(--gray-80);--surface-message-surface-error-secondary: var(--watermelon-red-10);--surface-message-surface-error: var(--watermelon-red-20);--surface-message-surface-warning-secondary: var(--yellorange-10);--surface-message-surface-warning: var(--yellorange-20);--surface-toggle-surface-on-hover: var(--box-blue-20);--surface-toggle-surface-on: var(--box-blue-10);--surface-toggle-surface-off-hover: var(--gray-05);--surface-input-surface-error-focus: var(--gray-white);--surface-input-surface-error-hover: var(--gray-white);--surface-input-surface-error: var(--gray-white);--surface-input-surface-focus: var(--gray-white);--surface-input-surface-hover: var(--gray-white);--surface-input-surface: var(--gray-white);--surface-dropdown-surface-error-focus: var(--gray-white);--surface-dropdown-surface-error-hover: var(--gray-white);--surface-dropdown-surface-error: var(--gray-white);--surface-dropdown-surface-focus: var(--gray-white);--surface-dropdown-surface-hover: var(--gray-white);--surface-dropdown-surface: var(--gray-white);--surface-cta-surface-secondary-focus-pressed: var(--gray-10);--surface-cta-surface-secondary-pressed: var(--gray-10);--surface-cta-surface-secondary-focus: var(--gray-05);--surface-cta-surface-secondary-hover: var(--gray-05);--surface-cta-surface-secondary-disabled: var(--gray-white);--surface-cta-surface-secondary-busy: var(--gray-white);--surface-cta-surface-secondary: var(--gray-white);--surface-surface-brand-secondary: var(--box-blue-10);--surface-menu-surface-focus: var(--gray-05);--surface-menu-surface-pressed: var(--gray-05);--surface-menu-surface-hover: var(--gray-05);--surface-menu-surface: var(--gray-white);--surface-card-surface-pressed: var(--gray-02);--surface-card-surface-focus: var(--box-blue-05);--surface-card-surface-hover: var(--gray-white);--surface-card-surface: var(--gray-white);--surface-surface-secondary-focus: var(--gray-02);--surface-surface-secondary-hover: var(--gray-05);--surface-surface-quaternary: var(--gray-20);--surface-surface-tertiary: var(--gray-10);--surface-surface-secondary: var(--gray-02);--surface-surface-hover: var(--gray-05);--surface-surface: var(--gray-white);--background-background: var(--gray-white)}._noAttributesText_ix3i9_753{text-align:center}._fieldWrapper_ix3i9_757{isolation:isolate;position:relative}._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>input,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>button,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>div[role=group]>div,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>div>div{border-bottom:none!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>input:not(:disabled):not(:focus-visible):not(._error_ix3i9_770):hover,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>button:not(:disabled):not(:focus-visible):not(._error_ix3i9_770):hover,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>div[role=group]>div:not(:disabled):not(:focus-visible):not(._error_ix3i9_770):hover,._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762>div>div:not(:disabled):not(:focus-visible):not(._error_ix3i9_770):hover{border-bottom:none}._fieldWrapper_ix3i9_757 ._hasSuggestion_ix3i9_762 div[role=group]>div{margin-left:var(--border-1);margin-right:var(--border-1)}._fieldWrapper_ix3i9_757 ._dateField_ix3i9_782>div[role=group]>div{padding-inline:.75rem}._fieldWrapper_ix3i9_757 ._suggestionApplied_ix3i9_786>._comboboxContainer_ix3i9_786,._fieldWrapper_ix3i9_757 ._suggestionApplied_ix3i9_786>input,._fieldWrapper_ix3i9_757 ._suggestionApplied_ix3i9_786>button,._fieldWrapper_ix3i9_757 ._suggestionApplied_ix3i9_786>div[role=group]>div,._fieldWrapper_ix3i9_757 ._suggestionApplied_ix3i9_786>div>div{border:double var(--border-1) transparent!important;box-sizing:border-box!important;border-radius:var(--radius-2);background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#fe03dc 0%,#2784fa 100%)!important;background-origin:border-box!important;background-clip:padding-box,border-box!important;outline:none}._labelWrapper_ix3i9_800{width:100%;display:flex;align-items:baseline;justify-content:space-between}._labelWrapper_ix3i9_800 ._labelText_ix3i9_806{flex:unset!important}._labelWrapper_ix3i9_800 ._labelIcon_ix3i9_809{margin-inline-end:var(--space-3);margin-inline-start:var(--space-3);height:var(--space-4);width:var(--space-4)}

package/types/lib/components/metadata-editor-fields/types.d.ts

@@ -8,6 +8,7 @@ export type TemplateInstanceProps = {
 export type MetadataFieldProps = {
     description?: string | null;
     label: string;
+    isAiSuggestionApplied: boolean;
     fieldNamePrefix: string;
     updateModePrefix?: string;
     disableForm: boolean;

package/types/lib/components/metadata-editor-fields/utils.d.ts

@@ -1,3 +1,2 @@
-export declare const getFieldLabel: (label: string, description?: string) => string | (({ ...rest }: {
-    [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element);
+import { type Labelable, type TextProps } from '@box/blueprint-web';
+export declare const getFieldLabel: (fieldName: string, fieldDescription: string | undefined, isAiSuggestionApplied?: boolean, as?: TextProps['as']) => Labelable['label'];

package/chunks/metadata-editor-field-wrapper.js

@@ -1,85 +0,0 @@
-import "../styles/metadata-editor-field-wrapper.css";
-import T from "clsx";
-import { useFormikContext as C } from "formik";
-import v from "lodash/isUndefined";
-import { forwardRef as I, useState as A } from "react";
-import { AiSuggestionField as V } from "../esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/ai-suggestion-field.js";
-import { UpdateModeFieldWrapper as k } from "../esm/lib/components/metadata-editor-fields/components/update-mode-field-wrapper/update-mode-field-wrapper.js";
-import { editorFieldTypes as w } from "../esm/lib/components/metadata-editor-fields/editor-field-types.js";
-import { jsx as o, jsxs as E } from "react/jsx-runtime";
-const P = "_noAttributesText_13fs7_753", R = "_fieldWrapper_13fs7_757", U = "_hasSuggestion_13fs7_762", $ = "_error_13fs7_770", j = "_dateField_13fs7_782", q = "_suggestionApplied_13fs7_786", z = "_comboboxContainer_13fs7_786", i = {
-  noAttributesText: P,
-  fieldWrapper: R,
-  hasSuggestion: U,
-  error: $,
-  dateField: j,
-  suggestionApplied: q,
-  comboboxContainer: z
-}, Y = /* @__PURE__ */ I(({
-  disableForm: p,
-  portalElement: d,
-  field: e,
-  index: x,
-  taxonomyOptionsFetcher: l
-}, u) => {
-  var S;
-  const {
-    setFieldValue: g
-  } = C(), [y, n] = A(!0), [c, r] = A(!1), a = w[e.type], {
-    aiSuggestion: t,
-    type: m,
-    value: b
-  } = e, h = a && !e.hidden, F = !v(e.updateMode), s = `metadata.fields[${x}]`, W = e.type === "taxonomy" && ((S = e.optionsRules) == null ? void 0 : S.multiSelect), f = t && y, M = T({
-    [i.suggestionApplied]: c,
-    [i.hasSuggestion]: f,
-    [i.dateField]: m === "date"
-  });
-  if (!h)
-    return null;
-  const _ = () => {
-    c && r(!1);
-  };
-  return F ? /* @__PURE__ */ o(k, {
-    fieldNamePrefix: s,
-    fieldType: e.type,
-    isTaxonomyMultiSelect: W,
-    children: /* @__PURE__ */ o(a, {
-      ref: u,
-      description: e.description,
-      disableForm: p,
-      fieldNamePrefix: s,
-      label: e.displayName,
-      onValueEdited: _,
-      portalElement: d,
-      taxonomyOptionsFetcher: l
-    })
-  }, e.key) : /* @__PURE__ */ E("div", {
-    className: i.fieldWrapper,
-    children: [/* @__PURE__ */ o(a, {
-      ref: u,
-      className: M,
-      description: e.description,
-      disableForm: p,
-      fieldNamePrefix: s,
-      label: e.displayName,
-      onValueEdited: _,
-      portalElement: d,
-      taxonomyOptionsFetcher: l
-    }), f && /* @__PURE__ */ o(V, {
-      aiSuggestion: t,
-      onAiSuggestionAppend: () => {
-        const N = e.type === "multiSelect" ? [b, t].flat() : t;
-        g(`${s}.value`, N), n(!1), r(!0);
-      },
-      onAiSuggestionIgnore: () => n(!1),
-      onAiSuggestionReplace: () => {
-        g(`${s}.value`, t), n(!1), r(!0);
-      },
-      type: m
-    })]
-  }, e.key);
-});
-export {
-  Y as M,
-  i as s
-};