@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/SelectBox/SelectBox.js

@@ -0,0 +1,471 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useFloating, flip, offset, FloatingPortal, } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { Input, FieldLabel, Tooltip } from "..";
+import { useDebouncedCallback } from "use-debounce";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
+export const StyledInputContainer = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  border: none;
+  outline: none;
+  height: fit-content;
+
+  width: ${({ width }) => {
+    if (typeof width === "undefined")
+        return "100%";
+    if (width === null)
+        return "100%";
+    if (typeof width === "string")
+        return width;
+    if (typeof width === "number")
+        return `${width}px`;
+}};
+`;
+const StyledInnerItemContainer = styled.div `
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+const GroupTitle = styled((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+const ActionMenu = styled.div ``;
+const StyledItem = styled.div `
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    pointer-events: "none";
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`;
+const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps = {}, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(null);
+    const [searchValue, setSearchValue] = useState("");
+    const [customItems, setCustomItems] = useState([]);
+    const [placement, setPlacement] = useState("bottom-start");
+    const [dropDownHeight, setDropDownHeight] = useState(null);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const filteredItems = data
+        .concat(customItems) // Add custom items to the list
+        .filter((item) => {
+        const itemValue = (isObjectArray ? item.label : item);
+        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+    })
+        .sort((a, b) => {
+        if (grouped) {
+            const aValue = a.group;
+            const bValue = b.group;
+            return aValue.localeCompare(bValue);
+        }
+        // return current sort order
+        return 0;
+    });
+    const groupedItems = grouped
+        ? filteredItems.reduce((acc, item) => {
+            if (!item.group) {
+                item.group = "Other";
+            }
+            if (acc[item.group]) {
+                acc[item.group].push(item);
+            }
+            else {
+                acc[item.group] = [item];
+            }
+            return acc;
+        }, {})
+        : {};
+    const groups = grouped
+        ? Object.keys(groupedItems)
+            .map((group) => ({
+            label: group,
+            items: groupedItems[group],
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label))
+        : [];
+    const { refs, floatingStyles, update } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement,
+        strategy: "absolute",
+        // Handle collisions with the viewport
+        middleware: [flip(), offset(5)],
+    });
+    const toggleOpen = () => {
+        setIsOpen((prev) => {
+            if (!prev) {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            }
+            return !prev;
+        });
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (inputRef.current)
+            inputRef.current.value = "";
+        handleChangeSelection(null);
+        setSelected(null);
+        setSearchValue("");
+        searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
+        update();
+    };
+    const handleItemClick = (event, item) => {
+        event.preventDefault();
+        event.stopPropagation();
+        handleChangeSelection(item);
+        setIsOpen(false);
+    };
+    const handleChangeSelection = useCallback((option) => {
+        setSelected(option);
+        onChange === null || onChange === void 0 ? void 0 : onChange((option === null || option === void 0 ? void 0 : option.value) || option, option);
+    }, [onChange]);
+    const handleAddItem = useCallback((newItem) => {
+        const isNewItem = data.every((item) => item.label.toLowerCase() !==
+            newItem.toLowerCase());
+        if (isNewItem) {
+            const newValue = isObjectArray
+                ? { label: newItem, value: newItem }
+                : newItem;
+            setCustomItems((prev) => {
+                prev.push(newValue);
+                return prev;
+            });
+            handleChangeSelection(newValue);
+            onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
+        }
+        else {
+            const item = data.find((item) => {
+                return isObjectArray
+                    ? item.label.toLowerCase() === newItem.toLowerCase()
+                    : item.toLowerCase() === newItem.toLowerCase();
+            });
+            handleChangeSelection(item);
+        }
+    }, [onItemAdded, isObjectArray, data, handleChangeSelection]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // Escape key
+        if (e.key === "Escape") {
+            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            reference === null || reference === void 0 ? void 0 : reference.blur();
+            setSearchValue("");
+            update();
+            setIsOpen(false);
+        }
+        // Enter key
+        if (e.key === "Enter") {
+            if (currentInputValue && currentInputValue !== "" && allowCustomValue) {
+                handleAddItem(currentInputValue);
+                setSearchValue("");
+                update();
+            }
+            else {
+                // TODO: decide what to do when user presses enter after typing a search value
+            }
+            toggleOpen();
+            // setIsOpen(false);
+        }
+        // Arrow down
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setSelected((prev) => {
+                let newItem = filteredItems[0]; // Loop back to the first item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index < filteredItems.length - 1) {
+                    newItem = filteredItems[index + 1];
+                }
+                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
+                return newItem;
+            });
+        }
+        // Arrow up
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setSelected((prev) => {
+                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index > 0) {
+                    newItem = filteredItems[index - 1];
+                }
+                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
+                return newItem;
+            });
+        }
+        // Tab key
+        if (e.key === "Tab") {
+            if (allowCustomValue && currentInputValue && currentInputValue !== "") {
+                handleAddItem(currentInputValue);
+                setSearchValue("");
+            }
+            else if (!selected) {
+                // clear input
+                if (inputRef.current) {
+                    inputRef.current.value = "";
+                }
+            }
+            setSearchValue("");
+            setIsOpen(false);
+        }
+    };
+    const handleOnChange = (e) => {
+        // Simulate clear event when the input is changed to an empty string
+        if (e.target.value === "") {
+            handleClear(e);
+            return;
+        }
+        if (searchFn !== undefined) {
+            searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
+        }
+        else {
+            setSearchValue(e.target.value);
+            update();
+        }
+    };
+    const debouncedHandleOnChange = useDebouncedCallback(handleOnChange, 300);
+    const handleFocus = () => {
+        if (openOnFocus) {
+            setIsOpen(true);
+        }
+    };
+    // Close on outside click
+    useEffect(() => {
+        const close = (e) => {
+            var _a, _b;
+            const target = e.target;
+            const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+            const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+            if (floatingElement && // Check if the floating element exists
+                target !== referenceElement && // Check if the target is not the reference (input)
+                !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
+                !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
+            ) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("click", close);
+        return () => document.removeEventListener("click", close);
+    }, [refs.floating, refs.reference]);
+    // Handle default value
+    useEffect(() => {
+        if (defaultValue) {
+            const isOption = defaultValue.value !== undefined;
+            const searchPattern = isOption
+                ? defaultValue.value
+                : defaultValue;
+            setSelected(data.find((item) => isObjectArray
+                ? item.value === searchPattern
+                : item === searchPattern) || null);
+        }
+    }, [data, defaultValue, isObjectArray]);
+    // handle input value change
+    useEffect(() => {
+        if (inputRef.current) {
+            if (!selected) {
+                inputRef.current.value = "";
+            }
+            else {
+                inputRef.current.value = isObjectArray
+                    ? selected.label
+                    : selected;
+            }
+        }
+    }, [selected]);
+    // handle scroll item into view
+    useEffect(() => {
+        var _a, _b;
+        const item = (_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, ".mfFloatingItem[data-selected=true]");
+        if (item) {
+            item.scrollIntoView({ block: "nearest" });
+        }
+    }, [selected]);
+    // make calls to onSearch callback
+    useEffect(() => {
+        if (searchable) {
+            update();
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+        }
+    }, [searchValue]);
+    const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+    const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
+    const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+    const scrollActive = scrollEl
+        ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
+        : false;
+    // get height between bottom of the floating container and the bottom of the viewport
+    const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
+    // get height between top of the floating container and the top of the viewport
+    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) -
+        10);
+    useEffect(() => {
+        if (bottomHeight < 250) {
+            setPlacement("top-start");
+            setDropDownHeight(topHeight);
+        }
+        else {
+            setPlacement("bottom-start");
+            setDropDownHeight(bottomHeight);
+        }
+        return () => {
+            setPlacement("bottom-start");
+            setDropDownHeight(bottomHeight);
+        };
+    }, [topHeight, bottomHeight, isOpen]);
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+                            e.preventDefault();
+                            // e.stopPropagation();
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleOpen();
+                        } })) : null] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+                        containerRef.current = ref;
+                        refs.setFloating(ref);
+                    }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
+                            width: contentWidth,
+                            maxWidth: contentWidth,
+                            maxHeight: DropDownProps.autoHeight
+                                ? (dropDownHeight || 250) - 10
+                                : "",
+                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [actionComponent && _jsx(ActionMenu, { children: actionComponent }), _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), !loading && grouped
+                                        ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                                    return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
+                                                                ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
+                                                                    item.value
+                                                                : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                                })] }, group.label)))
+                                        : filteredItems.map((item, index) => {
+                                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
+                                                        ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
+                                                            (item === null || item === void 0 ? void 0 : item.value)
+                                                        : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                        })] })] })) }) }))] }));
+}) `
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+`;
+export default SelectBox;

