/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-5e810c3
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty/index.js';
import { useCombinedRefs, useLayoutEffect } from '../../utils/react/index.js';
const PrefixElement = tasty({
    element: 'Prefix',
    styles: {
        position: 'absolute',
        display: 'grid',
        placeContent: 'stretch',
        placeItems: 'center',
        flow: 'column',
        gap: 0,
        left: '$prefix-gap',
        top: '$prefix-gap',
        bottom: '$prefix-gap',
        color: '#dark-02',
        height: '(100% - (2 * $prefix-gap))',
    },
});
export const Prefix = forwardRef(function Prefix(allProps, outerRef) {
    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
    const styles = extractStyles(props, CONTAINER_STYLES);
    const ref = useCombinedRefs(outerRef);
    useLayoutEffect(() => {
        if (ref?.current && onWidthChange) {
            onWidthChange(ref.current.offsetWidth);
        }
    }, [children, ref, onWidthChange]);
    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
            // @ts-ignore
            '--prefix-gap': parseStyle(outerGap).output,
        }, children: children }));
});

        