@volverjs/ui-vue 0.0.13-beta.9 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/ui-vue",
   "type": "module",
-  "version": "0.0.13-beta.9",
+  "version": "0.0.13",
   "description": "@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.",
   "author": "8 wave S.r.l.",
   "license": "MIT",
@@ -248,9 +248,10 @@
       "default": "./dist/components/VvAccordion/VvAccordion.umd.js"
     }
   },
-  "main": "./dist/Volver.umd.js",
-  "module": "./dist/Volver.es.js",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "typesVersions": {
     "*": {
       "*": [
@@ -392,11 +393,12 @@
   },
   "files": [
     "bin",
-    "dist"
+    "dist",
+    "src"
   ],
   "peerDependencies": {
-    "@json-render/core": ">=0.16.0",
-    "@json-render/vue": ">=0.16.0",
+    "@json-render/core": ">=0.19.0",
+    "@json-render/vue": ">=0.19.0",
     "@volverjs/style": ">=0",
     "@vueuse/core": ">=14",
     "vue": ">=3",
@@ -414,79 +416,82 @@
     }
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.11",
-    "@iconify/vue": "^5.0.0",
-    "@tanstack/vue-virtual": "^3.13.23",
+    "@floating-ui/core": "^1.7.5",
+    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/vue": "^2.0.0",
+    "@iconify/vue": "^5.0.1",
+    "@tanstack/vue-virtual": "^3.13.28",
     "blurhash": "^2.0.5",
     "comlink": "^4.4.2",
     "dot-prop": "^10.1.0",
+    "imask": "^7.6.1",
     "mitt": "^3.0.1",
-    "pica": "^9.0.1",
+    "pica": "^10.0.1",
     "vue-imask": "^7.6.1",
     "vuedraggable": "^4.1.0"
   },
   "optionalDependencies": {
-    "@iconify/tools": "^5.0.11",
-    "@iconify/utils": "^3.1.0",
+    "@iconify/tools": "^5.0.12",
+    "@iconify/utils": "^3.1.3",
     "chokidar": "^5.0.0",
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "8.1.0",
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
-    "@babel/preset-typescript": "^7.28.5",
+    "@antfu/eslint-config": "9.0.0",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@iconify/types": "^2.0.0",
-    "@json-render/core": "^0.16.0",
-    "@json-render/vue": "^0.16.0",
+    "@json-render/core": "^0.19.0",
+    "@json-render/vue": "^0.19.0",
     "@nabla/vite-plugin-eslint": "^3.0.1",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-links": "^10.3.5",
-    "@storybook/addon-themes": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/cli": "^10.3.5",
-    "@storybook/vue3-vite": "^10.3.5",
+    "@storybook/addon-a11y": "^10.4.5",
+    "@storybook/addon-docs": "^10.4.5",
+    "@storybook/addon-links": "^10.4.5",
+    "@storybook/addon-themes": "^10.4.5",
+    "@storybook/addon-vitest": "^10.4.5",
+    "@storybook/cli": "^10.4.5",
+    "@storybook/vue3-vite": "^10.4.5",
     "@tsconfig/node18": "^18.2.6",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.9.3",
     "@types/pica": "^9.0.5",
     "@types/yargs": "^17.0.35",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitest/browser": "^4.1.3",
-    "@vitest/browser-playwright": "^4.1.3",
-    "@volverjs/style": "0.1.24-beta.3",
-    "@vue/compiler-sfc": "^3.5.32",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/test-utils": "^2.4.6",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@volverjs/style": "0.1.24",
+    "@vue/compiler-sfc": "^3.5.38",
+    "@vue/eslint-config-typescript": "^14.8.0",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook-dark-mode": "^10.0.7",
-    "@vueuse/core": "^14.2.1",
-    "baseline-browser-mapping": "^2.10.16",
+    "@vueless/storybook-dark-mode": "^10.0.8",
+    "@vueuse/core": "^14.3.0",
+    "baseline-browser-mapping": "^2.10.37",
     "change-case": "^5.4.4",
-    "eslint": "^10.2.0",
+    "eslint": "^10.5.0",
     "glob": "^13.0.6",
     "jest-axe": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.59.1",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "playwright": "^1.61.0",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "remark": "^15.0.1",
-    "sass-embedded": "1.99.0",
-    "storybook": "^10.3.5",
+    "sass-embedded": "1.100.0",
+    "storybook": "^10.4.5",
     "storybook-addon-markdown-docs": "^2.0.0",
-    "terser": "^5.46.1",
+    "terser": "^5.48.0",
     "ts-node": "^10.9.2",
-    "typescript": "~6.0.2",
+    "typescript": "~6.0.3",
     "unplugin-auto-import": "^21.0.0",
-    "unplugin-vue-components": "^32.0.0",
-    "vite": "^8.0.7",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.0.16",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vitest": "^4.1.3",
-    "vue": "^3.5.32",
-    "vue-tsc": "^3.2.6",
-    "zod": "^4.3.6"
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
+    "vue-tsc": "^3.3.5",
+    "zod": "^4.4.3"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/Volver.ts

@@ -0,0 +1,326 @@
+import type { IconifyIcon, IconifyJSON, PartialIconifyAPIConfig } from '@iconify/vue'
+import type { App, Component, Directive, Plugin, Ref } from 'vue'
+import {
+    addAPIProvider,
+    addCollection,
+    addIcon,
+
+} from '@iconify/vue'
+import { kebabCase } from 'change-case'
+import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from './constants'
+
+export function useDefaultProps(
+    component: Component,
+    defaults?: Record<string, unknown>,
+    name?: string,
+) {
+    const componentName = name || component.name
+
+    if (!componentName) {
+        return component
+    }
+
+    const componentDefaults = defaults?.[componentName] as Record<
+        string,
+        unknown
+    >
+    const props = (component as Record<string, unknown>).props as Record<
+        string,
+        unknown
+    >
+
+    if (!componentDefaults || !props) {
+        return { ...component, name: componentName }
+    }
+
+    return {
+        ...component,
+        name: componentName,
+        props: Object.keys(props).reduce(
+            (acc, key) => {
+                if (!(key in componentDefaults)) {
+                    acc[key] = props[key]
+                    return acc
+                }
+                const customDefault = componentDefaults[key]
+                if (
+                    typeof props[key] === 'function'
+                    || Array.isArray(props[key])
+                ) {
+                    acc[key] = {
+                        type: props[key],
+                        default: customDefault,
+                    }
+                    return acc
+                }
+                acc[key] = {
+                    ...(props[key] as Record<string, unknown>),
+                    default: customDefault,
+                }
+                return acc
+            },
+            {} as Record<string, unknown>,
+        ),
+    }
+}
+
+export type DefaultOptions = Record<string, Record<string, unknown>>
+
+export type VolverExperimentalFeatures = {
+    /**
+     * Force suggestions in `VvInputText` and `VvTextarea` component
+     */
+    forceInputSuggestions?: boolean
+}
+
+export type VolverOptions = {
+    /**
+     * If true set "fetchOptions" with credentials: 'include'
+     */
+    fetchWithCredentials?: boolean
+    /**
+     * Optional fetch params
+     */
+    fetchOptions?: RequestInit
+    /**
+     * Array of iconify collections that will be added during plugin install
+     * @see https://docs.iconify.design/types/iconify-json.html
+     */
+    iconsCollections?: IconifyJSON[]
+    /**
+     * Set true inside nuxt
+     */
+    nuxt?: boolean
+    /**
+     * Default iconify provider
+     * @see https://docs.iconify.design/icon-components/vue/add-collection.html
+     * @default 'vv'
+     */
+    iconsProvider?: string
+    /**
+     * Components to install
+     */
+    components?: Record<string, Component>
+    /**
+     * Alias to install
+     */
+    aliases?: Record<string, Component>
+    /**
+     * Directives to install
+     */
+    directives?: Record<string, Directive>
+    /**
+     * Default props for components
+     */
+    defaults?: DefaultOptions
+    /**
+     * Experimental features
+     */
+    experimentalFeatures?: VolverExperimentalFeatures
+}
+
+export interface VolverInterface {
+    /**
+     * @param {string} src Icon source path (url)
+     * @param {RequestInit} options
+     * @returns {Promise<string | undefined>} String SVG if exist
+     */
+    fetchIcon: (src: string, options?: RequestInit) => Promise<string | undefined>
+    /**
+     * Add iconify collection to library
+     * @see https://docs.iconify.design/icon-components/vue/add-collection.html
+     * @param {IconifyJSON} collection
+     * @param {string} providerName Optional provider name
+     */
+    addCollection: (collection: IconifyJSON, providerName?: string) => boolean
+    /**
+     * Add icon to collection
+     * @see https://docs.iconify.design/icon-components/vue/add-icon.html
+     * @param {string} name
+     * @param {IconifyIcon} data
+     * @returns {boolean} true on success, false if something is wrong with data
+     */
+    addIcon: (name: string, data: IconifyIcon) => boolean
+    /**
+     * Add custom config for icons provider
+     * @param {string} provider
+     * @param {PartialIconifyAPIConfig} customConfig
+     * @returns {boolean} true on success, false if something is wrong with data
+     */
+    addIconsAPIProvider: (
+        provider: string,
+        customConfig: PartialIconifyAPIConfig,
+    ) => boolean
+    /**
+     * Current provider
+     */
+    iconsProvider: string
+    /**
+     * Array of installed iconify collections
+     * @see https://docs.iconify.design/types/iconify-json.html
+     */
+    iconsCollections: IconifyJSON[]
+    /**
+     * Set true inside nuxt
+     */
+    nuxt: boolean
+    /**
+     * Components defaults options
+     */
+    defaults: Ref<DefaultOptions>
+}
+
+export class Volver implements VolverInterface {
+    private _fetchOptions: RequestInit = {}
+    private _iconsCollections: IconifyJSON[] = []
+    private _iconsProvider = DEFAULT_ICONIFY_PROVIDER
+    private _nuxt = false
+    private _experimentalFeatures: VolverExperimentalFeatures = {}
+
+    defaults: Ref<DefaultOptions> = ref({})
+
+    constructor({
+        fetchWithCredentials,
+        fetchOptions,
+        iconsProvider,
+        nuxt,
+        iconsCollections,
+        defaults,
+        experimentalFeatures,
+    }: VolverOptions = {}) {
+        // fetch options
+        if (fetchOptions) {
+            this._fetchOptions = fetchOptions
+        }
+        // fetch with credentials sugar syntax
+        if (fetchWithCredentials) {
+            this._fetchOptions = {
+                ...this._fetchOptions,
+                credentials: 'include',
+            }
+        }
+        // default iconify provider
+        if (iconsProvider) {
+            this._iconsProvider = iconsProvider
+        }
+        // enable nuxt mode
+        if (nuxt) {
+            this._nuxt = nuxt
+        }
+        // add iconify collections
+        if (iconsCollections && Array.isArray(iconsCollections)) {
+            iconsCollections.forEach((iconsCollection) => {
+                this.addCollection(iconsCollection, this._iconsProvider)
+            })
+        }
+        // set defaults
+        if (defaults) {
+            this.defaults.value = defaults
+        }
+        // experimental features
+        if (experimentalFeatures) {
+            this._experimentalFeatures = experimentalFeatures
+        }
+    }
+
+    get nuxt() {
+        return this._nuxt
+    }
+
+    get iconsProvider() {
+        return this._iconsProvider
+    }
+
+    get iconsCollections() {
+        return this._iconsCollections
+    }
+
+    get experimentalFeatures() {
+        return this._experimentalFeatures
+    }
+
+    addCollection(
+        collection: IconifyJSON,
+        providerName: string = this._iconsProvider,
+    ): boolean {
+        this._iconsCollections.push(collection)
+        return addCollection(collection, providerName)
+    }
+
+    addIcon(name: string, data: IconifyIcon): boolean {
+        return addIcon(name, data)
+    }
+
+    addIconsAPIProvider(
+        provider: string,
+        customConfig: PartialIconifyAPIConfig,
+    ): boolean {
+        return addAPIProvider(provider, customConfig)
+    }
+
+    async fetchIcon(
+        src: string,
+        options: RequestInit = { cache: 'force-cache' },
+    ): Promise<string | undefined> {
+        const response = await fetch(src, {
+            ...this._fetchOptions,
+            ...options,
+        })
+        if (!response.ok) {
+            throw new Error(
+                `Cannot fetch icon "${src}": ${response.status} ${response.statusText}`,
+            )
+        }
+        return response.text()
+    }
+}
+
+const VolverPlugin: Plugin = {
+    /**
+     * Vue.use() hook
+     * @param {App} app
+     * @param {object} options
+     */
+    install(app: App, options: VolverOptions = {}) {
+        const volver = new Volver(options)
+
+        // register global methods
+        app.config.globalProperties.$vv = volver
+
+        // register components
+        if (options.components) {
+            Object.entries(options.components).forEach(([name, component]) => {
+                app.component(
+                    name,
+                    useDefaultProps(component, options.defaults),
+                )
+            })
+        }
+
+        // register aliases
+        if (options.aliases) {
+            Object.entries(options.aliases).forEach(([name, component]) => {
+                app.component(
+                    name,
+                    useDefaultProps(component, options.defaults, name),
+                )
+            })
+        }
+
+        // register directives
+        if (options.directives) {
+            Object.entries(options.directives).forEach(([name, directive]) => {
+                const kebabName = kebabCase(name)
+                if (kebabName.startsWith('v-')) {
+                    name = kebabName.substring(2).toLocaleLowerCase()
+                }
+                app.directive(name, directive)
+            })
+        }
+
+        // provide volver to components
+        app.provide(INJECTION_KEY_VOLVER, volver)
+    },
+}
+
+export default VolverPlugin

package/src/assets/icons/detailed/add-circle.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(2 2)">
+        <g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2">
+            <circle cx="14" cy="14" r="14" stroke="none" />
+            <circle cx="14" cy="14" r="13" fill="none" />
+        </g>
+        <line x2="10" transform="translate(9 14)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-miterlimit="10" stroke-width="2" />
+        <line y2="10" transform="translate(14 9)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-miterlimit="10" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/add.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(4.333 4.636)">
+        <line x2="24" transform="translate(-0.333 11.363)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-width="2" />
+        <line y2="24" transform="translate(11.667 -0.637)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-center.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 8)">
+        <line x1="14" transform="translate(3.667 5)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="14" transform="translate(3.667 17)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-justify.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 8)">
+        <line x1="22" transform="translate(-0.333 5)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 17)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-left.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 7)">
+        <line x1="16" transform="translate(-0.333 6)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 12)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="16" transform="translate(-0.333 18)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-right.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 8)">
+        <line x1="16" transform="translate(5.666 5)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="16" transform="translate(5.666 17)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/analysis-2.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(2 2)">
+        <g transform="translate(-64.63 369.37)" fill="none" stroke-miterlimit="10">
+            <path
+                d="M80.287-365.369a.674.674,0,0,0-.473.2.671.671,0,0,0-.2.474l.012,10.331-10.331,0a.673.673,0,0,0-.473.2.67.67,0,0,0-.2.473,12.284,12.284,0,0,0,12,12.328,12,12,0,0,0,12-12A12.3,12.3,0,0,0,80.287-365.369Z"
+                stroke="none" />
+            <path
+                d="M 81.62060546875 -363.2827453613281 L 81.63316345214844 -352.369873046875 L 70.71707916259766 -352.3659057617188 C 70.83403778076172 -351.46923828125 71.06963348388672 -350.5902099609375 71.421630859375 -349.7400512695312 C 71.93170928955078 -348.508056640625 72.65972137451172 -347.3962707519531 73.58543395996094 -346.4354858398438 C 75.49069976806641 -344.4580688476562 77.99251556396484 -343.3690490722656 80.6300048828125 -343.3690490722656 C 83.30183410644531 -343.3690490722656 85.81329345703125 -344.4092712402344 87.70175170898438 -346.2980651855469 C 89.59006500244141 -348.1867065429688 90.62998962402344 -350.6981201171875 90.62998962402344 -353.36962890625 C 90.62998962402344 -356.0064697265625 89.53903198242188 -358.5081481933594 87.55808258056641 -360.4138488769531 C 86.59563446044922 -361.3397521972656 85.48202514648438 -362.0679321289062 84.24819946289062 -362.5782165527344 C 83.39729309082031 -362.9301147460938 82.51763153076172 -363.1657104492188 81.62060546875 -363.2827453613281 M 80.287109375 -365.369140625 C 86.91672515869141 -365.369140625 92.62998962402344 -359.9983825683594 92.62998962402344 -353.36962890625 C 92.62998962402344 -346.7420043945312 87.25960540771484 -341.3690490722656 80.6300048828125 -341.3690490722656 C 74.002685546875 -341.3690490722656 68.630859375 -347.0696411132812 68.630859375 -353.697265625 C 68.630859375 -353.8732604980469 68.7021484375 -354.045654296875 68.8275146484375 -354.1699829101562 C 68.95169067382812 -354.2941284179688 69.12419891357422 -354.3653869628906 69.30014038085938 -354.3653869628906 L 79.630859375 -354.369140625 L 79.61897277832031 -364.6997985839844 C 79.61897277832031 -364.876953125 79.68910980224609 -365.0482177734375 79.81446838378906 -365.1736755371094 C 79.93867492675781 -365.2978210449219 80.11116027832031 -365.369140625 80.287109375 -365.369140625 Z"
+                stroke="none" fill="#000" />
+        </g>
+        <g transform="translate(-65.5 368.5)" fill="none" stroke-miterlimit="10">
+            <path
+                d="M78.3-355.7a.7.7,0,0,0,.2-.488v-10.62a.7.7,0,0,0-.2-.489.7.7,0,0,0-.488-.2A11.312,11.312,0,0,0,66.5-356.189a.7.7,0,0,0,.2.488.7.7,0,0,0,.488.2h10.62A.7.7,0,0,0,78.3-355.7Z"
+                stroke="none" />
+            <path
+                d="M 76.49998474121094 -357.5 L 76.49998474121094 -365.4080200195312 C 72.41349029541016 -364.8294372558594 69.17098236083984 -361.587158203125 68.5921630859375 -357.5 L 76.49998474121094 -357.5 M 77.81065368652344 -355.5 L 67.19051361083984 -355.5 C 67.00898742675781 -355.5 66.83101654052734 -355.5735778808594 66.70287322998047 -355.7017211914062 C 66.57474517822266 -355.8298950195312 66.49998474121094 -356.0078430175781 66.49998474121094 -356.1894226074219 C 66.50116729736328 -362.4356384277344 71.56385803222656 -367.5 77.81065368652344 -367.5 C 77.9921875 -367.5 78.17015838623047 -367.4264221191406 78.29830169677734 -367.2982482910156 C 78.42643737792969 -367.1690063476562 78.49998474121094 -366.9921569824219 78.49998474121094 -366.8094177246094 L 78.49998474121094 -356.1894226074219 C 78.49998474121094 -356.0078430175781 78.42643737792969 -355.8298950195312 78.29830169677734 -355.7017211914062 C 78.17015838623047 -355.5735778808594 77.9921875 -355.5 77.81065368652344 -355.5 Z"
+                stroke="none" fill="#000" />
+        </g>
+    </g>
+</svg>

