@membranehq/react 0.1.0

package/dist/cjs/hooks/usePromise.cjs

@@ -0,0 +1,78 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+
+function resolvePromise(promise) {
+  if (typeof promise === "function") {
+    return promise();
+  }
+  return promise;
+}
+const states = {
+  pending: "pending",
+  rejected: "rejected",
+  resolved: "resolved"
+};
+const defaultState = {
+  error: void 0,
+  result: void 0,
+  state: states.pending
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case states.pending:
+      return defaultState;
+    case states.resolved:
+      return {
+        error: void 0,
+        result: action.payload,
+        state: states.resolved
+      };
+    case states.rejected:
+      return {
+        error: action.payload,
+        result: void 0,
+        state: states.rejected
+      };
+    default:
+      return state;
+  }
+}
+function usePromise(promise, inputs) {
+  const [{ error, result, state }, dispatch] = React.useReducer(reducer, defaultState);
+  React.useEffect(
+    () => {
+      const resolvedPromise = resolvePromise(promise);
+      if (!resolvedPromise) {
+        return;
+      }
+      let canceled = false;
+      dispatch({ type: states.pending });
+      resolvedPromise.then(
+        (result2) => !canceled && dispatch({
+          payload: result2,
+          type: states.resolved
+        }),
+        (error2) => !canceled && dispatch({
+          payload: error2,
+          type: states.rejected
+        })
+      );
+      return () => {
+        canceled = true;
+      };
+    },
+    inputs ?? [promise]
+  );
+  return [result, error, state];
+}
+
+exports.usePromise = usePromise;

package/dist/cjs/index.cjs

