@rio-cloud/rio-uikit 2.1.0 → 2.2.0

package/components/listMenu/ListMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenuGroup.js","sources":["../../../src/components/listMenu/ListMenuGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport ListMenuHeader from './ListMenuHeader';\n\nexport type ListMenuNavItem = {\n    /**\n     * The name or key of the menu nav item.\n     *\n     * This key will be used for filtering, hence it should match the translated menu item name.\n     */\n    key: string;\n\n    /**\n     * The menu nav item itself.\n     *\n     * This can be a simple `<a>`, `<NavLink>`, `<Link>`, `<span>` or even a `<FormattedMessage>`.\n     */\n    item: string | ReactNode;\n\n    /**\n     * Disables the list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the current menu item is a child of another menu item.\n     */\n    isSubItem?: boolean;\n} & {\n    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;\n};\n\nexport type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {\n    /**\n     * The optional group header to be shown.\n     *\n     * This can also be a component such as a `FormattedMessage`.\n     */\n    group?: string | ReactNode;\n\n    /**\n     * The optional group header link to be shown.\n     *\n     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this\n     * case, the `group` prop can be omitted.\n     */\n    groupNavItem?: string | ReactNode;\n\n    /**\n     * The optional badge displayed alongside the group or nav items.\n     *\n     * This can be text or a React node for additional flexibility.\n     */\n    badge?: string | ReactNode;\n\n    /**\n     * The type of badge to display.\n     *\n     * Determines the visual style of the badge. Available types include:\n     *\n     * - `muted`: A subdued badge style.\n     * - `success`: Indicates a successful state.\n     * - `info`: Represents informational content.\n     * - `warning`: Warns of potential issues.\n     * - `danger`: Highlights a critical state.\n     */\n    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';\n\n    /**\n     * The list of all menu items of a group.\n     */\n    navItems: T[];\n};\n\ntype ListMenuGroupProps<T extends ListMenuNavItem> = {\n    menuGroup: ListMenuItem<T>;\n    className: string;\n};\n\nconst ListMenuGroup = <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => {\n    if (!menuGroup.navItems.length) {\n        return null;\n    }\n\n    return (\n        <ul className={`ListMenuGroup ${className}`}>\n            <ListMenuHeader {...menuGroup} />\n\n            {menuGroup.navItems.map(item => (\n                <li key={item.key} className={classNames({ disabled: item.disabled, subitem: item.isSubItem })}>\n                    {item.item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ListMenuGroup;\n"],"names":["ListMenuGroup","menuGroup","className","jsxs","jsx","ListMenuHeader","item","classNames"],"mappings":";;;AAkFA,MAAMA,IAAgB,CAA4B,EAAE,WAAAC,GAAW,WAAAC,QACtDD,EAAU,SAAS,SAKpB,gBAAAE,EAAC,MAAA,EAAG,WAAW,iBAAiBD,CAAS,IACrC,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAgB,GAAGJ,GAAW;AAAA,EAE9BA,EAAU,SAAS,IAAI,CAAAK,wBACnB,MAAA,EAAkB,WAAWC,EAAW,EAAE,UAAUD,EAAK,UAAU,SAASA,EAAK,WAAW,GACxF,UAAAA,EAAK,KAAA,GADDA,EAAK,GAEd,CACH;AAAA,GACL,IAZO;"}
+{"version":3,"file":"ListMenuGroup.js","sources":["../../../src/components/listMenu/ListMenuGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ListMenuHeader from './ListMenuHeader';\n\nexport type ListMenuNavItem = {\n    /**\n     * The name or key of the menu nav item.\n     *\n     * This key will be used for filtering, hence it should match the translated menu item name.\n     */\n    key: string;\n\n    /**\n     * The menu nav item itself.\n     *\n     * This can be a simple `<a>`, `<NavLink>`, `<Link>`, `<span>` or even a `<FormattedMessage>`.\n     */\n    item: string | ReactNode;\n\n    /**\n     * Disables the list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the current menu item is a child of another menu item.\n     */\n    isSubItem?: boolean;\n} & {\n    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;\n};\n\nexport type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {\n    /**\n     * The optional group header to be shown.\n     *\n     * This can also be a component such as a `FormattedMessage`.\n     */\n    group?: string | ReactNode;\n\n    /**\n     * The optional group header link to be shown.\n     *\n     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this\n     * case, the `group` prop can be omitted.\n     */\n    groupNavItem?: string | ReactNode;\n\n    /**\n     * The optional badge displayed alongside the group or nav items.\n     *\n     * This can be text or a React node for additional flexibility.\n     */\n    badge?: string | ReactNode;\n\n    /**\n     * The type of badge to display.\n     *\n     * Determines the visual style of the badge. Available types include:\n     *\n     * - `muted`: A subdued badge style.\n     * - `success`: Indicates a successful state.\n     * - `info`: Represents informational content.\n     * - `warning`: Warns of potential issues.\n     * - `danger`: Highlights a critical state.\n     */\n    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';\n\n    /**\n     * The list of all menu items of a group.\n     */\n    navItems: T[];\n};\n\ntype ListMenuGroupProps<T extends ListMenuNavItem> = {\n    menuGroup: ListMenuItem<T>;\n    className: string;\n};\n\nconst ListMenuGroup = <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => {\n    if (!menuGroup.navItems.length) {\n        return null;\n    }\n\n    return (\n        <ul className={`ListMenuGroup ${className}`}>\n            <ListMenuHeader {...menuGroup} />\n\n            {menuGroup.navItems.map(item => (\n                <li key={item.key} className={classNames(item.disabled && 'disabled', item.isSubItem && 'subitem')}>\n                    {item.item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ListMenuGroup;\n"],"names":["ListMenuGroup","menuGroup","className","jsxs","jsx","ListMenuHeader","classNames","item"],"mappings":";;;AAkFA,MAAMA,IAAgB,CAA4B,EAAE,WAAAC,GAAW,WAAAC,QACtDD,EAAU,SAAS,SAKpB,gBAAAE,EAAC,MAAA,EAAG,WAAW,iBAAiBD,CAAS,IACrC,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAgB,GAAGJ,GAAW;AAAA,EAE9BA,EAAU,SAAS,IAAI,OACpB,gBAAAG,EAAC,MAAA,EAAkB,WAAWE,EAAWC,EAAK,YAAY,YAAYA,EAAK,aAAa,SAAS,GAC5F,YAAK,KAAA,GADDA,EAAK,GAEd,CACH;AAAA,GACL,IAZO;"}

package/components/loadMore/LoadMoreButton.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import h from "classnames";
+import h from "../../utils/classNames.js";
 import { LoadMoreProgress as N } from "./LoadMoreProgress.js";
 const f = (i) => {
   const {

package/components/loadMore/LoadMoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'LoadMoreButton',\n        'align-items-center',\n        'display-flex',\n        'justify-content-center',\n        'margin-top-25',\n        'margin-bottom-25',\n        'non-printable',\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","remainingProps","wrapperClassNames","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;AAmDO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH;AAAA,EAAA,GAGEI,IAAgBX,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAW,EAAC,SAAK,GAAGJ,GAAgB,WAAWC,GAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAd,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAO,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBN,KACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASX;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CT;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRQ,KAAiB,CAACN,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACQ,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAR,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}
+{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'LoadMoreButton',\n        'align-items-center',\n        'display-flex',\n        'justify-content-center',\n        'margin-top-25',\n        'margin-bottom-25',\n        'non-printable',\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","remainingProps","wrapperClassNames","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;AAmDO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH;AAAA,EAAA,GAGEI,IAAgBX,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAW,EAAC,SAAK,GAAGJ,GAAgB,WAAWC,GAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAd,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAO,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBN,KACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASX;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CT;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRQ,KAAiB,CAACN,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACQ,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAR,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/components/loadMore/LoadMoreProgress.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import l from "react";
-import o from "classnames";
+import o from "../../utils/classNames.js";
 const t = {
   WHITE: "white",
   GRAY: "gray"

package/components/loadMore/LoadMoreProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreProgress.js","sources":["../../../src/components/loadMore/LoadMoreProgress.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nconst STYLE = {\n    WHITE: 'white',\n    GRAY: 'gray',\n} as const;\n\nexport type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];\n\ntype LoadMoreProgressProps = {\n    loaded: number;\n    total: number;\n    progressBarStyle?: ProgressBarStyle;\n};\n\nexport const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHITE }: LoadMoreProgressProps) => {\n    if (!loaded || !total) {\n        return null;\n    }\n\n    const width = `${(loaded / total) * 100}%`;\n\n    const progressClassName = classNames(\n        'progress',\n        'height-2 margin-bottom-10',\n        progressBarStyle === STYLE.GRAY ? 'bg-lighter' : 'bg-white'\n    );\n\n    const progressBarClassName = classNames(\n        'progress-bar',\n        progressBarStyle === STYLE.GRAY &&\n            width !== '100%' &&\n            'border border-right-only border-color-white border-width-2'\n    );\n\n    return (\n        <React.Fragment>\n            <div className='text-center margin-bottom-3'>\n                <span className='text-medium'>{loaded}</span>\n                <span className='margin-left-5 margin-right-5'>/</span>\n                <span className='text-medium'>{total}</span>\n            </div>\n            <div className={progressClassName}>\n                <div className={progressBarClassName} style={{ width }} />\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default LoadMoreProgress;\n"],"names":["STYLE","LoadMoreProgress","loaded","total","progressBarStyle","width","progressClassName","classNames","progressBarClassName","jsxs","React","jsx"],"mappings":";;;AAGA,MAAMA,IAAQ;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACV,GAUaC,IAAmB,CAAC,EAAE,QAAAC,IAAS,GAAG,OAAAC,IAAQ,GAAG,kBAAAC,IAAmBJ,EAAM,YAAmC;AAClH,MAAI,CAACE,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IAAQ,GAAIH,IAASC,IAAS,GAAG,KAEjCG,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,MAAqBJ,EAAM,OAAO,eAAe;AAAA,EAAA,GAG/CQ,IAAuBD;AAAA,IACzB;AAAA,IACAH,MAAqBJ,EAAM,QACvBK,MAAU,UACV;AAAA,EAAA;AAGR,SACI,gBAAAI,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAT,GAAO;AAAA,MACtC,gBAAAS,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,KAAC;AAAA,MAChD,gBAAAA,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAR,EAAA,CAAM;AAAA,IAAA,GACzC;AAAA,IACA,gBAAAQ,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAsB,OAAO,EAAE,OAAAH,EAAA,EAAM,CAAG,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"LoadMoreProgress.js","sources":["../../../src/components/loadMore/LoadMoreProgress.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst STYLE = {\n    WHITE: 'white',\n    GRAY: 'gray',\n} as const;\n\nexport type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];\n\ntype LoadMoreProgressProps = {\n    loaded: number;\n    total: number;\n    progressBarStyle?: ProgressBarStyle;\n};\n\nexport const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHITE }: LoadMoreProgressProps) => {\n    if (!loaded || !total) {\n        return null;\n    }\n\n    const width = `${(loaded / total) * 100}%`;\n\n    const progressClassName = classNames(\n        'progress',\n        'height-2 margin-bottom-10',\n        progressBarStyle === STYLE.GRAY ? 'bg-lighter' : 'bg-white'\n    );\n\n    const progressBarClassName = classNames(\n        'progress-bar',\n        progressBarStyle === STYLE.GRAY &&\n            width !== '100%' &&\n            'border border-right-only border-color-white border-width-2'\n    );\n\n    return (\n        <React.Fragment>\n            <div className='text-center margin-bottom-3'>\n                <span className='text-medium'>{loaded}</span>\n                <span className='margin-left-5 margin-right-5'>/</span>\n                <span className='text-medium'>{total}</span>\n            </div>\n            <div className={progressClassName}>\n                <div className={progressBarClassName} style={{ width }} />\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default LoadMoreProgress;\n"],"names":["STYLE","LoadMoreProgress","loaded","total","progressBarStyle","width","progressClassName","classNames","progressBarClassName","jsxs","React","jsx"],"mappings":";;;AAIA,MAAMA,IAAQ;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACV,GAUaC,IAAmB,CAAC,EAAE,QAAAC,IAAS,GAAG,OAAAC,IAAQ,GAAG,kBAAAC,IAAmBJ,EAAM,YAAmC;AAClH,MAAI,CAACE,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IAAQ,GAAIH,IAASC,IAAS,GAAG,KAEjCG,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,MAAqBJ,EAAM,OAAO,eAAe;AAAA,EAAA,GAG/CQ,IAAuBD;AAAA,IACzB;AAAA,IACAH,MAAqBJ,EAAM,QACvBK,MAAU,UACV;AAAA,EAAA;AAGR,SACI,gBAAAI,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAT,GAAO;AAAA,MACtC,gBAAAS,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,KAAC;AAAA,MAChD,gBAAAA,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAR,EAAA,CAAM;AAAA,IAAA,GACzC;AAAA,IACA,gBAAAQ,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAsB,OAAO,EAAE,OAAAH,EAAA,EAAM,CAAG,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}

package/components/map/components/features/MapSettings.js

@@ -1,14 +1,14 @@
 import { jsx as l } from "react/jsx-runtime";
 import r from "react";
-import g from "classnames";
-import { map as f } from "es-toolkit/compat";
+import { map as g } from "es-toolkit/compat";
+import f from "../../../../utils/classNames.js";
 import u from "./settings/builtinSettings/MapTypeSettings.js";
 import M from "./settings/builtinSettings/MapLayerSettings.js";
 import S from "./settings/builtinSettings/MapClusterSettings.js";
 import { useMapContext as C } from "../MapContext.js";
 const k = (t) => t.type === u, U = (t) => t.type === M, d = (t) => t.type === S, N = (t) => {
-  const { options: a, className: s = "" } = t, { baseLayer: n, activeLayers: m, showCluster: p, onMapTypeChange: o, onMapLayerChange: y, onShowClusterChange: c } = C(), i = g("MapSettingsWrapper", s);
-  return /* @__PURE__ */ l("div", { className: i, children: f(a, (e) => k(e) ? r.cloneElement(e, {
+  const { options: a, className: s = "" } = t, { baseLayer: n, activeLayers: m, showCluster: p, onMapTypeChange: o, onMapLayerChange: y, onShowClusterChange: c } = C(), i = f("MapSettingsWrapper", s);
+  return /* @__PURE__ */ l("div", { className: i, children: g(a, (e) => k(e) ? r.cloneElement(e, {
     key: e?.key ?? crypto.randomUUID(),
     mapType: n,
     onMapTypeChange: o

package/components/map/components/features/MapSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettings.js","sources":["../../../../../src/components/map/components/features/MapSettings.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { map } from 'es-toolkit/compat';\n\nimport MapTypeSettings from './settings/builtinSettings/MapTypeSettings';\nimport MapLayerSettings from './settings/builtinSettings/MapLayerSettings';\nimport MapClusterSettings from './settings/builtinSettings/MapClusterSettings';\nimport { useMapContext } from '../MapContext';\n\nconst isMapTypeSettings = (option: JSX.Element) => option.type === MapTypeSettings;\nconst isMapLayerSettings = (option: JSX.Element) => option.type === MapLayerSettings;\nconst isMapClusterSettings = (option: JSX.Element) => option.type === MapClusterSettings;\n\nexport type MapSettingsProps = {\n    options?: JSX.Element[];\n    className?: string;\n};\n\nconst MapSettings = (props: MapSettingsProps) => {\n    const { options, className = '' } = props;\n\n    const { baseLayer, activeLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } =\n        useMapContext();\n\n    const mapSettingsClasses = classNames('MapSettingsWrapper', className);\n\n    return (\n        <div className={mapSettingsClasses}>\n            {map(options, option => {\n                if (isMapTypeSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        mapType: baseLayer,\n                        onMapTypeChange,\n                    });\n                }\n\n                if (isMapLayerSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        activeBuiltinLayers: activeLayers,\n                        onMapLayerChange,\n                    });\n                }\n\n                if (isMapClusterSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        showCluster,\n                        onShowClusterChange,\n                    });\n                }\n\n                return React.cloneElement(option, {\n                    key: option?.key ?? `MapSettingsOption_${crypto.randomUUID()}`,\n                });\n            })}\n        </div>\n    );\n};\n\nexport default MapSettings;\n"],"names":["isMapTypeSettings","option","MapTypeSettings","isMapLayerSettings","MapLayerSettings","isMapClusterSettings","MapClusterSettings","MapSettings","props","options","className","baseLayer","activeLayers","showCluster","onMapTypeChange","onMapLayerChange","onShowClusterChange","useMapContext","mapSettingsClasses","classNames","map","React"],"mappings":";;;;;;;;AASA,MAAMA,IAAoB,CAACC,MAAwBA,EAAO,SAASC,GAC7DC,IAAqB,CAACF,MAAwBA,EAAO,SAASG,GAC9DC,IAAuB,CAACJ,MAAwBA,EAAO,SAASK,GAOhEC,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,SAAAC,GAAS,WAAAC,IAAY,GAAA,IAAOF,GAE9B,EAAE,WAAAG,GAAW,cAAAC,GAAc,aAAAC,GAAa,iBAAAC,GAAiB,kBAAAC,GAAkB,qBAAAC,EAAA,IAC7EC,EAAA,GAEEC,IAAqBC,EAAW,sBAAsBT,CAAS;AAErE,2BACK,OAAA,EAAI,WAAWQ,GACX,UAAAE,EAAIX,GAAS,CAAAR,MACND,EAAkBC,CAAM,IACjBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,SAASU;AAAA,IACT,iBAAAG;AAAA,EAAA,CACH,IAGDX,EAAmBF,CAAM,IAClBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,qBAAqBW;AAAA,IACrB,kBAAAG;AAAA,EAAA,CACH,IAGDV,EAAqBJ,CAAM,IACpBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,aAAAY;AAAA,IACA,qBAAAG;AAAA,EAAA,CACH,IAGEK,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,qBAAqB,OAAO,YAAY;AAAA,EAAA,CAC/D,CACJ,EAAA,CACL;AAER;"}
+{"version":3,"file":"MapSettings.js","sources":["../../../../../src/components/map/components/features/MapSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { map } from 'es-toolkit/compat';\n\nimport classNames from '../../../../utils/classNames';\nimport MapTypeSettings from './settings/builtinSettings/MapTypeSettings';\nimport MapLayerSettings from './settings/builtinSettings/MapLayerSettings';\nimport MapClusterSettings from './settings/builtinSettings/MapClusterSettings';\nimport { useMapContext } from '../MapContext';\n\nconst isMapTypeSettings = (option: JSX.Element) => option.type === MapTypeSettings;\nconst isMapLayerSettings = (option: JSX.Element) => option.type === MapLayerSettings;\nconst isMapClusterSettings = (option: JSX.Element) => option.type === MapClusterSettings;\n\nexport type MapSettingsProps = {\n    options?: JSX.Element[];\n    className?: string;\n};\n\nconst MapSettings = (props: MapSettingsProps) => {\n    const { options, className = '' } = props;\n\n    const { baseLayer, activeLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } =\n        useMapContext();\n\n    const mapSettingsClasses = classNames('MapSettingsWrapper', className);\n\n    return (\n        <div className={mapSettingsClasses}>\n            {map(options, option => {\n                if (isMapTypeSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        mapType: baseLayer,\n                        onMapTypeChange,\n                    });\n                }\n\n                if (isMapLayerSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        activeBuiltinLayers: activeLayers,\n                        onMapLayerChange,\n                    });\n                }\n\n                if (isMapClusterSettings(option)) {\n                    return React.cloneElement(option, {\n                        key: option?.key ?? crypto.randomUUID(),\n                        showCluster,\n                        onShowClusterChange,\n                    });\n                }\n\n                return React.cloneElement(option, {\n                    key: option?.key ?? `MapSettingsOption_${crypto.randomUUID()}`,\n                });\n            })}\n        </div>\n    );\n};\n\nexport default MapSettings;\n"],"names":["isMapTypeSettings","option","MapTypeSettings","isMapLayerSettings","MapLayerSettings","isMapClusterSettings","MapClusterSettings","MapSettings","props","options","className","baseLayer","activeLayers","showCluster","onMapTypeChange","onMapLayerChange","onShowClusterChange","useMapContext","mapSettingsClasses","classNames","map","React"],"mappings":";;;;;;;;AASA,MAAMA,IAAoB,CAACC,MAAwBA,EAAO,SAASC,GAC7DC,IAAqB,CAACF,MAAwBA,EAAO,SAASG,GAC9DC,IAAuB,CAACJ,MAAwBA,EAAO,SAASK,GAOhEC,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,SAAAC,GAAS,WAAAC,IAAY,GAAA,IAAOF,GAE9B,EAAE,WAAAG,GAAW,cAAAC,GAAc,aAAAC,GAAa,iBAAAC,GAAiB,kBAAAC,GAAkB,qBAAAC,EAAA,IAC7EC,EAAA,GAEEC,IAAqBC,EAAW,sBAAsBT,CAAS;AAErE,2BACK,OAAA,EAAI,WAAWQ,GACX,UAAAE,EAAIX,GAAS,CAAAR,MACND,EAAkBC,CAAM,IACjBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,SAASU;AAAA,IACT,iBAAAG;AAAA,EAAA,CACH,IAGDX,EAAmBF,CAAM,IAClBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,qBAAqBW;AAAA,IACrB,kBAAAG;AAAA,EAAA,CACH,IAGDV,EAAqBJ,CAAM,IACpBoB,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,OAAO,WAAA;AAAA,IAC3B,aAAAY;AAAA,IACA,qBAAAG;AAAA,EAAA,CACH,IAGEK,EAAM,aAAapB,GAAQ;AAAA,IAC9B,KAAKA,GAAQ,OAAO,qBAAqB,OAAO,YAAY;AAAA,EAAA,CAC/D,CACJ,EAAA,CACL;AAER;"}

package/components/map/components/features/settings/MapSettingsItem.js

@@ -1,7 +1,7 @@
 import { jsxs as s, Fragment as o, jsx as I } from "react/jsx-runtime";
 import m from "react";
-import n from "classnames";
 import { noop as f } from "es-toolkit/function";
+import n from "../../../../../utils/classNames.js";
 const k = (r) => {
   const { onClick: p = f, activeIcon: a, inactiveIcon: l, isActive: t = !1, label: e, className: d = "" } = r, g = n(
     "MapSettingsTileIcon",

package/components/map/components/features/settings/MapSettingsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettingsItem.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsItem.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nexport type MapSettingsItemProps = {\n    activeIcon?: JSX.Element;\n    inactiveIcon?: JSX.Element;\n    isActive?: boolean;\n    className?: string;\n    label?: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst MapSettingsItem = (props: MapSettingsItemProps) => {\n    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        !label && 'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        !label && 'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const defaultIcon =\n        activeIcon &&\n        React.cloneElement(activeIcon, {\n            className: activeIconClassNames,\n        });\n\n    const highlightedIcon =\n        inactiveIcon &&\n        React.cloneElement(inactiveIcon, {\n            className: inactiveIconClassNames,\n        });\n\n    const mapSettingsItemClassNames = classNames(\n        'MapSettingsItem',\n        'display-flex align-items-center gap-10',\n        'text-color-darker',\n        label && 'margin--5',\n        className\n    );\n\n    return (\n        <div className={mapSettingsItemClassNames} onClick={onClick}>\n            {label && (\n                <>\n                    <div className='margin-left--5'>\n                        {highlightedIcon}\n                        {defaultIcon}\n                    </div>\n                    <div className='flex-1-1 line-height-16 padding-right-5'>{label}</div>\n                </>\n            )}\n            {!label && (\n                <>\n                    {highlightedIcon}\n                    {defaultIcon}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsItem;\n"],"names":["MapSettingsItem","props","onClick","noop","activeIcon","inactiveIcon","isActive","label","className","activeIconClassNames","classNames","inactiveIconClassNames","defaultIcon","React","highlightedIcon","mapSettingsItemClassNames","jsxs","Fragment","jsx"],"mappings":";;;;AAaA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,SAAAC,IAAUC,GAAM,YAAAC,GAAY,cAAAC,GAAc,UAAAC,IAAW,IAAO,OAAAC,GAAO,WAAAC,IAAY,GAAA,IAAOP,GAExFQ,IAAuBC;AAAA,IACzB;AAAA,IACA,CAACH,KAAS;AAAA,IACVD,IAAW,kBAAkB;AAAA,IAC7BF,GAAY,MAAM,aAAa;AAAA,EAAA,GAG7BO,IAAyBD;AAAA,IAC3B;AAAA,IACA,CAACH,KAAS;AAAA,IACVD,IAAW,iBAAiB;AAAA,IAC5BD,GAAc,MAAM,aAAa;AAAA,EAAA,GAG/BO,IACFR,KACAS,EAAM,aAAaT,GAAY;AAAA,IAC3B,WAAWK;AAAA,EAAA,CACd,GAECK,IACFT,KACAQ,EAAM,aAAaR,GAAc;AAAA,IAC7B,WAAWM;AAAA,EAAA,CACd,GAECI,IAA4BL;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACAH,KAAS;AAAA,IACTC;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,GAA2B,SAAAb,GACtC,UAAA;AAAA,IAAAK,KACG,gBAAAS,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,kBACV,UAAA;AAAA,QAAAF;AAAA,QACAF;AAAA,MAAA,GACL;AAAA,MACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAA2C,UAAAX,EAAA,CAAM;AAAA,IAAA,GACpE;AAAA,IAEH,CAACA,KACE,gBAAAS,EAAAC,GAAA,EACK,UAAA;AAAA,MAAAH;AAAA,MACAF;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"MapSettingsItem.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsItem.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../../../../utils/classNames';\n\nexport type MapSettingsItemProps = {\n    activeIcon?: JSX.Element;\n    inactiveIcon?: JSX.Element;\n    isActive?: boolean;\n    className?: string;\n    label?: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst MapSettingsItem = (props: MapSettingsItemProps) => {\n    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        !label && 'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        !label && 'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const defaultIcon =\n        activeIcon &&\n        React.cloneElement(activeIcon, {\n            className: activeIconClassNames,\n        });\n\n    const highlightedIcon =\n        inactiveIcon &&\n        React.cloneElement(inactiveIcon, {\n            className: inactiveIconClassNames,\n        });\n\n    const mapSettingsItemClassNames = classNames(\n        'MapSettingsItem',\n        'display-flex align-items-center gap-10',\n        'text-color-darker',\n        label && 'margin--5',\n        className\n    );\n\n    return (\n        <div className={mapSettingsItemClassNames} onClick={onClick}>\n            {label && (\n                <>\n                    <div className='margin-left--5'>\n                        {highlightedIcon}\n                        {defaultIcon}\n                    </div>\n                    <div className='flex-1-1 line-height-16 padding-right-5'>{label}</div>\n                </>\n            )}\n            {!label && (\n                <>\n                    {highlightedIcon}\n                    {defaultIcon}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsItem;\n"],"names":["MapSettingsItem","props","onClick","noop","activeIcon","inactiveIcon","isActive","label","className","activeIconClassNames","classNames","inactiveIconClassNames","defaultIcon","React","highlightedIcon","mapSettingsItemClassNames","jsxs","Fragment","jsx"],"mappings":";;;;AAcA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,SAAAC,IAAUC,GAAM,YAAAC,GAAY,cAAAC,GAAc,UAAAC,IAAW,IAAO,OAAAC,GAAO,WAAAC,IAAY,GAAA,IAAOP,GAExFQ,IAAuBC;AAAA,IACzB;AAAA,IACA,CAACH,KAAS;AAAA,IACVD,IAAW,kBAAkB;AAAA,IAC7BF,GAAY,MAAM,aAAa;AAAA,EAAA,GAG7BO,IAAyBD;AAAA,IAC3B;AAAA,IACA,CAACH,KAAS;AAAA,IACVD,IAAW,iBAAiB;AAAA,IAC5BD,GAAc,MAAM,aAAa;AAAA,EAAA,GAG/BO,IACFR,KACAS,EAAM,aAAaT,GAAY;AAAA,IAC3B,WAAWK;AAAA,EAAA,CACd,GAECK,IACFT,KACAQ,EAAM,aAAaR,GAAc;AAAA,IAC7B,WAAWM;AAAA,EAAA,CACd,GAECI,IAA4BL;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACAH,KAAS;AAAA,IACTC;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,GAA2B,SAAAb,GACtC,UAAA;AAAA,IAAAK,KACG,gBAAAS,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,kBACV,UAAA;AAAA,QAAAF;AAAA,QACAF;AAAA,MAAA,GACL;AAAA,MACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAA2C,UAAAX,EAAA,CAAM;AAAA,IAAA,GACpE;AAAA,IAEH,CAACA,KACE,gBAAAS,EAAAC,GAAA,EACK,UAAA;AAAA,MAAAH;AAAA,MACAF;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/components/map/components/features/settings/MapSettingsPanel.js

@@ -1,24 +1,10 @@
-import { jsx as i } from "react/jsx-runtime";
-import n from "classnames";
-import { motion as o } from "motion/react";
-const l = (a) => {
-  const { className: t = "", children: s } = a, e = n("MapSettingsPanel", t);
-  return /* @__PURE__ */ i(
-    o.div,
-    {
-      initial: { opacity: 0, y: 100 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0.5, y: 200 },
-      transition: {
-        duration: 0.15,
-        ease: "easeInOut"
-      },
-      className: e,
-      children: s
-    }
-  );
+import { jsx as n } from "react/jsx-runtime";
+import l from "../../../../../utils/classNames.js";
+const r = (s) => {
+  const { className: a = "", children: e } = s, t = l("MapSettingsPanel", a);
+  return /* @__PURE__ */ n("div", { className: t, children: e });
 };
 export {
-  l as default
+  r as default
 };
 //# sourceMappingURL=MapSettingsPanel.js.map

package/components/map/components/features/settings/MapSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettingsPanel.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsPanel.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\n\nexport type MapSettingsPanelProps = {\n    className?: string;\n};\n\nconst MapSettingsPanel = (props: PropsWithChildren<MapSettingsPanelProps>) => {\n    const { className = '', children } = props;\n\n    const panelClassNames = classNames('MapSettingsPanel', className);\n\n    return (\n        <motion.div\n            initial={{ opacity: 0, y: 100 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0.5, y: 200 }}\n            transition={{\n                duration: 0.15,\n                ease: 'easeInOut',\n            }}\n            className={panelClassNames}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport default MapSettingsPanel;\n"],"names":["MapSettingsPanel","props","className","children","panelClassNames","classNames","jsx","motion"],"mappings":";;;AAQA,MAAMA,IAAmB,CAACC,MAAoD;AAC1E,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,IAAaF,GAE/BG,IAAkBC,EAAW,oBAAoBH,CAAS;AAEhE,SACI,gBAAAI;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,SAAS,EAAE,SAAS,GAAG,GAAG,IAAA;AAAA,MAC1B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAA;AAAA,MAC1B,MAAM,EAAE,SAAS,KAAK,GAAG,IAAA;AAAA,MACzB,YAAY;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,MAEV,WAAWH;AAAA,MAEV,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"MapSettingsPanel.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsPanel.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../../../../utils/classNames';\n\nexport type MapSettingsPanelProps = {\n    className?: string;\n};\n\nconst MapSettingsPanel = (props: PropsWithChildren<MapSettingsPanelProps>) => {\n    const { className = '', children } = props;\n\n    const panelClassNames = classNames('MapSettingsPanel', className);\n\n    return <div className={panelClassNames}>{children}</div>;\n};\n\nexport default MapSettingsPanel;\n"],"names":["MapSettingsPanel","props","className","children","panelClassNames","classNames","jsx"],"mappings":";;AAQA,MAAMA,IAAmB,CAACC,MAAoD;AAC1E,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,IAAaF,GAE/BG,IAAkBC,EAAW,oBAAoBH,CAAS;AAEhE,SAAO,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GAAkB,UAAAD,EAAA,CAAS;AACtD;"}

package/components/map/components/features/settings/MapSettingsTile.js

@@ -1,43 +1,48 @@
-import { jsxs as l, Fragment as j, jsx as t } from "react/jsx-runtime";
-import v, { useState as h } from "react";
-import { AnimatePresence as I } from "motion/react";
-import c from "classnames";
-import { noop as A } from "es-toolkit/function";
+import { jsxs as c, Fragment as L, jsx as i } from "react/jsx-runtime";
+import I, { useState as T } from "react";
+import { AnimatePresence as M, motion as O } from "motion/react";
+import { noop as j } from "es-toolkit/function";
 import { usePopper as U } from "react-popper";
+import p from "../../../../../utils/classNames.js";
 import B from "../../../../overlay/OverlayTrigger.js";
-import M from "../../../../tooltip/Tooltip.js";
-import S from "../../../../../hooks/useClickOutside.js";
-import F from "../../../../menuItems/MenuItemList.js";
-import q from "../../../../menuItems/MenuItem.js";
-import { isMobileScreen as z } from "../../../../../utils/deviceUtils.js";
-const G = 800, J = 100, b = (p, s) => /* @__PURE__ */ t(
+import S from "../../../../tooltip/Tooltip.js";
+import F, { useClickOutsideWithRef as q } from "../../../../../hooks/useClickOutside.js";
+import z from "../../../../menuItems/MenuItemList.js";
+import G from "../../../../menuItems/MenuItem.js";
+import { isMobileScreen as J } from "../../../../../utils/deviceUtils.js";
+const K = 800, Q = 100, n = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 10 },
+  transition: { duration: 0.08, ease: "easeOut" }
+}, b = (m, o) => /* @__PURE__ */ i(
   B,
   {
-    placement: M.TOP,
-    delay: { show: G, hide: J },
-    overlay: /* @__PURE__ */ t(M, { id: "tooltip", width: "auto", children: s }),
-    children: p
+    placement: S.TOP,
+    delay: { show: K, hide: Q },
+    overlay: /* @__PURE__ */ i(S, { id: "tooltip", width: "auto", children: o }),
+    children: m
   }
-), ae = (p) => {
+), re = (m) => {
   const {
-    onToggle: s = A,
-    activeIcon: m,
-    inactiveIcon: d,
-    isActive: T = !1,
-    panel: f,
-    items: n,
-    className: O,
+    onToggle: o = j,
+    activeIcon: d,
+    inactiveIcon: f,
+    isActive: v = !1,
+    panel: u,
+    items: s,
+    className: C,
     buttonClassName: w,
-    tooltip: r,
-    ...y
-  } = p, [e, u] = h(!1), C = () => {
-    const o = !e;
-    u(o), s(o), g.current.blur();
-  }, g = S(() => {
-    e && f && (u(!1), s(!1), g.current.blur());
-  }), [N, P] = h(null), [_, R] = h(null), { styles: E, attributes: k } = U(N, _, {
+    tooltip: a,
+    ...x
+  } = m, [e, h] = T(!1), P = () => {
+    const t = !e;
+    h(t), o(t), g.current.blur();
+  }, g = F(() => {
+    e && u && (h(!1), o(!1), g.current.blur());
+  }), [N, _] = T(null), [y, R] = T(null), { styles: k, attributes: E } = U(N, y, {
     placement: "top-end",
-    modifiers: e && z() ? [
+    modifiers: e && J() ? [
       {
         name: "offset",
         options: {
@@ -45,48 +50,69 @@ const G = 800, J = 100, b = (p, s) => /* @__PURE__ */ t(
         }
       }
     ] : []
-  }), x = S((o) => {
-    const i = o.target instanceof Node ? o.target : null;
-    i && N?.contains(i) || e && (u(!1), s(!1));
-  }), D = c("MapSettingsTile", O), W = c("MapSettingsButton", e && "active", w), H = c(
+  });
+  q(y, (t) => {
+    const r = t.target instanceof Node ? t.target : null;
+    r && N?.contains(r) || e && (h(!1), o(!1));
+  });
+  const D = p("MapSettingsTile", C), W = p("MapSettingsButton", e && "active", w), A = p(
     "MapSettingsTileIcon",
     "hover-scale-110",
-    T ? "display-block" : "display-none",
-    m?.props.className || ""
-  ), L = c(
+    v ? "display-block" : "display-none",
+    d?.props.className || ""
+  ), H = p(
     "MapSettingsTileIcon",
     "hover-scale-110",
-    T ? "display-none" : "display-block",
-    d?.props.className || ""
-  ), a = /* @__PURE__ */ l("div", { className: W, onClick: C, children: [
-    m && v.cloneElement(m, {
-      className: H
+    v ? "display-none" : "display-block",
+    f?.props.className || ""
+  ), l = /* @__PURE__ */ c("div", { className: W, onClick: P, children: [
+    d && I.cloneElement(d, {
+      className: A
     }),
-    d && v.cloneElement(d, {
-      className: L
+    f && I.cloneElement(f, {
+      className: H
     })
   ] });
-  return /* @__PURE__ */ l("div", { className: D, ref: g, ...y, children: [
-    !n && /* @__PURE__ */ l(j, { children: [
-      r && !e ? b(a, r) : a,
-      /* @__PURE__ */ t("div", { className: "overflow-hidden", children: /* @__PURE__ */ t(I, { children: e && f && f }) })
-    ] }),
-    n && /* @__PURE__ */ l("div", { className: "MapSettingsTile-inner position-relative", ref: P, children: [
-      r && !e ? b(a, r) : a,
-      /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t("div", { className: "dropdown", ref: x, children: e && n && /* @__PURE__ */ t(
-        F,
+  return /* @__PURE__ */ c("div", { className: D, ref: g, ...x, children: [
+    !s && /* @__PURE__ */ c(L, { children: [
+      a && !e ? b(l, a) : l,
+      /* @__PURE__ */ i("div", { className: "overflow-hidden", children: /* @__PURE__ */ i(M, { children: e && u && /* @__PURE__ */ i(
+        O.div,
         {
-          className: "margin-bottom-10 shadow-smooth border-none",
-          ref: R,
-          style: { ...E.popper, minWidth: "180px" },
-          ...k.popper,
-          children: n?.map((o, i) => o.type.isMapSettingsDropdownHeader ? o : /* @__PURE__ */ t(q, { value: o }, i))
+          initial: n.initial,
+          animate: n.animate,
+          exit: n.exit,
+          transition: n.transition,
+          children: u
         }
       ) }) })
+    ] }),
+    s && /* @__PURE__ */ c("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
+      a && !e ? b(l, a) : l,
+      /* @__PURE__ */ i(M, { children: e && s && /* @__PURE__ */ i(
+        O.div,
+        {
+          className: "dropdown",
+          initial: n.initial,
+          animate: n.animate,
+          exit: n.exit,
+          transition: n.transition,
+          children: /* @__PURE__ */ i(
+            z,
+            {
+              className: "margin-bottom-5 shadow-smooth border-none",
+              ref: R,
+              style: { ...k.popper, minWidth: "180px" },
+              ...E.popper,
+              children: s?.map((t, r) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, r))
+            }
+          )
+        }
+      ) })
     ] })
   ] });
 };
 export {
-  ae as default
+  re as default
 };
 //# sourceMappingURL=MapSettingsTile.js.map

package/components/map/components/features/settings/MapSettingsTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => {\n    return (\n        <OverlayTrigger\n            placement={Tooltip.TOP}\n            delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n            overlay={\n                <Tooltip id='tooltip' width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n        >\n            {component}\n        </OverlayTrigger>\n    );\n};\n\nexport type MapSettingsTileProps = {\n    onToggle?: (newState: boolean) => void;\n    tooltip?: React.ReactNode;\n    panel?: React.ReactNode;\n    items?: JSX.Element[] | undefined;\n    activeIcon?: JSX.Element | undefined;\n    inactiveIcon?: JSX.Element | undefined;\n    isActive?: boolean;\n    buttonClassName?: string;\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [toggleRef, setToggleRef] = useState<HTMLDivElement | null>(null);\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n        placement: 'top-end',\n        modifiers:\n            isOpen && isMobileScreen()\n                ? [\n                      {\n                          name: 'offset',\n                          options: {\n                              offset: [-60, -60],\n                          },\n                      },\n                  ]\n                : [],\n    });\n\n    const dropdownWrapperRef = useClickOutside((event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && toggleRef?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {activeIcon &&\n                React.cloneElement(activeIcon, {\n                    className: activeIconClassNames,\n                })}\n            {inactiveIcon &&\n                React.cloneElement(inactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        {/* @ts-ignore-next-line */}\n                        <AnimatePresence>{isOpen && panel && panel}</AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    {/* @ts-ignore-next-line */}\n                    <AnimatePresence>\n                        <div className='dropdown' ref={dropdownWrapperRef}>\n                            {isOpen && items && (\n                                <MenuItemList\n                                    className='margin-bottom-10 shadow-smooth border-none'\n                                    ref={setRefDropdownMenu}\n                                    style={{ ...styles.popper, minWidth: '180px' }}\n                                    {...attributes.popper}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (item.type.isMapSettingsDropdownHeader) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </MenuItemList>\n                            )}\n                        </div>\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","dropdownWrapperRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","MenuItemList","item","index","MenuItem"],"mappings":"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"}
+{"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 10 },\n    transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => {\n    return (\n        <OverlayTrigger\n            placement={Tooltip.TOP}\n            delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n            overlay={\n                <Tooltip id='tooltip' width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n        >\n            {component}\n        </OverlayTrigger>\n    );\n};\n\nexport type MapSettingsTileProps = {\n    onToggle?: (newState: boolean) => void;\n    tooltip?: React.ReactNode;\n    panel?: React.ReactNode;\n    items?: JSX.Element[] | undefined;\n    activeIcon?: JSX.Element | undefined;\n    inactiveIcon?: JSX.Element | undefined;\n    isActive?: boolean;\n    buttonClassName?: string;\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [toggleRef, setToggleRef] = useState<HTMLDivElement | null>(null);\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n        placement: 'top-end',\n        modifiers:\n            isOpen && isMobileScreen()\n                ? [\n                      {\n                          name: 'offset',\n                          options: {\n                              offset: [-60, -60],\n                          },\n                      },\n                  ]\n                : [],\n    });\n\n    useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && toggleRef?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {activeIcon &&\n                React.cloneElement(activeIcon, {\n                    className: activeIconClassNames,\n                })}\n            {inactiveIcon &&\n                React.cloneElement(inactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        <AnimatePresence>\n                            {isOpen && panel && (\n                                <motion.div\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {panel}\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <AnimatePresence>\n                        {isOpen && items && (\n                            <motion.div\n                                className='dropdown'\n                                initial={tileAnimation.initial}\n                                animate={tileAnimation.animate}\n                                exit={tileAnimation.exit}\n                                transition={tileAnimation.transition}\n                            >\n                                <MenuItemList\n                                    className='margin-bottom-5 shadow-smooth border-none'\n                                    ref={setRefDropdownMenu}\n                                    style={{ ...styles.popper, minWidth: '180px' }}\n                                    {...attributes.popper}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (item.type.isMapSettingsDropdownHeader) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </MenuItemList>\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":"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"}

package/components/map/components/features/settings/ZoomButtons.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import o from "classnames";
+import o from "../../../../../utils/classNames.js";
 import { MapIcon as e, ZOOM_IN as c, ZOOM_OUT as m } from "../../../icons/MapIcon.js";
 const h = ({ onZoomIn: a, onZoomOut: i }) => {
   const t = o("ZoomButtons");

package/components/map/components/features/settings/ZoomButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomButtons.js","sources":["../../../../../../src/components/map/components/features/settings/ZoomButtons.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';\n\nexport type ZoomButtonsProps = {\n    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;\n    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst ZoomButtons = ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => {\n    const buttonClasses = classNames('ZoomButtons');\n\n    return (\n        <div className={buttonClasses}>\n            <div className='MapSettingsTile' onClick={onZoomIn}>\n                <MapIcon name={ZOOM_IN} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n            <div className='MapSettingsTileSpacer' />\n            <div className='MapSettingsTile' onClick={onZoomOut}>\n                <MapIcon name={ZOOM_OUT} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n        </div>\n    );\n};\n\nexport default ZoomButtons;\n"],"names":["ZoomButtons","onZoomIn","onZoomOut","buttonClasses","classNames","jsxs","jsx","MapIcon","ZOOM_IN","ZOOM_OUT"],"mappings":";;;AAWA,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,WAAAC,QAAkC;AAC/D,QAAMC,IAAgBC,EAAW,aAAa;AAE9C,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mBAAkB,SAASL,GACtC,UAAA,gBAAAK,EAACC,GAAA,EAAQ,MAAMC,GAAS,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,GAC7F;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,wBAAA,CAAwB;AAAA,sBACtC,OAAA,EAAI,WAAU,mBAAkB,SAASJ,GACtC,UAAA,gBAAAI,EAACC,GAAA,EAAQ,MAAME,GAAU,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,EAAA,CAC9F;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ZoomButtons.js","sources":["../../../../../../src/components/map/components/features/settings/ZoomButtons.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../../../../utils/classNames';\nimport { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';\n\nexport type ZoomButtonsProps = {\n    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;\n    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst ZoomButtons = ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => {\n    const buttonClasses = classNames('ZoomButtons');\n\n    return (\n        <div className={buttonClasses}>\n            <div className='MapSettingsTile' onClick={onZoomIn}>\n                <MapIcon name={ZOOM_IN} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n            <div className='MapSettingsTileSpacer' />\n            <div className='MapSettingsTile' onClick={onZoomOut}>\n                <MapIcon name={ZOOM_OUT} className='display-block hover-scale-110' height={16} width={16} />\n            </div>\n        </div>\n    );\n};\n\nexport default ZoomButtons;\n"],"names":["ZoomButtons","onZoomIn","onZoomOut","buttonClasses","classNames","jsxs","jsx","MapIcon","ZOOM_IN","ZOOM_OUT"],"mappings":";;;AAUA,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,WAAAC,QAAkC;AAC/D,QAAMC,IAAgBC,EAAW,aAAa;AAE9C,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mBAAkB,SAASL,GACtC,UAAA,gBAAAK,EAACC,GAAA,EAAQ,MAAMC,GAAS,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,GAC7F;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,wBAAA,CAAwB;AAAA,sBACtC,OAAA,EAAI,WAAU,mBAAkB,SAASJ,GACtC,UAAA,gBAAAI,EAACC,GAAA,EAAQ,MAAME,GAAU,WAAU,iCAAgC,QAAQ,IAAI,OAAO,IAAI,EAAA,CAC9F;AAAA,EAAA,GACJ;AAER;"}

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -1,15 +1,52 @@
 import { default as React } from 'react';
 import { MapType } from '../../../../utils/mapTypes';
 export type MapTypeSettingsProps = {
-    mapType?: string;
+    /**
+     * Currently selected base map type.
+     */
+    mapType?: MapType;
+    /**
+     * Global switch to enable or disable the night map type entry.
+     *
+     * @deprecated Prefer controlling night visibility via `visibleMapTypes`
+     * by including or excluding `MAP_TYPE_NIGHT`.
+     */
     enableNightMap?: boolean;
+    /**
+     * Map types that should be shown in the settings panel/dropdown.
+     */
+    visibleMapTypes?: MapType[];
+    /**
+     * Called when the user selects a different map type.
+     */
     onMapTypeChange?: (type: MapType) => void;
+    /**
+     * Custom label for the default map type entry.
+     */
     defaultTypeLabel?: string | JSX.Element;
+    /**
+     * Custom label for the truck/fleet-style map type entry.
+     */
     truckTypeLabel?: string | JSX.Element;
+    /**
+     * Custom label for the terrain map type entry.
+     */
     terrainTypeLabel?: string | JSX.Element;
+    /**
+     * Custom label for the satellite map type entry.
+     */
     satelliteTypeLabel?: string | JSX.Element;
+    /**
+     * Custom label for the night map type entry.
+     */
     nightTypeLabel?: string | JSX.Element;
+    /**
+     * Tooltip content shown for the map type settings trigger.
+     */
     tooltip?: string | React.ReactNode;
+    /**
+     * Optional dropdown header text shown above labeled map type entries.
+     */
     dropdownHeaderText?: string | JSX.Element;
 };
 declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;