@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

package/dist/esm/components/DataBuilder/data-field.mjs

@@ -0,0 +1,293 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { getSchemaFromValue, isFormula, getFormula, DataBuilderFormulaType, getSchemaByLocator, makeObjectPropertyLocator, setValueAtLocator, buildData, schemaIsScalar } from '@integration-app/sdk';
+import { toHeaderCase } from 'js-convert-case';
+
+function getFieldSchemaOptions(field) {
+  if (field?.schema?.type) {
+    if (Array.isArray(field.schema.type)) {
+      return field.schema.type.map((type) => ({ type }));
+    } else {
+      return [field.schema];
+    }
+  } else if (Array.isArray(field?.schema?.anyOf)) {
+    const options = [];
+    for (const anyOfSchema of field?.schema?.anyOf ?? []) {
+      options.push(...getFieldSchemaOptions({ ...field, schema: anyOfSchema }));
+    }
+    return options;
+  } else {
+    return [
+      {
+        type: "string"
+      },
+      {
+        type: "number"
+      },
+      {
+        type: "boolean"
+      },
+      {
+        type: "object"
+      },
+      {
+        type: "array"
+      }
+    ];
+  }
+}
+const DEFAULT_FALLBACK_SCHEMA = { type: "string" };
+function getFieldSchemaFromValue(field) {
+  if (!field?.value) {
+    return void 0;
+  }
+  const options = getFieldSchemaOptions(field);
+  const schemaFromValue2 = getSchemaFromValue(field.value, field.variablesSchema);
+  const option = options.find((o) => o.type === schemaFromValue2?.type);
+  return option ?? options?.[0] ?? schemaFromValue2;
+}
+function getDefaultFieldSchemaOption(field) {
+  if (field?.value) {
+    return getFieldSchemaFromValue(field);
+  }
+  const options = getFieldSchemaOptions(field);
+  return options?.[0] ?? DEFAULT_FALLBACK_SCHEMA;
+}
+function schemaFromValue(value, variablesSchema) {
+  const schemaType = schemaTypeFromValue(value, variablesSchema);
+  return schemaType ? { type: schemaType } : {};
+}
+function schemaTypeFromValue(value, variablesSchema) {
+  if (isFormula(value)) {
+    const formula = getFormula(value);
+    if (formula.type === DataBuilderFormulaType.VAR) {
+      const schema = getSchemaByLocator(
+        variablesSchema,
+        formula.locator
+      );
+      return schema?.type ?? "string";
+    } else if (formula.type == DataBuilderFormulaType.PLAIN) {
+      return schemaTypeFromValue(formula.value);
+    } else {
+      return "string";
+    }
+  } else {
+    switch (typeof value) {
+      case "object":
+        if (Array.isArray(value)) {
+          return "array";
+        } else {
+          return "object";
+        }
+      case "boolean":
+        return "boolean";
+      case "bigint":
+      case "number":
+        return "number";
+      default:
+        return "string";
+    }
+  }
+}
+function extractFieldSubFields(field) {
+  let subfields = [];
+  const schema = getDefaultFieldSchemaOption(field);
+  if (!schema?.type) {
+    subfields = getSubfieldsFromValue(field);
+  } else if (schema?.type === "object") {
+    const subfieldsFromObjectSchema = getSubfieldsFromObjectSchema(field);
+    const subfieldsFromValue = getSubfieldsFromValue(field);
+    subfields = mergeSubfieldsFromObjectSchemaAndValues(
+      subfieldsFromObjectSchema,
+      subfieldsFromValue
+    );
+    subfields = subfields.length > 0 ? [
+      ...subfields.slice(0, -1),
+      { ...subfields.slice(-1)[0], isLastChild: true }
+    ] : subfields;
+  } else if (schema?.type === "array") {
+    if (Array.isArray(field.value)) {
+      subfields = getSubfieldsFromValue(field);
+    }
+  }
+  return subfields;
+}
+function mergeSubfieldsFromObjectSchemaAndValues(subfieldsFromObjectSchema, subfieldsFromValue) {
+  function getSubfieldKey(field) {
+    return field.key ?? "root";
+  }
+  if (subfieldsFromValue.length === 0) {
+    return subfieldsFromObjectSchema;
+  }
+  const subfieldMap = /* @__PURE__ */ new Map();
+  subfieldsFromObjectSchema.forEach((field) => {
+    subfieldMap.set(getSubfieldKey(field), field);
+  });
+  subfieldsFromValue.forEach((field) => {
+    const fieldKey = getSubfieldKey(field);
+    const primaryField = subfieldMap.get(fieldKey);
+    if (primaryField) {
+      subfieldMap.set(fieldKey, { ...primaryField, value: field.value });
+    } else {
+      subfieldMap.set(fieldKey, field);
+    }
+  });
+  return Object.values(Object.fromEntries(subfieldMap.entries()));
+}
+function makeSubField(field, overrides) {
+  const childFieldData = {
+    key: overrides?.key,
+    schema: overrides?.schema,
+    level: field.level + 1,
+    // default behavior
+    optionFactories: field.optionFactories,
+    variablesSchema: field.variablesSchema,
+    exampleVariables: field.exampleVariables,
+    iconUri: field.iconUri,
+    dynamicSchema: field.dynamicSchema,
+    dynamicSchemaVariables: field.dynamicSchemaVariables
+  };
+  if (overrides) {
+    Object.entries(overrides).forEach(([key, value]) => {
+      childFieldData[key] = value;
+    });
+  }
+  childFieldData.subFields = extractFieldSubFields(childFieldData);
+  return childFieldData;
+}
+function getSubfieldsFromObjectSchema(field) {
+  const fields = [];
+  const schema = getDefaultFieldSchemaOption(field);
+  if (schema?.properties) {
+    Object.entries(schema.properties).forEach(([key, value]) => {
+      const isRequired = schema.required && schema.required.includes(key);
+      fields.push(
+        makeSubField(field, {
+          key,
+          valueLocator: makeObjectPropertyLocator(field.valueLocator, key),
+          isRequired,
+          isDeletable: !isRequired,
+          isInSchema: !value?.isImplied,
+          hasSiblings: countObjectFieldProperties(field) > 1,
+          schema: value,
+          value: field.value ? field.value[key] : void 0,
+          level: getLevelForNestedFields(field)
+        })
+      );
+    });
+  }
+  return fields;
+}
+function fieldLabel(field) {
+  return field.schema?.title ?? toHeaderCase(field.key ?? "");
+}
+function getSubfieldsFromValue(field) {
+  const fields = [];
+  if (Array.isArray(field.value)) {
+    return field.value.map((item, idx) => {
+      const dynamicSchemaVariables = structuredClone(
+        field.dynamicSchemaVariables
+      );
+      const valueLocatorForDynamicSchema = field?.valueLocator?.replace(/\[\d+\]/g, "") ?? "";
+      setValueAtLocator(
+        dynamicSchemaVariables,
+        valueLocatorForDynamicSchema,
+        item
+      );
+      const currentEvaluatedSchema = buildData(
+        field.dynamicSchema,
+        buildData(dynamicSchemaVariables)
+      );
+      const valueLocator = `${field.valueLocator}[${idx}]`;
+      const schema = getSchemaByLocator(currentEvaluatedSchema, valueLocator);
+      return makeSubField(field, {
+        key: `item_${idx + 1}`,
+        valueLocator,
+        isInSchema: !schema?.isImplied,
+        hasSiblings: field.value.length > 0,
+        isLastChild: idx === field.value.length,
+        schema,
+        value: item,
+        isDeletable: true,
+        dynamicSchemaVariables
+      });
+    });
+  } else if (typeof field.value == "object" && field.value !== null && !isFormula(field.value)) {
+    Object.entries(field.value).forEach(([key, value]) => {
+      if (value === void 0) {
+        return;
+      }
+      if (!field.schema || !field.schema.properties || !(key in field.schema.properties)) {
+        fields.push(
+          /* FIXME: strictNullCheck temporary fix */
+          // @ts-expect-error TS(2345): Argument of type 'IDataBuilderField' is not assign... Remove this comment to see the full error message
+          makeSubField(field, {
+            key,
+            valueLocator: `${field.valueLocator}.${key}`,
+            isRequired: false,
+            hasSiblings: countObjectFieldProperties(field) > 1,
+            isInSchema: false,
+            isDeletable: true,
+            schema: void 0,
+            value,
+            level: getLevelForNestedFields(field)
+          })
+        );
+      }
+    });
+  }
+  return fields;
+}
+function isFieldVisible(field) {
+  if (field.schema?.type === "object" || field.schema?.type === "array") {
+    if ((field.isInSchema || field.level === 1) && !field.schema?.title && !field.hasSiblings && !field.key) {
+      return false;
+    }
+  }
+  return true;
+}
+function countObjectFieldProperties(field) {
+  const fieldKeys = [];
+  if (typeof field.value === "object" && field.value !== null) {
+    fieldKeys.push(...Object.keys(field.value));
+  }
+  if (field.schema && field.schema.properties) {
+    fieldKeys.push(...Object.keys(field.schema.properties ?? {}));
+  }
+  return new Set(fieldKeys).size;
+}
+function getLevelForNestedFields(field) {
+  return isFieldVisible(field) ? field.level + 1 : field.level;
+}
+function isObjectAllowedAdditionalProperties(field) {
+  if (field.schema?.type !== "object") {
+    return true;
+  }
+  if (Object.keys(field.schema.properties ?? {}).length === 0) {
+    return true;
+  }
+  return !!field.schema?.additionalProperties;
+}
+function getFieldValueProps(field) {
+  const isEmpty = field.value === null || field.value === void 0;
+  const isRequired = field.isRequired;
+  return {
+    isEmpty,
+    isRequired
+  };
+}
+function schemaIsScalarArray(schema) {
+  return schema?.type === "array" && schema.items && schemaIsScalar(schema.items);
+}
+function isRootField(field) {
+  return field.level === 1 && !isFieldVisible(field);
+}
+const DEFAULT_FIELD_KEY = "";
+
+export { DEFAULT_FIELD_KEY, extractFieldSubFields, fieldLabel, getDefaultFieldSchemaOption, getFieldSchemaFromValue, getFieldSchemaOptions, getFieldValueProps, getLevelForNestedFields, isFieldVisible, isObjectAllowedAdditionalProperties, isRootField, makeSubField, schemaFromValue, schemaIsScalarArray };