@@ -0,0 +1,287 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var integrationAppContext = require('./contexts/integration-app-context.cjs');
+var useIntegrationAppSWR = require('./hooks/useIntegrationAppSWR.cjs');
+var useExportFieldsAsCode = require('./hooks/useExportFieldsAsCode.cjs');
+var useConnection = require('./hooks/integrations/useConnection.cjs');
+var useConnections = require('./hooks/integrations/useConnections.cjs');
+var useConnectorSpec = require('./hooks/integrations/useConnectorSpec.cjs');
+var useIntegration = require('./hooks/integrations/useIntegration.cjs');
+var useIntegrations = require('./hooks/integrations/useIntegrations.cjs');
+var useFieldMapping = require('./hooks/field-mappings/useFieldMapping.cjs');
+var useFieldMappingInstance = require('./hooks/field-mappings/useFieldMappingInstance.cjs');
+var useFieldMappingInstances = require('./hooks/field-mappings/useFieldMappingInstances.cjs');
+var useFieldMappings = require('./hooks/field-mappings/useFieldMappings.cjs');
+var useDataSource = require('./hooks/data-sources/useDataSource.cjs');
+var useDataSourceInstance = require('./hooks/data-sources/useDataSourceInstance.cjs');
+var useDataSourceInstanceCollection = require('./hooks/data-sources/useDataSourceInstanceCollection.cjs');
+var useDataSourceInstances = require('./hooks/data-sources/useDataSourceInstances.cjs');
+var useDataSources = require('./hooks/data-sources/useDataSources.cjs');
+var useAppEventSubscription = require('./hooks/app-events/useAppEventSubscription.cjs');
+var useAppEventSubscriptions = require('./hooks/app-events/useAppEventSubscriptions.cjs');
+var useAppEventType = require('./hooks/app-events/useAppEventType.cjs');
+var useAppEventTypes = require('./hooks/app-events/useAppEventTypes.cjs');
+var useAppEvents = require('./hooks/app-events/useAppEvents.cjs');
+var useAppDataSchema = require('./hooks/app-data-schemas/useAppDataSchema.cjs');
+var useAppDataSchemas = require('./hooks/app-data-schemas/useAppDataSchemas.cjs');
+var useAppDataSchemaInstance = require('./hooks/app-data-schemas/useAppDataSchemaInstance.cjs');
+var useAppDataSchemaInstances = require('./hooks/app-data-schemas/useAppDataSchemaInstances.cjs');
+var useFlow = require('./hooks/flows/useFlow.cjs');
+var useFlows = require('./hooks/flows/useFlows.cjs');
+var useFlowInstance = require('./hooks/flows/useFlowInstance.cjs');
+var useFlowInstances = require('./hooks/flows/useFlowInstances.cjs');
+var useFlowRun = require('./hooks/flows/useFlowRun.cjs');
+var useFlowRuns = require('./hooks/flows/useFlowRuns.cjs');
+var useDataLinkTable = require('./hooks/data-links/useDataLinkTable.cjs');
+var useDataLinkTableInstance = require('./hooks/data-links/useDataLinkTableInstance.cjs');
+var useDataLinkTableInstances = require('./hooks/data-links/useDataLinkTableInstances.cjs');
+var useDataLinkTables = require('./hooks/data-links/useDataLinkTables.cjs');
+var useAction = require('./hooks/actions/useAction.cjs');
+var useActionInstance = require('./hooks/actions/useActionInstance.cjs');
+var useActionInstances = require('./hooks/actions/useActionInstances.cjs');
+var useActions = require('./hooks/actions/useActions.cjs');
+var useScreen = require('./hooks/screens/useScreen.cjs');
+var useCustomer = require('./hooks/customers/useCustomer.cjs');
+var useCustomers = require('./hooks/customers/useCustomers.cjs');
+var useScenario = require('./hooks/scenarios/useScenario.cjs');
+var useScenarios = require('./hooks/scenarios/useScenarios.cjs');
+var useDataCollectionSpec = require('./hooks/data-collections/useDataCollectionSpec.cjs');
+var useExternalEventSubscriptions = require('./hooks/external-events/useExternalEventSubscriptions.cjs');
+var useExternalEventSubscription = require('./hooks/external-events/useExternalEventSubscription.cjs');
+var index$1 = require('./components/Integrations/IntegrationAvatar/index.cjs');
+var index$2 = require('./components/Integrations/IntegrationItem/index.cjs');
+var IntegrationItemSkeleton = require('./components/Integrations/IntegrationItemSkeleton.cjs');
+var index$3 = require('./components/DataBuilder/index.cjs');
+var Form = require('./components/DataBuilder/Form.cjs');
+var FieldDelete = require('./components/DataBuilder/FieldDelete.cjs');
+var FilterInput = require('./components/DataBuilder/FilterInput.cjs');
+var dataField = require('./components/DataBuilder/data-field.cjs');
+var FieldList = require('./components/DataBuilder/FieldList.cjs');
+var index$4 = require('./components/DataBuilderUI/FieldControlPanel/index.cjs');
+var ActionBar = require('./components/DataBuilderUI/ActionBar.cjs');
+var Cell = require('./components/DataBuilderUI/Cell.cjs');
+var NestedLevel = require('./components/DataBuilderUI/NestedLevel.cjs');
+var Row = require('./components/DataBuilderUI/Row.cjs');
+var Title = require('./components/DataBuilderUI/Title.cjs');
+var dataLinkTablesOptionFactory = require('./components/DataLinks/data-link-tables-option-factory.cjs');
+var Button = require('./components/Button/Button.cjs');
+var shared = require('./components/ComboBox/shared.cjs');
+var valueSpec = require('./components/ComboBox/value-spec.cjs');
+var utils = require('./components/ComboBox/options-factories/utils.cjs');
+var constants = require('./components/ComboBox/options-factories/custom-field/constants.cjs');
+var boolean = require('./components/ComboBox/options-factories/boolean.cjs');
+var constant = require('./components/ComboBox/options-factories/constant.cjs');
+var index$5 = require('./components/ComboBox/options-factories/custom-field/index.cjs');
+var _enum = require('./components/ComboBox/options-factories/enum.cjs');
+var index$6 = require('./components/ComboBox/options-factories/formula/index.cjs');
+var objectFields = require('./components/ComboBox/options-factories/object-fields.cjs');
+var referenceRecords = require('./components/ComboBox/options-factories/reference-records.cjs');
+var root = require('./components/ComboBox/options-factories/root.cjs');
+var variable = require('./components/ComboBox/options-factories/variable.cjs');
+var comboboxContext = require('./components/ComboBox/context/combobox-context.cjs');
+var comboboxDropdownContext = require('./components/ComboBox/context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('./components/ComboBox/context/combobox-dropdown-search.cjs');
+var comboboxDropdownStack = require('./components/ComboBox/context/combobox-dropdown-stack.cjs');
+var helpers = require('./components/ComboBox/context/helpers.cjs');
+var ComboBox = require('./components/ComboBox/ComboBox.cjs');
+var ComboBoxTag = require('./components/ComboBoxElements/ComboBoxTag.cjs');
+var index = require('./components/FloatingPortalBoundary/index.cjs');
+var index$7 = require('./components/DropdownUI/index.cjs');
+var integrationElementContext = require('./components/IntegrationElements/integration-element-context.cjs');
+var index$8 = require('./components/IntegrationElements/DataSource/index.cjs');
+var UdmSelect = require('./components/IntegrationElements/DataSource/UdmSelect.cjs');
+var DataCollectionSelect = require('./components/IntegrationElements/DataSource/DataCollectionSelect.cjs');
+var SimpleInput = require('./components/SimpleInput/SimpleInput.cjs');
+var SimpleTextarea = require('./components/SimpleInput/SimpleTextarea.cjs');
+var index$9 = require('./components/Notification/index.cjs');
+var index$a = require('./components/Portal/index.cjs');
+var index$b = require('./components/Radio/index.cjs');
+var index$c = require('./components/SvgIcon/index.cjs');
+var svgIconType = require('./components/SvgIcon/svg-icon-type.cjs');
+var Tag = require('./components/Tag/Tag.cjs');
+var TagPlaceholder = require('./components/Tag/TagPlaceholder.cjs');
+var index$d = require('./components/Toggle/index.cjs');
+var index$e = require('./components/Tooltip/index.cjs');
+var AdvancedOptions = require('./components/AdvancedOptions.cjs');
+var FieldNameInput = require('./components/DataBuilder/FieldName/FieldNameInput.cjs');
+var index$f = require('./components/Popover/index.cjs');
+var index$g = require('./components/Truncate/index.cjs');
+var integrationAppClientContext = require('./contexts/integration-app-client-context.cjs');
+var integrationAppConnectionContext = require('./contexts/integration-app-connection-context.cjs');
+var integrationAppIntegrationContext = require('./contexts/integration-app-integration-context.cjs');
+var index$h = require('./components/DataInput/index.cjs');
+var FieldDescription = require('./components/DataBuilder/FieldDescription.cjs');
+
+
+
+exports.IntegrationAppProvider = integrationAppContext.IntegrationAppProvider;
+exports.useIntegrationApp = integrationAppContext.useIntegrationApp;
+exports.useIntegrationAppSWR = useIntegrationAppSWR.useIntegrationAppSWR;
+exports.useExportFieldsAsCode = useExportFieldsAsCode.useExportFieldsAsCode;
+exports.useConnection = useConnection.useConnection;
+exports.useConnections = useConnections.useConnections;
+exports.useConnectorSpec = useConnectorSpec.useConnectorSpec;
+exports.useIntegration = useIntegration.useIntegration;
+exports.useIntegrations = useIntegrations.useIntegrations;
+exports.useFieldMapping = useFieldMapping.useFieldMapping;
+exports.useFieldMappingInstance = useFieldMappingInstance.useFieldMappingInstance;
+exports.useFieldMappingInstances = useFieldMappingInstances.useFieldMappingInstances;
+exports.useFieldMappings = useFieldMappings.useFieldMappings;
+exports.useDataSource = useDataSource.useDataSource;
+exports.useDataSourceInstance = useDataSourceInstance.useDataSourceInstance;
+exports.useDataSourceInstanceCollection = useDataSourceInstanceCollection.useDataSourceInstanceCollection;
+exports.useDataSourceInstances = useDataSourceInstances.useDataSourceInstances;
+exports.useDataSources = useDataSources.useDataSources;
+exports.useAppEventSubscription = useAppEventSubscription.useAppEventSubscription;
+exports.useAppEventSubscriptions = useAppEventSubscriptions.useAppEventSubscriptions;
+exports.useAppEventType = useAppEventType.useAppEventType;
+exports.useAppEventTypes = useAppEventTypes.useAppEventTypes;
+exports.useAppEvents = useAppEvents.useAppEvents;
+exports.useAppDataSchema = useAppDataSchema.useAppDataSchema;
+exports.useAppDataSchemas = useAppDataSchemas.useAppDataSchemas;
+exports.useAppDataSchemaInstance = useAppDataSchemaInstance.useAppDataSchemaInstance;
+exports.useAppDataSchemaInstances = useAppDataSchemaInstances.useAppDataSchemaInstances;
+exports.useFlow = useFlow.useFlow;
+exports.useFlows = useFlows.useFlows;
+exports.useFlowInstance = useFlowInstance.useFlowInstance;
+exports.useFlowInstances = useFlowInstances.useFlowInstances;
+exports.useFlowRun = useFlowRun.useFlowRun;
+exports.useFlowRuns = useFlowRuns.useFlowRuns;
+exports.useDataLinkTable = useDataLinkTable.useDataLinkTable;
+exports.useDataLinkTableInstance = useDataLinkTableInstance.useDataLinkTableInstance;
+exports.useDataLinkTableInstances = useDataLinkTableInstances.useDataLinkTableInstances;
+exports.useDataLinkTables = useDataLinkTables.useDataLinkTables;
+exports.useAction = useAction.useAction;
+exports.useActionInstance = useActionInstance.useActionInstance;
+exports.useActionInstances = useActionInstances.useActionInstances;
+exports.useActions = useActions.useActions;
+exports.useScreen = useScreen.useScreen;
+exports.useCustomer = useCustomer.useCustomer;
+exports.useCustomers = useCustomers.useCustomers;
+exports.useScenario = useScenario.useScenario;
+exports.useScenarios = useScenarios.useScenarios;
+exports.useDataCollectionSpec = useDataCollectionSpec.useDataCollectionSpec;
+exports.useExternalEventSubscriptions = useExternalEventSubscriptions.useExternalEventSubscriptions;
+exports.useExternalEventSubscription = useExternalEventSubscription.useExternalEventSubscription;
+exports.IntegrationAvatar = index$1.IntegrationAvatar;
+exports.IntegrationItem = index$2.IntegrationItem;
+exports.IntegrationItemSkeleton = IntegrationItemSkeleton.IntegrationItemSkeleton;
+exports.makeDataField = index$3.makeDataField;
+exports.DataBuilderForm = Form.DataBuilderForm;
+exports.FieldDelete = FieldDelete.FieldDelete;
+exports.FilterInput = FilterInput.FilterInput;
+exports.DEFAULT_FIELD_KEY = dataField.DEFAULT_FIELD_KEY;
+exports.extractFieldSubFields = dataField.extractFieldSubFields;
+exports.fieldLabel = dataField.fieldLabel;
+exports.getDefaultFieldSchemaOption = dataField.getDefaultFieldSchemaOption;
+exports.getFieldSchemaFromValue = dataField.getFieldSchemaFromValue;
+exports.getFieldSchemaOptions = dataField.getFieldSchemaOptions;
+exports.getFieldValueProps = dataField.getFieldValueProps;
+exports.getLevelForNestedFields = dataField.getLevelForNestedFields;
+exports.isFieldVisible = dataField.isFieldVisible;
+exports.isObjectAllowedAdditionalProperties = dataField.isObjectAllowedAdditionalProperties;
+exports.isRootField = dataField.isRootField;
+exports.makeSubField = dataField.makeSubField;
+exports.schemaFromValue = dataField.schemaFromValue;
+exports.schemaIsScalarArray = dataField.schemaIsScalarArray;
+exports.FieldList = FieldList.FieldList;
+exports.FieldControlPanel = index$4.FieldControlPanel;
+exports.fieldControlPanelRecipe = index$4.fieldControlPanelRecipe;
+exports.ActionBar = ActionBar.ActionBar;
+exports.dataBuilderActionBarRecipe = ActionBar.dataBuilderActionBarRecipe;
+exports.Cell = Cell.Cell;
+exports.CellButton = Cell.CellButton;
+exports.dataBuilderCellButtonRecipe = Cell.dataBuilderCellButtonRecipe;
+exports.dataBuilderCellRecipe = Cell.dataBuilderCellRecipe;
+exports.NestedLevel = NestedLevel.NestedLevel;
+exports.Row = Row.Row;
+exports.dataBuilderRowRecipe = Row.dataBuilderRowRecipe;
+exports.Dot = Title.Dot;
+exports.Title = Title.Title;
+exports.dataBuilderTitleRecipe = Title.dataBuilderTitleRecipe;
+exports.dotRecipe = Title.dotRecipe;
+exports.DataLinkTablesOptionsFactory = dataLinkTablesOptionFactory.DataLinkTablesOptionsFactory;
+exports.Button = Button.Button;
+exports.IconButton = Button.IconButton;
+exports.DropdownCategoryType = shared.DropdownCategoryType;
+exports.dropdownCategoryConfig = shared.dropdownCategoryConfig;
+exports.ValueType = valueSpec.ValueType;
+exports.doesSchemaMatchValueType = valueSpec.doesSchemaMatchValueType;
+exports.getValueSpecFromSchema = valueSpec.getValueSpecFromSchema;
+exports.filterOptionsByLabel = utils.filterOptionsByLabel;
+exports.CUSTOM_ARRAY_VALUE = constants.CUSTOM_ARRAY_VALUE;
+exports.CUSTOM_ARRAY_VALUE_LABEL = constants.CUSTOM_ARRAY_VALUE_LABEL;
+exports.CUSTOM_OBJECT_VALUE = constants.CUSTOM_OBJECT_VALUE;
+exports.CUSTOM_OBJECT_VALUE_LABEL = constants.CUSTOM_OBJECT_VALUE_LABEL;
+exports.isCustomFieldValue = constants.isCustomFieldValue;
+exports.BooleanOptionsFactory = boolean.BooleanOptionsFactory;
+exports.ConstantOptionFactory = constant.ConstantOptionFactory;
+exports.CustomFieldOptionsFactory = index$5.CustomFieldOptionsFactory;
+exports.EnumOptionFactory = _enum.EnumOptionFactory;
+exports.FormulaListOptionsFactory = index$6.FormulaListOptionsFactory;
+exports.ObjectFieldsOptionFactory = objectFields.ObjectFieldsOptionFactory;
+exports.ReferenceRecordsOptionsFactory = referenceRecords.ReferenceRecordsOptionsFactory;
+exports.RootOptionFactory = root.RootOptionFactory;
+exports.VariableOptionFactory = variable.VariableOptionFactory;
+exports.ComboBoxProvider = comboboxContext.ComboBoxProvider;
+exports.useComboBox = comboboxContext.useComboBox;
+exports.ComboBoxDropdownContextProvider = comboboxDropdownContext.ComboBoxDropdownContextProvider;
+exports.useComboBoxDropdownContext = comboboxDropdownContext.useComboBoxDropdownContext;
+exports.ComboBoxDropdownSearchProvider = comboboxDropdownSearch.ComboBoxDropdownSearchProvider;
+exports.useComboBoxDropdownSearchContext = comboboxDropdownSearch.useComboBoxDropdownSearchContext;
+exports.DropdownStackContextProvider = comboboxDropdownStack.DropdownStackContextProvider;
+exports.useDropdownStackContext = comboboxDropdownStack.useDropdownStackContext;
+exports.canUserEnterValueFromKeyboard = helpers.canUserEnterValueFromKeyboard;
+exports.getAvailableRootCategories = helpers.getAvailableRootCategories;
+exports.getCurrentPath = helpers.getCurrentPath;
+exports.getStackForPath = helpers.getStackForPath;
+exports.ComboBox = ComboBox.ComboBox;
+exports.ComboBoxTag = ComboBoxTag.ComboBoxTag;
+exports.BoundedPortal = index.BoundedPortal;
+exports.FloatingPortalBoundary = index.FloatingPortalBoundary;
+exports.DropdownUI = index$7.DropdownUI;
+exports.IntegrationElementProvider = integrationElementContext.IntegrationElementProvider;
+exports.useIntegrationElementContext = integrationElementContext.useIntegrationElementContext;
+exports.DataSourceConfig = index$8.DataSourceConfig;
+exports.DataSourceConfigureEvents = index$8.DataSourceConfigureEvents;
+exports.UdmSelect = UdmSelect.UdmSelect;
+exports.DataCollectionSelect = DataCollectionSelect.DataCollectionSelect;
+exports.SimpleInput = SimpleInput.SimpleInput;
+exports.SimpleTextarea = SimpleTextarea.SimpleTextarea;
+exports.Notification = index$9.Notification;
+exports.Portal = index$a.Portal;
+exports.Radiobutton = index$b.Radiobutton;
+exports.SvgIcon = index$c.SvgIcon;
+exports.SvgIconType = svgIconType.SvgIconType;
+exports.GenericTag = Tag.GenericTag;
+exports.Tag = Tag.Tag;
+exports.TagPlaceholder = TagPlaceholder.TagPlaceholder;
+exports.Toggle = index$d.Toggle;
+exports.Tooltip = index$e.Tooltip;
+exports.AdvancedOptions = AdvancedOptions.AdvancedOptions;
+exports.FieldNameInput = FieldNameInput.FieldNameInput;
+exports.DefaultPopper = index$f.DefaultPopper;
+exports.Truncate = index$g.Truncate;
+exports.IntegrationAppClientProvider = integrationAppClientContext.IntegrationAppClientProvider;
+exports.useIntegrationAppClient = integrationAppClientContext.useIntegrationAppClient;
+exports.IntegrationAppConnectionProvider = integrationAppConnectionContext.IntegrationAppConnectionProvider;
+exports.useIntegrationAppConnection = integrationAppConnectionContext.useIntegrationAppConnection;
+exports.IntegrationAppIntegrationProvider = integrationAppIntegrationContext.IntegrationAppIntegrationProvider;
+exports.useIntegrationAppIntegration = integrationAppIntegrationContext.useIntegrationAppIntegration;
+exports.DataInput = index$h.DataInput;
+exports.FieldDescription = FieldDescription.FieldDescription;
+Object.keys(sdk).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sdk[k]; }
+	});
+});

