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

package/dist/cjs/ui-kit/avatar.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/button.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/spinner.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/avatar.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/button.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/icon.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/menu.cjs

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var react = require('@ark-ui/react');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/css/conditions.cjs');
+require('../../styled-system/css/css.cjs');
+var menu$1 = require('../../styled-system/recipes/menu.cjs');
+var createStyleContext = require('./utils/create-style-context.cjs');
+var menu = require('@ark-ui/react/menu');
+
+const { withRootProvider, withContext } = createStyleContext.createStyleContext(menu$1.menu);
+withRootProvider(react.Menu.RootProvider);
+const Root = withRootProvider(
+  react.Menu.Root
+);
+withContext(react.Menu.Arrow, "arrow");
+withContext(react.Menu.ArrowTip, "arrowTip");
+withContext(react.Menu.CheckboxItem, "item");
+const Content = withContext(react.Menu.Content, "content");
+withContext(react.Menu.ContextTrigger, "contextTrigger");
+withContext(react.Menu.Indicator, "indicator");
+const ItemGroupLabel = withContext(react.Menu.ItemGroupLabel, "itemGroupLabel");
+const ItemGroup = withContext(react.Menu.ItemGroup, "itemGroup");
+withContext(react.Menu.ItemIndicator, "itemIndicator");
+const Item = withContext(react.Menu.Item, "item");
+withContext(react.Menu.ItemText, "itemText");
+const Positioner = withContext(react.Menu.Positioner, "positioner");
+withContext(react.Menu.RadioItemGroup, "itemGroup");
+withContext(react.Menu.RadioItem, "item");
+withContext(react.Menu.Separator, "separator");
+withContext(react.Menu.TriggerItem, "triggerItem");
+const Trigger = withContext(react.Menu.Trigger, "trigger");
+
+Object.defineProperty(exports, "Context", {
+  enumerable: true,
+  get: function () { return menu.MenuContext; }
+});
+exports.Content = Content;
+exports.Item = Item;
+exports.ItemGroup = ItemGroup;
+exports.ItemGroupLabel = ItemGroupLabel;
+exports.Positioner = Positioner;
+exports.Root = Root;
+exports.Trigger = Trigger;

package/dist/cjs/ui-kit/styled/popover.cjs

@@ -0,0 +1,40 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var popover = require('@ark-ui/react/popover');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/css/conditions.cjs');
+require('../../styled-system/css/css.cjs');
+var popover$1 = require('../../styled-system/recipes/popover.cjs');
+var createStyleContext = require('./utils/create-style-context.cjs');
+
+const { withRootProvider, withContext } = createStyleContext.createStyleContext(popover$1.popover);
+withRootProvider(popover.Popover.RootProvider);
+const Root = withRootProvider(popover.Popover.Root);
+withContext(popover.Popover.Anchor, "anchor");
+withContext(popover.Popover.Arrow, "arrow");
+withContext(popover.Popover.ArrowTip, "arrowTip");
+withContext(popover.Popover.CloseTrigger, "closeTrigger");
+const Content = withContext(popover.Popover.Content, "content");
+withContext(popover.Popover.Description, "description");
+withContext(popover.Popover.Indicator, "indicator");
+const Positioner = withContext(popover.Popover.Positioner, "positioner");
+withContext(popover.Popover.Title, "title");
+const Trigger = withContext(popover.Popover.Trigger, "trigger");
+
+Object.defineProperty(exports, "Context", {
+  enumerable: true,
+  get: function () { return popover.PopoverContext; }
+});
+exports.Content = Content;
+exports.Positioner = Positioner;
+exports.Root = Root;
+exports.Trigger = Trigger;

package/dist/cjs/ui-kit/styled/skeleton.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/spinner.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/text.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/tooltip.cjs

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var tooltip = require('@ark-ui/react/tooltip');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/css/conditions.cjs');
+require('../../styled-system/css/css.cjs');
+var tooltip$1 = require('../../styled-system/recipes/tooltip.cjs');
+var createStyleContext = require('./utils/create-style-context.cjs');
+
+const { withRootProvider, withContext } = createStyleContext.createStyleContext(tooltip$1.tooltip);
+withRootProvider(tooltip.Tooltip.RootProvider);
+const Root = withRootProvider(tooltip.Tooltip.Root);
+const Arrow = withContext(tooltip.Tooltip.Arrow, "arrow");
+const ArrowTip = withContext(tooltip.Tooltip.ArrowTip, "arrowTip");
+const Content = withContext(tooltip.Tooltip.Content, "content");
+const Positioner = withContext(tooltip.Tooltip.Positioner, "positioner");
+const Trigger = withContext(tooltip.Tooltip.Trigger, "trigger");
+
+Object.defineProperty(exports, "Context", {
+  enumerable: true,
+  get: function () { return tooltip.TooltipContext; }
+});
+exports.Arrow = Arrow;
+exports.ArrowTip = ArrowTip;
+exports.Content = Content;
+exports.Positioner = Positioner;
+exports.Root = Root;
+exports.Trigger = Trigger;

