@integration-app/react 2.1.2 → 2.1.4

package/dist/cjs/components/Notification/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../SvgIcon/index.cjs');
 var index$1 = require('../Tooltip/index.cjs');
 var Notification_module = require('./Notification.module.css.cjs');
 
@@ -37,7 +37,7 @@ function NotificationBlock({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx(
+      className: clsx.clsx(
         Notification_module.default.notification,
         getBlockClassnameByType(type),
         getBlockClassnameBySize(size),
@@ -73,7 +73,7 @@ function NotificationIcon({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: clsx(
+          className: clsx.clsx(
             Notification_module.default.notificationIcon,
             getIconClassnameByType(type),
             className

package/dist/cjs/components/Popover/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,104 +10,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactPopper = require('react-popper');
-var index = require('../Portal/index.cjs');
-var Popover_module = require('./Popover.module.css.cjs');
-var Debounce = require('../../helpers/Debounce.cjs');
-var useWindowEvent = require('../../hooks/useWindowEvent.cjs');
-var clsx = require('clsx');
-var getRefElement = require('../../helpers/getRefElement.cjs');
-require('../../styled-system/css/css.cjs');
-require('../../styled-system/helpers.cjs');
-require('../../styled-system/jsx/is-valid-prop.cjs');
-var box = require('../../styled-system/jsx/box.cjs');
-require('../../styled-system/patterns/visually-hidden.cjs');
+var index = require('../ComboBox/DropdownPortal/index.cjs');
 var popover = require('../../ui-kit/styled/popover.cjs');
 
-function GenericPopover({
-  refElement,
-  isOpen = false,
-  options = {},
-  children,
-  portalNode
-}) {
-  const [popperElement, setPopperElement] = React.useState();
-  const safeRefElement = getRefElement.getRefElement(refElement);
-  const {
-    styles,
-    attributes,
-    update: updatePopover
-  } = reactPopper.usePopper(safeRefElement, popperElement, options);
-  const [debouncedResizeCallback] = Debounce.default(() => {
-    void updatePopover?.();
-  }, 150);
-  useWindowEvent.useWindowEvent("resize", debouncedResizeCallback);
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { node: portalNode, children: /* @__PURE__ */ jsxRuntime.jsx(
-    box.Box,
-    {
-      ref: setPopperElement,
-      zIndex: "600",
-      style: styles.popper,
-      ...attributes.popper,
-      children
-    }
-  ) });
-}
 const DefaultPopper = React.forwardRef(
-  ({
-    placement = "bottom",
-    refElement,
-    isOpen = false,
-    offset = [0, 8],
-    className,
-    onClick,
-    children,
-    portalNode
-  }, ref) => {
-    const modifiers = [
-      {
-        name: "offset",
-        options: {
-          offset
-        }
-      }
-    ];
-    const popperJsOptions = {
-      placement,
-      modifiers
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      GenericPopover,
-      {
-        refElement,
-        isOpen: !!refElement && isOpen,
-        options: popperJsOptions,
-        portalNode,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref,
-            className: clsx(Popover_module.default.defaultPopover, className),
-            onClick,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
-DefaultPopper.displayName = "DefaultPopper";
-const PopoverNew = React.forwardRef(
   ({
     placement = "bottom-start",
     isOpen,
     offset = [0, 8],
     className,
     children,
-    triggerNode
+    triggerNode,
+    onClickOutside
   }, ref) => {
     const [crossAxis, mainAxis] = offset;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -115,6 +29,8 @@ const PopoverNew = React.forwardRef(
       {
         open: isOpen,
         lazyMount: true,
+        unmountOnExit: true,
+        onPointerDownOutside: onClickOutside,
         positioning: {
           placement,
           offset: {
@@ -123,8 +39,8 @@ const PopoverNew = React.forwardRef(
           }
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
-          /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+          triggerNode && /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
             popover.Content,
             {
               bg: "neutral.2",
@@ -138,7 +54,7 @@ const PopoverNew = React.forwardRef(
               className,
               children
             }
-          ) })
+          ) }) })
         ]
       }
     );
@@ -146,4 +62,3 @@ const PopoverNew = React.forwardRef(
 );
 
 exports.DefaultPopper = DefaultPopper;
-exports.PopoverNew = PopoverNew;

package/dist/cjs/components/Portal/index.cjs

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

package/dist/cjs/components/Radio/Radio.module.css.cjs

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

package/dist/cjs/components/Radio/index.cjs

@@ -2,16 +2,16 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Radio_module = require('./Radio.module.css.cjs');
 var React = require('react');
 var clsx = require('clsx');
+var Radio_module = require('./Radio.module.css.cjs');
 
 const Radiobutton = React.forwardRef(
   ({ className, inline, ...props }, ref) => {
@@ -19,7 +19,7 @@ const Radiobutton = React.forwardRef(
       "input",
       {
         type: "radio",
-        className: clsx(
+        className: clsx.clsx(
           Radio_module.default["uikit-radio"],
           inline && Radio_module.default["uikit-radio__inline"],
           props?.checked && Radio_module.default["uikit-radio__checked"],

package/dist/cjs/components/SimpleInput/SimpleInput.cjs

@@ -2,13 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
 require('@integration-app/sdk');
 require('js-convert-case');
 var FieldDescription = require('../DataBuilder/FieldDescription.cjs');
@@ -16,8 +18,6 @@ var index = require('../DataBuilderUI/index.cjs');
 var Input = require('../Input/Input.cjs');
 require('../Input/SearchInput.cjs');
 var SimpleInput_module = require('./SimpleInput.module.css.cjs');
-var clsx = require('clsx');
-var React = require('react');
 
 function SimpleInput({
   label,
@@ -29,7 +29,7 @@ function SimpleInput({
   function handleChange(e) {
     onChange(e.target.value);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx.clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx(index.Title, { rightSlot: /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: description }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Input, { className: SimpleInput_module.default.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Input.Input,

package/dist/cjs/components/SimpleInput/SimpleInput.module.css.cjs

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

package/dist/cjs/components/SimpleInput/SimpleRadio.cjs

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

package/dist/cjs/components/SimpleInput/SimpleTextarea.cjs

@@ -2,18 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
 var index = require('../DataBuilderUI/index.cjs');
 var index$1 = require('../Textarea/index.cjs');
 var SimpleInput_module = require('./SimpleInput.module.css.cjs');
-var clsx = require('clsx');
-var React = require('react');
 
 function SimpleTextarea({
   label,
@@ -24,7 +24,7 @@ function SimpleTextarea({
   function handleChange(e) {
     onChange(e.target.value);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx.clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label }) }),
     /* @__PURE__ */ jsxRuntime.jsx(index.Cell, { className: SimpleInput_module.default.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       index$1.Textarea,

package/dist/cjs/components/SimpleMenu/index.cjs

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

package/dist/cjs/components/SvgIcon/BasicEntities.cjs

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

package/dist/cjs/components/SvgIcon/index.cjs

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

package/dist/cjs/components/SvgIcon/svg-icon-type.cjs

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

package/dist/cjs/components/Tag/Components.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,10 +10,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
 var styles_module = require('./styles.module.css.cjs');
-var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
 var index = require('../SvgIcon/index.cjs');
-var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
 
 function TagSvgIcon({
   type,
@@ -23,7 +23,7 @@ function TagSvgIcon({
   return /* @__PURE__ */ jsxRuntime.jsx(
     index.SvgIcon,
     {
-      className: clsx(styles_module.default.tagIcon, className),
+      className: clsx.clsx(styles_module.default.tagIcon, className),
       type,
       ...props
     }
@@ -38,7 +38,7 @@ function TagImage({
     "img",
     {
       alt,
-      className: clsx(styles_module.default.tagIcon, styles_module.default.tagImageIcon, className),
+      className: clsx.clsx(styles_module.default.tagIcon, styles_module.default.tagImageIcon, className),
       ...props
     }
   );
@@ -52,7 +52,7 @@ function TagConfigButton({
     "button",
     {
       type: "button",
-      className: clsx(
+      className: clsx.clsx(
         styles_module.default.tagConfigButton,
         error && styles_module.default.tagConfigButtonError
       ),

package/dist/cjs/components/Tag/SegmentSeparator.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../SvgIcon/index.cjs');
 var styles_module = require('./styles.module.css.cjs');
 
 function SegmentSeparator() {

package/dist/cjs/components/Tag/Tag.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -12,8 +12,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
 var index = require('../Truncate/index.cjs');
-var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
 var Components = require('./Components.cjs');
 var styles_module = require('./styles.module.css.cjs');
 var index$1 = require('../Tooltip/index.cjs');
@@ -30,7 +30,7 @@ const GenericTag = React.forwardRef(function({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx(
+      className: clsx.clsx(
         styles_module.default.tagGeneric,
         (inactive || disabled) && styles_module.default.tagGeneric__disabled,
         className

package/dist/cjs/components/Tag/TagPlaceholder.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,9 +10,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Tag = require('./Tag.cjs');
-var styles_module = require('./styles.module.css.cjs');
 var clsx = require('clsx');
+var styles_module = require('./styles.module.css.cjs');
+var Tag = require('./Tag.cjs');
 
 const TagPlaceholder = React.forwardRef(
   function({ children, className, ...props }, ref) {
@@ -20,7 +20,7 @@ const TagPlaceholder = React.forwardRef(
       Tag.Tag,
       {
         ref,
-        className: clsx(
+        className: clsx.clsx(
           styles_module.default.tagPlaceholder,
           !!props?.onClick && styles_module.default.tagPlaceholder__clickable,
           className

package/dist/cjs/components/Tag/styles.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject = require('style-inject');
 
-var css_248z = ".styles-module_tagGeneric__tz0VU {\n  position: relative;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  max-width: 100%;\n  min-height: 2rem;\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.styles-module_tagGeneric__disabled__vgck7:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(221 221 221 / var(--tw-bg-opacity));\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n}\n\n.styles-module_tagDefaultColors__JlCHo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n  border-width: 1px;\n  border-color: transparent;\n}\n\n.styles-module_tagDefaultColors__JlCHo:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity));\n}\n\n/* iconBefore */\n\n.styles-module_tagIcon__vEYaV {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-right: 0.375rem;\n  height: 1.25rem;\n  width: 1.25rem;\n  margin-top: 0.025rem;\n}\n\n.styles-module_tagImageIcon__rokoa {\n  height: auto;\n  max-height: 1.25rem;\n  --tw-brightness: brightness(.5);\n  --tw-contrast: contrast(1.5);\n  --tw-grayscale: grayscale(100%);\n  --tw-invert: invert(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.styles-module_tagConfigButton__3WdyL {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  height: 2rem;\n  width: 2rem;\n  border-top-right-radius: 0.25rem;\n  border-bottom-right-radius: 0.25rem;\n  transform: translateX(0.625rem);\n  border-left-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.styles-module_tagConfigButton__3WdyL:hover {\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.1;\n}\n\n.styles-module_tagConfigButton__3WdyL svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\n.styles-module_tagConfigButtonError__iTyh4 {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\n}\n\n.styles-module_tagConfigButtonError__iTyh4:hover {\n  background-color: #9b2900;\n}\n\n/* ## Placeholder */\n\n.styles-module_tagPlaceholder__c2oMP {\n  background-color: transparent;\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o {\n  cursor: pointer;\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o:not(.styles-module_tagGeneric__disabled__vgck7):hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n\n.styles-module_tagPlaceholder__c2oMP:empty {\n  width: 100%;\n  min-width: 7rem;\n}\n\n.styles-module_segmentSeparator__hQRZZ {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n";
+var css_248z = ".styles-module_tagGeneric__tz0VU {\n  position: relative;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  max-width: 100%;\n  min-height: 2rem;\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.styles-module_tagGeneric__disabled__vgck7:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(221 221 221 / var(--tw-bg-opacity));\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n}\n\n.styles-module_tagDefaultColors__JlCHo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n  border-width: 1px;\n  border-color: transparent;\n}\n\n.styles-module_tagDefaultColors__JlCHo:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity));\n}\n\n/* iconBefore */\n\n.styles-module_tagIcon__vEYaV {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-right: 0.375rem;\n  height: 1.25rem;\n  width: 1.25rem;\n  margin-top: 0.025rem;\n}\n\n.styles-module_tagImageIcon__rokoa {\n  height: auto;\n  max-height: 1.25rem;\n  --tw-brightness: brightness(.5);\n  --tw-contrast: contrast(1.5);\n  --tw-grayscale: grayscale(100%);\n  --tw-invert: invert(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.styles-module_tagConfigButton__3WdyL {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  height: 2rem;\n  width: 2rem;\n  border-top-right-radius: 0.25rem;\n  border-bottom-right-radius: 0.25rem;\n  transform: translateX(0.625rem);\n  border-left-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.styles-module_tagConfigButton__3WdyL:hover {\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.1;\n}\n\n.styles-module_tagConfigButton__3WdyL svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\n.styles-module_tagConfigButtonError__iTyh4 {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\n}\n\n.styles-module_tagConfigButtonError__iTyh4:hover {\n  background-color: #9b2900;\n}\n\n/* ## Placeholder */\n\n.styles-module_tagPlaceholder__c2oMP {\n  background-color: transparent;\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o {\n  cursor: pointer;\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o:not(.styles-module_tagGeneric__disabled__vgck7):hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n\n.styles-module_tagPlaceholder__c2oMP:empty {\n  width: 100%;\n  min-width: 7rem;\n  min-height: auto;\n}\n\n.styles-module_segmentSeparator__hQRZZ {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n";
 var classes = {"tagGeneric":"styles-module_tagGeneric__tz0VU","tagGeneric__disabled":"styles-module_tagGeneric__disabled__vgck7","tagDefaultColors":"styles-module_tagDefaultColors__JlCHo","tagIcon":"styles-module_tagIcon__vEYaV","tagImageIcon":"styles-module_tagImageIcon__rokoa","tagConfigButton":"styles-module_tagConfigButton__3WdyL","tagConfigButtonError":"styles-module_tagConfigButtonError__iTyh4","tagPlaceholder":"styles-module_tagPlaceholder__c2oMP","tagPlaceholder__clickable":"styles-module_tagPlaceholder__clickable__Spl2o","segmentSeparator":"styles-module_segmentSeparator__hQRZZ"};
 styleInject(css_248z);
 

package/dist/cjs/components/Textarea/Textarea.module.css.cjs

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

package/dist/cjs/components/Textarea/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -41,7 +41,7 @@ const GenericTextarea = React.forwardRef(
       "textarea",
       {
         ref,
-        className: clsx(
+        className: clsx.clsx(
           Textarea_module.default["uikit-textarea"],
           getClassNameByVariant(variant),
           className

package/dist/cjs/components/Toggle/Toggle.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@headlessui/react');
 var clsx = require('clsx');
-var index = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../SvgIcon/index.cjs');
 var Toggle_module = require('./Toggle.module.css.cjs');
 
 function Toggle({ children, ...props }) {
@@ -41,7 +41,7 @@ function Toggle({ children, ...props }) {
     {
       checked,
       onChange: handleChange,
-      className: clsx(
+      className: clsx.clsx(
         Toggle_module.default.wrapper,
         className,
         checked && !disabled && Toggle_module.default.wrapper__on,
@@ -51,7 +51,7 @@ function Toggle({ children, ...props }) {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: clsx(
+          className: clsx.clsx(
             Toggle_module.default.circle,
             checked ? Toggle_module.default.circle__on : Toggle_module.default.circle__off,
             loading && Toggle_module.default.circle__loading

package/dist/cjs/components/Toggle/Toggle.module.css.cjs

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

package/dist/cjs/components/Toggle/ToggleOnOff.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@headlessui/react');
 var clsx = require('clsx');
-var index = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../SvgIcon/index.cjs');
 var Toggle_module = require('./Toggle.module.css.cjs');
 
 function ToggleOnOff({
@@ -31,7 +31,7 @@ function ToggleOnOff({
     {
       checked,
       onChange: handleChange,
-      className: clsx(
+      className: clsx.clsx(
         Toggle_module.default.wrapper,
         className,
         checked && !disabled && Toggle_module.default.wrapper__on,
@@ -42,7 +42,7 @@ function ToggleOnOff({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: clsx(
+            className: clsx.clsx(
               Toggle_module.default.label,
               checked ? Toggle_module.default.label__on : Toggle_module.default.label__off
             ),
@@ -52,7 +52,7 @@ function ToggleOnOff({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: clsx(
+            className: clsx.clsx(
               Toggle_module.default.circle,
               checked ? Toggle_module.default.circle__on : Toggle_module.default.circle__off,
               loading && Toggle_module.default.circle__loading

package/dist/cjs/components/Tooltip/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,11 +10,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var tooltip = require('../../ui-kit/styled/tooltip.cjs');
-var index = require('../../styled-system/tokens/index.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 var sva = require('../../styled-system/css/sva.cjs');
+var index = require('../../styled-system/tokens/index.cjs');
+var tooltip = require('../../ui-kit/styled/tooltip.cjs');
 
 const tooltipRecipe = sva.sva({
   className: "tooltip",