no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.2

package/dist/index.js

@@ -3,9 +3,10 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
-var styled = require('@emotion/styled');
 var react = require('@emotion/react');
+var styled = require('@emotion/styled');
 var ReactDOM = require('react-dom');
+var client = require('react-dom/client');
 
 function Accordion(props) {
     const [active, setActive] = React.useState(props.active);
@@ -22,9 +23,12 @@ function Accordion(props) {
         }
     };
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.Children.map(props.children, (child, index) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
             return React.cloneElement(child, {
                 open: active === index,
-                onStepClick: onStepClick(index, child.props.disabled)
+                onStepClick: onStepClick(index, child.props.disabled),
             });
         }) }));
 }
@@ -32,12 +36,44 @@ Accordion.propTypes = {
     /** Currently opened step */
     active: PropTypes.number,
     /** Handler for click event on a step */
-    onStepClick: PropTypes.func
+    onStepClick: PropTypes.func,
 };
 Accordion.defaultProps = {
     active: -1,
 };
 
+function CheckCircle$4(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })] })));
+}
+
+function ExpandMore(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ viewBox: "0 0 24 24", width: "18px", height: "18px", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })] })));
+}
+
+function FiberManualRecord(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M24 24H0V0h24v24z", fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "8" })] })));
+}
+
+function Close(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })] })));
+}
+
+function CheckCircle$3(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })] })));
+}
+
+function CheckCircle$2(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" })] })));
+}
+
+function CheckCircle$1(props) {
+    return (jsxRuntime.jsx("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: jsxRuntime.jsx("path", { d: "M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) })));
+}
+
+function CheckCircle(props) {
+    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor" }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })));
+}
+
 var constants = {
     PRIMARY: '#2283d2',
     PRIMARY_LIGHT: '#64baff',
@@ -65,17 +101,6 @@ var constants = {
     MODAL_SHADOW: '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',
 };
 
-const Card = styled.div `
-    border-radius: 10px;
-    background-color: var(--background, ${constants.BACKGROUND});
-    ${props => props.elevated
-    ? `box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});`
-    : `box-shadow: var(--shadow, ${constants.SHADOW});`}
-    margin: 5px;
-    overflow: auto;
-    position: relative;
-`;
-
 const Ellipsis = styled.span `
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -100,38 +125,6 @@ const Footer$1 = styled.div `
     justify-content: flex-end;
 `;
 
-function CheckCircle$4(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0zm0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })] })));
-}
-
-function ExpandMore(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ viewBox: "0 0 24 24", width: "18px", height: "18px", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })] })));
-}
-
-function FiberManualRecord(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M24 24H0V0h24v24z", fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "8" })] })));
-}
-
-function Close(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })] })));
-}
-
-function CheckCircle$3(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })] })));
-}
-
-function CheckCircle$2(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" })] })));
-}
-
-function CheckCircle$1(props) {
-    return (jsxRuntime.jsx("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: jsxRuntime.jsx("path", { d: "M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) })));
-}
-
-function CheckCircle(props) {
-    return (jsxRuntime.jsxs("svg", Object.assign({ height: "24", viewBox: "0 0 24 24", width: "24", fill: 'currentColor' }, props, { children: [jsxRuntime.jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }), jsxRuntime.jsx("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })));
-}
-
 exports.BADGE_TYPE = void 0;
 (function (BADGE_TYPE) {
     BADGE_TYPE["PRIMARY"] = "primary";
@@ -141,7 +134,7 @@ exports.BADGE_TYPE = void 0;
     BADGE_TYPE["DISABLED"] = "disabled";
 })(exports.BADGE_TYPE || (exports.BADGE_TYPE = {}));
 const BadgeSpan = styled.span `
