@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Tour/Tour.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.cjs","sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Joyride,\n    ACTIONS,\n    LIFECYCLE,\n    EVENTS,\n    type Step,\n    type Placement,\n    type TooltipRenderProps,\n    type EventHandler,\n    type StepTarget,\n} from 'react-joyride';\n\nimport { Inline } from '../Inline/Inline';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (disableTourSkipOnEsc && event.key === 'Escape' && skipButtonRef.current !== null) {\n                event.preventDefault();\n                skipButtonRef.current.click();\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, [disableTourSkipOnEsc]);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n            <LegacyIconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute right-0 top-0 mr-1 mt-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Inline spacing={8} alignInline=\"end\">\n                {index > 0 && (\n                    <LegacyButton {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </LegacyButton>\n                )}\n                <LegacyButton {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </LegacyButton>\n            </Inline>\n        </div>\n    );\n};\n\n// oxlint-disable-next-line no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    // oxlint-disable-next-line no-unsafe-function-type, ban-types\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /**\n     * Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done.\n     * @deprecated - No longer needed with React-Joyride V3\n     */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc,\n        disableScrolling,\n        disableOverlayClose,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                skipBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: StepTarget) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    const callback: EventHandler = (data, _controls) => {\n        if (onClose && data.action === ACTIONS.SKIP && data.lifecycle === LIFECYCLE.COMPLETE) {\n            onClose(getStep(data.step.target));\n        }\n\n        if (onComplete && data.type === EVENTS.TOUR_END) {\n            onComplete();\n        }\n\n        if (onReady && data.lifecycle === LIFECYCLE.READY) {\n            onReady(getStep(data.step.target));\n        }\n    };\n\n    // Escape skips the entire tour (fires onClose + onComplete). This is handled by the custom\n    // Tooltip, which clicks the skip button — Joyride's native `dismissKeyAction` only fires a\n    // CLOSE action, so we disable it here to avoid double-handling the Escape key.\n    const disableTourSkipOnEsc = !disableCloseOnEsc;\n    const overlayClickAction = disableOverlayClose ? false : 'close';\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            onEvent={callback}\n            options={{\n                /**\n                 * This value in React-Joyride V3 is inverted\n                 * @see https://react-joyride.com/docs/migration#renamed-props-step-fields\n                 */\n                blockTargetInteraction: !spotlightClicks,\n                spotlightPadding: 8,\n                showProgress: true,\n                scrollOffset: scrollOffset,\n                skipScroll: disableScrolling,\n\n                // tailwind.theme.colors.blue.300\n                primaryColor: '#6ba4ff',\n\n                dismissKeyAction: false,\n                overlayClickAction,\n            }}\n            styles={{\n                beaconWrapper: {\n                    verticalAlign: 'middle',\n                },\n                tooltip: { transition: 'none' },\n            }}\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":["React","LegacyIconButton","Inline","LegacyButton","useLocalization","ACTIONS","LIFECYCLE","EVENTS","Joyride"],"mappings":"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"}
+{"version":3,"file":"Tour.cjs","sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Joyride,\n    ACTIONS,\n    LIFECYCLE,\n    EVENTS,\n    type Step,\n    type Placement,\n    type TooltipRenderProps,\n    type EventHandler,\n    type StepTarget,\n} from 'react-joyride';\n\nimport { Inline } from '../Inline/Inline';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (disableTourSkipOnEsc && event.key === 'Escape' && skipButtonRef.current !== null) {\n                event.preventDefault();\n                skipButtonRef.current.click();\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, [disableTourSkipOnEsc]);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step relative w-88 rounded bg-white p-4\">\n            <LegacyIconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute right-0 top-0 mr-1 mt-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Inline spacing={8} alignInline=\"end\">\n                {index > 0 && (\n                    <LegacyButton {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </LegacyButton>\n                )}\n                <LegacyButton {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </LegacyButton>\n            </Inline>\n        </div>\n    );\n};\n\n// oxlint-disable-next-line no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    // oxlint-disable-next-line no-unsafe-function-type, ban-types\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /**\n     * Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done.\n     * @deprecated - No longer needed with React-Joyride V3\n     */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc,\n        disableScrolling,\n        disableOverlayClose,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                skipBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: StepTarget) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    const callback: EventHandler = (data, _controls) => {\n        if (onClose && data.action === ACTIONS.SKIP && data.lifecycle === LIFECYCLE.COMPLETE) {\n            onClose(getStep(data.step.target));\n        }\n\n        if (onComplete && data.type === EVENTS.TOUR_END) {\n            onComplete();\n        }\n\n        if (onReady && data.lifecycle === LIFECYCLE.READY) {\n            onReady(getStep(data.step.target));\n        }\n    };\n\n    // Escape skips the entire tour (fires onClose + onComplete). This is handled by the custom\n    // Tooltip, which clicks the skip button — Joyride's native `dismissKeyAction` only fires a\n    // CLOSE action, so we disable it here to avoid double-handling the Escape key.\n    const disableTourSkipOnEsc = !disableCloseOnEsc;\n    const overlayClickAction = disableOverlayClose ? false : 'close';\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            onEvent={callback}\n            options={{\n                /**\n                 * This value in React-Joyride V3 is inverted\n                 * @see https://react-joyride.com/docs/migration#renamed-props-step-fields\n                 */\n                blockTargetInteraction: !spotlightClicks,\n                spotlightPadding: 8,\n                showProgress: true,\n                scrollOffset: scrollOffset,\n                skipScroll: disableScrolling,\n\n                // tailwind.theme.colors.blue.300\n                primaryColor: '#6ba4ff',\n\n                dismissKeyAction: false,\n                overlayClickAction,\n            }}\n            styles={{\n                beaconWrapper: {\n                    verticalAlign: 'middle',\n                },\n                tooltip: { transition: 'none' },\n            }}\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":["React","LegacyIconButton","Inline","LegacyButton","useLocalization","ACTIONS","LIFECYCLE","EVENTS","Joyride"],"mappings":"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"}

package/dist/components/Tour/Tour.js

@@ -30,7 +30,7 @@ const Tooltip = ({
       window.removeEventListener("keydown", onWindowKeyDown);
     };
   }, [disableTourSkipOnEsc]);
-  return /* @__PURE__ */ React.createElement("div", { ...tooltipProps, className: "yt-tour__step w-88 relative rounded bg-white p-4" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ...tooltipProps, className: "yt-tour__step relative w-88 rounded bg-white p-4" }, /* @__PURE__ */ React.createElement(
     LegacyIconButton,
     {
       ...skipProps,
@@ -73,10 +73,7 @@ const Tour = (props) => {
     });
   }, [props.children]);
   const getStep = React.useCallback(
-    (selector) => {
-      var _a;
-      return (_a = props.children.find((child) => child.props.selector === selector)) == null ? void 0 : _a.props;
-    },
+    (selector) => props.children.find((child) => child.props.selector === selector)?.props,
     [props.children]
   );
   const callback = (data, _controls) => {

package/dist/components/Tour/Tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Joyride,\n    ACTIONS,\n    LIFECYCLE,\n    EVENTS,\n    type Step,\n    type Placement,\n    type TooltipRenderProps,\n    type EventHandler,\n    type StepTarget,\n} from 'react-joyride';\n\nimport { Inline } from '../Inline/Inline';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (disableTourSkipOnEsc && event.key === 'Escape' && skipButtonRef.current !== null) {\n                event.preventDefault();\n                skipButtonRef.current.click();\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, [disableTourSkipOnEsc]);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n            <LegacyIconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute right-0 top-0 mr-1 mt-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Inline spacing={8} alignInline=\"end\">\n                {index > 0 && (\n                    <LegacyButton {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </LegacyButton>\n                )}\n                <LegacyButton {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </LegacyButton>\n            </Inline>\n        </div>\n    );\n};\n\n// oxlint-disable-next-line no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    // oxlint-disable-next-line no-unsafe-function-type, ban-types\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /**\n     * Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done.\n     * @deprecated - No longer needed with React-Joyride V3\n     */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc,\n        disableScrolling,\n        disableOverlayClose,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                skipBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: StepTarget) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    const callback: EventHandler = (data, _controls) => {\n        if (onClose && data.action === ACTIONS.SKIP && data.lifecycle === LIFECYCLE.COMPLETE) {\n            onClose(getStep(data.step.target));\n        }\n\n        if (onComplete && data.type === EVENTS.TOUR_END) {\n            onComplete();\n        }\n\n        if (onReady && data.lifecycle === LIFECYCLE.READY) {\n            onReady(getStep(data.step.target));\n        }\n    };\n\n    // Escape skips the entire tour (fires onClose + onComplete). This is handled by the custom\n    // Tooltip, which clicks the skip button — Joyride's native `dismissKeyAction` only fires a\n    // CLOSE action, so we disable it here to avoid double-handling the Escape key.\n    const disableTourSkipOnEsc = !disableCloseOnEsc;\n    const overlayClickAction = disableOverlayClose ? false : 'close';\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            onEvent={callback}\n            options={{\n                /**\n                 * This value in React-Joyride V3 is inverted\n                 * @see https://react-joyride.com/docs/migration#renamed-props-step-fields\n                 */\n                blockTargetInteraction: !spotlightClicks,\n                spotlightPadding: 8,\n                showProgress: true,\n                scrollOffset: scrollOffset,\n                skipScroll: disableScrolling,\n\n                // tailwind.theme.colors.blue.300\n                primaryColor: '#6ba4ff',\n\n                dismissKeyAction: false,\n                overlayClickAction,\n            }}\n            styles={{\n                beaconWrapper: {\n                    verticalAlign: 'middle',\n                },\n                tooltip: { transition: 'none' },\n            }}\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":[],"mappings":";;;;;;AA+DA,MAAM,UAAU,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkF;AACxE,QAAA,gBAAgB,MAAM,OAA0B,IAAI;AAE1D,QAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAA+B;AACpD,UAAI,wBAAwB,MAAM,QAAQ,YAAY,cAAc,YAAY,MAAM;AAClF,cAAM,eAAe;AACrB,sBAAc,QAAQ,MAAM;AAAA,MAAA;AAAA,IAEpC;AAEO,WAAA,iBAAiB,WAAW,eAAe;AAElD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,oBAAoB,CAAC;AAEzB,SACK,sBAAA,cAAA,OAAA,EAAK,GAAG,cAAc,WAAU,sDAC7B,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,YAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,cAAY,OAAO;AAAA,MACnB,WAAU;AAAA,IAAA;AAAA,EAAA,GAEb,KAAK,SAAU,sBAAA,cAAA,MAAA,MAAI,KAAK,KAAM,GAC9B,KAAK,SACN,sBAAA,cAAC,QAAO,EAAA,SAAS,GAAG,aAAY,MAAA,GAC3B,QAAQ,KACJ,sBAAA,cAAA,cAAA,EAAc,GAAG,WAAW,YAAW,WAAA,GACnC,OAAO,IACZ,GAEJ,sBAAA,cAAC,gBAAc,GAAG,cAAc,YAAW,UAAA,GACtC,aACK,aACI,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,MACpC,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,MACxC,OAAO,KACjB,CACJ,CACJ;AAER;AAGa,MAAA,WAAW,CAAC,WAAgC;AAiC5C,MAAA,OAAO,CAAC,UAAqB;AAChC,QAAA;AAAA,IACF,OAAO,EAAE,KAAK;AAAA,MACd,gBAAgB;AAEd,QAAA;AAAA,IACF,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEE,QAAA,QAAQ,MAAM,QAAQ,MAAM;AAC9B,WAAO,MAAM,SAAS,IAAI,MAAM,UAAU,CAAS,UAAA;AAC/C,YAAM,OAAa;AAAA,QACf,YAAY,CAAC,MAAM,MAAM;AAAA,QACzB,QAAQ,MAAM,MAAM;AAAA,QACpB,WAAW,MAAM,MAAM;AAAA,QACvB,OAAO,MAAM,MAAM;AAAA,QACnB,SAAS,MAAM,MAAM;AAAA,MACzB;AACO,aAAA;AAAA,IAAA,CACV;AAAA,EAAA,GACF,CAAC,MAAM,QAAQ,CAAC;AAEnB,QAAM,UAAU,MAAM;AAAA,IAClB,CAAC,aAAyB;;AAAA,yBAAM,SAAS,KAAK,CAAC,UAAe,MAAM,MAAM,aAAa,QAAQ,MAArE,mBAAwE;AAAA;AAAA,IAClG,CAAC,MAAM,QAAQ;AAAA,EACnB;AAEM,QAAA,WAAyB,CAAC,MAAM,cAAc;AAC5C,QAAA,WAAW,KAAK,WAAW,QAAQ,QAAQ,KAAK,cAAc,UAAU,UAAU;AAClF,cAAQ,QAAQ,KAAK,KAAK,MAAM,CAAC;AAAA,IAAA;AAGrC,QAAI,cAAc,KAAK,SAAS,OAAO,UAAU;AAClC,iBAAA;AAAA,IAAA;AAGf,QAAI,WAAW,KAAK,cAAc,UAAU,OAAO;AAC/C,cAAQ,QAAQ,KAAK,KAAK,MAAM,CAAC;AAAA,IAAA;AAAA,EAEzC;AAKA,QAAM,uBAAuB,CAAC;AACxB,QAAA,qBAAqB,sBAAsB,QAAQ;AAGrD,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,kBAAkB,kBACb,sBAAA,cAAA,SAAA,EAAS,GAAG,cAAc,QAAQ,MAAM,qBAA4C,CAAA;AAAA,MAEzF,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,QAKL,wBAAwB,CAAC;AAAA,QACzB,kBAAkB;AAAA,QAClB,cAAc;AAAA,QACd;AAAA,QACA,YAAY;AAAA;AAAA,QAGZ,cAAc;AAAA,QAEd,kBAAkB;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,QAAQ;AAAA,QACJ,eAAe;AAAA,UACX,eAAe;AAAA,QACnB;AAAA,QACA,SAAS,EAAE,YAAY,OAAO;AAAA,MAAA;AAAA,IAClC;AAAA,EACJ;AAER;AAEA,KAAK,OAAO;"}
+{"version":3,"file":"Tour.js","sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Joyride,\n    ACTIONS,\n    LIFECYCLE,\n    EVENTS,\n    type Step,\n    type Placement,\n    type TooltipRenderProps,\n    type EventHandler,\n    type StepTarget,\n} from 'react-joyride';\n\nimport { Inline } from '../Inline/Inline';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (disableTourSkipOnEsc && event.key === 'Escape' && skipButtonRef.current !== null) {\n                event.preventDefault();\n                skipButtonRef.current.click();\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, [disableTourSkipOnEsc]);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step relative w-88 rounded bg-white p-4\">\n            <LegacyIconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute right-0 top-0 mr-1 mt-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Inline spacing={8} alignInline=\"end\">\n                {index > 0 && (\n                    <LegacyButton {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </LegacyButton>\n                )}\n                <LegacyButton {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </LegacyButton>\n            </Inline>\n        </div>\n    );\n};\n\n// oxlint-disable-next-line no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    // oxlint-disable-next-line no-unsafe-function-type, ban-types\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /**\n     * Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done.\n     * @deprecated - No longer needed with React-Joyride V3\n     */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc,\n        disableScrolling,\n        disableOverlayClose,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                skipBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: StepTarget) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    const callback: EventHandler = (data, _controls) => {\n        if (onClose && data.action === ACTIONS.SKIP && data.lifecycle === LIFECYCLE.COMPLETE) {\n            onClose(getStep(data.step.target));\n        }\n\n        if (onComplete && data.type === EVENTS.TOUR_END) {\n            onComplete();\n        }\n\n        if (onReady && data.lifecycle === LIFECYCLE.READY) {\n            onReady(getStep(data.step.target));\n        }\n    };\n\n    // Escape skips the entire tour (fires onClose + onComplete). This is handled by the custom\n    // Tooltip, which clicks the skip button — Joyride's native `dismissKeyAction` only fires a\n    // CLOSE action, so we disable it here to avoid double-handling the Escape key.\n    const disableTourSkipOnEsc = !disableCloseOnEsc;\n    const overlayClickAction = disableOverlayClose ? false : 'close';\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            onEvent={callback}\n            options={{\n                /**\n                 * This value in React-Joyride V3 is inverted\n                 * @see https://react-joyride.com/docs/migration#renamed-props-step-fields\n                 */\n                blockTargetInteraction: !spotlightClicks,\n                spotlightPadding: 8,\n                showProgress: true,\n                scrollOffset: scrollOffset,\n                skipScroll: disableScrolling,\n\n                // tailwind.theme.colors.blue.300\n                primaryColor: '#6ba4ff',\n\n                dismissKeyAction: false,\n                overlayClickAction,\n            }}\n            styles={{\n                beaconWrapper: {\n                    verticalAlign: 'middle',\n                },\n                tooltip: { transition: 'none' },\n            }}\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":[],"mappings":"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"}