package/dist/cjs/recipes/dropdown.cjs

@@ -0,0 +1,234 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+require('../styled-system/css/css.cjs');
+require('../styled-system/helpers.cjs');
+var sva = require('../styled-system/css/sva.cjs');
+
+const SCOPE = "dropdown";
+const SLOTS = [
+  ["popover-container", "Main container of a dropdown. Emits keyboard navigation events"],
+  ["content", "Dropdown content container"],
+  ["panel", "Section panel. Can be multiple. Can be nested"],
+  ["search-input", "Search input element"],
+  ["search-divider", "Divider between search input and rest of elements"],
+  ["list", "Items list container"],
+  ["items-list-header", "Items list header"],
+  ["item", "Single list item container"],
+  ["item-title", "List item title"],
+  ["item-hint", "List item hint"],
+  ["no-options-heading", "Heading title for empty search result"],
+  ["no-options-heading-icon", "No options heading icon"],
+  ["error-heading", "Heading for error when options failed to load"],
+  ["error-heading-icon", "Error heading icon"],
+  ["info-heading", "Heading for unsupported states within the dropdown"],
+  ["info-heading-icon", "Info heading icon"],
+  ["loading-item-container", "List item skeleton container"],
+  ["loading-item-icon", "List item icon skeleton"],
+  ["loading-item-title", "Loading item title skeleton"]
+];
+const extractedSlotNames = SLOTS.map(([slot]) => slot);
+const svaConfig = {
+  className: SCOPE,
+  slots: extractedSlotNames,
+  base: {
+    "popover-container": {
+      outlineWidth: "0",
+      _focusVisible: {
+        outlineWidth: "thin",
+        outlineColor: "blue.10"
+      },
+      display: "flex",
+      overflow: "hidden",
+      background: "white",
+      boxShadow: "xl",
+      rounded: "lg",
+      borderColor: "gray.2",
+      borderWidth: "0.5",
+      padding: "0",
+      maxW: "none",
+      maxH: "var(--available-height)",
+      h: "full",
+      w: "fit-content"
+    },
+    content: {
+      display: "flex",
+      flexDir: "column",
+      p: "1.5",
+      w: "full",
+      minW: "56",
+      maxW: "min(65em, 90vw)",
+      maxH: "inherit"
+    },
+    panel: {
+      display: "flex",
+      flexDir: "column",
+      overflow: "hidden",
+      pb: "1.5",
+      minH: "8",
+      _last: {
+        pb: "0"
+      }
+    },
+    "search-input": {
+      w: "full",
+      flex: "1",
+      rounded: "none",
+      border: "none",
+      px: "2",
+      py: "1.5",
+      textStyle: "md",
+      fontWeight: "medium",
+      _placeholderShown: {
+        truncate: true
+      }
+    },
+    "search-divider": {
+      pt: "0.5",
+      pb: "1.5"
+    },
+    list: {
+      overflowY: "auto",
+      position: "relative",
+      flexGrow: "1",
+      minH: "8",
+      // TODO: make a variant to cover when nothing besides lists is shown
+      maxW: "md"
+    },
+    item: {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1",
+      cursor: "pointer",
+      minH: "6",
+      _hover: {
+        bg: "slate.3"
+      },
+      _current: {
+        bg: "slate.3"
+      },
+      rounded: "md"
+    },
+    "no-options-heading": {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1",
+      minH: "6",
+      maxW: "md",
+      color: "slate.11",
+      borderColor: "slate.3",
+      borderWidth: "thin",
+      fontWeight: "medium",
+      textStyle: "sm",
+      rounded: "lg",
+      bg: "slate.2"
+    },
+    "no-options-heading-icon": {
+      color: "slate.12",
+      h: "4",
+      w: "4"
+    },
+    "error-heading": {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1",
+      minH: "6",
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    "error-heading-icon": {
+      color: "tomato.10",
+      h: "7",
+      w: "7"
+    },
+    "info-heading": {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1",
+      minH: "6",
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    "info-heading-icon": {
+      color: "fg.default",
+      h: "7",
+      w: "7"
+    },
+    "loading-item-container": {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1"
+    },
+    "loading-item-icon": {
+      h: "6",
+      w: "6",
+      rounded: "md"
+    },
+    "loading-item-title": {
+      h: "5",
+      w: "3/5",
+      rounded: "md"
+    },
+    "items-list-header": {
+      display: "flex",
+      p: "2",
+      color: "slate.11",
+      textTransform: "uppercase",
+      fontSize: "xs",
+      fontWeight: "medium",
+      letterSpacing: "wide",
+      position: "sticky",
+      top: "0",
+      zIndex: "docked",
+      minH: "auto",
+      pointerEvents: "none",
+      background: "white"
+    },
+    "item-title": {
+      flexGrow: "1",
+      maxW: "full",
+      minW: "3/6",
+      overflowWrap: "break-word",
+      textStyle: "sm",
+      fontWeight: "medium"
+    },
+    "item-hint": {
+      color: "slate.9",
+      textStyle: "xs",
+      minW: "1/6",
+      maxW: "2/5",
+      textAlign: "right",
+      mt: "0.5"
+    }
+  }
+};
+const recipe = sva.sva(svaConfig);
+const dropdownRecipe = Object.assign(recipe, {
+  SCOPE,
+  DESCRIPTION: "Dropdown component",
+  SLOTS
+});
+
+exports.dropdownRecipe = dropdownRecipe;

package/dist/cjs/styled-system/css/conditions.cjs

@@ -0,0 +1,49 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var helpers = require('../helpers.cjs');
+
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_collapsed,_off,_on,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base";
+const conditions = new Set(conditionsStr.split(','));
+
+const conditionRegex = /^@|&|&$/;
+
+function isCondition(value){
+  return conditions.has(value) || conditionRegex.test(value)
+}
+
+const underscoreRegex = /^_/;
+const conditionsSelectorRegex = /&|@/;
+
+function finalizeConditions(paths){
+  return paths.map((path) => {
+    if (conditions.has(path)){
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (conditionsSelectorRegex.test(path)){
+      return `[${helpers.withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })}
+
+  function sortConditions(paths){
+    return paths.sort((a, b) => {
+      const aa = isCondition(a);
+      const bb = isCondition(b);
+      if (aa && !bb) return 1
+      if (!aa && bb) return -1
+      return 0
+    })
+  }
+
+exports.finalizeConditions = finalizeConditions;
+exports.isCondition = isCondition;
+exports.sortConditions = sortConditions;