-    background-color: ${props => {
+    background-color: ${(props) => {
     switch (props.type) {
         case exports.BADGE_TYPE.SUCCESS:
             return `var(--success, ${constants.SUCCESS})`;
@@ -157,14 +150,14 @@ const BadgeSpan = styled.span `
 }};
     color: #fff;
     border-radius: 10px;
-    padding: ${props => props.children ? '3px 10px' : '4px'};
+    padding: ${(props) => (props.children ? '3px 10px' : '4px')};
     display: inline-block;
     min-height: 4px;
     min-width: 4px;
     font-size: 12px;
-    margin: ${props => props.inline ? '0 5px' : '0'};
+    margin: ${(props) => (props.inline ? '0 5px' : '0')};
 
-    ${props => !props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);'};
+    ${(props) => !props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);'};
 `;
 function Badge(props) {
     return jsxRuntime.jsx(BadgeSpan, Object.assign({}, props));
@@ -187,32 +180,48 @@ Badge.defaultProps = {
     type: exports.BADGE_TYPE.PRIMARY,
 };
 
+const Card = styled.div `
+    border-radius: 10px;
+    background-color: var(--background, ${constants.BACKGROUND});
+    ${(props) => props.elevated
+    ? `box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});`
+    : `box-shadow: var(--shadow, ${constants.SHADOW});`}
+    margin: 5px;
+    overflow: auto;
+    position: relative;
+`;
+
 const Step$1 = styled(Card) `
-    transition: all .6s ease;
+    transition: all 0.6s ease;
 
-    ${props => props.open && `
+    ${(props) => props.open &&
+    `
         margin: 20px 5px;
     `}
 
-    ${props => props.focused && `box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});`}
+    ${(props) => props.focused && `box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});`}
 `;
 const StepHeader = styled.div `
     padding: 20px 15px;
     display: flex;
     justify-content: space-between;
-    
+
     & input {
         appearance: none;
         margin: 0;
     }
 
-    ${props => props.open ? `
+    ${(props) => props.open
+    ? `
         border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    ` : ''}
+    `
+    : ''}
 
-    ${props => props.disabled ? `
+    ${(props) => props.disabled
+    ? `
         color: ${constants.LIGHT_GREY};
-    ` : `
+    `
+    : `
         cursor: pointer;
     `}
 `;
@@ -224,13 +233,13 @@ const HeaderContainer = styled.div `
     & svg {
         vertical-align: top;
         margin-right: 10px;
-        fill: ${props => props.open
+        fill: ${(props) => props.open
     ? `var(--primary, ${constants.PRIMARY})`
     : props.completed
         ? `var(--success, ${constants.SUCCESS})`
         : constants.LIGHT_GREY};
-        transform: ${props => props.open ? 'scale(0.8)' : 'scale(0.6)'};
-        transition: all .3s ease;
+        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};
+        transition: all 0.3s ease;
         min-width: 24px;
     }
 `;
@@ -241,20 +250,22 @@ const ExpandContainer = styled.div `
     & svg {
         vertical-align: top;
         margin-right: 10px;
-        transition: all .6s ease;
+        transition: all 0.6s ease;
         fill: currentColor;
     }
 
-    ${props => props.open ? `
+    ${(props) => props.open
+    ? `
         & svg {
             transform: rotate(180deg);
         }
-    ` : ''}
+    `
+    : ''}
 `;
 const StepBody = styled.div `
-    transition: all .6s ease;
+    transition: all 0.6s ease;
     overflow: hidden;
-    height: ${props => props.height || 0}px;
+    height: ${(props) => props.height || 0}px;
 `;
 const AccordionStepBody = styled.div `
     padding: 20px 15px;
@@ -273,7 +284,9 @@ function AccordionStep(props) {
     const toggleFocus = () => {
         setFocused(!focused);
     };
-    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx("input", { type: 'checkbox', checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsxRuntime.jsx(FiberManualRecord, {}), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && jsxRuntime.jsx(Badge, { css: react.css `margin-right: 15px;`, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText }), jsxRuntime.jsx(ExpandMore, {})] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
+    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsxRuntime.jsx(FiberManualRecord, {}), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && (jsxRuntime.jsx(Badge, { css: react.css `
+                                margin-right: 15px;
+                            `, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText })), jsxRuntime.jsx(ExpandMore, {})] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
 }
 AccordionStep.propTypes = {
     /** Header text for the step */
@@ -287,7 +300,7 @@ AccordionStep.propTypes = {
 };
 AccordionStep.defaultProps = {
     completed: false,
-    disabled: false
+    disabled: false,
 };
 
 var Button$2 = styled.button `
@@ -354,7 +367,8 @@ var LinkButton = styled.button `
         margin-left: -6px;
     }
 
-    &:enabled:hover, &:focus {
+    &:enabled:hover,
+    &:focus {
         text-decoration: underline;
     }
 
@@ -560,6 +574,478 @@ function Chip(props) {
     return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 20, width: 20 }) })] })));
 }
 
+exports.ORIENTATION = void 0;
+(function (ORIENTATION) {
+    ORIENTATION["HORIZONTAL"] = "horizontal";
+    ORIENTATION["VERTICAL"] = "vertical";
+})(exports.ORIENTATION || (exports.ORIENTATION = {}));
+const DragContext = React.createContext(null);
+
+/** Styled component for the draggable item container */
+const Item = styled.div `
+    cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};
+    display: flex;
+    user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};
+    border-top: 2px solid
+        ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active > 0
+    ? constants.PRIMARY
+    : 'transparent'};
+    border-bottom: 2px solid
+        ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active < 0
+    ? constants.PRIMARY
+    : 'transparent'};
+    border-left: 2px solid
+        ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active > 0
+    ? constants.PRIMARY
+    : 'transparent'};
+    border-right: 2px solid
+        ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active < 0
+    ? constants.PRIMARY
+    : 'transparent'};
+    opacity: ${(props) => (props.dragging ? 0.5 : 1)};
+`;
+/** Styled component for the drag handle indicator */
+const DragKnob = styled.div `
+    padding-top: 8px;
+    cursor: move;
+    touch-action: none;
+    color: var(--disabled, ${constants.DISABLED});
+`;
+/** Container for the children */
+const Container$7 = styled.div `
+    flex: 1;
+`;
+/**
+ * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragItem
+ *   index={0}
+ *   orientation={ORIENTATION.VERTICAL}
+ *   showIndicator={true}
+ *   dragOver={-1}
+ * >
+ *   <div>Draggable content</div>
+ * </DragItem>
+ * ```
+ *
+ * @param props - The component props
+ * @param props.index - The position index of this item in the draggable list
+ * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)
+ * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable
+ * @param props.dragOver - The index of the item currently being dragged over
+ * @param props.children - The content to be rendered inside the draggable item
+ *
+ * @remarks
+ * - Uses the DragContext to manage drag state across items
+ * - Provides visual feedback with borders during drag operations
+ * - Supports haptic feedback (vibration) on touch devices
+ * - For touch devices, requires a 200ms hold before drag starts
+ * - When showIndicator is true, only the drag handle can initiate drag operations
+ *
+ * @returns A draggable item with optional drag indicator and visual feedback
+ */
+function DragItem(props) {
+    const { index, orientation, children, showIndicator, dragOver } = props;
+    const [active, setActive] = React.useState(0);
+    const [touchTimer, setTouchTimer] = React.useState(null);
+    const context = React.useContext(DragContext);
+    /**
+     * Vibrate the device for haptic feedback
+     * @param duration Duration of the vibration in milliseconds
+     */
+    const vibrate = (duration) => {
+        if (navigator.vibrate) {
+            navigator.vibrate(duration);
+        }
+    };
+    /**
+     * Drag start event handler
+     * @param e Event
+     */
+    const dragStartHandler = () => {
+        context.setStartIndex(index);
+        context.setIsDragging(true);
+    };
+    /**
+     * Drag over event handler
+     * @param e Event
+     */
+    const dragOverHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setActive(context.startIndex - index);
+    };
+    /**
+     * Drag leave event handler
+     */
+    const dragExitHandler = () => {
+        setActive(0);
+    };
+    /**
+     * Drop event handler
+     * @param e Event
+     */
+    const dropHandler = (e) => {
+        e.preventDefault();
+        setActive(0);
+        context.drop(index);
+        context.setIsDragging(false);
+    };
+    /**
+     * Touch start event handler
+     * @param e Event
+     */
+    const touchStartHandler = () => {
+        const timer = setTimeout(() => {
+            context.setStartIndex(index);
+            context.setIsDragging(true);
+            context.setDragOver(index);
+            document.body.style.overflow = 'hidden';
+            vibrate(50);
+        }, 200);
+        setTouchTimer(timer);
+    };
+    /**
+     * Touch move event handler
+     * @param e Event
+     * @returns void
+     */
+    const touchMoveHandler = (e) => {
+        var _a;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        if (context.isDragging) {
+            e.preventDefault();
+            // get the element under the touch point
+            const el = document.elementFromPoint(touch.clientX, touch.clientY);
+            const overAttr = (_a = el === null || el === void 0 ? void 0 : el.closest('[data-drag-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-drag-index');
+            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
+            // if we know which index we're over, update visual state
+            if (overIndex !== null) {
+                context.setDragOver(overIndex);
+            }
+        }
+        else if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
+    };
+    /**
+     * Touch end event handler
+     * @param e Event
+     */
+    const touchEndHandler = () => {
+        if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
+        if (context.isDragging) {
+            context.drop(dragOver);
+            vibrate(50);
+            context.setIsDragging(false);
+            document.body.style.overflow = 'auto';
+        }
+    };
+    /** Cleanup touch timer on unmount */
+    React.useEffect(() => {
+        return () => {
+            if (touchTimer)
+                clearTimeout(touchTimer);
+            document.body.style.overflow = 'auto';
+        };
+    }, [touchTimer]);
+    /** Update active state based on dragOver changes */
+    React.useEffect(() => {
+        if (context.isDragging && dragOver === index) {
+            setActive(context.startIndex - index);
+        }
+        else {
+            setActive(0);
+        }
+    }, [dragOver, context.startIndex, index, context.isDragging]);
+    return (jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && (jsxRuntime.jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: jsxRuntime.jsx(CheckCircle, {}) })), jsxRuntime.jsx(Container$7, { children: children })] }));
+}
+
+/** Container Component */
+const Container$6 = styled.div `
+    flex: 1;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    flex-direction: ${(props) => (props.orientation === exports.ORIENTATION.HORIZONTAL ? 'row' : 'column')};
+`;
+/**
+ * A drag and drop container component that enables reordering of child elements.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragAndDrop
+ *   orientation={ORIENTATION.VERTICAL}
+ *   onDrop={(start, end) => handleReorder(start, end)}
+ *   showIndicator={true}
+ * >
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </DragAndDrop>
+ * ```
+ *
+ * @param {DragAndDropProps} props - The component props
+ * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ *
+ * @returns {JSX.Element} A draggable container with reorderable items
+ */
+function DragAndDrop(props) {
+    const { orientation, children, onDrop, showIndicator } = props;
+    const [startIndex, setStartIndex] = React.useState(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragOver, setDragOver] = React.useState(null);
+    /**
+     * Drop handler invoked when a draggable item is released.
+     * @param index
+     */
+    const drop = (index) => {
+        if (startIndex !== null) {
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index);
+        }
+        setStartIndex(null);
+        setIsDragging(false);
+    };
+    return (jsxRuntime.jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: jsxRuntime.jsx(Container$6, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
+}
+DragAndDrop.defaultProps = {
+    /** Orientation of the list layout */
+    orientation: exports.ORIENTATION.VERTICAL,
+    /** Whether to display drag indicators for each list item */
+    showIndicator: false,
+};
+
+// Label component for the ChipInput
+const Label$6 = styled.label `
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    margin: 10px 5px;
+    color: inherit;
+    padding: 0 8px;
+    width: 250px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    background-color: var(--background, ${constants.BACKGROUND});
+
+    /** Focused */
+    &:has(:focus),
+    &:has(:active) {
+        border-color: var(--primary, ${constants.PRIMARY});
+        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+    }
+
+    &:has(:focus) > span,
+    &:has(:active) > span {
+        color: var(--primary, ${constants.PRIMARY});
+    }
+
+    /** Disabled */
+    &:has(:disabled) {
+        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+    }
+
+    &:has(:disabled) > span {
+        color: #777;
+    }
+
+    /** Invalid */
+    &:has(:focus:invalid) {
+        border-color: var(--error, ${constants.ERROR});
+        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+    }
+
+    ${(props) => props.touched
+    ? `
+        &:has(:invalid) {
+            border-color: var(--error, ${constants.ERROR});
+        }
+    
+        &:has(:invalid) > span {
+            color: var(--error, ${constants.ERROR});
+        }
+        `
+    : ''}
+
+    /** Error */
+    ${(props) => props.errorText
+    ? `
+        border-color: var(--error, ${constants.ERROR});
+
+        & > span {
+            color: var(--error, ${constants.ERROR});
+        }
+        `
+    : ''}
+
+    /** Required */
+    &:has(:required) > span:after {
+        content: '*';
+        margin-left: 2px;
+        color: var(--error, ${constants.ERROR});
+    }
+
+    & > input {
+        border: none;
+        outline: none;
+        width: 100%;
+        line-height: 30px;
+        min-height: 30px;
+    }
+
+    /** Label Animation */
+    & > span {
+        position: absolute;
+        padding: 0 5px;
+        top: 0px;
+        left: 4px;
+        font-size: 14px;
+        line-height: 32px;
+        transition: all 300ms ease;
+    }
+
+    &:has(:focus) > span,
+    &:has(:placeholder-shown) > span {
+        top: -8px;
+        background: var(--background, ${constants.BACKGROUND});
+        font-size: 12px;
+        line-height: 14px;
+    }
+
+    ${(props) => props.text !== ''
+    ? `
+    & > span {
+        top: -8px;
+        background: var(--background, ${constants.BACKGROUND});
+        font-size: 12px;
+        line-height: 14px;
+    }
+    `
+    : ''}
+`;
+// Error message container
+const ErrorContainer$4 = styled.div `
+    color: var(--error, ${constants.ERROR});
+    padding-top: 3px;
+    font-size: 12px;
+    line-height: 14px;
+    margin-left: 3px;
+`;
+/**
+ * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
+ * @component
+ * @example
+ * ```tsx
+ * <ChipInput
+ *   value={['tag1', 'tag2']}
+ *   onChange={(newTags) => console.log(newTags)}
+ *   label="Add tags"
+ *   errorText="At least one tag is required"
+ * />
+ * ```
+ */
+function ChipInput(props) {
+    const [text, setText] = React.useState('');
+    const [touched, setTouched] = React.useState(false);
+    const [value, setValue] = React.useState(props.value);
+    const InputRef = React.useRef(null);
+    // Sync internal value with props.value
+    React.useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    /**
+     * Update the chip values and notify changes.
+     * @param newValue The new array of chip values
+     */
+    const updateValue = (newValue) => {
+        var _a;
+        const deduped = Array.from(new Set(newValue));
+        setValue(deduped);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, deduped);
+    };
+    /**
+     * Marks the input as touched on focus.
+     * @param e React focus event
+     */
+    const handleFocus = (e) => {
+        setTouched(true);
+        if (props.onFocus) {
+            props.onFocus(e);
+        }
+    };
+    /**
+     * Change handler for the input field.
+     * @param e React change event
+     */
+    const handleChange = (e) => {
+        setText(e.target.value);
+    };
+    /**
+     * Adds a new chip on Enter key press.
+     * @param e React keyboard event
+     */
+    const handleKeyUp = (e) => {
+        if (e.key === 'Enter' && text.trim() !== '') {
+            const newValue = [...value, text.trim()];
+            updateValue(newValue);
+            setText('');
+        }
+    };
+    /**
+     * Removes a chip from the list.
+     * @param chipToRemove The chip value to remove
+     */
+    const removeChip = (chipToRemove) => {
+        const newValue = value.filter((chip) => chip !== chipToRemove);
+        updateValue(newValue);
+    };
+    /**
+     * Moves a chip from one position to another.
+     * @param start The starting index of the item to move
+     * @param end The ending index where the item should be placed
+     */
+    const onDrop = (start, end) => {
+        // Clone existing elements
+        const newItems = [...value];
+        // Remove the element to be moved
+        const item = newItems.splice(start, 1);
+        // Add it back at the required position
+        newItems.splice(end, 0, item[0]);
+        // Update
+        updateValue(newItems);
+    };
+    // Render the component
+    return (jsxRuntime.jsxs(Label$6, { text: text, touched: touched, errorText: props.errorText, children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: InputRef, type: "text", value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0 })), jsxRuntime.jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(DragAndDrop, { orientation: exports.ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (jsxRuntime.jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip) }, chip))) })) }), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$4, { children: props.errorText })] }));
+}
+ChipInput.propTypes = {
+    /** Label for the field */
+    label: PropTypes.string.isRequired,
+    /** Error message for the field */
+    errorText: PropTypes.string,
+    /** Values to display as chips */
+    value: PropTypes.arrayOf(PropTypes.string),
+    /** Callback when chips change */
+    onChange: PropTypes.func,
+};
+ChipInput.defaultProps = {
+    value: [],
+};
+
 /** Enums for layer position on screen. */
 var LAYER_POSITION;
 (function (LAYER_POSITION) {
@@ -592,31 +1078,33 @@ const POSITION_STYLE = {
     [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',
 };
 /** Layer container component. */
-const Container$7 = styled.div `
+const Container$5 = styled.div `
     position: fixed;
     display: flex;
     opacity: 0;
-    transition: opacity .3s ease;
-    ${props => POSITION_STYLE[props.position]}
-    ${props => props.overlay && `
+    transition: opacity 0.3s ease;
+    ${(props) => POSITION_STYLE[props.position]}
+    ${(props) => props.overlay &&
+    `
         width: 100%;
         height: 100vh;
         background-color: var(--backdrop-color, #2681da80);
         backdrop-filter: blur(0px);
         pointer-events: all;
     `}
-    z-index: ${props => props.zIndex};
+    z-index: ${(props) => props.zIndex};
 
     .nf-layer-enter & {
         opacity: 1;
-        ${props => props.overlay && `
+        ${(props) => props.overlay &&
+    `
             backdrop-filter: blur(3px);
         `}
     }
 `;
 /** Key code for different keys. */
 const KEY_CODES$1 = {
-    ESC: 27
+    ESC: 27,
 };
 /**
  * This is a shared helper class which manages the z-index of each layer.
@@ -649,10 +1137,11 @@ class LayerManager {
          */
         this.unmount = (layer, resp) => {
             layer.element.setAttribute('class', 'nf-layer-exit');
-            this.layers.splice(this.layers.findIndex(item => item === layer), 1);
+            this.layers.splice(this.layers.findIndex((item) => item === layer), 1);
             setTimeout(() => {
+                var _a, _b;
                 try {
-                    layer.config.closeCallback && layer.config.closeCallback(resp);
+                    (_b = (_a = layer.config).closeCallback) === null || _b === void 0 ? void 0 : _b.call(_a, resp);
                 }
                 catch (e) {
                     // Error in callback function. Ignore and proceed.
@@ -677,11 +1166,13 @@ class LayerManager {
             const currentLayer = {
                 id: `nf-layer-manager-${currentIndex}`,
                 config: layerConfig,
-                element: divElement
+                element: divElement,
             };
             this.layers.push(currentLayer);
             const overlayClickHandler = (layer) => () => {
-                layer.config.closeOnOverlayClick !== false && this.unmount(layer);
+                if (layer.config.closeOnOverlayClick !== false) {
+                    this.unmount(layer);
+                }
             };
             // Return callback which will trigger the un-mount.
             return [
@@ -701,14 +1192,14 @@ class LayerManager {
                             document.body.removeChild(divElement);
                         };
                     }, []);
-                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$7, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
+                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$5, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
                 },
                 (resp) => {
                     this.unmount(currentLayer, resp);
-                }
+                },
             ];
         };
-        document.body.addEventListener('keyup', (e) => {
+        document === null || document === void 0 ? void 0 : document.body.addEventListener('keyup', (e) => {
             if (this.layers.length && e.keyCode === KEY_CODES$1.ESC) {
                 const lastLayer = this.layers.slice(-1)[0];
                 if (lastLayer.config.closeOnEsc !== false) {
@@ -726,7 +1217,7 @@ const DialogContainer = styled(Card) `
     max-height: 80vh;
     transform: scale(0);
     opacity: 0;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     .nf-layer-enter & {
         opacity: 1;
@@ -751,13 +1242,15 @@ class Dialog extends React.Component {
             this.onCloseFn = closeCallback;
         };
         this.close = (resp) => {
-            this.closeDialog && this.closeDialog(resp);
+            var _a;
+            (_a = this.closeDialog) === null || _a === void 0 ? void 0 : _a.call(this, resp);
         };
         this.closeCallback = (resp) => {
+            var _a;
             this.setState({
                 show: false,
             });
-            this.onCloseFn && this.onCloseFn(resp);
+            (_a = this.onCloseFn) === null || _a === void 0 ? void 0 : _a.call(this, resp);
         };
     }
     shouldComponentUpdate(nextProps, nextState) {
@@ -773,7 +1266,7 @@ class Dialog extends React.Component {
                 closeCallback: this.closeCallback,
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
             });
             this.closeDialog = closeFn;
             return jsxRuntime.jsx(Component, {});
@@ -799,7 +1292,7 @@ class AlertDialog extends React.Component {
         super(...arguments);
         this.dialog = React.createRef();
         this.show = () => {
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 const onClose = () => resolve(null);
                 this.dialog.current.open(onClose);
             });
@@ -821,7 +1314,7 @@ AlertDialog.propTypes = {
     dialogProps: PropTypes.object,
 };
 AlertDialog.defaultProps = {
-    buttonText: 'OK'
+    buttonText: 'OK',
 };
 
 class ConfirmDialog extends React.Component {
@@ -831,7 +1324,12 @@ class ConfirmDialog extends React.Component {
         this.show = () => {
             return new Promise((resolve, reject) => {
                 const onClose = (resp) => {
-                    resp ? resolve(null) : reject();
+                    if (resp) {
+                        resolve(null);
+                    }
+                    else {
+                        reject();
+                    }
                 };
                 this.dialog.current.open(onClose);
             });
@@ -858,7 +1356,7 @@ ConfirmDialog.propTypes = {
 };
 ConfirmDialog.defaultProps = {
     yesText: 'Yes',
-    noText: 'No'
+    noText: 'No',
 };
 
 const Label$5 = styled.label `
@@ -881,12 +1379,14 @@ const TextField$1 = styled.input `
     background-color: var(--background, ${constants.BACKGROUND});
 
     /** Focused */
-    &:focus, &:active {
+    &:focus,
+    &:active {
         border-color: var(--primary, ${constants.PRIMARY});
         box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
     }
 
-    &:focus + span, &:active + span {
+    &:focus + span,
+    &:active + span {
         color: var(--primary, ${constants.PRIMARY});
     }
 
@@ -895,7 +1395,7 @@ const TextField$1 = styled.input `
         border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
         background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
     }
-    
+
     &:disabled + span {
         color: #777;
     }
@@ -906,7 +1406,8 @@ const TextField$1 = styled.input `
         box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
     }
 
-    ${props => props.touched ? `
+    ${(props) => props.touched
+    ? `
     &:invalid {
         border-color: var(--error, ${constants.ERROR});
     }
@@ -914,16 +1415,19 @@ const TextField$1 = styled.input `
     &:invalid + span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Error */
-    ${props => props.errorText ? `
+    ${(props) => props.errorText
+    ? `
     border-color: var(--error, ${constants.ERROR});
 
     & + span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Required */
     &:required + span:after {
@@ -943,14 +1447,16 @@ const TextField$1 = styled.input `
         transition: all 300ms ease;
     }
 
-    ${props => props.value !== '' ? `
+    ${(props) => props.value !== ''
+    ? `
     & + span {
         top: -8px;
         background: var(--background, ${constants.BACKGROUND});
         font-size: 12px;
         line-height: 14px;
     }
-    ` : ''}
+    `
+    : ''}
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
@@ -963,7 +1469,7 @@ const ErrorContainer$3 = styled.div `
     color: var(--error, ${constants.ERROR});
     padding-top: 3px;
     font-size: 12px;
-        line-height: 14px;
+    line-height: 14px;
     margin-left: 3px;
 `;
 const Input$4 = React.forwardRef((props, ref) => {
@@ -986,6 +1492,7 @@ const Input$4 = React.forwardRef((props, ref) => {
     };
     return (jsxRuntime.jsxs(Label$5, { children: [jsxRuntime.jsx(TextField$1, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$3, { children: props.errorText })] }));
 });
+Input$4.displayName = 'Input';
 Input$4.propTypes = {
     /** Label for the field */
     label: PropTypes.string,
@@ -1012,12 +1519,14 @@ const TextField = styled.textarea `
     background-color: var(--background, ${constants.BACKGROUND});
 
     /** Focused */
-    &:focus, &:active {
+    &:focus,
+    &:active {
         border-color: var(--primary, ${constants.PRIMARY});
         box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
     }
 
-    &:focus + span, &:active + span {
+    &:focus + span,
+    &:active + span {
         color: var(--primary, ${constants.PRIMARY});
     }
 
@@ -1026,7 +1535,7 @@ const TextField = styled.textarea `
         border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
         background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
     }
-    
+
     &:disabled + span {
         color: var(--disabled, ${constants.DISABLED});
     }
@@ -1037,7 +1546,8 @@ const TextField = styled.textarea `
         box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
     }
 
-    ${props => props.touched ? `
+    ${(props) => props.touched
+    ? `
     &:invalid {
         border-color: var(--error, ${constants.ERROR});
     }
@@ -1045,16 +1555,19 @@ const TextField = styled.textarea `
     &:invalid + span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Error */
-    ${props => props.errorText ? `
+    ${(props) => props.errorText
+    ? `
     border-color: var(--error, ${constants.ERROR});
 
     & + span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Required */
     &:required + span:after {
@@ -1074,14 +1587,16 @@ const TextField = styled.textarea `
         transition: all 300ms ease;
     }
 
-    ${props => props.value !== '' ? `
+    ${(props) => props.value !== ''
+    ? `
     & + span {
         top: -8px;
         background: var(--background, ${constants.BACKGROUND});
         font-size: 12px;
         line-height: 14px;
     }
-    ` : ''}
+    `
+    : ''}
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
@@ -1152,12 +1667,14 @@ const SelectField = styled.select `
     appearance: none;
 
     /** Focused */
-    &:focus, &:active {
+    &:focus,
+    &:active {
         border-color: var(--primary, ${constants.PRIMARY});
         box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
     }
 
-    &:focus ~ span, &:active ~ span {
+    &:focus ~ span,
+    &:active ~ span {
         color: var(--primary, ${constants.PRIMARY});
     }
 
@@ -1166,7 +1683,7 @@ const SelectField = styled.select `
         border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
         background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
     }
-    
+
     &:disabled ~ span {
         color: var(--disabled, ${constants.DISABLED});
     }
@@ -1177,7 +1694,8 @@ const SelectField = styled.select `
         box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
     }
 
-    ${props => props.touched ? `
+    ${(props) => props.touched
+    ? `
     &:invalid {
         border-color: var(--error, ${constants.ERROR});
     }
@@ -1185,16 +1703,19 @@ const SelectField = styled.select `
     &:invalid ~ span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Error */
-    ${props => props.errorText ? `
+    ${(props) => props.errorText
+    ? `
     border-color: var(--error, ${constants.ERROR});
 
     & ~ span {
         color: var(--error, ${constants.ERROR});
     }
-    ` : ''}
+    `
+    : ''}
 
     /** Required */
     &:required + span:after {
@@ -1214,14 +1735,16 @@ const SelectField = styled.select `
         transition: all 300ms ease;
     }
 
-    ${props => props.value !== '' ? `
+    ${(props) => props.value !== ''
+    ? `
     & + span {
         top: -8px;
         background: var(--background, ${constants.BACKGROUND});
         font-size: 12px;
         line-height: 14px;
     }
-    ` : ''}
+    `
+    : ''}
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
@@ -1290,7 +1813,7 @@ const Input$3 = styled.input `
         text-align: center;
         line-height: 16px;
         background-color: var(--background, ${constants.BACKGROUND});
-        transition: background-color .3s ease;
+        transition: background-color 0.3s ease;
     }
 
     &::after {
@@ -1301,7 +1824,7 @@ const Input$3 = styled.input `
         border-bottom: 2px solid #fff;
         transform: translate(-16px, 1px);
         opacity: 0;
-        transition: transform .3s ease;
+        transition: transform 0.3s ease;
         position: absolute;
     }
 
@@ -1333,12 +1856,14 @@ const Input$3 = styled.input `
     }
 
     /** active and focus */
-    &:enabled:active::before, &:focus::before {
+    &:enabled:active::before,
+    &:focus::before {
         border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}); 
+        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
     }
 
-    &:enabled:active + span, &:focus + span {
+    &:enabled:active + span,
+    &:focus + span {
         color: var(--primary, ${constants.PRIMARY});
     }
 
@@ -1360,7 +1885,8 @@ const Input$3 = styled.input `
         color: #aaa;
     }
 
-    &:checked:disabled::before, &:indeterminate:disabled::before {
+    &:checked:disabled::before,
+    &:indeterminate:disabled::before {
         background-color: #aaa;
     }
 `;
@@ -1371,7 +1897,7 @@ function Checkbox(props) {
                 node.indeterminate = true;
             }
         }
-    }, []);
+    }, [props.indeterminate]);
     return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox" })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Checkbox.propTypes = {
@@ -1382,7 +1908,7 @@ Checkbox.propTypes = {
 };
 Checkbox.defaultProps = {
     indeterminate: false,
-    label: ''
+    label: '',
 };
 
 const Switch = styled.label `
@@ -1400,14 +1926,14 @@ const Input$2 = styled.input `
         width: 30px;
         height: 18px;
         background-color: ${constants.LIGHT_GREY};
-        transition: .4s;
+        transition: 0.4s;
         border-radius: 10px;
         padding: 0 3px;
         margin: 0 10px 0 5px;
     }
     & + span:before {
         position: absolute;
-        content: "";
+        content: '';
         height: 14px;
         width: 14px;
         left: 1px;
@@ -1415,7 +1941,7 @@ const Input$2 = styled.input `
         border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
         border-radius: 50%;
         background-color: var(--background, ${constants.BACKGROUND});
-        transition: .4s;
+        transition: 0.4s;
     }
 
     /* checked */
@@ -1449,14 +1975,14 @@ const Input$2 = styled.input `
         background-color: ${constants.LIGHT_GREY};
         cursor: not-allowed;
     }
-    
+
     &:disabled + span:before {
         background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
         border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
     }
 `;
 function Toggle(props) {
-    return (jsxRuntime.jsxs(Switch, { children: [jsxRuntime.jsx(Input$2, Object.assign({}, props, { type: 'checkbox' })), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Switch, { children: [jsxRuntime.jsx(Input$2, Object.assign({}, props, { type: "checkbox" })), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Toggle.propTypes = {
     /** Label for the field */
@@ -1480,7 +2006,7 @@ const Input$1 = styled.input `
         border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
         border-radius: 50%;
         display: block;
-        transition: background-color .3s ease;
+        transition: background-color 0.3s ease;
     }
 
     /* checked */
@@ -1499,7 +2025,8 @@ const Input$1 = styled.input `
 
     &:enabled:checked:focus::before {
         border: 1px solid var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),
+        box-shadow:
+            0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),
             inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
         cursor: pointer;
     }
@@ -1532,7 +2059,7 @@ const Input$1 = styled.input `
     }
 `;
 function Radio(props) {
-    return (jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Input$1, Object.assign({}, props, { type: 'radio' })), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$1, { children: [jsxRuntime.jsx(Input$1, Object.assign({}, props, { type: "radio" })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Radio.propTypes = {
     /** Label for the field */
@@ -1600,7 +2127,7 @@ const RadioGroup = styled.div `
     }
 `;
 function RadioButton(props) {
-    return (jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Input, Object.assign({}, props, { type: 'radio' })), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Input, Object.assign({}, props, { type: "radio" })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 RadioButton.propTypes = {
     /** Label for the field */
@@ -1626,7 +2153,7 @@ const Menu = React.forwardRef(function (props, ref) {
         if (multiSelect) {
             if (Array.isArray(value)) {
                 if (value.includes(val)) {
-                    newVal = value.filter(item => item !== val);
+                    newVal = value.filter((item) => item !== val);
                 }
                 else {
                     newVal = [...value, val];
@@ -1642,15 +2169,16 @@ const Menu = React.forwardRef(function (props, ref) {
     return (jsxRuntime.jsx(MenuContext.Provider, { value: {
             value,
             multiSelect,
-            updateValue
+            updateValue,
         }, children: jsxRuntime.jsx(MenuContainer, { ref: ref, children: props.children }) }));
 });
+Menu.displayName = 'Menu';
 Menu.defaultProps = {
     multiSelect: false,
 };
 
-const Container$6 = styled.button `
-    font-weight: ${props => props.selected ? 'bold' : 'normal'};
+const Container$4 = styled.button `
+    font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};
     padding: 8px 6px;
     border: none;
     background-color: transparent;
@@ -1662,7 +2190,9 @@ const Container$6 = styled.button `
     cursor: pointer;
     position: relative;
 
-    &:hover, &:focus, &:focus-within {
+    &:hover,
+    &:focus,
+    &:focus-within {
         background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
     }
 
@@ -1681,8 +2211,10 @@ function MenuItem(props) {
         }
         context.updateValue(value);
     };
-    const selected = context.multiSelect ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value) : context.value === value;
-    return (jsxRuntime.jsxs(Container$6, Object.assign({}, rest, { type: 'button', tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && jsxRuntime.jsx(Checkbox, { checked: selected }), props.children] })));
+    const selected = context.multiSelect
+        ? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value)
+        : context.value === value;
+    return (jsxRuntime.jsxs(Container$4, Object.assign({}, rest, { type: "button", tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && jsxRuntime.jsx(Checkbox, { checked: selected }), children] })));
 }
 
 exports.POPOVER_POSITION = void 0;
@@ -1708,7 +2240,7 @@ const positionMap$2 = {
     [exports.POPOVER_POSITION.BOTTOM_LEFT]: `
         top: calc(100% - 10px);
         left: 0;
-    `
+    `,
 };
 const PopoverDiv = styled.div `
     position: relative;
@@ -1719,17 +2251,17 @@ const Popper = styled(Card) `
     width: 100%;
     min-width: 200px;
     overflow: auto;
-    animation: enter .3s linear;
+    animation: enter 0.3s linear;
     border-radius: 3px;
     z-index: 1;
-    transform: translate(${props => props.translateX}px, ${props => props.translateY}px);
-    ${props => positionMap$2[props.position]}
+    transform: translate(${(props) => props.translateX}px, ${(props) => props.translateY}px);
+    ${(props) => positionMap$2[props.position]}
 
     &.closing {
         /* max-height: 0px;
         opacity: 0;
         overflow: hidden; */
-        animation: exit .3s linear;
+        animation: exit 0.3s linear;
     }
 
     @keyframes enter {
@@ -1759,7 +2291,7 @@ const Popper = styled(Card) `
     }
 `;
 const KEY_CODES = {
-    ESC: 27
+    ESC: 27,
 };
 function Popover(props) {
     const [open, setOpen] = React.useState(props.open);
@@ -1767,7 +2299,7 @@ function Popover(props) {
     const [translate, setTranslate] = React.useState({ x: 0, y: 0 });
     const popperRef = React.useRef();
     const containerRef = React.useRef();
-    const close = () => {
+    const close = React.useCallback(() => {
         setClosing(true);
         setTimeout(() => {
             setOpen(false);
@@ -1777,17 +2309,17 @@ function Popover(props) {
             }
             setClosing(false);
         }, 280);
-    };
-    const keyupEventHandler = (e) => {
+    }, [props]);
+    const keyupEventHandler = React.useCallback((e) => {
         if (props.closeOnEsc && e.keyCode === KEY_CODES.ESC) {
             close();
         }
-    };
-    const clickOutsideHandler = (e) => {
+    }, [close, props.closeOnEsc]);
+    const clickOutsideHandler = React.useCallback((e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
             close();
         }
-    };
+    }, [close]);
     /**
      * Get called on popover mount.
      */
@@ -1797,7 +2329,7 @@ function Popover(props) {
             document.removeEventListener('keyup', keyupEventHandler);
             document.removeEventListener('click', clickOutsideHandler);
         };
-    }, []);
+    }, [clickOutsideHandler, close, keyupEventHandler]);
     React.useEffect(() => {
         if (props.open) {
             setOpen(true);
@@ -1814,7 +2346,7 @@ function Popover(props) {
         return () => {
             document.removeEventListener('click', clickOutsideHandler);
         };
-    }, [props.open]);
+    }, [props.open, open, clickOutsideHandler, close]);
     React.useEffect(() => {
         if (open) {
             const { top, left, right } = popperRef.current.getBoundingClientRect();
@@ -1863,8 +2395,11 @@ function Popover(props) {
             setTranslate(translation);
             popperRef.current.focus();
         }
-    }, [open]);
-    return (jsxRuntime.jsxs(PopoverDiv, { ref: containerRef, children: [jsxRuntime.jsx(props.element, {}), open && (jsxRuntime.jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: e => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }, children: props.children }))] }));
+    }, [open, props.position]);
+    return (jsxRuntime.jsxs(PopoverDiv, { ref: containerRef, children: [jsxRuntime.jsx(props.element, {}), open && (jsxRuntime.jsx(Popper, { elevated: true, tabIndex: 0, position: props.position, translateX: translate.x, translateY: translate.y, className: closing && 'closing', ref: popperRef, onClick: (e) => {
+                    e.stopPropagation();
+                    e.nativeEvent.stopImmediatePropagation();
+                }, children: props.children }))] }));
 }
 Popover.propTypes = {
     /** Opens the popover */
@@ -1898,30 +2433,30 @@ function Dropdown(props) {
     const { multiSelect, onChange } = props;
     const [open, setOpen] = React.useState(false);
     const [value, setValue] = React.useState(props.value);
-    const focusHandler = (e) => {
-        var _a, _b;
-        if (open && (e.keyCode === 38 || e.keyCode === 40)) {
-            e.preventDefault();
-            const current = document.querySelector(':focus');
-            if (current.tagName === "DIV") {
-                const firstBtn = current.querySelector('button');
-                firstBtn === null || firstBtn === void 0 ? void 0 : firstBtn.focus();
-            }
-            else {
-                const currentBtn = current.closest('button');
-                if (e.keyCode === 38) {
-                    const prev = (_a = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.previousElementSibling) === null || _a === void 0 ? void 0 : _a.closest('button');
-                    prev === null || prev === void 0 ? void 0 : prev.focus();
+    React.useEffect(() => {
+        const focusHandler = (e) => {
+            var _a, _b;
+            if (open && (e.keyCode === 38 || e.keyCode === 40)) {
+                e.preventDefault();
+                const current = document.querySelector(':focus');
+                if (current.tagName === 'DIV') {
+                    const firstBtn = current.querySelector('button');
+                    firstBtn === null || firstBtn === void 0 ? void 0 : firstBtn.focus();
                 }
                 else {
-                    const next = (_b = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.nextElementSibling) === null || _b === void 0 ? void 0 : _b.closest('button');
-                    next === null || next === void 0 ? void 0 : next.focus();
+                    const currentBtn = current.closest('button');
+                    if (e.keyCode === 38) {
+                        const prev = (_a = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.previousElementSibling) === null || _a === void 0 ? void 0 : _a.closest('button');
+                        prev === null || prev === void 0 ? void 0 : prev.focus();
+                    }
+                    else {
+                        const next = (_b = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.nextElementSibling) === null || _b === void 0 ? void 0 : _b.closest('button');
+                        next === null || next === void 0 ? void 0 : next.focus();
+                    }
                 }
+                return false;
             }
-            return false;
-        }
-    };
-    React.useEffect(() => {
+        };
         document.addEventListener('keydown', focusHandler);
         return () => {
             document.removeEventListener('keydown', focusHandler);
@@ -1941,7 +2476,7 @@ function Dropdown(props) {
             setOpen(false);
         }
     };
-    return (jsxRuntime.jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$4, { type: 'text', value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: jsxRuntime.jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
+    return (jsxRuntime.jsx(Popover, { position: exports.POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$4, { type: "text", value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: jsxRuntime.jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
 }
 Dropdown.defaultProps = {
     multiSelect: false,
@@ -1986,7 +2521,7 @@ class PromptDialog extends React.Component {
     }
     render() {
         const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
-        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange, autoFocus: true }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { type: 'button', onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
+        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { type: "button", onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
     }
 }
 PromptDialog.propTypes = {
@@ -2011,250 +2546,6 @@ PromptDialog.defaultProps = {
     defaultValue: '',
 };
 
-exports.ORIENTATION = void 0;
-(function (ORIENTATION) {
-    ORIENTATION["HORIZONTAL"] = "horizontal";
-    ORIENTATION["VERTICAL"] = "vertical";
-})(exports.ORIENTATION || (exports.ORIENTATION = {}));
-const DragContext = React.createContext(null);
-
-/** Styled component for the draggable item container */
-const Item = styled.div `
-    cursor: ${props => props.showIndicator ? 'default' : 'move'};
-    display: flex;
-    user-select: ${props => props.showIndicator ? 'auto' : 'none'};
-    border-top: 2px solid ${props => props.orientation === exports.ORIENTATION.VERTICAL && props.active > 0
-    ? constants.PRIMARY : 'transparent'};
-    border-bottom: 2px solid ${props => props.orientation === exports.ORIENTATION.VERTICAL && props.active < 0
-    ? constants.PRIMARY : 'transparent'};
-    border-left: 2px solid ${props => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active > 0
-    ? constants.PRIMARY : 'transparent'};
-    border-right: 2px solid ${props => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active < 0
-    ? constants.PRIMARY : 'transparent'};
-    opacity: ${props => props.dragging ? 0.5 : 1};
-`;
-/** Styled component for the drag handle indicator */
-const DragKnob = styled.div `
-    padding-top: 8px;
-    cursor: move;
-    touch-action: none;
-    color: var(--disabled, ${constants.DISABLED});
-`;
-/** Container for the children */
-const Container$5 = styled.div `
-    flex: 1;
-`;
-/**
- * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
- *
- * @component
- * @example
- * ```tsx
- * <DragItem
- *   index={0}
- *   orientation={ORIENTATION.VERTICAL}
- *   showIndicator={true}
- *   dragOver={-1}
- * >
- *   <div>Draggable content</div>
- * </DragItem>
- * ```
- *
- * @param props - The component props
- * @param props.index - The position index of this item in the draggable list
- * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)
- * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable
- * @param props.dragOver - The index of the item currently being dragged over
- * @param props.children - The content to be rendered inside the draggable item
- *
- * @remarks
- * - Uses the DragContext to manage drag state across items
- * - Provides visual feedback with borders during drag operations
- * - Supports haptic feedback (vibration) on touch devices
- * - For touch devices, requires a 200ms hold before drag starts
- * - When showIndicator is true, only the drag handle can initiate drag operations
- *
- * @returns A draggable item with optional drag indicator and visual feedback
- */
-function DragItem(props) {
-    const { index, orientation, children, showIndicator, dragOver } = props;
-    const [active, setActive] = React.useState(0);
-    const [touchTimer, setTouchTimer] = React.useState(null);
-    const context = React.useContext(DragContext);
-    /**
-     * Vibrate the device for haptic feedback
-     * @param duration Duration of the vibration in milliseconds
-     */
-    const vibrate = (duration) => {
-        if (navigator.vibrate) {
-            navigator.vibrate(duration);
-        }
-    };
-    /**
-     * Drag start event handler
-     * @param e Event
-     */
-    const dragStartHandler = (e) => {
-        context.setStartIndex(index);
-        context.setIsDragging(true);
-    };
-    /**
-     * Drag over event handler
-     * @param e Event
-     */
-    const dragOverHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setActive(context.startIndex - index);
-    };
-    /**
-     * Drag leave event handler
-     */
-    const dragExitHandler = () => {
-        setActive(0);
-    };
-    /**
-     * Drop event handler
-     * @param e Event
-     */
-    const dropHandler = (e) => {
-        e.preventDefault();
-        setActive(0);
-        context.drop(index);
-        context.setIsDragging(false);
-    };
-    /**
-     * Touch start event handler
-     * @param e Event
-     */
-    const touchStartHandler = (e) => {
-        const timer = setTimeout(() => {
-            context.setStartIndex(index);
-            context.setIsDragging(true);
-            context.setDragOver(index);
-            document.body.style.overflow = 'hidden';
-            vibrate(50);
-        }, 200);
-        setTouchTimer(timer);
-    };
-    /**
-     * Touch move event handler
-     * @param e Event
-     * @returns void
-     */
-    const touchMoveHandler = (e) => {
-        var _a;
-        const touch = e.touches[0];
-        if (!touch)
-            return;
-        if (context.isDragging) {
-            e.preventDefault();
-            // get the element under the touch point
-            const el = document.elementFromPoint(touch.clientX, touch.clientY);
-            const overAttr = (_a = el === null || el === void 0 ? void 0 : el.closest('[data-drag-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-drag-index');
-            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
-            // if we know which index we're over, update visual state
-            if (overIndex !== null) {
-                context.setDragOver(overIndex);
-            }
-        }
-        else if (touchTimer) {
-            clearTimeout(touchTimer);
-            setTouchTimer(null);
-        }
-    };
-    /**
-     * Touch end event handler
-     * @param e Event
-     */
-    const touchEndHandler = (e) => {
-        if (touchTimer) {
-            clearTimeout(touchTimer);
-            setTouchTimer(null);
-        }
-        if (context.isDragging) {
-            context.drop(dragOver);
-            vibrate(50);
-            context.setIsDragging(false);
-            document.body.style.overflow = 'auto';
-        }
-    };
-    /** Cleanup touch timer on unmount */
-    React.useEffect(() => {
-        return () => {
-            if (touchTimer)
-                clearTimeout(touchTimer);
-            document.body.style.overflow = 'auto';
-        };
-    }, [touchTimer]);
-    /** Update active state based on dragOver changes */
-    React.useEffect(() => {
-        if (context.isDragging && dragOver === index) {
-            setActive(context.startIndex - index);
-        }
-        else {
-            setActive(0);
-        }
-    }, [dragOver, context.startIndex, index, context.isDragging]);
-    return jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && jsxRuntime.jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: jsxRuntime.jsx(CheckCircle, {}) }), jsxRuntime.jsx(Container$5, { children: children })] });
-}
-
-/** Container Component */
-const Container$4 = styled.div `
-    flex: 1;
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    flex-direction: ${props => props.orientation === exports.ORIENTATION.HORIZONTAL ? 'row' : 'column'};
-`;
-/**
- * A drag and drop container component that enables reordering of child elements.
- *
- * @component
- * @example
- * ```tsx
- * <DragAndDrop
- *   orientation={ORIENTATION.VERTICAL}
- *   onDrop={(start, end) => handleReorder(start, end)}
- *   showIndicator={true}
- * >
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </DragAndDrop>
- * ```
- *
- * @param {DragAndDropProps} props - The component props
- * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
- * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
- * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
- * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
- *
- * @returns {JSX.Element} A draggable container with reorderable items
- */
-function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator } = props;
-    const [startIndex, setStartIndex] = React.useState(null);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [dragOver, setDragOver] = React.useState(null);
-    /**
-     * Drop handler invoked when a draggable item is released.
-     * @param index
-     */
-    const drop = (index) => {
-        startIndex !== null && (onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index));
-        setStartIndex(null);
-        setIsDragging(false);
-    };
-    return (jsxRuntime.jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: jsxRuntime.jsx(Container$4, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
-}
-DragAndDrop.defaultProps = {
-    /** Orientation of the list layout */
-    orientation: exports.ORIENTATION.VERTICAL,
-    /** Whether to display drag indicators for each list item */
-    showIndicator: false,
-};
-
 exports.DRAWER_POSITION = void 0;
 (function (DRAWER_POSITION) {
     DRAWER_POSITION["LEFT"] = "LEFT";
@@ -2286,13 +2577,13 @@ const DrawerDiv = styled.div `
     display: flex;
     flex-direction: column;
     background-color: #fff;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});
-    ${props => positionStyle$1(props.size)[props.position].before}
+    ${(props) => positionStyle$1(props.size)[props.position].before}
 
     .nf-layer-enter & {
         transform: translateX(0%);
-        ${props => positionStyle$1(props.size)[props.position].after}
+        ${(props) => positionStyle$1(props.size)[props.position].after}
     }
 `;
 const positionMap$1 = {
@@ -2307,10 +2598,11 @@ class Drawer extends React.Component {
             open: false,
         };
         this.onClose = () => {
+            var _a, _b;
             this.setState({
                 open: false,
             });
-            this.props.onClose && this.props.onClose();
+            (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.closeCallback = null;
             this.layer = null;
         };
@@ -2324,9 +2616,10 @@ class Drawer extends React.Component {
         return null;
     }
     getSnapshotBeforeUpdate(prevProps) {
-        const _a = this.props, { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size } = _a, rest = __rest(_a, ["open", "closeOnEsc", "closeOnOverlayClick", "overlay", "position", "children", "size"]);
+        var _a;
+        const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "overlay", "position", "children", "size"]);
         if (prevProps.open && !open) {
-            this.closeCallback && this.closeCallback();
+            (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         if (!prevProps.open && open) {
             this.layer = LayerManager$1.renderLayer({
@@ -2336,7 +2629,7 @@ class Drawer extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (jsxRuntime.jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: e => e.stopPropagation(), children: children })))
+                component: (jsxRuntime.jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: (e) => e.stopPropagation(), children: children }))),
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
@@ -2384,7 +2677,8 @@ const Container$3 = styled.div `
     margin: 5px;
 
     /* overrides */
-    & button, & label {
+    & button,
+    & label {
         margin: 0;
         border: none;
         border-radius: 0;
@@ -2397,16 +2691,19 @@ const Container$3 = styled.div `
         border-left: none;
     }
 
-    & input, & select {
+    & input,
+    & select {
         border: none;
         height: 32px;
     }
 
-    & input, & select {
+    & input,
+    & select {
         border-radius: 0;
     }
 
-    & input:active, & select:active {
+    & input:active,
+    & select:active {
         box-shadow: none;
     }
 
@@ -2415,35 +2712,43 @@ const Container$3 = styled.div `
     }
 
     /* Handling for first and last child */
-    & > *:first-child, & > label:first-child input,
-    & > label:first-child select, & > *:first-child label,
-    & > *:first-child input  {
+    & > *:first-child,
+    & > label:first-child input,
+    & > label:first-child select,
+    & > *:first-child label,
+    & > *:first-child input {
         border-left: none;
-        border-radius: 2px 0 0  2px;
+        border-radius: 2px 0 0 2px;
     }
 
-    & > *:last-child, & > label:last-child input,
-    & > label:last-child select, & > *:last-child label,
+    & > *:last-child,
+    & > label:last-child input,
+    & > label:last-child select,
+    & > *:last-child label,
     & > *:last-child input {
         border-radius: 0 2px 2px 0;
     }
 
     /* focus */
-    & *:focus, & *:focus + span {
+    & *:focus,
+    & *:focus + span {
         z-index: 1;
     }
 
-    &:focus-within, &:hover {
+    &:focus-within,
+    &:hover {
         box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
     }
 
-    ${props => props.errorText ? `
+    ${(props) => props.errorText
+    ? `
         border-color: var(--error, ${constants.ERROR});
 
         & > button, & > label {
             border-color: var(--error, ${constants.ERROR});
         }
-    ` : ''}
+    `
+    : ''}
 `;
 const ErrorContainer = styled.div `
     color: var(--error, ${constants.ERROR});
@@ -2482,10 +2787,11 @@ class Modal extends React.Component {
             open: false,
         };
         this.onClose = () => {
+            var _a, _b;
             this.setState({
                 open: false,
             });
-            this.props.onClose && this.props.onClose();
+            (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.closeCallback = null;
             this.layer = null;
         };
@@ -2499,9 +2805,10 @@ class Modal extends React.Component {
         return null;
     }
     getSnapshotBeforeUpdate(prevProps) {
-        const _a = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
+        var _a;
+        const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
         if (prevProps.open && !open) {
-            this.closeCallback && this.closeCallback();
+            (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         if (!prevProps.open && open) {
             this.layer = LayerManager$1.renderLayer({
@@ -2511,7 +2818,7 @@ class Modal extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc: closeOnEsc,
                 closeOnOverlayClick: closeOnOverlayClick,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
@@ -2613,18 +2920,20 @@ const getTypeStyle = (type) => {
 };
 const Container$2 = styled.div `
     display: flex;
-    flex-direction: ${props => (props.position === exports.NOTIFICATION_POSITION.TOP_LEFT ||
-    props.position === exports.NOTIFICATION_POSITION.TOP_RIGHT) ? 'column' : 'column-reverse'};
+    flex-direction: ${(props) => props.position === exports.NOTIFICATION_POSITION.TOP_LEFT ||
+    props.position === exports.NOTIFICATION_POSITION.TOP_RIGHT
+    ? 'column'
+    : 'column-reverse'};
 `;
 const Notice = styled(Card) `
     border-radius: 3px;
-    border-left: 4px solid ${props => getBorderColor(props.type)};
+    border-left: 4px solid ${(props) => getBorderColor(props.type)};
     width: 300px;
     display: flex;
     padding: 0 5px 5px 0;
     overflow: hidden;
-    animation: ${props => getEntryAnimation(props.position)} .6s ease;
-    
+    animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;
+
     & svg {
         fill: currentColor;
         vertical-align: middle;
@@ -2633,7 +2942,7 @@ const Notice = styled(Card) `
     }
 
     &.leave {
-        animation: ${props => getExitAnimation(props.position)} .6s;
+        animation: ${(props) => getExitAnimation(props.position)} 0.6s;
     }
 
     @keyframes in-right {
@@ -2695,7 +3004,7 @@ const Notice = styled(Card) `
 const Title = styled.div `
     padding: 5px 0;
     font-size: 14px;
-    color: ${props => getTitleColor(props.type)};
+    color: ${(props) => getTitleColor(props.type)};
     display: flex;
     align-items: center;
 `;
@@ -2719,7 +3028,7 @@ const Body = styled.div `
 `;
 const IconContainer = styled.div `
     padding: 6px 10px;
-    ${props => getTypeStyle(props.type)};
+    ${(props) => getTypeStyle(props.type)};
 `;
 const Footer = styled.div `
     display: flex;
@@ -2749,12 +3058,12 @@ class NotificationManager extends React.Component {
         this.remove = (id) => {
             // Trigger leaving animation.
             this.setState({
-                notices: this.state.notices.map(notice => (Object.assign(Object.assign({}, notice), { leaving: notice.id === id ? true : notice.leaving })))
+                notices: this.state.notices.map((notice) => (Object.assign(Object.assign({}, notice), { leaving: notice.id === id ? true : notice.leaving }))),
             });
             this.set.delete(id);
             // Remove notification on animation completion.
             setTimeout(() => {
-                const notice = this.state.notices.find(notice => notice.id === id);
+                const notice = this.state.notices.find((notice) => notice.id === id);
                 if (notice) {
                     // call close callback, ignore any errors in callback.
                     if (notice.onClose) {
@@ -2767,9 +3076,9 @@ class NotificationManager extends React.Component {
                     }
                     // Remove the notification
                     this.setState({
-                        notices: this.state.notices.filter(notice => notice.id !== id),
+                        notices: this.state.notices.filter((notice) => notice.id !== id),
                     }, () => {
-                        // Check if the stack is empty and then call the 
+                        // Check if the stack is empty and then call the
                         // empty callback function.
                         if (this.state.notices.length === 0) {
                             this.props.onEmpty();
@@ -2826,16 +3135,18 @@ class NotificationManager extends React.Component {
          * @param id
          */
         this.resume = (id) => () => {
-            const notice = this.state.notices.find(notice => notice.id === id);
+            const notice = this.state.notices.find((notice) => notice.id === id);
             if (!notice.sticky) {
                 this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION$1);
             }
         };
     }
     render() {
-        return (jsxRuntime.jsx(Container$2, { position: this.props.position, children: this.state.notices.map(notice => {
+        return (jsxRuntime.jsx(Container$2, { position: this.props.position, children: this.state.notices.map((notice) => {
                 const { id, title, description, leaving, type = exports.NOTIFICATION_TYPE.INFO, buttonText, buttonClick, } = notice;
-                return (jsxRuntime.jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [jsxRuntime.jsxs(IconContainer, { type: type, children: [type === exports.NOTIFICATION_TYPE.INFO && jsxRuntime.jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsxRuntime.jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsxRuntime.jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsxRuntime.jsx(CheckCircle$1, {})] }), jsxRuntime.jsxs(FillParent, { children: [jsxRuntime.jsxs(Title, { type: type, children: [jsxRuntime.jsx(FillParent, { children: title }), jsxRuntime.jsx(CloseButton, { onClick: this.closeClickHandler(id), children: jsxRuntime.jsx(Close, {}) })] }), jsxRuntime.jsx(Body, { children: description }), buttonText && (jsxRuntime.jsx(Footer, { children: jsxRuntime.jsx(ActionButton, { onClick: () => { buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick(); }, children: buttonText }) }))] })] }), id));
+                return (jsxRuntime.jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [jsxRuntime.jsxs(IconContainer, { type: type, children: [type === exports.NOTIFICATION_TYPE.INFO && jsxRuntime.jsx(CheckCircle$3, {}), type === exports.NOTIFICATION_TYPE.SUCCESS && jsxRuntime.jsx(CheckCircle$4, {}), type === exports.NOTIFICATION_TYPE.WARNING && jsxRuntime.jsx(CheckCircle$2, {}), type === exports.NOTIFICATION_TYPE.DANGER && jsxRuntime.jsx(CheckCircle$1, {})] }), jsxRuntime.jsxs(FillParent, { children: [jsxRuntime.jsxs(Title, { type: type, children: [jsxRuntime.jsx(FillParent, { children: title }), jsxRuntime.jsx(CloseButton, { onClick: this.closeClickHandler(id), children: jsxRuntime.jsx(Close, {}) })] }), jsxRuntime.jsx(Body, { children: description }), buttonText && (jsxRuntime.jsx(Footer, { children: jsxRuntime.jsx(ActionButton, { onClick: () => {
+                                            buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick();
+                                        }, children: buttonText }) }))] })] }), id));
             }) }));
     }
 }
@@ -2904,13 +3215,16 @@ class Notification {
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (jsxRuntime.jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) }))
+                    component: (jsxRuntime.jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) })),
                 });
                 this.containers.set(position, {
                     ref,
                     element: div,
+                    root: client.createRoot(div),
+                });
+                ReactDOM.flushSync(() => {
+                    this.containers.get(position).root.render(jsxRuntime.jsx(Component, {}));
                 });
-                ReactDOM.render(jsxRuntime.jsx(Component, {}), div);
                 notification = ref;
             }
             else {
@@ -2936,7 +3250,7 @@ class Notification {
          */
         this.destroy = (position) => {
             const notification = this.containers.get(position);
-            ReactDOM.unmountComponentAtNode(notification.element);
+            notification.root.unmount();
             this.containers.delete(position);
         };
     }
@@ -2948,14 +3262,18 @@ const SpinnerDiv = styled.div `
     border: 4px solid var(--primary, ${constants.PRIMARY});
     border-top: 4px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
     border-radius: 50%;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${(props) => props.size}px;
+    height: ${(props) => props.size}px;
     margin: 0 auto;
     animation: spin 1s linear infinite;
 
     @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
     }
 `;
 function Spinner(props) {
@@ -2963,7 +3281,7 @@ function Spinner(props) {
 }
 Spinner.propTypes = {
     /** Spinner's size */
-    size: PropTypes.number
+    size: PropTypes.number,
 };
 Spinner.defaultProps = {
     size: 30,
@@ -2993,7 +3311,7 @@ const Header = styled.div `
             z-index: 0;
         }
     }
-    
+
     & > * {
         z-index: 1;
     }
@@ -3003,12 +3321,12 @@ const HeaderButton = styled.button `
     padding: 16px 24px 16px 16px;
     font-size: 16px;
     cursor: pointer;
-    background-color: ${props => props.active
+    background-color: ${(props) => props.active
     ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
     : `var(--background, ${constants.BACKGROUND})`};
-    font-weight: ${props => props.active ? 'bold' : 'normal'};
+    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
     overflow: hidden;
-    display:flex;
+    display: flex;
     align-items: center;
 
     &:disabled {
@@ -3016,7 +3334,8 @@ const HeaderButton = styled.button `
         background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
     }
 
-    &:enabled:hover, &:focus {
+    &:enabled:hover,
+    &:focus {
         background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
     }
 
@@ -3046,6 +3365,7 @@ const MobileHeader = styled.div `
 function Stepper(props) {
     const [active, setActive] = React.useState(props.active);
     const { children, onStepClick } = props;
+    const childrenArray = React.Children.toArray(children);
     const stepClickHandler = (index) => () => {
         setActive(index);
         onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
@@ -3062,7 +3382,13 @@ function Stepper(props) {
         }
         return exports.BADGE_TYPE.DISABLED;
     };
-    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(Header, { children: [React.Children.map(children, (child, index) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(HeaderButton, { active: index === active, type: 'button', disabled: child.props.disabled, onClick: stepClickHandler(index), children: [jsxRuntime.jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsxRuntime.jsx(Ellipsis, { children: child.props.name })] }) }))), jsxRuntime.jsxs(MobileHeader, { children: [jsxRuntime.jsx("span", { children: children[active].props.name }), jsxRuntime.jsxs(Badge, { inline: true, type: exports.BADGE_TYPE.PRIMARY, children: [active + 1, " of ", children.length] })] })] }), children[active]] }));
+    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(Header, { children: [React.Children.map(children, (child, index) => {
+                        if (!React.isValidElement(child))
+                            return null;
+                        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(HeaderButton, { active: index === active, type: "button", disabled: child.props.disabled, onClick: stepClickHandler(index), children: [jsxRuntime.jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), jsxRuntime.jsx(Ellipsis, { children: child.props.name })] }) }));
+                    }), jsxRuntime.jsxs(MobileHeader, { children: [jsxRuntime.jsx("span", { children: React.isValidElement(childrenArray[active])
+                                    ? childrenArray[active].props.name
+                                    : '' }), jsxRuntime.jsxs(Badge, { inline: true, type: exports.BADGE_TYPE.PRIMARY, children: [active + 1, " of ", React.Children.count(children)] })] })] }), childrenArray[active]] }));
 }
 Stepper.propTypes = {
     /** Index of currently active step */
@@ -3080,6 +3406,7 @@ const Container = styled.div `
     flex-direction: column;
 `;
 function Step(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { name, disabled, completed } = props, rest = __rest(props, ["name", "disabled", "completed"]);
     return jsxRuntime.jsx(Container, Object.assign({}, rest));
 }
@@ -3094,13 +3421,16 @@ const Button = styled.button `
     padding: 8px 12px;
     font-size: 14px;
     border-radius: 3px 3px 0 0;
-    border-bottom: ${(props) => (props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none')};
+    border-bottom: ${(props) => props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : 'none'};
     color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
     cursor: pointer;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         background-color: var(--primary-lighter, #cfe9ff);
-        border-bottom: ${(props) => (props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : `3px solid var(--primary, ${constants.PRIMARY})`)};
+        border-bottom: ${(props) => props.active
+    ? `3px solid var(--primary, ${constants.PRIMARY})`
+    : `3px solid var(--primary, ${constants.PRIMARY})`};
     }
 
     &[disabled] {
@@ -3122,10 +3452,11 @@ function Tabs(props) {
     const switchTab = (index) => () => setActive(index);
     const { children } = props;
     React.useEffect(() => {
+        var _a;
         setActive(props.active);
-        props.onChange && props.onChange(props.active);
-    }, [props.active]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonContainer, Object.assign({}, props.props, { children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: child.props.disabled, children: child.props.name }))) })), jsxRuntime.jsx(TabBody, Object.assign({}, props.bodyProps, { children: children[active] }))] }));
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.active);
+    }, [props]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonContainer, Object.assign({}, props.props, { children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: React.isValidElement(child) ? child.props.disabled : false, children: React.isValidElement(child) ? child.props.name : '' }))) })), jsxRuntime.jsx(TabBody, Object.assign({}, props.bodyProps, { children: React.Children.toArray(children)[active] }))] }));
 }
 Tabs.propTypes = {
     /** Active Tab Index */
@@ -3181,13 +3512,13 @@ const ToastContainer = styled(Card) `
     box-sizing: border-box;
     border-radius: 3px;
     padding: 12px;
-    background-color: ${props => getBackgroundColor(props.type)};
+    background-color: ${(props) => getBackgroundColor(props.type)};
     color: #fff;
     margin: 20px;
     font-size: 14px;
     line-height: 20px;
     transform: translateY(100%);
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     width: 344px;
     display: flex;
     align-items: center;
@@ -3238,7 +3569,7 @@ class Toast {
             this.toast = null;
             setTimeout(() => {
                 if (!this.toast) {
-                    ReactDOM.unmountComponentAtNode(this.element);
+                    this.root.unmount();
                 }
             }, 300);
         };
@@ -3271,10 +3602,11 @@ class Toast {
             closeOnOverlayClick: false,
             alwaysOnTop: true,
             position: LAYER_POSITION.BOTTOM_LEFT,
-            component: (jsxRuntime.jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [jsxRuntime.jsx(TextContainer, { children: text }), buttonText && (jsxRuntime.jsx(CloseContainer, { onClick: buttonClick, type: 'button', children: buttonText }))] })))
+            component: (jsxRuntime.jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [jsxRuntime.jsx(TextContainer, { children: text }), buttonText && (jsxRuntime.jsx(CloseContainer, { onClick: buttonClick, type: "button", children: buttonText }))] }))),
         });
         const Component = this.toast[0];
-        ReactDOM.render(jsxRuntime.jsx(Component, {}), this.element);
+        this.root = client.createRoot(this.element);
+        this.root.render(jsxRuntime.jsx(Component, {}));
         this.timeout = setTimeout(() => {
             this.remove();
         }, duration || DEFAULT_DURATION);
@@ -3327,10 +3659,10 @@ const TooltipDiv = styled.div `
     padding: 5px;
     color: #fff;
     border-radius: 3px;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     font-size: 12px;
     z-index: 1;
-    ${props => positionStyle[props.position]}
+    ${(props) => positionStyle[props.position]}
 `;
 const TooltipContainer = styled.div `
     position: relative;
@@ -3339,7 +3671,7 @@ const TooltipContainer = styled.div `
     align-items: center;
 
     &:hover ${TooltipDiv} {
-        ${props => positionHoverStyle[props.position]}
+        ${(props) => positionHoverStyle[props.position]}
     }
 `;
 function Tooltip(props) {
@@ -3354,11 +3686,11 @@ Tooltip.propTypes = {
         exports.TOOLTIP_POSITION.TOP,
         exports.TOOLTIP_POSITION.LEFT,
         exports.TOOLTIP_POSITION.RIGHT,
-        exports.TOOLTIP_POSITION.BOTTOM
+        exports.TOOLTIP_POSITION.BOTTOM,
     ]),
 };
 Tooltip.defaultProps = {
-    position: exports.TOOLTIP_POSITION.BOTTOM
+    position: exports.TOOLTIP_POSITION.BOTTOM,
 };
 
 exports.Accordion = Accordion;
@@ -3375,6 +3707,7 @@ exports.CardFooter = Footer$1;
 exports.CardHeader = Header$1;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.ChipInput = ChipInput;
 exports.ConfirmDialog = ConfirmDialog;
 exports.Dialog = Dialog;
 exports.DialogBody = Body$1;