@economic/taco 13.0.0 → 14.0.0-tanstack-virtual-update.0

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["React","InputWithoutDeprecatedFeatures","useMergedRef","isPressingMetaKey","useBoundingClientRectListener","getInputClasses","Affix","getButtonStateClasses","Icon"],"mappings":"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"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Icon } from '@/components';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["React","InputWithoutDeprecatedFeatures","useMergedRef","isPressingMetaKey","useBoundingClientRectListener","getInputClasses","Affix","getButtonStateClasses","Icon"],"mappings":"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"}

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../Icon/Icon';
+import { IconName } from '..';
 import * as React from 'react';
 export type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {
     /** Draws attention to the input by changing its style and making it visually prominent */

package/dist/components/Input/Input.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
 import { isPressingMetaKey } from "../../utils/keyboard.js";
-import { Icon } from "../Icon/Icon.js";
 import { getButtonStateClasses, getInputClasses } from "./util.js";
+import { Icon } from "../Icon/Icon.js";
 const validSetSelectionRangeTypes = /* @__PURE__ */ new Set(["text", "search", "url", "tel", "password"]);
 const InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures2(props, ref) {
   const { highlighted, invalid, onKeyDown, postfix, prefix, type = "text", ...attributes } = props;

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\nimport type { IconName } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["InputWithoutDeprecatedFeatures","Affix"],"mappings":";;;;;;;AAoBA,MAAM,kDAAkC,IAAI,CAAC,QAAQ,UAAU,OAAO,OAAO,UAAU,CAAC;AAExF,MAAM,iCAAiC,MAAM,WAAW,SAASA,gCAC7D,OACA,KACF;AACE,QAAM,EAAE,aAAa,SAAS,WAAW,SAAS,QAAQ,OAAO,QAAQ,GAAG,WAAA,IAAe;AAC3F,QAAM,cAAc,aAA+B,GAAG;AAGtD,QAAM,gBAAgB,MAAM;AACxB,QAAI,YAAY,WAAW,SAAS,UAAU;AAC1C,OAAC,SAAU,IAAI;AACX,oBAAY,QAAQ,oBAAoB,YAAa,MAAM;AACvD,cAAI,KAAK,SAAS,UAAU;AACxB,iBAAK,OAAO;AACZ,eAAG,MAAM,MAAM,IAAI;AACnB,iBAAK,OAAO;AAAA,UAChB,OAAO;AACH,eAAG,MAAM,MAAM,IAAI;AAAA,UACvB;AAAA,QACJ;AAAA,MACJ,GAAG,YAAY,QAAQ,iBAAiB;AAAA,IAC5C;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,CAAC,UAAiD;AAEpE,QAAI,MAAM,IAAI,WAAW,KAAK,CAAC,kBAAkB,KAAK,GAAG;AACrD,YAAM,gBAAA;AAAA,IACV;AAMA,QAAI,4BAA4B,IAAI,IAAI,KAAK,CAAC,MAAM,aAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,QAAQ;AAC3G,YAAM,eAAA;AACN,YAAM,WAAW,MAAM,QAAQ,QAAQ,MAAM,cAAc,MAAM,SAAS;AAC1E,YAAM,cAAc,kBAAkB,UAAU,QAAQ;AAGxD,UAAI,YAAY,SAAS;AACrB,cAAM,iBAAiB,MAAM,QAAQ,QAAQ,YAAY,QAAQ,cAAc;AAC/E,oBAAY,QAAQ,aAAa;AAAA,MACrC;AAAA,IACJ;AAEA,QAAI,OAAO,cAAc,YAAY;AACjC,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,YAAY,MAAM,OAAuB,IAAI;AACnD,QAAM,aAAa,8BAA8B,SAAS;AAC1D,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,cAAc,8BAA8B,YAAY,CAAC,OAAO,CAAC;AAEvE,QAAM,YAAY;AAAA,IACd,gBAAgB,KAAK;AAAA,IACrB;AAAA,MACI,QAAQ,CAAC,CAAC;AAAA,MACV,QAAQ,CAAC,CAAC;AAAA,IAAA;AAAA,IAEd,WAAW;AAAA,EAAA;AAGf,QAAM,iBAAuE;AAAA,IACzE;AAAA,EAAA;AAGJ,MAAI,SAAS,UAAU;AACnB,mBAAe,iBAAiB,CAAC,UAA8C;AAE3E,UAAI,SAAS,kBAAkB,MAAM,eAAe;AAChD,8BAAsB,MAAM;AACvB,gBAAM,OAA4B,MAAA;AAAA,QACvC,CAAC;AAAA,MACL;AAEA,YAAM,cAAc,KAAA;AAAA,IACxB;AAAA,EACJ;AAEA,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,qCAAoC,aAAU,mBAAkB,OAAO,EAAE,SAAS,MAAA,EAAM,GACnG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,gBAAc;AAAA,MACd;AAAA,MACA,oBAAkB;AAAA,MAClB,aAAU;AAAA,MACV,WAAW;AAAA,MACX,KAAK;AAAA,MACL,OAAO;AAAA,QACH,aAAa,aAAa,GAAG,WAAW,QAAQ,CAAC,OAAO;AAAA,QACxD,cAAc,cAAc,GAAG,YAAY,QAAQ,CAAC,OAAO;AAAA,MAAA;AAAA,IAC/D;AAAA,EAAA,GAEH,SAAS,sBAAA,cAAC,OAAA,EAAM,MAAK,UAAS,UAAU,QAAQ,UAAU,WAAW,UAAU,KAAK,UAAA,CAAW,IAAK,MACpG,UAAU,sBAAA,cAAC,OAAA,EAAM,MAAK,WAAU,UAAU,SAAS,UAAU,WAAW,UAAU,KAAK,WAAA,CAAY,IAAK,IAC7G;AAER,CAAC;AAOD,MAAM,QAAQ,MAAM;AAAA,EAChB,MAAM,WAAW,SAASC,OAAM,OAAmB,KAAgC;AAC/E,UAAM,EAAE,UAAU,UAAU,KAAA,IAAS;AAErC,WACI,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,YACI,iBAAiB;AAAA,YACjB,iBAAiB,CAAC;AAAA,YAClB,4BAA4B,SAAS;AAAA,YACrC,6BAA6B,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,QAEJ,mBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,MACC;AAAA,IAAA;AAAA,EAGb,CAAC;AACL;AASO,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAmB,KAAkC;AAC5G,QAAM,EAAE,QAAQ,MAAM,GAAG,eAAe;AAExC,MAAI;AAEJ,MAAI,QAAQ;AACR,UAAM,WAAW,OAAO,MAAM,YAAY,WAAW;AACrD,UAAM,kBAAkB;AAAA,MACpB;AAAA,MACA,sBAAsB,WAAW,SAAS,QAAQ;AAAA,MAClD,OAAO,MAAM;AAAA,IAAA;AAEjB,cAAU,MAAM,aAAa,QAAQ;AAAA,MACjC,WAAW;AAAA,MACX;AAAA,IAAA,CACH;AAAA,EACL,WAAW,MAAM;AACb,cAAU,OAAO,SAAS,+CAAY,MAAA,EAAK,MAAM,MAAM,IAAK;AAAA,EAChE;AAEA,SAAO,sBAAA,cAAC,kCAAgC,GAAG,YAAY,SAAS,WAAW,WAAW,SAAS,IAAA,CAAU;AAC7G,CAAC;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Icon } from '@/components';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | React.JSX.Element;\n    prefix?: string | React.JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = new Set(['text', 'search', 'url', 'tel', 'password']);\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    // input[type=number] does not support setSelectionRange by default, this adds support\n    React.useLayoutEffect(() => {\n        if (internalRef.current && type === 'number') {\n            (function (fn) {\n                internalRef.current.setSelectionRange = function (...args) {\n                    if (this.type === 'number') {\n                        this.type = 'text';\n                        fn.apply(this, args);\n                        this.type = 'number';\n                    } else {\n                        fn.apply(this, args);\n                    }\n                };\n            })(internalRef.current.setSelectionRange);\n        }\n    }, []);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.has(type) && !event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n\n            // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows\n            if (internalRef.current) {\n                const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;\n                internalRef.current.scrollLeft = scrollPosition;\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    if (type === 'number') {\n        typeAttributes.onWheelCapture = (event: React.WheelEvent<HTMLInputElement>) => {\n            // blur is the only way to prevent scroll, so restore focus if it had it\n            if (document.activeElement === event.currentTarget) {\n                requestAnimationFrame(() => {\n                    (event.target as HTMLInputElement).focus();\n                });\n            }\n            // blur the field on scroll - only way to prevent scroll\n            event.currentTarget.blur();\n        };\n    }\n\n    return (\n        <div className=\"relative inline-flex h-fit w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                aria-invalid={invalid}\n                className={className}\n                data-highlighted={highlighted}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | React.JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-gray-300': disabled,\n                        'text-gray-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement<{ className?: string; disabled?: boolean }>;\n    /** Shows an icon within the input field  */\n    icon?: IconName | React.JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'flex h-full items-center justify-center rounded-l-none rounded-r focus:z-10 focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["InputWithoutDeprecatedFeatures","Affix"],"mappings":"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"}

package/dist/components/Layout/components/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'visible transition-[transform] duration-300': isSmallScreen && ready,\n            'border-r-2 border-gray-100': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAsBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,mEAEQ,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACA,sBAAA,cAACC,MAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,MAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'visible transition-[transform] duration-300': isSmallScreen && ready,\n            'border-r-2 border-gray-100': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAsBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,mEAEQ,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACA,sBAAA,cAACC,MAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,MAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}

package/dist/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'visible transition-[transform] duration-300': isSmallScreen && ready,\n            'border-r-2 border-gray-100': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAsBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGVA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,qFAEQA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'visible transition-[transform] duration-300': isSmallScreen && ready,\n            'border-r-2 border-gray-100': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAsBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGVA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,qFAEQA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}