package/dist/components/Treeview/Treeview.cjs

@@ -21,7 +21,7 @@ const TreeviewGroup = React.forwardRef(function TreeviewGroup2(props, ref) {
       setExpanded(fixed || initialExpanded);
     }
   }, [fixed, initialExpanded]);
-  const listClassName = cn("flex-col mb-0", {
+  const listClassName = cn("mb-0 flex-col", {
     flex: expanded,
     hidden: !expanded
   });

package/dist/components/Treeview/Treeview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Treeview.cjs","sources":["../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\n\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    return <a {...props} ref={ref} />;\n});\n\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\n    /** Add a classname to the treeview */\n    className?: string | ((expanded: boolean) => string);\n    /**\n     * Set wheter the region is expanded, showing the children, or collapsed.\n     * Default value is `false`\n     */\n    expanded?: boolean;\n    /** Region is expanded at mount and can't be collapsed */\n    fixed?: boolean;\n    /** Handler called when user clicks the title of the group */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\n    /** Text displayed in the group's header */\n    title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n};\n\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        children,\n        className: externalClassName,\n        expanded: initialExpanded = false,\n        title,\n        fixed,\n        onClick,\n        ...otherProps\n    } = props;\n    const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\n\n    React.useEffect(() => {\n        if (!fixed) {\n            setExpanded(fixed || initialExpanded);\n        }\n    }, [fixed, initialExpanded]);\n\n    const listClassName = cn('flex-col mb-0', {\n        flex: expanded,\n        hidden: !expanded,\n    });\n\n    const itemProps = {\n        ...otherProps,\n        'aria-expanded': expanded,\n        role: 'treeitem',\n        tabIndex: -1,\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const nextState = !expanded;\n\n        if (!fixed) {\n            setExpanded(nextState);\n        }\n\n        if (onClick) {\n            onClick(event, nextState);\n        }\n    };\n\n    const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\n\n    return (\n        <div {...itemProps} className={className} ref={ref}>\n            <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\n            <ul role=\"group\" className={listClassName}>\n                {React.Children.toArray(children)\n                    .filter(item => !!item)\n                    .map((item, i) => (\n                        <li key={i} role=\"none\">\n                            {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\n                        </li>\n                    ))}\n            </ul>\n        </div>\n    );\n});\n\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\n    TreeviewProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigable link */\n    Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /** Container for a set of related links, usually expandable */\n    Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} ref={ref} role=\"tree\" />;\n}) as ForwardedTreeviewWithStatics;\n\nTreeview.Group = TreeviewGroup;\nTreeview.Item = TreeviewItem;\n"],"names":["TreeviewItem","TreeviewGroup","Treeview"],"mappings":";;;;AAKA,MAAM,eAAe,MAAM,WAAW,SAASA,cAAa,OAA0B,KAAmC;AACrH,SAAQ,sBAAA,cAAA,KAAA,EAAG,GAAG,OAAO,KAAU;AACnC,CAAC;AAkBD,MAAM,gBAAgB,MAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AAC/G,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,UAAU,kBAAkB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,SAAS,eAAe;AAEvE,QAAM,UAAU,MAAM;AAClB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS,eAAe;AAAA,IAAA;AAAA,EACxC,GACD,CAAC,OAAO,eAAe,CAAC;AAErB,QAAA,gBAAgB,GAAG,iBAAiB;AAAA,IACtC,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,EAAA,CACZ;AAED,QAAM,YAAY;AAAA,IACd,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AAEM,QAAA,cAAc,CAAC,UAAkD;AACnE,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS;AAAA,IAAA;AAGzB,QAAI,SAAS;AACT,cAAQ,OAAO,SAAS;AAAA,IAAA;AAAA,EAEhC;AAEA,QAAM,YAAY,OAAO,sBAAsB,aAAa,kBAAkB,QAAQ,IAAI;AAGtF,SAAA,sBAAA,cAAC,OAAK,EAAA,GAAG,WAAW,WAAsB,OACrC,sBAAA,cAAA,OAAA,EAAI,SAAS,YAAA,GAAc,OAAO,UAAU,aAAa,MAAM,QAAQ,IAAI,KAAM,GAClF,sBAAA,cAAC,MAAG,EAAA,MAAK,SAAQ,WAAW,cACvB,GAAA,MAAM,SAAS,QAAQ,QAAQ,EAC3B,OAAO,CAAQ,SAAA,CAAC,CAAC,IAAI,EACrB,IAAI,CAAC,MAAM,MACR,sBAAA,cAAC,MAAG,EAAA,KAAK,GAAG,MAAK,OAAA,GACZ,MAAM,aAAa,MAAiC,EAAE,MAAM,WAAA,CAAY,CAC7E,CACH,CACT,CACJ;AAER,CAAC;AAaM,MAAM,WAAW,MAAM,WAAW,SAASC,UAAS,OAAsB,KAAgC;AAC7G,6CAAQ,OAAK,EAAA,GAAG,OAAO,KAAU,MAAK,QAAO;AACjD,CAAC;AAED,SAAS,QAAQ;AACjB,SAAS,OAAO;;"}
+{"version":3,"file":"Treeview.cjs","sources":["../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\n\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    return <a {...props} ref={ref} />;\n});\n\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\n    /** Add a classname to the treeview */\n    className?: string | ((expanded: boolean) => string);\n    /**\n     * Set wheter the region is expanded, showing the children, or collapsed.\n     * Default value is `false`\n     */\n    expanded?: boolean;\n    /** Region is expanded at mount and can't be collapsed */\n    fixed?: boolean;\n    /** Handler called when user clicks the title of the group */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\n    /** Text displayed in the group's header */\n    title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n};\n\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        children,\n        className: externalClassName,\n        expanded: initialExpanded = false,\n        title,\n        fixed,\n        onClick,\n        ...otherProps\n    } = props;\n    const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\n\n    React.useEffect(() => {\n        if (!fixed) {\n            setExpanded(fixed || initialExpanded);\n        }\n    }, [fixed, initialExpanded]);\n\n    const listClassName = cn('mb-0 flex-col', {\n        flex: expanded,\n        hidden: !expanded,\n    });\n\n    const itemProps = {\n        ...otherProps,\n        'aria-expanded': expanded,\n        role: 'treeitem',\n        tabIndex: -1,\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const nextState = !expanded;\n\n        if (!fixed) {\n            setExpanded(nextState);\n        }\n\n        if (onClick) {\n            onClick(event, nextState);\n        }\n    };\n\n    const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\n\n    return (\n        <div {...itemProps} className={className} ref={ref}>\n            <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\n            <ul role=\"group\" className={listClassName}>\n                {React.Children.toArray(children)\n                    .filter(item => !!item)\n                    .map((item, i) => (\n                        <li key={i} role=\"none\">\n                            {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\n                        </li>\n                    ))}\n            </ul>\n        </div>\n    );\n});\n\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\n    TreeviewProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigable link */\n    Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /** Container for a set of related links, usually expandable */\n    Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} ref={ref} role=\"tree\" />;\n}) as ForwardedTreeviewWithStatics;\n\nTreeview.Group = TreeviewGroup;\nTreeview.Item = TreeviewItem;\n"],"names":["TreeviewItem","TreeviewGroup","Treeview"],"mappings":";;;;AAKA,MAAM,eAAe,MAAM,WAAW,SAASA,cAAa,OAA0B,KAAmC;AACrH,SAAO,sBAAA,cAAC,KAAA,EAAG,GAAG,OAAO,KAAU;AACnC,CAAC;AAkBD,MAAM,gBAAgB,MAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AACrH,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,UAAU,kBAAkB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,SAAS,eAAe;AAEvE,QAAM,UAAU,MAAM;AAClB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS,eAAe;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,OAAO,eAAe,CAAC;AAE3B,QAAM,gBAAgB,GAAG,iBAAiB;AAAA,IACtC,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,EAAA,CACZ;AAED,QAAM,YAAY;AAAA,IACd,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAGd,QAAM,cAAc,CAAC,UAAkD;AACnE,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS;AAAA,IACzB;AAEA,QAAI,SAAS;AACT,cAAQ,OAAO,SAAS;AAAA,IAC5B;AAAA,EACJ;AAEA,QAAM,YAAY,OAAO,sBAAsB,aAAa,kBAAkB,QAAQ,IAAI;AAE1F,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,WAAW,WAAsB,OACtC,sBAAA,cAAC,OAAA,EAAI,SAAS,YAAA,GAAc,OAAO,UAAU,aAAa,MAAM,QAAQ,IAAI,KAAM,GAClF,sBAAA,cAAC,MAAA,EAAG,MAAK,SAAQ,WAAW,cAAA,GACvB,MAAM,SAAS,QAAQ,QAAQ,EAC3B,OAAO,CAAA,SAAQ,CAAC,CAAC,IAAI,EACrB,IAAI,CAAC,MAAM,MACR,sBAAA,cAAC,MAAA,EAAG,KAAK,GAAG,MAAK,OAAA,GACZ,MAAM,aAAa,MAAiC,EAAE,MAAM,WAAA,CAAY,CAC7E,CACH,CACT,CACJ;AAER,CAAC;AAaM,MAAM,WAAW,MAAM,WAAW,SAASC,UAAS,OAAsB,KAAgC;AAC7G,6CAAQ,OAAA,EAAK,GAAG,OAAO,KAAU,MAAK,QAAO;AACjD,CAAC;AAED,SAAS,QAAQ;AACjB,SAAS,OAAO;;"}