package/dist/cjs/ui-kit/styled/utils/create-style-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/esm/_modules/awesome-debounce-promise.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.1
+ * v2.0.3-beta.2
  */
 'use client';
 

package/dist/esm/_modules/react-use-promise.mjs

@@ -0,0 +1,13 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import usePromiseImport from 'react-use-promise';
+
+const usePromise = usePromiseImport?.default ?? usePromiseImport;
+
+export { usePromise as default };

package/dist/esm/components/AdvancedOptions.mjs

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Button } from './Button/Button.mjs';
+import { useState } from 'react';
+
+function AdvancedOptions({
+  title = "advanced options",
+  openByDefault = false,
+  children
+}) {
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(openByDefault);
+  return showAdvancedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ajax",
+        onClick: () => setShowAdvancedOptions(false),
+        className: "-ml-6 self-start",
+        children: [
+          "Hide ",
+          title
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children })
+  ] }) : /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ajax",
+      onClick: () => setShowAdvancedOptions(true),
+      className: "-ml-6 self-start",
+      children: [
+        "Show ",
+        title
+      ]
+    }
+  );
+}
+
+export { AdvancedOptions };

package/dist/esm/components/Button/Button.mjs

@@ -0,0 +1,128 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { SvgIconType, SvgIcon } from '../SvgIcon/index.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+import classes from './Button.module.css.mjs';
+
+function getButtonClassesByVariant(variant) {
+  switch (variant) {
+    case "ajax":
+      return classes["uikit-button--ajax"];
+    case "text":
+      return classes["uikit-button--text"];
+    case "outline":
+      return classes["uikit-button--outline"];
+    case "secondary":
+      return classes["uikit-button--secondary"];
+    case "warning":
+      return classes["uikit-button--warning"];
+    case "primary":
+    default:
+      return classes["uikit-button--primary"];
+  }
+}
+function getButtonClassesBySize(size) {
+  switch (size) {
+    case "large":
+      return classes["uikit-button--large"];
+    case "small":
+      return classes["uikit-button--small"];
+    case "medium":
+    default:
+      return classes["uikit-button--medium"];
+  }
+}
+const GenericButton = forwardRef(
+  ({ children, className, loading, tooltip, tooltipProps = {}, ...restProps }, ref) => {
+    const button = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className,
+        type: "button",
+        ...restProps,
+        ref,
+        "aria-busy": loading ? "true" : void 0,
+        children: [
+          loading && /* @__PURE__ */ jsx(ButtonSvgIcon, { type: SvgIconType.Loader }),
+          children
+        ]
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsx(Tooltip, { tooltip, ...tooltipProps, children: button });
+    }
+    return button;
+  }
+);
+GenericButton.displayName = "GenericButton";
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "medium",
+    className,
+    children,
+    ...restProps
+  }, ref) => {
+    const buttonClass = clsx([
+      classes["uikit-button"],
+      getButtonClassesByVariant(variant),
+      getButtonClassesBySize(size),
+      className
+    ]);
+    return /* @__PURE__ */ jsx(GenericButton, { className: buttonClass, ...restProps, ref, children });
+  }
+);
+Button.displayName = "Button";
+const IconButton = forwardRef(
+  ({
+    children,
+    size = "medium",
+    className,
+    isActive,
+    tooltip,
+    ...restProps
+  }, ref) => {
+    const buttonIconClass = clsx([
+      classes["uikit-button"],
+      classes["uikit-button--icon"],
+      isActive && classes["uikit-button--icon__active"],
+      getButtonClassesBySize(size),
+      className
+    ]);
+    const button = /* @__PURE__ */ jsx("button", { className: buttonIconClass, ...restProps, ref, children });
+    if (tooltip) {
+      return /* @__PURE__ */ jsx(Tooltip, { tooltip, children: button });
+    }
+    return button;
+  }
+);
+function ButtonSvgIcon({
+  type,
+  className,
+  size = "normal",
+  position = "start"
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgIcon,
+    {
+      type,
+      className: clsx(
+        classes.uikitButtonSvgIcon,
+        className,
+        size === "small" ? classes.uikitButtonSvgIcon_small : classes.uikitButtonSvgIcon_normal,
+        position === "end" ? classes.uikitButtonSvgIcon_end : classes.uikitButtonSvgIcon_start
+      )
+    }
+  );
+}
+
+export { Button, ButtonSvgIcon, GenericButton, IconButton };

