@via-profit/ui-kit 0.4.0 → 0.5.0

package/esm/Popper/usePopper.js

@@ -0,0 +1,514 @@
+import React from 'react';
+/**
+ * Finds the closest scrollable ancestor of an element.
+ * A scrollable element is one that has overflow set to auto, scroll, or overlay
+ * and has content that overflows, allowing scrolling.
+ *
+ * @param element - The element to start searching from
+ * @param includeHidden - Whether to consider elements with overflow: hidden
+ * @returns The closest scrollable ancestor or window if none found
+ */
+export const findScrollableAncestor = (element, includeHidden = false) => {
+    if (!element) {
+        return null;
+    }
+    // Helper to check if an element is scrollable
+    const isScrollable = (el) => {
+        const style = window.getComputedStyle(el);
+        const overflow = style.overflow + style.overflowY + style.overflowX;
+        // Check if element has overflow that enables scrolling
+        const hasOverflow = overflow.includes('auto') ||
+            overflow.includes('scroll') ||
+            (includeHidden && overflow.includes('hidden'));
+        if (!hasOverflow) {
+            return false;
+        }
+        // Check if element actually has scrollable content
+        return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+    };
+    // Start from parent (skip the element itself)
+    let parent = element.parentElement;
+    while (parent) {
+        if (isScrollable(parent)) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    // If no scrollable ancestor found, return window (which is scrollable)
+    return window;
+};
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const usePopper = (props) => {
+    const { anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = false, offset = 0, viewportMargin = 10, isOpen = false, alternativePlacements, } = props;
+    const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
+    const [style, setStyle] = React.useState(null);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const popperRef = React.useRef(null);
+    // Finding the nearest scrollable ancestor
+    const scrollableAncestor = React.useMemo(() => {
+        if (!anchorElement || typeof window === 'undefined') {
+            return null;
+        }
+        return findScrollableAncestor(anchorElement);
+    }, [anchorElement]);
+    // Reset actualPlacement only when the preferred placement itself changes.
+    // Comparing with actualPlacement here would immediately revert every flip.
+    const prevAnchorPosRef = React.useRef(anchorPos);
+    React.useEffect(() => {
+        if (prevAnchorPosRef.current !== anchorPos) {
+            prevAnchorPosRef.current = anchorPos;
+            setActualPlacement(anchorPos);
+        }
+    }, [anchorPos]);
+    const getPositionStyle = React.useCallback((props) => {
+        var _a;
+        const { place, anchorRect, popperRect, forViewportCheck = false } = props;
+        const [direction, modifier = ''] = place.split('-');
+        let left = anchorRect.left;
+        let top = anchorRect.top;
+        let width = undefined;
+        // Calculating the position relative to the viewport
+        switch (direction) {
+            case 'top':
+                top = anchorRect.top - popperRect.height - offset;
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'bottom':
+                top = anchorRect.bottom + offset;
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'left':
+                left = anchorRect.left - popperRect.width - offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            case 'right':
+                left = anchorRect.right + offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            default:
+                left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                top = anchorRect.bottom + offset;
+        }
+        // Returning the viewport coordinates for verification or the final coordinates
+        if (forViewportCheck) {
+            return { left, top, width };
+        }
+        // For the final positioning, we take into account the strategy
+        if (positionStrategy === 'absolute') {
+            // Для absolute позиционирования нужно учитывать:
+            // 1. Прокрутку страницы (scrollX/scrollY)
+            // 2. Позицию относительно ближайшего positioned ancestor
+            // Получаем offset родителя с позиционированием
+            let offsetParent = ((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.offsetParent) || null;
+            // Если нет offsetParent или это body, используем document.documentElement
+            if (!offsetParent || offsetParent === document.body) {
+                offsetParent = document.documentElement;
+            }
+            const offsetParentRect = offsetParent.getBoundingClientRect();
+            // Вычисляем позицию относительно offsetParent
+            // left/top уже относительно viewport, вычитаем позицию offsetParent
+            let relativeLeft = left - offsetParentRect.left;
+            let relativeTop = top - offsetParentRect.top;
+            // Добавляем прокрутку offsetParent (если он скроллится)
+            if (offsetParent !== document.documentElement && offsetParent !== document.body) {
+                relativeLeft += offsetParent.scrollLeft || 0;
+                relativeTop += offsetParent.scrollTop || 0;
+            }
+            else {
+                // Для document.documentElement используем window.scroll
+                relativeLeft += window.scrollX;
+                relativeTop += window.scrollY;
+            }
+            return {
+                left: relativeLeft,
+                top: relativeTop,
+                width,
+            };
+        }
+        return { left, top, width };
+    }, [offset, positionStrategy]);
+    const clampPopperToContainer = React.useCallback((style, popperRect) => {
+        if (positionStrategy === 'absolute') {
+            return style;
+        }
+        const viewportMinLeft = viewportMargin;
+        const viewportMaxLeft = window.innerWidth - popperRect.width - viewportMargin;
+        const viewportMinTop = viewportMargin;
+        const viewportMaxTop = window.innerHeight - popperRect.height - viewportMargin;
+        return {
+            left: Math.max(viewportMinLeft, Math.min(style.left, viewportMaxLeft)),
+            top: Math.max(viewportMinTop, Math.min(style.top, viewportMaxTop)),
+            width: style.width,
+        };
+    }, [positionStrategy, viewportMargin]);
+    const checkIfViewportFits = React.useCallback((style, popperRect) => {
+        const left = style.left;
+        const top = style.top;
+        const right = left + popperRect.width;
+        const bottom = top + popperRect.height;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const isWithinHorizontal = left >= viewportMargin && right <= viewportWidth - viewportMargin;
+        const isWithinVertical = top >= viewportMargin && bottom <= viewportHeight - viewportMargin;
+        return isWithinHorizontal && isWithinVertical;
+    }, [viewportMargin]);
+    const placementsOrder = React.useMemo(() => {
+        const basePlacements = {
+            top: ['top', 'top-left', 'top-right', 'top-start', 'top-end'],
+            bottom: ['bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end'],
+            left: ['left', 'left-top', 'left-bottom'],
+            right: ['right', 'right-top', 'right-bottom'],
+        };
+        const allPlacements = [
+            ...basePlacements.top,
+            ...basePlacements.bottom,
+            ...basePlacements.left,
+            ...basePlacements.right,
+        ];
+        const order = {};
+        allPlacements.forEach(placement => {
+            const [direction] = placement.split('-');
+            // Priority: same direction > opposite > the rest
+            const opposite = direction === 'top'
+                ? 'bottom'
+                : direction === 'bottom'
+                    ? 'top'
+                    : direction === 'left'
+                        ? 'right'
+                        : 'left';
+            order[placement] = [
+                placement,
+                ...basePlacements[direction].filter(p => p !== placement),
+                ...(basePlacements[opposite] || []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.left : []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.right : []),
+            ];
+        });
+        // console.log(order);
+        return order;
+    }, []);
+    // #region Get Preferred Placements
+    const getPreferredPlacements = React.useCallback((preferredPlacement, anchorRect, popperRect) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const tryPlacement = (placement) => {
+            const viewportStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: true,
+            });
+            if (!checkIfViewportFits(viewportStyle, popperRect)) {
+                return null;
+            }
+            const finalStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: true,
+                placement,
+                style: clampPopperToContainer(finalStyle, popperRect),
+            };
+        };
+        const fallback = (placement) => {
+            const finalStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: false,
+                placement,
+                style: clampPopperToContainer(finalStyle, popperRect),
+            };
+        };
+        const isAuto = preferredPlacement.startsWith('auto');
+        const isFill = preferredPlacement.endsWith('fill');
+        // -------------------------------------------------------
+        // 1. EXPLICIT (top, bottom, left, right, top-left, ...)
+        // -------------------------------------------------------
+        if (!isAuto && !isFill) {
+            if (!autoFlip) {
+                return (_a = tryPlacement(preferredPlacement)) !== null && _a !== void 0 ? _a : fallback(preferredPlacement);
+            }
+            // Формируем порядок без дубликатов
+            const order = Array.from(new Set([
+                preferredPlacement,
+                ...((_b = alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.filter(p => !p.startsWith('auto') && !p.endsWith('fill'))) !== null && _b !== void 0 ? _b : []),
+                ...((_c = placementsOrder[preferredPlacement]) !== null && _c !== void 0 ? _c : []),
+            ]));
+            for (const p of order) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(preferredPlacement);
+        }
+        // -------------------------------------------------------
+        // 2. FILL (bottom-fill, top-fill)
+        // -------------------------------------------------------
+        if (isFill) {
+            const [dir] = preferredPlacement.split('-');
+            if (!autoFlip) {
+                return (_d = tryPlacement(preferredPlacement)) !== null && _d !== void 0 ? _d : fallback(preferredPlacement);
+            }
+            const opposite = dir === 'bottom' ? 'top-fill' : 'bottom-fill';
+            // Формируем порядок: fill сначала, потом обычные позиции из альтернатив, потом дефолтные
+            const order = Array.from(new Set([
+                preferredPlacement,
+                opposite,
+                // Обычные позиции из alternativePlacements (не auto и не fill)
+                ...((_e = alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.filter(p => !p.startsWith('auto') && !p.endsWith('fill'))) !== null && _e !== void 0 ? _e : []),
+                // Обычные позиции из дефолтного порядка (не fill)
+                ...((_g = (_f = placementsOrder[preferredPlacement]) === null || _f === void 0 ? void 0 : _f.filter(p => !p.endsWith('fill'))) !== null && _g !== void 0 ? _g : []),
+            ]));
+            for (const p of order) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(preferredPlacement);
+        }
+        // -------------------------------------------------------
+        // 3. AUTO
+        // -------------------------------------------------------
+        if (isAuto) {
+            // Если autoFlip выключен - просто используем дефолтное направление
+            if (!autoFlip) {
+                const [, dir = 'bottom'] = preferredPlacement.split('-');
+                const defaultPlacement = dir;
+                return (_h = tryPlacement(defaultPlacement)) !== null && _h !== void 0 ? _h : fallback(defaultPlacement);
+            }
+            const [, dir = 'bottom'] = preferredPlacement.split('-');
+            const base = (alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.length)
+                ? alternativePlacements
+                : [
+                    'bottom',
+                    'bottom-start',
+                    'bottom-end',
+                    'bottom-left',
+                    'bottom-right',
+                    'top',
+                    'top-left',
+                    'top-right',
+                    'top-start',
+                    'top-end',
+                    'left',
+                    'left-top',
+                    'left-bottom',
+                    'right',
+                    'right-top',
+                    'right-bottom',
+                ];
+            const sorted = [...base].sort((a, b) => {
+                const ad = a.split('-')[0];
+                const bd = b.split('-')[0];
+                if (ad === dir && bd !== dir)
+                    return -1;
+                if (ad !== dir && bd === dir)
+                    return 1;
+                return 0;
+            });
+            for (const p of sorted) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(dir);
+        }
+        // -------------------------------------------------------
+        // 4. SUPER FALLBACK
+        // -------------------------------------------------------
+        return fallback('bottom');
+    }, [
+        autoFlip,
+        getPositionStyle,
+        checkIfViewportFits,
+        clampPopperToContainer,
+        placementsOrder,
+        alternativePlacements,
+    ]);
+    // #region Calculate Position
+    const calculatePosition = React.useCallback(() => {
+        if (!anchorElement || !popperRef.current) {
+            return;
+        }
+        const anchorRect = anchorElement.getBoundingClientRect();
+        const popperRect = popperRef.current.getBoundingClientRect();
+        const { style, placement } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
+        setActualPlacement(placement);
+        setStyle(style);
+    }, [anchorElement, anchorPos, getPreferredPlacements]);
+    const frameRef = React.useRef(null);
+    const scheduleUpdate = React.useCallback(() => {
+        if (frameRef.current !== null) {
+            return;
+        }
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Cancel the pending frame on unmount
+    React.useEffect(() => () => {
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+    }, []);
+    /**
+     * Close popper logic
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            setIsVisible(false);
+            setStyle(null);
+        }
+    }, [isOpen]);
+    /**
+     * Open popper logic.
+     * Runs after every render because the popper node can appear later than `isOpen`
+     * becomes true (e.g. the portal is rendered only after the client mount)
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (isOpen && !isVisible && anchorElement && popperRef.current) {
+            calculatePosition();
+            setIsVisible(true);
+        }
+    });
+    /**
+     * Recalculate position when the positioning params are changed
+     */
+    React.useEffect(() => {
+        if (isOpen && isVisible) {
+            calculatePosition();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [calculatePosition]);
+    /**
+     * The anchor element changes
+     */
+    React.useEffect(() => {
+        if (!isOpen || !anchorElement) {
+            return;
+        }
+        const observer = new MutationObserver(scheduleUpdate);
+        observer.observe(anchorElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, anchorElement, scheduleUpdate]);
+    /**
+     * The size of the anchor or popper changes
+     */
+    React.useEffect(() => {
+        if (!isOpen || !isVisible || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(scheduleUpdate);
+        if (anchorElement) {
+            observer.observe(anchorElement);
+        }
+        if (popperRef.current) {
+            observer.observe(popperRef.current);
+        }
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, isVisible, anchorElement, scheduleUpdate]);
+    /**
+     * On scroll of any ancestor (captured on window) - recalculate position
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleScroll = (event) => {
+            var _a;
+            // Scrolling inside the popper does not move it
+            if (event.target instanceof Node && ((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                return;
+            }
+            scheduleUpdate();
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true, capture: true });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [isOpen, scheduleUpdate]);
+    /**
+     * On window resize - recalculate position
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        window.addEventListener('resize', scheduleUpdate);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [scheduleUpdate, isOpen]);
+    return {
+        actualPlacement,
+        style,
+        popperRef,
+        isVisible,
+        scrollableAncestor,
+        calculatePosition,
+        setActualPlacement,
+        setStyle,
+        setIsVisible,
+    };
+};
+export default usePopper;

package/esm/Radio/RadioBox.js

@@ -0,0 +1,97 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import useRadioColor from './useRadioColor';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const Root = styled.span `
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.15em;
+  height: 1.15em;
+`;
+/**
+ * The checked look comes from the `:checked` state of the input, not from the props:
+ * the browser unchecks the other radio buttons of the same `name` itself
+ * (data attributes, not class names: emotion labels are absent in the published package)
+ */
+const StyledInput = styled.input `
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+  z-index: 1;
+
+  &:checked + [data-radio-circle] {
+    border-color: ${({ theme, $color, $error }) => $error ? theme.color.error.toString() : $color.toString()};
+  }
+
+  &:checked + [data-radio-circle] [data-radio-dot] {
+    transform: scale(1);
+  }
+
+  &:focus-visible + [data-radio-circle] {
+    outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0.14em;
+  }
+  ${({ theme }) => themeFocusRing(theme, '&:focus-visible + [data-radio-circle]')}
+`;
+const Circle = styled.span `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border-width: 0.1em;
+  border-style: solid;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  transition: border-color 150ms ease-out;
+  border-color: ${({ theme, $error }) => $error ? theme.color.error.toString() : theme.color.textPrimary.alpha(0.4).toString()};
+
+  ${({ $disabled, $error, $color }) => !$disabled &&
+    !$error &&
+    css `
+      label:hover & {
+        border-color: ${$color.toString()};
+      }
+    `}
+`;
+const Dot = styled.span `
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color.toString()};
+  transform: scale(0);
+  transition: transform 150ms ease-out;
+`;
+/**
+ * The circle with the native input over it.
+ * The ref and the input attributes go to the input: it is the element that holds the value and the focus.
+ * `className` and `style` go to the root element, so `styled(RadioBox)` styles the circle
+ */
+const RadioBox = (props, ref) => {
+    const { error, color, disabled, className, style } = props, nativeProps = __rest(props, ["error", "color", "disabled", "className", "style"]);
+    const $color = useRadioColor(color);
+    return (React.createElement(Root, { className: className, style: style },
+        React.createElement(StyledInput, Object.assign({}, nativeProps, { type: "radio", disabled: disabled, "$color": $color, "$error": Boolean(error), ref: ref })),
+        React.createElement(Circle, { "data-radio-circle": "", "$color": $color, "$error": Boolean(error), "$disabled": Boolean(disabled) },
+            React.createElement(Dot, { "data-radio-dot": "", "$color": $color }))));
+};
+export default React.forwardRef(RadioBox);

package/esm/Radio/RadioContainer.js

@@ -0,0 +1,33 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const directions = {
+    start: 'row-reverse',
+    end: 'row',
+    top: 'column-reverse',
+    bottom: 'column',
+};
+const StyledContainer = styled.label `
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  flex-direction: ${({ $labelPosition }) => directions[$labelPosition || 'end']};
+`;
+const RadioContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
+};
+export default React.forwardRef(RadioContainer);

package/esm/Radio/RadioTextWrapper.js

@@ -0,0 +1,24 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const RadioTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(RadioTextWrapper);