package/dist/components/Treeview/Treeview.js

@@ -19,7 +19,7 @@ const TreeviewGroup = React__default.forwardRef(function TreeviewGroup2(props, r
       setExpanded(fixed || initialExpanded);
     }
   }, [fixed, initialExpanded]);
-  const listClassName = cn("flex-col mb-0", {
+  const listClassName = cn("mb-0 flex-col", {
     flex: expanded,
     hidden: !expanded
   });

package/dist/components/Treeview/Treeview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Treeview.js","sources":["../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\n\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    return <a {...props} ref={ref} />;\n});\n\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\n    /** Add a classname to the treeview */\n    className?: string | ((expanded: boolean) => string);\n    /**\n     * Set wheter the region is expanded, showing the children, or collapsed.\n     * Default value is `false`\n     */\n    expanded?: boolean;\n    /** Region is expanded at mount and can't be collapsed */\n    fixed?: boolean;\n    /** Handler called when user clicks the title of the group */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\n    /** Text displayed in the group's header */\n    title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n};\n\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        children,\n        className: externalClassName,\n        expanded: initialExpanded = false,\n        title,\n        fixed,\n        onClick,\n        ...otherProps\n    } = props;\n    const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\n\n    React.useEffect(() => {\n        if (!fixed) {\n            setExpanded(fixed || initialExpanded);\n        }\n    }, [fixed, initialExpanded]);\n\n    const listClassName = cn('flex-col mb-0', {\n        flex: expanded,\n        hidden: !expanded,\n    });\n\n    const itemProps = {\n        ...otherProps,\n        'aria-expanded': expanded,\n        role: 'treeitem',\n        tabIndex: -1,\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const nextState = !expanded;\n\n        if (!fixed) {\n            setExpanded(nextState);\n        }\n\n        if (onClick) {\n            onClick(event, nextState);\n        }\n    };\n\n    const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\n\n    return (\n        <div {...itemProps} className={className} ref={ref}>\n            <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\n            <ul role=\"group\" className={listClassName}>\n                {React.Children.toArray(children)\n                    .filter(item => !!item)\n                    .map((item, i) => (\n                        <li key={i} role=\"none\">\n                            {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\n                        </li>\n                    ))}\n            </ul>\n        </div>\n    );\n});\n\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\n    TreeviewProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigable link */\n    Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /** Container for a set of related links, usually expandable */\n    Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} ref={ref} role=\"tree\" />;\n}) as ForwardedTreeviewWithStatics;\n\nTreeview.Group = TreeviewGroup;\nTreeview.Item = TreeviewItem;\n"],"names":["React","TreeviewItem","TreeviewGroup","Treeview"],"mappings":";;AAKA,MAAM,eAAeA,eAAM,WAAW,SAASC,cAAa,OAA0B,KAAmC;AACrH,SAAQD,+BAAA,cAAA,KAAA,EAAG,GAAG,OAAO,KAAU;AACnC,CAAC;AAkBD,MAAM,gBAAgBA,eAAM,WAAW,SAASE,eAAc,OAA2B,KAAgC;AAC/G,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,UAAU,kBAAkB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIF,eAAM,SAAS,SAAS,eAAe;AAEvEA,iBAAM,UAAU,MAAM;AAClB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS,eAAe;AAAA,IAAA;AAAA,EACxC,GACD,CAAC,OAAO,eAAe,CAAC;AAErB,QAAA,gBAAgB,GAAG,iBAAiB;AAAA,IACtC,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,EAAA,CACZ;AAED,QAAM,YAAY;AAAA,IACd,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AAEM,QAAA,cAAc,CAAC,UAAkD;AACnE,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS;AAAA,IAAA;AAGzB,QAAI,SAAS;AACT,cAAQ,OAAO,SAAS;AAAA,IAAA;AAAA,EAEhC;AAEA,QAAM,YAAY,OAAO,sBAAsB,aAAa,kBAAkB,QAAQ,IAAI;AAGtF,SAAAA,+BAAA,cAAC,OAAK,EAAA,GAAG,WAAW,WAAsB,OACrCA,+BAAA,cAAA,OAAA,EAAI,SAAS,YAAA,GAAc,OAAO,UAAU,aAAa,MAAM,QAAQ,IAAI,KAAM,GAClFA,+BAAA,cAAC,MAAG,EAAA,MAAK,SAAQ,WAAW,cACvB,GAAAA,eAAM,SAAS,QAAQ,QAAQ,EAC3B,OAAO,CAAQ,SAAA,CAAC,CAAC,IAAI,EACrB,IAAI,CAAC,MAAM,MACRA,+BAAA,cAAC,MAAG,EAAA,KAAK,GAAG,MAAK,OAAA,GACZA,eAAM,aAAa,MAAiC,EAAE,MAAM,WAAA,CAAY,CAC7E,CACH,CACT,CACJ;AAER,CAAC;AAaM,MAAM,WAAWA,eAAM,WAAW,SAASG,UAAS,OAAsB,KAAgC;AAC7G,sDAAQ,OAAK,EAAA,GAAG,OAAO,KAAU,MAAK,QAAO;AACjD,CAAC;AAED,SAAS,QAAQ;AACjB,SAAS,OAAO;"}
+{"version":3,"file":"Treeview.js","sources":["../../../src/components/Treeview/Treeview.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type TreeviewItemProps = React.LinkHTMLAttributes<HTMLAnchorElement>;\n\nconst TreeviewItem = React.forwardRef(function TreeviewItem(props: TreeviewItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    return <a {...props} ref={ref} />;\n});\n\nexport type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivElement>, 'className' | 'onClick' | 'title'> & {\n    /** Add a classname to the treeview */\n    className?: string | ((expanded: boolean) => string);\n    /**\n     * Set wheter the region is expanded, showing the children, or collapsed.\n     * Default value is `false`\n     */\n    expanded?: boolean;\n    /** Region is expanded at mount and can't be collapsed */\n    fixed?: boolean;\n    /** Handler called when user clicks the title of the group */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;\n    /** Text displayed in the group's header */\n    title: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n};\n\nconst TreeviewGroup = React.forwardRef(function TreeviewGroup(props: TreeviewGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        children,\n        className: externalClassName,\n        expanded: initialExpanded = false,\n        title,\n        fixed,\n        onClick,\n        ...otherProps\n    } = props;\n    const [expanded, setExpanded] = React.useState(fixed || initialExpanded);\n\n    React.useEffect(() => {\n        if (!fixed) {\n            setExpanded(fixed || initialExpanded);\n        }\n    }, [fixed, initialExpanded]);\n\n    const listClassName = cn('mb-0 flex-col', {\n        flex: expanded,\n        hidden: !expanded,\n    });\n\n    const itemProps = {\n        ...otherProps,\n        'aria-expanded': expanded,\n        role: 'treeitem',\n        tabIndex: -1,\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const nextState = !expanded;\n\n        if (!fixed) {\n            setExpanded(nextState);\n        }\n\n        if (onClick) {\n            onClick(event, nextState);\n        }\n    };\n\n    const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;\n\n    return (\n        <div {...itemProps} className={className} ref={ref}>\n            <div onClick={handleClick}>{typeof title === 'function' ? title(expanded) : title}</div>\n            <ul role=\"group\" className={listClassName}>\n                {React.Children.toArray(children)\n                    .filter(item => !!item)\n                    .map((item, i) => (\n                        <li key={i} role=\"none\">\n                            {React.cloneElement(item as React.ReactElement<any>, { role: 'treeitem' })}\n                        </li>\n                    ))}\n            </ul>\n        </div>\n    );\n});\n\nexport type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<\n    TreeviewProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigable link */\n    Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /** Container for a set of related links, usually expandable */\n    Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Treeview = React.forwardRef(function Treeview(props: TreeviewProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} ref={ref} role=\"tree\" />;\n}) as ForwardedTreeviewWithStatics;\n\nTreeview.Group = TreeviewGroup;\nTreeview.Item = TreeviewItem;\n"],"names":["React","TreeviewItem","TreeviewGroup","Treeview"],"mappings":";;AAKA,MAAM,eAAeA,eAAM,WAAW,SAASC,cAAa,OAA0B,KAAmC;AACrH,SAAOD,+BAAA,cAAC,KAAA,EAAG,GAAG,OAAO,KAAU;AACnC,CAAC;AAkBD,MAAM,gBAAgBA,eAAM,WAAW,SAASE,eAAc,OAA2B,KAAgC;AACrH,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,UAAU,kBAAkB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIF,eAAM,SAAS,SAAS,eAAe;AAEvEA,iBAAM,UAAU,MAAM;AAClB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS,eAAe;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,OAAO,eAAe,CAAC;AAE3B,QAAM,gBAAgB,GAAG,iBAAiB;AAAA,IACtC,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,EAAA,CACZ;AAED,QAAM,YAAY;AAAA,IACd,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAGd,QAAM,cAAc,CAAC,UAAkD;AACnE,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,OAAO;AACR,kBAAY,SAAS;AAAA,IACzB;AAEA,QAAI,SAAS;AACT,cAAQ,OAAO,SAAS;AAAA,IAC5B;AAAA,EACJ;AAEA,QAAM,YAAY,OAAO,sBAAsB,aAAa,kBAAkB,QAAQ,IAAI;AAE1F,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,WAAW,WAAsB,OACtCA,+BAAA,cAAC,OAAA,EAAI,SAAS,YAAA,GAAc,OAAO,UAAU,aAAa,MAAM,QAAQ,IAAI,KAAM,GAClFA,+BAAA,cAAC,MAAA,EAAG,MAAK,SAAQ,WAAW,cAAA,GACvBA,eAAM,SAAS,QAAQ,QAAQ,EAC3B,OAAO,CAAA,SAAQ,CAAC,CAAC,IAAI,EACrB,IAAI,CAAC,MAAM,MACRA,+BAAA,cAAC,MAAA,EAAG,KAAK,GAAG,MAAK,OAAA,GACZA,eAAM,aAAa,MAAiC,EAAE,MAAM,WAAA,CAAY,CAC7E,CACH,CACT,CACJ;AAER,CAAC;AAaM,MAAM,WAAWA,eAAM,WAAW,SAASG,UAAS,OAAsB,KAAgC;AAC7G,sDAAQ,OAAA,EAAK,GAAG,OAAO,KAAU,MAAK,QAAO;AACjD,CAAC;AAED,SAAS,QAAQ;AACjB,SAAS,OAAO;"}