package/dist/components/LegacyComponents/Button/Button.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const Icon = require("../../Icon/Icon.cjs");
 const util = require("./util.cjs");
 ;/* empty css             */
+const Icon = require("../../Icon/Icon.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/LegacyComponents/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","APPEARANCE_CLASSNAME","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAA;AAAA,IACAC,KAAAA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAOC,KAAAA;AAAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAUL,iCAAA,cAACM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACFN,iCAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, DrawerProps, HangerProps, MenuProps, PopoverProps } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","APPEARANCE_CLASSNAME","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAA;AAAA,IACAC,KAAAA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAOC,KAAAA;AAAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAUL,iCAAA,cAACM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACFN,iCAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;;"}

package/dist/components/LegacyComponents/Button/Button.d.ts

@@ -1,13 +1,9 @@
+import { DialogProps, DrawerProps, HangerProps, MenuProps, PopoverProps } from '../..';
 import { Appearance } from '../../../types';
-import { DialogProps } from '../../Dialog/Dialog';
-import { DrawerProps } from '../../Drawer/Drawer';
-import { HangerProps } from '../../Hanger/Hanger';
-import { MenuProps } from '../../Menu/Menu';
-import { PopoverProps } from '../../Popover/Popover';
 import * as React from 'react';
 import type * as ButtonPrimitive from '../../../primitives/Button';
 /**
- * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.
+ * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.
  */
 export type LegacyButtonProps = ButtonPrimitive.ButtonProps & {
     /** Appearance will change the style of the button */
@@ -40,7 +36,7 @@ export type LegacyButtonProps = ButtonPrimitive.ButtonProps & {
     tooltip?: string | React.JSX.Element;
 };
 /**
- * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.
+ * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.
  */
 export declare const LegacyButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "popover"> & {
     children: React.ReactNode;

package/dist/components/LegacyComponents/Button/Button.js

@@ -1,8 +1,8 @@
 import cn from "clsx";
 import * as React from "react";
-import { Icon } from "../../Icon/Icon.js";
 import { createButtonWithOverlays, getButtonClasses, APPEARANCE_CLASSNAME, createButtonWithTooltip } from "./util.js";
 /* empty css           */
+import { Icon } from "../../Icon/Icon.js";
 const LegacyButtonBase = React.forwardRef(function LegacyButtonBase2(props, ref) {
   const { appearance, fluid, ...otherProps } = props;
   const className = cn(

package/dist/components/LegacyComponents/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { DrawerProps } from '../../Drawer/Drawer';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AAkDA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAA;AAAA,IACA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAO;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAU,sBAAA,cAAC,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACF,sBAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, DrawerProps, HangerProps, MenuProps, PopoverProps } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\n\nimport './Button.css';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AA8CA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAA;AAAA,IACA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAO;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAU,sBAAA,cAAC,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACF,sBAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;"}

package/dist/components/LegacyComponents/Button/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;;;;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '@/components';\nimport * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;;;;;;"}

package/dist/components/LegacyComponents/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAOC,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/Button/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '@/components';\nimport * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'bg-blue-500 text-white visited:bg-blue-500 visited:text-white hover:bg-blue-700 hover:text-white hover:active:bg-blue-500 hover:active:text-white focus-visible:bg-blue-500 focus-visible:text-white aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'bg-red-500 text-white visited:bg-red-500 visited:text-white hover:bg-red-700 hover:text-white hover:active:bg-red-500 hover:active:text-white focus-visible:bg-red-500 focus-visible:text-white aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'bg-gray-100 text-black visited:bg-gray-200 visited:text-black hover:bg-gray-200 hover:text-black focus-visible:bg-gray-200 text-black aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAMO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAOC,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;"}

package/dist/components/LegacyComponents/IconButton/IconButton.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const Icon = require("../../Icon/Icon.cjs");
 const util = require("../Button/util.cjs");
+const Icon = require("../../Icon/Icon.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/LegacyComponents/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}

package/dist/components/LegacyComponents/IconButton/IconButton.d.ts

@@ -1,13 +1,9 @@
+import { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '../..';
 import { Appearance } from '../../../types';
-import { DialogProps } from '../../Dialog/Dialog';
-import { HangerProps } from '../../Hanger/Hanger';
-import { IconName } from '../../Icon/Icon';
-import { MenuProps } from '../../Menu/Menu';
-import { PopoverProps } from '../../Popover/Popover';
 import * as React from 'react';
 import type * as ButtonPrimitive from '../../../primitives/Button';
 /**
- * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
+ * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.
  */
 export type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {
     /** Appearance will change the style of the button */
@@ -39,7 +35,7 @@ export type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'
     tooltip?: string | React.JSX.Element;
 };
 /**
- * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
+ * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.
  */
 export declare const LegacyIconButtonBase: React.ForwardRefExoticComponent<Omit<ButtonPrimitive.ButtonProps, "children"> & {
     /** Appearance will change the style of the button */
@@ -71,7 +67,7 @@ export declare const LegacyIconButtonBase: React.ForwardRefExoticComponent<Omit<
     tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /**
- * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
+ * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.
  */
 export declare const LegacyIconButton: React.ForwardRefExoticComponent<Omit<ButtonPrimitive.ButtonProps, "children"> & {
     /** Appearance will change the style of the button */

package/dist/components/LegacyComponents/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import cn from "clsx";
 import * as React from "react";
-import { Icon } from "../../Icon/Icon.js";
 import { createButtonWithOverlays, getButtonClasses, ICON_APPEARANCE_CLASSNAME, createButtonWithTooltip } from "../Button/util.js";
+import { Icon } from "../../Icon/Icon.js";
 const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase2(props, ref) {
   const { icon, rounded = false, appearance = "default", ...otherProps } = props;
   const className = cn(

package/dist/components/LegacyComponents/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type * as ButtonPrimitive from '../../../primitives/Button';\nimport type { Appearance } from '../../../types';\nimport type { DialogProps } from '../../Dialog/Dialog';\nimport type { HangerProps } from '../../Hanger/Hanger';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport type { MenuProps } from '../../Menu/Menu';\nimport type { PopoverProps } from '../../Popover/Popover';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AAiDO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AA8CO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}

package/dist/components/List/components/Collapsible.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const collapsible = require("@base-ui/react/collapsible");
 const React = require("react");
-const Icon = require("../../Icon/Icon.cjs");
 const Item = require("./Item.cjs");
+const Icon = require("../../Icon/Icon.cjs");
 const Collapsible = React.forwardRef(function Accordion(props, ref) {
   const { defaultOpen = false, ...attributes } = props;
   const [open, setOpen] = React.useState(defaultOpen);

package/dist/components/List/components/Collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAaO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAU,sBAAA,cAACA,KAAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACI,sBAAA,cAACC,YAAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7G,sBAAA;AAAA,IAACA,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACG,4CAASC,WAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjH,sBAAA,cAACD,YAAAA,YAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}
+{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '@/components';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAaO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAU,sBAAA,cAACA,KAAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACI,sBAAA,cAACC,YAAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7G,sBAAA;AAAA,IAACA,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACG,4CAASC,WAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjH,sBAAA,cAACD,YAAAA,YAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}

package/dist/components/List/components/Collapsible.js

@@ -1,7 +1,7 @@
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import React__default from "react";
-import { Icon } from "../../Icon/Icon.js";
 import { Item } from "./Item.js";
+import { Icon } from "../../Icon/Icon.js";
 const Collapsible = React__default.forwardRef(function Accordion(props, ref) {
   const { defaultOpen = false, ...attributes } = props;
   const [open, setOpen] = React__default.useState(defaultOpen);

package/dist/components/List/components/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '../../Icon/Icon';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAaO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAUA,+BAAA,cAAC,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACIA,+BAAA,cAACC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7GD,+BAAA;AAAA,IAACC,cAAqB;AAAA,IAArB;AAAA,MACG,qDAAS,MAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjHD,+BAAA,cAACC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\n\nimport { Icon } from '@/components';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAaO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAUA,+BAAA,cAAC,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACIA,+BAAA,cAACC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7GD,+BAAA;AAAA,IAACC,cAAqB;AAAA,IAArB;AAAA,MACG,qDAAS,MAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjHD,+BAAA,cAACC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}

package/dist/components/List/components/Item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { Color } from '../../../types';\nimport { fixedForwardRef } from '../../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../../utils/tailwind';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = cn(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["fixedForwardRef","Item","SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;;AAwBO,MAAM,OAAOA,MAAAA,gBAAgB,SAASC,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACAC,SAAAA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACG,sBAAA,cAAC,QAAA,EAAK,WAAW,cAAA,uCACZC,KAAAA,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,wCACH,OAAA,EAAI,WAAU,uCACX,sBAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAc,sBAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACA,sBAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;;"}
+{"version":3,"file":"Item.cjs","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type { Color } from '@/types';\nimport { fixedForwardRef } from '@/types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '@/utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = cn(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["fixedForwardRef","Item","SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;;AAwBO,MAAM,OAAOA,MAAAA,gBAAgB,SAASC,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACAC,SAAAA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACG,sBAAA,cAAC,QAAA,EAAK,WAAW,cAAA,uCACZC,KAAAA,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,wCACH,OAAA,EAAI,WAAU,uCACX,sBAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAc,sBAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACA,sBAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;;"}

package/dist/components/List/components/Item.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
+import { IconName } from '../..';
 import { Color } from '../../../types';
-import { IconName } from '../../Icon/Icon';
 export type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {
     as?: ElementType;
     color?: Color;

package/dist/components/List/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { Color } from '../../../types';\nimport { fixedForwardRef } from '../../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../../utils/tailwind';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = cn(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["Item","React"],"mappings":";;;;;AAwBO,MAAM,OAAO,gBAAgB,SAASA,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACIC,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACGA,+BAAA,cAAC,QAAA,EAAK,WAAW,cAAA,gDACZ,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,iDACH,OAAA,EAAI,WAAU,uCACXA,+BAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAcA,+BAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACAA,+BAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;"}
+{"version":3,"file":"Item.js","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type { Color } from '@/types';\nimport { fixedForwardRef } from '@/types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '@/utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = cn(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["Item","React"],"mappings":";;;;;AAwBO,MAAM,OAAO,gBAAgB,SAASA,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACIC,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACGA,+BAAA,cAAC,QAAA,EAAK,WAAW,cAAA,gDACZ,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,iDACH,OAAA,EAAI,WAAU,uCACXA,+BAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAcA,+BAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACAA,+BAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;"}

package/dist/components/List/components/Link.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Icon = require("../../Icon/Icon.cjs");
 const Item = require("./Item.cjs");
+const Icon = require("../../Icon/Icon.cjs");
 const Link = React.forwardRef(function Link2(props, ref) {
   const isExternal = props.href.startsWith("http");
   const control = /* @__PURE__ */ React.createElement(Icon.Icon, { name: isExternal ? "link-external" : "chevron-right" });