@uppsala-designsystem/ui 1.5.0

package/dist/cjs/components/Tabs/TabsPanel.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var react$1 = require('@floating-ui/react');
+var Tabs = require('./Tabs.js');
+
+/**
+ * A single content item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ */
+const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest }, ref) {
+    const { value: tabsValue } = react.useContext(Tabs.Context);
+    const active = value === tabsValue;
+    const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
+    const internalRef = react.useRef(null);
+    const mergedRef = react$1.useMergeRefs([ref, internalRef]);
+    /* Check if the panel has any tabbable elements */
+    react.useEffect(() => {
+        if (!internalRef.current)
+            return;
+        const tabbableElements = internalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        setHasTabbableElement(tabbableElements.length > 0);
+    }, [children]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: active && (jsxRuntime.jsx("div", { ref: mergedRef, role: 'tabpanel', tabIndex: hasTabbableElement ? undefined : 0, ...rest, children: children })) }));
+});
+
+exports.TabsPanel = TabsPanel;

package/dist/cjs/components/Tabs/TabsTab.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
+var Tabs = require('./Tabs.js');
+
+/**
+ * A single item in a Tabs component.
+ *
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
+const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
+    const tabs = react.useContext(Tabs.Context);
+    const buttonId = id ?? `tab-${react.useId()}`;
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
+});
+
+exports.TabsTab = TabsTab;

package/dist/cjs/components/Tabs/index.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var Tabs$1 = require('./Tabs.js');
+var TabsList = require('./TabsList.js');
+var TabsPanel = require('./TabsPanel.js');
+var TabsTab = require('./TabsTab.js');
+
+/**
+ * Display a group of tabs that can be toggled between.
+ *
+ * @example
+ * <Tabs onChange={(value) => console.log(value)}>
+ *   <Tabs.List>
+ *     <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ *     <Tabs.Tab value='2'>Tab 2</Tabs.Tab>
+ *     <Tabs.Tab value='3'>Tab 3</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value='1'>content 1</Tabs.Panel>
+ *   <Tabs.Panel value='2'>content 2</Tabs.Panel>
+ *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
+ * </Tabs>
+ */
+const Tabs = Object.assign(Tabs$1.Tabs, {
+    List: TabsList.TabsList,
+    Tab: TabsTab.TabsTab,
+    Panel: TabsPanel.TabsPanel,
+});
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Panel.displayName = 'Tabs.Panel';
+
+exports.TabsList = TabsList.TabsList;
+exports.TabsPanel = TabsPanel.TabsPanel;
+exports.TabsTab = TabsTab.TabsTab;
+exports.Tabs = Tabs;

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

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Tag` to display categories or statuses.
+ *
+ * @example
+ * <Tag>Melk</Tag>
+ */
+const Tag = react.forwardRef(function Tag({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
+});
+
+exports.Tag = Tag;

package/dist/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Native HTML textarea element.
+ *
+ * @example
+ * <Textarea />
+ */
+const Textarea = react.forwardRef(function Textarea({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("textarea", { className: cl('ds-input', className), ref: ref, ...rest }));
+});
+
+exports.Textarea = Textarea;

package/dist/cjs/components/Textfield/Textfield.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Field/index.js');
+var Label = require('../Label/Label.js');
+var FieldDescription = require('../Field/FieldDescription.js');
+var FieldAffix = require('../Field/FieldAffix.js');
+var Textarea = require('../Textarea/Textarea.js');
+var Input = require('../Input/Input.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+const Textfield = react.forwardRef(function Textfield({ label, description, error, multiline, prefix, suffix, 'data-size': size, counter, style, className, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { className: className, "data-size": size, style: style, children: [!!label && jsxRuntime.jsx(Label.Label, { children: label }), !!description && jsxRuntime.jsx(FieldDescription.FieldDescription, { children: description }), jsxRuntime.jsxs(FieldAffix.FieldAffixes, { children: [prefix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: prefix }), multiline === true ? (jsxRuntime.jsx(Textarea.Textarea, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })) : (jsxRuntime.jsx(Input.Input, { ref: ref, "aria-invalid": Boolean(error) || undefined, ...rest })), suffix === undefined || jsxRuntime.jsx(FieldAffix.FieldAffix, { children: suffix })] }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error }), !!counter && (jsxRuntime.jsx(index.Field.Counter, { ...(typeof counter === 'number' ? { limit: counter } : counter) }))] }));
+});
+
+exports.Textfield = Textfield;

package/dist/cjs/components/Timeline/Timeline.js

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Timeline component for displaying a process or sequence of steps.
+ *
+ * @example
+ * <Timeline>
+ *   <Timeline.Item>
+ *     <Details>
+ *       <Details.Summary>Step 1</Details.Summary>
+ *       <Details.Content>Content</Details.Content>
+ *     </Details>
+ *   </Timeline.Item>
+ * </Timeline>
+ */
+const Timeline = react.forwardRef(function Timeline({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("ol", { className: cl('ds-timeline', className), ref: ref, ...rest }));
+});
+
+exports.Timeline = Timeline;

package/dist/cjs/components/Timeline/TimelineItem.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Timeline item/chapter component, represents a single step in the timeline.
+ *
+ * @example
+ * <Timeline.Item>
+ *   <Details>
+ *     <Details.Summary>Step heading</Details.Summary>
+ *     <Details.Content>Step content</Details.Content>
+ *   </Details>
+ * </Timeline.Item>
+ */
+const TimelineItem = react.forwardRef(function TimelineItem({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("li", { className: cl('ds-timeline__item', className), ref: ref, ...rest }));
+});
+
+exports.TimelineItem = TimelineItem;

package/dist/cjs/components/Timeline/index.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var Timeline$1 = require('./Timeline.js');
+var TimelineItem = require('./TimelineItem.js');
+
+/**
+ * Timeline component for displaying a process or sequence of steps.
+ * Compose with `Details` for expandable chapters.
+ *
+ * @example
+ * <Timeline>
+ *   <Timeline.Item>
+ *     <Details>
+ *       <Details.Summary>Step 1</Details.Summary>
+ *       <Details.Content>Content here</Details.Content>
+ *     </Details>
+ *   </Timeline.Item>
+ * </Timeline>
+ */
+const Timeline = Object.assign(Timeline$1.Timeline, {
+    Item: TimelineItem.TimelineItem,
+});
+Timeline.Item.displayName = 'Timeline.Item';
+
+exports.TimelineItem = TimelineItem.TimelineItem;
+exports.Timeline = Timeline;

package/dist/cjs/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,129 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
+
+const ToggleGroupContext = react.createContext({});
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = react.forwardRef(function ToggleGroup({ children, value, defaultValue, onChange, name, animated = true, className, ...rest }, ref) {
+    const nameId = react.useId();
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const containerRef = react.useRef(null);
+    const indicatorRef = react.useRef(null);
+    let onValueChange = onChange;
+    if (!isControlled) {
+        onValueChange = (newValue) => {
+            setUncontrolledValue(newValue);
+            onChange?.(newValue);
+        };
+    }
+    const updateIndicator = react.useCallback(() => {
+        if (!animated)
+            return;
+        const container = containerRef.current;
+        const indicator = indicatorRef.current;
+        if (!container || !indicator)
+            return;
+        if (currentValue === undefined) {
+            indicator.style.display = "none";
+            return;
+        }
+        const activeButton = container.querySelector('button[aria-checked="true"]');
+        if (activeButton) {
+            // Prefer layout metrics relative to the container to avoid
+            // transform/zoom-related drift in viewport-based rect calculations.
+            let left = activeButton.offsetLeft;
+            let top = activeButton.offsetTop;
+            let width = activeButton.offsetWidth;
+            let height = activeButton.offsetHeight;
+            if (width === 0 || height === 0) {
+                const containerRect = container.getBoundingClientRect();
+                const buttonRect = activeButton.getBoundingClientRect();
+                left = buttonRect.left - containerRect.left;
+                top = buttonRect.top - containerRect.top;
+                width = buttonRect.width;
+                height = buttonRect.height;
+            }
+            const safeLeft = Math.max(0, left);
+            const safeTop = Math.max(0, top);
+            const containerWidth = container.clientWidth || container.offsetWidth;
+            const containerHeight = container.clientHeight || container.offsetHeight;
+            const hasContainerMetrics = containerWidth > 0 && containerHeight > 0;
+            const maxWidth = hasContainerMetrics
+                ? Math.max(0, containerWidth - safeLeft)
+                : Number.POSITIVE_INFINITY;
+            const maxHeight = hasContainerMetrics
+                ? Math.max(0, containerHeight - safeTop)
+                : Number.POSITIVE_INFINITY;
+            const safeWidth = Math.max(0, Math.min(width, maxWidth));
+            const safeHeight = Math.max(0, Math.min(height, maxHeight));
+            if (safeWidth === 0 || safeHeight === 0) {
+                indicator.style.display = "none";
+                return;
+            }
+            indicator.style.left = `${safeLeft}px`;
+            indicator.style.top = `${safeTop}px`;
+            indicator.style.width = `${safeWidth}px`;
+            indicator.style.height = `${safeHeight}px`;
+            indicator.style.display = "block";
+        }
+        else {
+            indicator.style.display = "none";
+        }
+    }, [animated, currentValue]);
+    react.useEffect(() => {
+        if (!animated)
+            return;
+        updateIndicator();
+    }, [animated, updateIndicator]);
+    react.useEffect(() => {
+        if (!animated)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const observer = new ResizeObserver(() => {
+            updateIndicator();
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [animated, updateIndicator]);
+    react.useEffect(() => {
+        if (!animated || typeof window === "undefined")
+            return;
+        const handleWindowResize = () => {
+            updateIndicator();
+        };
+        window.addEventListener("resize", handleWindowResize);
+        return () => window.removeEventListener("resize", handleWindowResize);
+    }, [animated, updateIndicator]);
+    return (jsxRuntime.jsx(ToggleGroupContext.Provider, { value: {
+            value: currentValue,
+            defaultValue,
+            name: name ?? `togglegroup-name-${nameId}`,
+            onChange: onValueChange,
+        }, children: jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: currentValue, orientation: "ambiguous", children: jsxRuntime.jsxs("div", { className: cl("ds-togglegroup", className), role: "radiogroup", ref: (node) => {
+                    containerRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, ...rest, children: [animated && (jsxRuntime.jsx("div", { ref: indicatorRef, className: "ds-togglegroup__indicator", "aria-hidden": "true", style: { display: "none" } })), name && jsxRuntime.jsx("input", { type: "hidden", name: name, value: currentValue }), children] }) }) }));
+});
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupContext = ToggleGroupContext;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RovingFocusItem = require('../../utilities/RovingFocus/RovingFocusItem.js');
+var Button = require('../Button/Button.js');
+var useToggleGroupitem = require('./useToggleGroupitem.js');
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = react.forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { variant: active ? 'primary' : 'tertiary', ref: ref, ...rest, ...buttonProps }) }));
+});
+
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/index.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var ToggleGroup$1 = require('./ToggleGroup.js');
+var ToggleGroupItem = require('./ToggleGroupItem.js');
+
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+const ToggleGroup = Object.assign(ToggleGroup$1.ToggleGroup, {
+    Item: ToggleGroupItem.ToggleGroupItem,
+});
+ToggleGroup.Item.displayName = 'ToggleGroup.Item';
+
+exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
+exports.ToggleGroup = ToggleGroup;

package/dist/cjs/components/ToggleGroup/useToggleGroupitem.js

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var ToggleGroup = require('./ToggleGroup.js');
+
+/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
+const useToggleGroupItem = (props) => {
+    const { ...rest } = props;
+    const genValue = react.useId();
+    const toggleGroup = react.useContext(ToggleGroup.ToggleGroupContext);
+    const value = props.value ?? genValue;
+    const active = toggleGroup.value === value;
+    const buttonId = `togglegroup-item-${react.useId()}`;
+    return {
+        ...rest,
+        active: active,
+        value,
+        buttonProps: {
+            id: buttonId,
+            'aria-checked': active,
+            'aria-current': active,
+            role: 'radio',
+            name: toggleGroup.name,
+            onClick: () => {
+                toggleGroup.onChange?.(value);
+            },
+        },
+    };
+};
+
+exports.useToggleGroupItem = useToggleGroupItem;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,122 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dom = require('@floating-ui/dom');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var react$1 = require('@floating-ui/react');
+
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+    const randomTooltipId = react.useId();
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const triggerRef = react.useRef(null);
+    const tooltipRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    react.useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return dom.autoUpdate(trigger, tooltip, () => {
+                dom.computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        dom.offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        dom.flip({
+                            fallbackAxisSideDirection: 'start',
+                        }),
+                        dom.shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    /* If children is only a string, make a span */
+    const ChildContainer = typeof children === 'string' ? 'span' : reactSlot.Slot;
+    /* Make sure it is valid */
+    if (typeof children !== 'string' && children.type === react.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
+        return null;
+    }
+    const popoverProps = {
+        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [react.version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+                // @ts-ignore @types/react-dom does not understand popover yet
+                popover: 'manual', ...rest, children: content })] }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
+
+exports.Tooltip = Tooltip;

package/dist/cjs/components/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = react.forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'p';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
+});
+
+exports.ValidationMessage = ValidationMessage;