package/dist/components/Truncate/Truncate.cjs

@@ -12,9 +12,10 @@ const Truncate = ({ children, tooltip }) => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
-  const clonedChildrenWithRef = React.cloneElement(React.Children.only(children), {
+  const onlyChild = React.Children.only(children);
+  const clonedChildrenWithRef = React.cloneElement(onlyChild, {
     ref,
-    className: cn(children.props.className, "truncate", { "hover:cursor-pointer": isTruncated })
+    className: cn(onlyChild.props.className, "truncate", { "hover:cursor-pointer": isTruncated })
   });
   if (isTruncated) {
     return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { title: tooltip }, clonedChildrenWithRef);

package/dist/components/Truncate/Truncate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.cjs","sources":["../../../src/components/Truncate/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { useTruncated } from '../../utils/hooks/useTruncated';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type TruncateProps = {\n    children: React.ReactElement;\n    tooltip: string | JSX.Element;\n};\n\nexport const Truncate = ({ children, tooltip }: TruncateProps) => {\n    const ref = React.useRef<HTMLElement>(null);\n    const [mounted, setMounted] = React.useState(false);\n    const { isTruncated } = useTruncated(ref.current, [mounted]);\n\n    React.useEffect(() => {\n        setMounted(true);\n\n        return () => setMounted(false);\n    }, []);\n\n    const clonedChildrenWithRef = React.cloneElement(React.Children.only(children), {\n        ref,\n        className: cn(children.props.className, 'truncate', { 'hover:cursor-pointer': isTruncated }),\n    });\n\n    if (isTruncated) {\n        return <Tooltip title={tooltip}>{clonedChildrenWithRef}</Tooltip>;\n    }\n\n    return clonedChildrenWithRef;\n};\n"],"names":["useTruncated","Tooltip"],"mappings":";;;;;;AAWO,MAAM,WAAW,CAAC,EAAE,UAAU,cAA6B;AACxD,QAAA,MAAM,MAAM,OAAoB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAA,EAAE,gBAAgBA,aAAA,aAAa,IAAI,SAAS,CAAC,OAAO,CAAC;AAE3D,QAAM,UAAU,MAAM;AAClB,eAAW,IAAI;AAER,WAAA,MAAM,WAAW,KAAK;AAAA,EACjC,GAAG,EAAE;AAEL,QAAM,wBAAwB,MAAM,aAAa,MAAM,SAAS,KAAK,QAAQ,GAAG;AAAA,IAC5E;AAAA,IACA,WAAW,GAAG,SAAS,MAAM,WAAW,YAAY,EAAE,wBAAwB,YAAa,CAAA;AAAA,EAAA,CAC9F;AAED,MAAI,aAAa;AACb,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,qBAAsB;AAAA,EAAA;AAGpD,SAAA;AACX;;"}
+{"version":3,"file":"Truncate.cjs","sources":["../../../src/components/Truncate/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { useTruncated } from '../../utils/hooks/useTruncated';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type TruncateProps = {\n    children: React.ReactElement;\n    tooltip: string | React.JSX.Element;\n};\n\nexport const Truncate = ({ children, tooltip }: TruncateProps) => {\n    const ref = React.useRef<HTMLElement>(null);\n    const [mounted, setMounted] = React.useState(false);\n    const { isTruncated } = useTruncated(ref.current, [mounted]);\n\n    React.useEffect(() => {\n        setMounted(true);\n\n        return () => setMounted(false);\n    }, []);\n\n    const onlyChild = React.Children.only(children) as React.ReactElement<\n        { className?: string } & React.RefAttributes<HTMLElement>\n    >;\n    const clonedChildrenWithRef = React.cloneElement(onlyChild, {\n        ref,\n        className: cn(onlyChild.props.className, 'truncate', { 'hover:cursor-pointer': isTruncated }),\n    });\n\n    if (isTruncated) {\n        return <Tooltip title={tooltip}>{clonedChildrenWithRef}</Tooltip>;\n    }\n\n    return clonedChildrenWithRef;\n};\n"],"names":["useTruncated","Tooltip"],"mappings":";;;;;;AAWO,MAAM,WAAW,CAAC,EAAE,UAAU,cAA6B;AAC9D,QAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,EAAE,gBAAgBA,aAAAA,aAAa,IAAI,SAAS,CAAC,OAAO,CAAC;AAE3D,QAAM,UAAU,MAAM;AAClB,eAAW,IAAI;AAEf,WAAO,MAAM,WAAW,KAAK;AAAA,EACjC,GAAG,CAAA,CAAE;AAEL,QAAM,YAAY,MAAM,SAAS,KAAK,QAAQ;AAG9C,QAAM,wBAAwB,MAAM,aAAa,WAAW;AAAA,IACxD;AAAA,IACA,WAAW,GAAG,UAAU,MAAM,WAAW,YAAY,EAAE,wBAAwB,YAAA,CAAa;AAAA,EAAA,CAC/F;AAED,MAAI,aAAa;AACb,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,qBAAsB;AAAA,EAC3D;AAEA,SAAO;AACX;;"}

package/dist/components/Truncate/Truncate.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type TruncateProps = {
     children: React.ReactElement;
-    tooltip: string | JSX.Element;
+    tooltip: string | React.JSX.Element;
 };
 export declare const Truncate: ({ children, tooltip }: TruncateProps) => React.JSX.Element;

package/dist/components/Truncate/Truncate.js

@@ -10,9 +10,10 @@ const Truncate = ({ children, tooltip }) => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
-  const clonedChildrenWithRef = React__default.cloneElement(React__default.Children.only(children), {
+  const onlyChild = React__default.Children.only(children);
+  const clonedChildrenWithRef = React__default.cloneElement(onlyChild, {
     ref,
-    className: cn(children.props.className, "truncate", { "hover:cursor-pointer": isTruncated })
+    className: cn(onlyChild.props.className, "truncate", { "hover:cursor-pointer": isTruncated })
   });
   if (isTruncated) {
     return /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltip }, clonedChildrenWithRef);

package/dist/components/Truncate/Truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.js","sources":["../../../src/components/Truncate/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { useTruncated } from '../../utils/hooks/useTruncated';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type TruncateProps = {\n    children: React.ReactElement;\n    tooltip: string | JSX.Element;\n};\n\nexport const Truncate = ({ children, tooltip }: TruncateProps) => {\n    const ref = React.useRef<HTMLElement>(null);\n    const [mounted, setMounted] = React.useState(false);\n    const { isTruncated } = useTruncated(ref.current, [mounted]);\n\n    React.useEffect(() => {\n        setMounted(true);\n\n        return () => setMounted(false);\n    }, []);\n\n    const clonedChildrenWithRef = React.cloneElement(React.Children.only(children), {\n        ref,\n        className: cn(children.props.className, 'truncate', { 'hover:cursor-pointer': isTruncated }),\n    });\n\n    if (isTruncated) {\n        return <Tooltip title={tooltip}>{clonedChildrenWithRef}</Tooltip>;\n    }\n\n    return clonedChildrenWithRef;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,WAAW,CAAC,EAAE,UAAU,cAA6B;AACxD,QAAA,MAAMA,eAAM,OAAoB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAIA,eAAM,SAAS,KAAK;AAC5C,QAAA,EAAE,gBAAgB,aAAa,IAAI,SAAS,CAAC,OAAO,CAAC;AAE3DA,iBAAM,UAAU,MAAM;AAClB,eAAW,IAAI;AAER,WAAA,MAAM,WAAW,KAAK;AAAA,EACjC,GAAG,EAAE;AAEL,QAAM,wBAAwBA,eAAM,aAAaA,eAAM,SAAS,KAAK,QAAQ,GAAG;AAAA,IAC5E;AAAA,IACA,WAAW,GAAG,SAAS,MAAM,WAAW,YAAY,EAAE,wBAAwB,YAAa,CAAA;AAAA,EAAA,CAC9F;AAED,MAAI,aAAa;AACb,WAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,qBAAsB;AAAA,EAAA;AAGpD,SAAA;AACX;"}
+{"version":3,"file":"Truncate.js","sources":["../../../src/components/Truncate/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { useTruncated } from '../../utils/hooks/useTruncated';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type TruncateProps = {\n    children: React.ReactElement;\n    tooltip: string | React.JSX.Element;\n};\n\nexport const Truncate = ({ children, tooltip }: TruncateProps) => {\n    const ref = React.useRef<HTMLElement>(null);\n    const [mounted, setMounted] = React.useState(false);\n    const { isTruncated } = useTruncated(ref.current, [mounted]);\n\n    React.useEffect(() => {\n        setMounted(true);\n\n        return () => setMounted(false);\n    }, []);\n\n    const onlyChild = React.Children.only(children) as React.ReactElement<\n        { className?: string } & React.RefAttributes<HTMLElement>\n    >;\n    const clonedChildrenWithRef = React.cloneElement(onlyChild, {\n        ref,\n        className: cn(onlyChild.props.className, 'truncate', { 'hover:cursor-pointer': isTruncated }),\n    });\n\n    if (isTruncated) {\n        return <Tooltip title={tooltip}>{clonedChildrenWithRef}</Tooltip>;\n    }\n\n    return clonedChildrenWithRef;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,WAAW,CAAC,EAAE,UAAU,cAA6B;AAC9D,QAAM,MAAMA,eAAM,OAAoB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAIA,eAAM,SAAS,KAAK;AAClD,QAAM,EAAE,gBAAgB,aAAa,IAAI,SAAS,CAAC,OAAO,CAAC;AAE3DA,iBAAM,UAAU,MAAM;AAClB,eAAW,IAAI;AAEf,WAAO,MAAM,WAAW,KAAK;AAAA,EACjC,GAAG,CAAA,CAAE;AAEL,QAAM,YAAYA,eAAM,SAAS,KAAK,QAAQ;AAG9C,QAAM,wBAAwBA,eAAM,aAAa,WAAW;AAAA,IACxD;AAAA,IACA,WAAW,GAAG,UAAU,MAAM,WAAW,YAAY,EAAE,wBAAwB,YAAA,CAAa;AAAA,EAAA,CAC/F;AAED,MAAI,aAAa;AACb,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,qBAAsB;AAAA,EAC3D;AAEA,SAAO;AACX;"}

package/dist/components/Typography/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_HEADING_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type HeadingSize = 'sm' | 'md' | 'lg';\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type HeadingAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'className' | 'style'> & {\n    size?: HeadingSize;\n    level: HeadingLevel;\n    color?: HeadingColor;\n    align?: HeadingAlign;\n    children: React.ReactNode;\n};\n\nconst HEADING_LINE_HEIGHT_CLASS = 'leading-normal';\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        level,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as HeadingProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = `h${level}` as const;\n    const headingClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        'font-bold',\n        TYPOGRAPHY_HEADING_SIZE_CLASSES[size],\n        HEADING_LINE_HEIGHT_CLASS,\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align]\n    );\n\n    return (\n        <Component {...restProps} className={headingClassName} data-taco=\"heading\" ref={ref}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["React","Heading","TYPOGRAPHY_BASE_CLASSES","TYPOGRAPHY_HEADING_SIZE_CLASSES","TYPOGRAPHY_COLOR_MAP","TYPOGRAPHY_ALIGN_CLASSES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,4BAA4B;AAE3B,MAAM,UAAUA,iBAAM,WAA6C,SAASC,SAAQ,OAAO,KAAK;AAE7F,QAAA;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEE,QAAA,YAAY,IAAI,KAAK;AAC3B,QAAM,mBAAmB;AAAA,IACrBC,WAAA;AAAA,IACA;AAAA,IACAC,WAAAA,gCAAgC,IAAI;AAAA,IACpC;AAAA,IACAC,WAAAA,qBAAqB,KAAK;AAAA,IAC1BC,WAAAA,yBAAyB,KAAK;AAAA,EAClC;AAGI,SAAAL,iCAAA,cAAC,aAAW,GAAG,WAAW,WAAW,kBAAkB,aAAU,WAAU,IAAA,GACtE,QACL;AAER,CAAC;;"}
+{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_HEADING_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type HeadingSize = 'sm' | 'md' | 'lg';\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type HeadingAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'className' | 'style'> & {\n    size?: HeadingSize;\n    level: HeadingLevel;\n    color?: HeadingColor;\n    align?: HeadingAlign;\n    children: React.ReactNode;\n};\n\nconst HEADING_LINE_HEIGHT_CLASS = 'leading-normal';\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        level,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as HeadingProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = `h${level}` as const;\n    const headingClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        'font-bold',\n        TYPOGRAPHY_HEADING_SIZE_CLASSES[size],\n        HEADING_LINE_HEIGHT_CLASS,\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align]\n    );\n\n    return (\n        <Component {...restProps} className={headingClassName} data-taco=\"heading\" ref={ref}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["React","Heading","TYPOGRAPHY_BASE_CLASSES","TYPOGRAPHY_HEADING_SIZE_CLASSES","TYPOGRAPHY_COLOR_MAP","TYPOGRAPHY_ALIGN_CLASSES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,4BAA4B;AAE3B,MAAM,UAAUA,iBAAM,WAA6C,SAASC,SAAQ,OAAO,KAAK;AAEnG,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,mBAAmB;AAAA,IACrBC,WAAAA;AAAAA,IACA;AAAA,IACAC,WAAAA,gCAAgC,IAAI;AAAA,IACpC;AAAA,IACAC,WAAAA,qBAAqB,KAAK;AAAA,IAC1BC,WAAAA,yBAAyB,KAAK;AAAA,EAAA;AAGlC,SACIL,iCAAA,cAAC,aAAW,GAAG,WAAW,WAAW,kBAAkB,aAAU,WAAU,IAAA,GACtE,QACL;AAER,CAAC;;"}

package/dist/components/Typography/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_HEADING_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type HeadingSize = 'sm' | 'md' | 'lg';\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type HeadingAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'className' | 'style'> & {\n    size?: HeadingSize;\n    level: HeadingLevel;\n    color?: HeadingColor;\n    align?: HeadingAlign;\n    children: React.ReactNode;\n};\n\nconst HEADING_LINE_HEIGHT_CLASS = 'leading-normal';\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        level,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as HeadingProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = `h${level}` as const;\n    const headingClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        'font-bold',\n        TYPOGRAPHY_HEADING_SIZE_CLASSES[size],\n        HEADING_LINE_HEIGHT_CLASS,\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align]\n    );\n\n    return (\n        <Component {...restProps} className={headingClassName} data-taco=\"heading\" ref={ref}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["Heading"],"mappings":";;;AAsBA,MAAM,4BAA4B;AAE3B,MAAM,UAAU,MAAM,WAA6C,SAASA,SAAQ,OAAO,KAAK;AAE7F,QAAA;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEE,QAAA,YAAY,IAAI,KAAK;AAC3B,QAAM,mBAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,gCAAgC,IAAI;AAAA,IACpC;AAAA,IACA,qBAAqB,KAAK;AAAA,IAC1B,yBAAyB,KAAK;AAAA,EAClC;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,WAAW,WAAW,kBAAkB,aAAU,WAAU,IAAA,GACtE,QACL;AAER,CAAC;"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_HEADING_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type HeadingSize = 'sm' | 'md' | 'lg';\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type HeadingAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'className' | 'style'> & {\n    size?: HeadingSize;\n    level: HeadingLevel;\n    color?: HeadingColor;\n    align?: HeadingAlign;\n    children: React.ReactNode;\n};\n\nconst HEADING_LINE_HEIGHT_CLASS = 'leading-normal';\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        level,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as HeadingProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = `h${level}` as const;\n    const headingClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        'font-bold',\n        TYPOGRAPHY_HEADING_SIZE_CLASSES[size],\n        HEADING_LINE_HEIGHT_CLASS,\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align]\n    );\n\n    return (\n        <Component {...restProps} className={headingClassName} data-taco=\"heading\" ref={ref}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["Heading"],"mappings":";;;AAsBA,MAAM,4BAA4B;AAE3B,MAAM,UAAU,MAAM,WAA6C,SAASA,SAAQ,OAAO,KAAK;AAEnG,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,mBAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,gCAAgC,IAAI;AAAA,IACpC;AAAA,IACA,qBAAqB,KAAK;AAAA,IAC1B,yBAAyB,KAAK;AAAA,EAAA;AAGlC,SACI,sBAAA,cAAC,aAAW,GAAG,WAAW,WAAW,kBAAkB,aAAU,WAAU,IAAA,GACtE,QACL;AAER,CAAC;"}

package/dist/components/Typography/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_LINE_HEIGHT_CLASSES,\n    TYPOGRAPHY_TEXT_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type TextSize = 'sm' | 'md' | 'lg';\nexport type TextAs = 'p' | 'li' | 'dt' | 'dd' | 'span';\nexport type TextColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type TextAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n    size?: TextSize;\n    as?: TextAs;\n    bold?: boolean;\n    color?: TextColor;\n    align?: TextAlign;\n    children: React.ReactNode;\n};\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(function Text(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        as = 'p',\n        bold = false,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as TextProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = as;\n    const resetListMarker = as === 'li';\n    const textClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        TYPOGRAPHY_TEXT_SIZE_CLASSES[size],\n        TYPOGRAPHY_LINE_HEIGHT_CLASSES[size],\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align],\n        {\n            'font-bold': bold,\n            'font-normal': !bold,\n            'list-none': resetListMarker,\n        }\n    );\n\n    return (\n        <Component {...restProps} className={textClassName} data-taco=\"text\" ref={ref as any}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["React","Text","TYPOGRAPHY_BASE_CLASSES","TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","TYPOGRAPHY_COLOR_MAP","TYPOGRAPHY_ALIGN_CLASSES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,OAAOA,iBAAM,WAAmC,SAASC,MAAK,OAAO,KAAK;AAE7E,QAAA;AAAA,IACF,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY;AAClB,QAAM,kBAAkB,OAAO;AAC/B,QAAM,gBAAgB;AAAA,IAClBC,WAAA;AAAA,IACAC,WAAAA,6BAA6B,IAAI;AAAA,IACjCC,WAAAA,+BAA+B,IAAI;AAAA,IACnCC,WAAAA,qBAAqB,KAAK;AAAA,IAC1BC,WAAAA,yBAAyB,KAAK;AAAA,IAC9B;AAAA,MACI,aAAa;AAAA,MACb,eAAe,CAAC;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAN,iCAAA,cAAC,aAAW,GAAG,WAAW,WAAW,eAAe,aAAU,QAAO,IAAA,GAChE,QACL;AAER,CAAC;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_LINE_HEIGHT_CLASSES,\n    TYPOGRAPHY_TEXT_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type TextSize = 'sm' | 'md' | 'lg';\nexport type TextAs = 'p' | 'li' | 'dt' | 'dd' | 'span';\nexport type TextColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type TextAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n    size?: TextSize;\n    as?: TextAs;\n    bold?: boolean;\n    color?: TextColor;\n    align?: TextAlign;\n    children: React.ReactNode;\n};\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(function Text(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        as = 'p',\n        bold = false,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as TextProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = as;\n    const resetListMarker = as === 'li';\n    const textClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        TYPOGRAPHY_TEXT_SIZE_CLASSES[size],\n        TYPOGRAPHY_LINE_HEIGHT_CLASSES[size],\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align],\n        {\n            'font-bold': bold,\n            'font-normal': !bold,\n            'list-none': resetListMarker,\n        }\n    );\n\n    return (\n        <Component {...restProps} className={textClassName} data-taco=\"text\" ref={ref as any}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["React","Text","TYPOGRAPHY_BASE_CLASSES","TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","TYPOGRAPHY_COLOR_MAP","TYPOGRAPHY_ALIGN_CLASSES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,OAAOA,iBAAM,WAAmC,SAASC,MAAK,OAAO,KAAK;AAEnF,QAAM;AAAA,IACF,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY;AAClB,QAAM,kBAAkB,OAAO;AAC/B,QAAM,gBAAgB;AAAA,IAClBC,WAAAA;AAAAA,IACAC,WAAAA,6BAA6B,IAAI;AAAA,IACjCC,WAAAA,+BAA+B,IAAI;AAAA,IACnCC,WAAAA,qBAAqB,KAAK;AAAA,IAC1BC,WAAAA,yBAAyB,KAAK;AAAA,IAC9B;AAAA,MACI,aAAa;AAAA,MACb,eAAe,CAAC;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EACjB;AAGJ,SACIN,iCAAA,cAAC,aAAW,GAAG,WAAW,WAAW,eAAe,aAAU,QAAO,IAAA,GAChE,QACL;AAER,CAAC;;"}

package/dist/components/Typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_LINE_HEIGHT_CLASSES,\n    TYPOGRAPHY_TEXT_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type TextSize = 'sm' | 'md' | 'lg';\nexport type TextAs = 'p' | 'li' | 'dt' | 'dd' | 'span';\nexport type TextColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type TextAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n    size?: TextSize;\n    as?: TextAs;\n    bold?: boolean;\n    color?: TextColor;\n    align?: TextAlign;\n    children: React.ReactNode;\n};\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(function Text(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        as = 'p',\n        bold = false,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as TextProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = as;\n    const resetListMarker = as === 'li';\n    const textClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        TYPOGRAPHY_TEXT_SIZE_CLASSES[size],\n        TYPOGRAPHY_LINE_HEIGHT_CLASSES[size],\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align],\n        {\n            'font-bold': bold,\n            'font-normal': !bold,\n            'list-none': resetListMarker,\n        }\n    );\n\n    return (\n        <Component {...restProps} className={textClassName} data-taco=\"text\" ref={ref as any}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["Text"],"mappings":";;;AAwBO,MAAM,OAAO,MAAM,WAAmC,SAASA,MAAK,OAAO,KAAK;AAE7E,QAAA;AAAA,IACF,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY;AAClB,QAAM,kBAAkB,OAAO;AAC/B,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,6BAA6B,IAAI;AAAA,IACjC,+BAA+B,IAAI;AAAA,IACnC,qBAAqB,KAAK;AAAA,IAC1B,yBAAyB,KAAK;AAAA,IAC9B;AAAA,MACI,aAAa;AAAA,MACb,eAAe,CAAC;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,WAAW,WAAW,eAAe,aAAU,QAAO,IAAA,GAChE,QACL;AAER,CAAC;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport {\n    TYPOGRAPHY_ALIGN_CLASSES,\n    TYPOGRAPHY_BASE_CLASSES,\n    TYPOGRAPHY_COLOR_MAP,\n    TYPOGRAPHY_LINE_HEIGHT_CLASSES,\n    TYPOGRAPHY_TEXT_SIZE_CLASSES,\n} from '../../utils/typography';\n\nexport type TextSize = 'sm' | 'md' | 'lg';\nexport type TextAs = 'p' | 'li' | 'dt' | 'dd' | 'span';\nexport type TextColor = keyof typeof TYPOGRAPHY_COLOR_MAP;\nexport type TextAlign = keyof typeof TYPOGRAPHY_ALIGN_CLASSES;\n\nexport type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {\n    size?: TextSize;\n    as?: TextAs;\n    bold?: boolean;\n    color?: TextColor;\n    align?: TextAlign;\n    children: React.ReactNode;\n};\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(function Text(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        size = 'md',\n        as = 'p',\n        bold = false,\n        color = 'primary',\n        align = 'start',\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as TextProps & { className?: string; style?: React.CSSProperties };\n\n    const Component = as;\n    const resetListMarker = as === 'li';\n    const textClassName = cn(\n        TYPOGRAPHY_BASE_CLASSES,\n        TYPOGRAPHY_TEXT_SIZE_CLASSES[size],\n        TYPOGRAPHY_LINE_HEIGHT_CLASSES[size],\n        TYPOGRAPHY_COLOR_MAP[color],\n        TYPOGRAPHY_ALIGN_CLASSES[align],\n        {\n            'font-bold': bold,\n            'font-normal': !bold,\n            'list-none': resetListMarker,\n        }\n    );\n\n    return (\n        <Component {...restProps} className={textClassName} data-taco=\"text\" ref={ref as any}>\n            {children}\n        </Component>\n    );\n});\n"],"names":["Text"],"mappings":";;;AAwBO,MAAM,OAAO,MAAM,WAAmC,SAASA,MAAK,OAAO,KAAK;AAEnF,QAAM;AAAA,IACF,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,YAAY;AAClB,QAAM,kBAAkB,OAAO;AAC/B,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,6BAA6B,IAAI;AAAA,IACjC,+BAA+B,IAAI;AAAA,IACnC,qBAAqB,KAAK;AAAA,IAC1B,yBAAyB,KAAK;AAAA,IAC9B;AAAA,MACI,aAAa;AAAA,MACb,eAAe,CAAC;AAAA,MAChB,aAAa;AAAA,IAAA;AAAA,EACjB;AAGJ,SACI,sBAAA,cAAC,aAAW,GAAG,WAAW,WAAW,eAAe,aAAU,QAAO,IAAA,GAChE,QACL;AAER,CAAC;"}

package/dist/components/VisuallyHidden/VisuallyHidden.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.cjs","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\n    return <span {...props} className=\"sr-only\" ref={ref} />;\n});\n"],"names":["React","VisuallyHidden"],"mappings":";;;;;;;;;;;;;;;;;;;;AAIO,MAAM,iBAAiBA,iBAAM,WAAW,SAASC,gBAAe,OAAc,KAAiC;AAClH,wDAAQ,QAAM,EAAA,GAAG,OAAO,WAAU,WAAU,KAAU;AAC1D,CAAC;;"}
+{"version":3,"file":"VisuallyHidden.cjs","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\n    return <span {...props} className=\"sr-only\" ref={ref} />;\n});\n"],"names":["React","VisuallyHidden"],"mappings":";;;;;;;;;;;;;;;;;;;;AAIO,MAAM,iBAAiBA,iBAAM,WAAW,SAASC,gBAAe,OAAc,KAAiC;AAClH,wDAAQ,QAAA,EAAM,GAAG,OAAO,WAAU,WAAU,KAAU;AAC1D,CAAC;;"}

package/dist/components/VisuallyHidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\n    return <span {...props} className=\"sr-only\" ref={ref} />;\n});\n"],"names":["VisuallyHidden"],"mappings":";AAIO,MAAM,iBAAiB,MAAM,WAAW,SAASA,gBAAe,OAAc,KAAiC;AAClH,6CAAQ,QAAM,EAAA,GAAG,OAAO,WAAU,WAAU,KAAU;AAC1D,CAAC;"}
+{"version":3,"file":"VisuallyHidden.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype Props = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const VisuallyHidden = React.forwardRef(function VisuallyHidden(props: Props, ref: React.Ref<HTMLSpanElement>) {\n    return <span {...props} className=\"sr-only\" ref={ref} />;\n});\n"],"names":["VisuallyHidden"],"mappings":";AAIO,MAAM,iBAAiB,MAAM,WAAW,SAASA,gBAAe,OAAc,KAAiC;AAClH,6CAAQ,QAAA,EAAM,GAAG,OAAO,WAAU,WAAU,KAAU;AAC1D,CAAC;"}