package/src/assets/icons/detailed/analysis-3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(4 8)">
+        <path d="M128.781-347.937l10-10,4,4,7-6" transform="translate(-128.781 363.937)" fill="none" stroke="#000"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        <path d="M155-345H129v-18" transform="translate(-130 361.999)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-miterlimit="10" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/analysis.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(2 10)">
+        <g transform="translate(0 6)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2">
+            <rect width="7" height="12" rx="2" stroke="none" />
+            <rect x="1" y="1" width="5" height="10" rx="1" fill="none" />
+        </g>
+        <g transform="translate(10 -4)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2">
+            <rect width="8" height="22" rx="2" stroke="none" />
+            <rect x="1" y="1" width="6" height="20" rx="1" fill="none" />
+        </g>
+        <g transform="translate(21 2)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2">
+            <rect width="7" height="16" rx="2" stroke="none" />
+            <rect x="1" y="1" width="5" height="14" rx="1" fill="none" />
+        </g>
+    </g>
+</svg>

package/src/assets/icons/detailed/apple.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 5.333)">
+        <g transform="translate(-6.133 -5.433)" fill="none" stroke-miterlimit="10">
+            <path
+                d="M16.817,28.943a6.762,6.762,0,0,1,1.364.164,7.462,7.462,0,0,1,1.364.532l.032.015c.168.079.342.161.521.236a2.332,2.332,0,0,0,.924.211,3.513,3.513,0,0,0,1.429-.42,6.044,6.044,0,0,0,2.269-1.911,18.881,18.881,0,0,0,2.5-4.141c.132-.292.232-.533.318-.755a14.883,14.883,0,0,0,.907-9.257,7.167,7.167,0,0,0-2.9-4.254.662.662,0,0,1-.063-.044,4.959,4.959,0,0,0-1-.614,6.1,6.1,0,0,0-2.607-.6h-.148a8.727,8.727,0,0,0-2.967.768l-.586.223c-.255.1-.849.3-.855.3a.694.694,0,0,1-.234.04h-.22a.25.25,0,0,0-.043,0h-.032a.388.388,0,0,0-.045.005h-.221a.7.7,0,0,1-.232-.039s-.6-.205-.857-.3l-.579-.22A8.794,8.794,0,0,0,11.877,8.1l-.16,0a6.174,6.174,0,0,0-2.593.6,5,5,0,0,0-1,.615.581.581,0,0,1-.06.043,7.289,7.289,0,0,0-2.887,4.186,14.879,14.879,0,0,0,.867,9.273c.125.325.238.58.342.808a18.805,18.805,0,0,0,2.5,4.141,6,6,0,0,0,2.188,1.877,3.823,3.823,0,0,0,1.517.453,2.339,2.339,0,0,0,.917-.209c.176-.073.347-.153.512-.231l.031-.015a7.634,7.634,0,0,1,1.376-.536,6.433,6.433,0,0,1,1.372-.164h.025Z"
+                stroke="none" />
+            <path
+                d="M 21.02216339111328 28.09856224060059 C 21.12759017944336 28.07705879211426 21.42460632324219 27.94613456726074 21.64729499816895 27.84798049926758 C 22.1352653503418 27.63409996032715 22.5471363067627 27.27085113525391 23.1667366027832 26.50798988342285 C 23.99640655517578 25.48611068725586 24.74532508850098 24.2403507232666 25.39311599731445 22.8043098449707 C 25.50381660461426 22.55926132202148 25.59103584289551 22.35254096984863 25.66759490966797 22.15374946594238 L 25.6862850189209 22.10521125793457 L 25.70747566223145 22.05771064758301 C 27.52203559875488 17.9902400970459 26.52179527282715 14.17781066894531 26.5114860534668 14.13980007171631 L 26.49651527404785 14.08474063873291 L 26.48470497131348 14.02891063690186 C 26.09665679931641 12.1938943862915 24.58590507507324 11.1318416595459 24.46488761901855 11.04943370819092 C 24.37748527526855 10.99457550048828 24.31293869018555 10.94598770141602 24.28074645996094 10.92174053192139 L 24.21795654296875 10.87312030792236 C 24.05901527404785 10.74491024017334 23.86251640319824 10.62596035003662 23.61445617675781 10.50817012786865 C 23.05582618713379 10.24185085296631 22.45205497741699 10.1010799407959 21.86841583251953 10.1010799407959 C 21.833740234375 10.10108089447021 21.79906463623047 10.10092067718506 21.76872634887695 10.10158061981201 C 21.07897567749023 10.11819076538086 20.37002563476562 10.39115047454834 19.47247505187988 10.73672008514404 L 19.46388626098633 10.74000072479248 L 18.86650657653809 10.96682071685791 C 18.60623741149902 11.0638542175293 18.08055686950684 11.24428749084473 17.97027397155762 11.2820291519165 C 17.68367767333984 11.38230800628662 17.38398933410645 11.43314075469971 17.07927513122559 11.43314075469971 L 16.51893615722656 11.43314075469971 C 16.21232604980469 11.43314075469971 15.91144561767578 11.38215065002441 15.62465572357178 11.28157997131348 L 15.57466602325439 11.26421070098877 C 15.31332588195801 11.17364025115967 14.94164562225342 11.04421997070312 14.73212623596191 10.96629047393799 L 14.71736621856689 10.9607400894165 L 14.13249588012695 10.73793029785156 C 13.19659233093262 10.37893676757812 12.5200309753418 10.11943244934082 11.82894706726074 10.10160064697266 C 11.79278087615967 10.10083198547363 11.75521755218506 10.10000038146973 11.7169361114502 10.10000038146973 C 11.16138553619385 10.10000038146973 10.52953624725342 10.24902057647705 9.98011589050293 10.51041030883789 C 9.738740921020508 10.62471389770508 9.541544914245605 10.74392127990723 9.377471923828125 10.87474250793457 C 9.308310508728027 10.93070411682129 9.236137390136719 10.98320960998535 9.162239074707031 11.03133583068848 C 9.055426597595215 11.10564231872559 7.495382785797119 12.21834182739258 7.132815837860107 13.95565032958984 L 7.121405601501465 14.01032066345215 L 7.106966018676758 14.06427001953125 C 7.064375877380371 14.22334003448486 6.084545612335205 18.00592994689941 7.868285655975342 22.00486946105957 L 7.889325618743896 22.05204010009766 L 7.907905578613281 22.10024070739746 C 8.017155647277832 22.3836498260498 8.114456176757812 22.60309982299805 8.203326225280762 22.79803085327148 L 8.207335472106934 22.80688095092773 C 8.851945877075195 24.23919105529785 9.600215911865234 25.48437118530273 10.43126583099365 26.50772094726562 C 11.0430154800415 27.26091957092285 11.44717597961426 27.62739944458008 11.86868572235107 27.81306076049805 L 11.87689590454102 27.816650390625 C 12.13865089416504 27.93124961853027 12.46178245544434 28.07271003723145 12.5813684463501 28.0960807800293 C 12.60169410705566 28.09126281738281 12.64846801757812 28.07803535461426 12.72928619384766 28.04415130615234 C 12.86509799957275 27.98736000061035 13.01091003417969 27.91939353942871 13.14929485321045 27.85418510437012 L 13.21434593200684 27.82314109802246 C 13.7003059387207 27.59630012512207 14.25109577178955 27.33918952941895 14.93080615997314 27.1678409576416 C 15.44693565368652 27.0377311706543 16.03642654418945 26.9644603729248 16.73295593261719 26.94384002685547 L 16.85110664367676 26.94296073913574 L 16.88540649414062 26.94413948059082 C 17.32941627502441 26.95938110351562 17.99722671508789 26.99909973144531 18.66854667663574 27.1675910949707 C 19.35687637329102 27.34073066711426 19.93254661560059 27.61122131347656 20.39594650268555 27.82896041870117 L 20.4603157043457 27.85919952392578 C 20.6042652130127 27.9267406463623 20.74023628234863 27.99053001403809 20.86651611328125 28.04313087463379 L 20.87664604187012 28.04738998413086 C 20.9575138092041 28.08160018920898 21.00337409973145 28.09424209594727 21.02216339111328 28.09856224060059 M 21.02094650268555 30.10000038146973 C 20.7305965423584 30.10000038146973 20.43703651428223 30.03302001953125 20.0974063873291 29.88933944702148 C 19.91847610473633 29.81480026245117 19.74491500854492 29.73269081115723 19.57670593261719 29.6538200378418 L 19.54456520080566 29.63870048522949 C 19.11921501159668 29.43884086608887 18.67887496948242 29.23249053955078 18.18066596984863 29.10717010498047 C 17.69425582885742 28.9850902557373 17.16284561157227 28.9548397064209 16.81678581237793 28.94296073913574 L 16.79214668273926 28.94296073913574 C 16.24465560913086 28.95917129516602 15.79681587219238 29.01210021972656 15.41968536376953 29.10717010498047 C 14.91827583312988 29.23357009887695 14.47685623168945 29.44099044799805 14.04401588439941 29.64302062988281 L 14.01293563842773 29.65814971923828 C 13.84794616699219 29.73592948913574 13.67652606964111 29.81587028503418 13.50081539154053 29.88933944702148 C 13.16332626342773 30.03086090087891 12.87083625793457 30.09784126281738 12.58369541168213 30.09784126281738 C 12.09835624694824 30.09784126281738 11.66872596740723 29.90878105163574 11.06660556793213 29.64517974853516 C 10.21055603027344 29.26814079284668 9.572006225585938 28.62210083007812 8.878815650939941 27.76863098144531 C 7.93919563293457 26.6115894317627 7.099225997924805 25.21795082092285 6.383525848388672 23.6276912689209 C 6.279605865478516 23.39974975585938 6.167105674743652 23.1447811126709 6.041755676269531 22.81960105895996 C 4.01252555847168 18.27029991149902 5.051785945892334 14.00729084014893 5.174995899200439 13.54706001281738 C 5.719265937805176 10.93912029266357 7.957415580749512 9.429900169372559 8.062405586242676 9.360750198364258 C 8.084905624389648 9.346710205078125 8.105265617370605 9.33159065246582 8.122406005859375 9.317540168762207 C 8.40953540802002 9.087430000305176 8.736315727233887 8.886490821838379 9.124165534973145 8.70283031463623 C 9.941636085510254 8.313910484313965 10.86303615570068 8.100000381469727 11.7169361114502 8.100000381469727 C 11.77158546447754 8.100000381469727 11.82515621185303 8.101079940795898 11.8765754699707 8.102160453796387 C 12.91368579864502 8.128089904785156 13.81151580810547 8.472720146179199 14.85077571868896 8.871360778808594 L 15.42932605743408 9.091750144958496 C 15.69074535369873 9.188980102539062 16.28430557250977 9.393160820007324 16.28644561767578 9.39424991607666 C 16.36036491394043 9.420170783996582 16.43858528137207 9.433140754699707 16.51893615722656 9.433140754699707 L 16.73964500427246 9.433140754699707 C 16.75571632385254 9.429900169372559 16.77178573608398 9.428820610046387 16.78464508056641 9.427740097045898 C 16.78893661499023 9.427740097045898 16.81035614013672 9.427740097045898 16.81678581237793 9.428820610046387 C 16.83285522460938 9.428820610046387 16.84678649902344 9.430980682373047 16.8596363067627 9.433140754699707 L 17.07927513122559 9.433140754699707 C 17.15855598449707 9.433140754699707 17.23677635192871 9.420170783996582 17.31284523010254 9.393160820007324 C 17.31927490234375 9.391000747680664 17.91282653808594 9.187900543212891 18.16781616210938 9.092830657958984 L 18.75386619567871 8.870280265808105 C 19.79205513000488 8.470560073852539 20.68881607055664 8.127010345458984 21.72056579589844 8.102160453796387 C 21.76985549926758 8.101079940795898 21.81913566589355 8.101079940795898 21.86841583251953 8.101079940795898 C 22.74589538574219 8.101079940795898 23.64800643920898 8.308510780334473 24.47512626647949 8.70283031463623 C 24.86189651489258 8.886490821838379 25.18974494934082 9.087430000305176 25.47366523742676 9.316460609436035 C 25.49402618408203 9.33159065246582 25.51437568664551 9.347790718078613 25.53688621520996 9.360750198364258 C 25.56045532226562 9.375880241394043 27.85109519958496 10.82353019714355 28.44143486022949 13.61511993408203 C 28.51750564575195 13.89493083953857 29.61890602111816 18.19900131225586 27.53396606445312 22.87253952026367 C 27.44825553894043 23.09509086608887 27.34753608703613 23.33600044250488 27.21576499938965 23.6276912689209 C 26.49791526794434 25.21903038024902 25.65794563293457 26.6126708984375 24.71940612792969 27.76863098144531 C 24.02621650695801 28.62210083007812 23.37694549560547 29.27354049682617 22.45018577575684 29.67975044250488 C 21.89627647399902 29.92391014099121 21.49557495117188 30.10000038146973 21.02094650268555 30.10000038146973 Z"
+                stroke="none" fill="#000" />
+        </g>
+        <path d="M16.2,9.536s-1.01-4.452,1.825-6" transform="translate(-5.36 -4.868)" fill="none" stroke="#000"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+        <path d="M21.1,12.248a4.786,4.786,0,0,1,2,4" transform="translate(-6.436 -3.582)" fill="none" stroke="#000"
+            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>