package/dist/esm/components/Button/Button.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 = ".Button-module_container__jA0Sz {\n  width: 100%\n}\n@media (min-width: 640px) {\n  .Button-module_container__jA0Sz {\n    max-width: 640px\n  }\n}\n@media (min-width: 768px) {\n  .Button-module_container__jA0Sz {\n    max-width: 768px\n  }\n}\n@media (min-width: 1024px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1024px\n  }\n}\n@media (min-width: 1280px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1280px\n  }\n}\n@media (min-width: 1536px) {\n  .Button-module_container__jA0Sz {\n    max-width: 1536px\n  }\n}\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\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    border-radius: 0.25rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\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: 100ms;\n    height: 2.25rem\n  }\n@layer elements {\n  .Button-module_uikit-button__AuMtw {\n      height: 2.25rem;\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n    }\n}\n  .Button-module_uikit-button__AuMtw {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\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  }\n\n  .Button-module_uikit-button__AuMtw:disabled {\n    cursor: default\n  }\n\n  .Button-module_uikit-button__AuMtw svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem;\n    display: inline;\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle\n  }\n\n  /* ### SIZE ### */\n  .Button-module_uikit-button--large__9cQ-5 {\n    height: 2.5rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2.25rem /* h-9 */\n  }\n  .Button-module_uikit-button--large__9cQ-5 svg:not(.Button-module_uikitButtonSvgIcon__Y-4HV) {\n    margin-left: -0.375rem;\n    margin-right: 0.5rem\n  }\n  .Button-module_uikit-button--medium__P5rpZ {\n    height: 2.25rem;\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n    line-height: 2rem /* h-8 */\n  }\n\n  .Button-module_uikit-button--small__5L5Ch {\n    height: 1.75rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    line-height: 1.75rem /* h-7 */\n  }\n\n  /* ### TYPE ### */\n\n  .Button-module_uikit-button--primary__BsMcw {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(25 25 25 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(34 34 34 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--primary__BsMcw:disabled {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(105 105 105 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(105 105 105 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--primary__BsMcw:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(15 76 117 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(15 76 117 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--secondary__ENap8 {\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n  .Button-module_uikit-button--secondary__ENap8:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--secondary__ENap8:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--warning__B0a1y {\n    --tw-bg-opacity: 1;\n    background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity));\n    border-color: rgb(185 28 28 / var(--tw-border-opacity));\n    --tw-border-opacity: 0.5\n  }\n  .Button-module_uikit-button--warning__B0a1y:disabled {\n    background-color: rgb(248 113 113 / var(--tw-bg-opacity));\n    --tw-bg-opacity: 0.8;\n    border-color: rgb(248 113 113 / var(--tw-border-opacity));\n    --tw-border-opacity: 0.1;\n    --tw-text-opacity: 1;\n    color: rgb(254 226 226 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--warning__B0a1y:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    --tw-bg-opacity: 1;\n    background-color: rgb(220 38 38 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--outline__lESp6 {\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(255 255 255 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--outline__lESp6:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--outline__lESp6:not(:disabled):hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(170 170 170 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--text__JPp9w {\n    border-style: none !important;\n    background-color: transparent\n  }\n  .Button-module_uikit-button--text__JPp9w:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--text__JPp9w:not(:disabled):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n  }\n\n  .Button-module_uikit-button--ajax__Kl1-1 {\n    border-style: none !important;\n    background-color: transparent;\n    --tw-text-opacity: 1;\n    color: rgb(13 121 194 / var(--tw-text-opacity));\n    text-decoration-line: underline;\n    text-decoration-style: dashed;\n    text-decoration-thickness: 0.05rem;\n    text-underline-offset: 0.15rem\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--ajax__Kl1-1:not(:disabled):hover {\n    --tw-text-opacity: 1;\n    color: rgb(15 76 117 / var(--tw-text-opacity));\n    text-decoration-style: solid\n  }\n\n  .Button-module_uikit-button--icon__0ouUU {\n    height: 1.5rem;\n    width: 1.5rem;\n    align-items: center;\n    justify-content: center;\n    padding: 0px;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--icon__0ouUU:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button--icon__0ouUU:not(:disabled):hover,\n  .Button-module_uikit-button--icon__active__hWz2W {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity))\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU {\n    border-width: 0px;\n    background-color: transparent\n  }\n  .Button-module_uikit-button__AuMtw.Button-module_uikit-button--icon__0ouUU svg {\n    margin: 0px;\n    height: 1.25rem;\n    width: 1.25rem;\n    stroke: currentColor\n  }\n\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikit-button--small__5L5Ch.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1rem;\n    width: 1rem\n  }\n\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU {\n    height: 1.75rem;\n    width: 1.75rem\n  }\n  .Button-module_uikit-button--large__9cQ-5.Button-module_uikit-button--icon__0ouUU svg {\n    height: 1.5rem;\n    width: 1.5rem\n  }\n\n  /* Hide icon goes after loader icon */\n  .Button-module_uikit-button__AuMtw[aria-busy='true'] svg + svg {\n    display: none\n  }\n\n  .Button-module_uikitButtonSvgIcon__Y-4HV {\n    display: inline;\n    vertical-align: middle\n  }\n  .Button-module_uikitButtonSvgIcon_normal__KfS3A {\n    height: 1.25rem;\n    width: 1.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_small__A9XQR {\n    margin-top: 0.125rem;\n    height: 1rem;\n    width: 1rem\n  }\n  .Button-module_uikitButtonSvgIcon_start__rgkNm {\n    margin-right: 0.375rem;\n    margin-left: -0.25rem\n  }\n  .Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.375rem;\n    margin-right: -0.25rem\n  }\n\n  .Button-module_uikitButtonSvgIcon_small__A9XQR.Button-module_uikitButtonSvgIcon_end__ZyJvx {\n    margin-left: 0.25rem;\n    margin-right: -0.375rem\n  }\n}\n";
+var classes = {"container":"Button-module_container__jA0Sz","uikit-button":"Button-module_uikit-button__AuMtw","uikitButtonSvgIcon":"Button-module_uikitButtonSvgIcon__Y-4HV","uikit-button--large":"Button-module_uikit-button--large__9cQ-5","uikit-button--medium":"Button-module_uikit-button--medium__P5rpZ","uikit-button--small":"Button-module_uikit-button--small__5L5Ch","uikit-button--primary":"Button-module_uikit-button--primary__BsMcw","uikit-button--secondary":"Button-module_uikit-button--secondary__ENap8","uikit-button--warning":"Button-module_uikit-button--warning__B0a1y","uikit-button--outline":"Button-module_uikit-button--outline__lESp6","uikit-button--text":"Button-module_uikit-button--text__JPp9w","uikit-button--ajax":"Button-module_uikit-button--ajax__Kl1-1","uikit-button--icon":"Button-module_uikit-button--icon__0ouUU","uikit-button--icon__active":"Button-module_uikit-button--icon__active__hWz2W","uikitButtonSvgIcon_normal":"Button-module_uikitButtonSvgIcon_normal__KfS3A","uikitButtonSvgIcon_small":"Button-module_uikitButtonSvgIcon_small__A9XQR","uikitButtonSvgIcon_start":"Button-module_uikitButtonSvgIcon_start__rgkNm","uikitButtonSvgIcon_end":"Button-module_uikitButtonSvgIcon_end__ZyJvx"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/ComboBox/Dropdown/ActiveTab.mjs

@@ -0,0 +1,19 @@
+"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 { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { TAB_COMPONENTS } from './tabs.mjs';
+
+function ActiveTab({ onSelect }) {
+  const { activeTab } = useComboBoxDropdownContext();
+  const ActiveTab2 = (activeTab ? TAB_COMPONENTS[activeTab] : void 0) ?? (() => /* @__PURE__ */ jsx("p", { children: "Unknown Tab" }));
+  return /* @__PURE__ */ jsx(ActiveTab2, { onSelect });
+}
+
+export { ActiveTab };

package/dist/esm/components/ComboBox/Dropdown/Dropdown.mjs

@@ -0,0 +1,90 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DropdownUIPopper } from '../../ComboBoxElements/Popper.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useWindowEvent } from '../../../hooks/useWindowEvent.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useDropdownStackContext, DropdownStackContextProvider } from '../context/combobox-dropdown-stack.mjs';
+import { SearchInput } from './SearchInput.mjs';
+import { ActiveTab } from './ActiveTab.mjs';
+import { renderTabs } from './tabs.mjs';
+import { TabIcon } from '../../DropdownUI/DropdownUIElements.mjs';
+
+const Dropdown = forwardRef(
+  ({
+    referenceElement,
+    topDropdownPanelComponent,
+    autoFocusOnSearch,
+    onSelect,
+    onClose
+  }, ref) => {
+    const { isClickInsideRefsAndChildren } = useDropdownStackContext(
+      ref
+    );
+    useClick((event) => {
+      if (!isClickInsideRefsAndChildren(event)) {
+        onClose();
+      }
+    });
+    useWindowEvent("keydown", (e) => {
+      e.key === "Escape" && onClose();
+    });
+    const { availableTabs } = useComboBoxDropdownContext();
+    if (availableTabs === null) {
+      return null;
+    }
+    if (availableTabs?.length < 1) {
+      return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsx(DropdownUI, { ref, children: /* @__PURE__ */ jsx(DropdownUI.LoadingPanel, { children: "Loading options" }) }) }) });
+    }
+    return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxs(DropdownUI, { ref, children: [
+      /* @__PURE__ */ jsx(DropdownTabs, {}),
+      topDropdownPanelComponent && /* @__PURE__ */ jsx(Fragment, { children: topDropdownPanelComponent }),
+      /* @__PURE__ */ jsx(SearchInput, { autoFocus: autoFocusOnSearch }),
+      /* @__PURE__ */ jsx(ActiveTab, { onSelect })
+    ] }) }) });
+  }
+);
+function DropdownTabs() {
+  const { activeTab, availableTabs, setActiveTab } = useComboBoxDropdownContext();
+  if (!availableTabs || availableTabs.length === 0) return null;
+  if (availableTabs.length === 1 && hideTabIfSingle(availableTabs[0]))
+    return null;
+  return /* @__PURE__ */ jsx(DropdownUI.Tabs, { children: availableTabs.map((tab) => /* @__PURE__ */ jsx(
+    Tab,
+    {
+      selected: activeTab === tab,
+      onClick: () => setActiveTab(tab),
+      title: renderTabs[tab].title,
+      icon: renderTabs[tab]?.icon
+    },
+    tab
+  )) });
+}
+function Tab({
+  selected,
+  onClick,
+  title,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs(DropdownUI.Tab, { selected, onClick, children: [
+    title,
+    icon && /* @__PURE__ */ jsx(TabIcon, { type: icon })
+  ] });
+}
+function hideTabIfSingle(tab) {
+  return !renderTabs[tab]?.showIfSingle;
+}
+function useClick(cb) {
+  useWindowEvent("mouseup", cb);
+  useWindowEvent("touchend", cb);
+}
+
+export { Dropdown, DropdownTabs };

package/dist/esm/components/ComboBox/Dropdown/Option.mjs

@@ -0,0 +1,65 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import useEventStopPropagation from '../../../hooks/useEventStopPropagation.mjs';
+import { ItemIcon, ItemChevronIcon, ItemCustomValue, ItemTitle } from '../../DropdownUI/DropdownUIElements.mjs';
+
+function ComboBoxOption({
+  option,
+  selected,
+  current = false,
+  onSelect
+}) {
+  const handleOnSelect = useEventStopPropagation(() => {
+    if (option.isSection && !option.drilldownOptionFactories) {
+      return;
+    }
+    onSelect?.();
+  });
+  const iconProps = getIconProps(option);
+  const valueProps = getValueProps(option);
+  const hasChild = !!option.drilldownOptionFactories;
+  const Component = option.isSection ? DropdownUI.HeaderItem : DropdownUI.Item;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      selected,
+      active: current,
+      onClick: handleOnSelect,
+      isHighlighted: option.isHighlighted,
+      children: [
+        /* @__PURE__ */ jsx(ItemIcon, { ...iconProps }),
+        /* @__PURE__ */ jsx(OptionTitle, { ...valueProps }),
+        hasChild && /* @__PURE__ */ jsx(ItemChevronIcon, {})
+      ]
+    }
+  );
+}
+function OptionTitle({ isCustomValue, label, hint }) {
+  if (!label && !hint) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "Please provide label for an option" });
+  }
+  const Component = isCustomValue ? ItemCustomValue : ItemTitle;
+  return /* @__PURE__ */ jsx(Component, { hint, children: label });
+}
+function getIconProps(option) {
+  const { iconType: type, iconUri: src } = option;
+  return { type, src };
+}
+function getValueProps(option) {
+  const { label, hint, isCustomValue } = option;
+  return {
+    label: label ? label : hint,
+    hint: label ? hint : void 0,
+    isCustomValue
+  };
+}
+
+export { ComboBoxOption as default };