package/dist/hooks/useBoundaryOverflowDetection.cjs

@@ -11,7 +11,7 @@ const useBoundaryOverflowDetection = (ref, dependencies = []) => {
       const boundaryChildIndex = dom.getIndexOfFirstChildOverflowingParent(ref.current);
       setBoundaryIndex(boundaryChildIndex);
     }
-  }, [ref, dimensions == null ? void 0 : dimensions.width, ...dependencies]);
+  }, [ref, dimensions?.width, ...dependencies]);
   return boundaryIndex;
 };
 exports.useBoundaryOverflowDetection = useBoundaryOverflowDetection;

package/dist/hooks/useBoundaryOverflowDetection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBoundaryOverflowDetection.cjs","sources":["../../src/hooks/useBoundaryOverflowDetection.ts"],"sourcesContent":["import React from 'react';\nimport { getIndexOfFirstChildOverflowingParent } from '../utils/dom';\nimport { useBoundingClientRectListener } from './useBoundingClientRectListener';\n\nexport const useBoundaryOverflowDetection = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies: any[] = []\n): number | null | undefined => {\n    const [boundaryIndex, setBoundaryIndex] = React.useState<number | null>();\n    const dimensions = useBoundingClientRectListener(ref, dependencies);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);\n            setBoundaryIndex(boundaryChildIndex);\n        }\n    }, [ref, dimensions?.width, ...dependencies]);\n\n    return boundaryIndex;\n};\n"],"names":["useBoundingClientRectListener","getIndexOfFirstChildOverflowingParent"],"mappings":";;;;;AAIO,MAAM,+BAA+B,CACxC,KACA,eAAsB,OACM;AAC5B,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAwB;AAClE,QAAA,aAAaA,8BAAAA,8BAA8B,KAAK,YAAY;AAElE,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACP,YAAA,qBAAqBC,IAAAA,sCAAsC,IAAI,OAAO;AAC5E,uBAAiB,kBAAkB;AAAA,IAAA;AAAA,KAExC,CAAC,KAAK,yCAAY,OAAO,GAAG,YAAY,CAAC;AAErC,SAAA;AACX;;"}
+{"version":3,"file":"useBoundaryOverflowDetection.cjs","sources":["../../src/hooks/useBoundaryOverflowDetection.ts"],"sourcesContent":["import React from 'react';\nimport { getIndexOfFirstChildOverflowingParent } from '../utils/dom';\nimport { useBoundingClientRectListener } from './useBoundingClientRectListener';\n\nexport const useBoundaryOverflowDetection = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies: any[] = []\n): number | null | undefined => {\n    const [boundaryIndex, setBoundaryIndex] = React.useState<number | null>();\n    const dimensions = useBoundingClientRectListener(ref, dependencies);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);\n            setBoundaryIndex(boundaryChildIndex);\n        }\n    }, [ref, dimensions?.width, ...dependencies]);\n\n    return boundaryIndex;\n};\n"],"names":["useBoundingClientRectListener","getIndexOfFirstChildOverflowingParent"],"mappings":";;;;;AAIO,MAAM,+BAA+B,CACxC,KACA,eAAsB,OACM;AAC5B,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAA;AAChD,QAAM,aAAaA,8BAAAA,8BAA8B,KAAK,YAAY;AAElE,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACb,YAAM,qBAAqBC,IAAAA,sCAAsC,IAAI,OAAO;AAC5E,uBAAiB,kBAAkB;AAAA,IACvC;AAAA,EACJ,GAAG,CAAC,KAAK,YAAY,OAAO,GAAG,YAAY,CAAC;AAE5C,SAAO;AACX;;"}