package/dist/esm/components/DataBuilder/field-context.mjs

@@ -0,0 +1,82 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+import { getFieldSchemaFromValue, getFieldSchemaOptions } from './data-field.mjs';
+
+function useDataBuilderField() {
+  return useContext(DataBuilderFieldContext);
+}
+const DataBuilderFieldContext = createContext(
+  {
+    field: { level: 0, optionFactories: [] },
+    localSchema: {},
+    setLocalSchema: () => {
+    },
+    resetLocalSchema: () => {
+    },
+    localSchemaChangedManually: false,
+    setLocalSchemaChangedManually: () => {
+    },
+    autoOpen: false,
+    setAutoOpen: () => {
+    }
+  }
+);
+DataBuilderFieldContext.displayName = "DataBuilderFieldContext";
+const DataBuilderFieldProvider = ({ field, children }) => {
+  const [localSchema, setLocalSchema] = useState(
+    getDefaultLocalSchema(field)
+  );
+  function resetLocalSchema() {
+    setLocalSchema(getDefaultLocalSchema(field));
+  }
+  const [localSchemaChangedManually, setLocalSchemaChangedManually] = useState(false);
+  const [autoOpen, setAutoOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    DataBuilderFieldContext.Provider,
+    {
+      value: {
+        field,
+        localSchema,
+        setLocalSchema,
+        resetLocalSchema,
+        localSchemaChangedManually,
+        setLocalSchemaChangedManually,
+        autoOpen,
+        setAutoOpen
+      },
+      children
+    }
+  );
+};
+function getDefaultLocalSchema(field) {
+  const fieldSchemaFromValue = getFieldSchemaFromValue(field);
+  const fieldSchemaOptions = getFieldSchemaOptions(field);
+  if (field?.schema) {
+    if (!field?.schema?.type) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: fieldSchemaOptions[0].type
+      };
+    }
+    if (Array.isArray(field.schema.type)) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: field.schema.type[0]
+      };
+    }
+    return field.schema;
+  }
+  return fieldSchemaFromValue || {
+    type: fieldSchemaOptions[0].type
+  };
+}
+
+export { DataBuilderFieldProvider, useDataBuilderField as default };

