woby-tooltip 1.0.5 → 1.0.10

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/TextBox.tsx","../src/Arrow.tsx","../src/Tooltip.tsx"],"sourcesContent":["import { $, $$, useEffect, Child, useMemo, Observable, ObservableMaybe, jsx, store, type JSX } from 'woby'\r\n\r\n\r\ntype _Align = 'start' | 'end' | 'center' | 'bottom' | 'top' | 'right' | 'left'\r\nexport type Align = _Align | `v-${_Align}` | `h-${_Align}`\r\nexport type Side = 'bottom' | 'top' | 'left' | 'right'\r\n\r\nexport const isSide = (side: ObservableMaybe<Side>, str: Side) => $$(side) === str\r\nexport const isAlign = (align: ObservableMaybe<Align>, str: Align) => $$(align) === str\r\nexport const isAlignA = (position, str: string) => $$(position) === str\r\n\r\ntype TextboxType = {\r\n    // lineSeparated?: boolean | string, position?: string,\r\n    // /** tailwind */\r\n    hoverBackground?: ObservableMaybe<string>, backgroundColor?: ObservableMaybe<string>, arrowAlign?: ObservableMaybe<Align>,\r\n    moveDown?: ObservableMaybe<string>, moveRight?: ObservableMaybe<string>, moveLeft?: ObservableMaybe<string>,\r\n    // moveUp?: string, textAlign?: string, fontFamily?: string, fontWeight?: string, fontSize?: string,\r\n    // /** tailwind */\r\n    color?: ObservableMaybe<string>, animation?: ObservableMaybe<string>, zIndex?: ObservableMaybe<string>, flat?: ObservableMaybe<boolean>, show?: ObservableMaybe<boolean>,\r\n    hoverColor?: ObservableMaybe<string>,\r\n    /** no tailwind */\r\n    textboxWidth?: ObservableMaybe<string>,\r\n    /** no tailwind */\r\n    padding?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    borderRadius?: ObservableMaybe<string>, shadowColor?: ObservableMaybe<string>, shadowShape?: ObservableMaybe<string>,\r\n    static?: ObservableMaybe<boolean>, alert?: ObservableMaybe<string>,\r\n\r\n    hoverArrow: Observable<boolean>\r\n\r\n    arw: ObservableMaybe<Align>,\r\n    pos: {\r\n        side: ObservableMaybe<Side>\r\n        align: ObservableMaybe<Align>\r\n    },\r\n    /** tailwind border-b-*/\r\n    lines: ObservableMaybe<string>,\r\n    move: {\r\n        down: number\r\n        up: number\r\n        left: number\r\n        right: number\r\n    },\r\n    children?: Child\r\n}\r\n\r\n\r\nexport const TextBox = (props: TextboxType & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element => {\r\n    const hoverIndex = $<number>(null)\r\n    const firstH = $<number>(null)\r\n    const lastH = $<number>(null)\r\n    const totH = $<number>(null)\r\n\r\n    const spanHeightsRef = store({})\r\n\r\n    store.on(spanHeightsRef, () => {\r\n        const heights = Object.keys(spanHeightsRef)\r\n            .map(key => spanHeightsRef[key].clientHeight)\r\n        const firsth = heights[0]\r\n        const lasth = heights[heights.length - 1]\r\n        const toth = heights.reduce((accumulator, currentValue) => accumulator + currentValue, 0)\r\n        totH(toth)\r\n        firstH(firsth)\r\n        lastH(lasth)\r\n    })\r\n\r\n    const unsetHover = () => {\r\n        hoverIndex(null)\r\n        props.hoverArrow(false)\r\n    }\r\n\r\n    // Set & unset hover state\r\n    const onSpanHover = (index: number, lastIndex: number, numChildren: number) => {\r\n        hoverIndex(index)\r\n        const { static: rctStatic, arw: arrow, pos: position, hoverArrow } = props\r\n        if (!rctStatic &&\r\n            ((index === 0 && (isSide(position.side, 'bottom') || isAlignA(arrow, 'v-start'))) ||\r\n                (index === lastIndex && (isSide(position.side, 'top') || isAlignA(arrow, 'v-end'))) ||\r\n                numChildren === 1)) {\r\n            return hoverArrow(true)\r\n        }\r\n        return hoverArrow(false)\r\n    }\r\n\r\n    const {\r\n        arw: arrow,\r\n        pos: position,\r\n        lines: lineSeparated,\r\n        static: tpStatic,\r\n        textboxWidth: width,\r\n        shadowColor: shCol,\r\n        shadowShape: shShape,\r\n        move,\r\n        backgroundColor,\r\n        padding,\r\n        borderRadius,\r\n        hoverBackground,\r\n        hoverColor,\r\n        color,\r\n        alert,\r\n        flat,\r\n        children,\r\n        class: cls, className\r\n    } = props\r\n\r\n    const numberChildren = Array.isArray(children) ? children.length : 1\r\n    const lastIndex = numberChildren - 1\r\n\r\n    const adjChildren = [children].flat().map((child, index) => {\r\n        const hover = useMemo(() => !tpStatic && $$(hoverIndex) === index)\r\n        const nhover = useMemo(() => !$$(hover))\r\n        const style = { borderBottom: () => ($$(lineSeparated) && lastIndex !== index) ? $$(lineSeparated) : undefined }\r\n\r\n        const childProps = {\r\n            // ...child.props,\r\n            ref: span => spanHeightsRef[`span${index + 1}`] = span,\r\n            class: [padding, {\r\n                'whitespace-nowrap': () => $$(width) === 'auto', [$$(hoverColor)]: hover, [$$(hoverBackground)]: hover, [$$(color)]: nhover,\r\n                [$$(backgroundColor)]: nhover,\r\n                [$$(lineSeparated)]: () => ($$(lineSeparated) && lastIndex !== index)\r\n            },],\r\n            // style,\r\n            onMouseOver: () => onSpanHover(index, lastIndex, numberChildren)\r\n        }\r\n        //@ts-ignore\r\n        return jsx(child, { ...childProps })\r\n    })\r\n    const calcHPos = (align: ObservableMaybe<Align>, left: string, center: string, right: string) => {\r\n        return isAlign(align, 'center')\r\n            ? center : isAlign(align, 'left') ? left : right\r\n    }\r\n    const calcVPos = (perc: number, elHeight: number, divider: number, adjMove: number, totHeight?: number) => {\r\n        return `calc(${perc}% - ${totHeight || 0}px - ${elHeight}px/${divider} + ${adjMove || 0}px)`\r\n    }\r\n    // TODO: REfactor\r\n    const calcTopPos = (align: ObservableMaybe<Align>, elHeight: number, totHeight: number) => {\r\n        if ($$(align) === 'center') {\r\n            return calcVPos(50, elHeight, 2, null, totHeight)\r\n        }\r\n        if ($$(align) === 'bottom') {\r\n            return calcVPos(100, elHeight, 2, -12, totHeight)\r\n        }\r\n        return calcVPos(0, elHeight, 2, 12, totHeight)\r\n    }\r\n\r\n    let left = $('')\r\n    let right = $('')\r\n    let top = $('8px')\r\n    // Align: left, center, right\r\n    const hLeftPos = useMemo(() => calcHPos(position.align, '100% - 50px', '50% - 40px', '0% - 30px'))\r\n    const hRightPos = useMemo(() => calcHPos(position.align, '0% - 30px', '50% - 40px', '100% - 50px'))\r\n\r\n    useEffect(() => {\r\n        const { align } = position\r\n        switch ($$(arrow)) {\r\n            case 'h-start':\r\n                left(`calc(${$$(hRightPos)})`)\r\n                break\r\n            case 'h-end':\r\n                right(`calc(${$$(hLeftPos)})`)\r\n                break\r\n            case 'v-start':\r\n                top(calcTopPos(align, $$(firstH), null))\r\n                break\r\n            case 'v-end':\r\n                top(calcTopPos(align, $$(lineSeparated) ? -$$(lastH) + 1 : -$$(lastH), $$(totH)))\r\n                break\r\n            case 'v-center':\r\n                top(`calc(0% - ${$$(totH)}px/2 + 11px)`)\r\n                if (isAlign(align, 'center')) {\r\n                    top(`calc(50% - ${$$(totH)}px/2)`)\r\n                }\r\n                if (isAlign(align, 'bottom')) {\r\n                    top(`calc(100% - ${$$(totH)}px/2 - 11px)`)\r\n                }\r\n                break\r\n            default:\r\n                break\r\n        }\r\n\r\n        switch ($$(position.side)) {\r\n            case 'top':\r\n                top(calcVPos(0, $$(totH), 1, 13))\r\n                break\r\n            case 'left':\r\n                right('8px')\r\n                break\r\n            case 'right':\r\n                left('8px')\r\n                break\r\n            default:\r\n                break\r\n        }\r\n    })\r\n\r\n    const textBoxWidthValue = useMemo(() => {\r\n        let textBoxWidthValue: number | string = $$(width)\r\n\r\n        if (textBoxWidthValue !== 'auto') {\r\n            textBoxWidthValue = Number($$(width).slice(0, -2))\r\n            if (move.left > 0) textBoxWidthValue += move.left\r\n            if (move.right > 0) textBoxWidthValue += move.right\r\n        }\r\n\r\n        return textBoxWidthValue\r\n    })\r\n\r\n    const boxStyle = {\r\n        left,\r\n        right,\r\n        top,\r\n        width: textBoxWidthValue,\r\n        borderRadius\r\n    }\r\n\r\n    const shColAdj = useMemo(() => $$(shCol).substr(0, $$(shCol).lastIndexOf(',')).replace(/[)]/g, ','))\r\n    const shadow = useMemo(() => `${$$(shShape)} ${$$(shCol)}, 0 0 3px ${$$(shColAdj)}, 0.1), 0 0 0 1px ${$$(shColAdj)}, 0.15)`)\r\n    const boxShadow = useMemo(() => $$(flat) ? null : $$(shadow))\r\n    const alertStyle = useMemo(() => $$(alert) ? 'rpt-alert' : '')\r\n    const rgb = useMemo(() => $$(alert) || 'rgb(248, 109, 109)')\r\n    const alertShadow = useMemo(() => $$(alert) ? `0 0 0 ${$$(rgb).slice(0, $$(rgb).length - 1)}, 0.4)` : null)\r\n    const noNeg = (number: number) => number > 0 ? number : 0\r\n\r\n    return (\r\n        <div\r\n            class={[`absolute animation-none`, alertStyle, cls ?? className]}\r\n            style={{\r\n                ...boxStyle,\r\n                boxShadow: alertShadow,\r\n                padding: `${move.down}px ${move.left}px ${move.up}px ${move.right}px`\r\n            }}\r\n        >\r\n            <div\r\n                class={[`absolute animation-none w-full h-full z-0`, borderRadius]}\r\n                style={{\r\n                    boxShadow,\r\n                    height: () => `calc(100% - ${noNeg(move.down) + noNeg(move.up)}px)`,\r\n                    width: () => `calc(100% - ${noNeg(move.left) + noNeg(move.right)}px)`\r\n                }}\r\n            />\r\n            <div\r\n                class={[`relative z-[2] w-full`, backgroundColor, borderRadius]}\r\n                onMouseLeave={unsetHover}\r\n            >\r\n                <div\r\n                    class={[!tpStatic ? '[&_span]:cursor-pointer w-full' : null, borderRadius, 'overflow-hidden']}>\r\n                    {adjChildren}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\n","import { $$, ObservableMaybe, useMemo, type JSX } from 'woby'\r\n//\r\n\r\nexport const Arrow = ({ isHovered, hovBkg, bkgCol, flat }: { isHovered: ObservableMaybe<boolean>, hovBkg: ObservableMaybe<string>, bkgCol: ObservableMaybe<string>, flat?: ObservableMaybe<boolean> }): JSX.Element => {\r\n    const backgroundColor = useMemo(() => $$(isHovered) ? $$(hovBkg) : $$(bkgCol))\r\n    // const boxShadow = flat ? null : 'shadow-[rgba(0,0,0,.18)0_0_0_1px]'\r\n    const boxShadow = useMemo(() => $$(flat) ? null : '[box-shadow:rgba(0,0,0,0.18)0px_0px_0px_1px]')\r\n\r\n    return <div class={[`rotate-45 w-[14px] h-[14px] m-[3px] z-[1]`, backgroundColor, boxShadow]} />\r\n}\r\n","import { $$, $, useEffect, ObservableMaybe, Observable, isObservable, useMemo, getMeta, type JSX } from 'woby'\r\n\r\nimport { Align, Side, TextBox, isSide } from './TextBox'\r\nimport { Arrow } from './Arrow'\r\n\r\n//import cssRules from './Tooltip/styles'\r\nimport '../dist/output.css'\r\n\r\nexport type TooltipType = {\r\n    /** tailwind\r\n    * border-b border-b-[#ececec]\r\n    */\r\n    lineSeparated?: ObservableMaybe<boolean | string>, position?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    hoverBackground?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    backgroundColor?: ObservableMaybe<string>,\r\n    arrowAlign?: ObservableMaybe<Align>, moveDown?: ObservableMaybe<string>,\r\n    moveRight?: ObservableMaybe<string>, moveLeft?: ObservableMaybe<string>,\r\n    moveUp?: ObservableMaybe<string>, textAlign?: ObservableMaybe<string>, fontFamily?: ObservableMaybe<string>, fontWeight?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    fontSize?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    color?: ObservableMaybe<string>, animation?: ObservableMaybe<string>, zIndex?: ObservableMaybe<string>, flat?: ObservableMaybe<boolean>, show?: ObservableMaybe<boolean>,\r\n    /** tailwind */\r\n    hoverColor?: ObservableMaybe<string>,\r\n    /** no tailwind */\r\n    textboxWidth?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    padding?: ObservableMaybe<string>,\r\n    /** tailwind */\r\n    borderRadius?: ObservableMaybe<string>, shadowColor?: ObservableMaybe<string>, shadowShape?: ObservableMaybe<string>,\r\n    static?: ObservableMaybe<boolean>, alert?: ObservableMaybe<string>,\r\n    children?: JSX.Element\r\n}\r\n\r\nexport const Tooltip = <T extends HTMLElement>(properties: TooltipType & JSX.HTMLAttributes<HTMLDivElement> & { parentRef?: Observable<HTMLElement>, parent?: JSX.Child, containerClass?: JSX.Class /* | ((props: { ref: Refs }) => Child), */ } = {}): JSX.Element => {\r\n    const props = {\r\n        /** tailwind */\r\n        hoverBackground: 'bg-[#ececec]',\r\n        /** tailwind */\r\n        hoverColor: 'text-[black]',\r\n        /** tailwind */\r\n        backgroundColor: 'bg-[white]',\r\n        /** not tailwind */\r\n        textboxWidth: '150px',\r\n        /** tailwind */\r\n        fontSize: '[font-size:inherit]',\r\n        /** tailwind */\r\n        color: 'text-inherit',\r\n        borderRadius: 'rounded-[5px]',\r\n        shadowColor: 'rgba(0,0,0,0.251)', shadowShape: '0 8px 15px', moveDown: '0px', moveRight: '0px', moveLeft: '0px', moveUp: '0px',\r\n        position: 'bottom center', arrowAlign: $<Align>('start'), textAlign: 'left', fontFamily: 'inherit', fontWeight: 'bold',\r\n\r\n        zIndex: '100', animation: '', show: false, ...properties\r\n    }\r\n\r\n    const { position: pos, lineSeparated: lines, arrowAlign: arwAlign,\r\n        hoverBackground, backgroundColor,\r\n        moveDown, moveRight, moveLeft, moveUp,\r\n        textAlign, fontFamily, fontWeight, fontSize, color, zIndex, animation, flat, parentRef: pf, parent: Parent,\r\n        // shadowColor, shadowShape, textboxWidth, padding, borderRadius, hoverColor,\r\n        containerClass,\r\n    } = props\r\n\r\n    const show = /* $$(parent) ? props.show : */ (isObservable(props.show) ? props.show : $(props.show))\r\n    const parentRef: Observable<HTMLElement> = isObservable(pf) ? pf : $(pf)\r\n\r\n    useEffect(() => {\r\n        const p = $$(parentRef)\r\n        if (!p) return\r\n\r\n        const on = () => show(true)\r\n        const off = () => show(false)\r\n        p.addEventListener('mouseenter', on)\r\n        p.addEventListener('mouseleave', off)\r\n\r\n        return () => {\r\n            p.removeEventListener('mouseenter', on)\r\n            p.removeEventListener('mouseleave', off)\r\n        }\r\n    })\r\n\r\n    const hoverArrow = $(false)\r\n    const mount = $(true)\r\n    // const tooltipRef = useRef(null)\r\n    // const {\r\n    //     lineSeparated = '1px solid #ececec', position = 'right center', hoverBackground = '#ececec', backgroundColor = 'white', arrowAlign = 'start', moveDown = '0px',\r\n    //     moveRight = '0px', moveLeft = '0px', moveUp = '0px', textAlign = 'left', fontFamily = 'inherit', fontWeight = 'bold', fontSize = 'inherit', color = 'inherit',\r\n    //     animation = '', zIndex = '100', flat,\r\n    //     show\r\n    // } = props\r\n\r\n    // useEffect(() => {\r\n    // //     // Injecting styles directly into header\r\n    // //     // if (!document.getElementById('rpt-css')) {\r\n    // //     //     const $style = document.createElement('style')\r\n    // //     //     $style.type = 'text/css'\r\n    // //     //     $style.id = 'rpt-css'\r\n    // //     //     document.head.appendChild($style)\r\n    // //     //     $style.innerHTML = cssRules\r\n    // //     // }\r\n\r\n    // //     // Basic prop type checking\r\n    // //     Object.keys(props).forEach((propName) => {\r\n    // //         const type = typeof $$(props[propName])\r\n    // //         const text = `React-power-tooltip: [${propName}] prop should be a`\r\n    // //         if (propName !== 'children' && type !== 'boolean' && type !== 'string') {\r\n    // //             // eslint-disable-next-line\r\n    // //             console.error(`${text} string (check also units)`)\r\n    // //         }\r\n    // //     })\r\n    // // })\r\n\r\n    // useEffect(() => {\r\n    //     show(props.show())\r\n    // })\r\n\r\n    useEffect(() => {\r\n        if ($$(show)) mount(true)\r\n        if (!$$(animation)) mount(false)\r\n    })\r\n\r\n    // const hoverArrowHandler = (bool) => {\r\n    //     setHoverArrow(bool)\r\n    // }\r\n\r\n    // const {\r\n    //     hoverBackground = '#ececec', hoverColor = 'black', backgroundColor = 'white', textboxWidth = '150px', padding = '15px 20px', borderRadius = '5px',\r\n    //     shadowColor = 'rgba(0,0,0,0.251)', shadowShape = '0 8px 15px', moveDown = '0px', moveRight = '0px', moveLeft = '0px', moveUp = '0px',\r\n    //     position: pos = 'right center', arrowAlign: arwAlign = 'start', textAlign = 'left', fontFamily = 'inherit', fontWeight = 'bold', fontSize = 'inherit', color = 'inherit',\r\n    //     zIndex = '100', animation = '', lineSeparated: lines,\r\n    //     flat,\r\n    // } = props\r\n\r\n\r\n    // const { lineSeparated: lines, position: pos, hoverBackground, backgroundColor, arrowAlign: arwAlign, moveDown, moveRight, moveLeft, moveUp, textAlign, fontFamily, fontWeight, fontSize, color, animation, zIndex, flat } = props\r\n\r\n    // Sets if false no line; if true default line; if string custom line;\r\n    const lineSeparated: Observable<string> = typeof ($$(lines)) === 'boolean'\r\n        ? $('border-b border-b-[#ececec]') : (isObservable(lines) ? lines : $(lines)) as Observable<string>\r\n\r\n    const position = {\r\n        side: $$(pos).split(' ')[0] as Side,\r\n        align: $$(pos).split(' ')[1] as Align,\r\n    }\r\n\r\n    const arrow = $($$(arwAlign))//isObservable(arwAlign) ? arwAlign : $(arwAlign)\r\n\r\n    const { side, align } = position\r\n    const classes = ['absolute flex']\r\n    let tooltipStyle = {}\r\n    let bottom\r\n\r\n    // const arrange = (top, left, right, height, width, cssSel) => {\r\n    //     tooltipStyle = { top, left, right, height, width }\r\n    //     classes.push(cssSel)\r\n    // }\r\n\r\n    switch (side) {\r\n        case 'bottom':\r\n            classes.push('top-full left-0 w-full justify-center')\r\n            break\r\n        case 'top':\r\n            classes.push('left-0 w-full justify-center')\r\n            bottom = '100%'\r\n            break\r\n        case 'right':\r\n            classes.push('top-0 left-full h-full justify-start')\r\n            break\r\n        default:\r\n            classes.push('top-0 right-full h-full justify-end')\r\n            break\r\n    }\r\n\r\n    const onAxis = {\r\n        y: isSide(position.side, 'top') || isSide(position.side, 'bottom'),\r\n        x: isSide(position.side, 'left') || isSide(position.side, 'right')\r\n    }\r\n\r\n    arrow((onAxis.y ? `h-${$$(arrow)}` : `v-${$$(arrow)}`) as Align)\r\n\r\n    const num = str => Number(str.slice(0, -2))\r\n    const move = {\r\n        down: num(moveDown),\r\n        up: num(moveUp),\r\n        left: num(moveLeft),\r\n        right: num(moveRight)\r\n    }\r\n\r\n    const oneMovePropIsNeg = move.down < 0 || move.up < 0\r\n        || move.left < 0 || move.right < 0\r\n\r\n    switch (align) {\r\n        case 'left':\r\n            if (onAxis.y) classes.push('!justify-start')\r\n            break\r\n        case 'right':\r\n            if (onAxis.y) classes.push('!justify-end')\r\n            break\r\n        case 'bottom':\r\n            if (onAxis.x) classes.push('items-end')\r\n            break\r\n        case 'top':\r\n            break\r\n        default:\r\n            if (onAxis.x) {\r\n                classes.push('items-center')\r\n                if (!oneMovePropIsNeg) {\r\n                    move.down *= 2\r\n                    move.up *= 2\r\n                }\r\n            }\r\n            if (onAxis.y && !oneMovePropIsNeg) {\r\n                move.right *= 2\r\n                move.left *= 2\r\n            }\r\n            break\r\n    }\r\n\r\n    const adjustment = `${move.down}px ${move.left}px ${move.up}px ${move.right}px`\r\n\r\n    tooltipStyle = {\r\n        ...tooltipStyle,\r\n        zIndex,\r\n        color,\r\n        bottom,\r\n        fontSize,\r\n        textAlign,\r\n        fontFamily,\r\n        fontWeight,\r\n        padding: oneMovePropIsNeg ? null : adjustment,\r\n        margin: oneMovePropIsNeg ? adjustment : null,\r\n        animation: () => $$(show) ? `rpt-${$$(animation)} 0.2s` : `rpt-${$$(animation)}-out 0.15s`\r\n    }\r\n\r\n    const e = useMemo(() => ((!$$(animation) && $$(show) && $$(props.children)) || ($$(show) && $$(mount)) && $$(props.children)) ? (\r\n        <div\r\n            className={classes}\r\n            style={tooltipStyle}\r\n            onAnimationEnd={() => { if (!$$(show) && $$(animation)) mount(false) }}\r\n        >\r\n            <div class='flex justify-center'            >\r\n                <Arrow\r\n                    isHovered={hoverArrow}\r\n                    hovBkg={hoverBackground}\r\n                    bkgCol={backgroundColor}\r\n                    flat={flat}\r\n                />\r\n                <TextBox\r\n                    {...props}\r\n                    hoverArrow={hoverArrow}\r\n                    lines={lineSeparated}\r\n                    pos={position}\r\n                    arw={arrow}\r\n                    move={move}\r\n                />\r\n            </div>\r\n        </div>\r\n    ) : null\r\n    )\r\n\r\n    return useMemo(() => $$(Parent) ? <div class={[containerClass ?? 'relative']} ref={parentRef}>{Parent}{e}</div> : e)\r\n}\r\n\r\n\r\n\r\n"],"names":["lastIndex","arrow","position","jsx","left","right","textBoxWidthValue"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../woby-styled/dist/index.es.js","../../use-woby/dist/index.es.js","../src/Tooltip.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import { useMemo, $$, useEffect } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nimport { nanoid } from \"nanoid\";\nconst isTemp = (s) => !!s.raw;\nconst extract = (C, props, classNames) => {\n  const { className, ...p } = props;\n  const cls = p.class;\n  delete p.class;\n  return /* @__PURE__ */ jsx(C, { class: [classNames, cls, className], ...p });\n};\nfunction style$1(comp) {\n  function tw2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => extract(C, props, r) : r;\n    }\n    return style$1(strings).tw;\n  }\n  return { comp, tw: tw2 };\n}\nconst tw = style$1().tw;\nfunction style(comp) {\n  function css2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const r = useMemo(() => strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\"));\n      return C ? (props) => /* @__PURE__ */ jsx(C, { style: r, ...props }) : r;\n    }\n    return style(strings).css;\n  }\n  return { comp, css: css2 };\n}\nconst css = style().css;\nconst append = (child, parent) => {\n  return useEffect(() => {\n    const [c, p] = [$$($$(child)), $$($$(parent))];\n    p.appendChild(c);\n    const um = () => p.removeChild(c);\n    return um;\n  });\n};\nfunction Styled(comp) {\n  function styled2(strings, ...values) {\n    if (isTemp(strings)) {\n      const C = comp;\n      const N = \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `.${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: N, children: r }), document.head);\n      });\n      return C ? (props) => extract(C, props, N) : N;\n    }\n    return Styled(strings).styled;\n  }\n  return { comp, styled: styled2 };\n}\nconst styled = Styled().styled;\nfunction kf(name, id = false) {\n  function keyframes2(strings, ...values) {\n    if (isTemp(strings)) {\n      const N = name ?? \"_\" + nanoid(10);\n      useEffect(() => {\n        const r = `@keyframes ${N} {\n${strings.map((str, i) => i < values.length ? str + $$(values[i]) : str).join(\"\")}\n}`;\n        return append(/* @__PURE__ */ jsx(\"style\", { id: id ? N : void 0, children: r }), document.head);\n      });\n      return N;\n    }\n    return kf(strings);\n  }\n  return keyframes2;\n}\nconst keyframes = kf();\nexport {\n  append,\n  css,\n  keyframes,\n  styled,\n  tw\n};\n//# sourceMappingURL=index.es.js.map\n","import { $, $$, useEffect, useMemo, store, isStore, isObservable, createContext, useContext, isArray as isArray$1, setRef } from \"woby\";\nimport { jsx } from \"woby/jsx-runtime\";\nfunction useBoolean(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const setTrue = () => value(true);\n  const setFalse = () => value(false);\n  const toggle = () => value((x) => !x);\n  return { value, setTrue, setFalse, toggle };\n}\nfunction useEventListener(element, eventName, handler, options) {\n  const savedHandler = $(handler);\n  useEffect(() => {\n    const targetElement = $$(element) ?? window;\n    if (!(targetElement && targetElement.addEventListener)) return void 0;\n    const listener = (event) => savedHandler()(event);\n    targetElement.addEventListener(eventName.toLowerCase(), listener, options);\n    return () => {\n      targetElement.removeEventListener(eventName.toLowerCase(), listener, options);\n    };\n  });\n}\nfunction useClickAnyWhere(handler) {\n  useEventListener(window, \"click\", (event) => {\n    handler(event);\n  });\n}\nfunction useCopyToClipboard() {\n  const copiedText = $(null);\n  const copy = async (text) => {\n    if (!(navigator == null ? void 0 : navigator.clipboard)) {\n      console.warn(\"Clipboard not supported\");\n      return false;\n    }\n    try {\n      await navigator.clipboard.writeText(text);\n      copiedText(text);\n      return true;\n    } catch (error) {\n      console.warn(\"Copy failed\", error);\n      copiedText(null);\n      return false;\n    }\n  };\n  return [copiedText, copy];\n}\nfunction useCounter(initialValue) {\n  const count = $($$(initialValue) || 0);\n  const increment = () => count((x) => x + 1);\n  const decrement = () => count((x) => x - 1);\n  const reset = () => count($$(initialValue) || 0);\n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  };\n}\nfunction useInterval(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!$$(delay) && $$(delay) !== 0) {\n      return void 0;\n    }\n    const id = setInterval(() => savedCallback()(), $$(delay));\n    return () => clearInterval(id);\n  });\n}\nfunction useCountdown(countdownOption) {\n  let isDeprecated = false;\n  let countStart, intervalMs, isIncrement, countStop;\n  if (\"seconds\" in countdownOption) {\n    console.warn(\n      \"[useCountdown:DEPRECATED] new interface is already available (see https://use-woby.com/react-hook/use-countdown), the old version will retire on use-woby@3.\"\n    );\n    isDeprecated = true;\n    countStart = countdownOption.seconds;\n    intervalMs = countdownOption.interval;\n    isIncrement = countdownOption.isIncrement;\n  } else {\n    ({ countStart, intervalMs, isIncrement, countStop } = countdownOption);\n  }\n  intervalMs = intervalMs ?? 1e3;\n  isIncrement = isIncrement ?? false;\n  countStop = countStop ?? 0;\n  const {\n    count,\n    increment,\n    decrement,\n    reset: resetCounter\n  } = useCounter(countStart);\n  const {\n    value: isCountdownRunning,\n    setTrue: startCountdown,\n    setFalse: stopCountdown\n  } = useBoolean(false);\n  const resetCountdown = () => {\n    stopCountdown();\n    resetCounter();\n  };\n  const countdownCallback = () => {\n    if (count() === $$(countStop)) {\n      stopCountdown();\n      return;\n    }\n    if ($$(isIncrement)) {\n      increment();\n    } else {\n      decrement();\n    }\n  };\n  const delay = useMemo(() => $$(isCountdownRunning) ? $$(intervalMs) : null);\n  useInterval(countdownCallback, delay);\n  return isDeprecated ? [\n    count,\n    {\n      start: startCountdown,\n      stop: stopCountdown,\n      reset: resetCountdown\n    }\n  ] : [\n    count,\n    {\n      startCountdown,\n      stopCountdown,\n      resetCountdown\n    }\n  ];\n}\nconst localStoreDic = {};\nfunction useLocalStorage(key, initialValue) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return $$(initialValue);\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? parseJSON$1(item) : $$(initialValue);\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return $$(initialValue);\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"local-storage\"));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON$1(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useMediaQuery(query) {\n  const getMatches = (query2) => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query2).matches;\n    }\n    return false;\n  };\n  const matches = $(getMatches(query));\n  function handleChange() {\n    matches(getMatches(query));\n  }\n  useEffect(() => {\n    const matchMedia = window.matchMedia(query);\n    handleChange();\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener(\"change\", handleChange);\n    }\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener(\"change\", handleChange);\n      }\n    };\n  });\n  return matches;\n}\nconst COLOR_SCHEME_QUERY$1 = \"(prefers-color-scheme: dark)\";\nfunction useDarkMode(defaultValue) {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY$1);\n  const darkmode = useLocalStorage(\n    \"useVoby-ts-dark-mode\",\n    $$(defaultValue) ?? isDarkOS() ?? false\n  );\n  useEffect(() => {\n    darkmode(isDarkOS());\n  });\n  return {\n    darkmode,\n    toggle: () => darkmode((prev) => !prev),\n    enable: () => darkmode(true),\n    disable: () => darkmode(false)\n  };\n}\nfunction useDebounce(value, delay) {\n  const debouncedValue = $($$(value));\n  useEffect(() => {\n    const timer = setTimeout(() => debouncedValue($$(value)), $$(delay) || 500);\n    return () => {\n      clearTimeout(timer);\n    };\n  });\n  return debouncedValue;\n}\nconst useIsomorphicLayoutEffect = useEffect;\nfunction useDocumentTitle(title) {\n  useIsomorphicLayoutEffect(() => {\n    window.document.title = $$(title);\n  });\n}\nfunction useElementSize() {\n  const ref = $(null);\n  const size = $({\n    width: 0,\n    height: 0\n  });\n  const handleSize = () => {\n    var _a, _b;\n    size({\n      width: ((_a = ref()) == null ? void 0 : _a.offsetWidth) || 0,\n      height: ((_b = ref()) == null ? void 0 : _b.offsetHeight) || 0\n    });\n  };\n  useEffect(() => {\n    console.log(ref());\n  });\n  useEventListener(ref, \"resize\", handleSize);\n  return [ref, size];\n}\nfunction useEventCallback(fn) {\n  const ref = $(() => {\n    throw new Error(\"Cannot call an event handler while rendering.\");\n  });\n  useIsomorphicLayoutEffect(() => {\n    ref(fn);\n  });\n  return (...args) => ref()(...args);\n}\nfunction useFetch(url, options) {\n  const cache = $({});\n  const cancelRequest = $(false);\n  const state = store({\n    error: void 0,\n    data: void 0,\n    loading: function() {\n      return this;\n    },\n    fetched: function(data) {\n      this.data = data;\n    },\n    Error: function(error) {\n      this.error = error;\n    }\n  });\n  useEffect(() => {\n    const u = $$(url);\n    if (!u) return void cancelRequest(false);\n    const fetchData = async () => {\n      state.loading();\n      if (cache()[u]) {\n        state.fetched(cache()[u]);\n        return;\n      }\n      try {\n        const response = await fetch(u, options);\n        if (!response.ok) {\n          throw new Error(response.statusText);\n        }\n        const data = await response.json();\n        cache()[u] = data;\n        if (cancelRequest()) return;\n        state.fetched(data);\n      } catch (error) {\n        if (cancelRequest()) return;\n        state.Error(error);\n      }\n    };\n    void fetchData();\n    return () => {\n      cancelRequest(true);\n    };\n  });\n  return state;\n}\nfunction useHover(elementRef) {\n  const value = $(false);\n  const handleMouseEnter = () => value(true);\n  const handleMouseLeave = () => value(false);\n  useEventListener(elementRef, \"mouseenter\", handleMouseEnter);\n  useEventListener(elementRef, \"mouseleave\", handleMouseLeave);\n  return value;\n}\nfunction useImageOnLoad() {\n  const isLoaded = $(false);\n  const handleImageOnLoad = () => {\n    isLoaded(true);\n  };\n  const css = useMemo(() => ({\n    // Thumbnail style.\n    thumbnail: {\n      visibility: isLoaded() ? \"hidden\" : \"visible\",\n      filter: \"blur(8px)\",\n      transition: \"visibility 0ms ease-out 500ms\"\n    },\n    // Full image style.\n    fullSize: {\n      opacity: isLoaded() ? 1 : 0,\n      transition: \"opacity 500ms ease-in 0ms\"\n    }\n  }));\n  return { handleImageOnLoad, css };\n}\nfunction useIntersectionObserver(elementRef, {\n  threshold = 0,\n  root = null,\n  rootMargin = \"0%\",\n  freezeOnceVisible = false\n}) {\n  var _a;\n  const entry = $();\n  const frozen = ((_a = entry()) == null ? void 0 : _a.isIntersecting) && freezeOnceVisible;\n  const updateEntry = ([e]) => {\n    entry(e);\n  };\n  useEffect(() => {\n    const node = elementRef();\n    const hasIOSupport = !!window.IntersectionObserver;\n    if (!hasIOSupport || frozen || !node)\n      return;\n    const observerParams = { threshold, root, rootMargin };\n    const observer = new IntersectionObserver(updateEntry, observerParams);\n    observer.observe(node);\n    return () => observer.disconnect();\n  });\n  return entry;\n}\nfunction useLockedBody(initialLocked = false, rootId = \"___gatsby\") {\n  const locked = $(initialLocked);\n  useIsomorphicLayoutEffect(() => {\n    if (!locked()) {\n      return;\n    }\n    const originalOverflow = document.body.style.overflow;\n    const originalPaddingRight = document.body.style.paddingRight;\n    document.body.style.overflow = \"hidden\";\n    const root = document.getElementById(rootId);\n    const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0;\n    if (scrollBarWidth) {\n      document.body.style.paddingRight = `${scrollBarWidth}px`;\n    }\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      if (scrollBarWidth) {\n        document.body.style.paddingRight = originalPaddingRight;\n      }\n    };\n  });\n  useEffect(() => {\n    if (locked() !== initialLocked) {\n      locked(initialLocked);\n    }\n  });\n  return locked;\n}\nfunction isPrimitive$1(test) {\n  return test !== Object(test);\n}\nfunction useMap(initialState) {\n  function addElements(entries) {\n    const map2 = {};\n    if (entries instanceof Map) {\n      entries.forEach((value, key) => {\n        map2[key] = value;\n      });\n    } else if (Array.isArray(entries)) {\n      for (let value of entries) {\n        map2[value[0]] = value[1];\n      }\n    } else if (isPrimitive$1(entries) == true) {\n      return store({});\n    } else {\n      Object.assign(map2, entries);\n    }\n    return store(map2);\n  }\n  const map = initialState instanceof Map || Array.isArray(initialState) || isPrimitive$1(initialState) ? addElements(initialState) : isStore(initialState) ? initialState : store(initialState);\n  const actions = {\n    set: function(key, value) {\n      map[key] = value;\n    },\n    setAll: function(entries) {\n      this.reset();\n      if (entries instanceof Map) {\n        entries.forEach((value, key) => {\n          map[key] = value;\n        });\n      } else if (Array.isArray(entries)) {\n        for (let value of entries) {\n          map[value[0]] = value[1];\n        }\n      } else if (isPrimitive$1(entries) == true) {\n        return;\n      } else {\n        this.reset();\n        Object.assign(map, entries);\n      }\n    },\n    remove: (key) => delete map[key],\n    reset: function() {\n      Object.getOwnPropertyNames(map).forEach((prop) => delete map[prop]);\n    },\n    entries: () => Object.entries(map)\n  };\n  return [map, actions];\n}\nfunction useOnClickOutside(ref, handler, mouseEvent = \"mousedown\") {\n  useEventListener(window, mouseEvent, (event) => {\n    const el = ref();\n    if (!el || el.contains(event.target)) {\n      return;\n    }\n    handler(event);\n  });\n}\nfunction useReadLocalStorage(key) {\n  if (localStoreDic[key])\n    return localStoreDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return null;\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : null;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return null;\n    }\n  };\n  const storedValue = $(readValue());\n  localStoreDic[key] = storedValue;\n  useEffect(() => {\n    storedValue(readValue());\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"local-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction useScreen() {\n  const getScreen = () => {\n    if (typeof window !== \"undefined\" && window.screen) {\n      return window.screen;\n    }\n    return void 0;\n  };\n  const screen = $(getScreen());\n  function handleSize() {\n    screen(getScreen());\n  }\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return screen;\n}\nconst cachedScriptStatuses = {};\nfunction getScriptNode(src) {\n  const node = document.querySelector(\n    `script[src=\"${src}\"]`\n  );\n  const status = node == null ? void 0 : node.getAttribute(\"data-status\");\n  return {\n    node,\n    status\n  };\n}\nfunction useScript(src, options) {\n  const status = $((() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return \"idle\";\n    }\n    if (typeof window === \"undefined\") {\n      return \"loading\";\n    }\n    return cachedScriptStatuses[src] ?? \"loading\";\n  })());\n  useEffect(() => {\n    if (!src || (options == null ? void 0 : options.shouldPreventLoad)) {\n      return;\n    }\n    const cachedScriptStatus = cachedScriptStatuses[src];\n    if (cachedScriptStatus === \"ready\" || cachedScriptStatus === \"error\") {\n      status(cachedScriptStatus);\n      return;\n    }\n    const script = getScriptNode(src);\n    let scriptNode = script.node;\n    if (!scriptNode) {\n      scriptNode = document.createElement(\"script\");\n      scriptNode.src = src;\n      scriptNode.async = true;\n      scriptNode.setAttribute(\"data-status\", \"loading\");\n      document.body.appendChild(scriptNode);\n      const setAttributeFromEvent = (event) => {\n        const scriptStatus = event.type === \"load\" ? \"ready\" : \"error\";\n        scriptNode == null ? void 0 : scriptNode.setAttribute(\"data-status\", scriptStatus);\n      };\n      scriptNode.addEventListener(\"load\", setAttributeFromEvent);\n      scriptNode.addEventListener(\"error\", setAttributeFromEvent);\n    } else {\n      status(script.status ?? cachedScriptStatus ?? \"loading\");\n    }\n    const setStateFromEvent = (event) => {\n      const newStatus = event.type === \"load\" ? \"ready\" : \"error\";\n      status(newStatus);\n      cachedScriptStatuses[src] = newStatus;\n    };\n    scriptNode.addEventListener(\"load\", setStateFromEvent);\n    scriptNode.addEventListener(\"error\", setStateFromEvent);\n    return () => {\n      if (scriptNode) {\n        scriptNode.removeEventListener(\"load\", setStateFromEvent);\n        scriptNode.removeEventListener(\"error\", setStateFromEvent);\n      }\n      if (scriptNode && (options == null ? void 0 : options.removeOnUnmount)) {\n        scriptNode.remove();\n      }\n    };\n  });\n  return status;\n}\nconst sessionStorageDic = {};\nfunction useSessionStorage(key, initialValue) {\n  if (sessionStorageDic[key])\n    return sessionStorageDic[key];\n  const readValue = () => {\n    if (typeof window === \"undefined\") {\n      return initialValue;\n    }\n    try {\n      const item = window.sessionStorage.getItem(key);\n      return item ? parseJSON(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading sessionStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n  const storedValue = $(readValue());\n  useEffect(() => {\n    if (typeof window == \"undefined\") {\n      console.warn(\n        `Tried setting sessionStorage key “${key}” even though environment is not a client`\n      );\n    }\n    try {\n      const newValue = storedValue();\n      window.sessionStorage.setItem(key, JSON.stringify(newValue));\n      window.dispatchEvent(new Event(\"session-storage\"));\n    } catch (error) {\n      console.warn(`Error setting sessionStorage key “${key}”:`, error);\n    }\n  });\n  const handleStorageChange = (event) => {\n    if ((event == null ? void 0 : event.key) && event.key !== key) {\n      return;\n    }\n    storedValue(readValue());\n  };\n  useEventListener(window, \"storage\", handleStorageChange);\n  useEventListener(window, \"session-storage\", handleStorageChange);\n  return storedValue;\n}\nfunction parseJSON(value) {\n  try {\n    return value === \"undefined\" ? void 0 : JSON.parse(value ?? \"\");\n  } catch {\n    console.log(\"parsing error on\", { value });\n    return void 0;\n  }\n}\nfunction useSsr() {\n  const isDOM = typeof window !== \"undefined\" && window.document && window.document.documentElement;\n  return {\n    isBrowser: isDOM,\n    isServer: !isDOM\n  };\n}\nfunction useStep(maxStep) {\n  const ms = $$(maxStep);\n  const currentStep = $(1);\n  const canGoToNextStep = useMemo(() => currentStep() + 1 <= ms);\n  const canGoToPrevStep = useMemo(() => currentStep() - 1 >= 1);\n  const setStep = (step) => {\n    const newStep = step instanceof Function ? step(currentStep()) : step;\n    if (newStep >= 1 && newStep <= ms) {\n      currentStep(newStep);\n      return;\n    }\n    throw new Error(\"Step not valid\");\n  };\n  const goToNextStep = () => {\n    if (canGoToNextStep) {\n      currentStep((step) => step + 1);\n    }\n  };\n  const goToPrevStep = () => {\n    if (canGoToPrevStep) {\n      currentStep((step) => step - 1);\n    }\n  };\n  const reset = () => {\n    currentStep(1);\n  };\n  return [\n    currentStep,\n    {\n      goToNextStep,\n      goToPrevStep,\n      canGoToNextStep,\n      canGoToPrevStep,\n      setStep,\n      reset\n    }\n  ];\n}\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nfunction useTernaryDarkMode() {\n  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);\n  const ternaryDarkMode = useLocalStorage(\"use-woby-ternary-dark-mode\", \"system\");\n  const isDarkMode = $(isDarkOS());\n  useEffect(() => {\n    if (ternaryDarkMode() === \"system\") {\n      isDarkMode(isDarkOS());\n    }\n  });\n  useEffect(() => {\n    switch (ternaryDarkMode()) {\n      case \"light\":\n        isDarkMode(false);\n        break;\n      case \"system\":\n        isDarkMode(isDarkOS);\n        break;\n      case \"dark\":\n        isDarkMode(true);\n        break;\n    }\n  });\n  function toggleTernaryDarkMode() {\n    const toggleDict = {\n      light: \"system\",\n      system: \"dark\",\n      dark: \"light\"\n    };\n    ternaryDarkMode((prevMode) => toggleDict[prevMode]);\n  }\n  return {\n    isDarkMode,\n    ternaryDarkMode,\n    toggleTernaryDarkMode\n  };\n}\nfunction useTimeout(callback, delay) {\n  const savedCallback = $(callback);\n  useEffect(() => {\n    if (!delay && delay !== 0) {\n      return;\n    }\n    const id = setTimeout(() => savedCallback()(), delay);\n    return () => clearTimeout(id);\n  });\n}\nfunction useToggle(defaultValue) {\n  const value = $(!!$$(defaultValue));\n  const toggle = () => value((x) => !x);\n  return [value, toggle];\n}\nfunction useWindowSize() {\n  const width = $(0);\n  const height = $(0);\n  const handleSize = () => {\n    width(window.innerWidth);\n    height(window.innerHeight);\n  };\n  useEventListener(window, \"resize\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return { width, height };\n}\nfunction useViewportSize() {\n  const width = $(0);\n  const height = $(0);\n  const offsetLeft = $(0);\n  const offsetTop = $(0);\n  const pageLeft = $(0);\n  const pageTop = $(0);\n  const scale = $(0);\n  const handleSize = () => {\n    width(visualViewport.width);\n    height(visualViewport.height);\n    offsetLeft(visualViewport.offsetLeft);\n    offsetTop(visualViewport.offsetTop);\n    pageLeft(visualViewport.pageLeft);\n    pageTop(visualViewport.pageTop);\n    scale(visualViewport.scale);\n  };\n  useEventListener(visualViewport, \"resize\", handleSize);\n  useEventListener(visualViewport, \"scroll\", handleSize);\n  useEventListener(window, \"pointermove\", handleSize);\n  useIsomorphicLayoutEffect(() => {\n    handleSize();\n  });\n  return {\n    width,\n    height,\n    offsetLeft,\n    offsetTop,\n    pageLeft,\n    pageTop,\n    scale\n  };\n}\nfunction useAspect() {\n  const { width, height } = useWindowSize();\n  return useMemo(() => $$(width) / $$(height));\n}\nconst isPrimitive = (value) => {\n  const t = typeof value;\n  return !(t === \"object\" || t === \"function\");\n};\nfunction mv(target, source) {\n  const targetValue = target;\n  const sourceValue = source;\n  if (typeof targetValue === \"string\" && typeof sourceValue === \"string\")\n    return `${targetValue} ${sourceValue}`.trim();\n  else if (typeof targetValue === \"object\" && typeof sourceValue === \"object\")\n    return { ...targetValue, ...sourceValue };\n  return source;\n}\nconst set = (target, source, merge) => {\n  if (merge)\n    target(mv($$(target), $$(source)));\n  else\n    target($$(source));\n};\nconst assign = (target, source, options) => {\n  if (!source) return target;\n  const { condition: method = \"all\", copyByRef = true, keepTargetNoObservable = false, track = false, merge = [] } = options ?? {};\n  const m = merge.reduce((acc, item) => (acc[item] = true, acc), {});\n  const keys = (() => {\n    switch (method) {\n      case \"new\":\n        return Object.keys(source).filter((key) => !(key in target));\n      case \"old\":\n        return Object.keys(target).filter((key) => key in source);\n      case \"empty\":\n        return Object.keys(source).filter((key) => {\n          const targetValue = target[key];\n          const sourceValue = source[key];\n          const isTargetEmpty = targetValue === void 0 || targetValue === null || targetValue === 0 || isNaN(targetValue) || targetValue === \"\" || Array.isArray(targetValue) && targetValue.length === 0;\n          const isSourceNonEmpty = !(sourceValue === void 0 || sourceValue === null || sourceValue === 0 || isNaN(sourceValue) || sourceValue === \"\" || Array.isArray(sourceValue) && sourceValue.length === 0);\n          return isTargetEmpty && isSourceNonEmpty;\n        });\n      default:\n        return Object.keys(source);\n    }\n  })();\n  keys.forEach((key) => {\n    if (copyByRef) {\n      if (isObservable(target[key])) {\n        set(target[key], source[key], m[key]);\n        if (track && isObservable(source[key]))\n          useEffect(() => set(target[key], source[key], m[key]));\n      } else {\n        const temp = $$(target[key]);\n        target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n        if (m[key])\n          target[key](mv(temp, $$(source[key])));\n      }\n    } else {\n      if (typeof $$(source[key]) === \"object\") {\n        if (isObservable(target[key])) {\n          if (typeof $$(target[key]) === \"object\")\n            assign($$(target[key]), $$(source[key]), options);\n          else {\n            target[key](assign({}, $$(source[key]), options));\n            if (track && isObservable(source[key]))\n              useEffect(() => {\n                target[key](assign({}, $$(source[key]), options));\n              });\n          }\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? assign(m[key] ? temp : {}, $$(source[key]), options) : $(assign(m[key] ? temp : {}, $$(source[key]), options));\n          if (track && isObservable(target[key]) && isObservable(source[key]))\n            useEffect(() => {\n              target[key](assign(m[key] ? temp : {}, $$(source[key]), options));\n            });\n        }\n      } else {\n        if (isObservable(target[key])) {\n          set(target[key], source[key], m[key]);\n          const temp = $$(target[key]);\n          if (track && isObservable(source[key]))\n            useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n        } else {\n          const temp = target[key];\n          target[key] = keepTargetNoObservable ? source[key] : target[key] = isObservable(source[key]) ? source[key] : $(source[key]);\n          if (m[key])\n            target[key](mv(temp, $$(source[key])));\n          if (track && isObservable(target[key]) && isObservable(source[key])) {\n            if (target[key] !== source[key])\n              useEffect(() => target[key](m[key] ? mv(temp, $$(source[key])) : $$(source[key])));\n          }\n        }\n      }\n    }\n  });\n  return target;\n};\nconst clone = (source, deepClone = false) => {\n  const newObject = {};\n  Object.keys(source).forEach((key) => {\n    if (typeof source[key] === \"function\" && !isObservable(source[key]))\n      newObject[key] = source[key];\n    else if (isObservable(source[key]))\n      newObject[key] = $($$(source[key]));\n    else if (typeof source[key] == \"object\" && deepClone) {\n      const innerObject = clone(source[key]);\n      newObject[key] = innerObject;\n    } else\n      newObject[key] = source[key];\n  });\n  return newObject;\n};\nconst clear = (o) => Object.keys(o).forEach((k) => {\n  var _a;\n  return (_a = o[k]) == null ? void 0 : _a.call(o);\n});\nconst make = (obj, inplace = false) => {\n  const o = inplace ? obj : { ...obj };\n  Object.keys(o).forEach((k) => o[k] = typeof o[k] !== \"function\" ? $(o[k]) : o[k]);\n  return o;\n};\nconst $$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nconst $$$$ = (obj, ...keys) => {\n  const ro = $$(obj);\n  if (isPrimitive(ro) || typeof ro === \"undefined\" || ro === null) return ro;\n  const no = {};\n  try {\n    (keys && keys.length ? keys : Object.keys(ro)).forEach(\n      (k) => no[k] = isObservable(ro[k]) ? $$$$(ro[k]) : ro[k]\n    );\n  } catch (ex) {\n    console.error(ex);\n  }\n  return no;\n};\nfunction useClickAway(ref, clickEvent) {\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      if ($$(ref) && !$$(ref).contains(event.target))\n        clickEvent();\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  });\n}\nconst ClickAwayWrapper = ({ clickEvent, children, ...props }) => {\n  const wrapperRef = $(null);\n  useClickAway(wrapperRef, clickEvent);\n  return /* @__PURE__ */ jsx(\"div\", { ref: wrapperRef, children });\n};\nconst useInvert = (ori) => {\n  const inv = $(!$$(ori));\n  useEffect(() => {\n    if (isObservable(ori))\n      ori(!$$(inv));\n  });\n  useEffect(() => {\n    inv(!$$(ori));\n  });\n  return inv;\n};\nfunction isArray(value) {\n  return Array.isArray(value);\n}\nconst useDestruct = (o, ...keys) => {\n  if (isArray($$(o))) {\n    const r = [];\n    $$(o).forEach((k, index) => r[index] = useMemo(() => $$(o)[index]));\n    return r;\n  } else {\n    const r = {};\n    keys.forEach((k) => r[k] = useMemo(() => {\n      var _a;\n      return (_a = $$(o)) == null ? void 0 : _a[k];\n    }));\n    return r;\n  }\n};\nconst usePause = (delay) => new Promise((resolve) => setTimeout(() => resolve(), delay));\nconst Timeout = ({ children, timeout = 1 }) => {\n  const r = $();\n  setTimeout(() => r(children), timeout);\n  return useMemo(() => $$(r));\n};\nconst useTimer = (startImmediately = true) => {\n  const startTime = $(startImmediately ? Date.now() : null);\n  const pauseTime = $(null);\n  const laps = $([]);\n  const total = $(0);\n  const start = () => startTime(Date.now());\n  const pause = () => {\n    if ($$(startTime) !== null && $$(pauseTime) === null)\n      pauseTime(Date.now());\n  };\n  const split = (message) => {\n    if ($$(startTime) !== null) {\n      const currentTime = Date.now();\n      const elapsedMs = currentTime - $$(startTime);\n      laps([...$$(laps), { message: message ?? $$(laps).length.toString(), ms: elapsedMs }]);\n      startTime(currentTime);\n    }\n  };\n  const stop = (message) => {\n    if ($$(startTime) !== null) {\n      const endTimeValue = $$(pauseTime) !== null ? $$(pauseTime) : Date.now();\n      const elapsedMs = endTimeValue - $$(startTime) - ($$(pauseTime) !== null ? Date.now() - $$(pauseTime) : 0);\n      laps([...$$(laps), { message: message ?? \"Stop\", ms: elapsedMs }]);\n      total($$(total) + elapsedMs);\n      startTime(null);\n      pauseTime(null);\n    }\n  };\n  useEffect(() => () => stop());\n  return {\n    start,\n    pause,\n    split,\n    stop,\n    total,\n    reset: () => {\n      total(0);\n      startTime(null);\n      pauseTime(null);\n      laps([]);\n    },\n    laps\n  };\n};\nconst ArrayContext = createContext();\nfunction useArray() {\n  const context = useContext(ArrayContext);\n  return context;\n}\nconst array = ({ children, arrayContext, itemContext, ref, ...props }) => {\n  if (!children) return [];\n  const childs = isArray$1(children) ? children : [children];\n  const array2 = arrayContext == null ? void 0 : arrayContext(childs);\n  setRef(array2, ref);\n  return childs.map((item, index) => /* @__PURE__ */ jsx(ArrayContext.Provider, { value: { ...array2, ...(itemContext == null ? void 0 : itemContext(item, index, array2)) ?? {}, index, item }, children: item }));\n};\nconst Array$1 = (props) => array(props);\nconst DefaultArray = ({ children }) => /* @__PURE__ */ jsx(Array$1, { arrayContext: (children2) => ({ refs: children2.map((c) => $()) }), itemContext: (item, index, ctx) => ({ ref: ctx.refs[index] }), children });\nconst useDefaultArray = () => useArray();\nconst useRatio = () => {\n  const context = useContext(ArrayContext);\n  return context;\n};\nconst Ratio = ({ children, multiple = false, group = false, ref }) => {\n  return /* @__PURE__ */ jsx(\n    Array$1,\n    {\n      ref,\n      arrayContext: (children2) => ({ refs: children2.map((_c) => $()), actives: Object.assign(children2.map((_c) => $(false)), { updated: $(0) }) }),\n      itemContext: (item, index, ctx) => {\n        return {\n          ref: ctx.refs[\n            /* base + */\n            index\n          ],\n          //flaten array index\n          active: ctx.actives[index],\n          item,\n          index: (\n            /* base +  */\n            index\n          ),\n          // childIndex: index,\n          toggle: (val) => {\n            const v = val === void 0 ? !$$(ctx.actives[index]) : val;\n            if ($$(group))\n              ctx.actives.forEach((act, i) => act(v));\n            else if ($$(multiple))\n              ctx.actives[index](v);\n            else if (v)\n              ctx.actives.forEach((act, i) => act(i === index));\n            else\n              ctx.actives[index](v);\n            ctx.actives.updated(Math.random());\n            return v;\n          }\n        };\n      },\n      children\n    }\n  );\n};\nfunction useLocation() {\n  const location = $(window.location);\n  useEffect(() => {\n    const handleLocationChange = () => location({ ...window.location });\n    window.addEventListener(\"popstate\", handleLocationChange);\n    const originalPushState = window.history.pushState;\n    const originalReplaceState = window.history.replaceState;\n    window.history.pushState = function(...args) {\n      originalPushState.apply(window.history, args);\n      handleLocationChange();\n    };\n    window.history.replaceState = function(...args) {\n      originalReplaceState.apply(window.history, args);\n      handleLocationChange();\n    };\n    return () => {\n      window.removeEventListener(\"popstate\", handleLocationChange);\n      window.history.pushState = originalPushState;\n      window.history.replaceState = originalReplaceState;\n    };\n  });\n  return location;\n}\nconst useScreenOrientation = () => {\n  const angle = $(0);\n  const type = $();\n  const handleResize = () => {\n    const { angle: a, type: t } = window.screen.orientation;\n    angle(a);\n    type(t);\n  };\n  useEventListener(window.screen.orientation, \"change\", handleResize);\n  const { dispatchEvent, unlock } = window.screen.orientation;\n  return { angle, type, dispatchEvent, unlock };\n};\nfunction useComputedStyle(target, patterns = []) {\n  const styles = $({});\n  useEffect(() => {\n    if (!$$(target)) return () => {\n    };\n    const getMatchingStyles = () => {\n      const computedStyle = window.getComputedStyle($$(target));\n      const matchedStyles = {};\n      for (const property of computedStyle) {\n        if (patterns.some(\n          (pattern) => typeof pattern === \"string\" ? property === pattern : pattern.test(property)\n        )) {\n          matchedStyles[property] = computedStyle.getPropertyValue(property);\n        }\n      }\n      return matchedStyles;\n    };\n    styles(getMatchingStyles());\n    const observer = new MutationObserver(() => {\n      const updatedStyles = getMatchingStyles();\n      styles((prevStyles) => {\n        const hasChanges = Object.keys(updatedStyles).some(\n          (key) => updatedStyles[key] !== prevStyles[key]\n        );\n        return hasChanges ? updatedStyles : prevStyles;\n      });\n    });\n    observer.observe($$(target), {\n      attributes: true,\n      attributeFilter: [\"style\", \"class\"],\n      subtree: false\n    });\n    return () => observer.disconnect();\n  });\n  return styles;\n}\nexport {\n  $$$,\n  $$$$,\n  Array$1 as Array,\n  ArrayContext,\n  ClickAwayWrapper,\n  DefaultArray,\n  Ratio,\n  Timeout,\n  array,\n  assign,\n  clear,\n  clone,\n  localStoreDic,\n  make,\n  sessionStorageDic,\n  useArray,\n  useAspect,\n  useBoolean,\n  useClickAnyWhere,\n  useClickAway,\n  useComputedStyle,\n  useCopyToClipboard,\n  useCountdown,\n  useCounter,\n  useDarkMode,\n  useDebounce,\n  useDefaultArray,\n  useDestruct,\n  useDocumentTitle,\n  useElementSize,\n  useEventCallback,\n  useEventListener,\n  useFetch,\n  useHover,\n  useImageOnLoad,\n  useIntersectionObserver,\n  useInterval,\n  useInvert,\n  useIsomorphicLayoutEffect,\n  useLocalStorage,\n  useLocation,\n  useLockedBody,\n  useMap,\n  useMediaQuery,\n  useOnClickOutside,\n  usePause,\n  useRatio,\n  useReadLocalStorage,\n  useScreen,\n  useScreenOrientation,\n  useScript,\n  useSessionStorage,\n  useSsr,\n  useStep,\n  useTernaryDarkMode,\n  useTimeout,\n  useTimer,\n  useToggle,\n  useViewportSize,\n  useWindowSize\n};\n//# sourceMappingURL=index.es.js.map\n","import { $$, $, useEffect, ObservableMaybe, Observable, isObservable, useMemo, getMeta, type JSX } from 'woby'\r\n\r\n//https://www.menucool.com/tooltip/css-tooltip\r\n\r\n\r\nimport { styled } from 'woby-styled'\r\nimport { useComputedStyle, useInvert } from 'use-woby'\r\n\r\nconst tooltipDef = `text-left border-b-[#666] border-b border-dotted \r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst tooltip = `inline-block relative \r\n[&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100\r\n`\r\n\r\nconst topDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst top = `absolute z-[99999999] left-2/4 -top-5 `\r\n\r\nconst top_i = `absolute overflow-hidden top-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst rightDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst right = `absolute z-[99999999] ml-5 left-full top-2/4 `\r\nconst right_i = `absolute overflow-hidden right-full after:content-[''] after:absolute after:translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\nconst bottomDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst bottom = `absolute z-[99999999] left-2/4 top-10 `\r\nconst bottom_i = `absolute overflow-hidden bottom-full after:content-[''] after:absolute after:-translate-x-2/4 after:translate-y-2/4 after:rotate-45 after:left-2/4 `\r\n\r\nconst leftDef = `bg-[#eeeeee] min-w-max box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `\r\nconst left = `absolute z-[99999999] mr-5 right-full top-2/4 `\r\nconst left_i = `absolute overflow-hidden left-full after:content-[''] after:absolute after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-45 after:left-0 after:top-2/4 `\r\n\r\n\r\nexport const Tooltip = ({ children, class: cls = tooltipDef, className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) => {\r\n    return <div class={[tooltip, cls, className]} >\r\n        {children}\r\n    </div>\r\n}\r\n\r\nfunction cssMultiply(value: ObservableMaybe<string | number>, multiplier: number): string {\r\n    const match = ($$(value) + '').match(/^(-?\\d*\\.?\\d+)([a-z%]*)$/);\r\n\r\n    if (!match)\r\n        throw new Error(`Invalid CSS unit: ${$$(value)}`);\r\n\r\n    const [, numericValue, unit] = match\r\n    const result = +numericValue * multiplier\r\n\r\n    return `${result}${unit}`\r\n}\r\n\r\nconst x2 = (value: ObservableMaybe<string | number>) => cssMultiply(value, 2)\r\n\r\nconst translate = (x: ObservableMaybe<string>, y: ObservableMaybe<string>) => `translate(${$$(x)}, ${$$(y)})`\r\n\r\nexport type PositionType = 'top' | 'right' | 'bottom' | 'left'\r\nexport const TooltipContent = ({ children, style, class: cls = $(), className, static: st, position = 'top', arrowLocation = '50%', arrowSize = '12px', ...props }: JSX.HTMLAttributes<HTMLDivElement> &\r\n{\r\n    position?: ObservableMaybe<PositionType>,\r\n    arrowLocation?: ObservableMaybe<string | number>,\r\n    arrowSize?: ObservableMaybe<string | number>,\r\n    static?: ObservableMaybe<boolean>,\r\n}) => {\r\n    const setDef = () => {\r\n        if (!$$(cls))\r\n            switch ($$(position)) {\r\n                case 'top': (cls as Observable<string>)(topDef)\r\n                case 'left': (cls as Observable<string>)(leftDef)\r\n                case 'right': (cls as Observable<string>)(rightDef)\r\n                case 'bottom': (cls as Observable<string>)(bottomDef)\r\n            }\r\n    }\r\n    useEffect(setDef)\r\n    setDef()\r\n\r\n    const pos = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top\r\n            case 'right': return right\r\n            case 'bottom': return bottom\r\n            case 'left': return left\r\n        }\r\n    })\r\n    const transform = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return translate('-' + $$(arrowLocation), '-100%')\r\n            case 'left':\r\n            case 'right': return translate('0', '-' + $$(arrowLocation))\r\n            case 'bottom': return translate('-' + $$(arrowLocation), '0')\r\n        }\r\n    })\r\n    const ali = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'bottom':\r\n            case 'top': return { left: arrowLocation }\r\n            case 'left':\r\n            case 'right': return { top: arrowLocation }\r\n        }\r\n    })\r\n    const ii = useMemo(() => {\r\n        switch ($$(position)) {\r\n            case 'top': return top_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'right': return right_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'bottom': return bottom_i + styled`  \r\n                margin-left:-${$$(arrowSize)};\r\n                width:${x2(arrowSize)};\r\n                height:${$$(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n            case 'left': return left_i + styled`  \r\n                margin-top:-${$$(arrowSize)};\r\n                width:${$$(arrowSize)};\r\n                height:${x2(arrowSize)};\r\n\r\n                &::after{\r\n                    width:${$$(arrowSize)};\r\n                    height:${$$(arrowSize)};\r\n                }\r\n     `\r\n        }\r\n    })\r\n\r\n    const tp = $<HTMLDivElement>()\r\n    const ir = $<HTMLElement>()\r\n\r\n    const sty = useComputedStyle(tp, ['background-color', /^border-(?!.*-radius$)/, 'box-shadow'])\r\n    // useEffect(() => console.log($$(sty)))\r\n    return <div ref={tp} class={[pos, cls, () => $$(st) ? '' : 'invisible opacity-0', className, 'tpcontents']} style={[style, { transform }]} {...props}>\r\n        {children}\r\n        {() => <i ref={ir} class={[ii, styled`\r\n                &::after{\r\n                    ${Object.keys($$(sty)).map(k => `${k}:${$$(sty)[k]};\\n`).join('')}\r\n                }\r\n            `]} style={ali}></i>}\r\n    </div>\r\n}\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}