package/dist/hooks/useBoundaryOverflowDetection.js

@@ -9,7 +9,7 @@ const useBoundaryOverflowDetection = (ref, dependencies = []) => {
       const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);
       setBoundaryIndex(boundaryChildIndex);
     }
-  }, [ref, dimensions == null ? void 0 : dimensions.width, ...dependencies]);
+  }, [ref, dimensions?.width, ...dependencies]);
   return boundaryIndex;
 };
 export {

package/dist/hooks/useBoundaryOverflowDetection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBoundaryOverflowDetection.js","sources":["../../src/hooks/useBoundaryOverflowDetection.ts"],"sourcesContent":["import React from 'react';\nimport { getIndexOfFirstChildOverflowingParent } from '../utils/dom';\nimport { useBoundingClientRectListener } from './useBoundingClientRectListener';\n\nexport const useBoundaryOverflowDetection = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies: any[] = []\n): number | null | undefined => {\n    const [boundaryIndex, setBoundaryIndex] = React.useState<number | null>();\n    const dimensions = useBoundingClientRectListener(ref, dependencies);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);\n            setBoundaryIndex(boundaryChildIndex);\n        }\n    }, [ref, dimensions?.width, ...dependencies]);\n\n    return boundaryIndex;\n};\n"],"names":["React"],"mappings":";;;AAIO,MAAM,+BAA+B,CACxC,KACA,eAAsB,OACM;AAC5B,QAAM,CAAC,eAAe,gBAAgB,IAAIA,eAAM,SAAwB;AAClE,QAAA,aAAa,8BAA8B,KAAK,YAAY;AAElEA,iBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACP,YAAA,qBAAqB,sCAAsC,IAAI,OAAO;AAC5E,uBAAiB,kBAAkB;AAAA,IAAA;AAAA,KAExC,CAAC,KAAK,yCAAY,OAAO,GAAG,YAAY,CAAC;AAErC,SAAA;AACX;"}
+{"version":3,"file":"useBoundaryOverflowDetection.js","sources":["../../src/hooks/useBoundaryOverflowDetection.ts"],"sourcesContent":["import React from 'react';\nimport { getIndexOfFirstChildOverflowingParent } from '../utils/dom';\nimport { useBoundingClientRectListener } from './useBoundingClientRectListener';\n\nexport const useBoundaryOverflowDetection = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies: any[] = []\n): number | null | undefined => {\n    const [boundaryIndex, setBoundaryIndex] = React.useState<number | null>();\n    const dimensions = useBoundingClientRectListener(ref, dependencies);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);\n            setBoundaryIndex(boundaryChildIndex);\n        }\n    }, [ref, dimensions?.width, ...dependencies]);\n\n    return boundaryIndex;\n};\n"],"names":["React"],"mappings":";;;AAIO,MAAM,+BAA+B,CACxC,KACA,eAAsB,OACM;AAC5B,QAAM,CAAC,eAAe,gBAAgB,IAAIA,eAAM,SAAA;AAChD,QAAM,aAAa,8BAA8B,KAAK,YAAY;AAElEA,iBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACb,YAAM,qBAAqB,sCAAsC,IAAI,OAAO;AAC5E,uBAAiB,kBAAkB;AAAA,IACvC;AAAA,EACJ,GAAG,CAAC,KAAK,YAAY,OAAO,GAAG,YAAY,CAAC;AAE5C,SAAO;AACX;"}

package/dist/hooks/useBoundingClientRectListener.cjs