package/dist/SelectBox/index.js

@@ -0,0 +1 @@
+export { default } from "./SelectBox";

package/dist/Switch/Switch.js

@@ -0,0 +1,129 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { FieldLabel } from "..";
+const StyledRoot = styled(RadixSwitch.Root) `
+  all: unset;
+  cursor: pointer;
+
+  height: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "16px"
+        : size === "md"
+            ? "22px"
+            : size === "lg"
+                ? "28px"
+                : size === "xl"
+                    ? "32px"
+                    : "16px"};
+
+  width: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "35px"
+        : size === "md"
+            ? "28px"
+            : size === "lg"
+                ? "34px"
+                : size === "xl"
+                    ? "70px"
+                    : "26px"};
+
+  background-color: ${({ theme }) => theme.name === "DARK" ? "#383838" : "#e3e3e3"};
+  transition: background-color 100ms;
+  border-radius: 9999px;
+  border: 1px solid
+    ${({ theme }) => theme.name === "DARK" ? theme.palette.input.border : "#e3e3e3"};
+  position: relative;
+  padding: ${({ size }) => size === "xs"
+    ? "2px"
+    : size === "sm"
+        ? "2px"
+        : size === "md"
+            ? "28px"
+            : size === "lg"
+                ? "34px"
+                : size === "xl"
+                    ? "2px 4px"
+                    : "2px"};
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &[data-state="checked"] {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
+
+  // disabled styleing
+  :disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+`;
+const StyledThumb = styled(RadixSwitch.Thumb) `
+  display: block;
+  width: ${({ size }) => size === "xs"
+    ? "9px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "22px"
+            : size === "lg"
+                ? "28px"
+                : size === "xl"
+                    ? "28px"
+                    : "14px"};
+
+  height: ${({ size }) => size === "xs"
+    ? "9px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "22px"
+            : size === "lg"
+                ? "28px"
+                : size === "xl"
+                    ? "28px"
+                    : "14px"};
+
+  background-color: white;
+  border: none;
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  transition: transform 100ms;
+  will-change: transform;
+
+  &[data-state="checked"] {
+    transform: ${({ size }) => size === "xs"
+    ? "translateX(17px)"
+    : size === "sm"
+        ? "translateX(20px)"
+        : size === "md"
+            ? "translateX(26px)"
+            : size === "lg"
+                ? "translateX(32px)"
+                : size === "xl"
+                    ? "translateX(42px)"
+                    : "translateX(17px)"};
+  }
+`;
+const Switch = styled((_a) => {
+    var { className, onChange, size = "xs", label, labelPosition = "right", description, error, required, disabled = false, defaultValue, value, style = {} } = _a, other = __rest(_a, ["className", "onChange", "size", "label", "labelPosition", "description", "error", "required", "disabled", "defaultValue", "value", "style"]);
+    return (_jsxs("div", { className: className, children: [label && labelPosition === "left" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsx(StyledRoot, Object.assign({ size: size, className: "SwitchRoot", onCheckedChange: onChange, defaultChecked: defaultValue, checked: value, disabled: disabled, style: style }, other, { children: _jsx(StyledThumb, { size: size, className: "SwitchThumb" }) })), label && labelPosition === "right" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label }))] }));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+`;
+export default Switch;

package/dist/Switch/index.js

@@ -0,0 +1 @@
+export { default } from "./Switch";