package/dist/esm/components/DataBuilder/hooks.mjs

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { getValueSpecFromSchema, doesSchemaMatchValueType } from '../ComboBox/value-spec.mjs';
+import useDataBuilderField from './field-context.mjs';
+
+function useDataBuilderFieldCanUseVarFromVariables() {
+  const { field, localSchema } = useDataBuilderField();
+  const localSchemaIsArrayOrObject = ["array", "object"].includes(
+    localSchema?.type || ""
+  );
+  if (!localSchemaIsArrayOrObject) {
+    return false;
+  }
+  const valueSpec = getValueSpecFromSchema(localSchema);
+  const hasMatchedVariables = Object.values(
+    field?.variablesSchema?.properties ?? {}
+  ).some((schema) => doesSchemaMatchValueType(schema, valueSpec, true));
+  const hasOptionFactories = (field?.optionFactories ?? []).length > 0;
+  return hasMatchedVariables || hasOptionFactories;
+}
+
+export { useDataBuilderFieldCanUseVarFromVariables };

package/dist/esm/components/DataBuilder/index.mjs

@@ -0,0 +1,70 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { buildData } from '@integration-app/sdk';
+import { extractFieldSubFields, isObjectAllowedAdditionalProperties } from './data-field.mjs';
+import 'react/jsx-runtime';
+import '../../ui-kit/styled/text.mjs';
+import '../Tooltip/index.mjs';
+
+function makeDataField({
+  key = void 0,
+  schema: inputSchema,
+  value,
+  optionFactories,
+  variablesSchema,
+  exampleVariables,
+  iconUri,
+  valueLocator,
+  level = 1
+}) {
+  const schema = addAdditionalPropertiesPropertyToNestedObjects(
+    buildData(inputSchema, buildData(value))
+  );
+  const field = {
+    key,
+    valueLocator: valueLocator ?? schema?.locator ?? "$",
+    schema,
+    level,
+    isInSchema: !schema?.isImplied,
+    hasSiblings: false,
+    variablesSchema,
+    exampleVariables,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'ComboBoxOptionsFactoryInterface[] | undefined' is no... Remove this comment to see the full error message
+    optionFactories,
+    value,
+    iconUri,
+    dynamicSchema: inputSchema,
+    dynamicSchemaVariables: value
+  };
+  field.subFields = extractFieldSubFields(field);
+  return field;
+}
+function addAdditionalPropertiesPropertyToNestedObjects(schema) {
+  if (schema?.type !== "object") {
+    return schema;
+  }
+  const isAdditionalPropertiesAllowed = schema?.additionalProperties ?? isObjectAllowedAdditionalProperties({
+    schema
+  });
+  const additionalPropertiesObject = isAdditionalPropertiesAllowed ? { additionalProperties: true } : {};
+  return {
+    ...schema,
+    ...additionalPropertiesObject,
+    // Iterate over all properties and calculate `additionalProperties` flag for them
+    properties: Object.fromEntries(
+      Object.entries(schema?.properties ?? {}).map(([k, v]) => [
+        k,
+        addAdditionalPropertiesPropertyToNestedObjects(v)
+      ])
+    )
+  };
+}
+
+export { makeDataField };