@@ -25,9 +25,8 @@ const useBoundingClientRectListener = (ref, dependencies) => {
   const isRefElementVisible = getVisibility(ref.current);
   const [visibility, setVisibility] = React__namespace.useState(isRefElementVisible);
   const resize = () => {
-    var _a;
     if (visibility) {
-      setDimensions((_a = ref.current) == null ? void 0 : _a.getBoundingClientRect());
+      setDimensions(ref.current?.getBoundingClientRect());
     }
   };
   React__namespace.useEffect(() => {
@@ -46,9 +45,8 @@ const useBoundingClientRectListener = (ref, dependencies) => {
     }
   });
   React__namespace.useEffect(() => {
-    var _a;
     if (dependencies) {
-      setDimensions((_a = ref.current) == null ? void 0 : _a.getBoundingClientRect());
+      setDimensions(ref.current?.getBoundingClientRect());
     }
   }, dependencies);
   return dimensions;

package/dist/hooks/useBoundingClientRectListener.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBoundingClientRectListener.cjs","sources":["../../src/hooks/useBoundingClientRectListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce } from '../utils/debounce';\n\nconst getVisibility = (element: HTMLElement | null): boolean =>\n    Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));\n\nexport const useBoundingClientRectListener = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies?: Array<any>\n): DOMRectReadOnly | undefined => {\n    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly | undefined>(undefined);\n    const isRefElementVisible = getVisibility(ref.current);\n    const [visibility, setVisibility] = React.useState(isRefElementVisible);\n\n    const resize = () => {\n        if (visibility) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    };\n\n    React.useEffect(() => {\n        const timeout = setTimeout(resize, 0);\n        const debouncedResize = debounce(resize, 250);\n\n        window.addEventListener('resize', debouncedResize);\n\n        return () => {\n            clearTimeout(timeout);\n            window.removeEventListener('resize', debouncedResize);\n        };\n    }, [ref.current, visibility]);\n\n    React.useEffect(() => {\n        const newRefElementVisibility = getVisibility(ref.current);\n\n        if (visibility !== newRefElementVisibility) {\n            // When visibility of an element changes, then the new visibility of the element can only be checked after the\n            // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause\n            // the consumer to rerender and that will cause the above hook to recalculate the dimensions\n            setVisibility(newRefElementVisibility);\n        }\n    });\n\n    React.useEffect(() => {\n        if (dependencies) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    }, dependencies);\n\n    return dimensions;\n};\n"],"names":["React","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,gBAAgB,CAAC,YACnB,QAAQ,YAAY,QAAQ,eAAe,QAAQ,gBAAgB,QAAQ,eAAe,EAAE,OAAO;AAE1F,MAAA,gCAAgC,CACzC,KACA,iBAC8B;AAC9B,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAsC,MAAS;AACnF,QAAA,sBAAsB,cAAc,IAAI,OAAO;AACrD,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAS,mBAAmB;AAEtE,QAAM,SAAS,MAAM;;AACjB,QAAI,YAAY;AACE,qBAAA,SAAI,YAAJ,mBAAa,uBAAuB;AAAA,IAAA;AAAA,EAE1D;AAEAA,mBAAM,UAAU,MAAM;AACZ,UAAA,UAAU,WAAW,QAAQ,CAAC;AAC9B,UAAA,kBAAkBC,SAAAA,SAAS,QAAQ,GAAG;AAErC,WAAA,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,mBAAa,OAAO;AACb,aAAA,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACD,GAAA,CAAC,IAAI,SAAS,UAAU,CAAC;AAE5BD,mBAAM,UAAU,MAAM;AACZ,UAAA,0BAA0B,cAAc,IAAI,OAAO;AAEzD,QAAI,eAAe,yBAAyB;AAIxC,oBAAc,uBAAuB;AAAA,IAAA;AAAA,EACzC,CACH;AAEDA,mBAAM,UAAU,MAAM;;AAClB,QAAI,cAAc;AACA,qBAAA,SAAI,YAAJ,mBAAa,uBAAuB;AAAA,IAAA;AAAA,KAEvD,YAAY;AAER,SAAA;AACX;;"}
+{"version":3,"file":"useBoundingClientRectListener.cjs","sources":["../../src/hooks/useBoundingClientRectListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce } from '../utils/debounce';\n\nconst getVisibility = (element: HTMLElement | null): boolean =>\n    Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));\n\nexport const useBoundingClientRectListener = (\n    ref: React.RefObject<HTMLElement | null>,\n    dependencies?: Array<any>\n): DOMRectReadOnly | undefined => {\n    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly | undefined>(undefined);\n    const isRefElementVisible = getVisibility(ref.current);\n    const [visibility, setVisibility] = React.useState(isRefElementVisible);\n\n    const resize = () => {\n        if (visibility) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    };\n\n    React.useEffect(() => {\n        const timeout = setTimeout(resize, 0);\n        const debouncedResize = debounce(resize, 250);\n\n        window.addEventListener('resize', debouncedResize);\n\n        return () => {\n            clearTimeout(timeout);\n            window.removeEventListener('resize', debouncedResize);\n        };\n    }, [ref.current, visibility]);\n\n    React.useEffect(() => {\n        const newRefElementVisibility = getVisibility(ref.current);\n\n        if (visibility !== newRefElementVisibility) {\n            // When visibility of an element changes, then the new visibility of the element can only be checked after the\n            // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause\n            // the consumer to rerender and that will cause the above hook to recalculate the dimensions\n            setVisibility(newRefElementVisibility);\n        }\n    });\n\n    React.useEffect(() => {\n        if (dependencies) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    }, dependencies);\n\n    return dimensions;\n};\n"],"names":["React","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,gBAAgB,CAAC,YACnB,QAAQ,YAAY,QAAQ,eAAe,QAAQ,gBAAgB,QAAQ,eAAA,EAAiB,OAAO;AAEhG,MAAM,gCAAgC,CACzC,KACA,iBAC8B;AAC9B,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAsC,MAAS;AACzF,QAAM,sBAAsB,cAAc,IAAI,OAAO;AACrD,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAS,mBAAmB;AAEtE,QAAM,SAAS,MAAM;AACjB,QAAI,YAAY;AACZ,oBAAc,IAAI,SAAS,uBAAuB;AAAA,IACtD;AAAA,EACJ;AAEAA,mBAAM,UAAU,MAAM;AAClB,UAAM,UAAU,WAAW,QAAQ,CAAC;AACpC,UAAM,kBAAkBC,SAAAA,SAAS,QAAQ,GAAG;AAE5C,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,mBAAa,OAAO;AACpB,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,IAAI,SAAS,UAAU,CAAC;AAE5BD,mBAAM,UAAU,MAAM;AAClB,UAAM,0BAA0B,cAAc,IAAI,OAAO;AAEzD,QAAI,eAAe,yBAAyB;AAIxC,oBAAc,uBAAuB;AAAA,IACzC;AAAA,EACJ,CAAC;AAEDA,mBAAM,UAAU,MAAM;AAClB,QAAI,cAAc;AACd,oBAAc,IAAI,SAAS,uBAAuB;AAAA,IACtD;AAAA,EACJ,GAAG,YAAY;AAEf,SAAO;AACX;;"}

package/dist/hooks/useBoundingClientRectListener.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const useBoundingClientRectListener: (ref: React.RefObject<HTMLElement>, dependencies?: Array<any>) => DOMRectReadOnly | undefined;
+export declare const useBoundingClientRectListener: (ref: React.RefObject<HTMLElement | null>, dependencies?: Array<any>) => DOMRectReadOnly | undefined;

package/dist/hooks/useBoundingClientRectListener.js

@@ -6,9 +6,8 @@ const useBoundingClientRectListener = (ref, dependencies) => {
   const isRefElementVisible = getVisibility(ref.current);
   const [visibility, setVisibility] = React.useState(isRefElementVisible);
   const resize = () => {
-    var _a;
     if (visibility) {
-      setDimensions((_a = ref.current) == null ? void 0 : _a.getBoundingClientRect());
+      setDimensions(ref.current?.getBoundingClientRect());
     }
   };
   React.useEffect(() => {
@@ -27,9 +26,8 @@ const useBoundingClientRectListener = (ref, dependencies) => {
     }
   });
   React.useEffect(() => {
-    var _a;
     if (dependencies) {
-      setDimensions((_a = ref.current) == null ? void 0 : _a.getBoundingClientRect());
+      setDimensions(ref.current?.getBoundingClientRect());
     }
   }, dependencies);
   return dimensions;

package/dist/hooks/useBoundingClientRectListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBoundingClientRectListener.js","sources":["../../src/hooks/useBoundingClientRectListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce } from '../utils/debounce';\n\nconst getVisibility = (element: HTMLElement | null): boolean =>\n    Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));\n\nexport const useBoundingClientRectListener = (\n    ref: React.RefObject<HTMLElement>,\n    dependencies?: Array<any>\n): DOMRectReadOnly | undefined => {\n    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly | undefined>(undefined);\n    const isRefElementVisible = getVisibility(ref.current);\n    const [visibility, setVisibility] = React.useState(isRefElementVisible);\n\n    const resize = () => {\n        if (visibility) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    };\n\n    React.useEffect(() => {\n        const timeout = setTimeout(resize, 0);\n        const debouncedResize = debounce(resize, 250);\n\n        window.addEventListener('resize', debouncedResize);\n\n        return () => {\n            clearTimeout(timeout);\n            window.removeEventListener('resize', debouncedResize);\n        };\n    }, [ref.current, visibility]);\n\n    React.useEffect(() => {\n        const newRefElementVisibility = getVisibility(ref.current);\n\n        if (visibility !== newRefElementVisibility) {\n            // When visibility of an element changes, then the new visibility of the element can only be checked after the\n            // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause\n            // the consumer to rerender and that will cause the above hook to recalculate the dimensions\n            setVisibility(newRefElementVisibility);\n        }\n    });\n\n    React.useEffect(() => {\n        if (dependencies) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    }, dependencies);\n\n    return dimensions;\n};\n"],"names":[],"mappings":";;AAGA,MAAM,gBAAgB,CAAC,YACnB,QAAQ,YAAY,QAAQ,eAAe,QAAQ,gBAAgB,QAAQ,eAAe,EAAE,OAAO;AAE1F,MAAA,gCAAgC,CACzC,KACA,iBAC8B;AAC9B,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAsC,MAAS;AACnF,QAAA,sBAAsB,cAAc,IAAI,OAAO;AACrD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,mBAAmB;AAEtE,QAAM,SAAS,MAAM;;AACjB,QAAI,YAAY;AACE,qBAAA,SAAI,YAAJ,mBAAa,uBAAuB;AAAA,IAAA;AAAA,EAE1D;AAEA,QAAM,UAAU,MAAM;AACZ,UAAA,UAAU,WAAW,QAAQ,CAAC;AAC9B,UAAA,kBAAkB,SAAS,QAAQ,GAAG;AAErC,WAAA,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,mBAAa,OAAO;AACb,aAAA,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACD,GAAA,CAAC,IAAI,SAAS,UAAU,CAAC;AAE5B,QAAM,UAAU,MAAM;AACZ,UAAA,0BAA0B,cAAc,IAAI,OAAO;AAEzD,QAAI,eAAe,yBAAyB;AAIxC,oBAAc,uBAAuB;AAAA,IAAA;AAAA,EACzC,CACH;AAED,QAAM,UAAU,MAAM;;AAClB,QAAI,cAAc;AACA,qBAAA,SAAI,YAAJ,mBAAa,uBAAuB;AAAA,IAAA;AAAA,KAEvD,YAAY;AAER,SAAA;AACX;"}
+{"version":3,"file":"useBoundingClientRectListener.js","sources":["../../src/hooks/useBoundingClientRectListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce } from '../utils/debounce';\n\nconst getVisibility = (element: HTMLElement | null): boolean =>\n    Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));\n\nexport const useBoundingClientRectListener = (\n    ref: React.RefObject<HTMLElement | null>,\n    dependencies?: Array<any>\n): DOMRectReadOnly | undefined => {\n    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly | undefined>(undefined);\n    const isRefElementVisible = getVisibility(ref.current);\n    const [visibility, setVisibility] = React.useState(isRefElementVisible);\n\n    const resize = () => {\n        if (visibility) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    };\n\n    React.useEffect(() => {\n        const timeout = setTimeout(resize, 0);\n        const debouncedResize = debounce(resize, 250);\n\n        window.addEventListener('resize', debouncedResize);\n\n        return () => {\n            clearTimeout(timeout);\n            window.removeEventListener('resize', debouncedResize);\n        };\n    }, [ref.current, visibility]);\n\n    React.useEffect(() => {\n        const newRefElementVisibility = getVisibility(ref.current);\n\n        if (visibility !== newRefElementVisibility) {\n            // When visibility of an element changes, then the new visibility of the element can only be checked after the\n            // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause\n            // the consumer to rerender and that will cause the above hook to recalculate the dimensions\n            setVisibility(newRefElementVisibility);\n        }\n    });\n\n    React.useEffect(() => {\n        if (dependencies) {\n            setDimensions(ref.current?.getBoundingClientRect());\n        }\n    }, dependencies);\n\n    return dimensions;\n};\n"],"names":[],"mappings":";;AAGA,MAAM,gBAAgB,CAAC,YACnB,QAAQ,YAAY,QAAQ,eAAe,QAAQ,gBAAgB,QAAQ,eAAA,EAAiB,OAAO;AAEhG,MAAM,gCAAgC,CACzC,KACA,iBAC8B;AAC9B,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAsC,MAAS;AACzF,QAAM,sBAAsB,cAAc,IAAI,OAAO;AACrD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,mBAAmB;AAEtE,QAAM,SAAS,MAAM;AACjB,QAAI,YAAY;AACZ,oBAAc,IAAI,SAAS,uBAAuB;AAAA,IACtD;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,UAAM,UAAU,WAAW,QAAQ,CAAC;AACpC,UAAM,kBAAkB,SAAS,QAAQ,GAAG;AAE5C,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,mBAAa,OAAO;AACpB,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,IAAI,SAAS,UAAU,CAAC;AAE5B,QAAM,UAAU,MAAM;AAClB,UAAM,0BAA0B,cAAc,IAAI,OAAO;AAEzD,QAAI,eAAe,yBAAyB;AAIxC,oBAAc,uBAAuB;AAAA,IACzC;AAAA,EACJ,CAAC;AAED,QAAM,UAAU,MAAM;AAClB,QAAI,cAAc;AACd,oBAAc,IAAI,SAAS,uBAAuB;AAAA,IACtD;AAAA,EACJ,GAAG,YAAY;AAEf,SAAO;AACX;"}

package/dist/hooks/useControlled.cjs

@@ -24,11 +24,10 @@ function useControlled(props) {
   const returnValue = isControlled ? props.value : uncontrolledValue;
   const onChange = React__namespace.useCallback(
     (nextValue) => {
-      var _a;
       if (isControlled) {
         const newValue = isFunction(nextValue) ? nextValue(props.value) : nextValue;
         if (newValue !== props.value) {
-          (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, newValue);
+          onChangeRef.current?.(newValue);
         }
       } else {
         setUncontrolledValue(nextValue);
@@ -46,9 +45,8 @@ function useUncontrolledState(defaultValue, onChange) {
     onChangeRef.current = onChange;
   }, [onChange]);
   React__namespace.useEffect(() => {
-    var _a;
     if (prevValueRef.current !== value) {
-      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value);
+      onChangeRef.current?.(value);
       prevValueRef.current = value;
     }
   }, [value, prevValueRef]);

package/dist/hooks/useControlled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useControlled.cjs","sources":["../../src/hooks/useControlled.ts"],"sourcesContent":["import * as React from 'react';\n\ntype SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>;\n\nexport type UseControlledProps<T> = {\n    // Controlled\n    value?: T | undefined;\n    onChange?: (value: T) => void;\n\n    // Uncontrolled value.\n    defaultValue?: T | undefined;\n};\n\nexport function useControlled<T = unknown>(props: UseControlledProps<T>): [T, SetStateFn<T>] {\n    const [uncontrolledValue, setUncontrolledValue, onChangeRef] = useUncontrolledState(props.defaultValue, props.onChange);\n\n    const isControlled = props.value !== undefined;\n\n    const returnValue = isControlled ? props.value : uncontrolledValue;\n\n    const onChange = React.useCallback<SetStateFn<T>>(\n        nextValue => {\n            if (isControlled) {\n                const newValue = isFunction(nextValue) ? nextValue(props.value as T) : nextValue;\n                if (newValue !== props.value) {\n                    onChangeRef.current?.(newValue);\n                }\n            } else {\n                setUncontrolledValue(nextValue as T);\n            }\n        },\n        [props.value, onChangeRef, isControlled, setUncontrolledValue]\n    );\n\n    return [returnValue as T, onChange];\n}\n\ntype ChangeHandler<T> = (state: T) => void;\n\nfunction useUncontrolledState<T>(\n    defaultValue: UseControlledProps<T>['defaultValue'],\n    onChange: UseControlledProps<T>['onChange']\n): [value: T, setValue: React.Dispatch<React.SetStateAction<T>>, OnChangeRef: React.RefObject<ChangeHandler<T> | undefined>] {\n    const [value, setValue] = React.useState(defaultValue);\n    const prevValueRef = React.useRef(value);\n\n    const onChangeRef = React.useRef(onChange);\n\n    React.useLayoutEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    React.useEffect(() => {\n        if (prevValueRef.current !== value) {\n            onChangeRef.current?.(value as T);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef]);\n\n    return [value as T, setValue as React.Dispatch<React.SetStateAction<T>>, onChangeRef];\n}\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n    return typeof value === 'function';\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaO,SAAS,cAA2B,OAAkD;AACnF,QAAA,CAAC,mBAAmB,sBAAsB,WAAW,IAAI,qBAAqB,MAAM,cAAc,MAAM,QAAQ;AAEhH,QAAA,eAAe,MAAM,UAAU;AAE/B,QAAA,cAAc,eAAe,MAAM,QAAQ;AAEjD,QAAM,WAAWA,iBAAM;AAAA,IACnB,CAAa,cAAA;;AACT,UAAI,cAAc;AACd,cAAM,WAAW,WAAW,SAAS,IAAI,UAAU,MAAM,KAAU,IAAI;AACnE,YAAA,aAAa,MAAM,OAAO;AAC1B,4BAAY,YAAZ,qCAAsB;AAAA,QAAQ;AAAA,MAClC,OACG;AACH,6BAAqB,SAAc;AAAA,MAAA;AAAA,IAE3C;AAAA,IACA,CAAC,MAAM,OAAO,aAAa,cAAc,oBAAoB;AAAA,EACjE;AAEO,SAAA,CAAC,aAAkB,QAAQ;AACtC;AAIA,SAAS,qBACL,cACA,UACyH;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIA,iBAAM,SAAS,YAAY;AAC/C,QAAA,eAAeA,iBAAM,OAAO,KAAK;AAEjC,QAAA,cAAcA,iBAAM,OAAO,QAAQ;AAEzCA,mBAAM,gBAAgB,MAAM;AACxB,gBAAY,UAAU;AAAA,EAAA,GACvB,CAAC,QAAQ,CAAC;AAEbA,mBAAM,UAAU,MAAM;;AACd,QAAA,aAAa,YAAY,OAAO;AAChC,wBAAY,YAAZ,qCAAsB;AACtB,mBAAa,UAAU;AAAA,IAAA;AAAA,EAC3B,GACD,CAAC,OAAO,YAAY,CAAC;AAEjB,SAAA,CAAC,OAAY,UAAqD,WAAW;AACxF;AAEA,SAAS,WAAW,OAAkD;AAClE,SAAO,OAAO,UAAU;AAC5B;;"}
+{"version":3,"file":"useControlled.cjs","sources":["../../src/hooks/useControlled.ts"],"sourcesContent":["import * as React from 'react';\n\ntype SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>;\n\nexport type UseControlledProps<T> = {\n    // Controlled\n    value?: T | undefined;\n    onChange?: (value: T) => void;\n\n    // Uncontrolled value.\n    defaultValue?: T | undefined;\n};\n\nexport function useControlled<T = unknown>(props: UseControlledProps<T>): [T, SetStateFn<T>] {\n    const [uncontrolledValue, setUncontrolledValue, onChangeRef] = useUncontrolledState(props.defaultValue, props.onChange);\n\n    const isControlled = props.value !== undefined;\n\n    const returnValue = isControlled ? props.value : uncontrolledValue;\n\n    const onChange = React.useCallback<SetStateFn<T>>(\n        nextValue => {\n            if (isControlled) {\n                const newValue = isFunction(nextValue) ? nextValue(props.value as T) : nextValue;\n                if (newValue !== props.value) {\n                    onChangeRef.current?.(newValue);\n                }\n            } else {\n                setUncontrolledValue(nextValue as T);\n            }\n        },\n        [props.value, onChangeRef, isControlled, setUncontrolledValue]\n    );\n\n    return [returnValue as T, onChange];\n}\n\ntype ChangeHandler<T> = (state: T) => void;\n\nfunction useUncontrolledState<T>(\n    defaultValue: UseControlledProps<T>['defaultValue'],\n    onChange: UseControlledProps<T>['onChange']\n): [value: T, setValue: React.Dispatch<React.SetStateAction<T>>, OnChangeRef: React.RefObject<ChangeHandler<T> | undefined>] {\n    const [value, setValue] = React.useState(defaultValue);\n    const prevValueRef = React.useRef(value);\n\n    const onChangeRef = React.useRef(onChange);\n\n    React.useLayoutEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    React.useEffect(() => {\n        if (prevValueRef.current !== value) {\n            onChangeRef.current?.(value as T);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef]);\n\n    return [value as T, setValue as React.Dispatch<React.SetStateAction<T>>, onChangeRef];\n}\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n    return typeof value === 'function';\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaO,SAAS,cAA2B,OAAkD;AACzF,QAAM,CAAC,mBAAmB,sBAAsB,WAAW,IAAI,qBAAqB,MAAM,cAAc,MAAM,QAAQ;AAEtH,QAAM,eAAe,MAAM,UAAU;AAErC,QAAM,cAAc,eAAe,MAAM,QAAQ;AAEjD,QAAM,WAAWA,iBAAM;AAAA,IACnB,CAAA,cAAa;AACT,UAAI,cAAc;AACd,cAAM,WAAW,WAAW,SAAS,IAAI,UAAU,MAAM,KAAU,IAAI;AACvE,YAAI,aAAa,MAAM,OAAO;AAC1B,sBAAY,UAAU,QAAQ;AAAA,QAClC;AAAA,MACJ,OAAO;AACH,6BAAqB,SAAc;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,CAAC,MAAM,OAAO,aAAa,cAAc,oBAAoB;AAAA,EAAA;AAGjE,SAAO,CAAC,aAAkB,QAAQ;AACtC;AAIA,SAAS,qBACL,cACA,UACyH;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIA,iBAAM,SAAS,YAAY;AACrD,QAAM,eAAeA,iBAAM,OAAO,KAAK;AAEvC,QAAM,cAAcA,iBAAM,OAAO,QAAQ;AAEzCA,mBAAM,gBAAgB,MAAM;AACxB,gBAAY,UAAU;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEbA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa,YAAY,OAAO;AAChC,kBAAY,UAAU,KAAU;AAChC,mBAAa,UAAU;AAAA,IAC3B;AAAA,EACJ,GAAG,CAAC,OAAO,YAAY,CAAC;AAExB,SAAO,CAAC,OAAY,UAAqD,WAAW;AACxF;AAEA,SAAS,WAAW,OAAkD;AAClE,SAAO,OAAO,UAAU;AAC5B;;"}

package/dist/hooks/useControlled.js

@@ -5,11 +5,10 @@ function useControlled(props) {
   const returnValue = isControlled ? props.value : uncontrolledValue;
   const onChange = React.useCallback(
     (nextValue) => {
-      var _a;
       if (isControlled) {
         const newValue = isFunction(nextValue) ? nextValue(props.value) : nextValue;
         if (newValue !== props.value) {
-          (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, newValue);
+          onChangeRef.current?.(newValue);
         }
       } else {
         setUncontrolledValue(nextValue);
@@ -27,9 +26,8 @@ function useUncontrolledState(defaultValue, onChange) {
     onChangeRef.current = onChange;
   }, [onChange]);
   React.useEffect(() => {
-    var _a;
     if (prevValueRef.current !== value) {
-      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, value);
+      onChangeRef.current?.(value);
       prevValueRef.current = value;
     }
   }, [value, prevValueRef]);