package/dist/esm/components/DataBuilder/styles.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".styles-module_tagGeneric__8PwLz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  border-radius: 0.25rem;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.7;\n  cursor: pointer;\n}\n.styles-module_tagGeneric__8PwLz + .styles-module_tagGeneric__8PwLz {\n  margin-left: 0.5rem;\n}\n.styles-module_tagIcon__1UWRr {\n  color: #b8c6dc;\n  margin-right: 0.25rem;\n  height: 1rem;\n  width: 1rem;\n}\n.styles-module_scalarArrayField__wJ59Y {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  min-height: 2.5rem;\n}\n.styles-module_scalarArrayField__wJ59Y::after {\n  margin: 0.25rem;\n  display: inline-flex;\n  height: 2rem;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  font-size: 1.188rem;\n  line-height: 1.2;\n  --tw-text-opacity: 1;\n  color: rgb(238 238 238 / var(--tw-text-opacity));\n}\n.styles-module_scalarArrayField__wJ59Y:hover::after {\n  --tw-text-opacity: 1;\n  color: rgb(221 221 221 / var(--tw-text-opacity));\n}\n.styles-module_scalarArrayField__wJ59Y:not(:empty)::after {\n  content: '+';\n}\n.styles-module_fieldset__Ob8aH {\n  margin-top: 1rem;\n}\n.styles-module_fieldset__Ob8aH h3 {\n  font-size: 0.875rem;\n  line-height: 1.4;\n  font-weight: 700;\n}\n.styles-module_fieldset__Ob8aH label {\n  margin-bottom: 0.25rem;\n  display: block;\n  cursor: pointer;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.styles-module_backButton__if8y- {\n  margin-bottom: -0.5rem;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n\n  border-radius: 3px 3px 0 0 !important;\n  border-bottom: none;\n}\n.styles-module_saveButton__quwic {\n  margin-top: 1rem;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.styles-module_drilldownContent__ybSnu {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.styles-module_drilldownContent__ybSnu .styles-module_recordName__1WPiq {\n  border-top-left-radius: 0;\n}\n.styles-module_drilldownContent__ybSnu > .styles-module_nestedLevel__rigjy > .styles-module_record__atsLj {\n  padding-top: 0px;\n}\n.styles-module_drilldownContent__ybSnu .styles-module_nestedLevel__rigjy .styles-module_nestedLevel__rigjy > .styles-module_record__atsLj::before {\n  background-image: none;\n}\n";
+var classes = {"tagGeneric":"styles-module_tagGeneric__8PwLz","tagIcon":"styles-module_tagIcon__1UWRr","scalarArrayField":"styles-module_scalarArrayField__wJ59Y","fieldset":"styles-module_fieldset__Ob8aH","backButton":"styles-module_backButton__if8y-","saveButton":"styles-module_saveButton__quwic","drilldownContent":"styles-module_drilldownContent__ybSnu","recordName":"styles-module_recordName__1WPiq","nestedLevel":"styles-module_nestedLevel__rigjy","record":"styles-module_record__atsLj"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/DataBuilderUI/FieldControlPanel/FieldControlPanel.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".FieldControlPanel-module_panel__UV0oU {\n    max-width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    -moz-column-gap: 0.5rem;\n         column-gap: 0.5rem;\n    row-gap: 0.25rem;\n}\n.FieldControlPanel-module_panel__noWrap__1jpGD {\n    flex-wrap: nowrap;\n}\n.FieldControlPanel-module_panel_text__rGw-h {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n.FieldControlPanel-module_button__RcITE {\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.625rem;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 200ms;\n    border-radius: 0.25rem;\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n    margin: 0px;\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n    padding-left: 0.875rem;\n    padding-right: 0.875rem;\n}\n.FieldControlPanel-module_button__RcITE:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n}\n.FieldControlPanel-module_button__RcITE svg {\n    height: 0.75rem;\n    width: 0.75rem;\n    flex-shrink: 0;\n    flex-grow: 0;\n    stroke-width: 2px;\n}\n:is(.FieldControlPanel-module_button__RcITE svg):first-child {\n    margin-left: -0.25rem;\n}\n:is(.FieldControlPanel-module_button__RcITE svg):last-child {\n    margin-right: -0.25rem;\n}\n.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE {\n    gap: 0.5rem;\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity));\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\n    padding-left: 0.625rem;\n    padding-right: 0.625rem;\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE) svg {\n    stroke-width: 1;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(39 39 39 / var(--tw-text-opacity));\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE):hover svg {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.FieldControlPanel-module_buttonGroup__1G4iu {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    overflow: hidden;\n    max-width: 100%;\n}\n.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE {\n    border-radius: 0;\n}\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):not(:first-child) {\n    margin-left: -1px;\n  }\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):first-child {\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):last-child {\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n";
+var classes = {"panel":"FieldControlPanel-module_panel__UV0oU","panel__noWrap":"FieldControlPanel-module_panel__noWrap__1jpGD","panel_text":"FieldControlPanel-module_panel_text__rGw-h","button":"FieldControlPanel-module_button__RcITE","panel__compact":"FieldControlPanel-module_panel__compact__GZTgY","buttonGroup":"FieldControlPanel-module_buttonGroup__1G4iu"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/DataBuilderUI/FieldControlPanel/index.mjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import classes from './FieldControlPanel.module.css.mjs';
+
+function FieldControlPanelRoot({
+  children,
+  compact,
+  noWrap
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        classes.panel,
+        compact && classes.panel__compact,
+        noWrap && classes.panel__noWrap
+      ),
+      children
+    }
+  );
+}
+function FieldControlPanelText({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: classes.panel_text, children });
+}
+function FieldControlButtonGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: classes.buttonGroup, children });
+}
+const FieldControlButtonElement = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("button", { ref, className: clsx(classes.button, className), ...props, children });
+});
+const FieldControlPanel = Object.assign(FieldControlPanelRoot, {
+  Text: FieldControlPanelText,
+  ButtonGroup: FieldControlButtonGroup,
+  Button: FieldControlButtonElement
+});
+
+export { FieldControlPanel };