From aad953bd1fac6b414bd8f62f16b059ed5a65be3f Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Mon, 2 Nov 2026 18:20:19 +0000 Subject: [PATCH 01/13] Render registered KibaIcon icons straight away and fetch the rest once per page registerKibaIcons adds bundled svgs that KibaIcon renders on its first render. Other icons are still fetched, now shared between KibaIcons (one request per url), retried once, and a stale response can't replace a newer icon. --- src/particles/kibaIcon/component.tsx | 192 ++++++++++++++++++--------- src/particles/kibaIcon/index.ts | 1 + src/particles/kibaIcon/registry.ts | 17 +++ 3 files changed, 150 insertions(+), 60 deletions(-) create mode 100644 src/particles/kibaIcon/registry.ts diff --git a/src/particles/kibaIcon/component.tsx b/src/particles/kibaIcon/component.tsx index 5502fba7..23eb3a10 100644 --- a/src/particles/kibaIcon/component.tsx +++ b/src/particles/kibaIcon/component.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { getClassName } from '@kibalabs/core'; +import { getRegisteredKibaIcon, normalizeKibaIconSvg } from './registry'; import { IComponentProps } from '../../model'; import { Icon } from '../icon'; @@ -16,75 +17,146 @@ interface IconData { shouldAddStroke: boolean; } +const getIconData = (iconId: string): IconData | null => { + if (iconId.startsWith('ion-')) { + return { + url: `https://assets-cdn.kiba.dev/ionicons/v5/${iconId.replace('ion-', '')}.svg`, + shouldAddFill: true, + shouldAddStroke: false, + }; + } + if (iconId.startsWith('mui-')) { + return { + url: `https://assets-cdn.kiba.dev/material-icons/v1/${iconId.replace('mui-', '')}.svg`, + shouldAddFill: true, + shouldAddStroke: false, + }; + } + if (iconId.startsWith('bs-')) { + return { + url: `https://assets-cdn.kiba.dev/bootstrap-icons/v1/${iconId.replace('bs-', '')}.svg`, + shouldAddFill: true, + shouldAddStroke: false, + }; + } + if (iconId.startsWith('feather-')) { + return { + url: `https://assets-cdn.kiba.dev/feather/v4/${iconId.replace('feather-', '')}.svg`, + shouldAddFill: false, + shouldAddStroke: true, + }; + } + if (iconId.startsWith('remix-')) { + return { + url: `https://assets-cdn.kiba.dev/remix-icons/v2/${iconId.replace('remix-', '')}.svg`, + shouldAddFill: true, + shouldAddStroke: false, + }; + } + return null; +}; + +// NOTE(krishan711): icons that weren't bundled at build time are fetched at most once per page and shared by every KibaIcon +const fetchedSvgContents = new Map(); +const inFlightSvgContents = new Map>(); +const FETCH_RETRY_DELAY_MILLIS = 1000; + +const fetchSvgContent = async (url: string, retryCount: number): Promise => { + try { + const response = await fetch(url); + if (response.status >= 300) { + throw new Error(`Failed to fetch icon from ${url}: ${response.status}`); + } + return normalizeKibaIconSvg(await response.text()); + } catch (error: unknown) { + if (retryCount <= 0) { + throw error; + } + await new Promise((resolve): void => { + setTimeout(resolve, FETCH_RETRY_DELAY_MILLIS); + }); + return fetchSvgContent(url, retryCount - 1); + } +}; + +const loadSvgContent = (url: string): Promise => { + const fetchedSvgContent = fetchedSvgContents.get(url); + if (fetchedSvgContent !== undefined) { + return Promise.resolve(fetchedSvgContent); + } + let inFlightSvgContent = inFlightSvgContents.get(url); + if (!inFlightSvgContent) { + inFlightSvgContent = fetchSvgContent(url, 1) + .then((svgContent: string): string => { + fetchedSvgContents.set(url, svgContent); + return svgContent; + }) + .finally((): void => { + inFlightSvgContents.delete(url); + }); + inFlightSvgContents.set(url, inFlightSvgContent); + } + return inFlightSvgContent; +}; + +const getKnownSvgContent = (iconId: string): string | undefined => { + const registeredSvgContent = getRegisteredKibaIcon(iconId); + if (registeredSvgContent !== undefined) { + return registeredSvgContent; + } + const iconData = getIconData(iconId); + return iconData ? fetchedSvgContents.get(iconData.url) : undefined; +}; + +interface ILoadedSvgContent { + iconId: string; + svgContent: string; +} + export function KibaIcon({ className = '', variant = 'default', ...props }: IKibaIconProps): React.ReactElement { - const [svgContent, setSvgContent] = React.useState(null); - const [shouldAddFill, setShouldAddFill] = React.useState(undefined); - const [shouldAddStroke, setShouldAddStroke] = React.useState(undefined); + const iconData = getIconData(props.iconId); + // NOTE(krishan711): icons bundled at build time (or already fetched) render straight away + const knownSvgContent = getKnownSvgContent(props.iconId); + const [loadedSvgContent, setLoadedSvgContent] = React.useState(null); - const getIconData = (iconId: string): IconData | null => { - if (iconId.startsWith('ion-')) { - return { - url: `https://assets-cdn.kiba.dev/ionicons/v5/${iconId.replace('ion-', '')}.svg`, - shouldAddFill: true, - shouldAddStroke: false, - }; - } - if (iconId.startsWith('mui-')) { - return { - url: `https://assets-cdn.kiba.dev/material-icons/v1/${iconId.replace('mui-', '')}.svg`, - shouldAddFill: true, - shouldAddStroke: false, - }; + React.useEffect((): (() => void) | undefined => { + if (knownSvgContent !== undefined) { + return undefined; } - if (iconId.startsWith('bs-')) { - return { - url: `https://assets-cdn.kiba.dev/bootstrap-icons/v1/${iconId.replace('bs-', '')}.svg`, - shouldAddFill: true, - shouldAddStroke: false, - }; + const iconId = props.iconId; + // NOTE(krishan711): covers icons registered (or fetched by another KibaIcon) after this rendered + const currentKnownSvgContent = getKnownSvgContent(iconId); + if (currentKnownSvgContent !== undefined) { + setLoadedSvgContent({ iconId, svgContent: currentKnownSvgContent }); + return undefined; } - if (iconId.startsWith('feather-')) { - return { - url: `https://assets-cdn.kiba.dev/feather/v4/${iconId.replace('feather-', '')}.svg`, - shouldAddFill: false, - shouldAddStroke: true, - }; + const currentIconData = getIconData(iconId); + if (!currentIconData) { + console.warn(`Failed to identify icon type from iconId: ${iconId}`); + return undefined; } - if (iconId.startsWith('remix-')) { - return { - url: `https://assets-cdn.kiba.dev/remix-icons/v2/${iconId.replace('remix-', '')}.svg`, - shouldAddFill: true, - shouldAddStroke: false, - }; - } - return null; - }; - - React.useEffect(() => { - setSvgContent(null); - const iconData = getIconData(props.iconId); - if (!iconData) { - console.warn(`Failed to identify icon type from iconId: ${props.iconId}`); - return; - } - setShouldAddFill(iconData.shouldAddFill); - setShouldAddStroke(iconData.shouldAddStroke); - fetch(iconData.url) - .then((result) => { - if (result.status >= 300) { - throw new Error(`Failed to fetch icon: ${result}`); + let isCancelled = false; + loadSvgContent(currentIconData.url) + .then((svgContent: string): void => { + if (!isCancelled) { + setLoadedSvgContent({ iconId, svgContent }); } - return result.text(); - }) - .then((resultText) => { - setSvgContent(resultText.replace(/.*<\/title>/gi, '').replace(/stroke:#000/gi, 'stroke:currentColor').replace(/fill:#000/gi, 'fill:currentColor')); }) - .catch(() => setSvgContent(null)); - }, [props.iconId]); + .catch((): void => { + if (!isCancelled) { + setLoadedSvgContent(null); + } + }); + return (): void => { + isCancelled = true; + }; + }, [props.iconId, knownSvgContent]); + + const svgContent = knownSvgContent ?? (loadedSvgContent?.iconId === props.iconId ? loadedSvgContent.svgContent : null); return ( <Icon @@ -93,8 +165,8 @@ export function KibaIcon({ variant={variant} // eslint-disable-next-line no-underscore-dangle _color={props._color} - shouldAddFill={shouldAddFill} - shouldAddStroke={shouldAddStroke} + shouldAddFill={iconData?.shouldAddFill} + shouldAddStroke={iconData?.shouldAddStroke} svgContent={svgContent || '<svg></svg>'} /> ); diff --git a/src/particles/kibaIcon/index.ts b/src/particles/kibaIcon/index.ts index bb824842..10c1cd65 100644 --- a/src/particles/kibaIcon/index.ts +++ b/src/particles/kibaIcon/index.ts @@ -1 +1,2 @@ export * from './component'; +export { registerKibaIcons } from './registry'; diff --git a/src/particles/kibaIcon/registry.ts b/src/particles/kibaIcon/registry.ts new file mode 100644 index 00000000..5ed7d608 --- /dev/null +++ b/src/particles/kibaIcon/registry.ts @@ -0,0 +1,17 @@ +// NOTE(krishan711): icons bundled into the app at build time by @kibalabs/ui-react/vite-plugin are registered +// here (svg content keyed by icon id, already normalised) so KibaIcon can render them without fetching. +const registeredIcons = new Map<string, string>(); + +export const registerKibaIcons = (icons: Record<string, string>): void => { + Object.entries(icons).forEach(([iconId, svgContent]) => { + registeredIcons.set(iconId, svgContent); + }); +}; + +export const getRegisteredKibaIcon = (iconId: string): string | undefined => { + return registeredIcons.get(iconId); +}; + +export const normalizeKibaIconSvg = (svgContent: string): string => { + return svgContent.replace(/<title>.*<\/title>/gi, '').replace(/stroke:#000/gi, 'stroke:currentColor').replace(/fill:#000/gi, 'fill:currentColor'); +}; From cd2b353fc24e45e9945c24b2a052306b4c65b9df Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:20:19 +0000 Subject: [PATCH 02/13] Add @kibalabs/ui-react/vite-plugin to bundle the used KibaIcon icons at build time The plugin finds icon ids in the app's source and ui-react's own build, reads them from the installed icon packages (now optional peer dependencies) and registers them before the app's entry runs. --- config.build.js | 2 + package-lock.json | 263 ++++++++++++++++++++++++++++-- package.json | 33 +++- src/vitePlugin/index.ts | 346 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 634 insertions(+), 10 deletions(-) create mode 100644 src/vitePlugin/index.ts diff --git a/config.build.js b/config.build.js index cdfafb78..a82eea69 100644 --- a/config.build.js +++ b/config.build.js @@ -4,6 +4,8 @@ export default (config) => { index: './src/index.ts', 'toast/index': './src/toast/index.ts', 'dropzone/index': './src/dropzone/index.ts', + // NOTE(krishan711): runs in node (inside vite) so it must not share code with the browser entries + 'vitePlugin/index': './src/vitePlugin/index.ts', }; return newConfig; }; diff --git a/package-lock.json b/package-lock.json index 5c48e711..c2657cc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,16 +15,22 @@ }, "devDependencies": { "@kibalabs/build": "0.14.2-next.16", + "@material-design-icons/svg": "0.14.15", "@storybook/addon-docs": "10.6.4", "@storybook/react-vite": "10.6.4", + "@types/node": "24.19.2", "@types/react": "19.3.0", "@types/react-dom": "19.3.0", + "bootstrap-icons": "1.13.2", + "feather-icons": "4.29.2", + "ionicons": "8.1.0", "react": "19.3.1", "react-dom": "19.3.1", "react-dropzone": "20.1.4", "react-hot-toast": "2.6.1", "react-router": "8.5.0", "remark-gfm": "4.0.1", + "remixicon": "4.9.1", "storybook": "10.6.4" }, "peerDependencies": { @@ -1390,6 +1396,13 @@ } } }, + "node_modules/@material-design-icons/svg": { + "version": "0.14.15", + "resolved": "https://registry.npmjs.org/@material-design-icons/svg/-/svg-0.14.15.tgz", + "integrity": "sha512-6nbjwGwyJnphwQUscJAYqw1Tk6+W8KvsgOAeyVgzIFXVsHfgX5XyplTUcZ29wbcTUysMMyCUi1LYpmFKA/e61g==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/@mdx-js/react": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", @@ -2483,7 +2496,7 @@ "version": "0.22.1", "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz", "integrity": "sha512-czdGJWh09Lapvcqt7Vb09KlrU2PhRJ8xQaI+AItTuD9aDJ5MAgxnS38lnys6Ll+6RJEqPiaUqTwIQhVLwFvv+w==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@rolldown/binding-android-arm-eabi": { @@ -2789,6 +2802,130 @@ } } }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -2809,6 +2946,30 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@stencil/core": { + "version": "4.45.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.45.2.tgz", + "integrity": "sha512-CNkPVZsqyNMjFMX9bEkMJsvBbQxjLw480OaoamoqiLPdQCFjJQReeOjnWX1A5ivSn3UYEIJ6MoN5VXDkaHGt8Q==", + "dev": true, + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, "node_modules/@storybook/addon-docs": { "version": "10.6.4", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.6.4.tgz", @@ -3214,11 +3375,21 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/node": { + "version": "24.19.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.19.2.tgz", + "integrity": "sha512-93d49wCWJkCyN87MxLpNN6KXPCwFw7bVUg79mGUV1OS40JGWwVCr8n61DXCSqz7CV6/VfPkb7xec7uP2M+QHWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": ">=7.24.0 <7.24.7" + } + }, "node_modules/@types/react": { "version": "19.3.0", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz", "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -3228,7 +3399,7 @@ "version": "19.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz", "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==", - "devOptional": true, + "dev": true, "license": "MIT", "peerDependencies": { "@types/react": "^19.3.0" @@ -4401,6 +4572,23 @@ "url": "https://opencollective.com/express" } }, + "node_modules/bootstrap-icons": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.2.tgz", + "integrity": "sha512-fAU1Ly3dH7hwRg+CB8EZ0Vl0fF80zgXHeUVJyfUOKzoURr+TbwISbCW5tKUoQLERaWYG2emTCybcPbD96hdD1A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.21", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz", @@ -4658,6 +4846,13 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "dev": true, + "license": "MIT" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4805,7 +5000,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz", "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/cookie-signature": { @@ -4818,6 +5013,21 @@ "node": ">=6.6.0" } }, + "node_modules/core-js": { + "version": "3.51.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.51.0.tgz", + "integrity": "sha512-7bDKx/5jm5MxzsXxc93g6Z2+4ZsuT/MddrfRmTDJNAkWsYWHU8EVNEsBiIEWnMAMCHMmRfUEjkuo3jeNBOIHRw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/cosmiconfig": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz", @@ -4908,7 +5118,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -6218,6 +6428,17 @@ } } }, + "node_modules/feather-icons": { + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.2.tgz", + "integrity": "sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "classnames": "^2.2.5", + "core-js": "^3.1.3" + } + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -6988,6 +7209,16 @@ "node": ">= 0.4" } }, + "node_modules/ionicons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5" + } + }, "node_modules/ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", @@ -9931,7 +10162,7 @@ "version": "19.3.1", "resolved": "https://registry.npmjs.org/react/-/react-19.3.1.tgz", "integrity": "sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -9986,7 +10217,7 @@ "version": "19.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.1.tgz", "integrity": "sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "scheduler": "^0.28.0" @@ -10050,7 +10281,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.5.0.tgz", "integrity": "sha512-9nEd/deifcTJIIcUaNIyQGkyXD0D6QVB9XD2O5GgHpP3xu3U5RXm87YQ8++Wn8JQWgMBM/5+PjWPM/7n7O7WHA==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@remix-run/route-pattern": "^0.22.1", @@ -10241,6 +10472,13 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remixicon": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.9.1.tgz", + "integrity": "sha512-36gLSoujkabnCFZFDyP17VNh9piuBA/rsXUb4auSJWLGsHVXtmxLj/EM5FjaEAGnk8oIAj1Azob/DZ2N+90lAQ==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -10510,7 +10748,7 @@ "version": "0.28.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz", "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/semver": { @@ -11632,6 +11870,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz", + "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==", + "dev": true, + "license": "MIT" + }, "node_modules/unicorn-magic": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.1.tgz", diff --git a/package.json b/package.json index 25e4cf3a..dbf99b51 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,11 @@ "import": "./dist/dropzone/index.js", "default": "./dist/dropzone/index.js" }, + "./vite-plugin": { + "types": "./dist/vitePlugin/index.d.ts", + "import": "./dist/vitePlugin/index.js", + "default": "./dist/vitePlugin/index.js" + }, "./styles.css": "./dist/index.css", "./styles.scss": "./src/styles/all.scss", "./toast/styles.css": "./dist/toast/index.css", @@ -57,31 +62,57 @@ }, "devDependencies": { "@kibalabs/build": "0.14.2-next.16", + "@material-design-icons/svg": "0.14.15", "@storybook/addon-docs": "10.6.4", "@storybook/react-vite": "10.6.4", + "@types/node": "24.19.2", "@types/react": "19.3.0", "@types/react-dom": "19.3.0", + "bootstrap-icons": "1.13.2", + "feather-icons": "4.29.2", + "ionicons": "8.1.0", "react": "19.3.1", "react-dom": "19.3.1", "react-dropzone": "20.1.4", "react-hot-toast": "2.6.1", "react-router": "8.5.0", "remark-gfm": "4.0.1", + "remixicon": "4.9.1", "storybook": "10.6.4" }, "peerDependencies": { + "@material-design-icons/svg": ">=0.14.0", + "bootstrap-icons": "^1.0.0", + "feather-icons": "^4.0.0", + "ionicons": ">=7.0.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-dropzone": "^20.1.4", "react-hot-toast": "^2.6.1", - "react-router": "^8.5.0" + "react-router": "^8.5.0", + "remixicon": ">=4.0.0" }, "peerDependenciesMeta": { + "@material-design-icons/svg": { + "optional": true + }, + "bootstrap-icons": { + "optional": true + }, + "feather-icons": { + "optional": true + }, + "ionicons": { + "optional": true + }, "react-dropzone": { "optional": true }, "react-hot-toast": { "optional": true + }, + "remixicon": { + "optional": true } } } diff --git a/src/vitePlugin/index.ts b/src/vitePlugin/index.ts new file mode 100644 index 00000000..c0be3fe4 --- /dev/null +++ b/src/vitePlugin/index.ts @@ -0,0 +1,346 @@ +// NOTE(krishan711): this runs in node (inside vite), so it must only import node builtins and never the browser code +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import type { HmrContext, Logger, Plugin, ResolvedConfig, ViteDevServer } from 'vite'; + +export interface IKibaIconsPluginOptions { + // NOTE(krishan711): directories (relative to the vite root) scanned for icon ids, defaults to src (or the root if there is no src) + sourceDirectories?: string[]; + // NOTE(krishan711): the module that exports registerKibaIcons, only needs changing when building ui-react itself + registrationModule?: string; +} + +interface IIconSet { + prefix: string; + name: string; + packageName: string; + iconsDirectory: string; + getIconFilePaths: (iconsDirectoryPath: string, iconName: string) => string[]; +} + +const VIRTUAL_MODULE_ID = 'virtual:kiba-icons'; +const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`; +const ICON_ID_REGEX = /(?<=['"`])(ion|mui|bs|feather|remix)-([a-z0-9]+(?:-[a-z0-9]+)*)(?=['"`])/g; +const SOURCE_FILE_EXTENSIONS = new Set(['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts', '.mdx']); +const IGNORED_DIRECTORY_NAMES = new Set(['node_modules', 'dist', 'build', 'tmp']); +const MATERIAL_ICON_STYLES = ['outlined', 'round', 'sharp', 'two-tone']; + +const remixIconFilePaths = new Map<string, Map<string, string>>(); + +const getRemixIconFilePaths = (iconsDirectoryPath: string): Map<string, string> => { + let iconFilePaths = remixIconFilePaths.get(iconsDirectoryPath); + if (!iconFilePaths) { + iconFilePaths = new Map<string, string>(); + // NOTE(krishan711): remixicon puts icons in category directories, e.g. icons/Buildings/home-line.svg + fs.readdirSync(iconsDirectoryPath, { withFileTypes: true }).filter((entry) => entry.isDirectory()).forEach((categoryEntry) => { + fs.readdirSync(path.join(iconsDirectoryPath, categoryEntry.name)).filter((fileName) => fileName.endsWith('.svg')).forEach((fileName) => { + iconFilePaths?.set(fileName.slice(0, -'.svg'.length), path.join(iconsDirectoryPath, categoryEntry.name, fileName)); + }); + }); + remixIconFilePaths.set(iconsDirectoryPath, iconFilePaths); + } + return iconFilePaths; +}; + +const ICON_SETS: IIconSet[] = [{ + prefix: 'ion', + name: 'Ionicons', + packageName: 'ionicons', + // NOTE(krishan711): the svg files are used (not the ionicons/icons data uris) because those style outlines with classes from ion-icon's css + iconsDirectory: 'dist/svg', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'mui', + name: 'Material Icons', + packageName: '@material-design-icons/svg', + iconsDirectory: '.', + // NOTE(krishan711): mui-account-box is filled/account_box.svg and mui-account-box-outlined is outlined/account_box.svg + getIconFilePaths: (iconsDirectoryPath, iconName) => { + const filePaths = [path.join(iconsDirectoryPath, 'filled', `${iconName.replace(/-/g, '_')}.svg`)]; + MATERIAL_ICON_STYLES.filter((style) => iconName.endsWith(`-${style}`)).forEach((style) => { + filePaths.push(path.join(iconsDirectoryPath, style, `${iconName.slice(0, -(style.length + 1)).replace(/-/g, '_')}.svg`)); + }); + return filePaths; + }, +}, { + prefix: 'bs', + name: 'Bootstrap Icons', + packageName: 'bootstrap-icons', + iconsDirectory: 'icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'feather', + name: 'Feather Icons', + packageName: 'feather-icons', + iconsDirectory: 'dist/icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'remix', + name: 'Remix Icons', + packageName: 'remixicon', + iconsDirectory: 'icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => { + const filePath = getRemixIconFilePaths(iconsDirectoryPath).get(iconName); + return filePath ? [filePath] : []; + }, +}]; + +const ICON_SETS_BY_PREFIX = new Map(ICON_SETS.map((iconSet) => [iconSet.prefix, iconSet])); + +// NOTE(krishan711): the same normalisation KibaIcon does to fetched icons, plus removing whitespace between tags +const normalizeSvgContent = (svgContent: string): string => { + return svgContent + .replace(/<\?xml[^>]*\?>/gi, '') + .replace(/<!--[\s\S]*?-->/g, '') + .replace(/<title>.*<\/title>/gi, '') + .replace(/stroke:#000/gi, 'stroke:currentColor') + .replace(/fill:#000/gi, 'fill:currentColor') + .replace(/>\s+</g, '><') + .trim(); +}; + +const findIconIds = (content: string): string[] => { + return [...new Set([...content.matchAll(ICON_ID_REGEX)].map((match) => match[0]))]; +}; + +const findPackageDirectory = (rootDirectory: string, packageName: string): string | null => { + let directory = path.resolve(rootDirectory); + + while (true) { + const packageDirectory = path.join(directory, 'node_modules', ...packageName.split('/')); + if (fs.existsSync(path.join(packageDirectory, 'package.json'))) { + return packageDirectory; + } + const parentDirectory = path.dirname(directory); + if (parentDirectory === directory) { + return null; + } + directory = parentDirectory; + } +}; + +const listSourceFiles = (directory: string, fileExtensions: Set<string>, ignoredDirectories: Set<string>): string[] => { + if (!fs.existsSync(directory) || ignoredDirectories.has(directory)) { + return []; + } + return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry): string[] => { + const entryPath = path.join(directory, entry.name); + if (entry.isDirectory()) { + if (entry.name.startsWith('.') || IGNORED_DIRECTORY_NAMES.has(entry.name)) { + return []; + } + return listSourceFiles(entryPath, fileExtensions, ignoredDirectories); + } + return entry.isFile() && fileExtensions.has(path.extname(entry.name)) ? [entryPath] : []; + }); +}; + +// NOTE(krishan711): ui-react's own components use KibaIcon too, so its built files are scanned along with the app's source +const getUiReactDirectories = (): { libraryDirectory: string | null; pluginDirectory: string | null } => { + try { + const pluginDirectory = path.dirname(fileURLToPath(import.meta.url)); + let directory = pluginDirectory; + while (path.dirname(directory) !== directory) { + const packageFilePath = path.join(directory, 'package.json'); + if (fs.existsSync(packageFilePath)) { + const packageData = JSON.parse(fs.readFileSync(packageFilePath, 'utf-8')); + return { libraryDirectory: packageData.name === '@kibalabs/ui-react' ? path.join(directory, 'dist') : null, pluginDirectory }; + } + directory = path.dirname(directory); + } + return { libraryDirectory: null, pluginDirectory }; + } catch { + return { libraryDirectory: null, pluginDirectory: null }; + } +}; + +export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin => { + const registrationModule = options.registrationModule ?? '@kibalabs/ui-react'; + let rootDirectory = process.cwd(); + let logger: Logger | null = null; + let sourceDirectories: string[] = []; + let libraryDirectory: string | null = null; + let pluginDirectory: string | null = null; + const fileIconIds = new Map<string, string[]>(); + const iconSvgContents = new Map<string, string | null>(); + const packageDirectories = new Map<string, string | null>(); + const warnedIconIds = new Set<string>(); + const entryModuleIds = new Set<string>(); + + const isSourceFile = (filePath: string): boolean => { + return SOURCE_FILE_EXTENSIONS.has(path.extname(filePath)) && sourceDirectories.some((directory) => filePath.startsWith(`${directory}${path.sep}`)) && !filePath.split(path.sep).includes('node_modules'); + }; + + const scanFile = (filePath: string, content?: string): boolean => { + let fileContent = content; + if (fileContent === undefined) { + try { + fileContent = fs.readFileSync(filePath, 'utf-8'); + } catch { + fileContent = ''; + } + } + const previousIconIds = fileIconIds.get(filePath) ?? []; + const iconIds = findIconIds(fileContent); + fileIconIds.set(filePath, iconIds); + return iconIds.length !== previousIconIds.length || iconIds.some((iconId) => !previousIconIds.includes(iconId)); + }; + + const scanAllFiles = (): void => { + fileIconIds.clear(); + const ignoredDirectories = new Set(pluginDirectory ? [pluginDirectory] : []); + sourceDirectories.forEach((directory) => { + listSourceFiles(directory, SOURCE_FILE_EXTENSIONS, ignoredDirectories).forEach((filePath) => scanFile(filePath)); + }); + if (libraryDirectory) { + listSourceFiles(libraryDirectory, new Set(['.js']), ignoredDirectories).forEach((filePath) => scanFile(filePath)); + } + }; + + const getPackageDirectory = (packageName: string): string | null => { + if (!packageDirectories.has(packageName)) { + packageDirectories.set(packageName, findPackageDirectory(rootDirectory, packageName)); + } + return packageDirectories.get(packageName) ?? null; + }; + + const loadIconSvgContent = (iconId: string): string | null => { + if (!iconSvgContents.has(iconId)) { + const separatorIndex = iconId.indexOf('-'); + const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, separatorIndex)); + const packageDirectory = iconSet ? getPackageDirectory(iconSet.packageName) : null; + let svgContent: string | null = null; + if (iconSet && packageDirectory) { + const iconsDirectoryPath = path.join(packageDirectory, iconSet.iconsDirectory); + const iconFilePath = fs.existsSync(iconsDirectoryPath) ? iconSet.getIconFilePaths(iconsDirectoryPath, iconId.slice(separatorIndex + 1)).find((filePath) => fs.existsSync(filePath)) : undefined; + svgContent = iconFilePath ? normalizeSvgContent(fs.readFileSync(iconFilePath, 'utf-8')) : null; + } + iconSvgContents.set(iconId, svgContent); + } + return iconSvgContents.get(iconId) ?? null; + }; + + const getIcons = (): Record<string, string> => { + const iconIds = [...new Set([...fileIconIds.values()].flat())].sort(); + const missingIconIds = new Map<IIconSet, string[]>(); + const icons: Record<string, string> = {}; + iconIds.forEach((iconId) => { + const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, iconId.indexOf('-'))); + if (!iconSet) { + return; + } + const packageDirectory = getPackageDirectory(iconSet.packageName); + if (!packageDirectory || !fs.existsSync(path.join(packageDirectory, iconSet.iconsDirectory))) { + if (!warnedIconIds.has(iconId)) { + missingIconIds.set(iconSet, [...(missingIconIds.get(iconSet) ?? []), iconId]); + warnedIconIds.add(iconId); + } + return; + } + const svgContent = loadIconSvgContent(iconId); + // NOTE(krishan711): strings that look like icon ids but aren't icons are skipped + if (svgContent) { + icons[iconId] = svgContent; + } + }); + missingIconIds.forEach((setIconIds, iconSet) => { + const packageDirectory = getPackageDirectory(iconSet.packageName); + const reason = packageDirectory ? `the installed ${iconSet.packageName} has no ${iconSet.iconsDirectory} directory` : `${iconSet.packageName} isn't installed`; + logger?.warn(`[kiba-icons] ${setIconIds.length} ${iconSet.name} id(s) are used (${setIconIds.join(', ')}) but ${reason}, so KibaIcon will fetch them at runtime.`); + }); + return icons; + }; + + // NOTE(krishan711): returns whether the file uses icons that weren't registered yet + const rescanFile = (filePath: string, content?: string): boolean => { + const previousIconIds = new Set(Object.keys(getIcons())); + if (!scanFile(filePath, content)) { + return false; + } + return Object.keys(getIcons()).some((iconId) => !previousIconIds.has(iconId)); + }; + + // NOTE(krishan711): reloads the page so new icons are registered before anything renders them + const reloadWithNewIcons = (server: ViteDevServer): void => { + const virtualModule = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID); + if (virtualModule) { + server.moduleGraph.invalidateModule(virtualModule); + } + server.ws.send({ type: 'full-reload' }); + }; + + return { + name: 'kiba-icons', + enforce: 'pre', + configResolved(config: ResolvedConfig): void { + rootDirectory = config.root; + logger = config.logger; + const directories = options.sourceDirectories ?? (fs.existsSync(path.join(config.root, 'src')) ? ['src'] : ['.']); + sourceDirectories = directories.map((directory) => path.resolve(config.root, directory)); + ({ libraryDirectory, pluginDirectory } = getUiReactDirectories()); + }, + buildStart(): void { + iconSvgContents.clear(); + packageDirectories.clear(); + warnedIconIds.clear(); + scanAllFiles(); + // NOTE(krishan711): called here so missing packages are warned about once at the start + getIcons(); + }, + async resolveId(source, importer, resolveOptions) { + if (source === VIRTUAL_MODULE_ID) { + return RESOLVED_VIRTUAL_MODULE_ID; + } + // NOTE(krishan711): non-html entries (e.g. the server entry of an ssr build) import the icons directly + if (resolveOptions.isEntry && !source.endsWith('.html')) { + const resolved = await this.resolve(source, importer, { ...resolveOptions, skipSelf: true }); + if (resolved && !resolved.external && !resolved.id.endsWith('.html')) { + entryModuleIds.add(resolved.id); + } + return resolved; + } + return null; + }, + load(id: string): string | null { + if (id !== RESOLVED_VIRTUAL_MODULE_ID) { + return null; + } + return `import { registerKibaIcons } from ${JSON.stringify(registrationModule)};\nregisterKibaIcons(${JSON.stringify(getIcons())});\n`; + }, + transform(code: string, id: string): { code: string; map: null } | null { + if (!entryModuleIds.has(id)) { + return null; + } + return { code: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};\n${code}`, map: null }; + }, + // NOTE(krishan711): pre so the build bundles the script (and it runs before the app's entry script) + transformIndexHtml: { + order: 'pre', + handler: () => [{ + tag: 'script', + attrs: { type: 'module' }, + children: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};`, + injectTo: 'head-prepend', + }], + }, + configureServer(server: ViteDevServer): void { + server.watcher.on('add', (filePath: string): void => { + if (isSourceFile(filePath) && rescanFile(filePath)) { + reloadWithNewIcons(server); + } + }); + server.watcher.on('unlink', (filePath: string): void => { + fileIconIds.delete(filePath); + }); + }, + async handleHotUpdate(context: HmrContext) { + if (!isSourceFile(context.file) || !rescanFile(context.file, await context.read())) { + return undefined; + } + reloadWithNewIcons(context.server); + return []; + }, + }; +}; From 54474d036af1a16c4358fc437af8e64bb3fb197b Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:20:19 +0000 Subject: [PATCH 03/13] Bundle the storybook's icons with the vite plugin --- .storybook/main.ts | 9 +++++++++ src/particles/kibaIcon/documentation.stories.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 713fe296..78e21f72 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,6 +1,10 @@ +import { fileURLToPath } from 'node:url'; + import type { StorybookConfig } from '@storybook/react-vite'; import remarkGfm from 'remark-gfm'; +import { kibaIconsPlugin } from '../src/vitePlugin/index.ts'; + const config: StorybookConfig = { framework: '@storybook/react-vite', stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], @@ -23,6 +27,11 @@ const config: StorybookConfig = { docs: { autodocs: true, }, + viteFinal: (config) => { + // NOTE(krishan711): the stories use the source files, so the icons are registered with the source registry + config.plugins = [...(config.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/registry.ts', import.meta.url)) })]; + return config; + }, }; export default config; diff --git a/src/particles/kibaIcon/documentation.stories.tsx b/src/particles/kibaIcon/documentation.stories.tsx index bb73c16d..6f9e6b94 100644 --- a/src/particles/kibaIcon/documentation.stories.tsx +++ b/src/particles/kibaIcon/documentation.stories.tsx @@ -66,7 +66,7 @@ export const RemixIcons: Story = { <Stack direction={Direction.Horizontal} shouldAddGutters={true}> <KibaIcon iconId='remix-home-line' /> <KibaIcon iconId='remix-settings-line' /> - <KibaIcon iconId='remix-honour' /> + <KibaIcon iconId='remix-honour-line' /> </Stack> ), }; From 5132a62ace1f2a01b5010aacf5d2f98a46960b65 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:20:19 +0000 Subject: [PATCH 04/13] Use ionicons chevrons in Carousel so ui-react's components only need ionicons --- src/molecules/carousel/component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/molecules/carousel/component.tsx b/src/molecules/carousel/component.tsx index a223dfaa..c62a3b97 100644 --- a/src/molecules/carousel/component.tsx +++ b/src/molecules/carousel/component.tsx @@ -153,7 +153,7 @@ export function Carousel({ {shouldShowButtons && ( <IconButton variant={props.indexButtonVariant} - icon={<KibaIcon iconId='mui-chevron-left' />} + icon={<KibaIcon iconId='ion-chevron-back' />} label='Previous' onClicked={onPreviousClicked} /> @@ -180,7 +180,7 @@ export function Carousel({ {shouldShowButtons && ( <IconButton variant={props.indexButtonVariant} - icon={<KibaIcon iconId='mui-chevron-right' />} + icon={<KibaIcon iconId='ion-chevron-forward' />} label='Next' onClicked={onNextClicked} /> From 4865230435390c75b60a86e6eb1c93d97063d6f0 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:22:24 +0000 Subject: [PATCH 05/13] Bundle the AppDownloadButton badges instead of loading them from assets-cdn.kiba.dev Each badge is its own lazily loaded chunk, so apps only download the ones they show. --- .../appDownloadButton/badges/androidDark.ts | 1 + .../badges/androidDarkClear.ts | 1 + .../appDownloadButton/badges/androidLight.ts | 1 + .../badges/androidLightClear.ts | 1 + .../appDownloadButton/badges/appletvDark.ts | 1 + .../badges/appletvDarkClear.ts | 1 + .../appDownloadButton/badges/appletvLight.ts | 1 + .../badges/appletvLightClear.ts | 1 + .../appDownloadButton/badges/iosDark.ts | 1 + .../appDownloadButton/badges/iosDarkClear.ts | 1 + .../appDownloadButton/badges/iosLight.ts | 1 + .../appDownloadButton/badges/iosLightClear.ts | 1 + .../appDownloadButton/badges/macDark.ts | 1 + .../appDownloadButton/badges/macDarkClear.ts | 1 + .../appDownloadButton/badges/macLight.ts | 1 + .../appDownloadButton/badges/macLightClear.ts | 1 + src/molecules/appDownloadButton/component.tsx | 63 +++++++++++++++++-- .../appDownloadButton/documentation.mdx | 6 +- 18 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 src/molecules/appDownloadButton/badges/androidDark.ts create mode 100644 src/molecules/appDownloadButton/badges/androidDarkClear.ts create mode 100644 src/molecules/appDownloadButton/badges/androidLight.ts create mode 100644 src/molecules/appDownloadButton/badges/androidLightClear.ts create mode 100644 src/molecules/appDownloadButton/badges/appletvDark.ts create mode 100644 src/molecules/appDownloadButton/badges/appletvDarkClear.ts create mode 100644 src/molecules/appDownloadButton/badges/appletvLight.ts create mode 100644 src/molecules/appDownloadButton/badges/appletvLightClear.ts create mode 100644 src/molecules/appDownloadButton/badges/iosDark.ts create mode 100644 src/molecules/appDownloadButton/badges/iosDarkClear.ts create mode 100644 src/molecules/appDownloadButton/badges/iosLight.ts create mode 100644 src/molecules/appDownloadButton/badges/iosLightClear.ts create mode 100644 src/molecules/appDownloadButton/badges/macDark.ts create mode 100644 src/molecules/appDownloadButton/badges/macDarkClear.ts create mode 100644 src/molecules/appDownloadButton/badges/macLight.ts create mode 100644 src/molecules/appDownloadButton/badges/macLightClear.ts diff --git a/src/molecules/appDownloadButton/badges/androidDark.ts b/src/molecules/appDownloadButton/badges/androidDark.ts new file mode 100644 index 00000000..1f471cf2 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/androidDark.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="179" height="58.832" rx="9.5" fill="black" stroke="#A6A6A6"/><path d="M62.9276 16.637C62.9276 17.7541 62.5968 18.6437 61.9342 19.3073C61.1817 20.0964 60.2009 20.4912 58.9952 20.4912C57.8405 20.4912 56.8588 20.0912 56.0514 19.2901C55.2426 18.4896 54.8391 17.4969 54.8391 16.3125C54.8391 15.1276 55.2426 14.1354 56.0514 13.3344C56.8588 12.5338 57.8405 12.1333 58.9952 12.1333C59.5681 12.1333 60.1166 12.2453 60.6374 12.4688C61.1582 12.6928 61.576 12.9901 61.8885 13.3625L61.1853 14.0661C60.6557 13.4333 59.9265 13.1172 58.9952 13.1172C58.153 13.1172 57.4249 13.413 56.8104 14.0052C56.1957 14.598 55.8885 15.3666 55.8885 16.3125C55.8885 17.2584 56.1957 18.027 56.8104 18.6198C57.4249 19.212 58.153 19.5078 58.9952 19.5078C59.8885 19.5078 60.6333 19.2104 61.2296 18.6146C61.6166 18.2265 61.8405 17.687 61.9004 16.9942H58.9952V16.0333H62.8718C62.9093 16.2422 62.9276 16.4428 62.9276 16.637Z" fill="white"/><path d="M62.9276 16.637H62.7943C62.7932 17.7286 62.4744 18.5765 61.84 19.213L61.8385 19.2141L61.838 19.2152C61.1094 19.977 60.1728 20.3562 58.9952 20.3578C57.8713 20.3562 56.9307 19.9729 56.1452 19.1958C55.3615 18.4172 54.9739 17.4666 54.9724 16.3125C54.9739 15.1578 55.3615 14.2078 56.1452 13.4297C56.9307 12.6521 57.8713 12.2682 58.9952 12.2666C59.5509 12.2666 60.0801 12.375 60.5848 12.5912C61.09 12.8089 61.4891 13.0942 61.7864 13.4485L61.8885 13.3625L61.7943 13.2682L61.0911 13.9724L61.1853 14.0661L61.288 13.9808C60.7338 13.3166 59.9557 12.9818 58.9952 12.9838C58.1219 12.9828 57.3536 13.2948 56.7181 13.9094C56.0765 14.5261 55.7541 15.338 55.7552 16.3125C55.7541 17.287 56.0765 18.0989 56.7181 18.7156C57.3536 19.3302 58.1219 19.6422 58.9952 19.6412C59.9181 19.6428 60.7047 19.3297 61.3239 18.7089C61.7375 18.2942 61.9719 17.7198 62.0333 17.0057L62.0457 16.8609H59.1285V16.1666H62.8719V16.0333L62.7405 16.0568C62.7771 16.2589 62.7943 16.451 62.7943 16.637H62.9276H63.061C63.061 16.4344 63.0421 16.2261 63.0031 16.0094L62.9833 15.9H58.8619V16.9942V17.1276H61.9004V16.9942L61.7676 16.9828C61.7088 17.6537 61.4952 18.1589 61.1353 18.5204C60.5624 19.0912 59.8593 19.3729 58.9952 19.3745C58.1843 19.3734 57.4963 19.0942 56.9031 18.524C56.3156 17.9557 56.0233 17.2302 56.0219 16.3125C56.0233 15.3948 56.3156 14.6693 56.9031 14.101C57.4963 13.5308 58.1843 13.2516 58.9952 13.2505C59.8968 13.2526 60.5776 13.5505 61.0833 14.1521L61.1771 14.2636L61.9828 13.4568L62.0692 13.3704L61.9905 13.277C61.6629 12.8865 61.2265 12.5765 60.69 12.3464C60.1525 12.1156 59.5853 12 58.9952 12C57.8099 11.9989 56.7869 12.4156 55.9572 13.2401C55.1244 14.063 54.7047 15.0974 54.7058 16.3125C54.7047 17.527 55.1244 18.562 55.9577 19.3854C56.7869 20.2094 57.8099 20.6256 58.9952 20.6245C60.2296 20.6256 61.2536 20.2156 62.0307 19.3994L61.9343 19.3073L62.0285 19.4016C62.7192 18.7114 63.0619 17.7792 63.061 16.637H62.9276Z" fill="white"/><path d="M69.0733 13.2953H65.4301V15.8319H68.7156V16.7932H65.4301V19.3297H69.0733V20.3125H64.4031V12.3125H69.0733V13.2953Z" fill="white"/><path d="M69.0733 13.2953V13.162H65.2968V15.9652H68.5822V16.6595L65.2968 16.6599V19.4631H68.94V20.1792H64.5364V12.4459H68.94V13.2953H69.0733V13.162V13.2953H69.2066V12.3125V12.1792H64.2697V20.4459H69.2066V19.3297V19.1964H65.5634V16.9265H68.8489V15.8319V15.6985H65.5634V13.4287H69.2066V13.2953H69.0733Z" fill="white"/><path d="M73.4083 20.3125H72.3796V13.2953H70.1452V12.3125H75.6427V13.2953H73.4083V20.3125Z" fill="white"/><path d="M73.4082 20.3125V20.1792H72.5129V13.162H70.2785V12.4459H75.5093V13.162H73.2749V20.3125H73.4082V20.1792V20.3125H73.5416V13.4287H75.776V12.3125V12.1792H70.0118V13.2953V13.4287H72.2462V20.4459H73.4082H73.5416V20.3125H73.4082Z" fill="white"/><path d="M79.6202 20.3125V12.3125H80.6478V20.3125H79.6202Z" fill="white"/><path d="M79.6203 20.3125H79.7536V12.4459H80.5145V20.1792H79.6203V20.3125H79.7536H79.6203V20.4459H80.6479H80.7812V12.1792H79.6203H79.4869V20.4459H79.6203V20.3125Z" fill="white"/><path d="M85.2077 20.3125H84.179V13.2953H81.9448V12.3125H87.4421V13.2953H85.2077V20.3125Z" fill="white"/><path d="M85.2077 20.3125V20.1792H84.3124V13.162H82.0781V12.4459H87.3088V13.162H85.0744V20.3125H85.2077V20.1792V20.3125H85.3411V13.4287H87.5755V12.3125V12.1792H81.8115V13.2953V13.4287H84.0457V20.4459H85.2077H85.3411V20.3125H85.2077Z" fill="white"/><path d="M92.7422 18.6089C93.3343 19.2084 94.0588 19.5078 94.9156 19.5078C95.7724 19.5078 96.4973 19.2084 97.0885 18.6089C97.6812 18.0094 97.9781 17.2432 97.9781 16.3125C97.9781 15.3818 97.6812 14.6156 97.0885 14.0161C96.4973 13.4166 95.7724 13.1172 94.9156 13.1172C94.0588 13.1172 93.3343 13.4166 92.7422 14.0161C92.151 14.6156 91.8542 15.3818 91.8542 16.3125C91.8542 17.2432 92.151 18.0094 92.7422 18.6089ZM97.8489 19.2786C97.0624 20.0874 96.0843 20.4912 94.9156 20.4912C93.7457 20.4912 92.7681 20.0874 91.9833 19.2786C91.1963 18.4708 90.8047 17.4818 90.8047 16.3125C90.8047 15.1432 91.1963 14.1541 91.9833 13.3464C92.7681 12.5374 93.7457 12.1333 94.9156 12.1333C96.0781 12.1333 97.0536 12.5396 97.8437 13.3516C98.6328 14.1636 99.0276 15.1505 99.0276 16.3125C99.0276 17.4818 98.6337 18.4708 97.8489 19.2786Z" fill="white"/><path d="M92.7421 18.6089L92.6473 18.7026C93.2615 19.3261 94.0276 19.6428 94.9156 19.6412C95.8031 19.6428 96.5703 19.3261 97.1833 18.7026C97.8015 18.0786 98.1124 17.2713 98.1115 16.3125C98.1124 15.3537 97.8015 14.5464 97.1833 13.9224C96.5703 13.2989 95.8031 12.9822 94.9156 12.9838C94.0276 12.9822 93.2615 13.2989 92.6473 13.9224C92.0307 14.5464 91.7192 15.3537 91.7208 16.3125C91.7192 17.2713 92.0307 18.0786 92.6473 18.7026L92.7421 18.6089L92.8369 18.5152C92.2713 17.9396 91.9885 17.2156 91.9875 16.3125C91.9885 15.4094 92.2713 14.6854 92.8369 14.1098C93.4077 13.5344 94.0895 13.2521 94.9156 13.2505C95.7411 13.2521 96.4244 13.5344 96.9937 14.1098C97.5604 14.6854 97.8432 15.4094 97.8443 16.3125C97.8432 17.2156 97.5604 17.9396 96.9937 18.5152C96.4244 19.0906 95.7411 19.3729 94.9156 19.3745C94.0895 19.3729 93.4077 19.0906 92.8369 18.5152L92.7421 18.6089ZM97.8489 19.2786L97.7536 19.186C96.9891 19.9693 96.0541 20.3562 94.9156 20.3578C93.7765 20.3562 92.8416 19.9693 92.0785 19.186L92.0749 19.1818L92.0785 19.186C91.3156 18.4 90.9391 17.4521 90.938 16.3125C90.9391 15.1729 91.3156 14.225 92.0785 13.439C92.8416 12.6557 93.7765 12.2682 94.9156 12.2666C96.0468 12.2682 96.9796 12.6573 97.7484 13.4448C98.514 14.2344 98.8927 15.1808 98.8943 16.3125C98.8927 17.4521 98.5151 18.4 97.7536 19.186L97.8489 19.2786L97.9448 19.3713C98.7531 18.5412 99.1619 17.5114 99.1609 16.3125C99.1619 15.1204 98.7515 14.0928 97.9395 13.2589C97.1271 12.4218 96.1093 11.9985 94.9156 12C93.7156 11.9985 92.6948 12.4198 91.8875 13.2537V13.2532C91.0776 14.0838 90.6703 15.1136 90.6713 16.3125C90.6703 17.5114 91.0776 18.5412 91.8875 19.3718L91.8911 19.3756L91.8875 19.3713C92.6948 20.2052 93.7156 20.6256 94.9156 20.6245C96.1151 20.6256 97.1359 20.2052 97.9448 19.3713L97.8489 19.2786Z" fill="white"/><path d="M100.47 20.3125V12.3125H101.721L105.609 18.536H105.654L105.609 16.9943V12.3125H106.638V20.3125H105.565L101.497 13.7875H101.453L101.497 15.3297V20.3125H100.47Z" fill="white"/><path d="M100.47 20.3125H100.604V12.4459H101.647L105.535 18.6693H105.654H105.791L105.743 16.9923V12.4459H106.505V20.1792H105.639L101.571 13.6541H101.453H101.316L101.364 15.3319V20.1792H100.47V20.3125H100.604H100.47V20.4459H101.497H101.631V15.3276L101.586 13.7839L101.453 13.7875V13.9208H101.497V13.7875L101.384 13.8584L105.491 20.4459H106.638H106.771V12.1792H105.609H105.476V16.9959L105.52 18.5396L105.654 18.536V18.4027H105.609V18.536L105.722 18.4652L101.795 12.1792H100.47H100.337V20.4459H100.47V20.3125Z" fill="white"/><path d="M142.284 42.9792H144.772V26.3109H142.284V42.9792ZM164.694 32.3152L161.842 39.5417H161.756L158.796 32.3152H156.116L160.555 42.4156L158.024 48.0339H160.62L167.46 32.3152H164.694ZM150.584 41.086C149.768 41.086 148.632 40.6787 148.632 39.6704C148.632 38.3839 150.048 37.8907 151.27 37.8907C152.364 37.8907 152.878 38.1265 153.543 38.4485C153.35 39.9923 152.02 41.086 150.584 41.086ZM150.884 31.9505C149.083 31.9505 147.218 32.7443 146.446 34.5027L148.654 35.4245C149.126 34.5027 150.004 34.2021 150.927 34.2021C152.214 34.2021 153.522 34.9745 153.543 36.3469V36.5183C153.092 36.2609 152.128 35.8751 150.948 35.8751C148.568 35.8751 146.144 37.1828 146.144 39.6276C146.144 41.8579 148.096 43.2948 150.283 43.2948C151.956 43.2948 152.878 42.5443 153.458 41.6652H153.543V42.9516H155.944V36.5609C155.944 33.6021 153.736 31.9505 150.884 31.9505ZM135.508 34.3443H131.97V28.6308H135.508C137.368 28.6308 138.424 30.1708 138.424 31.4875C138.424 32.7792 137.368 34.3443 135.508 34.3443ZM135.444 26.3109H129.483V42.9792H131.97V36.6641H135.444C138.202 36.6641 140.912 34.6677 140.912 31.4875C140.912 28.3073 138.202 26.3109 135.444 26.3109ZM102.936 41.0891C101.218 41.0891 99.7785 39.65 99.7785 37.6735C99.7785 35.6761 101.218 34.2152 102.936 34.2152C104.633 34.2152 105.965 35.6761 105.965 37.6735C105.965 39.65 104.633 41.0891 102.936 41.0891ZM105.793 33.2485H105.707C105.149 32.5828 104.074 31.9813 102.721 31.9813C99.8859 31.9813 97.2869 34.4729 97.2869 37.6735C97.2869 40.8527 99.8859 43.3229 102.721 43.3229C104.074 43.3229 105.149 42.7213 105.707 42.0344H105.793V42.8505C105.793 45.0204 104.633 46.1803 102.765 46.1803C101.239 46.1803 100.294 45.0844 99.9072 44.1609L97.738 45.0631C98.3609 46.5667 100.015 48.4141 102.765 48.4141C105.686 48.4141 108.156 46.6953 108.156 42.5068V32.3251H105.793V33.2485ZM109.874 42.9792H112.366V26.3104H109.874V42.9792ZM116.039 37.4803C115.975 35.2891 117.736 34.1724 119.004 34.1724C119.992 34.1724 120.83 34.6661 121.108 35.3756L116.039 37.4803ZM123.772 35.5901C123.3 34.3224 121.86 31.9813 118.918 31.9813C115.996 31.9813 113.569 34.2797 113.569 37.6521C113.569 40.8313 115.975 43.3229 119.197 43.3229C121.796 43.3229 123.3 41.7333 123.923 40.8099L121.99 39.5208C121.346 40.4661 120.464 41.0891 119.197 41.0891C117.93 41.0891 117.028 40.5089 116.447 39.3708L124.03 36.2344L123.772 35.5901ZM63.3615 33.7213V36.1271H69.1181C68.9463 37.4803 68.4952 38.4683 67.8077 39.1557C66.9703 39.9937 65.6599 40.9172 63.3615 40.9172C59.8171 40.9172 57.0463 38.0604 57.0463 34.5161C57.0463 30.9719 59.8171 28.1147 63.3615 28.1147C65.2733 28.1147 66.6692 28.8667 67.7004 29.8333L69.3973 28.1365C67.9583 26.7615 66.0463 25.7089 63.3615 25.7089C58.5067 25.7089 54.4255 29.6615 54.4255 34.5161C54.4255 39.3708 58.5067 43.3229 63.3615 43.3229C65.9823 43.3229 67.9583 42.4641 69.5047 40.8527C71.0943 39.2631 71.5885 37.0292 71.5885 35.2251C71.5885 34.6661 71.5457 34.1511 71.4593 33.7213H63.3615ZM78.1333 41.0891C76.4145 41.0891 74.9323 39.6713 74.9323 37.6521C74.9323 35.6115 76.4145 34.2152 78.1333 34.2152C79.8515 34.2152 81.3337 35.6115 81.3337 37.6521C81.3337 39.6713 79.8515 41.0891 78.1333 41.0891ZM78.1333 31.9813C74.9968 31.9813 72.4405 34.3656 72.4405 37.6521C72.4405 40.9172 74.9968 43.3229 78.1333 43.3229C81.2692 43.3229 83.8255 40.9172 83.8255 37.6521C83.8255 34.3656 81.2692 31.9813 78.1333 31.9813ZM90.5509 41.0891C88.8328 41.0891 87.3504 39.6713 87.3504 37.6521C87.3504 35.6115 88.8328 34.2152 90.5509 34.2152C92.2692 34.2152 93.7515 35.6115 93.7515 37.6521C93.7515 39.6713 92.2692 41.0891 90.5509 41.0891ZM90.5509 31.9813C87.4145 31.9813 84.8588 34.3656 84.8588 37.6521C84.8588 40.9172 87.4145 43.3229 90.5509 43.3229C93.6869 43.3229 96.2432 40.9172 96.2432 37.6521C96.2432 34.3656 93.6869 31.9813 90.5509 31.9813Z" fill="white"/><path d="M13.7161 46.1652L13.6171 46.0704C13.2291 45.6599 13 45.0224 13 44.1969V44.3912V14.9032C13 14.9005 13 14.8985 13 14.8964C13 14.8989 13 14.9011 13 14.9037V15.0985C13 14.2047 13.2671 13.5313 13.7145 13.1276L30.2343 29.6469L13.7161 46.1652ZM13 14.8948C13 14.8213 13.002 14.75 13.0057 14.6797C13.002 14.7495 13 14.8213 13 14.8948ZM13.0057 14.6765C13.0057 14.6756 13.0057 14.6745 13.0061 14.6735C13.0057 14.6745 13.0057 14.6756 13.0057 14.6765ZM13.0061 14.6672C13.0061 14.6667 13.0061 14.6661 13.0061 14.6656C13.0061 14.6661 13.0061 14.6667 13.0061 14.6672Z" fill="url(#paint0_linear)"/><path d="M35.74 35.3505L35.8656 35.2792L42.3895 31.5724C43.0115 31.2188 43.426 30.7901 43.6328 30.3365C43.4265 30.7901 43.0119 31.2193 42.3895 31.5729L35.8656 35.2797L35.74 35.3505ZM35.7416 35.1552L30.2343 29.6469L35.7411 24.1396L42.3895 27.9167C43.2337 28.3964 43.7077 29.0147 43.7869 29.6464C43.7869 29.6469 43.7869 29.648 43.7869 29.6489C43.7077 30.2792 43.2337 30.898 42.3895 31.3776L35.7416 35.1552Z" fill="url(#paint1_linear)"/><path d="M14.8938 46.7943C14.4323 46.7943 14.0296 46.6443 13.7156 46.3609L13.7162 46.3604C14.0302 46.6437 14.4334 46.7943 14.8948 46.7943C14.9348 46.7943 14.9755 46.7932 15.0167 46.7912C14.975 46.7932 14.9338 46.7943 14.8938 46.7943ZM14.8943 46.5989C14.4328 46.5994 14.0302 46.4489 13.7162 46.1656V46.1652L30.2343 29.6469L35.7416 35.1552L16.388 46.1516C15.8526 46.4552 15.3452 46.5989 14.8943 46.5989ZM13.7115 46.3573C13.6823 46.3308 13.6536 46.3026 13.6255 46.2734L13.7115 46.3573Z" fill="url(#paint2_linear)"/><path d="M30.2343 29.6469L13.7145 13.1276C14.0285 12.8448 14.4307 12.6948 14.8916 12.6948C15.3437 12.6948 15.8515 12.839 16.388 13.1432L35.7411 24.1396L30.2343 29.6469ZM35.8656 24.0152L16.388 12.9485C15.8515 12.6442 15.3437 12.5 14.8916 12.5C14.8895 12.5 14.888 12.5 14.8859 12.5C14.8885 12.5 14.8905 12.5 14.8937 12.5C15.3448 12.5 15.852 12.6437 16.388 12.948L35.8656 24.0152Z" fill="url(#paint3_linear)"/><path d="M15.0167 46.7912C15.4359 46.7672 15.9 46.6229 16.388 46.3464L35.74 35.3505L16.388 46.3464C15.9004 46.6235 15.4359 46.7672 15.0167 46.7912ZM13.7156 46.3609L13.7115 46.3573C13.7129 46.3584 13.7145 46.3599 13.7156 46.3609ZM13.6255 46.2735L13.6171 46.2652V46.2647C13.6203 46.2677 13.6228 46.2708 13.6255 46.2735Z" fill="black"/><path d="M35.74 35.3505L35.8656 35.2792L35.74 35.3505Z" fill="url(#paint4_linear)"/><path d="M14.8948 46.7943C14.4333 46.7943 14.0301 46.6437 13.7161 46.3604L13.7156 46.3609C13.7145 46.3599 13.7129 46.3584 13.7115 46.3573L13.6255 46.2734C13.6228 46.2708 13.6203 46.2677 13.6171 46.2647L13.7161 46.1656C14.0301 46.4489 14.4328 46.5994 14.8943 46.5989C15.3452 46.5989 15.8525 46.4552 16.388 46.1516L35.7416 35.1552L35.8656 35.2792L35.74 35.3505L16.388 46.3464C15.9 46.6229 15.4359 46.7672 15.0167 46.7912C14.9755 46.7932 14.9348 46.7943 14.8948 46.7943Z" fill="url(#paint5_linear)"/><path d="M13.6171 46.2652C13.2291 45.8547 13 45.2172 13 44.3917V44.3912C13 45.2172 13.2291 45.8541 13.6171 46.2647V46.2652Z" fill="black"/><path d="M13.6171 46.2646C13.2291 45.8541 13 45.2172 13 44.3912V44.1969C13 45.0224 13.2291 45.6598 13.6171 46.0704L13.7161 46.1652L13.6171 46.2646Z" fill="url(#paint6_linear)"/><path d="M13.6171 46.2646L13.7161 46.1652V46.1656L13.6171 46.2646Z" fill="url(#paint7_linear)"/><path d="M43.6328 30.3365C43.7353 30.1115 43.7869 29.8803 43.7869 29.6489C43.7869 29.6485 43.7869 29.648 43.7869 29.648C43.7869 29.8797 43.7353 30.1109 43.6328 30.3365Z" fill="black"/><path d="M35.8656 35.2792L35.7416 35.1552L42.3894 31.3776C43.2337 30.898 43.7077 30.2792 43.7869 29.6489C43.7869 29.8802 43.7353 30.1114 43.6328 30.3365C43.426 30.7901 43.0114 31.2188 42.3894 31.5724L35.8656 35.2792Z" fill="url(#paint8_linear)"/><path d="M43.7869 29.6469V29.6464C43.7864 28.9489 43.3203 28.2516 42.3895 27.7224L35.8656 24.0156H35.8651L35.8656 24.0152L42.3895 27.7218C43.3213 28.251 43.788 28.9494 43.7869 29.6469Z" fill="#404040"/><path d="M43.787 29.6464C43.7078 29.0147 43.2338 28.3964 42.3895 27.9167L35.7411 24.1396L35.8651 24.0156H35.8656L42.3895 27.7224C43.3203 28.2516 43.7864 28.9489 43.787 29.6464Z" fill="url(#paint9_linear)"/><path d="M13 14.8964C13 14.8959 13 14.8953 13 14.8948C13 14.8953 13 14.8959 13 14.8964ZM13.0057 14.6797C13.0057 14.6787 13.0057 14.6776 13.0057 14.6765C13.0057 14.6776 13.0057 14.6787 13.0057 14.6797ZM13.0061 14.6735C13.0061 14.6713 13.0061 14.6693 13.0061 14.6672C13.0061 14.6693 13.0061 14.6713 13.0061 14.6735ZM13.0061 14.6656C13.0833 13.2959 13.8281 12.5047 14.8817 12.5C14.4249 12.5027 14.0271 12.6527 13.7156 12.9333V12.9328L13.7119 12.9365C13.6791 12.9661 13.6479 12.9975 13.6171 13.0297C13.2671 13.4 13.0463 13.9547 13.0061 14.6656Z" fill="#404040"/><path d="M13 15.0985V14.9037C13 14.901 13 14.8989 13 14.8964C13 14.8958 13 14.8953 13 14.8948C13 14.8213 13.002 14.7494 13.0057 14.6797C13.0057 14.6786 13.0057 14.6776 13.0057 14.6765C13.0057 14.6756 13.0057 14.6745 13.0061 14.6734C13.0061 14.6713 13.0061 14.6693 13.0061 14.6672C13.0061 14.6666 13.0061 14.6661 13.0061 14.6656C13.0463 13.9546 13.2671 13.4 13.6171 13.0297L13.7145 13.1276C13.2671 13.5313 13 14.2046 13 15.0985ZM13.7119 12.9365L13.7156 12.9328C13.7145 12.9344 13.7129 12.9354 13.7119 12.9365Z" fill="url(#paint10_linear)"/><path d="M35.7411 24.1396L16.388 13.1432C15.8515 12.8391 15.3437 12.6948 14.8916 12.6948C14.4307 12.6948 14.0285 12.8448 13.7145 13.1276L13.6171 13.0297C13.6479 12.9975 13.6791 12.9661 13.7119 12.9365C13.7129 12.9355 13.7145 12.9344 13.7156 12.9333C14.0271 12.6527 14.4249 12.5027 14.8817 12.5C14.8828 12.5 14.8843 12.5 14.8859 12.5C14.888 12.5 14.8895 12.5 14.8916 12.5C15.3437 12.5 15.8515 12.6443 16.388 12.9485L35.8656 24.0152L35.8651 24.0156L35.7411 24.1396Z" fill="url(#paint11_linear)"/><defs><linearGradient id="paint0_linear" x1="28.7695" y1="14.5921" x2="6.3928" y2="36.9688" gradientUnits="userSpaceOnUse"><stop stop-color="#00A0FF"/><stop offset="0.00657445" stop-color="#00A1FF"/><stop offset="0.2601" stop-color="#00BEFF"/><stop offset="0.5122" stop-color="#00D2FF"/><stop offset="0.7604" stop-color="#00DFFF"/><stop offset="1" stop-color="#00E3FF"/></linearGradient><linearGradient id="paint1_linear" x1="44.8156" y1="29.6477" x2="12.5529" y2="29.6477" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE000"/><stop offset="0.4087" stop-color="#FFBD00"/><stop offset="0.7754" stop-color="#FFA500"/><stop offset="1" stop-color="#FF9C00"/></linearGradient><linearGradient id="paint2_linear" x1="32.8058" y1="32.7073" x2="2.46135" y2="63.0517" gradientUnits="userSpaceOnUse"><stop stop-color="#FF3A44"/><stop offset="1" stop-color="#C31162"/></linearGradient><linearGradient id="paint3_linear" x1="9.4328" y1="3.21411" x2="22.9828" y2="16.7641" gradientUnits="userSpaceOnUse"><stop stop-color="#32A071"/><stop offset="0.0685" stop-color="#2DA771"/><stop offset="0.4762" stop-color="#15CF74"/><stop offset="0.8009" stop-color="#06E775"/><stop offset="1" stop-color="#00F076"/></linearGradient><linearGradient id="paint4_linear" x1="44.8155" y1="29.6477" x2="12.5533" y2="29.6477" gradientUnits="userSpaceOnUse"><stop stop-color="#CCB300"/><stop offset="0.4087" stop-color="#CC9700"/><stop offset="0.7754" stop-color="#CC8400"/><stop offset="1" stop-color="#CC7D00"/></linearGradient><linearGradient id="paint5_linear" x1="32.8057" y1="32.7073" x2="2.46133" y2="63.0517" gradientUnits="userSpaceOnUse"><stop stop-color="#CC2E36"/><stop offset="1" stop-color="#9C0E4E"/></linearGradient><linearGradient id="paint6_linear" x1="28.7695" y1="14.5921" x2="6.39279" y2="36.9688" gradientUnits="userSpaceOnUse"><stop stop-color="#008DE0"/><stop offset="0.00657445" stop-color="#008DE0"/><stop offset="0.2601" stop-color="#00A7E0"/><stop offset="0.5122" stop-color="#00B8E0"/><stop offset="0.7604" stop-color="#00C4E0"/><stop offset="1" stop-color="#00C7E0"/></linearGradient><linearGradient id="paint7_linear" x1="32.806" y1="32.7073" x2="2.46154" y2="63.0521" gradientUnits="userSpaceOnUse"><stop stop-color="#E0333C"/><stop offset="1" stop-color="#AB0F56"/></linearGradient><linearGradient id="paint8_linear" x1="44.8156" y1="29.6477" x2="12.5529" y2="29.6477" gradientUnits="userSpaceOnUse"><stop stop-color="#E0C500"/><stop offset="0.4087" stop-color="#E0A600"/><stop offset="0.7754" stop-color="#E09100"/><stop offset="1" stop-color="#E08900"/></linearGradient><linearGradient id="paint9_linear" x1="44.8156" y1="29.6477" x2="12.553" y2="29.6477" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE840"/><stop offset="0.4087" stop-color="#FFCE40"/><stop offset="0.7754" stop-color="#FFBC40"/><stop offset="1" stop-color="#FFB540"/></linearGradient><linearGradient id="paint10_linear" x1="28.7694" y1="14.5921" x2="6.3928" y2="36.9687" gradientUnits="userSpaceOnUse"><stop stop-color="#40B8FF"/><stop offset="0.00657445" stop-color="#40B9FF"/><stop offset="0.2601" stop-color="#40CEFF"/><stop offset="0.5122" stop-color="#40DDFF"/><stop offset="0.7604" stop-color="#40E7FF"/><stop offset="1" stop-color="#40EAFF"/></linearGradient><linearGradient id="paint11_linear" x1="9.4328" y1="3.21412" x2="22.9828" y2="16.7641" gradientUnits="userSpaceOnUse"><stop stop-color="#65B895"/><stop offset="0.0685" stop-color="#62BD95"/><stop offset="0.4762" stop-color="#50DB97"/><stop offset="0.8009" stop-color="#44ED98"/><stop offset="1" stop-color="#40F498"/></linearGradient></defs></svg>'; diff --git a/src/molecules/appDownloadButton/badges/androidDarkClear.ts b/src/molecules/appDownloadButton/badges/androidDarkClear.ts new file mode 100644 index 00000000..f9c4d7db --- /dev/null +++ b/src/molecules/appDownloadButton/badges/androidDarkClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0H170.505C176.028 0 180.505 4.47715 180.505 10V49.832C180.505 55.3549 176.028 59.832 170.505 59.832H10C4.47715 59.832 0 55.3549 0 49.832V10ZM61.7522 17.1276C61.6767 17.727 61.4688 18.1854 61.1353 18.5204C60.5624 19.0912 59.8593 19.3729 58.9952 19.3745C58.1843 19.3735 57.4963 19.0943 56.9031 18.524C56.3156 17.9557 56.0233 17.2303 56.0219 16.3125C56.0233 15.3948 56.3156 14.6693 56.9031 14.1011C57.4963 13.5308 58.1843 13.2516 58.9952 13.2505C59.8968 13.2527 60.5776 13.5505 61.0833 14.1521L61.1771 14.2636L61.9828 13.4568L62.0692 13.3704L61.9905 13.2771C61.6629 12.8865 61.2265 12.5765 60.69 12.3464C60.1525 12.1156 59.5853 12 58.9952 12C57.8099 11.9989 56.7869 12.4156 55.9572 13.2401C55.1244 14.0631 54.7047 15.0975 54.7057 16.3125C54.7047 17.5271 55.1244 18.562 55.9577 19.3855C56.7869 20.2095 57.8099 20.6256 58.9952 20.6245C60.2296 20.6256 61.2536 20.2156 62.0307 19.3995C62.7199 18.7095 63.0619 17.778 63.0609 16.6371C63.0609 16.4344 63.0421 16.2261 63.0031 16.0095L62.9833 15.9H58.8619V16.9943V17.1276H61.7522ZM69.2067 12.3125V13.2953V13.4287H65.5635V15.6985H68.8489V15.8319V16.9265H65.5635V19.1964H69.2067V19.3297V20.4459H64.2697V12.1792H69.2067V12.3125ZM73.5416 13.4287V20.3125V20.4459H73.4083H72.2463V13.4287H70.0119V13.2953V12.1792H75.776V12.3125V13.4287H73.5416ZM80.6479 20.4459H79.6203H79.4869V12.1792H79.6203H80.7812V20.4459H80.6479ZM85.341 13.4287V20.3125V20.4459H85.2077H84.0457V13.4287H81.8115V13.2953V12.1792H87.5755V12.3125V13.4287H85.341ZM91.9875 16.3125C91.9885 17.2156 92.2713 17.9396 92.8369 18.5152C93.4077 19.0907 94.0895 19.3729 94.9156 19.3745C95.7411 19.3729 96.4244 19.0907 96.9937 18.5152C97.5604 17.9396 97.8432 17.2156 97.8443 16.3125C97.8432 15.4095 97.5604 14.6855 96.9937 14.1099C96.4244 13.5344 95.7411 13.2521 94.9156 13.2505C94.0895 13.2521 93.4077 13.5344 92.8369 14.1099C92.2713 14.6855 91.9885 15.4095 91.9875 16.3125ZM99.1609 16.3125C99.1619 17.5115 98.7531 18.5412 97.9448 19.3713C97.1359 20.2052 96.1151 20.6256 94.9156 20.6245C93.7156 20.6256 92.6948 20.2052 91.8875 19.3713L91.8911 19.3756L91.8875 19.3719C91.0776 18.5412 90.6703 17.5115 90.6713 16.3125C90.6703 15.1136 91.0776 14.0839 91.8875 13.2532V13.2537C92.6948 12.4199 93.7156 11.9985 94.9156 12C96.1093 11.9985 97.1271 12.4219 97.9395 13.2589C98.7515 14.0928 99.1619 15.1204 99.1609 16.3125ZM101.598 14.2018L101.631 15.3276V20.4459H101.497H100.47H100.337V12.1792H100.47H101.795L105.508 18.1225L105.476 16.9959V12.1792H105.609H106.771V20.4459H106.638H105.491L101.598 14.2018ZM142.284 42.9792H144.772V26.3109H142.284V42.9792ZM164.694 32.3152L161.842 39.5417H161.756L158.796 32.3152H156.116L160.555 42.4156L158.024 48.0339H160.62L167.46 32.3152H164.694ZM150.584 41.086C149.768 41.086 148.632 40.6787 148.632 39.6704C148.632 38.3839 150.048 37.8907 151.27 37.8907C152.364 37.8907 152.878 38.1265 153.543 38.4485C153.35 39.9923 152.02 41.086 150.584 41.086ZM150.884 31.9505C149.083 31.9505 147.218 32.7443 146.446 34.5027L148.654 35.4245C149.126 34.5027 150.004 34.2021 150.927 34.2021C152.214 34.2021 153.522 34.9745 153.543 36.3469V36.5183C153.092 36.2609 152.128 35.8751 150.948 35.8751C148.568 35.8751 146.144 37.1828 146.144 39.6276C146.144 41.8579 148.096 43.2948 150.283 43.2948C151.956 43.2948 152.878 42.5443 153.458 41.6652H153.543V42.9516H155.944V36.5609C155.944 33.6021 153.736 31.9505 150.884 31.9505ZM135.508 34.3443H131.97V28.6308H135.508C137.368 28.6308 138.424 30.1708 138.424 31.4875C138.424 32.7792 137.368 34.3443 135.508 34.3443ZM135.444 26.3109H129.483V42.9792H131.97V36.6641H135.444C138.202 36.6641 140.912 34.6677 140.912 31.4875C140.912 28.3073 138.202 26.3109 135.444 26.3109ZM102.936 41.0891C101.218 41.0891 99.7785 39.65 99.7785 37.6735C99.7785 35.6761 101.218 34.2152 102.936 34.2152C104.633 34.2152 105.965 35.6761 105.965 37.6735C105.965 39.65 104.633 41.0891 102.936 41.0891ZM105.793 33.2485H105.707C105.149 32.5828 104.074 31.9813 102.721 31.9813C99.8859 31.9813 97.2869 34.4729 97.2869 37.6735C97.2869 40.8527 99.8859 43.3229 102.721 43.3229C104.074 43.3229 105.149 42.7213 105.707 42.0344H105.793V42.8505C105.793 45.0204 104.633 46.1803 102.765 46.1803C101.239 46.1803 100.294 45.0844 99.9072 44.1609L97.738 45.0631C98.3609 46.5667 100.015 48.4141 102.765 48.4141C105.686 48.4141 108.156 46.6953 108.156 42.5068V32.3251H105.793V33.2485ZM109.874 42.9792H112.366V26.3104H109.874V42.9792ZM116.039 37.4803C115.975 35.2891 117.736 34.1724 119.004 34.1724C119.992 34.1724 120.83 34.6661 121.108 35.3756L116.039 37.4803ZM123.772 35.5901C123.3 34.3224 121.86 31.9813 118.918 31.9813C115.996 31.9813 113.569 34.2797 113.569 37.6521C113.569 40.8313 115.975 43.3229 119.197 43.3229C121.796 43.3229 123.3 41.7333 123.923 40.8099L121.99 39.5208C121.346 40.4661 120.464 41.0891 119.197 41.0891C117.93 41.0891 117.028 40.5089 116.447 39.3708L124.03 36.2344L123.772 35.5901ZM63.3615 33.7213V36.1271H69.1181C68.9463 37.4803 68.4952 38.4683 67.8077 39.1557C66.9703 39.9937 65.6599 40.9172 63.3615 40.9172C59.8171 40.9172 57.0463 38.0604 57.0463 34.5161C57.0463 30.9719 59.8171 28.1147 63.3615 28.1147C65.2733 28.1147 66.6692 28.8667 67.7004 29.8333L69.3973 28.1365C67.9583 26.7615 66.0463 25.7089 63.3615 25.7089C58.5067 25.7089 54.4255 29.6615 54.4255 34.5161C54.4255 39.3708 58.5067 43.3229 63.3615 43.3229C65.9823 43.3229 67.9583 42.4641 69.5047 40.8527C71.0943 39.2631 71.5885 37.0292 71.5885 35.2251C71.5885 34.6661 71.5457 34.1511 71.4593 33.7213H63.3615ZM78.1333 41.0891C76.4145 41.0891 74.9323 39.6713 74.9323 37.6521C74.9323 35.6115 76.4145 34.2152 78.1333 34.2152C79.8515 34.2152 81.3337 35.6115 81.3337 37.6521C81.3337 39.6713 79.8515 41.0891 78.1333 41.0891ZM78.1333 31.9813C74.9968 31.9813 72.4405 34.3656 72.4405 37.6521C72.4405 40.9172 74.9968 43.3229 78.1333 43.3229C81.2692 43.3229 83.8255 40.9172 83.8255 37.6521C83.8255 34.3656 81.2692 31.9813 78.1333 31.9813ZM90.5509 41.0891C88.8328 41.0891 87.3504 39.6713 87.3504 37.6521C87.3504 35.6115 88.8328 34.2152 90.5509 34.2152C92.2692 34.2152 93.7515 35.6115 93.7515 37.6521C93.7515 39.6713 92.2692 41.0891 90.5509 41.0891ZM90.5509 31.9813C87.4145 31.9813 84.8588 34.3656 84.8588 37.6521C84.8588 40.9172 87.4145 43.3229 90.5509 43.3229C93.6869 43.3229 96.2432 40.9172 96.2432 37.6521C96.2432 34.3656 93.6869 31.9813 90.5509 31.9813ZM42.3895 27.7224L35.8656 24.0152L16.388 12.9485C15.852 12.6442 15.3448 12.5 14.8937 12.5H14.8916H14.8859H14.8817C14.4249 12.5026 14.0271 12.6521 13.7156 12.9328L13.715 12.9335C13.7143 12.9344 13.7134 12.9351 13.7127 12.9358L13.7119 12.9365C13.6791 12.9661 13.6479 12.9974 13.6171 13.0297C13.2671 13.4 13.0463 13.9546 13.0061 14.6656V14.6672V14.6734C13.0057 14.6745 13.0057 14.6756 13.0057 14.6765V14.6765V14.6797C13.002 14.75 13 14.8213 13 14.8948V14.8964V14.9032V15.0985V44.1969V44.3912C13 45.2172 13.2291 45.8541 13.6171 46.2646C13.6203 46.2677 13.6228 46.2708 13.6255 46.2734C13.6536 46.3026 13.6823 46.3308 13.7115 46.3573C13.713 46.3584 13.7146 46.3598 13.7156 46.3609C13.7549 46.3963 13.7955 46.4297 13.8375 46.4609C14.1312 46.6794 14.49 46.7942 14.8938 46.7942H14.8943H14.8948C14.9348 46.7942 14.9755 46.7932 15.0167 46.7912C15.4359 46.7672 15.9 46.6229 16.388 46.3464L35.8656 35.2792L42.3895 31.5724C43.0115 31.2188 43.426 30.7901 43.6328 30.3365C43.7353 30.1114 43.7869 29.8802 43.7869 29.6489V29.6464C43.7864 28.9489 43.3203 28.2516 42.3895 27.7224Z" fill="black"/><line x1="13.5414" y1="12.9586" x2="35.886" y2="35.3032" stroke="black" stroke-width="0.4"/><line x1="13.5586" y1="46.2586" x2="35.9032" y2="23.914" stroke="black" stroke-width="0.4"/></g><defs><clipPath id="clip0"><rect width="180" height="60" fill="white"/></clipPath></defs></svg>'; diff --git a/src/molecules/appDownloadButton/badges/androidLight.ts b/src/molecules/appDownloadButton/badges/androidLight.ts new file mode 100644 index 00000000..301a5382 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/androidLight.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><rect x="0.5" y="0.5" width="178.496" height="58.832" rx="9.5" fill="white" stroke="black"/><path d="M62.7878 16.6241C62.7878 17.738 62.4579 18.6251 61.7973 19.2869C61.0468 20.0737 60.0688 20.4674 58.8664 20.4674C57.715 20.4674 56.736 20.0686 55.9309 19.2697C55.1244 18.4714 54.7219 17.4816 54.7219 16.3005C54.7219 15.1189 55.1244 14.1295 55.9309 13.3307C56.736 12.5324 57.715 12.133 58.8664 12.133C59.4377 12.133 59.9847 12.2447 60.5041 12.4675C61.0234 12.6909 61.44 12.9874 61.7517 13.3587L61.0504 14.0604C60.5223 13.4293 59.7951 13.1141 58.8664 13.1141C58.0266 13.1141 57.3005 13.4091 56.6877 13.9996C56.0748 14.5907 55.7684 15.3573 55.7684 16.3005C55.7684 17.2437 56.0748 18.0102 56.6877 18.6013C57.3005 19.1918 58.0266 19.4869 58.8664 19.4869C59.7572 19.4869 60.5 19.1902 61.0946 18.5962C61.4805 18.2091 61.7038 17.6712 61.7635 16.9803H58.8664V16.0221H62.7322C62.7696 16.2304 62.7878 16.4304 62.7878 16.6241Z" fill="black"/><path d="M62.7878 16.6241H62.6549C62.6538 17.7126 62.3359 18.5581 61.7033 19.1929L61.7018 19.1939L61.7013 19.195C60.9747 19.9547 60.0407 20.3329 58.8664 20.3345C57.7457 20.3329 56.8077 19.9506 56.0244 19.1757C55.2429 18.3992 54.8564 17.4514 54.8549 16.3005C54.8564 15.149 55.2429 14.2017 56.0244 13.4257C56.8077 12.6503 57.7457 12.2675 58.8664 12.2659C59.4206 12.2659 59.9483 12.374 60.4516 12.5896C60.9554 12.8067 61.3533 13.0912 61.6498 13.4445L61.7517 13.3587L61.6577 13.2647L60.9564 13.9669L61.0504 14.0604L61.1528 13.9753C60.6001 13.313 59.8243 12.9791 58.8664 12.9811C57.9956 12.9801 57.2294 13.2912 56.5958 13.9041C55.9559 14.5191 55.6345 15.3287 55.6355 16.3005C55.6345 17.2723 55.9559 18.0819 56.5958 18.6968C57.2294 19.3098 57.9956 19.6209 58.8664 19.6198C59.7868 19.6214 60.5711 19.3092 61.1886 18.6902C61.601 18.2767 61.8348 17.7039 61.8961 16.9917L61.9084 16.8473H58.9994V16.155H62.7323V16.0221L62.6013 16.0455C62.6377 16.247 62.6549 16.4386 62.6549 16.6241H62.7878H62.9208C62.9208 16.422 62.9021 16.2143 62.8631 15.9983L62.8434 15.8891H58.7335V16.9803V17.1133H61.7635V16.9803L61.6311 16.9689C61.5725 17.6379 61.3594 18.1417 61.0006 18.5022C60.4293 19.0714 59.7282 19.3523 58.8664 19.3539C58.0578 19.3528 57.3717 19.0744 56.7802 18.5057C56.1943 17.9391 55.9029 17.2156 55.9014 16.3005C55.9029 15.3853 56.1943 14.6619 56.7802 14.0952C57.3717 13.5265 58.0578 13.2481 58.8664 13.247C59.7655 13.2492 60.4444 13.5462 60.9487 14.1461L61.0422 14.2573L61.8457 13.4527L61.9318 13.3666L61.8534 13.2735C61.5267 12.8841 61.0915 12.5749 60.5565 12.3454C60.0205 12.1153 59.4549 12 58.8664 12C57.6844 11.9989 56.6644 12.4144 55.837 13.2367C55.0065 14.0573 54.5879 15.0888 54.589 16.3005C54.5879 17.5116 55.0065 18.5436 55.8375 19.3648C56.6644 20.1865 57.6844 20.6015 58.8664 20.6004C60.0974 20.6015 61.1185 20.1926 61.8934 19.3788L61.7973 19.2869L61.8913 19.3809C62.58 18.6927 62.9217 17.763 62.9208 16.6241H62.7878Z" fill="black"/><path d="M68.9163 13.2917H65.2833V15.8212H68.5596V16.7798H65.2833V19.3092H68.9163V20.2893H64.2592V12.3117H68.9163V13.2917Z" fill="black"/><path d="M68.9163 13.2917V13.1587H65.1504V15.9541H68.4267V16.6464L65.1504 16.6468V19.4422H68.7834V20.1563H64.3921V12.4446H68.7834V13.2917H68.9163V13.1587V13.2917H69.0493V12.3116V12.1787H64.1262V20.4222H69.0493V19.3092V19.1762H65.4163V16.9127H68.6926V15.8211V15.6882H65.4163V13.4247H69.0493V13.2917H68.9163Z" fill="black"/><path d="M73.2392 20.2893H72.2134V13.2917H69.9852V12.3117H75.4673V13.2917H73.2392V20.2893Z" fill="black"/><path d="M73.2391 20.2893V20.1563H72.3463V13.1587H70.1182V12.4446H75.3343V13.1587H73.1062V20.2893H73.2391V20.1563V20.2893H73.3721V13.4247H75.6002V12.3116V12.1787H69.8522V13.2917V13.4247H72.0804V20.4222H73.2391H73.3721V20.2893H73.2391Z" fill="black"/><path d="M79.4338 20.2893V12.3117H80.4585V20.2893H79.4338Z" fill="black"/><path d="M79.4337 20.2893H79.5667V12.4446H80.3255V20.1563H79.4337V20.2893H79.5667H79.4337V20.4222H80.4585H80.5914V12.1787H79.4337H79.3008V20.4222H79.4337V20.2893Z" fill="black"/><path d="M85.0056 20.2893H83.9798V13.2917H81.7518V12.3117H87.2337V13.2917H85.0056V20.2893Z" fill="black"/><path d="M85.0056 20.2893V20.1563H84.1128V13.1587H81.8848V12.4446H87.1008V13.1587H84.8726V20.2893H85.0056V20.1563V20.2893H85.1386V13.4247H87.3667V12.3116V12.1787H81.6188V13.2917V13.4247H83.8469V20.4222H85.0056H85.1386V20.2893H85.0056Z" fill="black"/><path d="M92.5189 18.5904C93.1094 19.1882 93.8319 19.4869 94.6863 19.4869C95.5407 19.4869 96.2636 19.1882 96.8531 18.5904C97.4441 17.9927 97.7402 17.2285 97.7402 16.3005C97.7402 15.3724 97.4441 14.6083 96.8531 14.0105C96.2636 13.4127 95.5407 13.1141 94.6863 13.1141C93.8319 13.1141 93.1094 13.4127 92.5189 14.0105C91.9294 14.6083 91.6334 15.3724 91.6334 16.3005C91.6334 17.2285 91.9294 17.9927 92.5189 18.5904ZM97.6114 19.2583C96.8271 20.0648 95.8517 20.4674 94.6863 20.4674C93.5197 20.4674 92.5448 20.0648 91.7622 19.2583C90.9774 18.4527 90.5869 17.4665 90.5869 16.3005C90.5869 15.1344 90.9774 14.1481 91.7622 13.3426C92.5448 12.536 93.5197 12.133 94.6863 12.133C95.8455 12.133 96.8183 12.5381 97.6062 13.3478C98.3931 14.1576 98.7868 15.1417 98.7868 16.3005C98.7868 17.4665 98.394 18.4527 97.6114 19.2583Z" fill="black"/><path d="M92.5189 18.5904L92.4243 18.6839C93.0368 19.3056 93.8008 19.6214 94.6863 19.6198C95.5712 19.6214 96.3363 19.3056 96.9476 18.6839C97.5641 18.0617 97.8741 17.2566 97.8732 16.3005C97.8741 15.3444 97.5641 14.5393 96.9476 13.917C96.3363 13.2953 95.5712 12.9795 94.6863 12.9811C93.8008 12.9795 93.0368 13.2953 92.4243 13.917C91.8094 14.5393 91.4988 15.3444 91.5004 16.3005C91.4988 17.2566 91.8094 18.0617 92.4243 18.6839L92.5189 18.5904L92.6134 18.497C92.0494 17.923 91.7674 17.201 91.7663 16.3005C91.7674 15.3999 92.0494 14.678 92.6134 14.104C93.1826 13.5301 93.8624 13.2486 94.6863 13.247C95.5094 13.2486 96.1908 13.5301 96.7586 14.104C97.3237 14.678 97.6057 15.3999 97.6067 16.3005C97.6057 17.201 97.3237 17.923 96.7586 18.497C96.1908 19.0708 95.5094 19.3523 94.6863 19.3539C93.8624 19.3523 93.1826 19.0708 92.6134 18.497L92.5189 18.5904ZM97.6114 19.2583L97.5163 19.1659C96.7539 19.947 95.8216 20.3329 94.6863 20.3345C93.5504 20.3329 92.6181 19.947 91.8571 19.1659L91.8536 19.1618L91.8571 19.1659C91.0963 18.3821 90.7209 17.4369 90.7198 16.3005C90.7209 15.1641 91.0963 14.2189 91.8571 13.4351C92.6181 12.6539 93.5504 12.2675 94.6863 12.2659C95.8143 12.2675 96.7445 12.6555 97.5111 13.4408C98.2746 14.2282 98.6522 15.1719 98.6538 16.3005C98.6522 17.4369 98.2757 18.3821 97.5163 19.1659L97.6114 19.2583L97.707 19.3507C98.513 18.5229 98.9206 17.496 98.9197 16.3005C98.9206 15.1117 98.5114 14.087 97.7017 13.2554C96.8915 12.4207 95.8767 11.9985 94.6863 12C93.4896 11.9985 92.4717 12.4187 91.6666 13.2502V13.2497C90.859 14.078 90.4528 15.1049 90.4539 16.3005C90.4528 17.496 90.859 18.5229 91.6666 19.3512L91.6702 19.355L91.6666 19.3507C92.4717 20.1822 93.4896 20.6015 94.6863 20.6004C95.8824 20.6015 96.9003 20.1822 97.707 19.3507L97.6114 19.2583Z" fill="black"/><path d="M100.225 20.2893V12.3117H101.473L105.35 18.5177H105.394L105.35 16.9803V12.3117H106.376V20.2893H105.306L101.25 13.7825H101.205L101.25 15.3204V20.2893H100.225Z" fill="black"/><path d="M100.225 20.2893H100.358V12.4446H101.399L105.276 18.6507H105.394H105.531L105.483 16.9783V12.4446H106.243V20.1563H105.38L101.323 13.6495H101.205H101.069L101.117 15.3225V20.1563H100.225V20.2893H100.358H100.225V20.4222H101.25H101.383V15.3183L101.338 13.7789L101.205 13.7825V13.9154H101.25V13.7825L101.137 13.8532L105.232 20.4222H106.376H106.509V12.1787H105.35H105.217V16.9819L105.261 18.5213L105.394 18.5177V18.3847H105.35V18.5177L105.463 18.4471L101.547 12.1787H100.225H100.092V20.4222H100.225V20.2893Z" fill="black"/><path d="M141.922 42.8925H144.404V26.2709H141.922V42.8925ZM164.269 32.2583L161.425 39.4646H161.34L158.388 32.2583H155.716L160.142 42.3305L157.618 47.933H160.207L167.028 32.2583H164.269ZM150.199 41.0046C149.386 41.0046 148.253 40.5984 148.253 39.5929C148.253 38.31 149.665 37.8182 150.883 37.8182C151.974 37.8182 152.486 38.0534 153.15 38.3745C152.957 39.9139 151.631 41.0046 150.199 41.0046ZM150.498 31.8947C148.702 31.8947 146.842 32.6862 146.072 34.4397L148.274 35.359C148.745 34.4397 149.621 34.14 150.541 34.14C151.824 34.14 153.128 34.9102 153.15 36.2788V36.4496C152.7 36.193 151.739 35.8082 150.562 35.8082C148.189 35.8082 145.772 37.1123 145.772 39.5503C145.772 41.7743 147.718 43.2072 149.899 43.2072C151.567 43.2072 152.486 42.4588 153.065 41.5822H153.15V42.865H155.544V36.4922C155.544 33.5417 153.342 31.8947 150.498 31.8947ZM135.165 34.2817H131.637V28.5842H135.165C137.02 28.5842 138.073 30.1199 138.073 31.4329C138.073 32.721 137.02 34.2817 135.165 34.2817ZM135.102 26.2709H129.157V42.8925H131.637V36.5951H135.102C137.851 36.5951 140.554 34.6043 140.554 31.4329C140.554 28.2617 137.851 26.2709 135.102 26.2709ZM102.685 41.0076C100.971 41.0076 99.5356 39.5726 99.5356 37.6016C99.5356 35.6099 100.971 34.153 102.685 34.153C104.377 34.153 105.705 35.6099 105.705 37.6016C105.705 39.5726 104.377 41.0076 102.685 41.0076ZM105.533 33.1891H105.448C104.891 32.5252 103.819 31.9254 102.47 31.9254C99.6426 31.9254 97.051 34.41 97.051 37.6016C97.051 40.7719 99.6426 43.2352 102.47 43.2352C103.819 43.2352 104.891 42.6353 105.448 41.9503H105.533V42.7642C105.533 44.928 104.377 46.0846 102.513 46.0846C100.992 46.0846 100.05 44.9918 99.6639 44.0709L97.5008 44.9705C98.122 46.4699 99.7715 48.3122 102.513 48.3122C105.426 48.3122 107.89 46.5982 107.89 42.4214V32.2682H105.533V33.1891ZM109.603 42.8925H112.088V26.2703H109.603V42.8925ZM115.751 37.4089C115.687 35.2239 117.443 34.1103 118.707 34.1103C119.693 34.1103 120.528 34.6027 120.806 35.3102L115.751 37.4089ZM123.462 35.5241C122.992 34.2599 121.556 31.9254 118.621 31.9254C115.708 31.9254 113.288 34.2174 113.288 37.5803C113.288 40.7506 115.687 43.2352 118.9 43.2352C121.492 43.2352 122.992 41.6501 123.613 40.7292L121.685 39.4438C121.042 40.3864 120.164 41.0076 118.9 41.0076C117.636 41.0076 116.736 40.4291 116.158 39.2942L123.719 36.1666L123.462 35.5241ZM63.2205 33.6605V36.0595H68.961C68.7897 37.4089 68.3399 38.3942 67.6543 39.0797C66.8192 39.9154 65.5125 40.8363 63.2205 40.8363C59.686 40.8363 56.923 37.9874 56.923 34.4531C56.923 30.9188 59.686 28.0696 63.2205 28.0696C65.127 28.0696 66.519 28.8195 67.5473 29.7834L69.2395 28.0914C67.8044 26.7201 65.8978 25.6706 63.2205 25.6706C58.3793 25.6706 54.3095 29.612 54.3095 34.4531C54.3095 39.2942 58.3793 43.2352 63.2205 43.2352C65.834 43.2352 67.8044 42.3789 69.3465 40.7719C70.9316 39.1867 71.4245 36.9591 71.4245 35.1601C71.4245 34.6027 71.3818 34.0891 71.2957 33.6605H63.2205ZM77.951 41.0076C76.237 41.0076 74.7589 39.5939 74.7589 37.5803C74.7589 35.5454 76.237 34.153 77.951 34.153C79.6643 34.153 81.1424 35.5454 81.1424 37.5803C81.1424 39.5939 79.6643 41.0076 77.951 41.0076ZM77.951 31.9254C74.8233 31.9254 72.2741 34.303 72.2741 37.5803C72.2741 40.8362 74.8233 43.2352 77.951 43.2352C81.0781 43.2352 83.6272 40.8362 83.6272 37.5803C83.6272 34.303 81.0781 31.9254 77.951 31.9254ZM90.3338 41.0076C88.6205 41.0076 87.1423 39.5939 87.1423 37.5803C87.1423 35.5454 88.6205 34.153 90.3338 34.153C92.0473 34.153 93.5254 35.5454 93.5254 37.5803C93.5254 39.5939 92.0473 41.0076 90.3338 41.0076ZM90.3338 31.9254C87.2062 31.9254 84.6576 34.303 84.6576 37.5803C84.6576 40.8362 87.2062 43.2352 90.3338 43.2352C93.4611 43.2352 96.0102 40.8362 96.0102 37.5803C96.0102 34.303 93.4611 31.9254 90.3338 31.9254Z" fill="black"/><path d="M13.7141 46.0695L13.6153 45.975C13.2284 45.5656 13 44.9299 13 44.1068V44.3005V14.8951C13 14.8924 13 14.8904 13 14.8883C13 14.8908 13 14.8929 13 14.8956V15.0899C13 14.1985 13.2663 13.527 13.7125 13.1244L30.186 29.5975L13.7141 46.0695ZM13 14.8867C13 14.8134 13.002 14.7423 13.0057 14.6722C13.002 14.7418 13 14.8134 13 14.8867ZM13.0057 14.669C13.0057 14.6681 13.0057 14.667 13.0061 14.666C13.0057 14.667 13.0057 14.6681 13.0057 14.669ZM13.0061 14.6597C13.0061 14.6592 13.0061 14.6587 13.0061 14.6581C13.0061 14.6587 13.0061 14.6592 13.0061 14.6597Z" fill="url(#paint0_linear)"/><path d="M35.6764 35.2852L35.8016 35.214L42.3072 31.5176C42.9275 31.165 43.3408 30.7375 43.5471 30.2852C43.3414 30.7375 42.9279 31.1655 42.3072 31.5181L35.8016 35.2146L35.6764 35.2852ZM35.6779 35.0904L30.186 29.5975L35.6774 24.1056L42.3072 27.8721C43.1491 28.3505 43.6218 28.967 43.7008 29.597C43.7008 29.5975 43.7008 29.5986 43.7008 29.5995C43.6218 30.228 43.1491 30.8451 42.3072 31.3233L35.6779 35.0904Z" fill="url(#paint1_linear)"/><path d="M14.8884 46.6969C14.4283 46.6969 14.0267 46.5473 13.7136 46.2647L13.7141 46.2642C14.0273 46.5468 14.4293 46.6969 14.8895 46.6969C14.9294 46.6969 14.9699 46.6958 15.011 46.6938C14.9694 46.6958 14.9283 46.6969 14.8884 46.6969ZM14.889 46.5021C14.4288 46.5026 14.0273 46.3525 13.7141 46.07V46.0696L30.186 29.5975L35.6779 35.0904L16.3785 46.056C15.8445 46.3588 15.3386 46.5021 14.889 46.5021ZM13.7095 46.2612C13.6804 46.2347 13.6518 46.2066 13.6237 46.1775L13.7095 46.2612Z" fill="url(#paint2_linear)"/><path d="M30.186 29.5975L13.7125 13.1244C14.0256 12.8424 14.4267 12.6929 14.8863 12.6929C15.3372 12.6929 15.8435 12.8367 16.3785 13.14L35.6774 24.1056L30.186 29.5975ZM35.8016 23.9816L16.3785 12.9459C15.8435 12.6425 15.3372 12.4986 14.8863 12.4986C14.8842 12.4986 14.8827 12.4986 14.8806 12.4986C14.8832 12.4986 14.8852 12.4986 14.8884 12.4986C15.3382 12.4986 15.844 12.6419 16.3785 12.9453L35.8016 23.9816Z" fill="url(#paint3_linear)"/><path d="M15.011 46.6938C15.429 46.6699 15.8919 46.526 16.3785 46.2502L35.6763 35.2851L16.3785 46.2502C15.8923 46.5265 15.429 46.6699 15.011 46.6938ZM13.7136 46.2647L13.7095 46.2611C13.7109 46.2622 13.7125 46.2637 13.7136 46.2647ZM13.6237 46.1775L13.6153 46.1693V46.1687C13.6185 46.1718 13.621 46.1748 13.6237 46.1775Z" fill="black"/><path d="M35.6764 35.2852L35.802 35.2138L35.6764 35.2852Z" fill="url(#paint4_linear)"/><path d="M14.8895 46.6969C14.4293 46.6969 14.0272 46.5468 13.7141 46.2642L13.7136 46.2647C13.7125 46.2637 13.7109 46.2622 13.7095 46.2612L13.6237 46.1775C13.621 46.1749 13.6185 46.1718 13.6153 46.1688L13.7141 46.07C14.0272 46.3525 14.4288 46.5026 14.889 46.5021C15.3386 46.5021 15.8445 46.3588 16.3785 46.056L35.6779 35.0904L35.8016 35.214L35.6763 35.2852L16.3785 46.2503C15.8919 46.526 15.429 46.6699 15.011 46.6938C14.9699 46.6958 14.9294 46.6969 14.8895 46.6969Z" fill="url(#paint5_linear)"/><path d="M13.6153 46.1693C13.2284 45.7599 13 45.1242 13 44.3011V44.3005C13 45.1242 13.2284 45.7594 13.6153 46.1687V46.1693Z" fill="black"/><path d="M13.6153 46.1687C13.2284 45.7593 13 45.1242 13 44.3005V44.1068C13 44.9299 13.2284 45.5656 13.6153 45.975L13.7141 46.0695L13.6153 46.1687Z" fill="url(#paint6_linear)"/><path d="M13.6153 46.1687L13.7144 46.0693V46.0697L13.6153 46.1687Z" fill="url(#paint7_linear)"/><path d="M43.5471 30.2852C43.6493 30.0608 43.7008 29.8302 43.7008 29.5995C43.7008 29.5991 43.7008 29.5986 43.7008 29.5986C43.7008 29.8297 43.6493 30.0602 43.5471 30.2852Z" fill="black"/><path d="M35.8016 35.214L35.6779 35.0904L42.3072 31.3233C43.1491 30.8451 43.6218 30.228 43.7007 29.5995C43.7007 29.8302 43.6493 30.0608 43.547 30.2852C43.3408 30.7375 42.9274 31.165 42.3072 31.5176L35.8016 35.214Z" fill="url(#paint8_linear)"/><path d="M43.7007 29.5975V29.597C43.7002 28.9015 43.2354 28.2061 42.3072 27.6784L35.8016 23.982H35.8011L35.8016 23.9816L42.3072 27.6779C43.2365 28.2056 43.7018 28.902 43.7007 29.5975Z" fill="#404040"/><path d="M43.7007 29.597C43.6218 28.967 43.1491 28.3505 42.3072 27.8721L35.6774 24.1056L35.8011 23.982H35.8016L42.3072 27.6784C43.2354 28.2061 43.7002 28.9015 43.7007 29.597Z" fill="url(#paint9_linear)"/><path d="M13 14.8883C13 14.8878 13 14.8872 13 14.8867C13 14.8872 13 14.8878 13 14.8883ZM13.0057 14.6722C13.0057 14.6712 13.0057 14.6701 13.0057 14.6691C13.0057 14.6701 13.0057 14.6712 13.0057 14.6722ZM13.0061 14.666C13.0061 14.6639 13.0061 14.6619 13.0061 14.6597C13.0061 14.6619 13.0061 14.6639 13.0061 14.666ZM13.0061 14.6582C13.0831 13.2923 13.8258 12.5033 14.8765 12.4986C14.4209 12.5013 14.0242 12.6509 13.7136 12.9307V12.9302L13.7099 12.9339C13.6772 12.9634 13.6461 12.9947 13.6153 13.0269C13.2663 13.3961 13.0461 13.9492 13.0061 14.6582Z" fill="#404040"/><path d="M13 15.0898V14.8956C13 14.8929 13 14.8908 13 14.8883C13 14.8877 13 14.8872 13 14.8867C13 14.8134 13.002 14.7418 13.0057 14.6722C13.0057 14.6712 13.0057 14.6701 13.0057 14.669C13.0057 14.6681 13.0057 14.667 13.0061 14.666C13.0061 14.6638 13.0061 14.6618 13.0061 14.6597C13.0061 14.6592 13.0061 14.6587 13.0061 14.6581C13.0461 13.9492 13.2663 13.3961 13.6153 13.0268L13.7125 13.1244C13.2663 13.527 13 14.1985 13 15.0898ZM13.7099 12.9339L13.7136 12.9302C13.7125 12.9318 13.7109 12.9328 13.7099 12.9339Z" fill="url(#paint10_linear)"/><path d="M35.6774 24.1056L16.3785 13.14C15.8435 12.8367 15.3372 12.6929 14.8863 12.6929C14.4266 12.6929 14.0256 12.8424 13.7125 13.1244L13.6153 13.0269C13.646 12.9947 13.6772 12.9634 13.7099 12.9339C13.7109 12.9329 13.7125 12.9318 13.7136 12.9307C14.0242 12.6508 14.4209 12.5013 14.8765 12.4986C14.8775 12.4986 14.879 12.4986 14.8806 12.4986C14.8827 12.4986 14.8842 12.4986 14.8863 12.4986C15.3372 12.4986 15.8435 12.6425 16.3785 12.9459L35.8016 23.9816L35.801 23.982L35.6774 24.1056Z" fill="url(#paint11_linear)"/></g><defs><linearGradient id="paint0_linear" x1="28.7253" y1="14.5849" x2="6.4113" y2="36.8989" gradientUnits="userSpaceOnUse"><stop stop-color="#00A0FF"/><stop offset="0.00657445" stop-color="#00A1FF"/><stop offset="0.2601" stop-color="#00BEFF"/><stop offset="0.5122" stop-color="#00D2FF"/><stop offset="0.7604" stop-color="#00DFFF"/><stop offset="1" stop-color="#00E3FF"/></linearGradient><linearGradient id="paint1_linear" x1="44.7265" y1="29.5983" x2="12.5542" y2="29.5983" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE000"/><stop offset="0.4087" stop-color="#FFBD00"/><stop offset="0.7754" stop-color="#FFA500"/><stop offset="1" stop-color="#FF9C00"/></linearGradient><linearGradient id="paint2_linear" x1="32.7503" y1="32.6494" x2="2.49084" y2="62.9088" gradientUnits="userSpaceOnUse"><stop stop-color="#FF3A44"/><stop offset="1" stop-color="#C31162"/></linearGradient><linearGradient id="paint3_linear" x1="9.44278" y1="3.23873" x2="22.9548" y2="16.7508" gradientUnits="userSpaceOnUse"><stop stop-color="#32A071"/><stop offset="0.0685" stop-color="#2DA771"/><stop offset="0.4762" stop-color="#15CF74"/><stop offset="0.8009" stop-color="#06E775"/><stop offset="1" stop-color="#00F076"/></linearGradient><linearGradient id="paint4_linear" x1="44.7518" y1="29.5823" x2="12.4896" y2="29.5823" gradientUnits="userSpaceOnUse"><stop stop-color="#CCB300"/><stop offset="0.4087" stop-color="#CC9700"/><stop offset="0.7754" stop-color="#CC8400"/><stop offset="1" stop-color="#CC7D00"/></linearGradient><linearGradient id="paint5_linear" x1="32.7503" y1="32.6494" x2="2.49083" y2="62.9088" gradientUnits="userSpaceOnUse"><stop stop-color="#CC2E36"/><stop offset="1" stop-color="#9C0E4E"/></linearGradient><linearGradient id="paint6_linear" x1="28.7253" y1="14.5849" x2="6.41134" y2="36.8989" gradientUnits="userSpaceOnUse"><stop stop-color="#008DE0"/><stop offset="0.00657445" stop-color="#008DE0"/><stop offset="0.2601" stop-color="#00A7E0"/><stop offset="0.5122" stop-color="#00B8E0"/><stop offset="0.7604" stop-color="#00C4E0"/><stop offset="1" stop-color="#00C7E0"/></linearGradient><linearGradient id="paint7_linear" x1="32.8043" y1="32.6114" x2="2.4598" y2="62.9562" gradientUnits="userSpaceOnUse"><stop stop-color="#E0333C"/><stop offset="1" stop-color="#AB0F56"/></linearGradient><linearGradient id="paint8_linear" x1="44.7265" y1="29.5983" x2="12.5542" y2="29.5983" gradientUnits="userSpaceOnUse"><stop stop-color="#E0C500"/><stop offset="0.4087" stop-color="#E0A600"/><stop offset="0.7754" stop-color="#E09100"/><stop offset="1" stop-color="#E08900"/></linearGradient><linearGradient id="paint9_linear" x1="44.7265" y1="29.5983" x2="12.5542" y2="29.5983" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE840"/><stop offset="0.4087" stop-color="#FFCE40"/><stop offset="0.7754" stop-color="#FFBC40"/><stop offset="1" stop-color="#FFB540"/></linearGradient><linearGradient id="paint10_linear" x1="28.7253" y1="14.5849" x2="6.4113" y2="36.8988" gradientUnits="userSpaceOnUse"><stop stop-color="#40B8FF"/><stop offset="0.00657445" stop-color="#40B9FF"/><stop offset="0.2601" stop-color="#40CEFF"/><stop offset="0.5122" stop-color="#40DDFF"/><stop offset="0.7604" stop-color="#40E7FF"/><stop offset="1" stop-color="#40EAFF"/></linearGradient><linearGradient id="paint11_linear" x1="9.44277" y1="3.23873" x2="22.9548" y2="16.7508" gradientUnits="userSpaceOnUse"><stop stop-color="#65B895"/><stop offset="0.0685" stop-color="#62BD95"/><stop offset="0.4762" stop-color="#50DB97"/><stop offset="0.8009" stop-color="#44ED98"/><stop offset="1" stop-color="#40F498"/></linearGradient><clipPath id="clip0"><rect width="179.496" height="60" fill="white"/></clipPath></defs></svg>'; diff --git a/src/molecules/appDownloadButton/badges/androidLightClear.ts b/src/molecules/appDownloadButton/badges/androidLightClear.ts new file mode 100644 index 00000000..04e64893 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/androidLightClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V49.832C0 55.3549 4.47715 59.832 10 59.832H169.496C175.019 59.832 179.496 55.3549 179.496 49.832V10C179.496 4.47715 175.019 0 169.496 0H10ZM141.922 42.8925H144.404V26.2709H141.922V42.8925ZM164.269 32.2583L161.425 39.4646H161.34L158.388 32.2583H155.716L160.142 42.3305L157.618 47.933H160.207L167.028 32.2583H164.269ZM150.199 41.0046C149.386 41.0046 148.253 40.5984 148.253 39.5929C148.253 38.31 149.665 37.8182 150.883 37.8182C151.974 37.8182 152.486 38.0534 153.15 38.3745C152.957 39.9139 151.631 41.0046 150.199 41.0046ZM150.498 31.8947C148.702 31.8947 146.842 32.6862 146.072 34.4397L148.274 35.359C148.745 34.4397 149.621 34.14 150.541 34.14C151.824 34.14 153.128 34.9102 153.15 36.2788V36.4496C152.7 36.193 151.739 35.8082 150.562 35.8082C148.189 35.8082 145.772 37.1123 145.772 39.5503C145.772 41.7743 147.718 43.2072 149.899 43.2072C151.567 43.2072 152.486 42.4588 153.065 41.5822H153.15V42.865H155.544V36.4922C155.544 33.5417 153.342 31.8947 150.498 31.8947ZM135.165 34.2817H131.637V28.5842H135.165C137.02 28.5842 138.073 30.1199 138.073 31.4329C138.073 32.721 137.02 34.2817 135.165 34.2817ZM135.102 26.2709H129.157V42.8925H131.637V36.5951H135.102C137.851 36.5951 140.554 34.6043 140.554 31.4329C140.554 28.2617 137.851 26.2709 135.102 26.2709ZM102.685 41.0076C100.971 41.0076 99.5356 39.5726 99.5356 37.6016C99.5356 35.6099 100.971 34.153 102.685 34.153C104.377 34.153 105.705 35.6099 105.705 37.6016C105.705 39.5726 104.377 41.0076 102.685 41.0076ZM105.533 33.189H105.448C104.891 32.5252 103.819 31.9254 102.47 31.9254C99.6426 31.9254 97.051 34.41 97.051 37.6016C97.051 40.7719 99.6426 43.2353 102.47 43.2353C103.819 43.2353 104.891 42.6353 105.448 41.9503H105.533V42.7642C105.533 44.928 104.377 46.0846 102.513 46.0846C100.992 46.0846 100.05 44.9918 99.6639 44.0709L97.5008 44.9705C98.122 46.4699 99.7715 48.3122 102.513 48.3122C105.426 48.3122 107.89 46.5982 107.89 42.4214V32.2682H105.533V33.189ZM109.603 42.8925H112.088V26.2703H109.603V42.8925ZM115.751 37.4089C115.687 35.2239 117.443 34.1103 118.707 34.1103C119.693 34.1103 120.528 34.6027 120.806 35.3102L115.751 37.4089ZM123.462 35.5241C122.992 34.2599 121.556 31.9254 118.621 31.9254C115.708 31.9254 113.288 34.2174 113.288 37.5803C113.288 40.7506 115.687 43.2353 118.9 43.2353C121.492 43.2353 122.992 41.6501 123.613 40.7292L121.685 39.4438C121.042 40.3864 120.164 41.0076 118.9 41.0076C117.636 41.0076 116.736 40.4291 116.158 39.2942L123.719 36.1666L123.462 35.5241ZM63.2205 33.6605V36.0595H68.961C68.7896 37.4089 68.3398 38.3942 67.6543 39.0797C66.8192 39.9154 65.5125 40.8363 63.2205 40.8363C59.686 40.8363 56.923 37.9874 56.923 34.4531C56.923 30.9188 59.686 28.0696 63.2205 28.0696C65.127 28.0696 66.519 28.8195 67.5473 29.7834L69.2394 28.0914C67.8044 26.7201 65.8978 25.6706 63.2205 25.6706C58.3793 25.6706 54.3095 29.612 54.3095 34.4531C54.3095 39.2942 58.3793 43.2353 63.2205 43.2353C65.8339 43.2353 67.8044 42.3789 69.3465 40.7719C70.9316 39.1867 71.4245 36.9591 71.4245 35.16C71.4245 34.6027 71.3818 34.0891 71.2957 33.6605H63.2205ZM77.951 41.0076C76.237 41.0076 74.7589 39.5939 74.7589 37.5803C74.7589 35.5454 76.237 34.153 77.951 34.153C79.6643 34.153 81.1424 35.5454 81.1424 37.5803C81.1424 39.5939 79.6643 41.0076 77.951 41.0076ZM77.951 31.9254C74.8232 31.9254 72.2741 34.303 72.2741 37.5803C72.2741 40.8363 74.8232 43.2353 77.951 43.2353C81.0781 43.2353 83.6272 40.8363 83.6272 37.5803C83.6272 34.303 81.0781 31.9254 77.951 31.9254ZM90.3338 41.0076C88.6205 41.0076 87.1423 39.5939 87.1423 37.5803C87.1423 35.5454 88.6205 34.153 90.3338 34.153C92.0473 34.153 93.5254 35.5454 93.5254 37.5803C93.5254 39.5939 92.0473 41.0076 90.3338 41.0076ZM90.3338 31.9254C87.2062 31.9254 84.6576 34.303 84.6576 37.5803C84.6576 40.8363 87.2062 43.2353 90.3338 43.2353C93.4611 43.2353 96.0102 40.8363 96.0102 37.5803C96.0102 34.303 93.4611 31.9254 90.3338 31.9254ZM61.6157 17.1132C61.5404 17.711 61.3331 18.1681 61.0006 18.5021C60.4292 19.0713 59.7281 19.3523 58.8664 19.3539C58.0578 19.3528 57.3717 19.0744 56.7802 18.5057C56.1943 17.9391 55.9029 17.2156 55.9014 16.3005C55.9029 15.3853 56.1943 14.6619 56.7802 14.0952C57.3717 13.5265 58.0578 13.2481 58.8664 13.247C59.7655 13.2492 60.4444 13.5462 60.9487 14.1461L61.0422 14.2573L61.9318 13.3666L61.8534 13.2735C61.5267 12.8841 61.0915 12.5749 60.5565 12.3454C60.0205 12.1153 59.4549 12 58.8664 12C57.6844 11.9989 56.6644 12.4144 55.8369 13.2367C55.0065 14.0573 54.5879 15.0888 54.589 16.3005C54.5879 17.5116 55.0065 18.5436 55.8375 19.3648C56.6643 20.1865 57.6844 20.6015 58.8664 20.6004C60.0974 20.6015 61.1185 20.1926 61.8934 19.3788C62.5807 18.6908 62.9217 17.7618 62.9208 16.6241C62.9208 16.422 62.902 16.2143 62.8631 15.9982L62.8434 15.8891H58.7335V17.1132H61.6157ZM69.0493 12.1787V13.2917V13.4247H65.4163V15.6882H68.6926V16.9127H65.4163V19.1763H69.0493V20.4222H64.1262V12.1787H69.0493ZM73.3721 13.4247V20.2893V20.4222H72.0804V13.4247H69.8522V12.1787H75.6003V13.4247H73.3721ZM80.5914 20.4222H79.4338H79.3008V12.1787H80.5914V20.4222ZM85.1385 13.4247V20.2893V20.4222H83.8468V13.4247H81.6188V12.1787H87.3667V13.4247H85.1385ZM91.7663 16.3005C91.7674 17.201 92.0494 17.923 92.6134 18.497C93.1826 19.0708 93.8624 19.3523 94.6863 19.3539C95.5094 19.3523 96.1908 19.0708 96.7586 18.497C97.3237 17.923 97.6057 17.201 97.6067 16.3005C97.6057 15.3999 97.3237 14.6779 96.7586 14.104C96.1908 13.5301 95.5094 13.2486 94.6863 13.247C93.8624 13.2486 93.1826 13.5301 92.6134 14.104C92.0494 14.6779 91.7674 15.3999 91.7663 16.3005ZM98.9197 16.3005C98.9207 17.496 98.513 18.5229 97.707 19.3507C96.9003 20.1822 95.8824 20.6015 94.6863 20.6004C93.4896 20.6015 92.4717 20.1828 91.6666 19.3512C90.859 18.5229 90.4528 17.496 90.4539 16.3005C90.4528 15.1049 90.859 14.0786 91.6666 13.2502C92.4717 12.4187 93.4896 11.9985 94.6863 12C95.8767 11.9985 96.8915 12.4207 97.7017 13.2554C98.5114 14.0869 98.9207 15.1117 98.9197 16.3005ZM105.249 18.1054L101.547 12.1787H100.092V20.4222H100.225H101.383V15.3183L101.35 14.1957L105.232 20.4222H106.509V12.1787H105.217V16.9819L105.249 18.1054ZM29.9172 29.5172L13.4573 45.977C13.167 45.5715 13 45.0043 13 44.3005V44.1068V15.0899V14.8951V14.8883V14.8867C13 14.8134 13.002 14.7423 13.0057 14.6722V14.669C13.0057 14.6684 13.0057 14.6678 13.0058 14.6671C13.0059 14.6667 13.006 14.6664 13.0061 14.666V14.6597V14.6581C13.0426 14.0105 13.2288 13.4926 13.5265 13.1265L29.9172 29.5172ZM13.725 46.275L30.2 29.8L35.682 35.282L16.3785 46.2502C15.8919 46.526 15.4291 46.6699 15.011 46.6938C14.9699 46.6958 14.9294 46.6969 14.8895 46.6969H14.889H14.8884C14.4338 46.6969 14.0365 46.5509 13.725 46.275ZM13.8125 12.8469L30.2 29.2343L35.5791 23.8552L16.3785 12.9459C15.844 12.6425 15.3382 12.4986 14.8884 12.4986H14.8863H14.8806H14.8765C14.4684 12.5004 14.1067 12.6205 13.8125 12.8469ZM35.9032 24.0968L35.7699 23.9636L35.8016 23.9816L42.3072 27.6784C43.2365 28.2061 43.7018 28.9015 43.7008 29.597V29.5995C43.7008 29.8302 43.6493 30.0608 43.5471 30.2852C43.3408 30.7375 42.9275 31.165 42.3072 31.5176L35.8016 35.214L35.78 35.2263L35.986 35.0203L30.4828 29.5172L35.9032 24.0968Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="179.496" height="60" fill="white"/></clipPath></defs></svg>'; diff --git a/src/molecules/appDownloadButton/badges/appletvDark.ts b/src/molecules/appDownloadButton/badges/appletvDark.ts new file mode 100644 index 00000000..b464a835 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/appletvDark.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><rect x="0.5" y="0.5" width="179" height="58.832" rx="9.5" fill="black" stroke="#A6A6A6"/><path d="M41.4801 28.3756C41.4972 27.0512 41.849 25.7526 42.5028 24.6007C43.1566 23.4488 44.0911 22.481 45.2195 21.7873C44.5027 20.7635 43.557 19.9211 42.4577 19.3267C41.3583 18.7324 40.1355 18.4026 38.8864 18.3635C36.2218 18.0838 33.6385 19.958 32.2807 19.958C30.8966 19.958 28.806 18.3913 26.5548 18.4376C25.0987 18.4846 23.6795 18.9081 22.4357 19.6666C21.1918 20.4252 20.1657 21.4931 19.4573 22.7661C16.3885 28.0794 18.6775 35.888 21.6172 40.1828C23.088 42.2859 24.807 44.635 27.0561 44.5517C29.2571 44.4605 30.0791 43.1483 32.7359 43.1483C35.368 43.1483 36.1392 44.5517 38.434 44.4988C40.7958 44.4605 42.2838 42.3864 43.703 40.2634C44.7597 38.7649 45.5729 37.1088 46.1124 35.3563C44.7403 34.7759 43.5693 33.8045 42.7456 32.5632C41.9218 31.3218 41.4817 29.8654 41.4801 28.3756Z" fill="white"/><path d="M37.1456 15.5389C38.4333 13.993 39.0677 12.0061 38.9141 10C36.9467 10.2066 35.1294 11.1469 33.8243 12.6335C33.1862 13.3597 32.6975 14.2045 32.3861 15.1198C32.0747 16.035 31.9467 17.0026 32.0095 17.9673C32.9935 17.9774 33.967 17.7641 34.8567 17.3435C35.7463 16.9228 36.5289 16.3058 37.1456 15.5389Z" fill="white"/><path d="M67.9105 39.436H60.685L58.9498 44.5596H55.8894L62.7333 25.6036H65.913L72.7568 44.5596H69.6442L67.9105 39.436ZM61.4334 37.0717H67.1608L64.3373 28.7565H64.2583L61.4334 37.0717Z" fill="white"/><path d="M87.5373 37.6502C87.5373 41.9449 85.2386 44.7042 81.7697 44.7042C80.8909 44.7502 80.017 44.5478 79.248 44.1201C78.479 43.6925 77.8459 43.0569 77.4213 42.2862H77.3556V49.1316H74.5188V30.7392H77.2647V33.0379H77.3169C77.7611 32.2709 78.4048 31.6386 79.1797 31.2084C79.9546 30.7781 80.8316 30.566 81.7175 30.5946C85.2251 30.5946 87.5373 33.3673 87.5373 37.6502ZM84.6214 37.6502C84.6214 34.8521 83.1754 33.0125 80.9692 33.0125C78.8017 33.0125 77.3437 34.8908 77.3437 37.6502C77.3437 40.4348 78.8017 42.2997 80.9692 42.2997C83.1754 42.2997 84.6214 40.4736 84.6214 37.6502Z" fill="white"/><path d="M102.748 37.6502C102.748 41.9449 100.45 44.7042 96.9809 44.7042C96.1022 44.7502 95.2283 44.5478 94.4592 44.1201C93.6902 43.6925 93.0571 43.057 92.6325 42.2863H92.5669V49.1316H89.73V30.7392H92.4759V33.0379H92.5281C92.9722 32.2709 93.616 31.6386 94.3909 31.2084C95.1658 30.7782 96.0428 30.566 96.9287 30.5946C100.436 30.5946 102.748 33.3673 102.748 37.6502ZM99.8327 37.6502C99.8327 34.8521 98.3867 33.0126 96.1804 33.0126C94.0129 33.0126 92.555 34.8909 92.555 37.6502C92.555 40.4348 94.0129 42.2997 96.1804 42.2997C98.3867 42.2997 99.8327 40.4736 99.8327 37.6502H99.8327Z" fill="white"/><path d="M105.044 25.6037H107.883V44.5597H105.044V25.6037Z" fill="white"/><path d="M122.654 40.5004C122.272 43.0092 119.829 44.731 116.703 44.731C112.683 44.731 110.187 42.0373 110.187 37.7157C110.187 33.3807 112.696 30.5692 116.584 30.5692C120.407 30.5692 122.812 33.1959 122.812 37.3863V38.3582H113.051V38.5297C113.006 39.0383 113.069 39.5507 113.238 40.0328C113.406 40.5149 113.675 40.9558 114.026 41.326C114.378 41.6962 114.804 41.9874 115.277 42.1802C115.75 42.373 116.258 42.463 116.769 42.4443C117.439 42.5071 118.112 42.3518 118.687 42.0016C119.262 41.6513 119.708 41.1248 119.96 40.5004L122.654 40.5004ZM113.064 36.3756H119.974C119.999 35.9182 119.93 35.4606 119.77 35.0313C119.61 34.6021 119.363 34.2105 119.045 33.8811C118.727 33.5517 118.344 33.2917 117.92 33.1174C117.497 32.943 117.042 32.8581 116.584 32.8679C116.122 32.8652 115.664 32.9539 115.236 33.1291C114.809 33.3042 114.42 33.5623 114.093 33.8884C113.766 34.2145 113.507 34.6022 113.33 35.0291C113.153 35.456 113.063 35.9136 113.064 36.3756V36.3756Z" fill="white"/><path d="M135.517 44.5596V28.1379H129.711V25.6037H144.253V28.1379H138.46V44.5596H135.517Z" fill="white"/><path d="M152.017 44.5596L145.25 25.6036H148.443L153.606 41.2486H153.685L158.86 25.6036H162L155.235 44.5596H152.017Z" fill="white"/><path d="M59.6278 11.3354C60.2225 11.2927 60.8193 11.3826 61.3751 11.5985C61.9309 11.8144 62.4319 12.1509 62.8419 12.5839C63.2519 13.0168 63.5607 13.5354 63.746 14.1021C63.9313 14.6689 63.9886 15.2697 63.9136 15.8612C63.9136 18.7711 62.3409 20.4437 59.6278 20.4437H56.3378V11.3354H59.6278ZM57.7524 19.1556H59.4697C59.8947 19.181 60.32 19.1113 60.7147 18.9517C61.1093 18.792 61.4634 18.5463 61.7512 18.2325C62.0389 17.9187 62.253 17.5447 62.378 17.1377C62.503 16.7307 62.5356 16.301 62.4735 15.8798C62.5311 15.4602 62.4951 15.0332 62.3683 14.6292C62.2414 14.2252 62.0267 13.8542 61.7396 13.5429C61.4526 13.2316 61.1002 12.9877 60.7078 12.8286C60.3153 12.6694 59.8926 12.5991 59.4697 12.6226H57.7524V19.1556Z" fill="white"/><path d="M65.5116 17.0038C65.4684 16.5521 65.5201 16.0963 65.6633 15.6657C65.8066 15.2351 66.0382 14.8393 66.3434 14.5035C66.6486 14.1677 67.0207 13.8994 67.4356 13.7158C67.8506 13.5322 68.2994 13.4373 68.7532 13.4373C69.2069 13.4373 69.6557 13.5322 70.0707 13.7158C70.4857 13.8994 70.8577 14.1677 71.1629 14.5035C71.4681 14.8393 71.6998 15.2351 71.843 15.6657C71.9863 16.0963 72.0379 16.5521 71.9947 17.0038C72.0388 17.456 71.9877 17.9124 71.8448 18.3436C71.702 18.7749 71.4704 19.1715 71.1652 19.508C70.8599 19.8444 70.4876 20.1133 70.0722 20.2973C69.6568 20.4813 69.2075 20.5763 68.7532 20.5763C68.2988 20.5763 67.8496 20.4813 67.4342 20.2973C67.0188 20.1133 66.6465 19.8444 66.3412 19.508C66.0359 19.1715 65.8044 18.7749 65.6615 18.3436C65.5186 17.9124 65.4676 17.456 65.5116 17.0038ZM70.5994 17.0038C70.5994 15.5138 69.9301 14.6425 68.7554 14.6425C67.5763 14.6425 66.9129 15.5138 66.9129 17.0038C66.9129 18.5057 67.5763 19.3703 68.7554 19.3703C69.9301 19.3703 70.5994 18.4997 70.5994 17.0038H70.5994Z" fill="white"/><path d="M80.6125 20.4436H79.2053L77.7847 15.3811H77.6773L76.2626 20.4436H74.8688L72.9741 13.5699H74.3501L75.5814 18.8149H75.6828L77.096 13.5699H78.3974L79.8105 18.8149H79.9179L81.1432 13.5699H82.4998L80.6125 20.4436Z" fill="white"/><path d="M84.0934 13.5699H85.3992V14.6618H85.5006C85.6726 14.2696 85.9626 13.9409 86.3303 13.7213C86.698 13.5018 87.125 13.4025 87.5518 13.4372C87.8863 13.412 88.2221 13.4625 88.5344 13.5847C88.8468 13.707 89.1276 13.898 89.3561 14.1435C89.5845 14.389 89.7549 14.6828 89.8544 15.0031C89.9539 15.3234 89.9801 15.662 89.931 15.9938V20.4435H88.5745V16.3344C88.5745 15.2298 88.0945 14.6805 87.0912 14.6805C86.8641 14.6699 86.6375 14.7085 86.4267 14.7937C86.216 14.879 86.0261 15.0088 85.8703 15.1742C85.7144 15.3397 85.5961 15.5369 85.5235 15.7523C85.451 15.9677 85.4259 16.1963 85.4499 16.4223V20.4436H84.0934L84.0934 13.5699Z" fill="white"/><path d="M92.0925 10.8866H93.4491V20.4436H92.0925V10.8866Z" fill="white"/><path d="M95.3348 17.0038C95.2916 16.552 95.3433 16.0962 95.4866 15.6656C95.6299 15.235 95.8616 14.8391 96.1668 14.5033C96.4721 14.1675 96.8441 13.8992 97.2591 13.7156C97.6741 13.532 98.1229 13.4372 98.5768 13.4372C99.0306 13.4372 99.4794 13.532 99.8944 13.7156C100.309 13.8992 100.681 14.1675 100.987 14.5033C101.292 14.8391 101.524 15.235 101.667 15.6656C101.81 16.0962 101.862 16.552 101.819 17.0038C101.863 17.456 101.812 17.9124 101.669 18.3436C101.526 18.7749 101.294 19.1715 100.989 19.5079C100.684 19.8444 100.311 20.1133 99.8958 20.2972C99.4804 20.4812 99.0311 20.5763 98.5768 20.5763C98.1224 20.5763 97.6731 20.4812 97.2577 20.2972C96.8423 20.1133 96.47 19.8444 96.1646 19.5079C95.8593 19.1715 95.6278 18.7749 95.4849 18.3436C95.3419 17.9124 95.2908 17.456 95.3348 17.0038ZM100.423 17.0038C100.423 15.5138 99.754 14.6425 98.5794 14.6425C97.4002 14.6425 96.7369 15.5138 96.7369 17.0038C96.7369 18.5057 97.4003 19.3703 98.5794 19.3703C99.754 19.3703 100.423 18.4997 100.423 17.0038Z" fill="white"/><path d="M103.247 18.4997C103.247 17.2624 104.168 16.5491 105.803 16.4477L107.665 16.3404V15.7471C107.665 15.0211 107.185 14.6112 106.258 14.6112C105.501 14.6112 104.976 14.8892 104.825 15.3752H103.512C103.651 14.1945 104.761 13.4373 106.321 13.4373C108.044 13.4373 109.016 14.2951 109.016 15.7471V20.4436H107.71V19.4776H107.603C107.385 19.8241 107.079 20.1066 106.716 20.2962C106.353 20.4858 105.947 20.5758 105.538 20.5569C105.249 20.5869 104.958 20.5561 104.682 20.4665C104.406 20.3769 104.152 20.2305 103.936 20.0366C103.72 19.8428 103.547 19.6059 103.429 19.3412C103.31 19.0765 103.248 18.7898 103.247 18.4997ZM107.665 17.9124V17.3377L105.987 17.445C105.04 17.5084 104.611 17.8304 104.611 18.4363C104.611 19.055 105.147 19.415 105.885 19.415C106.102 19.4369 106.32 19.4151 106.528 19.3508C106.735 19.2866 106.928 19.1812 107.094 19.041C107.26 18.9008 107.396 18.7286 107.494 18.5347C107.592 18.3409 107.651 18.1292 107.665 17.9124Z" fill="white"/><path d="M110.799 17.0038C110.799 14.8318 111.915 13.4559 113.652 13.4559C114.082 13.4361 114.508 13.539 114.881 13.7525C115.254 13.9661 115.559 14.2814 115.76 14.6618H115.861V10.8866H117.218V20.4436H115.918V19.3576H115.811C115.594 19.7354 115.279 20.0468 114.899 20.2582C114.518 20.4696 114.087 20.5729 113.652 20.5568C111.903 20.5569 110.799 19.181 110.799 17.0038ZM112.2 17.0038C112.2 18.4617 112.887 19.339 114.037 19.339C115.18 19.339 115.887 18.449 115.887 17.0097C115.887 15.5772 115.173 14.6745 114.037 14.6745C112.895 14.6745 112.2 15.5578 112.2 17.0038H112.2Z" fill="white"/><path d="M122.83 17.0038C122.787 16.5521 122.839 16.0963 122.982 15.6657C123.125 15.2351 123.357 14.8393 123.662 14.5035C123.967 14.1677 124.339 13.8994 124.754 13.7158C125.169 13.5322 125.618 13.4373 126.072 13.4373C126.526 13.4373 126.974 13.5322 127.389 13.7158C127.804 13.8994 128.176 14.1677 128.482 14.5035C128.787 14.8393 129.018 15.2351 129.162 15.6657C129.305 16.0963 129.357 16.5521 129.313 17.0038C129.357 17.456 129.306 17.9124 129.164 18.3436C129.021 18.7749 128.789 19.1715 128.484 19.508C128.179 19.8444 127.806 20.1133 127.391 20.2973C126.976 20.4813 126.526 20.5763 126.072 20.5763C125.618 20.5763 125.168 20.4813 124.753 20.2973C124.337 20.1133 123.965 19.8444 123.66 19.508C123.355 19.1715 123.123 18.7749 122.98 18.3436C122.837 17.9124 122.786 17.456 122.83 17.0038ZM127.918 17.0038C127.918 15.5138 127.249 14.6425 126.074 14.6425C124.895 14.6425 124.232 15.5138 124.232 17.0038C124.232 18.5057 124.895 19.3703 126.074 19.3703C127.249 19.3703 127.918 18.4997 127.918 17.0038Z" fill="white"/><path d="M131.134 13.5699H132.439V14.6618H132.541C132.713 14.2696 133.003 13.9409 133.371 13.7213C133.738 13.5018 134.165 13.4025 134.592 13.4372C134.927 13.412 135.262 13.4625 135.575 13.5847C135.887 13.707 136.168 13.898 136.396 14.1435C136.625 14.389 136.795 14.6828 136.895 15.0031C136.994 15.3234 137.02 15.662 136.971 15.9938V20.4435H135.615V16.3344C135.615 15.2298 135.135 14.6805 134.131 14.6805C133.904 14.6699 133.678 14.7085 133.467 14.7937C133.256 14.879 133.066 15.0088 132.91 15.1742C132.755 15.3397 132.636 15.5369 132.564 15.7523C132.491 15.9677 132.466 16.1963 132.49 16.4223V20.4436H131.134V13.5699Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="180" height="60" fill="white"/></clipPath></defs></svg>'; diff --git a/src/molecules/appDownloadButton/badges/appletvDarkClear.ts b/src/molecules/appDownloadButton/badges/appletvDarkClear.ts new file mode 100644 index 00000000..2ab06986 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/appletvDarkClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V49.832C0 55.3549 4.47716 59.832 10 59.832H170C175.523 59.832 180 55.3549 180 49.832V10C180 4.47715 175.523 0 170 0H10ZM42.5028 24.6007C41.849 25.7526 41.4972 27.0512 41.4801 28.3756C41.4817 29.8654 41.9218 31.3218 42.7456 32.5632C43.5693 33.8045 44.7403 34.7759 46.1124 35.3563C45.5729 37.1087 44.7597 38.7649 43.703 40.2634C42.2838 42.3864 40.7958 44.4604 38.434 44.4988C37.3108 44.5247 36.5526 44.2017 35.7625 43.8651C34.9384 43.5141 34.0797 43.1483 32.7359 43.1483C31.3107 43.1483 30.4135 43.5259 29.5482 43.89C28.8004 44.2047 28.0764 44.5094 27.0561 44.5517C24.807 44.635 23.088 42.2859 21.6172 40.1828C18.6775 35.888 16.3885 28.0793 19.4573 22.7661C20.1657 21.4931 21.1918 20.4252 22.4357 19.6666C23.6795 18.9081 25.0987 18.4846 26.5548 18.4376C27.8304 18.4113 29.0545 18.903 30.1277 19.3341C30.9484 19.6637 31.6809 19.958 32.2807 19.958C32.808 19.958 33.52 19.6754 34.3498 19.346C35.657 18.8272 37.2565 18.1924 38.8864 18.3635C40.1355 18.4026 41.3583 18.7324 42.4576 19.3267C43.557 19.9211 44.5027 20.7635 45.2195 21.7873C44.0911 22.481 43.1566 23.4488 42.5028 24.6007ZM37.1456 15.5389C38.4333 13.993 39.0677 12.0061 38.9141 10C36.9467 10.2066 35.1295 11.1469 33.8243 12.6335C33.1862 13.3597 32.6975 14.2045 32.3861 15.1197C32.0747 16.035 31.9467 17.0026 32.0095 17.9673C32.9935 17.9774 33.967 17.7641 34.8567 17.3435C35.7464 16.9228 36.529 16.3058 37.1456 15.5389ZM60.685 39.436H67.9105L69.6442 44.5596H72.7568L65.913 25.6036H62.7333L55.8894 44.5596H58.9498L60.685 39.436ZM67.1608 37.0717H61.4334L64.2583 28.7565H64.3373L67.1608 37.0717ZM87.5372 37.6502C87.5372 41.9449 85.2386 44.7042 81.7697 44.7042C80.8909 44.7502 80.017 44.5478 79.248 44.1201C78.479 43.6925 77.8459 43.057 77.4213 42.2863H77.3556V49.1316H74.5188V30.7392H77.2647V33.0379H77.3169C77.761 32.2709 78.4048 31.6386 79.1797 31.2084C79.9546 30.7781 80.8316 30.566 81.7175 30.5946C85.2251 30.5946 87.5372 33.3673 87.5372 37.6502ZM84.6214 37.6502C84.6214 34.8521 83.1754 33.0125 80.9691 33.0125C78.8017 33.0125 77.3437 34.8908 77.3437 37.6502C77.3437 40.4348 78.8017 42.2997 80.9691 42.2997C83.1754 42.2997 84.6214 40.4736 84.6214 37.6502ZM96.9809 44.7042C100.45 44.7042 102.749 41.9449 102.749 37.6502C102.749 33.3673 100.436 30.5946 96.9287 30.5946C96.0429 30.5661 95.1658 30.7782 94.3909 31.2084C93.616 31.6386 92.9723 32.2709 92.5281 33.0379H92.4759V30.7392H89.7301V49.1316H92.5669V42.2863H92.6325C93.0571 43.057 93.6902 43.6925 94.4593 44.1202C95.2283 44.5478 96.1022 44.7502 96.9809 44.7042ZM96.1804 33.0126C98.3867 33.0126 99.8327 34.8521 99.8327 37.6502C99.8327 40.4736 98.3867 42.2997 96.1804 42.2997C94.0129 42.2997 92.555 40.4348 92.555 37.6502C92.555 34.8909 94.0129 33.0126 96.1804 33.0126ZM105.044 25.6037H107.883V44.5597H105.044V25.6037ZM116.703 44.731C119.829 44.731 122.272 43.0092 122.654 40.5004L119.96 40.5004C119.709 41.1248 119.262 41.6513 118.687 42.0016C118.112 42.3518 117.439 42.5071 116.769 42.4443C116.258 42.463 115.75 42.373 115.277 42.1802C114.804 41.9874 114.378 41.6962 114.026 41.326C113.675 40.9557 113.406 40.5149 113.238 40.0328C113.069 39.5507 113.006 39.0383 113.051 38.5296V38.3582H122.812V37.3863C122.812 33.1959 120.408 30.5692 116.584 30.5692C112.696 30.5692 110.187 33.3807 110.187 37.7157C110.187 42.0373 112.683 44.731 116.703 44.731ZM119.974 36.3756H113.064C113.063 35.9136 113.153 35.456 113.33 35.0291C113.507 34.6022 113.766 34.2145 114.093 33.8884C114.42 33.5623 114.809 33.3042 115.236 33.1291C115.664 32.9539 116.122 32.8652 116.584 32.8679C117.042 32.8581 117.497 32.943 117.92 33.1174C118.344 33.2917 118.727 33.5517 119.045 33.8811C119.363 34.2104 119.61 34.6021 119.77 35.0313C119.93 35.4606 119.999 35.9182 119.974 36.3756ZM135.517 44.5596V28.1379H129.711V25.6037H144.253V28.1379H138.46V44.5596H135.517ZM145.25 25.6036L152.017 44.5596H155.235L162 25.6036H158.861L153.685 41.2486H153.606L148.443 25.6036H145.25ZM59.6278 11.3354C60.2225 11.2927 60.8193 11.3826 61.3752 11.5985C61.931 11.8144 62.4319 12.1509 62.8419 12.5839C63.2519 13.0168 63.5607 13.5354 63.746 14.1021C63.9314 14.6689 63.9886 15.2697 63.9136 15.8612C63.9136 18.7711 62.3409 20.4437 59.6278 20.4437H56.3378V11.3354H59.6278ZM57.7525 19.1556H59.4698C59.8948 19.181 60.3201 19.1113 60.7147 18.9516C61.1094 18.792 61.4635 18.5463 61.7512 18.2325C62.0389 17.9187 62.2531 17.5447 62.378 17.1377C62.503 16.7307 62.5356 16.301 62.4736 15.8798C62.5311 15.4602 62.4952 15.0332 62.3683 14.6292C62.2414 14.2252 62.0267 13.8542 61.7397 13.5429C61.4526 13.2316 61.1002 12.9877 60.7078 12.8286C60.3153 12.6694 59.8926 12.5991 59.4698 12.6226H57.7525V19.1556ZM65.6634 15.6657C65.5201 16.0963 65.4685 16.5521 65.5117 17.0038C65.4676 17.4559 65.5187 17.9123 65.6616 18.3436C65.8044 18.7749 66.0359 19.1715 66.3412 19.508C66.6465 19.8444 67.0188 20.1133 67.4342 20.2973C67.8496 20.4813 68.2989 20.5763 68.7532 20.5763C69.2075 20.5763 69.6568 20.4813 70.0722 20.2973C70.4876 20.1133 70.8599 19.8444 71.1652 19.508C71.4705 19.1715 71.702 18.7749 71.8449 18.3436C71.9878 17.9123 72.0388 17.4559 71.9948 17.0038C72.038 16.5521 71.9863 16.0963 71.8431 15.6657C71.6998 15.2351 71.4682 14.8393 71.163 14.5035C70.8577 14.1677 70.4857 13.8993 70.0708 13.7157C69.6558 13.5321 69.207 13.4373 68.7532 13.4373C68.2994 13.4373 67.8507 13.5321 67.4357 13.7157C67.0207 13.8993 66.6487 14.1677 66.3435 14.5035C66.0383 14.8393 65.8066 15.2351 65.6634 15.6657ZM68.7555 14.6425C69.9301 14.6425 70.5995 15.5138 70.5995 17.0038C70.5995 18.4997 69.9302 19.3703 68.7555 19.3703C67.5764 19.3703 66.913 18.5057 66.913 17.0038C66.913 15.5138 67.5763 14.6425 68.7555 14.6425ZM80.6126 20.4436H79.2054L77.7847 15.3811H77.6774L76.2627 20.4436H74.8689L72.9742 13.5699H74.3501L75.5814 18.8149H75.6828L77.096 13.5699H78.3974L79.8106 18.8149H79.9179L81.1433 13.5699H82.4998L80.6126 20.4436ZM85.3993 13.5699H84.0934L84.0934 20.4436H85.45V16.4224C85.4259 16.1963 85.451 15.9677 85.5236 15.7523C85.5961 15.5369 85.7144 15.3397 85.8703 15.1742C86.0262 15.0088 86.216 14.879 86.4268 14.7938C86.6375 14.7085 86.8642 14.6699 87.0913 14.6805C88.0945 14.6805 88.5745 15.2298 88.5745 16.3344V20.4435H89.9311V15.9938C89.9801 15.662 89.954 15.3234 89.8544 15.0031C89.7549 14.6828 89.5846 14.389 89.3561 14.1435C89.1276 13.898 88.8468 13.707 88.5345 13.5847C88.2222 13.4625 87.8863 13.4121 87.5519 13.4372C87.1251 13.4025 86.698 13.5018 86.3304 13.7214C85.9627 13.9409 85.6726 14.2696 85.5007 14.6618H85.3993V13.5699ZM92.0926 10.8866H93.4491V20.4436H92.0926V10.8866ZM95.4867 15.6656C95.3434 16.0962 95.2917 16.552 95.3349 17.0037C95.2909 17.4559 95.342 17.9123 95.4849 18.3436C95.6278 18.7749 95.8594 19.1715 96.1647 19.5079C96.47 19.8444 96.8423 20.1132 97.2577 20.2972C97.6732 20.4812 98.1225 20.5763 98.5768 20.5763C99.0311 20.5763 99.4804 20.4812 99.8958 20.2972C100.311 20.1132 100.684 19.8444 100.989 19.5079C101.294 19.1715 101.526 18.7749 101.669 18.3436C101.812 17.9123 101.863 17.4559 101.819 17.0037C101.862 16.552 101.81 16.0962 101.667 15.6656C101.524 15.235 101.292 14.8391 100.987 14.5033C100.681 14.1675 100.309 13.8992 99.8944 13.7156C99.4794 13.532 99.0306 13.4372 98.5768 13.4372C98.123 13.4372 97.6742 13.532 97.2592 13.7156C96.8442 13.8992 96.4721 14.1675 96.1669 14.5033C95.8616 14.8391 95.63 15.235 95.4867 15.6656ZM98.5794 14.6425C99.7541 14.6425 100.423 15.5138 100.423 17.0037C100.423 18.4997 99.7541 19.3703 98.5794 19.3703C97.4003 19.3703 96.7369 18.5057 96.7369 17.0038C96.7369 15.5138 97.4003 14.6425 98.5794 14.6425ZM103.247 18.4997C103.247 17.2624 104.168 16.5491 105.803 16.4477L107.665 16.3404V15.7471C107.665 15.0211 107.185 14.6112 106.258 14.6112C105.501 14.6112 104.976 14.8892 104.826 15.3752H103.512C103.651 14.1945 104.761 13.4372 106.321 13.4372C108.044 13.4372 109.016 14.2951 109.016 15.7471V20.4436H107.71V19.4776H107.603C107.385 19.8241 107.079 20.1066 106.716 20.2962C106.353 20.4858 105.947 20.5758 105.538 20.5569C105.25 20.5869 104.958 20.5561 104.682 20.4665C104.406 20.3769 104.152 20.2304 103.936 20.0366C103.72 19.8428 103.547 19.6059 103.429 19.3412C103.31 19.0765 103.248 18.7898 103.247 18.4997ZM107.665 17.9124V17.3377L105.987 17.445C105.04 17.5084 104.611 17.8304 104.611 18.4363C104.611 19.055 105.147 19.415 105.885 19.415C106.102 19.4369 106.32 19.415 106.528 19.3508C106.735 19.2865 106.928 19.1812 107.094 19.041C107.26 18.9008 107.396 18.7286 107.494 18.5347C107.592 18.3408 107.651 18.1292 107.665 17.9124ZM113.652 13.4559C111.915 13.4559 110.799 14.8318 110.799 17.0038C110.799 19.181 111.903 20.5569 113.652 20.5568C114.087 20.5729 114.518 20.4696 114.899 20.2582C115.279 20.0468 115.594 19.7354 115.811 19.3576H115.918V20.4436H117.218V10.8866H115.861V14.6618H115.76C115.559 14.2814 115.254 13.9661 114.881 13.7525C114.508 13.539 114.082 13.4361 113.652 13.4559ZM114.037 19.339C112.887 19.339 112.2 18.4617 112.2 17.0038C112.2 15.5578 112.895 14.6745 114.037 14.6745C115.173 14.6745 115.887 15.5772 115.887 17.0097C115.887 18.449 115.18 19.339 114.037 19.339ZM122.83 17.0038C122.787 16.5521 122.839 16.0963 122.982 15.6657C123.125 15.2351 123.357 14.8393 123.662 14.5035C123.967 14.1677 124.339 13.8993 124.754 13.7157C125.169 13.5321 125.618 13.4373 126.072 13.4373C126.526 13.4373 126.974 13.5321 127.389 13.7157C127.804 13.8993 128.176 14.1677 128.482 14.5035C128.787 14.8393 129.019 15.2351 129.162 15.6657C129.305 16.0963 129.357 16.5521 129.313 17.0038C129.358 17.4559 129.306 17.9123 129.164 18.3436C129.021 18.7749 128.789 19.1715 128.484 19.508C128.179 19.8444 127.806 20.1133 127.391 20.2973C126.976 20.4813 126.526 20.5763 126.072 20.5763C125.618 20.5763 125.168 20.4813 124.753 20.2973C124.338 20.1133 123.965 19.8444 123.66 19.508C123.355 19.1715 123.123 18.7749 122.98 18.3436C122.837 17.9123 122.786 17.4559 122.83 17.0038ZM127.918 17.0038C127.918 15.5138 127.249 14.6425 126.074 14.6425C124.895 14.6425 124.232 15.5138 124.232 17.0038C124.232 18.5057 124.895 19.3703 126.074 19.3703C127.249 19.3703 127.918 18.4997 127.918 17.0038ZM132.44 13.5699H131.134V20.4436H132.49V16.4224C132.466 16.1963 132.491 15.9677 132.564 15.7523C132.636 15.5369 132.755 15.3397 132.911 15.1742C133.066 15.0088 133.256 14.879 133.467 14.7938C133.678 14.7085 133.904 14.6699 134.131 14.6805C135.135 14.6805 135.615 15.2298 135.615 16.3344V20.4435H136.971V15.9938C137.02 15.662 136.994 15.3234 136.895 15.0031C136.795 14.6828 136.625 14.389 136.396 14.1435C136.168 13.898 135.887 13.707 135.575 13.5847C135.262 13.4625 134.927 13.4121 134.592 13.4372C134.165 13.4025 133.738 13.5018 133.371 13.7214C133.003 13.9409 132.713 14.2696 132.541 14.6618H132.44V13.5699Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/appletvLight.ts b/src/molecules/appDownloadButton/badges/appletvLight.ts new file mode 100644 index 00000000..f3d868a6 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/appletvLight.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="179" height="58.832" rx="9.5" fill="white" stroke="black"/><path d="M41.4801 28.3756C41.4972 27.0512 41.849 25.7526 42.5028 24.6007C43.1566 23.4488 44.0911 22.481 45.2195 21.7873C44.5027 20.7635 43.557 19.9211 42.4577 19.3267C41.3583 18.7324 40.1355 18.4026 38.8864 18.3635C36.2218 18.0838 33.6385 19.958 32.2807 19.958C30.8966 19.958 28.806 18.3913 26.5548 18.4376C25.0987 18.4846 23.6795 18.9081 22.4357 19.6666C21.1918 20.4252 20.1657 21.4931 19.4573 22.7661C16.3885 28.0794 18.6775 35.888 21.6172 40.1828C23.088 42.2859 24.807 44.635 27.0561 44.5517C29.2571 44.4605 30.0791 43.1483 32.7359 43.1483C35.368 43.1483 36.1392 44.5517 38.434 44.4988C40.7958 44.4605 42.2838 42.3864 43.703 40.2634C44.7597 38.7649 45.5729 37.1088 46.1124 35.3563C44.7403 34.7759 43.5693 33.8045 42.7456 32.5632C41.9218 31.3218 41.4817 29.8654 41.4801 28.3756Z" fill="black"/><path d="M37.1456 15.5389C38.4333 13.993 39.0677 12.0061 38.9141 10C36.9467 10.2066 35.1295 11.1469 33.8243 12.6335C33.1862 13.3597 32.6975 14.2045 32.3861 15.1198C32.0747 16.035 31.9467 17.0026 32.0095 17.9673C32.9936 17.9774 33.9671 17.7641 34.8567 17.3435C35.7464 16.9228 36.529 16.3058 37.1456 15.5389Z" fill="black"/><path d="M67.9105 39.436H60.685L58.9498 44.5596H55.8894L62.7333 25.6036H65.913L72.7568 44.5596H69.6442L67.9105 39.436ZM61.4334 37.0717H67.1608L64.3373 28.7565H64.2583L61.4334 37.0717Z" fill="black"/><path d="M87.5373 37.6502C87.5373 41.9449 85.2386 44.7042 81.7697 44.7042C80.8909 44.7502 80.017 44.5478 79.248 44.1201C78.479 43.6925 77.8459 43.0569 77.4213 42.2862H77.3556V49.1316H74.5188V30.7392H77.2647V33.0379H77.3169C77.7611 32.2709 78.4048 31.6386 79.1797 31.2084C79.9546 30.7781 80.8316 30.566 81.7175 30.5946C85.2251 30.5946 87.5373 33.3673 87.5373 37.6502ZM84.6214 37.6502C84.6214 34.8521 83.1754 33.0125 80.9692 33.0125C78.8017 33.0125 77.3437 34.8908 77.3437 37.6502C77.3437 40.4348 78.8017 42.2997 80.9692 42.2997C83.1754 42.2997 84.6214 40.4736 84.6214 37.6502Z" fill="black"/><path d="M102.748 37.6502C102.748 41.9449 100.45 44.7042 96.9809 44.7042C96.1022 44.7502 95.2283 44.5478 94.4592 44.1201C93.6902 43.6925 93.0571 43.057 92.6325 42.2863H92.5669V49.1316H89.73V30.7392H92.4759V33.0379H92.5281C92.9722 32.2709 93.616 31.6386 94.3909 31.2084C95.1658 30.7782 96.0428 30.566 96.9287 30.5946C100.436 30.5946 102.748 33.3673 102.748 37.6502ZM99.8327 37.6502C99.8327 34.8521 98.3867 33.0126 96.1804 33.0126C94.0129 33.0126 92.555 34.8909 92.555 37.6502C92.555 40.4348 94.0129 42.2997 96.1804 42.2997C98.3867 42.2997 99.8327 40.4736 99.8327 37.6502H99.8327Z" fill="black"/><path d="M105.044 25.6037H107.883V44.5597H105.044V25.6037Z" fill="black"/><path d="M122.654 40.5004C122.272 43.0092 119.829 44.731 116.703 44.731C112.683 44.731 110.187 42.0373 110.187 37.7157C110.187 33.3807 112.696 30.5692 116.584 30.5692C120.408 30.5692 122.812 33.1959 122.812 37.3863V38.3582H113.051V38.5297C113.006 39.0383 113.069 39.5507 113.238 40.0328C113.406 40.5149 113.675 40.9558 114.026 41.326C114.378 41.6962 114.804 41.9874 115.277 42.1802C115.75 42.373 116.258 42.463 116.769 42.4443C117.439 42.5071 118.112 42.3518 118.687 42.0016C119.262 41.6513 119.709 41.1248 119.96 40.5004L122.654 40.5004ZM113.064 36.3756H119.974C119.999 35.9182 119.93 35.4606 119.77 35.0313C119.61 34.6021 119.363 34.2105 119.045 33.8811C118.727 33.5517 118.344 33.2917 117.92 33.1174C117.497 32.943 117.042 32.8581 116.584 32.8679C116.122 32.8652 115.664 32.9539 115.236 33.1291C114.809 33.3042 114.42 33.5623 114.093 33.8884C113.766 34.2145 113.507 34.6022 113.33 35.0291C113.153 35.456 113.063 35.9136 113.064 36.3756V36.3756Z" fill="black"/><path d="M135.517 44.5596V28.1379H129.711V25.6037H144.253V28.1379H138.46V44.5596H135.517Z" fill="black"/><path d="M152.017 44.5596L145.25 25.6036H148.443L153.606 41.2486H153.685L158.86 25.6036H162L155.235 44.5596H152.017Z" fill="black"/><path d="M59.6278 11.3354C60.2225 11.2927 60.8193 11.3826 61.3752 11.5985C61.931 11.8144 62.4319 12.1509 62.8419 12.5839C63.2519 13.0168 63.5607 13.5354 63.746 14.1021C63.9314 14.6689 63.9886 15.2697 63.9136 15.8612C63.9136 18.7711 62.3409 20.4437 59.6278 20.4437H56.3378V11.3354H59.6278ZM57.7525 19.1556H59.4698C59.8948 19.181 60.3201 19.1113 60.7147 18.9517C61.1094 18.792 61.4635 18.5463 61.7512 18.2325C62.0389 17.9187 62.2531 17.5447 62.378 17.1377C62.503 16.7307 62.5356 16.301 62.4736 15.8798C62.5311 15.4602 62.4952 15.0332 62.3683 14.6292C62.2414 14.2252 62.0267 13.8542 61.7397 13.5429C61.4526 13.2316 61.1002 12.9877 60.7078 12.8286C60.3154 12.6694 59.8926 12.5991 59.4698 12.6226H57.7525V19.1556Z" fill="black"/><path d="M65.5117 17.0038C65.4685 16.5521 65.5201 16.0963 65.6634 15.6657C65.8066 15.2351 66.0383 14.8393 66.3435 14.5035C66.6487 14.1677 67.0207 13.8994 67.4357 13.7158C67.8507 13.5322 68.2995 13.4373 68.7532 13.4373C69.207 13.4373 69.6558 13.5322 70.0708 13.7158C70.4857 13.8994 70.8578 14.1677 71.163 14.5035C71.4682 14.8393 71.6998 15.2351 71.8431 15.6657C71.9863 16.0963 72.038 16.5521 71.9948 17.0038C72.0388 17.456 71.9878 17.9124 71.8449 18.3436C71.702 18.7749 71.4705 19.1715 71.1652 19.508C70.8599 19.8444 70.4876 20.1133 70.0722 20.2973C69.6568 20.4813 69.2075 20.5763 68.7532 20.5763C68.2989 20.5763 67.8496 20.4813 67.4342 20.2973C67.0188 20.1133 66.6465 19.8444 66.3412 19.508C66.0359 19.1715 65.8044 18.7749 65.6616 18.3436C65.5187 17.9124 65.4676 17.456 65.5117 17.0038ZM70.5995 17.0038C70.5995 15.5138 69.9301 14.6425 68.7555 14.6425C67.5763 14.6425 66.913 15.5138 66.913 17.0038C66.913 18.5057 67.5764 19.3703 68.7555 19.3703C69.9302 19.3703 70.5995 18.4997 70.5995 17.0038H70.5995Z" fill="black"/><path d="M80.6126 20.4436H79.2054L77.7847 15.3811H77.6774L76.2627 20.4436H74.8689L72.9742 13.5699H74.3501L75.5814 18.8149H75.6828L77.096 13.5699H78.3974L79.8106 18.8149H79.9179L81.1433 13.5699H82.4998L80.6126 20.4436Z" fill="black"/><path d="M84.0934 13.5699H85.3993V14.6618H85.5007C85.6726 14.2696 85.9627 13.9409 86.3303 13.7213C86.698 13.5018 87.1251 13.4025 87.5519 13.4372C87.8863 13.412 88.2222 13.4625 88.5345 13.5847C88.8468 13.707 89.1276 13.898 89.3561 14.1435C89.5846 14.389 89.7549 14.6828 89.8544 15.0031C89.954 15.3234 89.9801 15.662 89.9311 15.9938V20.4435H88.5745V16.3344C88.5745 15.2298 88.0945 14.6805 87.0912 14.6805C86.8642 14.6699 86.6375 14.7085 86.4267 14.7937C86.216 14.879 86.0262 15.0088 85.8703 15.1742C85.7144 15.3397 85.5961 15.5369 85.5236 15.7523C85.451 15.9677 85.4259 16.1963 85.45 16.4223V20.4436H84.0934L84.0934 13.5699Z" fill="black"/><path d="M92.0926 10.8866H93.4491V20.4436H92.0926V10.8866Z" fill="black"/><path d="M95.3349 17.0038C95.2917 16.552 95.3434 16.0962 95.4867 15.6656C95.63 15.235 95.8617 14.8391 96.1669 14.5033C96.4721 14.1675 96.8442 13.8992 97.2592 13.7156C97.6742 13.532 98.123 13.4372 98.5768 13.4372C99.0306 13.4372 99.4794 13.532 99.8944 13.7156C100.309 13.8992 100.681 14.1675 100.987 14.5033C101.292 14.8391 101.524 15.235 101.667 15.6656C101.81 16.0962 101.862 16.552 101.819 17.0038C101.863 17.456 101.812 17.9124 101.669 18.3436C101.526 18.7749 101.294 19.1715 100.989 19.5079C100.684 19.8444 100.311 20.1133 99.8959 20.2972C99.4804 20.4812 99.0311 20.5763 98.5768 20.5763C98.1225 20.5763 97.6732 20.4812 97.2578 20.2972C96.8423 20.1133 96.47 19.8444 96.1647 19.5079C95.8594 19.1715 95.6278 18.7749 95.4849 18.3436C95.342 17.9124 95.2909 17.456 95.3349 17.0038ZM100.423 17.0038C100.423 15.5138 99.7541 14.6425 98.5794 14.6425C97.4003 14.6425 96.737 15.5138 96.737 17.0038C96.737 18.5057 97.4003 19.3703 98.5794 19.3703C99.7541 19.3703 100.423 18.4997 100.423 17.0038Z" fill="black"/><path d="M103.247 18.4997C103.247 17.2624 104.168 16.5491 105.803 16.4477L107.665 16.3404V15.7471C107.665 15.0211 107.185 14.6112 106.258 14.6112C105.501 14.6112 104.976 14.8892 104.826 15.3752H103.512C103.651 14.1945 104.761 13.4373 106.321 13.4373C108.044 13.4373 109.016 14.2951 109.016 15.7471V20.4436H107.71V19.4776H107.603C107.385 19.8241 107.079 20.1066 106.716 20.2962C106.353 20.4858 105.947 20.5758 105.538 20.5569C105.25 20.5869 104.958 20.5561 104.682 20.4665C104.406 20.3769 104.152 20.2305 103.936 20.0366C103.72 19.8428 103.547 19.6059 103.429 19.3412C103.31 19.0765 103.248 18.7898 103.247 18.4997ZM107.665 17.9124V17.3377L105.987 17.445C105.04 17.5084 104.611 17.8304 104.611 18.4363C104.611 19.055 105.148 19.415 105.885 19.415C106.102 19.4369 106.32 19.4151 106.528 19.3508C106.735 19.2866 106.928 19.1812 107.094 19.041C107.26 18.9008 107.396 18.7286 107.494 18.5347C107.592 18.3409 107.651 18.1292 107.665 17.9124Z" fill="black"/><path d="M110.799 17.0038C110.799 14.8318 111.915 13.4559 113.652 13.4559C114.082 13.4361 114.508 13.539 114.881 13.7525C115.254 13.9661 115.559 14.2814 115.76 14.6618H115.861V10.8866H117.218V20.4436H115.918V19.3576H115.811C115.594 19.7354 115.279 20.0468 114.899 20.2582C114.518 20.4696 114.087 20.5729 113.652 20.5568C111.903 20.5569 110.799 19.181 110.799 17.0038ZM112.2 17.0038C112.2 18.4617 112.887 19.339 114.037 19.339C115.18 19.339 115.887 18.449 115.887 17.0097C115.887 15.5772 115.173 14.6745 114.037 14.6745C112.895 14.6745 112.2 15.5578 112.2 17.0038H112.2Z" fill="black"/><path d="M122.83 17.0038C122.787 16.5521 122.839 16.0963 122.982 15.6657C123.125 15.2351 123.357 14.8393 123.662 14.5035C123.967 14.1677 124.339 13.8994 124.754 13.7158C125.169 13.5322 125.618 13.4373 126.072 13.4373C126.526 13.4373 126.974 13.5322 127.389 13.7158C127.804 13.8994 128.176 14.1677 128.482 14.5035C128.787 14.8393 129.019 15.2351 129.162 15.6657C129.305 16.0963 129.357 16.5521 129.313 17.0038C129.358 17.456 129.306 17.9124 129.164 18.3436C129.021 18.7749 128.789 19.1715 128.484 19.508C128.179 19.8444 127.806 20.1133 127.391 20.2973C126.976 20.4813 126.526 20.5763 126.072 20.5763C125.618 20.5763 125.168 20.4813 124.753 20.2973C124.338 20.1133 123.965 19.8444 123.66 19.508C123.355 19.1715 123.123 18.7749 122.98 18.3436C122.837 17.9124 122.786 17.456 122.83 17.0038ZM127.918 17.0038C127.918 15.5138 127.249 14.6425 126.074 14.6425C124.895 14.6425 124.232 15.5138 124.232 17.0038C124.232 18.5057 124.895 19.3703 126.074 19.3703C127.249 19.3703 127.918 18.4997 127.918 17.0038Z" fill="black"/><path d="M131.134 13.5699H132.44V14.6618H132.541C132.713 14.2696 133.003 13.9409 133.371 13.7213C133.738 13.5018 134.165 13.4025 134.592 13.4372C134.927 13.412 135.262 13.4625 135.575 13.5847C135.887 13.707 136.168 13.898 136.396 14.1435C136.625 14.389 136.795 14.6828 136.895 15.0031C136.994 15.3234 137.02 15.662 136.971 15.9938V20.4435H135.615V16.3344C135.615 15.2298 135.135 14.6805 134.131 14.6805C133.904 14.6699 133.678 14.7085 133.467 14.7937C133.256 14.879 133.066 15.0088 132.911 15.1742C132.755 15.3397 132.636 15.5369 132.564 15.7523C132.491 15.9677 132.466 16.1963 132.49 16.4223V20.4436H131.134V13.5699Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/appletvLightClear.ts b/src/molecules/appDownloadButton/badges/appletvLightClear.ts new file mode 100644 index 00000000..f918f998 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/appletvLightClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V49.832C0 55.3549 4.47716 59.832 10 59.832H170C175.523 59.832 180 55.3549 180 49.832V10C180 4.47715 175.523 0 170 0H10ZM42.5028 24.6007C41.849 25.7526 41.4972 27.0512 41.4801 28.3756C41.4817 29.8654 41.9218 31.3218 42.7456 32.5632C43.5693 33.8045 44.7403 34.7759 46.1124 35.3563C45.5729 37.1087 44.7597 38.7649 43.703 40.2634C42.2838 42.3864 40.7958 44.4604 38.434 44.4988C37.3108 44.5247 36.5526 44.2017 35.7625 43.8651C34.9384 43.5141 34.0797 43.1483 32.7359 43.1483C31.3107 43.1483 30.4135 43.5259 29.5482 43.89C28.8004 44.2047 28.0764 44.5094 27.0561 44.5517C24.807 44.635 23.088 42.2859 21.6172 40.1828C18.6775 35.888 16.3885 28.0793 19.4573 22.7661C20.1657 21.4931 21.1918 20.4252 22.4357 19.6666C23.6795 18.9081 25.0987 18.4846 26.5548 18.4376C27.8304 18.4113 29.0545 18.903 30.1277 19.3341C30.9484 19.6637 31.6809 19.958 32.2807 19.958C32.808 19.958 33.52 19.6754 34.3498 19.346C35.657 18.8272 37.2565 18.1924 38.8864 18.3635C40.1355 18.4026 41.3583 18.7324 42.4576 19.3267C43.557 19.9211 44.5027 20.7635 45.2195 21.7873C44.0911 22.481 43.1566 23.4488 42.5028 24.6007ZM37.1456 15.5389C38.4333 13.993 39.0677 12.0061 38.9141 10C36.9467 10.2066 35.1295 11.1469 33.8243 12.6335C33.1862 13.3597 32.6975 14.2045 32.3861 15.1197C32.0747 16.035 31.9467 17.0026 32.0095 17.9673C32.9935 17.9774 33.967 17.7641 34.8567 17.3435C35.7464 16.9228 36.529 16.3058 37.1456 15.5389ZM60.685 39.436H67.9105L69.6442 44.5596H72.7568L65.913 25.6036H62.7333L55.8894 44.5596H58.9498L60.685 39.436ZM67.1608 37.0717H61.4334L64.2583 28.7565H64.3373L67.1608 37.0717ZM87.5372 37.6502C87.5372 41.9449 85.2386 44.7042 81.7697 44.7042C80.8909 44.7502 80.017 44.5478 79.248 44.1201C78.479 43.6925 77.8459 43.057 77.4213 42.2863H77.3556V49.1316H74.5188V30.7392H77.2647V33.0379H77.3169C77.761 32.2709 78.4048 31.6386 79.1797 31.2084C79.9546 30.7781 80.8316 30.566 81.7175 30.5946C85.2251 30.5946 87.5372 33.3673 87.5372 37.6502ZM84.6214 37.6502C84.6214 34.8521 83.1754 33.0125 80.9691 33.0125C78.8017 33.0125 77.3437 34.8908 77.3437 37.6502C77.3437 40.4348 78.8017 42.2997 80.9691 42.2997C83.1754 42.2997 84.6214 40.4736 84.6214 37.6502ZM96.9809 44.7042C100.45 44.7042 102.749 41.9449 102.749 37.6502C102.749 33.3673 100.436 30.5946 96.9287 30.5946C96.0429 30.5661 95.1658 30.7782 94.3909 31.2084C93.616 31.6386 92.9723 32.2709 92.5281 33.0379H92.4759V30.7392H89.7301V49.1316H92.5669V42.2863H92.6325C93.0571 43.057 93.6902 43.6925 94.4593 44.1202C95.2283 44.5478 96.1022 44.7502 96.9809 44.7042ZM96.1804 33.0126C98.3867 33.0126 99.8327 34.8521 99.8327 37.6502C99.8327 40.4736 98.3867 42.2997 96.1804 42.2997C94.0129 42.2997 92.555 40.4348 92.555 37.6502C92.555 34.8909 94.0129 33.0126 96.1804 33.0126ZM105.044 25.6037H107.883V44.5597H105.044V25.6037ZM116.703 44.731C119.829 44.731 122.272 43.0092 122.654 40.5004L119.96 40.5004C119.709 41.1248 119.262 41.6513 118.687 42.0016C118.112 42.3518 117.439 42.5071 116.769 42.4443C116.258 42.463 115.75 42.373 115.277 42.1802C114.804 41.9874 114.378 41.6962 114.026 41.326C113.675 40.9557 113.406 40.5149 113.238 40.0328C113.069 39.5507 113.006 39.0383 113.051 38.5296V38.3582H122.812V37.3863C122.812 33.1959 120.408 30.5692 116.584 30.5692C112.696 30.5692 110.187 33.3807 110.187 37.7157C110.187 42.0373 112.683 44.731 116.703 44.731ZM119.974 36.3756H113.064C113.063 35.9136 113.153 35.456 113.33 35.0291C113.507 34.6022 113.766 34.2145 114.093 33.8884C114.42 33.5623 114.809 33.3042 115.236 33.1291C115.664 32.9539 116.122 32.8652 116.584 32.8679C117.042 32.8581 117.497 32.943 117.92 33.1174C118.344 33.2917 118.727 33.5517 119.045 33.8811C119.363 34.2104 119.61 34.6021 119.77 35.0313C119.93 35.4606 119.999 35.9182 119.974 36.3756ZM135.517 44.5596V28.1379H129.711V25.6037H144.253V28.1379H138.46V44.5596H135.517ZM145.25 25.6036L152.017 44.5596H155.235L162 25.6036H158.861L153.685 41.2486H153.606L148.443 25.6036H145.25ZM59.6278 11.3354C60.2225 11.2927 60.8193 11.3826 61.3752 11.5985C61.931 11.8144 62.4319 12.1509 62.8419 12.5839C63.2519 13.0168 63.5607 13.5354 63.746 14.1021C63.9314 14.6689 63.9886 15.2697 63.9136 15.8612C63.9136 18.7711 62.3409 20.4437 59.6278 20.4437H56.3378V11.3354H59.6278ZM57.7525 19.1556H59.4698C59.8948 19.181 60.3201 19.1113 60.7147 18.9516C61.1094 18.792 61.4635 18.5463 61.7512 18.2325C62.0389 17.9187 62.2531 17.5447 62.378 17.1377C62.503 16.7307 62.5356 16.301 62.4736 15.8798C62.5311 15.4602 62.4952 15.0332 62.3683 14.6292C62.2414 14.2252 62.0267 13.8542 61.7397 13.5429C61.4526 13.2316 61.1002 12.9877 60.7078 12.8286C60.3153 12.6694 59.8926 12.5991 59.4698 12.6226H57.7525V19.1556ZM65.6634 15.6657C65.5201 16.0963 65.4685 16.5521 65.5117 17.0038C65.4676 17.4559 65.5187 17.9123 65.6616 18.3436C65.8044 18.7749 66.0359 19.1715 66.3412 19.508C66.6465 19.8444 67.0188 20.1133 67.4342 20.2973C67.8496 20.4813 68.2989 20.5763 68.7532 20.5763C69.2075 20.5763 69.6568 20.4813 70.0722 20.2973C70.4876 20.1133 70.8599 19.8444 71.1652 19.508C71.4705 19.1715 71.702 18.7749 71.8449 18.3436C71.9878 17.9123 72.0388 17.4559 71.9948 17.0038C72.038 16.5521 71.9863 16.0963 71.8431 15.6657C71.6998 15.2351 71.4682 14.8393 71.163 14.5035C70.8577 14.1677 70.4857 13.8993 70.0708 13.7157C69.6558 13.5321 69.207 13.4373 68.7532 13.4373C68.2994 13.4373 67.8507 13.5321 67.4357 13.7157C67.0207 13.8993 66.6487 14.1677 66.3435 14.5035C66.0383 14.8393 65.8066 15.2351 65.6634 15.6657ZM68.7555 14.6425C69.9301 14.6425 70.5995 15.5138 70.5995 17.0038C70.5995 18.4997 69.9302 19.3703 68.7555 19.3703C67.5764 19.3703 66.913 18.5057 66.913 17.0038C66.913 15.5138 67.5763 14.6425 68.7555 14.6425ZM80.6126 20.4436H79.2054L77.7847 15.3811H77.6774L76.2627 20.4436H74.8689L72.9742 13.5699H74.3501L75.5814 18.8149H75.6828L77.096 13.5699H78.3974L79.8106 18.8149H79.9179L81.1433 13.5699H82.4998L80.6126 20.4436ZM85.3993 13.5699H84.0934L84.0934 20.4436H85.45V16.4224C85.4259 16.1963 85.451 15.9677 85.5236 15.7523C85.5961 15.5369 85.7144 15.3397 85.8703 15.1742C86.0262 15.0088 86.216 14.879 86.4268 14.7938C86.6375 14.7085 86.8642 14.6699 87.0913 14.6805C88.0945 14.6805 88.5745 15.2298 88.5745 16.3344V20.4435H89.9311V15.9938C89.9801 15.662 89.954 15.3234 89.8544 15.0031C89.7549 14.6828 89.5846 14.389 89.3561 14.1435C89.1276 13.898 88.8468 13.707 88.5345 13.5847C88.2222 13.4625 87.8863 13.4121 87.5519 13.4372C87.1251 13.4025 86.698 13.5018 86.3304 13.7214C85.9627 13.9409 85.6726 14.2696 85.5007 14.6618H85.3993V13.5699ZM92.0926 10.8866H93.4491V20.4436H92.0926V10.8866ZM95.4867 15.6656C95.3434 16.0962 95.2917 16.552 95.3349 17.0037C95.2909 17.4559 95.342 17.9123 95.4849 18.3436C95.6278 18.7749 95.8594 19.1715 96.1647 19.5079C96.47 19.8444 96.8423 20.1132 97.2577 20.2972C97.6732 20.4812 98.1225 20.5763 98.5768 20.5763C99.0311 20.5763 99.4804 20.4812 99.8958 20.2972C100.311 20.1132 100.684 19.8444 100.989 19.5079C101.294 19.1715 101.526 18.7749 101.669 18.3436C101.812 17.9123 101.863 17.4559 101.819 17.0037C101.862 16.552 101.81 16.0962 101.667 15.6656C101.524 15.235 101.292 14.8391 100.987 14.5033C100.681 14.1675 100.309 13.8992 99.8944 13.7156C99.4794 13.532 99.0306 13.4372 98.5768 13.4372C98.123 13.4372 97.6742 13.532 97.2592 13.7156C96.8442 13.8992 96.4721 14.1675 96.1669 14.5033C95.8616 14.8391 95.63 15.235 95.4867 15.6656ZM98.5794 14.6425C99.7541 14.6425 100.423 15.5138 100.423 17.0037C100.423 18.4997 99.7541 19.3703 98.5794 19.3703C97.4003 19.3703 96.7369 18.5057 96.7369 17.0038C96.7369 15.5138 97.4003 14.6425 98.5794 14.6425ZM103.247 18.4997C103.247 17.2624 104.168 16.5491 105.803 16.4477L107.665 16.3404V15.7471C107.665 15.0211 107.185 14.6112 106.258 14.6112C105.501 14.6112 104.976 14.8892 104.826 15.3752H103.512C103.651 14.1945 104.761 13.4372 106.321 13.4372C108.044 13.4372 109.016 14.2951 109.016 15.7471V20.4436H107.71V19.4776H107.603C107.385 19.8241 107.079 20.1066 106.716 20.2962C106.353 20.4858 105.947 20.5758 105.538 20.5569C105.25 20.5869 104.958 20.5561 104.682 20.4665C104.406 20.3769 104.152 20.2304 103.936 20.0366C103.72 19.8428 103.547 19.6059 103.429 19.3412C103.31 19.0765 103.248 18.7898 103.247 18.4997ZM107.665 17.9124V17.3377L105.987 17.445C105.04 17.5084 104.611 17.8304 104.611 18.4363C104.611 19.055 105.147 19.415 105.885 19.415C106.102 19.4369 106.32 19.415 106.528 19.3508C106.735 19.2865 106.928 19.1812 107.094 19.041C107.26 18.9008 107.396 18.7286 107.494 18.5347C107.592 18.3408 107.651 18.1292 107.665 17.9124ZM113.652 13.4559C111.915 13.4559 110.799 14.8318 110.799 17.0038C110.799 19.181 111.903 20.5569 113.652 20.5568C114.087 20.5729 114.518 20.4696 114.899 20.2582C115.279 20.0468 115.594 19.7354 115.811 19.3576H115.918V20.4436H117.218V10.8866H115.861V14.6618H115.76C115.559 14.2814 115.254 13.9661 114.881 13.7525C114.508 13.539 114.082 13.4361 113.652 13.4559ZM114.037 19.339C112.887 19.339 112.2 18.4617 112.2 17.0038C112.2 15.5578 112.895 14.6745 114.037 14.6745C115.173 14.6745 115.887 15.5772 115.887 17.0097C115.887 18.449 115.18 19.339 114.037 19.339ZM122.83 17.0038C122.787 16.5521 122.839 16.0963 122.982 15.6657C123.125 15.2351 123.357 14.8393 123.662 14.5035C123.967 14.1677 124.339 13.8993 124.754 13.7157C125.169 13.5321 125.618 13.4373 126.072 13.4373C126.526 13.4373 126.974 13.5321 127.389 13.7157C127.804 13.8993 128.176 14.1677 128.482 14.5035C128.787 14.8393 129.019 15.2351 129.162 15.6657C129.305 16.0963 129.357 16.5521 129.313 17.0038C129.358 17.4559 129.306 17.9123 129.164 18.3436C129.021 18.7749 128.789 19.1715 128.484 19.508C128.179 19.8444 127.806 20.1133 127.391 20.2973C126.976 20.4813 126.526 20.5763 126.072 20.5763C125.618 20.5763 125.168 20.4813 124.753 20.2973C124.338 20.1133 123.965 19.8444 123.66 19.508C123.355 19.1715 123.123 18.7749 122.98 18.3436C122.837 17.9123 122.786 17.4559 122.83 17.0038ZM127.918 17.0038C127.918 15.5138 127.249 14.6425 126.074 14.6425C124.895 14.6425 124.232 15.5138 124.232 17.0038C124.232 18.5057 124.895 19.3703 126.074 19.3703C127.249 19.3703 127.918 18.4997 127.918 17.0038ZM132.44 13.5699H131.134V20.4436H132.49V16.4224C132.466 16.1963 132.491 15.9677 132.564 15.7523C132.636 15.5369 132.755 15.3397 132.911 15.1742C133.066 15.0088 133.256 14.879 133.467 14.7938C133.678 14.7085 133.904 14.6699 134.131 14.6805C135.135 14.6805 135.615 15.2298 135.615 16.3344V20.4435H136.971V15.9938C137.02 15.662 136.994 15.3234 136.895 15.0031C136.795 14.6828 136.625 14.389 136.396 14.1435C136.168 13.898 135.887 13.707 135.575 13.5847C135.262 13.4625 134.927 13.4121 134.592 13.4372C134.165 13.4025 133.738 13.5018 133.371 13.7214C133.003 13.9409 132.713 14.2696 132.541 14.6618H132.44V13.5699Z" fill="white"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/iosDark.ts b/src/molecules/appDownloadButton/badges/iosDark.ts new file mode 100644 index 00000000..7e3ddd36 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/iosDark.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="179" height="58.832" rx="9.5" fill="black" stroke="#A6A6A6"/><path d="M37.2583 28.7955C37.2745 27.5435 37.6079 26.3159 38.2277 25.227C38.8475 24.1381 39.7334 23.2232 40.803 22.5674C40.1235 21.5997 39.2271 20.8033 38.1849 20.2414C37.1428 19.6796 35.9836 19.3678 34.7995 19.3309C32.2736 19.0665 29.8248 20.8381 28.5376 20.8381C27.2255 20.8381 25.2437 19.3571 23.1097 19.4009C21.7293 19.4454 20.384 19.8457 19.2049 20.5628C18.0258 21.2798 17.053 22.2893 16.3815 23.4927C13.4723 28.5154 15.6423 35.8969 18.429 39.9568C19.8232 41.9449 21.4527 44.1655 23.5849 44.0868C25.6713 44.0005 26.4505 42.7601 28.969 42.7601C31.4642 42.7601 32.1953 44.0868 34.3707 44.0367C36.6095 44.0005 38.0201 42.0399 39.3654 40.033C40.3672 38.6165 41.138 37.0509 41.6494 35.3942C40.3487 34.8457 39.2387 33.9274 38.4579 32.7539C37.677 31.5805 37.2598 30.2038 37.2583 28.7955Z" fill="white"/><path d="M33.1493 16.6608C34.37 15.1995 34.9714 13.3212 34.8258 11.4249C32.9608 11.6202 31.2381 12.509 30.0009 13.9143C29.396 14.6008 28.9327 15.3994 28.6375 16.2646C28.3423 17.1297 28.221 18.0444 28.2805 18.9564C29.2134 18.9659 30.1362 18.7643 30.9795 18.3667C31.8229 17.9691 32.5648 17.3858 33.1493 16.6608Z" fill="white"/><path d="M63.6322 39.0539H56.5121L54.8023 44.0886H51.7865L58.5305 25.4616H61.6638L68.4077 44.0886H65.3405L63.6322 39.0539ZM57.2495 36.7307H62.8933L60.1111 28.5598H60.0333L57.2495 36.7307Z" fill="white"/><path d="M82.9725 37.299C82.9725 41.5192 80.7073 44.2307 77.2891 44.2307C76.4232 44.2758 75.562 44.0769 74.8042 43.6567C74.0464 43.2365 73.4226 42.612 73.0042 41.8547H72.9395V48.5812H70.144V30.508H72.8499V32.7668H72.9013C73.339 32.0131 73.9733 31.3918 74.7369 30.969C75.5005 30.5463 76.3647 30.3378 77.2377 30.3659C80.6941 30.3659 82.9725 33.0905 82.9725 37.299ZM80.0992 37.299C80.0992 34.5495 78.6743 32.7419 76.5002 32.7419C74.3644 32.7419 72.9277 34.5876 72.9277 37.299C72.9277 40.0354 74.3644 41.8679 76.5002 41.8679C78.6743 41.8679 80.0992 40.0734 80.0992 37.299Z" fill="white"/><path d="M97.9616 37.299C97.9616 41.5193 95.6965 44.2307 92.2782 44.2307C91.4123 44.2759 90.5512 44.0769 89.7933 43.6567C89.0355 43.2365 88.4117 42.612 87.9933 41.8547H87.9286V48.5813H85.1332V30.508H87.839V32.7668H87.8904C88.3281 32.0131 88.9624 31.3918 89.726 30.9691C90.4896 30.5463 91.3538 30.3379 92.2268 30.3659C95.6833 30.3659 97.9616 33.0905 97.9616 37.299ZM95.0883 37.299C95.0883 34.5495 93.6634 32.7419 91.4894 32.7419C89.3535 32.7419 87.9169 34.5876 87.9169 37.299C87.9169 40.0354 89.3535 41.8679 91.4894 41.8679C93.6635 41.8679 95.0883 40.0735 95.0883 37.299H95.0883Z" fill="white"/><path d="M107.868 38.8986C108.075 40.7458 109.875 41.9586 112.334 41.9586C114.69 41.9586 116.385 40.7458 116.385 39.0802C116.385 37.6344 115.363 36.7687 112.942 36.1754L110.521 35.5939C107.091 34.7677 105.499 33.1681 105.499 30.5724C105.499 27.3585 108.308 25.151 112.296 25.151C116.243 25.151 118.949 27.3585 119.04 30.5724H116.218C116.049 28.7135 114.508 27.5914 112.256 27.5914C110.004 27.5914 108.463 28.7267 108.463 30.379C108.463 31.6959 109.447 32.4708 111.855 33.064L113.913 33.568C117.745 34.4718 119.338 36.007 119.338 38.7315C119.338 42.2164 116.554 44.399 112.127 44.399C107.984 44.399 105.187 42.2677 105.007 38.8985L107.868 38.8986Z" fill="white"/><path d="M125.371 27.2942V30.508H127.961V32.7155H125.371V40.2024C125.371 41.3654 125.889 41.9074 127.028 41.9074C127.335 41.9021 127.642 41.8806 127.947 41.8429V44.0373C127.436 44.1326 126.915 44.1758 126.395 44.1662C123.638 44.1662 122.562 43.1335 122.562 40.4997V32.7155H120.582V30.508H122.562V27.2942H125.371Z" fill="white"/><path d="M129.461 37.299C129.461 33.0261 131.984 30.341 135.92 30.341C139.868 30.341 142.38 33.026 142.38 37.299C142.38 41.5837 139.881 44.257 135.92 44.257C131.959 44.257 129.461 41.5837 129.461 37.299ZM139.532 37.299C139.532 34.3679 138.185 32.6379 135.92 32.6379C133.654 32.6379 132.309 34.3811 132.309 37.299C132.309 40.2419 133.654 41.9587 135.92 41.9587C138.185 41.9587 139.532 40.2419 139.532 37.299H139.532Z" fill="white"/><path d="M144.685 30.508H147.351V32.8195H147.416C147.596 32.0976 148.02 31.4596 148.617 31.0128C149.213 30.5659 149.946 30.3375 150.691 30.3659C151.014 30.3648 151.335 30.3997 151.649 30.4699V33.0773C151.242 32.9534 150.818 32.8965 150.393 32.9089C149.987 32.8925 149.582 32.9639 149.206 33.1182C148.831 33.2725 148.493 33.5061 148.216 33.803C147.939 34.0998 147.73 34.4528 147.603 34.8378C147.476 35.2229 147.434 35.6307 147.48 36.0334V44.0886H144.685L144.685 30.508Z" fill="white"/><path d="M164.538 40.0998C164.162 42.5651 161.754 44.257 158.674 44.257C154.712 44.257 152.253 41.6101 152.253 37.3635C152.253 33.1037 154.725 30.341 158.556 30.341C162.324 30.341 164.693 32.9221 164.693 37.0398V37.9948H155.075V38.1633C155.03 38.6631 155.093 39.1666 155.259 39.6404C155.424 40.1141 155.689 40.5473 156.036 40.9111C156.382 41.2749 156.803 41.5611 157.268 41.7505C157.734 41.94 158.235 42.0284 158.738 42.01C159.399 42.0717 160.062 41.9191 160.628 41.575C161.195 41.2308 161.635 40.7134 161.883 40.0998L164.538 40.0998ZM155.088 36.0466H161.896C161.922 35.5972 161.853 35.1475 161.696 34.7257C161.538 34.3039 161.295 33.9191 160.981 33.5954C160.668 33.2718 160.29 33.0163 159.873 32.8449C159.456 32.6736 159.007 32.5902 158.556 32.5998C158.101 32.5971 157.65 32.6843 157.228 32.8564C156.807 33.0286 156.424 33.2822 156.102 33.6026C155.779 33.9231 155.524 34.304 155.35 34.7235C155.176 35.143 155.087 35.5927 155.088 36.0466V36.0466Z" fill="white"/><path d="M56.8992 11.441C57.4853 11.3991 58.0734 11.4874 58.6211 11.6995C59.1688 11.9117 59.6624 12.2424 60.0664 12.6678C60.4704 13.0932 60.7747 13.6028 60.9573 14.1597C61.14 14.7166 61.1963 15.307 61.1225 15.8883C61.1225 18.7476 59.5727 20.3913 56.8992 20.3913H53.6572V11.441H56.8992ZM55.0513 19.1255H56.7435C57.1623 19.1505 57.5814 19.082 57.9703 18.9251C58.3592 18.7682 58.7081 18.5267 58.9916 18.2184C59.2751 17.91 59.4862 17.5425 59.6093 17.1426C59.7324 16.7427 59.7646 16.3204 59.7034 15.9065C59.7602 15.4943 59.7247 15.0746 59.5997 14.6776C59.4747 14.2806 59.2631 13.9161 58.9803 13.6102C58.6974 13.3043 58.3501 13.0646 57.9634 12.9082C57.5767 12.7519 57.1601 12.6828 56.7435 12.7058H55.0513V19.1255Z" fill="white"/><path d="M62.6972 17.011C62.6546 16.5671 62.7055 16.1193 62.8467 15.6962C62.9878 15.2731 63.2161 14.8841 63.5169 14.5541C63.8176 14.2241 64.1842 13.9605 64.5931 13.78C65.0021 13.5996 65.4443 13.5064 65.8914 13.5064C66.3386 13.5064 66.7808 13.5996 67.1897 13.78C67.5986 13.9605 67.9652 14.2241 68.266 14.5541C68.5667 14.8841 68.795 15.2731 68.9362 15.6962C69.0773 16.1193 69.1282 16.5671 69.0857 17.011C69.1291 17.4553 69.0787 17.9038 68.938 18.3276C68.7972 18.7514 68.569 19.1411 68.2682 19.4717C67.9674 19.8024 67.6005 20.0666 67.1912 20.2474C66.7818 20.4282 66.3391 20.5216 65.8914 20.5216C65.4437 20.5216 65.001 20.4282 64.5917 20.2474C64.1823 20.0666 63.8155 19.8024 63.5146 19.4717C63.2138 19.1411 62.9857 18.7514 62.8449 18.3276C62.7041 17.9038 62.6538 17.4553 62.6972 17.011ZM67.7107 17.011C67.7107 15.5469 67.0511 14.6907 65.8936 14.6907C64.7317 14.6907 64.078 15.5469 64.078 17.011C64.078 18.4869 64.7317 19.3365 65.8936 19.3365C67.0512 19.3364 67.7107 18.481 67.7107 17.011H67.7107Z" fill="white"/><path d="M77.5777 20.3911H76.191L74.7911 15.4165H74.6854L73.2913 20.3911H71.9178L70.0508 13.6367H71.4066L72.62 18.7907H72.7199L74.1125 13.6367H75.3949L76.7874 18.7907H76.8932L78.1007 13.6367H79.4374L77.5777 20.3911Z" fill="white"/><path d="M81.0077 13.6367H82.2945V14.7097H82.3944C82.5638 14.3243 82.8497 14.0013 83.212 13.7856C83.5743 13.5699 83.9951 13.4723 84.4157 13.5063C84.7452 13.4816 85.0762 13.5312 85.3839 13.6513C85.6917 13.7715 85.9684 13.9591 86.1935 14.2004C86.4187 14.4417 86.5865 14.7304 86.6846 15.0451C86.7827 15.3598 86.8085 15.6925 86.7601 16.0185V20.391H85.4234V16.3533C85.4234 15.2678 84.9504 14.728 83.9618 14.728C83.738 14.7176 83.5146 14.7556 83.307 14.8394C83.0993 14.9231 82.9122 15.0506 82.7586 15.2132C82.605 15.3758 82.4885 15.5696 82.417 15.7813C82.3455 15.993 82.3207 16.2176 82.3444 16.4397V20.3911H81.0077L81.0077 13.6367Z" fill="white"/><path d="M88.8901 11H90.2269V20.3911H88.8901V11Z" fill="white"/><path d="M92.0851 17.011C92.0426 16.5671 92.0935 16.1192 92.2347 15.6961C92.3759 15.273 92.6042 14.8839 92.905 14.5539C93.2058 14.224 93.5724 13.9603 93.9814 13.7799C94.3903 13.5995 94.8326 13.5063 95.2798 13.5063C95.7269 13.5063 96.1692 13.5995 96.5781 13.7799C96.9871 13.9603 97.3537 14.224 97.6545 14.5539C97.9553 14.8839 98.1836 15.273 98.3248 15.6961C98.466 16.1192 98.5169 16.5671 98.4744 17.011C98.5177 17.4553 98.4673 17.9038 98.3265 18.3276C98.1857 18.7514 97.9575 19.1411 97.6566 19.4717C97.3558 19.8023 96.9889 20.0665 96.5795 20.2473C96.1702 20.4281 95.7275 20.5215 95.2798 20.5215C94.8321 20.5215 94.3893 20.4281 93.98 20.2473C93.5706 20.0665 93.2037 19.8023 92.9029 19.4717C92.602 19.1411 92.3738 18.7514 92.233 18.3276C92.0922 17.9038 92.0418 17.4553 92.0851 17.011ZM97.0987 17.011C97.0987 15.5469 96.4391 14.6907 95.2816 14.6907C94.1196 14.6907 93.466 15.5469 93.466 17.011C93.466 18.4868 94.1197 19.3364 95.2816 19.3364C96.4391 19.3364 97.0987 18.4809 97.0987 17.011H97.0987Z" fill="white"/><path d="M99.8816 18.481C99.8816 17.2652 100.789 16.5642 102.401 16.4646L104.236 16.3592V15.7761C104.236 15.0628 103.763 14.6599 102.849 14.6599C102.103 14.6599 101.586 14.9331 101.437 15.4107H100.143C100.28 14.2505 101.374 13.5064 102.911 13.5064C104.609 13.5064 105.566 14.3494 105.566 15.7761V20.3911H104.28V19.4419H104.174C103.959 19.7824 103.658 20.06 103.3 20.2463C102.943 20.4326 102.542 20.521 102.139 20.5024C101.855 20.5319 101.568 20.5017 101.296 20.4136C101.024 20.3256 100.773 20.1817 100.561 19.9912C100.348 19.8008 100.178 19.568 100.061 19.3079C99.9437 19.0477 99.8827 18.7661 99.8816 18.481ZM104.236 17.9038V17.3391L102.582 17.4446C101.649 17.5068 101.226 17.8233 101.226 18.4187C101.226 19.0266 101.754 19.3804 102.482 19.3804C102.695 19.4019 102.91 19.3804 103.115 19.3173C103.319 19.2542 103.509 19.1506 103.673 19.0129C103.836 18.8751 103.97 18.7059 104.067 18.5154C104.164 18.3249 104.221 18.1169 104.236 17.9038Z" fill="white"/><path d="M107.323 17.011C107.323 14.8767 108.424 13.5247 110.135 13.5247C110.558 13.5052 110.978 13.6063 111.346 13.8162C111.714 14.026 112.014 14.3359 112.212 14.7097H112.312V11H113.649V20.3911H112.368V19.324H112.262C112.049 19.6952 111.738 20.0012 111.363 20.209C110.988 20.4167 110.564 20.5182 110.135 20.5024C108.412 20.5025 107.323 19.1504 107.323 17.011ZM108.704 17.011C108.704 18.4436 109.381 19.3057 110.514 19.3057C111.641 19.3057 112.337 18.4312 112.337 17.0169C112.337 15.6092 111.633 14.7222 110.514 14.7222C109.389 14.7222 108.704 15.5901 108.704 17.011H108.704Z" fill="white"/><path d="M119.179 17.011C119.137 16.5671 119.188 16.1193 119.329 15.6962C119.47 15.2731 119.698 14.8841 119.999 14.5541C120.3 14.2241 120.666 13.9605 121.075 13.78C121.484 13.5996 121.926 13.5064 122.373 13.5064C122.821 13.5064 123.263 13.5996 123.672 13.78C124.081 13.9605 124.447 14.2241 124.748 14.5541C125.049 14.8841 125.277 15.2731 125.418 15.6962C125.559 16.1193 125.61 16.5671 125.568 17.011C125.611 17.4553 125.561 17.9038 125.42 18.3276C125.279 18.7514 125.051 19.1411 124.75 19.4717C124.449 19.8024 124.083 20.0666 123.673 20.2474C123.264 20.4282 122.821 20.5216 122.373 20.5216C121.926 20.5216 121.483 20.4282 121.074 20.2474C120.664 20.0666 120.298 19.8024 119.997 19.4717C119.696 19.1411 119.468 18.7514 119.327 18.3276C119.186 17.9038 119.136 17.4553 119.179 17.011ZM124.193 17.011C124.193 15.5469 123.533 14.6907 122.376 14.6907C121.214 14.6907 120.56 15.5469 120.56 17.011C120.56 18.4869 121.214 19.3365 122.376 19.3365C123.533 19.3364 124.193 18.481 124.193 17.011Z" fill="white"/><path d="M127.361 13.6367H128.648V14.7097H128.748C128.917 14.3243 129.203 14.0013 129.566 13.7856C129.928 13.5699 130.349 13.4723 130.769 13.5063C131.099 13.4816 131.43 13.5312 131.738 13.6513C132.045 13.7715 132.322 13.9591 132.547 14.2004C132.772 14.4417 132.94 14.7304 133.038 15.0451C133.136 15.3598 133.162 15.6925 133.114 16.0185V20.391H131.777V16.3533C131.777 15.2678 131.304 14.728 130.315 14.728C130.092 14.7176 129.868 14.7556 129.661 14.8394C129.453 14.9231 129.266 15.0506 129.112 15.2132C128.959 15.3758 128.842 15.5696 128.771 15.7813C128.699 15.993 128.674 16.2176 128.698 16.4397V20.3911H127.361V13.6367Z" fill="white"/><path d="M140.667 11.9551V13.6675H142.135V14.7903H140.667V18.2634C140.667 18.971 140.959 19.2808 141.625 19.2808C141.795 19.2802 141.965 19.2699 142.135 19.25V20.3603C141.895 20.4032 141.651 20.426 141.408 20.4285C139.921 20.4285 139.329 19.907 139.329 18.6047V14.7902H138.254V13.6674H139.329V11.9551H140.667Z" fill="white"/><path d="M143.961 11H145.286V14.7222H145.391C145.569 14.3332 145.863 14.0083 146.232 13.7918C146.602 13.5753 147.029 13.4776 147.457 13.5122C147.784 13.4944 148.112 13.549 148.416 13.6721C148.721 13.7951 148.994 13.9836 149.217 14.2241C149.44 14.4647 149.606 14.7512 149.705 15.0634C149.804 15.3756 149.833 15.7058 149.789 16.0303V20.3911H148.451V16.3591C148.451 15.2803 147.947 14.7339 147.003 14.7339C146.773 14.7151 146.542 14.7466 146.326 14.8262C146.109 14.9057 145.913 15.0315 145.751 15.1946C145.588 15.3577 145.464 15.5542 145.385 15.7704C145.307 15.9866 145.277 16.2173 145.297 16.4463V20.3911H143.961L143.961 11Z" fill="white"/><path d="M157.584 18.5674C157.402 19.1847 157.009 19.7187 156.472 20.0759C155.935 20.4331 155.29 20.5908 154.649 20.5215C154.202 20.5332 153.759 20.448 153.349 20.2717C152.939 20.0954 152.573 19.8323 152.275 19.5006C151.977 19.1689 151.755 18.7765 151.625 18.3508C151.495 17.925 151.459 17.4761 151.52 17.0351C151.46 16.5928 151.497 16.1429 151.627 15.7159C151.757 15.2889 151.978 14.8948 152.274 14.5601C152.57 14.2255 152.935 13.9583 153.343 13.7765C153.752 13.5947 154.195 13.5025 154.643 13.5063C156.527 13.5063 157.664 14.7903 157.664 16.9113V17.3765H152.882V17.4512C152.861 17.699 152.892 17.9485 152.973 18.1837C153.055 18.4188 153.184 18.6344 153.354 18.8165C153.524 18.9987 153.73 19.1435 153.959 19.2416C154.189 19.3397 154.436 19.3889 154.685 19.3862C155.005 19.4245 155.329 19.367 155.616 19.2212C155.903 19.0754 156.14 18.8478 156.297 18.5673L157.584 18.5674ZM152.881 16.3906H156.303C156.32 16.1639 156.289 15.9362 156.212 15.7221C156.135 15.5081 156.015 15.3123 155.858 15.1476C155.701 14.9828 155.511 14.8526 155.3 14.7653C155.09 14.678 154.863 14.6357 154.635 14.6409C154.404 14.638 154.175 14.6813 153.961 14.7682C153.746 14.8551 153.552 14.9839 153.388 15.1469C153.225 15.31 153.096 15.5041 153.009 15.7177C152.922 15.9313 152.878 16.1601 152.882 16.3906H152.881Z" fill="white"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/iosDarkClear.ts b/src/molecules/appDownloadButton/badges/iosDarkClear.ts new file mode 100644 index 00000000..cd9ae4e4 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/iosDarkClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V49.832C0 55.3549 4.47716 59.832 10 59.832H170C175.523 59.832 180 55.3549 180 49.832V10C180 4.47715 175.523 0 170 0H10ZM39.1544 25.3528C38.5099 26.4852 38.1631 27.7617 38.1463 29.0636C38.1479 30.5281 38.5817 31.9598 39.3937 33.18C40.2058 34.4003 41.36 35.3552 42.7126 35.9257C42.1808 37.6484 41.3792 39.2765 40.3375 40.7495C38.9384 42.8364 37.4716 44.8753 35.1434 44.913C34.0362 44.9385 33.2888 44.6209 32.5099 44.2901C31.6975 43.945 30.851 43.5854 29.5263 43.5854C28.1214 43.5854 27.237 43.9566 26.384 44.3146C25.6468 44.6239 24.9331 44.9234 23.9273 44.965C21.7101 45.0469 20.0156 42.7377 18.5658 40.6703C15.6679 36.4484 13.4114 28.7723 16.4365 23.5493C17.1349 22.2979 18.1465 21.2482 19.3726 20.5025C20.5988 19.7568 21.9977 19.3405 23.4332 19.2943C24.6907 19.2685 25.8974 19.7518 26.9553 20.1755C27.7643 20.4996 28.4864 20.7888 29.0777 20.7888C29.5975 20.7888 30.2994 20.511 31.1174 20.1873C32.406 19.6773 33.9827 19.0533 35.5894 19.2214C36.8208 19.2599 38.0262 19.5841 39.1099 20.1683C40.1937 20.7525 41.1259 21.5807 41.8325 22.5871C40.7202 23.269 39.7989 24.2204 39.1544 25.3528ZM33.8734 16.4448C35.1428 14.9252 35.7682 12.972 35.6168 11C33.6774 11.2031 31.886 12.1274 30.5994 13.5887C29.9704 14.3026 29.4886 15.1331 29.1816 16.0328C28.8746 16.9325 28.7485 17.8837 28.8104 18.832C29.7804 18.8419 30.7401 18.6323 31.6171 18.2188C32.4941 17.8053 33.2655 17.1987 33.8734 16.4448ZM57.0567 39.9391H64.1768L65.8852 44.9738H68.9523L62.2084 26.3468H59.0751L52.3311 44.9738H55.3469L57.0567 39.9391ZM63.438 37.6159H57.7942L60.5778 29.445H60.6557L63.438 37.6159ZM83.517 38.1842C83.517 42.4044 81.2519 45.1159 77.8337 45.1159C76.9678 45.161 76.1066 44.9621 75.3488 44.5419C74.591 44.1217 73.9671 43.4972 73.5487 42.7399H73.484V49.4664H70.6886V31.3932H73.3944V33.652H73.4458C73.8835 32.8983 74.5179 32.277 75.2815 31.8542C76.045 31.4315 76.9093 31.223 77.7822 31.2511C81.2387 31.2511 83.517 33.9757 83.517 38.1842ZM80.6438 38.1842C80.6438 35.4347 79.2189 33.6271 77.0448 33.6271C74.909 33.6271 73.4723 35.4728 73.4723 38.1842C73.4723 40.9206 74.909 42.7531 77.0448 42.7531C79.2189 42.7531 80.6437 40.9586 80.6437 38.1842H80.6438ZM92.8229 45.1159C96.2411 45.1159 98.507 42.4044 98.507 38.1842C98.507 33.9757 96.2279 31.2511 92.7714 31.2511C91.8985 31.223 91.0343 31.4315 90.2707 31.8542C89.5071 32.277 88.8727 32.8983 88.4351 33.652H88.3837V31.3932H85.6778V49.4664H88.4733V42.7399H88.5379C88.9564 43.4972 89.5802 44.1217 90.338 44.5419C91.0958 44.9621 91.957 45.161 92.8229 45.1159ZM92.0341 33.6271C94.2081 33.6271 95.633 35.4347 95.633 38.1842C95.633 40.9586 94.2081 42.7531 92.0341 42.7531C89.8982 42.7531 88.4616 40.9206 88.4616 38.1842C88.4616 35.4728 89.8982 33.6271 92.0341 33.6271ZM108.412 39.7838C108.619 41.631 110.419 42.8438 112.878 42.8438C115.234 42.8438 116.929 41.6309 116.929 39.9654C116.929 38.5196 115.907 37.6539 113.486 37.0606L111.065 36.4791C107.635 35.6529 106.043 34.0533 106.043 31.4576C106.043 28.2437 108.851 26.0362 112.838 26.0362C116.787 26.0362 119.493 28.2437 119.584 31.4576H116.762C116.593 29.5987 115.052 28.4766 112.8 28.4766C110.548 28.4766 109.007 29.6119 109.007 31.2642C109.007 32.5811 109.991 33.356 112.399 33.9492L114.457 34.4531C118.289 35.3569 119.88 36.8921 119.88 39.6167C119.88 43.1016 117.098 45.2842 112.671 45.2842C108.528 45.2842 105.731 43.1528 105.551 39.7837L108.412 39.7838ZM125.916 31.3932V28.1793H123.108V31.3932H121.127V33.6007H123.108V41.3849C123.108 44.0186 124.183 45.0514 126.94 45.0514C127.461 45.061 127.981 45.0178 128.493 44.9225V42.7281C128.188 42.7657 127.881 42.7873 127.573 42.7926C126.435 42.7926 125.916 42.2506 125.916 41.0875V33.6007H128.506V31.3932H125.916ZM130.004 38.1842C130.004 33.9113 132.528 31.2262 136.463 31.2262C140.412 31.2262 142.924 33.9112 142.924 38.1842C142.924 42.4689 140.425 45.1422 136.463 45.1422C132.503 45.1422 130.004 42.4689 130.004 38.1842ZM140.076 38.1842C140.076 35.2531 138.729 33.5231 136.463 33.5231C134.198 33.5231 132.851 35.2663 132.851 38.1842C132.851 41.1271 134.198 42.8439 136.463 42.8439C138.729 42.8439 140.076 41.1271 140.076 38.1842ZM147.895 31.3932H145.229L145.229 44.9738H148.024V36.9186C147.978 36.5159 148.02 36.108 148.147 35.723C148.274 35.338 148.483 34.985 148.76 34.6881C149.037 34.3913 149.374 34.1577 149.75 34.0034C150.126 33.849 150.531 33.7776 150.937 33.7941C151.362 33.7817 151.786 33.8386 152.193 33.9625V31.3551C151.879 31.2849 151.557 31.25 151.235 31.2511C150.49 31.2227 149.757 31.4511 149.161 31.8979C148.564 32.3448 148.14 32.9828 147.959 33.7047H147.895V31.3932ZM165.082 40.985C164.706 43.4503 162.298 45.1422 159.217 45.1422C155.256 45.1422 152.797 42.4952 152.797 38.2487C152.797 33.9889 155.269 31.2262 159.1 31.2262C162.868 31.2262 165.237 33.8073 165.237 37.9249V38.88H155.619V39.0485C155.574 39.5483 155.637 40.0518 155.803 40.5255C155.968 40.9993 156.233 41.4325 156.58 41.7963C156.926 42.1601 157.346 42.4463 157.812 42.6357C158.278 42.8252 158.779 42.9136 159.282 42.8951C159.943 42.9569 160.606 42.8043 161.172 42.4601C161.739 42.116 162.179 41.5986 162.427 40.985L165.082 40.985ZM155.632 36.9318H162.44C162.465 36.4824 162.397 36.0327 162.24 35.6109C162.082 35.189 161.839 34.8042 161.525 34.4806C161.212 34.1569 160.834 33.9014 160.417 33.7301C160 33.5588 159.551 33.4753 159.1 33.485C158.645 33.4823 158.193 33.5695 157.772 33.7416C157.351 33.9137 156.968 34.1673 156.646 34.4878C156.323 34.8082 156.068 35.1892 155.894 35.6087C155.72 36.0281 155.631 36.4778 155.632 36.9318ZM59.1664 12.5846C58.6187 12.3725 58.0306 12.2842 57.4445 12.3261H54.2025V21.2764H57.4445C60.118 21.2764 61.6678 19.6328 61.6678 16.7734C61.7417 16.1921 61.6853 15.6017 61.5027 15.0448C61.32 14.4879 61.0158 13.9784 60.6118 13.5529C60.2077 13.1275 59.7141 12.7968 59.1664 12.5846ZM57.2888 20.0106H55.5966V13.5909H57.2888C57.7055 13.5679 58.122 13.637 58.5087 13.7934C58.8954 13.9497 59.2427 14.1894 59.5256 14.4953C59.8085 14.8012 60.02 15.1657 60.145 15.5627C60.2701 15.9597 60.3055 16.3794 60.2488 16.7916C60.3099 17.2055 60.2778 17.6278 60.1546 18.0277C60.0315 18.4276 59.8205 18.7952 59.5369 19.1035C59.2534 19.4119 58.9045 19.6533 58.5156 19.8102C58.1267 19.9671 57.7076 20.0356 57.2888 20.0106ZM63.2425 17.8961C63.1999 17.4523 63.2508 17.0044 63.392 16.5813C63.5331 16.1582 63.7614 15.7692 64.0622 15.4392C64.3629 15.1092 64.7295 14.8456 65.1385 14.6652C65.5474 14.4848 65.9896 14.3916 66.4367 14.3916C66.8839 14.3916 67.3261 14.4848 67.735 14.6652C68.144 14.8456 68.5106 15.1092 68.8113 15.4392C69.1121 15.7692 69.3403 16.1582 69.4815 16.5813C69.6227 17.0044 69.6736 17.4523 69.631 17.8961C69.6744 18.3405 69.6241 18.7889 69.4833 19.2127C69.3425 19.6365 69.1144 20.0262 68.8135 20.3569C68.5127 20.6875 68.1458 20.9517 67.7365 21.1325C67.3272 21.3133 66.8844 21.4067 66.4367 21.4067C65.9891 21.4067 65.5463 21.3133 65.137 21.1325C64.7277 20.9517 64.3608 20.6875 64.06 20.3569C63.7591 20.0262 63.531 19.6365 63.3902 19.2127C63.2494 18.7889 63.1991 18.3405 63.2425 17.8961ZM68.256 17.8961C68.256 16.432 67.5965 15.5758 66.4389 15.5758C65.277 15.5758 64.6234 16.432 64.6234 17.8962C64.6234 19.372 65.277 20.2216 66.4389 20.2216C67.5965 20.2216 68.2561 19.3661 68.256 17.8961ZM76.7363 21.2762H78.123L79.9827 14.5219H78.646L77.4385 19.6759H77.3327L75.9402 14.5219H74.6578L73.2652 19.6759H73.1653L71.952 14.5219H70.5961L72.4631 21.2762H73.8366L75.2307 16.3016H75.3364L76.7363 21.2762ZM81.5531 14.5218H82.8398V15.5948H82.9397C83.1092 15.2095 83.395 14.8864 83.7573 14.6707C84.1196 14.455 84.5404 14.3574 84.961 14.3915C85.2906 14.3668 85.6215 14.4163 85.9293 14.5365C86.237 14.6566 86.5137 14.8443 86.7389 15.0855C86.9641 15.3268 87.1319 15.6155 87.23 15.9302C87.328 16.2449 87.3538 16.5776 87.3055 16.9037V21.2762H85.9687V17.2384C85.9687 16.153 85.4957 15.6132 84.5071 15.6132C84.2833 15.6028 84.06 15.6407 83.8523 15.7245C83.6446 15.8082 83.4576 15.9358 83.304 16.0983C83.1504 16.2609 83.0338 16.4547 82.9623 16.6664C82.8908 16.8781 82.8661 17.1027 82.8898 17.3248V21.2762H81.553L81.5531 14.5218ZM90.7722 11.8851H89.4355V21.2762H90.7722V11.8851ZM92.6304 17.8961C92.5879 17.4522 92.6388 17.0043 92.78 16.5812C92.9212 16.1581 93.1495 15.7691 93.4503 15.4391C93.7511 15.1091 94.1177 14.8454 94.5267 14.665C94.9356 14.4846 95.3779 14.3914 95.825 14.3914C96.2722 14.3914 96.7145 14.4846 97.1234 14.665C97.5324 14.8454 97.899 15.1091 98.1998 15.4391C98.5006 15.7691 98.7289 16.1581 98.8701 16.5812C99.0112 17.0043 99.0622 17.4522 99.0196 17.8961C99.063 18.3405 99.0126 18.7889 98.8718 19.2127C98.731 19.6365 98.5028 20.0262 98.2019 20.3568C97.9011 20.6875 97.5342 20.9516 97.1248 21.1324C96.7155 21.3132 96.2727 21.4066 95.825 21.4066C95.3773 21.4066 94.9346 21.3132 94.5252 21.1324C94.1159 20.9516 93.749 20.6875 93.4481 20.3568C93.1473 20.0262 92.9191 19.6365 92.7783 19.2127C92.6375 18.7889 92.5871 18.3405 92.6304 17.8961ZM97.644 17.8961C97.644 16.432 96.9844 15.5758 95.8269 15.5758C94.6649 15.5758 94.0113 16.432 94.0113 17.8961C94.0113 19.372 94.665 20.2216 95.8269 20.2216C96.9844 20.2215 97.644 19.3661 97.644 17.8961ZM102.946 17.3498C101.335 17.4494 100.427 18.1503 100.427 19.3661C100.428 19.6512 100.489 19.9329 100.606 20.193C100.723 20.4531 100.893 20.6859 101.106 20.8764C101.319 21.0668 101.569 21.2107 101.841 21.2987C102.113 21.3868 102.4 21.417 102.685 21.3876C103.088 21.4061 103.488 21.3177 103.846 21.1314C104.203 20.9451 104.505 20.6675 104.719 20.3271H104.825V21.2763H106.112V16.6613C106.112 15.2345 105.154 14.3915 103.456 14.3915C101.919 14.3915 100.825 15.1356 100.688 16.2958H101.983C102.131 15.8183 102.648 15.5451 103.394 15.5451C104.308 15.5451 104.781 15.9479 104.781 16.6613V17.2443L102.946 17.3498ZM104.781 18.2243V18.789C104.766 19.002 104.709 19.21 104.612 19.4005C104.516 19.5911 104.381 19.7602 104.218 19.898C104.054 20.0358 103.864 20.1393 103.66 20.2024C103.455 20.2656 103.24 20.287 103.027 20.2655C102.3 20.2655 101.771 19.9117 101.771 19.3038C101.771 18.7084 102.194 18.392 103.127 18.3297L104.781 18.2243ZM107.869 17.8961C107.869 15.7619 108.969 14.4098 110.68 14.4098C111.104 14.3903 111.524 14.4915 111.891 14.7013C112.259 14.9111 112.56 15.221 112.757 15.5948H112.857V11.8851H114.194V21.2762H112.913V20.2091H112.807C112.594 20.5803 112.283 20.8864 111.909 21.0941C111.534 21.3018 111.109 21.4033 110.68 21.3875C108.957 21.3876 107.869 20.0355 107.869 17.8961ZM109.25 17.8961C109.25 19.3287 109.927 20.1908 111.059 20.1908C112.186 20.1908 112.882 19.3163 112.882 17.902C112.882 16.4943 112.179 15.6073 111.059 15.6073C109.934 15.6073 109.249 16.4752 109.25 17.8961ZM119.874 16.5813C119.733 17.0044 119.682 17.4523 119.725 17.8961C119.681 18.3405 119.731 18.7889 119.872 19.2127C120.013 19.6365 120.241 20.0262 120.542 20.3569C120.843 20.6875 121.21 20.9517 121.619 21.1325C122.028 21.3133 122.471 21.4067 122.919 21.4067C123.367 21.4067 123.809 21.3133 124.219 21.1325C124.628 20.9517 124.995 20.6875 125.296 20.3569C125.596 20.0262 125.825 19.6365 125.965 19.2127C126.106 18.7889 126.156 18.3405 126.113 17.8961C126.156 17.4523 126.105 17.0044 125.964 16.5813C125.822 16.1582 125.594 15.7692 125.293 15.4392C124.993 15.1092 124.626 14.8456 124.217 14.6652C123.808 14.4848 123.366 14.3916 122.919 14.3916C122.472 14.3916 122.029 14.4848 121.621 14.6652C121.212 14.8456 120.845 15.1092 120.544 15.4392C120.244 15.7692 120.015 16.1582 119.874 16.5813ZM122.921 15.5758C124.079 15.5758 124.738 16.432 124.738 17.8961C124.738 19.3661 124.079 20.2216 122.921 20.2216C121.759 20.2216 121.105 19.372 121.105 17.8962C121.105 16.432 121.759 15.5758 122.921 15.5758ZM127.907 14.5218H129.193V15.5948H129.293C129.463 15.2095 129.749 14.8864 130.111 14.6707C130.473 14.455 130.894 14.3574 131.315 14.3915C131.644 14.3668 131.975 14.4163 132.283 14.5365C132.591 14.6566 132.867 14.8443 133.093 15.0855C133.318 15.3268 133.486 15.6155 133.584 15.9302C133.682 16.2449 133.707 16.5776 133.659 16.9037V21.2762H132.322V17.2384C132.322 16.153 131.849 15.6132 130.861 15.6132C130.637 15.6028 130.414 15.6407 130.206 15.7245C129.998 15.8082 129.811 15.9358 129.658 16.0983C129.504 16.2609 129.387 16.4547 129.316 16.6664C129.244 16.8781 129.22 17.1027 129.243 17.3248V21.2762H127.907V14.5218ZM141.212 14.5526V12.8402H139.874V14.5525H138.799V15.6753H139.874V19.4898C139.874 20.7921 140.466 21.3136 141.953 21.3136C142.197 21.3111 142.44 21.2883 142.68 21.2455V20.1351C142.511 20.1551 142.341 20.1653 142.17 20.1659C141.505 20.1659 141.212 19.8561 141.212 19.1486V15.6754H142.68V14.5526H141.212ZM144.506 11.8851H145.831V15.6073H145.937C146.114 15.2183 146.408 14.8934 146.778 14.6769C147.147 14.4604 147.575 14.3628 148.002 14.3973C148.33 14.3795 148.658 14.4341 148.962 14.5572C149.266 14.6803 149.539 14.8688 149.762 15.1093C149.985 15.3498 150.152 15.6364 150.251 15.9486C150.35 16.2608 150.378 16.5909 150.335 16.9154V21.2762H148.997V17.2442C148.997 16.1654 148.493 15.619 147.548 15.619C147.318 15.6002 147.087 15.6317 146.871 15.7113C146.655 15.7909 146.459 15.9166 146.296 16.0797C146.134 16.2428 146.009 16.4393 145.931 16.6556C145.852 16.8718 145.822 17.1024 145.843 17.3314V21.2762H144.506L144.506 11.8851ZM157.017 20.961C157.554 20.6038 157.947 20.0698 158.129 19.4525L156.842 19.4525C156.685 19.7329 156.448 19.9606 156.161 20.1064C155.874 20.2522 155.55 20.3096 155.231 20.2713C154.981 20.2741 154.734 20.2248 154.505 20.1267C154.276 20.0286 154.069 19.8839 153.9 19.7017C153.73 19.5195 153.6 19.3039 153.519 19.0688C153.437 18.8337 153.406 18.5842 153.427 18.3363V18.2616H158.21V17.7965C158.21 15.6755 157.073 14.3915 155.188 14.3915C154.741 14.3877 154.298 14.4798 153.889 14.6616C153.48 14.8434 153.115 15.1107 152.819 15.4453C152.523 15.7799 152.302 16.174 152.172 16.601C152.042 17.0281 152.006 17.478 152.065 17.9203C152.004 18.3613 152.04 18.8102 152.17 19.2359C152.301 19.6616 152.523 20.054 152.82 20.3857C153.118 20.7174 153.484 20.9805 153.894 21.1568C154.304 21.3331 154.748 21.4183 155.194 21.4066C155.835 21.476 156.481 21.3182 157.017 20.961ZM156.848 17.2757H153.427C153.424 17.0452 153.467 16.8164 153.554 16.6028C153.641 16.3892 153.77 16.1952 153.934 16.0321C154.097 15.869 154.292 15.7402 154.506 15.6533C154.72 15.5664 154.95 15.5231 155.181 15.526C155.409 15.5208 155.635 15.5632 155.846 15.6504C156.056 15.7377 156.246 15.8679 156.403 16.0327C156.56 16.1975 156.681 16.3932 156.757 16.6073C156.834 16.8214 156.865 17.0491 156.848 17.2757Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/iosLight.ts b/src/molecules/appDownloadButton/badges/iosLight.ts new file mode 100644 index 00000000..8df9feee --- /dev/null +++ b/src/molecules/appDownloadButton/badges/iosLight.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="179" height="58.832" rx="9.5" fill="white" stroke="black"/><path d="M38.1463 29.0636C38.1631 27.7617 38.5099 26.4851 39.1544 25.3528C39.7989 24.2204 40.7202 23.269 41.8325 22.5871C41.1259 21.5807 40.1937 20.7525 39.1099 20.1683C38.0262 19.584 36.8208 19.2598 35.5894 19.2214C32.9627 18.9465 30.4162 20.7888 29.0777 20.7888C27.7133 20.7888 25.6524 19.2487 23.4332 19.2943C21.9977 19.3405 20.5988 19.7567 19.3726 20.5024C18.1465 21.2481 17.1349 22.2979 16.4365 23.5493C13.4114 28.7723 15.6679 36.4484 18.5658 40.6703C20.0156 42.7376 21.7101 45.0469 23.9273 44.965C26.097 44.8753 26.9073 43.5854 29.5263 43.5854C32.121 43.5854 32.8812 44.965 35.1434 44.913C37.4716 44.8753 38.9384 42.8364 40.3375 40.7495C41.3792 39.2765 42.1808 37.6484 42.7126 35.9257C41.36 35.3552 40.2058 34.4003 39.3937 33.18C38.5817 31.9598 38.1479 30.5281 38.1463 29.0636Z" fill="black"/><path d="M33.8734 16.4448C35.1428 14.9252 35.7682 12.972 35.6168 11C33.6774 11.2031 31.886 12.1274 30.5994 13.5887C29.9704 14.3026 29.4886 15.1331 29.1816 16.0328C28.8746 16.9325 28.7485 17.8837 28.8104 18.832C29.7804 18.8419 30.7401 18.6323 31.6171 18.2188C32.4941 17.8053 33.2655 17.1987 33.8734 16.4448Z" fill="black"/><path d="M64.1768 39.9391H57.0567L55.3469 44.9738H52.3311L59.0751 26.3468H62.2084L68.9523 44.9738H65.8852L64.1768 39.9391ZM57.7942 37.6159H63.438L60.6557 29.445H60.5778L57.7942 37.6159Z" fill="black"/><path d="M83.517 38.1842C83.517 42.4044 81.2519 45.1159 77.8336 45.1159C76.9677 45.161 76.1066 44.9621 75.3488 44.5419C74.591 44.1217 73.9671 43.4972 73.5487 42.7399H73.484V49.4664H70.6886V31.3932H73.3944V33.652H73.4458C73.8835 32.8983 74.5179 32.277 75.2814 31.8542C76.045 31.4315 76.9093 31.223 77.7822 31.2511C81.2387 31.2511 83.517 33.9757 83.517 38.1842ZM80.6437 38.1842C80.6437 35.4347 79.2189 33.6271 77.0448 33.6271C74.9089 33.6271 73.4723 35.4728 73.4723 38.1842C73.4723 40.9206 74.9089 42.7531 77.0448 42.7531C79.2189 42.7531 80.6437 40.9586 80.6437 38.1842H80.6437Z" fill="black"/><path d="M98.507 38.1842C98.507 42.4044 96.2412 45.1159 92.8229 45.1159C91.957 45.161 91.0958 44.9621 90.338 44.5419C89.5802 44.1217 88.9564 43.4972 88.538 42.7399H88.4733V49.4664H85.6779V31.3932H88.3837V33.652H88.4351C88.8727 32.8983 89.5071 32.277 90.2707 31.8542C91.0343 31.4315 91.8985 31.223 92.7714 31.2511C96.2279 31.2511 98.507 33.9757 98.507 38.1842ZM95.633 38.1842C95.633 35.4347 94.2081 33.6271 92.0341 33.6271C89.8982 33.6271 88.4616 35.4728 88.4616 38.1842C88.4616 40.9206 89.8982 42.7531 92.0341 42.7531C94.2081 42.7531 95.633 40.9586 95.633 38.1842Z" fill="black"/><path d="M108.412 39.7838C108.619 41.631 110.419 42.8438 112.878 42.8438C115.234 42.8438 116.929 41.6309 116.929 39.9654C116.929 38.5196 115.907 37.6539 113.486 37.0606L111.065 36.4791C107.635 35.6529 106.043 34.0533 106.043 31.4576C106.043 28.2437 108.851 26.0362 112.838 26.0362C116.787 26.0362 119.493 28.2437 119.584 31.4576H116.762C116.593 29.5987 115.052 28.4766 112.8 28.4766C110.548 28.4766 109.007 29.6119 109.007 31.2642C109.007 32.5811 109.991 33.356 112.399 33.9492L114.457 34.4531C118.289 35.357 119.88 36.8921 119.88 39.6167C119.88 43.1016 117.098 45.2842 112.671 45.2842C108.528 45.2842 105.731 43.1528 105.551 39.7837L108.412 39.7838Z" fill="black"/><path d="M125.916 28.1794V31.3932H128.506V33.6007H125.916V41.0876C125.916 42.2506 126.435 42.7926 127.573 42.7926C127.881 42.7873 128.188 42.7658 128.493 42.7281V44.9225C127.981 45.0178 127.461 45.061 126.94 45.0514C124.183 45.0514 123.108 44.0187 123.108 41.3849V33.6007H121.127V31.3932H123.108V28.1794H125.916Z" fill="black"/><path d="M130.004 38.1842C130.004 33.9113 132.528 31.2262 136.463 31.2262C140.412 31.2262 142.924 33.9112 142.924 38.1842C142.924 42.4689 140.425 45.1422 136.463 45.1422C132.503 45.1422 130.004 42.4689 130.004 38.1842ZM140.076 38.1842C140.076 35.2531 138.729 33.5231 136.463 33.5231C134.198 33.5231 132.851 35.2663 132.851 38.1842C132.851 41.1271 134.198 42.8439 136.463 42.8439C138.729 42.8439 140.076 41.1271 140.076 38.1842H140.076Z" fill="black"/><path d="M145.229 31.3932H147.895V33.7047H147.959C148.14 32.9828 148.564 32.3448 149.161 31.898C149.757 31.4511 150.49 31.2227 151.235 31.2511C151.557 31.25 151.879 31.2849 152.193 31.3551V33.9625C151.786 33.8386 151.362 33.7817 150.937 33.7941C150.531 33.7777 150.126 33.8491 149.75 34.0034C149.374 34.1577 149.037 34.3913 148.76 34.6882C148.483 34.985 148.274 35.338 148.147 35.723C148.02 36.108 147.978 36.5159 148.024 36.9186V44.9738H145.229L145.229 31.3932Z" fill="black"/><path d="M165.082 40.985C164.706 43.4503 162.298 45.1422 159.217 45.1422C155.256 45.1422 152.797 42.4953 152.797 38.2487C152.797 33.9889 155.269 31.2262 159.1 31.2262C162.868 31.2262 165.237 33.8073 165.237 37.925V38.88H155.619V39.0485C155.574 39.5483 155.637 40.0518 155.803 40.5255C155.968 40.9993 156.233 41.4325 156.58 41.7963C156.926 42.1601 157.346 42.4463 157.812 42.6357C158.278 42.8252 158.779 42.9136 159.282 42.8952C159.943 42.9569 160.606 42.8043 161.172 42.4602C161.739 42.116 162.179 41.5986 162.427 40.985L165.082 40.985ZM155.632 36.9318H162.44C162.465 36.4824 162.397 36.0327 162.24 35.6109C162.082 35.1891 161.839 34.8042 161.525 34.4806C161.212 34.1569 160.834 33.9014 160.417 33.7301C160 33.5588 159.551 33.4753 159.1 33.485C158.645 33.4823 158.194 33.5695 157.772 33.7416C157.351 33.9138 156.968 34.1674 156.646 34.4878C156.323 34.8083 156.068 35.1892 155.894 35.6087C155.72 36.0282 155.631 36.4778 155.632 36.9318V36.9318Z" fill="black"/><path d="M57.4445 12.3261C58.0306 12.2842 58.6187 12.3725 59.1664 12.5846C59.7141 12.7968 60.2077 13.1275 60.6118 13.5529C61.0158 13.9784 61.32 14.4879 61.5027 15.0448C61.6853 15.6017 61.7417 16.1921 61.6678 16.7734C61.6678 19.6328 60.118 21.2764 57.4445 21.2764H54.2025V12.3261H57.4445ZM55.5966 20.0106H57.2888C57.7076 20.0356 58.1267 19.9671 58.5156 19.8102C58.9045 19.6533 59.2534 19.4119 59.5369 19.1035C59.8205 18.7952 60.0315 18.4277 60.1546 18.0277C60.2778 17.6278 60.3099 17.2055 60.2488 16.7916C60.3055 16.3794 60.2701 15.9597 60.145 15.5627C60.02 15.1657 59.8085 14.8012 59.5256 14.4953C59.2427 14.1894 58.8954 13.9497 58.5087 13.7934C58.122 13.637 57.7055 13.5679 57.2888 13.591H55.5966V20.0106Z" fill="black"/><path d="M63.2425 17.8961C63.1999 17.4523 63.2508 17.0044 63.392 16.5813C63.5331 16.1582 63.7614 15.7692 64.0622 15.4392C64.3629 15.1092 64.7295 14.8456 65.1384 14.6652C65.5474 14.4848 65.9896 14.3916 66.4367 14.3916C66.8839 14.3916 67.3261 14.4848 67.735 14.6652C68.144 14.8456 68.5106 15.1092 68.8113 15.4392C69.1121 15.7692 69.3403 16.1582 69.4815 16.5813C69.6227 17.0044 69.6736 17.4523 69.631 17.8961C69.6744 18.3405 69.6241 18.7889 69.4833 19.2127C69.3425 19.6365 69.1144 20.0262 68.8135 20.3569C68.5127 20.6875 68.1458 20.9517 67.7365 21.1325C67.3272 21.3133 66.8844 21.4067 66.4367 21.4067C65.9891 21.4067 65.5463 21.3133 65.137 21.1325C64.7277 20.9517 64.3608 20.6875 64.06 20.3569C63.7591 20.0262 63.531 19.6365 63.3902 19.2127C63.2494 18.7889 63.1991 18.3405 63.2425 17.8961ZM68.256 17.8961C68.256 16.432 67.5965 15.5758 66.4389 15.5758C65.277 15.5758 64.6234 16.432 64.6234 17.8962C64.6234 19.372 65.277 20.2216 66.4389 20.2216C67.5965 20.2216 68.256 19.3661 68.256 17.8961H68.256Z" fill="black"/><path d="M78.123 21.2762H76.7363L75.3364 16.3016H75.2307L73.8366 21.2762H72.4631L70.5961 14.5219H71.952L73.1653 19.6759H73.2652L74.6578 14.5219H75.9402L77.3327 19.6759H77.4385L78.646 14.5219H79.9827L78.123 21.2762Z" fill="black"/><path d="M81.5531 14.5219H82.8398V15.5949H82.9397C83.1092 15.2095 83.395 14.8864 83.7573 14.6707C84.1196 14.455 84.5404 14.3574 84.961 14.3915C85.2906 14.3668 85.6215 14.4163 85.9293 14.5365C86.237 14.6566 86.5137 14.8443 86.7389 15.0855C86.964 15.3268 87.1319 15.6155 87.23 15.9302C87.328 16.2449 87.3538 16.5776 87.3055 16.9037V21.2762H85.9687V17.2384C85.9687 16.153 85.4957 15.6132 84.5071 15.6132C84.2834 15.6028 84.06 15.6408 83.8523 15.7245C83.6446 15.8082 83.4576 15.9358 83.304 16.0984C83.1504 16.2609 83.0338 16.4547 82.9623 16.6664C82.8908 16.8781 82.8661 17.1027 82.8898 17.3248V21.2763H81.553L81.5531 14.5219Z" fill="black"/><path d="M89.4355 11.8851H90.7722V21.2762H89.4355V11.8851Z" fill="black"/><path d="M92.6304 17.8961C92.5879 17.4522 92.6388 17.0043 92.78 16.5812C92.9212 16.1581 93.1495 15.7691 93.4503 15.4391C93.7511 15.1091 94.1177 14.8454 94.5267 14.665C94.9356 14.4846 95.3779 14.3914 95.825 14.3914C96.2722 14.3914 96.7145 14.4846 97.1234 14.665C97.5324 14.8454 97.899 15.1091 98.1998 15.4391C98.5006 15.7691 98.7289 16.1581 98.8701 16.5812C99.0112 17.0043 99.0622 17.4522 99.0196 17.8961C99.063 18.3405 99.0126 18.7889 98.8718 19.2127C98.731 19.6365 98.5028 20.0262 98.2019 20.3568C97.9011 20.6875 97.5342 20.9516 97.1248 21.1324C96.7155 21.3132 96.2727 21.4066 95.825 21.4066C95.3773 21.4066 94.9346 21.3132 94.5252 21.1324C94.1159 20.9516 93.749 20.6875 93.4481 20.3568C93.1473 20.0262 92.9191 19.6365 92.7783 19.2127C92.6375 18.7889 92.5871 18.3405 92.6304 17.8961ZM97.644 17.8961C97.644 16.432 96.9844 15.5758 95.8269 15.5758C94.6649 15.5758 94.0113 16.432 94.0113 17.8961C94.0113 19.372 94.665 20.2216 95.8269 20.2216C96.9844 20.2215 97.644 19.3661 97.644 17.8961H97.644Z" fill="black"/><path d="M100.427 19.3661C100.427 18.1503 101.335 17.4494 102.946 17.3498L104.781 17.2443V16.6613C104.781 15.9479 104.308 15.5451 103.394 15.5451C102.648 15.5451 102.131 15.8183 101.983 16.2958H100.688C100.825 15.1356 101.919 14.3915 103.456 14.3915C105.154 14.3915 106.112 15.2345 106.112 16.6613V21.2763H104.825V20.3271H104.719C104.505 20.6675 104.203 20.9451 103.846 21.1314C103.488 21.3177 103.088 21.4061 102.685 21.3876C102.4 21.417 102.113 21.3868 101.841 21.2987C101.569 21.2107 101.319 21.0668 101.106 20.8764C100.893 20.6859 100.723 20.4531 100.606 20.193C100.489 19.9329 100.428 19.6512 100.427 19.3661ZM104.781 18.789V18.2243L103.127 18.3297C102.194 18.392 101.771 18.7084 101.771 19.3038C101.771 19.9117 102.3 20.2655 103.027 20.2655C103.24 20.287 103.455 20.2656 103.66 20.2024C103.864 20.1393 104.054 20.0358 104.218 19.898C104.381 19.7602 104.516 19.5911 104.612 19.4005C104.709 19.21 104.766 19.002 104.781 18.789Z" fill="black"/><path d="M107.869 17.8961C107.869 15.7619 108.969 14.4098 110.68 14.4098C111.104 14.3904 111.524 14.4915 111.891 14.7013C112.259 14.9111 112.56 15.2211 112.757 15.5948H112.857V11.8851H114.194V21.2762H112.913V20.2091H112.807C112.594 20.5803 112.283 20.8864 111.909 21.0941C111.534 21.3018 111.109 21.4033 110.68 21.3876C108.957 21.3876 107.869 20.0355 107.869 17.8961ZM109.25 17.8961C109.25 19.3288 109.927 20.1908 111.059 20.1908C112.186 20.1908 112.882 19.3163 112.882 17.902C112.882 16.4943 112.179 15.6073 111.059 15.6073C109.934 15.6073 109.249 16.4752 109.249 17.8961H109.25Z" fill="black"/><path d="M119.725 17.8961C119.682 17.4523 119.733 17.0044 119.874 16.5813C120.015 16.1582 120.244 15.7692 120.544 15.4392C120.845 15.1092 121.212 14.8456 121.621 14.6652C122.029 14.4848 122.472 14.3916 122.919 14.3916C123.366 14.3916 123.808 14.4848 124.217 14.6652C124.626 14.8456 124.993 15.1092 125.293 15.4392C125.594 15.7692 125.822 16.1582 125.964 16.5813C126.105 17.0044 126.156 17.4523 126.113 17.8961C126.156 18.3405 126.106 18.7889 125.965 19.2127C125.825 19.6365 125.596 20.0262 125.296 20.3569C124.995 20.6875 124.628 20.9517 124.219 21.1325C123.809 21.3133 123.367 21.4067 122.919 21.4067C122.471 21.4067 122.028 21.3133 121.619 21.1325C121.21 20.9517 120.843 20.6875 120.542 20.3569C120.241 20.0262 120.013 19.6365 119.872 19.2127C119.731 18.7889 119.681 18.3405 119.725 17.8961ZM124.738 17.8961C124.738 16.432 124.079 15.5758 122.921 15.5758C121.759 15.5758 121.105 16.432 121.105 17.8962C121.105 19.372 121.759 20.2216 122.921 20.2216C124.079 20.2216 124.738 19.3661 124.738 17.8961Z" fill="black"/><path d="M127.907 14.5219H129.193V15.5949H129.293C129.463 15.2095 129.749 14.8864 130.111 14.6707C130.473 14.455 130.894 14.3574 131.315 14.3915C131.644 14.3668 131.975 14.4163 132.283 14.5365C132.591 14.6566 132.867 14.8443 133.093 15.0855C133.318 15.3268 133.486 15.6155 133.584 15.9302C133.682 16.2449 133.707 16.5776 133.659 16.9037V21.2762H132.322V17.2384C132.322 16.153 131.849 15.6132 130.861 15.6132C130.637 15.6028 130.414 15.6408 130.206 15.7245C129.998 15.8082 129.811 15.9358 129.658 16.0984C129.504 16.2609 129.387 16.4547 129.316 16.6664C129.244 16.8781 129.22 17.1027 129.243 17.3248V21.2763H127.907V14.5219Z" fill="black"/><path d="M141.212 12.8402V14.5526H142.68V15.6754H141.212V19.1486C141.212 19.8561 141.505 20.1659 142.17 20.1659C142.341 20.1653 142.511 20.1551 142.68 20.1351V21.2455C142.44 21.2883 142.197 21.3111 141.953 21.3136C140.466 21.3136 139.874 20.7921 139.874 19.4899V15.6754H138.799V14.5525H139.874V12.8402H141.212Z" fill="black"/><path d="M144.506 11.8851H145.831V15.6073H145.937C146.114 15.2183 146.408 14.8934 146.778 14.6769C147.147 14.4604 147.575 14.3628 148.002 14.3973C148.33 14.3796 148.658 14.4341 148.962 14.5572C149.266 14.6803 149.539 14.8688 149.762 15.1093C149.985 15.3498 150.152 15.6364 150.251 15.9486C150.35 16.2608 150.378 16.5909 150.335 16.9154V21.2763H148.997V17.2443C148.997 16.1654 148.493 15.619 147.548 15.619C147.318 15.6002 147.087 15.6317 146.871 15.7113C146.655 15.7909 146.459 15.9166 146.296 16.0797C146.134 16.2428 146.009 16.4394 145.931 16.6556C145.852 16.8718 145.822 17.1024 145.843 17.3314V21.2762H144.506L144.506 11.8851Z" fill="black"/><path d="M158.129 19.4525C157.947 20.0698 157.554 20.6038 157.017 20.961C156.481 21.3182 155.835 21.476 155.194 21.4066C154.748 21.4183 154.304 21.3331 153.894 21.1568C153.485 20.9805 153.118 20.7174 152.82 20.3857C152.523 20.054 152.301 19.6616 152.17 19.2359C152.04 18.8102 152.004 18.3613 152.065 17.9203C152.006 17.478 152.042 17.0281 152.172 16.601C152.302 16.174 152.523 15.7799 152.819 15.4453C153.115 15.1107 153.48 14.8434 153.889 14.6616C154.298 14.4798 154.741 14.3877 155.188 14.3915C157.073 14.3915 158.21 15.6755 158.21 17.7965V18.2616H153.427V18.3363C153.406 18.5842 153.437 18.8337 153.519 19.0688C153.6 19.3039 153.73 19.5195 153.9 19.7017C154.069 19.8839 154.276 20.0286 154.505 20.1267C154.734 20.2248 154.981 20.2741 155.231 20.2713C155.55 20.3096 155.874 20.2522 156.161 20.1064C156.448 19.9605 156.685 19.7329 156.842 19.4525L158.129 19.4525ZM153.427 17.2757H156.848C156.865 17.0491 156.834 16.8214 156.757 16.6073C156.681 16.3932 156.56 16.1975 156.403 16.0327C156.246 15.8679 156.056 15.7377 155.846 15.6504C155.635 15.5632 155.409 15.5208 155.181 15.526C154.95 15.5231 154.72 15.5664 154.506 15.6533C154.292 15.7402 154.097 15.869 153.934 16.0321C153.77 16.1951 153.641 16.3892 153.554 16.6028C153.467 16.8164 153.424 17.0452 153.427 17.2757H153.427Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/iosLightClear.ts b/src/molecules/appDownloadButton/badges/iosLightClear.ts new file mode 100644 index 00000000..74854258 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/iosLightClear.ts @@ -0,0 +1 @@ +export default '<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V49.832C0 55.3549 4.47716 59.832 10 59.832H170C175.523 59.832 180 55.3549 180 49.832V10C180 4.47715 175.523 0 170 0H10ZM39.1544 25.3528C38.5099 26.4852 38.1631 27.7617 38.1463 29.0636C38.1479 30.5281 38.5817 31.9598 39.3937 33.18C40.2058 34.4003 41.36 35.3552 42.7126 35.9257C42.1808 37.6484 41.3792 39.2765 40.3375 40.7495C38.9384 42.8364 37.4716 44.8753 35.1434 44.913C34.0362 44.9385 33.2888 44.6209 32.5099 44.2901C31.6975 43.945 30.851 43.5854 29.5263 43.5854C28.1214 43.5854 27.237 43.9566 26.384 44.3146C25.6468 44.6239 24.9331 44.9234 23.9273 44.965C21.7101 45.0469 20.0156 42.7377 18.5658 40.6703C15.6679 36.4484 13.4114 28.7723 16.4365 23.5493C17.1349 22.2979 18.1465 21.2482 19.3726 20.5025C20.5988 19.7568 21.9977 19.3405 23.4332 19.2943C24.6907 19.2685 25.8974 19.7518 26.9553 20.1755C27.7643 20.4996 28.4864 20.7888 29.0777 20.7888C29.5975 20.7888 30.2994 20.511 31.1174 20.1873C32.406 19.6773 33.9827 19.0533 35.5894 19.2214C36.8208 19.2599 38.0262 19.5841 39.1099 20.1683C40.1937 20.7525 41.1259 21.5807 41.8325 22.5871C40.7202 23.269 39.7989 24.2204 39.1544 25.3528ZM33.8734 16.4448C35.1428 14.9252 35.7682 12.972 35.6168 11C33.6774 11.2031 31.886 12.1274 30.5994 13.5887C29.9704 14.3026 29.4886 15.1331 29.1816 16.0328C28.8746 16.9325 28.7485 17.8837 28.8104 18.832C29.7804 18.8419 30.7401 18.6323 31.6171 18.2188C32.4941 17.8053 33.2655 17.1987 33.8734 16.4448ZM57.0567 39.9391H64.1768L65.8852 44.9738H68.9523L62.2084 26.3468H59.0751L52.3311 44.9738H55.3469L57.0567 39.9391ZM63.438 37.6159H57.7942L60.5778 29.445H60.6557L63.438 37.6159ZM83.517 38.1842C83.517 42.4044 81.2519 45.1159 77.8337 45.1159C76.9678 45.161 76.1066 44.9621 75.3488 44.5419C74.591 44.1217 73.9671 43.4972 73.5487 42.7399H73.484V49.4664H70.6886V31.3932H73.3944V33.652H73.4458C73.8835 32.8983 74.5179 32.277 75.2815 31.8542C76.045 31.4315 76.9093 31.223 77.7822 31.2511C81.2387 31.2511 83.517 33.9757 83.517 38.1842ZM80.6438 38.1842C80.6438 35.4347 79.2189 33.6271 77.0448 33.6271C74.909 33.6271 73.4723 35.4728 73.4723 38.1842C73.4723 40.9206 74.909 42.7531 77.0448 42.7531C79.2189 42.7531 80.6437 40.9586 80.6437 38.1842H80.6438ZM92.8229 45.1159C96.2411 45.1159 98.507 42.4044 98.507 38.1842C98.507 33.9757 96.2279 31.2511 92.7714 31.2511C91.8985 31.223 91.0343 31.4315 90.2707 31.8542C89.5071 32.277 88.8727 32.8983 88.4351 33.652H88.3837V31.3932H85.6778V49.4664H88.4733V42.7399H88.5379C88.9564 43.4972 89.5802 44.1217 90.338 44.5419C91.0958 44.9621 91.957 45.161 92.8229 45.1159ZM92.0341 33.6271C94.2081 33.6271 95.633 35.4347 95.633 38.1842C95.633 40.9586 94.2081 42.7531 92.0341 42.7531C89.8982 42.7531 88.4616 40.9206 88.4616 38.1842C88.4616 35.4728 89.8982 33.6271 92.0341 33.6271ZM108.412 39.7838C108.619 41.631 110.419 42.8438 112.878 42.8438C115.234 42.8438 116.929 41.6309 116.929 39.9654C116.929 38.5196 115.907 37.6539 113.486 37.0606L111.065 36.4791C107.635 35.6529 106.043 34.0533 106.043 31.4576C106.043 28.2437 108.851 26.0362 112.838 26.0362C116.787 26.0362 119.493 28.2437 119.584 31.4576H116.762C116.593 29.5987 115.052 28.4766 112.8 28.4766C110.548 28.4766 109.007 29.6119 109.007 31.2642C109.007 32.5811 109.991 33.356 112.399 33.9492L114.457 34.4531C118.289 35.3569 119.88 36.8921 119.88 39.6167C119.88 43.1016 117.098 45.2842 112.671 45.2842C108.528 45.2842 105.731 43.1528 105.551 39.7837L108.412 39.7838ZM125.916 31.3932V28.1793H123.108V31.3932H121.127V33.6007H123.108V41.3849C123.108 44.0186 124.183 45.0514 126.94 45.0514C127.461 45.061 127.981 45.0178 128.493 44.9225V42.7281C128.188 42.7657 127.881 42.7873 127.573 42.7926C126.435 42.7926 125.916 42.2506 125.916 41.0875V33.6007H128.506V31.3932H125.916ZM130.004 38.1842C130.004 33.9113 132.528 31.2262 136.463 31.2262C140.412 31.2262 142.924 33.9112 142.924 38.1842C142.924 42.4689 140.425 45.1422 136.463 45.1422C132.503 45.1422 130.004 42.4689 130.004 38.1842ZM140.076 38.1842C140.076 35.2531 138.729 33.5231 136.463 33.5231C134.198 33.5231 132.851 35.2663 132.851 38.1842C132.851 41.1271 134.198 42.8439 136.463 42.8439C138.729 42.8439 140.076 41.1271 140.076 38.1842ZM147.895 31.3932H145.229L145.229 44.9738H148.024V36.9186C147.978 36.5159 148.02 36.108 148.147 35.723C148.274 35.338 148.483 34.985 148.76 34.6881C149.037 34.3913 149.374 34.1577 149.75 34.0034C150.126 33.849 150.531 33.7776 150.937 33.7941C151.362 33.7817 151.786 33.8386 152.193 33.9625V31.3551C151.879 31.2849 151.557 31.25 151.235 31.2511C150.49 31.2227 149.757 31.4511 149.161 31.8979C148.564 32.3448 148.14 32.9828 147.959 33.7047H147.895V31.3932ZM165.082 40.985C164.706 43.4503 162.298 45.1422 159.217 45.1422C155.256 45.1422 152.797 42.4952 152.797 38.2487C152.797 33.9889 155.269 31.2262 159.1 31.2262C162.868 31.2262 165.237 33.8073 165.237 37.9249V38.88H155.619V39.0485C155.574 39.5483 155.637 40.0518 155.803 40.5255C155.968 40.9993 156.233 41.4325 156.58 41.7963C156.926 42.1601 157.346 42.4463 157.812 42.6357C158.278 42.8252 158.779 42.9136 159.282 42.8951C159.943 42.9569 160.606 42.8043 161.172 42.4601C161.739 42.116 162.179 41.5986 162.427 40.985L165.082 40.985ZM155.632 36.9318H162.44C162.465 36.4824 162.397 36.0327 162.24 35.6109C162.082 35.189 161.839 34.8042 161.525 34.4806C161.212 34.1569 160.834 33.9014 160.417 33.7301C160 33.5588 159.551 33.4753 159.1 33.485C158.645 33.4823 158.193 33.5695 157.772 33.7416C157.351 33.9137 156.968 34.1673 156.646 34.4878C156.323 34.8082 156.068 35.1892 155.894 35.6087C155.72 36.0281 155.631 36.4778 155.632 36.9318ZM59.1664 12.5846C58.6187 12.3725 58.0306 12.2842 57.4445 12.3261H54.2025V21.2764H57.4445C60.118 21.2764 61.6678 19.6328 61.6678 16.7734C61.7417 16.1921 61.6853 15.6017 61.5027 15.0448C61.32 14.4879 61.0158 13.9784 60.6118 13.5529C60.2077 13.1275 59.7141 12.7968 59.1664 12.5846ZM57.2888 20.0106H55.5966V13.5909H57.2888C57.7055 13.5679 58.122 13.637 58.5087 13.7934C58.8954 13.9497 59.2427 14.1894 59.5256 14.4953C59.8085 14.8012 60.02 15.1657 60.145 15.5627C60.2701 15.9597 60.3055 16.3794 60.2488 16.7916C60.3099 17.2055 60.2778 17.6278 60.1546 18.0277C60.0315 18.4276 59.8205 18.7952 59.5369 19.1035C59.2534 19.4119 58.9045 19.6533 58.5156 19.8102C58.1267 19.9671 57.7076 20.0356 57.2888 20.0106ZM63.2425 17.8961C63.1999 17.4523 63.2508 17.0044 63.392 16.5813C63.5331 16.1582 63.7614 15.7692 64.0622 15.4392C64.3629 15.1092 64.7295 14.8456 65.1385 14.6652C65.5474 14.4848 65.9896 14.3916 66.4367 14.3916C66.8839 14.3916 67.3261 14.4848 67.735 14.6652C68.144 14.8456 68.5106 15.1092 68.8113 15.4392C69.1121 15.7692 69.3403 16.1582 69.4815 16.5813C69.6227 17.0044 69.6736 17.4523 69.631 17.8961C69.6744 18.3405 69.6241 18.7889 69.4833 19.2127C69.3425 19.6365 69.1144 20.0262 68.8135 20.3569C68.5127 20.6875 68.1458 20.9517 67.7365 21.1325C67.3272 21.3133 66.8844 21.4067 66.4367 21.4067C65.9891 21.4067 65.5463 21.3133 65.137 21.1325C64.7277 20.9517 64.3608 20.6875 64.06 20.3569C63.7591 20.0262 63.531 19.6365 63.3902 19.2127C63.2494 18.7889 63.1991 18.3405 63.2425 17.8961ZM68.256 17.8961C68.256 16.432 67.5965 15.5758 66.4389 15.5758C65.277 15.5758 64.6234 16.432 64.6234 17.8962C64.6234 19.372 65.277 20.2216 66.4389 20.2216C67.5965 20.2216 68.2561 19.3661 68.256 17.8961ZM76.7363 21.2762H78.123L79.9827 14.5219H78.646L77.4385 19.6759H77.3327L75.9402 14.5219H74.6578L73.2652 19.6759H73.1653L71.952 14.5219H70.5961L72.4631 21.2762H73.8366L75.2307 16.3016H75.3364L76.7363 21.2762ZM81.5531 14.5218H82.8398V15.5948H82.9397C83.1092 15.2095 83.395 14.8864 83.7573 14.6707C84.1196 14.455 84.5404 14.3574 84.961 14.3915C85.2906 14.3668 85.6215 14.4163 85.9293 14.5365C86.237 14.6566 86.5137 14.8443 86.7389 15.0855C86.9641 15.3268 87.1319 15.6155 87.23 15.9302C87.328 16.2449 87.3538 16.5776 87.3055 16.9037V21.2762H85.9687V17.2384C85.9687 16.153 85.4957 15.6132 84.5071 15.6132C84.2833 15.6028 84.06 15.6407 83.8523 15.7245C83.6446 15.8082 83.4576 15.9358 83.304 16.0983C83.1504 16.2609 83.0338 16.4547 82.9623 16.6664C82.8908 16.8781 82.8661 17.1027 82.8898 17.3248V21.2762H81.553L81.5531 14.5218ZM90.7722 11.8851H89.4355V21.2762H90.7722V11.8851ZM92.6304 17.8961C92.5879 17.4522 92.6388 17.0043 92.78 16.5812C92.9212 16.1581 93.1495 15.7691 93.4503 15.4391C93.7511 15.1091 94.1177 14.8454 94.5267 14.665C94.9356 14.4846 95.3779 14.3914 95.825 14.3914C96.2722 14.3914 96.7145 14.4846 97.1234 14.665C97.5324 14.8454 97.899 15.1091 98.1998 15.4391C98.5006 15.7691 98.7289 16.1581 98.8701 16.5812C99.0112 17.0043 99.0622 17.4522 99.0196 17.8961C99.063 18.3405 99.0126 18.7889 98.8718 19.2127C98.731 19.6365 98.5028 20.0262 98.2019 20.3568C97.9011 20.6875 97.5342 20.9516 97.1248 21.1324C96.7155 21.3132 96.2727 21.4066 95.825 21.4066C95.3773 21.4066 94.9346 21.3132 94.5252 21.1324C94.1159 20.9516 93.749 20.6875 93.4481 20.3568C93.1473 20.0262 92.9191 19.6365 92.7783 19.2127C92.6375 18.7889 92.5871 18.3405 92.6304 17.8961ZM97.644 17.8961C97.644 16.432 96.9844 15.5758 95.8269 15.5758C94.6649 15.5758 94.0113 16.432 94.0113 17.8961C94.0113 19.372 94.665 20.2216 95.8269 20.2216C96.9844 20.2215 97.644 19.3661 97.644 17.8961ZM102.946 17.3498C101.335 17.4494 100.427 18.1503 100.427 19.3661C100.428 19.6512 100.489 19.9329 100.606 20.193C100.723 20.4531 100.893 20.6859 101.106 20.8764C101.319 21.0668 101.569 21.2107 101.841 21.2987C102.113 21.3868 102.4 21.417 102.685 21.3876C103.088 21.4061 103.488 21.3177 103.846 21.1314C104.203 20.9451 104.505 20.6675 104.719 20.3271H104.825V21.2763H106.112V16.6613C106.112 15.2345 105.154 14.3915 103.456 14.3915C101.919 14.3915 100.825 15.1356 100.688 16.2958H101.983C102.131 15.8183 102.648 15.5451 103.394 15.5451C104.308 15.5451 104.781 15.9479 104.781 16.6613V17.2443L102.946 17.3498ZM104.781 18.2243V18.789C104.766 19.002 104.709 19.21 104.612 19.4005C104.516 19.5911 104.381 19.7602 104.218 19.898C104.054 20.0358 103.864 20.1393 103.66 20.2024C103.455 20.2656 103.24 20.287 103.027 20.2655C102.3 20.2655 101.771 19.9117 101.771 19.3038C101.771 18.7084 102.194 18.392 103.127 18.3297L104.781 18.2243ZM107.869 17.8961C107.869 15.7619 108.969 14.4098 110.68 14.4098C111.104 14.3903 111.524 14.4915 111.891 14.7013C112.259 14.9111 112.56 15.221 112.757 15.5948H112.857V11.8851H114.194V21.2762H112.913V20.2091H112.807C112.594 20.5803 112.283 20.8864 111.909 21.0941C111.534 21.3018 111.109 21.4033 110.68 21.3875C108.957 21.3876 107.869 20.0355 107.869 17.8961ZM109.25 17.8961C109.25 19.3287 109.927 20.1908 111.059 20.1908C112.186 20.1908 112.882 19.3163 112.882 17.902C112.882 16.4943 112.179 15.6073 111.059 15.6073C109.934 15.6073 109.249 16.4752 109.25 17.8961ZM119.874 16.5813C119.733 17.0044 119.682 17.4523 119.725 17.8961C119.681 18.3405 119.731 18.7889 119.872 19.2127C120.013 19.6365 120.241 20.0262 120.542 20.3569C120.843 20.6875 121.21 20.9517 121.619 21.1325C122.028 21.3133 122.471 21.4067 122.919 21.4067C123.367 21.4067 123.809 21.3133 124.219 21.1325C124.628 20.9517 124.995 20.6875 125.296 20.3569C125.596 20.0262 125.825 19.6365 125.965 19.2127C126.106 18.7889 126.156 18.3405 126.113 17.8961C126.156 17.4523 126.105 17.0044 125.964 16.5813C125.822 16.1582 125.594 15.7692 125.293 15.4392C124.993 15.1092 124.626 14.8456 124.217 14.6652C123.808 14.4848 123.366 14.3916 122.919 14.3916C122.472 14.3916 122.029 14.4848 121.621 14.6652C121.212 14.8456 120.845 15.1092 120.544 15.4392C120.244 15.7692 120.015 16.1582 119.874 16.5813ZM122.921 15.5758C124.079 15.5758 124.738 16.432 124.738 17.8961C124.738 19.3661 124.079 20.2216 122.921 20.2216C121.759 20.2216 121.105 19.372 121.105 17.8962C121.105 16.432 121.759 15.5758 122.921 15.5758ZM127.907 14.5218H129.193V15.5948H129.293C129.463 15.2095 129.749 14.8864 130.111 14.6707C130.473 14.455 130.894 14.3574 131.315 14.3915C131.644 14.3668 131.975 14.4163 132.283 14.5365C132.591 14.6566 132.867 14.8443 133.093 15.0855C133.318 15.3268 133.486 15.6155 133.584 15.9302C133.682 16.2449 133.707 16.5776 133.659 16.9037V21.2762H132.322V17.2384C132.322 16.153 131.849 15.6132 130.861 15.6132C130.637 15.6028 130.414 15.6407 130.206 15.7245C129.998 15.8082 129.811 15.9358 129.658 16.0983C129.504 16.2609 129.387 16.4547 129.316 16.6664C129.244 16.8781 129.22 17.1027 129.243 17.3248V21.2762H127.907V14.5218ZM141.212 14.5526V12.8402H139.874V14.5525H138.799V15.6753H139.874V19.4898C139.874 20.7921 140.466 21.3136 141.953 21.3136C142.197 21.3111 142.44 21.2883 142.68 21.2455V20.1351C142.511 20.1551 142.341 20.1653 142.17 20.1659C141.505 20.1659 141.212 19.8561 141.212 19.1486V15.6754H142.68V14.5526H141.212ZM144.506 11.8851H145.831V15.6073H145.937C146.114 15.2183 146.408 14.8934 146.778 14.6769C147.147 14.4604 147.575 14.3628 148.002 14.3973C148.33 14.3795 148.658 14.4341 148.962 14.5572C149.266 14.6803 149.539 14.8688 149.762 15.1093C149.985 15.3498 150.152 15.6364 150.251 15.9486C150.35 16.2608 150.378 16.5909 150.335 16.9154V21.2762H148.997V17.2442C148.997 16.1654 148.493 15.619 147.548 15.619C147.318 15.6002 147.087 15.6317 146.871 15.7113C146.655 15.7909 146.459 15.9166 146.296 16.0797C146.134 16.2428 146.009 16.4393 145.931 16.6556C145.852 16.8718 145.822 17.1024 145.843 17.3314V21.2762H144.506L144.506 11.8851ZM157.017 20.961C157.554 20.6038 157.947 20.0698 158.129 19.4525L156.842 19.4525C156.685 19.7329 156.448 19.9606 156.161 20.1064C155.874 20.2522 155.55 20.3096 155.231 20.2713C154.981 20.2741 154.734 20.2248 154.505 20.1267C154.276 20.0286 154.069 19.8839 153.9 19.7017C153.73 19.5195 153.6 19.3039 153.519 19.0688C153.437 18.8337 153.406 18.5842 153.427 18.3363V18.2616H158.21V17.7965C158.21 15.6755 157.073 14.3915 155.188 14.3915C154.741 14.3877 154.298 14.4798 153.889 14.6616C153.48 14.8434 153.115 15.1107 152.819 15.4453C152.523 15.7799 152.302 16.174 152.172 16.601C152.042 17.0281 152.006 17.478 152.065 17.9203C152.004 18.3613 152.04 18.8102 152.17 19.2359C152.301 19.6616 152.523 20.054 152.82 20.3857C153.118 20.7174 153.484 20.9805 153.894 21.1568C154.304 21.3331 154.748 21.4183 155.194 21.4066C155.835 21.476 156.481 21.3182 157.017 20.961ZM156.848 17.2757H153.427C153.424 17.0452 153.467 16.8164 153.554 16.6028C153.641 16.3892 153.77 16.1952 153.934 16.0321C154.097 15.869 154.292 15.7402 154.506 15.6533C154.72 15.5664 154.95 15.5231 155.181 15.526C155.409 15.5208 155.635 15.5632 155.846 15.6504C156.056 15.7377 156.246 15.8679 156.403 16.0327C156.56 16.1975 156.681 16.3932 156.757 16.6073C156.834 16.8214 156.865 17.0491 156.848 17.2757Z" fill="white"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/macDark.ts b/src/molecules/appDownloadButton/badges/macDark.ts new file mode 100644 index 00000000..c7ebb14f --- /dev/null +++ b/src/molecules/appDownloadButton/badges/macDark.ts @@ -0,0 +1 @@ +export default '<svg width="232" height="60" viewBox="0 0 232 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="231" height="58.832" rx="9.5" fill="black" stroke="#A6A6A6"/><path d="M68.0642 45.1294V31.3555H67.973L62.3322 44.9866H60.1792L54.5236 31.3555H54.4338V45.1294H51.7878V26.4152H55.1476L61.2034 41.1869H61.3064L67.3505 26.4152H70.722V45.1294H68.0642Z" fill="white"/><path d="M72.9575 41.2516C72.9575 38.8661 74.7852 37.4254 78.0287 37.2311L81.7638 37.0228V35.9853C81.7638 34.468 80.7645 33.6115 79.0648 33.6115C78.4353 33.5278 77.7968 33.6767 77.2692 34.0303C76.7417 34.3839 76.3613 34.9179 76.1995 35.532H73.58C73.658 33.067 75.9538 31.3172 79.1428 31.3172C82.3981 31.3172 84.5511 33.0935 84.5511 35.7779V45.1294H81.8668V42.8851H81.802C81.3721 43.6461 80.7457 44.2776 79.9882 44.7136C79.2307 45.1495 78.37 45.374 77.496 45.3634C76.9221 45.4195 76.3427 45.355 75.7951 45.174C75.2475 44.993 74.7439 44.6995 74.3165 44.3122C73.8891 43.925 73.5474 43.4527 73.3133 42.9256C73.0793 42.3986 72.9581 41.8283 72.9575 41.2516ZM81.7638 40.0199V38.9691L78.404 39.1766C76.7308 39.2811 75.7845 40.0066 75.7845 41.1736C75.7845 42.3672 76.7705 43.1456 78.2745 43.1456C78.7101 43.1752 79.1472 43.1172 79.5601 42.9752C79.9729 42.8331 80.3531 42.6099 80.6783 42.3186C81.0035 42.0272 81.2671 41.6738 81.4535 41.279C81.6399 40.8842 81.7454 40.4561 81.7638 40.0199L81.7638 40.0199Z" fill="white"/><path d="M96.3109 36.1796C96.1885 35.4333 95.7898 34.7603 95.1941 34.2944C94.5984 33.8284 93.8492 33.6036 93.0954 33.6646C90.9424 33.6646 89.5164 35.4673 89.5164 38.3083C89.5164 41.2133 90.9556 42.9631 93.1204 42.9631C93.8642 43.0376 94.6084 42.8256 95.2013 42.3703C95.7941 41.915 96.191 41.2507 96.3109 40.5128H99.0084C98.8406 41.9237 98.1287 43.2133 97.0243 44.1071C95.9199 45.001 94.5102 45.4285 93.0954 45.2986C89.2044 45.2986 86.6628 42.6393 86.6628 38.3083C86.6628 34.0663 89.2044 31.3172 93.0689 31.3172C94.4942 31.1964 95.9102 31.6371 97.0151 32.5454C98.12 33.4538 98.8264 34.7578 98.9835 36.1795L96.3109 36.1796Z" fill="white"/><path d="M117.207 40.0713H110.074L108.361 45.1294H105.339L112.096 26.4152H115.235L121.991 45.1294H118.918L117.207 40.0713ZM110.813 37.7373H116.467L113.679 29.5278H113.601L110.813 37.7373Z" fill="white"/><path d="M136.582 38.3083C136.582 42.5482 134.313 45.2722 130.889 45.2722C130.021 45.3175 129.158 45.1177 128.399 44.6955C127.64 44.2734 127.015 43.646 126.596 42.8851H126.531V49.6429H123.731V31.4851H126.441V33.7543H126.493C126.931 32.9971 127.567 32.373 128.332 31.9482C129.097 31.5235 129.963 31.3141 130.837 31.3423C134.3 31.3423 136.582 34.0796 136.582 38.3083ZM133.704 38.3083C133.704 35.5453 132.276 33.7293 130.098 33.7293C127.959 33.7293 126.519 35.5836 126.519 38.3083C126.519 41.0574 127.959 42.8984 130.098 42.8984C132.276 42.8984 133.704 41.0957 133.704 38.3083Z" fill="white"/><path d="M151.599 38.3083C151.599 42.5482 149.33 45.2722 145.905 45.2722C145.038 45.3175 144.175 45.1177 143.416 44.6955C142.657 44.2734 142.032 43.646 141.613 42.8851H141.548V49.6429H138.747V31.4851H141.458V33.7543H141.509C141.948 32.9971 142.583 32.373 143.348 31.9482C144.113 31.5235 144.979 31.3141 145.854 31.3423C149.317 31.3423 151.599 34.0796 151.599 38.3083ZM148.721 38.3083C148.721 35.5453 147.293 33.7293 145.115 33.7293C142.975 33.7293 141.536 35.5836 141.536 38.3083C141.536 41.0574 142.975 42.8984 145.115 42.8984C147.293 42.8984 148.721 41.0957 148.721 38.3083H148.721Z" fill="white"/><path d="M161.524 39.9154C161.731 41.7711 163.534 42.9896 165.998 42.9896C168.358 42.9896 170.056 41.7711 170.056 40.0978C170.056 38.6453 169.032 37.7756 166.607 37.1795L164.182 36.5946C160.745 35.7646 159.15 34.1575 159.15 31.5498C159.15 28.321 161.964 26.1032 165.959 26.1032C169.914 26.1032 172.624 28.321 172.716 31.5498H169.889C169.719 29.6822 168.176 28.555 165.92 28.555C163.664 28.555 162.12 29.6955 162.12 31.3555C162.12 32.6785 163.106 33.457 165.518 34.053L167.58 34.5592C171.419 35.4672 173.014 37.0096 173.014 39.7475C173.014 43.2485 170.226 45.4413 165.79 45.4413C161.64 45.4413 158.838 43.3001 158.657 39.9153L161.524 39.9154Z" fill="white"/><path d="M179.058 28.2563V31.4851H181.653V33.7029H179.058V41.2252C179.058 42.3937 179.578 42.9382 180.719 42.9382C181.027 42.9328 181.334 42.9112 181.64 42.8734V45.0779C181.127 45.1737 180.606 45.2171 180.084 45.2074C177.322 45.2074 176.245 44.1699 176.245 41.5239V33.7028H174.261V31.4851H176.245V28.2563H179.058Z" fill="white"/><path d="M183.154 38.3083C183.154 34.0148 185.682 31.3173 189.625 31.3173C193.581 31.3173 196.097 34.0147 196.097 38.3083C196.097 42.6129 193.594 45.2986 189.625 45.2986C185.657 45.2986 183.154 42.6129 183.154 38.3083ZM193.244 38.3083C193.244 35.3628 191.894 33.6248 189.625 33.6248C187.356 33.6248 186.006 35.3761 186.006 38.3083C186.006 41.2648 187.356 42.9896 189.625 42.9896C191.894 42.9896 193.244 41.2648 193.244 38.3083H193.244Z" fill="white"/><path d="M198.406 31.485H201.077V33.8073H201.142C201.323 33.082 201.748 32.441 202.345 31.9921C202.943 31.5432 203.677 31.3137 204.424 31.3423C204.747 31.3411 205.068 31.3762 205.383 31.4468V34.0663C204.976 33.9418 204.551 33.8846 204.125 33.897C203.718 33.8805 203.313 33.9523 202.936 34.1073C202.56 34.2624 202.221 34.497 201.944 34.7953C201.667 35.0935 201.457 35.4482 201.33 35.8349C201.203 36.2217 201.161 36.6315 201.207 37.036V45.1294H198.406V31.485Z" fill="white"/><path d="M218.295 41.1221C217.919 43.5989 215.507 45.2986 212.421 45.2986C208.452 45.2986 205.988 42.6394 205.988 38.3731C205.988 34.0928 208.465 31.3173 212.303 31.3173C216.078 31.3173 218.451 33.9103 218.451 38.0478V39.0074H208.815V39.1766C208.771 39.6787 208.834 40.1845 209 40.6605C209.166 41.1365 209.431 41.5716 209.778 41.9372C210.125 42.3027 210.546 42.5901 211.013 42.7805C211.48 42.9708 211.982 43.0597 212.485 43.0411C213.147 43.1031 213.811 42.9498 214.379 42.6041C214.947 42.2583 215.388 41.7386 215.636 41.1221L218.295 41.1221ZM208.828 37.0493H215.649C215.675 36.5978 215.606 36.146 215.448 35.7223C215.291 35.2985 215.047 34.9119 214.733 34.5868C214.419 34.2616 214.04 34.0049 213.622 33.8328C213.204 33.6607 212.755 33.5768 212.303 33.5865C211.847 33.5838 211.395 33.6715 210.973 33.8444C210.551 34.0173 210.167 34.2721 209.844 34.594C209.521 34.9159 209.265 35.2986 209.091 35.7201C208.916 36.1415 208.827 36.5933 208.828 37.0493H208.828Z" fill="white"/><path d="M36.1886 29.1475C36.2055 27.8395 36.5529 26.557 37.1986 25.4194C37.8443 24.2818 38.7672 23.326 39.8816 22.6409C39.1737 21.6299 38.2397 20.7978 37.154 20.2109C36.0683 19.6239 34.8607 19.2982 33.6271 19.2596C30.9956 18.9834 28.4444 20.8343 27.1034 20.8343C25.7365 20.8343 23.6719 19.287 21.4486 19.3328C20.0105 19.3792 18.609 19.7974 17.3806 20.5466C16.1522 21.2957 15.1388 22.3503 14.4392 23.6076C11.4085 28.8548 13.6691 36.5665 16.5723 40.808C18.0248 42.885 19.7224 45.205 21.9437 45.1227C24.1173 45.0325 24.9291 43.7367 27.5529 43.7367C30.1523 43.7367 30.9139 45.1227 33.1803 45.0704C35.5127 45.0325 36.9822 42.9842 38.3838 40.8876C39.4275 39.4077 40.2306 37.7721 40.7633 36.0414C39.4083 35.4683 38.2519 34.5089 37.4384 33.283C36.6248 32.0571 36.1902 30.6188 36.1886 29.1475Z" fill="white"/><path d="M31.908 16.4701C33.1797 14.9434 33.8063 12.9812 33.6546 11C31.7116 11.2041 29.9169 12.1327 28.628 13.6007C27.9978 14.3179 27.5152 15.1523 27.2076 16.0562C26.9001 16.96 26.7737 17.9156 26.8357 18.8683C27.8075 18.8783 28.7689 18.6677 29.6475 18.2523C30.5261 17.8369 31.299 17.2275 31.908 16.4701Z" fill="white"/><path d="M55.5221 12.3323C56.1093 12.2902 56.6984 12.3789 57.2471 12.592C57.7958 12.8051 58.2904 13.1374 58.6952 13.5648C59.0999 13.9922 59.4047 14.5041 59.5877 15.0636C59.7707 15.6231 59.8271 16.2162 59.7531 16.8002C59.7531 19.6728 58.2005 21.3241 55.5221 21.3241H52.2742V12.3323H55.5221ZM53.6708 20.0525H55.3661C55.7857 20.0775 56.2055 20.0087 56.5952 19.8511C56.9848 19.6934 57.3343 19.4509 57.6184 19.1411C57.9024 18.8313 58.1138 18.4621 58.2372 18.0603C58.3605 17.6586 58.3928 17.2343 58.3315 16.8185C58.3883 16.4044 58.3528 15.9827 58.2276 15.5839C58.1023 15.1851 57.8904 14.8189 57.607 14.5116C57.3236 14.2042 56.9757 13.9634 56.5883 13.8063C56.2009 13.6493 55.7835 13.5798 55.3661 13.603H53.6708V20.0525Z" fill="white"/><path d="M61.3308 17.9282C61.2881 17.4822 61.3391 17.0323 61.4805 16.6072C61.6219 16.1822 61.8506 15.7913 62.1519 15.4598C62.4532 15.1283 62.8205 14.8635 63.2302 14.6822C63.6398 14.501 64.0829 14.4073 64.5308 14.4073C64.9788 14.4073 65.4218 14.501 65.8315 14.6822C66.2412 14.8635 66.6084 15.1283 66.9097 15.4598C67.2111 15.7913 67.4398 16.1822 67.5812 16.6072C67.7226 17.0323 67.7736 17.4822 67.7309 17.9282C67.7744 18.3746 67.724 18.8251 67.583 19.2509C67.4419 19.6766 67.2134 20.0682 66.912 20.4003C66.6106 20.7325 66.2431 20.9979 65.833 21.1795C65.4229 21.3612 64.9793 21.455 64.5308 21.455C64.0823 21.455 63.6388 21.3612 63.2287 21.1795C62.8186 20.9979 62.4511 20.7325 62.1497 20.4003C61.8483 20.0682 61.6198 19.6766 61.4787 19.2509C61.3377 18.8251 61.2873 18.3746 61.3308 17.9282ZM66.3535 17.9282C66.3535 16.4573 65.6927 15.5971 64.533 15.5971C63.369 15.5971 62.7141 16.4573 62.7141 17.9282C62.7141 19.4109 63.369 20.2644 64.533 20.2644C65.6927 20.2644 66.3535 19.405 66.3535 17.9282H66.3535Z" fill="white"/><path d="M76.2384 21.3239H74.8492L73.4468 16.3262H73.3408L71.9442 21.3239H70.5682L68.6978 14.5382H70.0561L71.2717 19.7161H71.3717L72.7669 14.5382H74.0516L75.4467 19.7161H75.5527L76.7624 14.5382H78.1015L76.2384 21.3239Z" fill="white"/><path d="M79.6748 14.5382H80.964V15.6162H81.064C81.2338 15.229 81.5201 14.9045 81.8831 14.6878C82.2461 14.4711 82.6677 14.373 83.089 14.4072C83.4192 14.3824 83.7507 14.4322 84.059 14.5529C84.3674 14.6736 84.6446 14.8621 84.8701 15.1045C85.0957 15.3469 85.2639 15.6369 85.3621 15.9531C85.4604 16.2693 85.4862 16.6036 85.4378 16.9311V21.3239H84.0986V17.2674C84.0986 16.1769 83.6247 15.6346 82.6343 15.6346C82.4101 15.6242 82.1863 15.6623 81.9783 15.7464C81.7702 15.8306 81.5828 15.9587 81.4289 16.122C81.275 16.2854 81.1583 16.48 81.0867 16.6927C81.015 16.9054 80.9903 17.1311 81.014 17.3542V21.324H79.6748L79.6748 14.5382Z" fill="white"/><path d="M87.5716 11.8893H88.9108V21.324H87.5716V11.8893Z" fill="white"/><path d="M90.7725 17.9282C90.7298 17.4822 90.7808 17.0323 90.9222 16.6072C91.0636 16.1822 91.2923 15.7913 91.5936 15.4598C91.8949 15.1283 92.2622 14.8635 92.6719 14.6822C93.0816 14.501 93.5246 14.4073 93.9725 14.4073C94.4205 14.4073 94.8635 14.501 95.2732 14.6822C95.6829 14.8635 96.0502 15.1283 96.3515 15.4598C96.6528 15.7913 96.8815 16.1822 97.0229 16.6072C97.1643 17.0323 97.2153 17.4822 97.1726 17.9282C97.2161 18.3746 97.1657 18.8251 97.0247 19.2509C96.8836 19.6766 96.6551 20.0682 96.3537 20.4003C96.0523 20.7325 95.6848 20.9979 95.2747 21.1795C94.8646 21.3612 94.4211 21.455 93.9725 21.455C93.524 21.455 93.0805 21.3612 92.6704 21.1795C92.2603 20.9979 91.8928 20.7325 91.5914 20.4003C91.29 20.0682 91.0615 19.6766 90.9204 19.2509C90.7794 18.8251 90.729 18.3746 90.7725 17.9282ZM95.7952 17.9282C95.7952 16.4573 95.1344 15.5971 93.9748 15.5971C92.8107 15.5971 92.1559 16.4573 92.1559 17.9282C92.1559 19.4109 92.8107 20.2644 93.9748 20.2644C95.1344 20.2644 95.7952 19.405 95.7952 17.9282H95.7952Z" fill="white"/><path d="M98.5825 19.405C98.5825 18.1835 99.4919 17.4793 101.106 17.3792L102.944 17.2733V16.6876C102.944 15.9709 102.471 15.5662 101.555 15.5662C100.808 15.5662 100.29 15.8407 100.141 16.3204H98.8444C98.9813 15.1549 100.078 14.4073 101.617 14.4073C103.318 14.4073 104.278 15.2542 104.278 16.6876V21.324H102.989V20.3704H102.883C102.668 20.7124 102.366 20.9913 102.007 21.1785C101.649 21.3657 101.248 21.4545 100.844 21.4358C100.56 21.4654 100.272 21.435 99.9992 21.3466C99.7268 21.2581 99.476 21.1136 99.2628 20.9222C99.0497 20.7309 98.8791 20.497 98.7619 20.2357C98.6447 19.9744 98.5836 19.6914 98.5825 19.405ZM102.944 18.8251V18.2578L101.287 18.3638C100.353 18.4263 99.929 18.7442 99.929 19.3424C99.929 19.9531 100.459 20.3085 101.187 20.3085C101.401 20.3301 101.616 20.3086 101.821 20.2452C102.026 20.1817 102.216 20.0777 102.38 19.9393C102.544 19.8009 102.679 19.631 102.776 19.4395C102.872 19.2481 102.93 19.0392 102.944 18.8251Z" fill="white"/><path d="M106.038 17.9282C106.038 15.784 107.14 14.4257 108.855 14.4257C109.279 14.4061 109.699 14.5077 110.068 14.7185C110.436 14.9293 110.737 15.2407 110.935 15.6162H111.035V11.8893H112.375V21.324H111.091V20.2519H110.985C110.772 20.6248 110.461 20.9323 110.085 21.141C109.709 21.3497 109.284 21.4516 108.855 21.4358C107.128 21.4359 106.038 20.0775 106.038 17.9282ZM107.421 17.9282C107.421 19.3674 108.1 20.2335 109.234 20.2335C110.363 20.2335 111.061 19.3549 111.061 17.9341C111.061 16.5198 110.356 15.6287 109.234 15.6287C108.107 15.6287 107.421 16.5007 107.421 17.9282H107.421Z" fill="white"/><path d="M117.915 17.9281C117.873 17.4822 117.924 17.0322 118.065 16.6071C118.207 16.182 118.435 15.7912 118.737 15.4597C119.038 15.1282 119.405 14.8633 119.815 14.682C120.225 14.5008 120.668 14.4072 121.116 14.4072C121.564 14.4072 122.007 14.5008 122.417 14.682C122.826 14.8633 123.194 15.1282 123.495 15.4597C123.796 15.7912 124.025 16.182 124.166 16.6071C124.308 17.0322 124.359 17.4822 124.316 17.9281C124.36 18.3745 124.309 18.8251 124.168 19.2509C124.027 19.6766 123.799 20.0681 123.497 20.4003C123.196 20.7324 122.828 20.9978 122.418 21.1795C122.008 21.3611 121.564 21.4549 121.116 21.4549C120.667 21.4549 120.224 21.3611 119.814 21.1795C119.404 20.9978 119.036 20.7324 118.735 20.4003C118.433 20.0681 118.205 19.6766 118.064 19.2509C117.922 18.8251 117.872 18.3745 117.915 17.9281ZM122.938 17.9281C122.938 16.4572 122.277 15.5971 121.118 15.5971C119.954 15.5971 119.299 16.4572 119.299 17.9281C119.299 19.4108 119.954 20.2644 121.118 20.2644C122.277 20.2644 122.938 19.4049 122.938 17.9281H122.938Z" fill="white"/><path d="M126.113 14.5382H127.402V15.6162H127.502C127.672 15.229 127.959 14.9045 128.322 14.6878C128.685 14.4711 129.106 14.373 129.527 14.4072C129.858 14.3824 130.189 14.4322 130.497 14.5529C130.806 14.6736 131.083 14.8621 131.309 15.1045C131.534 15.3469 131.702 15.6369 131.801 15.9531C131.899 16.2693 131.925 16.6036 131.876 16.9311V21.3239H130.537V17.2674C130.537 16.1769 130.063 15.6346 129.073 15.6346C128.849 15.6242 128.625 15.6623 128.417 15.7464C128.209 15.8306 128.021 15.9587 127.867 16.122C127.713 16.2854 127.597 16.48 127.525 16.6927C127.453 16.9054 127.429 17.1311 127.452 17.3542V21.324H126.113V14.5382Z" fill="white"/><path d="M139.443 12.8487V14.5691H140.914V15.6971H139.443V19.1864C139.443 19.8972 139.736 20.2084 140.403 20.2084C140.574 20.2079 140.744 20.1976 140.914 20.1775V21.293C140.673 21.336 140.429 21.3589 140.185 21.3615C138.696 21.3615 138.103 20.8375 138.103 19.5293V15.697H137.025V14.569H138.103V12.8487H139.443Z" fill="white"/><path d="M142.743 11.8893H144.07V15.6287H144.176C144.354 15.2379 144.648 14.9115 145.019 14.694C145.389 14.4765 145.817 14.3784 146.245 14.4131C146.574 14.3953 146.902 14.4501 147.207 14.5737C147.512 14.6974 147.785 14.8867 148.009 15.1284C148.232 15.37 148.399 15.6579 148.498 15.9715C148.597 16.2852 148.626 16.6169 148.582 16.9429V21.324H147.242V17.2733C147.242 16.1894 146.737 15.6405 145.791 15.6405C145.56 15.6216 145.329 15.6532 145.112 15.7332C144.896 15.8131 144.699 15.9394 144.536 16.1033C144.374 16.2672 144.249 16.4646 144.17 16.6818C144.092 16.899 144.062 17.1308 144.082 17.3608V21.3239H142.743L142.743 11.8893Z" fill="white"/><path d="M156.391 19.4918C156.209 20.1119 155.815 20.6484 155.277 21.0073C154.74 21.3662 154.093 21.5246 153.45 21.4549C153.003 21.4667 152.559 21.3811 152.148 21.204C151.738 21.0269 151.371 20.7625 151.072 20.4293C150.774 20.096 150.552 19.7019 150.421 19.2742C150.291 18.8465 150.255 18.3955 150.316 17.9524C150.256 17.5081 150.293 17.0561 150.423 16.6271C150.554 16.1981 150.775 15.8021 151.071 15.4659C151.368 15.1298 151.733 14.8613 152.143 14.6786C152.552 14.496 152.996 14.4034 153.445 14.4072C155.333 14.4072 156.472 15.6972 156.472 17.8281V18.2953H151.68V18.3704C151.659 18.6194 151.69 18.8701 151.772 19.1063C151.854 19.3425 151.984 19.5591 152.154 19.7421C152.324 19.9251 152.53 20.0706 152.76 20.1691C152.99 20.2677 153.237 20.3172 153.487 20.3144C153.808 20.3528 154.132 20.2952 154.42 20.1487C154.707 20.0022 154.944 19.7735 155.102 19.4917L156.391 19.4918ZM151.68 17.3049H155.107C155.124 17.0772 155.093 16.8484 155.017 16.6333C154.94 16.4183 154.819 16.2216 154.662 16.0561C154.504 15.8905 154.314 15.7597 154.103 15.6721C153.892 15.5844 153.665 15.5418 153.437 15.547C153.206 15.5441 152.976 15.5876 152.761 15.6749C152.547 15.7623 152.352 15.8916 152.188 16.0555C152.024 16.2193 151.895 16.4143 151.808 16.6288C151.72 16.8434 151.677 17.0733 151.68 17.3049H151.68Z" fill="white"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/macDarkClear.ts b/src/molecules/appDownloadButton/badges/macDarkClear.ts new file mode 100644 index 00000000..58b18cb8 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/macDarkClear.ts @@ -0,0 +1 @@ +export default '<svg width="232" height="60" viewBox="0 0 232 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0H222C227.523 0 232 4.47715 232 10V50C232 55.5228 227.523 60 222 60H10C4.47715 60 0 55.5228 0 50V10ZM68.0643 45.1294V31.3556H67.973L62.3322 44.9866H60.1792L54.5237 31.3556H54.4339V45.1294H51.7879V26.4152H55.1476L61.2034 41.1869H61.3064L67.3505 26.4152H70.722V45.1294H68.0643ZM78.0287 37.231C74.7852 37.4254 72.9575 38.8661 72.9575 41.2516C72.9581 41.8283 73.0793 42.3986 73.3133 42.9256C73.5474 43.4527 73.8891 43.925 74.3165 44.3122C74.7439 44.6995 75.2475 44.993 75.7951 45.174C76.3427 45.355 76.9221 45.4195 77.496 45.3634C78.37 45.374 79.2307 45.1495 79.9882 44.7136C80.7457 44.2776 81.3721 43.6461 81.802 42.8851H81.8668V45.1294H84.5511V35.7779C84.5511 33.0935 82.3981 31.3172 79.1428 31.3172C75.9538 31.3172 73.658 33.067 73.58 35.532H76.1995C76.3613 34.9179 76.7417 34.3839 77.2692 34.0303C77.7968 33.6767 78.4352 33.5278 79.0648 33.6115C80.7645 33.6115 81.7638 34.468 81.7638 35.9853V37.0228L78.0287 37.231ZM81.7638 38.9691V40.0199C81.7454 40.4561 81.6399 40.8842 81.4535 41.279C81.2671 41.6738 81.0035 42.0272 80.6783 42.3186C80.3531 42.6099 79.9729 42.8331 79.5601 42.9752C79.1472 43.1172 78.7101 43.1752 78.2745 43.1456C76.7705 43.1456 75.7845 42.3672 75.7845 41.1736C75.7845 40.0066 76.7308 39.2811 78.404 39.1766L81.7638 38.9691ZM96.311 36.1796C96.1885 35.4333 95.7898 34.7603 95.1941 34.2944C94.5984 33.8284 93.8492 33.6036 93.0954 33.6645C90.9424 33.6645 89.5164 35.4673 89.5164 38.3083C89.5164 41.2133 90.9557 42.9631 93.1204 42.9631C93.8642 43.0376 94.6084 42.8256 95.2013 42.3703C95.7942 41.915 96.191 41.2506 96.311 40.5128H99.0084C98.8406 41.9236 98.1287 43.2133 97.0243 44.1071C95.9199 45.001 94.5103 45.4285 93.0954 45.2986C89.2044 45.2986 86.6629 42.6393 86.6629 38.3083C86.6629 34.0663 89.2044 31.3172 93.069 31.3172C94.4942 31.1964 95.9102 31.6371 97.0152 32.5454C98.1201 33.4538 98.8264 34.7578 98.9835 36.1795L96.311 36.1796ZM110.074 40.0714H117.207L118.918 45.1294H121.991L115.235 26.4152H112.096L105.34 45.1294H108.361L110.074 40.0714ZM116.467 37.7373H110.813L113.601 29.5278H113.679L116.467 37.7373ZM136.582 38.3083C136.582 42.5482 134.313 45.2722 130.889 45.2722C130.021 45.3175 129.158 45.1177 128.399 44.6955C127.64 44.2734 127.015 43.646 126.596 42.8851H126.531V49.6429H123.731V31.4851H126.441V33.7543H126.493C126.931 32.9971 127.567 32.373 128.332 31.9482C129.097 31.5235 129.963 31.3141 130.837 31.3423C134.3 31.3423 136.582 34.0796 136.582 38.3083ZM133.704 38.3083C133.704 35.5453 132.276 33.7293 130.098 33.7293C127.959 33.7293 126.519 35.5836 126.519 38.3083C126.519 41.0574 127.959 42.8984 130.098 42.8984C132.276 42.8984 133.704 41.0957 133.704 38.3083ZM145.905 45.2722C149.33 45.2722 151.599 42.5482 151.599 38.3083C151.599 34.0796 149.317 31.3423 145.854 31.3423C144.979 31.3141 144.113 31.5235 143.348 31.9482C142.584 32.373 141.948 32.9972 141.51 33.7543H141.458V31.4851H138.747V49.6429H141.548V42.8851H141.613C142.032 43.646 142.657 44.2734 143.416 44.6955C144.175 45.1177 145.038 45.3175 145.905 45.2722ZM145.115 33.7293C147.293 33.7293 148.721 35.5453 148.721 38.3083C148.721 41.0957 147.293 42.8984 145.115 42.8984C142.975 42.8984 141.536 41.0574 141.536 38.3083C141.536 35.5836 142.975 33.7293 145.115 33.7293ZM161.524 39.9154C161.731 41.7711 163.534 42.9896 165.998 42.9896C168.358 42.9896 170.056 41.7711 170.056 40.0978C170.056 38.6453 169.032 37.7756 166.607 37.1795L164.182 36.5946C160.745 35.7646 159.15 34.1575 159.15 31.5498C159.15 28.321 161.964 26.1032 165.959 26.1032C169.914 26.1032 172.624 28.321 172.716 31.5498H169.889C169.719 29.6823 168.176 28.555 165.92 28.555C163.664 28.555 162.12 29.6955 162.12 31.3555C162.12 32.6785 163.106 33.457 165.518 34.053L167.58 34.5592C171.419 35.4672 173.014 37.0096 173.014 39.7475C173.014 43.2486 170.226 45.4413 165.79 45.4413C161.64 45.4413 158.838 43.3001 158.657 39.9153L161.524 39.9154ZM179.059 31.4851V28.2563H176.245V31.4851H174.261V33.7028H176.245V41.5239C176.245 44.1699 177.322 45.2074 180.084 45.2074C180.606 45.2171 181.127 45.1737 181.64 45.0779V42.8734C181.334 42.9112 181.027 42.9328 180.719 42.9382C179.578 42.9382 179.059 42.3937 179.059 41.2252V33.7029H181.653V31.4851H179.059ZM183.154 38.3083C183.154 34.0148 185.682 31.3173 189.625 31.3173C193.581 31.3173 196.097 34.0147 196.097 38.3083C196.097 42.6129 193.594 45.2986 189.625 45.2986C185.657 45.2986 183.154 42.6129 183.154 38.3083ZM193.244 38.3083C193.244 35.3628 191.894 33.6248 189.625 33.6248C187.356 33.6248 186.006 35.3761 186.006 38.3083C186.006 41.2648 187.356 42.9896 189.625 42.9896C191.894 42.9896 193.244 41.2648 193.244 38.3083ZM201.077 31.485H198.406V45.1294H201.207V37.0361C201.161 36.6315 201.203 36.2217 201.33 35.8349C201.457 35.4482 201.667 35.0935 201.944 34.7953C202.221 34.4971 202.56 34.2624 202.936 34.1073C203.313 33.9523 203.718 33.8805 204.125 33.897C204.551 33.8846 204.976 33.9418 205.383 34.0663V31.4468C205.068 31.3762 204.747 31.3411 204.424 31.3423C203.677 31.3137 202.943 31.5432 202.345 31.9921C201.748 32.441 201.323 33.082 201.142 33.8073H201.077V31.485ZM218.295 41.1221C217.919 43.5989 215.507 45.2986 212.421 45.2986C208.452 45.2986 205.988 42.6394 205.988 38.3731C205.988 34.0928 208.465 31.3173 212.303 31.3173C216.078 31.3173 218.451 33.9103 218.451 38.0478V39.0074H208.815V39.1766C208.771 39.6787 208.834 40.1845 209 40.6605C209.166 41.1365 209.431 41.5716 209.778 41.9372C210.125 42.3027 210.546 42.5901 211.013 42.7805C211.48 42.9708 211.982 43.0597 212.485 43.0411C213.147 43.1031 213.811 42.9498 214.379 42.6041C214.947 42.2583 215.388 41.7386 215.636 41.1221L218.295 41.1221ZM208.828 37.0493H215.649C215.675 36.5978 215.606 36.146 215.448 35.7223C215.291 35.2985 215.047 34.9119 214.733 34.5868C214.419 34.2616 214.041 34.0049 213.622 33.8328C213.204 33.6607 212.755 33.5768 212.303 33.5866C211.847 33.5838 211.395 33.6715 210.973 33.8444C210.551 34.0173 210.167 34.2721 209.844 34.594C209.521 34.9159 209.265 35.2986 209.091 35.7201C208.916 36.1415 208.827 36.5933 208.828 37.0493ZM37.1986 25.4194C36.5529 26.5571 36.2055 27.8395 36.1886 29.1475C36.1902 30.6188 36.6248 32.0571 37.4384 33.283C38.2519 34.5089 39.4083 35.4683 40.7633 36.0414C40.2306 37.7721 39.4275 39.4077 38.3838 40.8876C36.9822 42.9842 35.5127 45.0326 33.1803 45.0704C32.071 45.096 31.3222 44.777 30.542 44.4446C29.7281 44.0979 28.88 43.7367 27.5529 43.7367C26.1454 43.7367 25.2594 44.1096 24.4048 44.4692C23.6663 44.78 22.9513 45.0809 21.9437 45.1227C19.7224 45.205 18.0248 42.885 16.5723 40.808C13.6691 36.5665 11.4085 28.8548 14.4392 23.6076C15.1388 22.3503 16.1522 21.2957 17.3806 20.5466C18.609 19.7974 20.0105 19.3792 21.4486 19.3328C22.7084 19.3069 23.9173 19.7924 24.9771 20.2181C25.7877 20.5437 26.5111 20.8343 27.1034 20.8343C27.6242 20.8343 28.3274 20.5552 29.1469 20.2299C30.4378 19.7176 32.0174 19.0906 33.6271 19.2596C34.8607 19.2982 36.0683 19.6239 37.154 20.2109C38.2397 20.7978 39.1736 21.6299 39.8816 22.6409C38.7672 23.326 37.8443 24.2818 37.1986 25.4194ZM31.908 16.4701C33.1797 14.9434 33.8062 12.9812 33.6545 11C31.7116 11.2041 29.9169 12.1327 28.628 13.6007C27.9978 14.3179 27.5151 15.1523 27.2076 16.0562C26.9001 16.96 26.7737 17.9156 26.8357 18.8683C27.8075 18.8783 28.7689 18.6677 29.6475 18.2523C30.5261 17.8369 31.299 17.2275 31.908 16.4701ZM57.2472 12.592C56.6985 12.3789 56.1093 12.2902 55.5222 12.3323H52.2743V21.3241H55.5222C58.2006 21.3241 59.7531 19.6728 59.7531 16.8002C59.8272 16.2162 59.7707 15.6231 59.5877 15.0636C59.4048 14.5041 59.0999 13.9922 58.6952 13.5648C58.2904 13.1374 57.7959 12.8051 57.2472 12.592ZM55.3662 20.0525H53.6708V13.603H55.3662C55.7836 13.5798 56.2009 13.6493 56.5883 13.8063C56.9757 13.9634 57.3236 14.2042 57.607 14.5116C57.8904 14.8189 58.1023 15.1851 58.2276 15.5839C58.3529 15.9827 58.3883 16.4044 58.3315 16.8185C58.3928 17.2343 58.3606 17.6586 58.2372 18.0603C58.1138 18.4621 57.9024 18.8313 57.6184 19.1411C57.3343 19.4509 56.9848 19.6935 56.5952 19.8511C56.2056 20.0087 55.7857 20.0775 55.3662 20.0525ZM61.3308 17.9282C61.2881 17.4822 61.3391 17.0323 61.4805 16.6072C61.6219 16.1822 61.8506 15.7913 62.1519 15.4598C62.4533 15.1283 62.8205 14.8635 63.2302 14.6822C63.6399 14.501 64.0829 14.4073 64.5309 14.4073C64.9788 14.4073 65.4219 14.501 65.8315 14.6822C66.2412 14.8635 66.6085 15.1283 66.9098 15.4598C67.2111 15.7913 67.4398 16.1822 67.5812 16.6072C67.7226 17.0323 67.7736 17.4822 67.7309 17.9282C67.7744 18.3746 67.724 18.8251 67.583 19.2509C67.4419 19.6766 67.2134 20.0682 66.912 20.4003C66.6106 20.7325 66.2431 20.9979 65.833 21.1795C65.4229 21.3612 64.9794 21.455 64.5309 21.455C64.0824 21.455 63.6388 21.3612 63.2287 21.1795C62.8186 20.9979 62.4511 20.7325 62.1497 20.4003C61.8483 20.0682 61.6198 19.6766 61.4787 19.2509C61.3377 18.8251 61.2873 18.3746 61.3308 17.9282ZM66.3535 17.9282C66.3535 16.4573 65.6927 15.5971 64.5331 15.5971C63.369 15.5971 62.7142 16.4573 62.7142 17.9282C62.7142 19.4109 63.369 20.2644 64.5331 20.2644C65.6927 20.2644 66.3535 19.405 66.3535 17.9282ZM74.8493 21.3239H76.2385L78.1016 14.5382H76.7624L75.5527 19.7161H75.4468L74.0516 14.5382H72.7669L71.3718 19.7161H71.2717L70.0561 14.5382H68.6978L70.5683 21.3239H71.9442L73.3408 16.3262H73.4468L74.8493 21.3239ZM79.6748 14.5382H80.964V15.6162H81.064C81.2338 15.229 81.5201 14.9045 81.8831 14.6878C82.2461 14.4711 82.6676 14.373 83.089 14.4072C83.4192 14.3824 83.7507 14.4322 84.059 14.5529C84.3674 14.6736 84.6446 14.8621 84.8701 15.1045C85.0957 15.3469 85.2638 15.6369 85.3621 15.9531C85.4604 16.2693 85.4862 16.6036 85.4377 16.9311V21.3239H84.0986V17.2674C84.0986 16.1769 83.6247 15.6346 82.6343 15.6346C82.4101 15.6242 82.1863 15.6623 81.9783 15.7465C81.7702 15.8306 81.5828 15.9587 81.4289 16.122C81.275 16.2854 81.1583 16.48 81.0866 16.6927C81.015 16.9054 80.9902 17.1311 81.014 17.3542V21.324H79.6748L79.6748 14.5382ZM88.9108 11.8893H87.5716V21.324H88.9108V11.8893ZM90.7725 17.9282C90.7298 17.4822 90.7808 17.0323 90.9222 16.6072C91.0637 16.1822 91.2924 15.7913 91.5937 15.4598C91.895 15.1283 92.2622 14.8635 92.6719 14.6822C93.0816 14.501 93.5246 14.4073 93.9726 14.4073C94.4205 14.4073 94.8636 14.501 95.2732 14.6822C95.6829 14.8635 96.0502 15.1283 96.3515 15.4598C96.6528 15.7913 96.8815 16.1822 97.0229 16.6072C97.1643 17.0323 97.2153 17.4822 97.1726 17.9282C97.2161 18.3746 97.1657 18.8251 97.0247 19.2509C96.8836 19.6766 96.6551 20.0682 96.3537 20.4003C96.0523 20.7325 95.6848 20.9979 95.2747 21.1795C94.8646 21.3612 94.4211 21.455 93.9726 21.455C93.524 21.455 93.0805 21.3612 92.6704 21.1795C92.2603 20.9979 91.8928 20.7325 91.5914 20.4003C91.29 20.0682 91.0615 19.6766 90.9204 19.2509C90.7794 18.8251 90.729 18.3746 90.7725 17.9282ZM95.7952 17.9282C95.7952 16.4573 95.1344 15.5971 93.9748 15.5971C92.8107 15.5971 92.1559 16.4573 92.1559 17.9282C92.1559 19.4109 92.8107 20.2644 93.9748 20.2644C95.1344 20.2644 95.7952 19.405 95.7952 17.9282ZM101.106 17.3792C99.4919 17.4793 98.5824 18.1835 98.5824 19.405C98.5836 19.6914 98.6447 19.9743 98.7619 20.2357C98.8791 20.497 99.0497 20.7309 99.2628 20.9222C99.4759 21.1136 99.7268 21.2581 99.9992 21.3466C100.272 21.435 100.559 21.4654 100.844 21.4358C101.248 21.4544 101.649 21.3657 102.007 21.1785C102.366 20.9913 102.668 20.7124 102.883 20.3704H102.989V21.324H104.278V16.6876C104.278 15.2542 103.318 14.4073 101.617 14.4073C100.078 14.4073 98.9813 15.1549 98.8444 16.3204H100.141C100.29 15.8406 100.808 15.5662 101.555 15.5662C102.471 15.5662 102.944 15.9709 102.944 16.6876V17.2733L101.106 17.3792ZM102.944 18.2578V18.8251C102.93 19.0392 102.872 19.2481 102.776 19.4395C102.679 19.631 102.544 19.8009 102.38 19.9393C102.216 20.0777 102.026 20.1817 101.821 20.2452C101.616 20.3086 101.401 20.3301 101.187 20.3085C100.459 20.3085 99.929 19.9531 99.929 19.3424C99.929 18.7442 100.353 18.4263 101.287 18.3638L102.944 18.2578ZM106.038 17.9282C106.038 15.784 107.14 14.4257 108.855 14.4257C109.279 14.4061 109.699 14.5077 110.068 14.7185C110.436 14.9293 110.737 15.2407 110.935 15.6162H111.036V11.8893H112.375V21.324H111.091V20.2519H110.985C110.772 20.6248 110.461 20.9323 110.085 21.141C109.709 21.3497 109.284 21.4516 108.855 21.4358C107.128 21.4359 106.038 20.0775 106.038 17.9282ZM107.421 17.9282C107.421 19.3674 108.1 20.2335 109.234 20.2335C110.363 20.2335 111.061 19.3549 111.061 17.9341C111.061 16.5198 110.356 15.6287 109.234 15.6287C108.107 15.6287 107.421 16.5007 107.421 17.9282ZM118.065 16.6071C117.924 17.0322 117.873 17.4822 117.915 17.9281C117.872 18.3745 117.922 18.8251 118.064 19.2509C118.205 19.6766 118.433 20.0681 118.735 20.4003C119.036 20.7324 119.404 20.9978 119.814 21.1795C120.224 21.3611 120.667 21.4549 121.116 21.4549C121.564 21.4549 122.008 21.3611 122.418 21.1795C122.828 20.9978 123.196 20.7324 123.497 20.4003C123.799 20.0681 124.027 19.6766 124.168 19.2509C124.309 18.8251 124.36 18.3745 124.316 17.9281C124.359 17.4822 124.308 17.0322 124.166 16.6071C124.025 16.182 123.796 15.7912 123.495 15.4597C123.194 15.1282 122.826 14.8633 122.417 14.6821C122.007 14.5008 121.564 14.4072 121.116 14.4072C120.668 14.4072 120.225 14.5008 119.815 14.6821C119.405 14.8633 119.038 15.1282 118.737 15.4597C118.435 15.7912 118.207 16.182 118.065 16.6071ZM121.118 15.5971C122.277 15.5971 122.938 16.4572 122.938 17.9281C122.938 19.4049 122.277 20.2644 121.118 20.2644C119.954 20.2644 119.299 19.4108 119.299 17.9282C119.299 16.4572 119.954 15.5971 121.118 15.5971ZM126.113 14.5382H127.402V15.6162H127.502C127.672 15.229 127.959 14.9045 128.322 14.6878C128.685 14.4711 129.106 14.373 129.527 14.4072C129.858 14.3824 130.189 14.4322 130.497 14.5529C130.806 14.6736 131.083 14.8621 131.309 15.1045C131.534 15.3469 131.702 15.6369 131.801 15.9531C131.899 16.2693 131.925 16.6036 131.876 16.9311V21.3239H130.537V17.2674C130.537 16.1769 130.063 15.6346 129.073 15.6346C128.849 15.6242 128.625 15.6623 128.417 15.7465C128.209 15.8306 128.021 15.9587 127.867 16.122C127.713 16.2854 127.597 16.48 127.525 16.6927C127.453 16.9054 127.429 17.1311 127.452 17.3542V21.324H126.113V14.5382ZM139.443 14.5691V12.8487H138.103V14.569H137.025V15.6971H138.103V19.5293C138.103 20.8375 138.696 21.3615 140.185 21.3615C140.429 21.3589 140.673 21.3361 140.914 21.293V20.1775C140.744 20.1976 140.574 20.2079 140.403 20.2084C139.736 20.2084 139.443 19.8972 139.443 19.1864V15.6971H140.914V14.5691H139.443ZM142.743 11.8893H144.07V15.6287H144.176C144.354 15.2379 144.648 14.9115 145.019 14.694C145.389 14.4765 145.817 14.3784 146.245 14.4131C146.574 14.3953 146.902 14.4501 147.207 14.5737C147.512 14.6974 147.785 14.8867 148.009 15.1284C148.232 15.37 148.399 15.6579 148.498 15.9716C148.597 16.2852 148.626 16.6169 148.582 16.9429V21.324H147.242V17.2733C147.242 16.1894 146.737 15.6405 145.791 15.6405C145.56 15.6216 145.329 15.6532 145.112 15.7332C144.896 15.8131 144.699 15.9395 144.536 16.1033C144.374 16.2672 144.249 16.4646 144.17 16.6818C144.092 16.899 144.062 17.1308 144.082 17.3608V21.3239H142.743L142.743 11.8893ZM155.277 21.0073C155.815 20.6484 156.209 20.112 156.391 19.4918L155.102 19.4917C154.945 19.7735 154.707 20.0022 154.42 20.1487C154.132 20.2952 153.808 20.3528 153.487 20.3144C153.237 20.3172 152.99 20.2677 152.76 20.1691C152.53 20.0706 152.324 19.9251 152.154 19.7421C151.984 19.5591 151.854 19.3425 151.772 19.1063C151.69 18.8701 151.659 18.6194 151.68 18.3704V18.2954H156.472V17.8281C156.472 15.6972 155.333 14.4073 153.445 14.4073C152.996 14.4034 152.552 14.496 152.143 14.6786C151.733 14.8613 151.368 15.1298 151.071 15.466C150.775 15.8021 150.554 16.1981 150.423 16.6271C150.293 17.0561 150.256 17.5081 150.316 17.9524C150.255 18.3955 150.291 18.8465 150.421 19.2742C150.552 19.7019 150.774 20.0961 151.072 20.4293C151.371 20.7625 151.738 21.0269 152.148 21.204C152.559 21.3811 153.003 21.4667 153.45 21.4549C154.093 21.5246 154.74 21.3662 155.277 21.0073ZM155.108 17.3049H151.68C151.677 17.0733 151.72 16.8434 151.808 16.6288C151.895 16.4143 152.024 16.2193 152.188 16.0555C152.352 15.8917 152.547 15.7623 152.761 15.6749C152.976 15.5876 153.206 15.5441 153.437 15.547C153.665 15.5418 153.892 15.5844 154.103 15.6721C154.314 15.7597 154.504 15.8905 154.662 16.0561C154.819 16.2216 154.94 16.4183 155.017 16.6333C155.093 16.8484 155.124 17.0772 155.108 17.3049Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/macLight.ts b/src/molecules/appDownloadButton/badges/macLight.ts new file mode 100644 index 00000000..4c048066 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/macLight.ts @@ -0,0 +1 @@ +export default '<svg width="232" height="60" viewBox="0 0 232 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="231" height="59" rx="9.5" fill="white" stroke="black"/><path d="M68.0643 45.1294V31.3555H67.973L62.3322 44.9866H60.1792L54.5237 31.3555H54.4339V45.1294H51.7879V26.4152H55.1476L61.2034 41.1869H61.3064L67.3505 26.4152H70.722V45.1294H68.0643Z" fill="black"/><path d="M72.9575 41.2516C72.9575 38.8661 74.7852 37.4254 78.0287 37.2311L81.7638 37.0228V35.9853C81.7638 34.468 80.7645 33.6115 79.0648 33.6115C78.4353 33.5278 77.7968 33.6767 77.2692 34.0303C76.7417 34.3839 76.3613 34.9179 76.1995 35.532H73.58C73.658 33.067 75.9538 31.3172 79.1428 31.3172C82.3981 31.3172 84.5511 33.0935 84.5511 35.7779V45.1294H81.8668V42.8851H81.802C81.3721 43.6461 80.7457 44.2776 79.9882 44.7136C79.2307 45.1495 78.37 45.374 77.496 45.3634C76.9221 45.4195 76.3427 45.355 75.7951 45.174C75.2475 44.993 74.7439 44.6995 74.3165 44.3122C73.8891 43.925 73.5474 43.4527 73.3133 42.9256C73.0793 42.3986 72.9581 41.8283 72.9575 41.2516ZM81.7638 40.0199V38.9691L78.404 39.1766C76.7308 39.2811 75.7845 40.0066 75.7845 41.1736C75.7845 42.3672 76.7705 43.1456 78.2745 43.1456C78.7101 43.1752 79.1472 43.1172 79.5601 42.9752C79.9729 42.8331 80.3531 42.6099 80.6783 42.3186C81.0035 42.0272 81.2671 41.6738 81.4535 41.279C81.6399 40.8842 81.7454 40.4561 81.7638 40.0199L81.7638 40.0199Z" fill="black"/><path d="M96.311 36.1796C96.1885 35.4333 95.7899 34.7603 95.1941 34.2944C94.5984 33.8284 93.8493 33.6036 93.0954 33.6646C90.9424 33.6646 89.5164 35.4673 89.5164 38.3083C89.5164 41.2133 90.9557 42.9631 93.1204 42.9631C93.8642 43.0376 94.6084 42.8256 95.2013 42.3703C95.7942 41.915 96.191 41.2507 96.311 40.5128H99.0084C98.8406 41.9237 98.1287 43.2133 97.0243 44.1071C95.9199 45.001 94.5103 45.4285 93.0954 45.2986C89.2044 45.2986 86.6629 42.6393 86.6629 38.3083C86.6629 34.0663 89.2044 31.3172 93.069 31.3172C94.4942 31.1964 95.9103 31.6371 97.0152 32.5454C98.1201 33.4538 98.8264 34.7578 98.9835 36.1795L96.311 36.1796Z" fill="black"/><path d="M117.207 40.0713H110.074L108.361 45.1294H105.34L112.096 26.4152H115.235L121.991 45.1294H118.918L117.207 40.0713ZM110.813 37.7373H116.467L113.679 29.5278H113.601L110.813 37.7373Z" fill="black"/><path d="M136.582 38.3083C136.582 42.5482 134.313 45.2722 130.889 45.2722C130.021 45.3175 129.158 45.1177 128.399 44.6955C127.64 44.2734 127.015 43.646 126.596 42.8851H126.531V49.6429H123.731V31.4851H126.441V33.7543H126.493C126.931 32.9971 127.567 32.373 128.332 31.9482C129.097 31.5235 129.963 31.3141 130.837 31.3423C134.3 31.3423 136.582 34.0796 136.582 38.3083ZM133.704 38.3083C133.704 35.5453 132.276 33.7293 130.098 33.7293C127.959 33.7293 126.519 35.5836 126.519 38.3083C126.519 41.0574 127.959 42.8984 130.098 42.8984C132.276 42.8984 133.704 41.0957 133.704 38.3083Z" fill="black"/><path d="M151.599 38.3083C151.599 42.5482 149.33 45.2722 145.905 45.2722C145.038 45.3175 144.175 45.1177 143.416 44.6955C142.657 44.2734 142.032 43.646 141.613 42.8851H141.548V49.6429H138.747V31.4851H141.458V33.7543H141.51C141.948 32.9971 142.584 32.373 143.349 31.9482C144.113 31.5235 144.979 31.3141 145.854 31.3423C149.317 31.3423 151.599 34.0796 151.599 38.3083ZM148.721 38.3083C148.721 35.5453 147.293 33.7293 145.115 33.7293C142.975 33.7293 141.536 35.5836 141.536 38.3083C141.536 41.0574 142.975 42.8984 145.115 42.8984C147.293 42.8984 148.721 41.0957 148.721 38.3083H148.721Z" fill="black"/><path d="M161.524 39.9154C161.731 41.7711 163.534 42.9896 165.998 42.9896C168.358 42.9896 170.056 41.7711 170.056 40.0978C170.056 38.6453 169.032 37.7756 166.607 37.1795L164.182 36.5946C160.745 35.7646 159.15 34.1575 159.15 31.5498C159.15 28.321 161.964 26.1032 165.959 26.1032C169.914 26.1032 172.625 28.321 172.716 31.5498H169.889C169.719 29.6822 168.176 28.555 165.92 28.555C163.664 28.555 162.12 29.6955 162.12 31.3555C162.12 32.6785 163.106 33.457 165.518 34.053L167.58 34.5592C171.419 35.4672 173.014 37.0096 173.014 39.7475C173.014 43.2485 170.226 45.4413 165.79 45.4413C161.64 45.4413 158.838 43.3001 158.657 39.9153L161.524 39.9154Z" fill="black"/><path d="M179.059 28.2563V31.4851H181.653V33.7029H179.059V41.2252C179.059 42.3937 179.578 42.9382 180.719 42.9382C181.027 42.9328 181.334 42.9112 181.64 42.8734V45.0779C181.127 45.1737 180.606 45.2171 180.084 45.2074C177.322 45.2074 176.245 44.1699 176.245 41.5239V33.7028H174.261V31.4851H176.245V28.2563H179.059Z" fill="black"/><path d="M183.154 38.3083C183.154 34.0148 185.682 31.3173 189.625 31.3173C193.581 31.3173 196.097 34.0147 196.097 38.3083C196.097 42.6129 193.594 45.2986 189.625 45.2986C185.657 45.2986 183.154 42.6129 183.154 38.3083ZM193.244 38.3083C193.244 35.3628 191.894 33.6248 189.625 33.6248C187.356 33.6248 186.006 35.3761 186.006 38.3083C186.006 41.2648 187.356 42.9896 189.625 42.9896C191.894 42.9896 193.244 41.2648 193.244 38.3083H193.244Z" fill="black"/><path d="M198.406 31.485H201.077V33.8073H201.142C201.323 33.082 201.748 32.441 202.345 31.9921C202.943 31.5432 203.677 31.3137 204.424 31.3423C204.747 31.3411 205.068 31.3762 205.383 31.4468V34.0663C204.976 33.9418 204.551 33.8846 204.125 33.897C203.718 33.8805 203.313 33.9523 202.936 34.1073C202.56 34.2624 202.221 34.497 201.944 34.7953C201.667 35.0935 201.457 35.4482 201.33 35.8349C201.203 36.2217 201.161 36.6315 201.207 37.036V45.1294H198.406V31.485Z" fill="black"/><path d="M218.295 41.1221C217.919 43.5989 215.507 45.2986 212.421 45.2986C208.452 45.2986 205.988 42.6394 205.988 38.3731C205.988 34.0928 208.465 31.3173 212.303 31.3173C216.078 31.3173 218.451 33.9103 218.451 38.0478V39.0074H208.815V39.1766C208.771 39.6787 208.834 40.1845 209 40.6605C209.166 41.1365 209.431 41.5716 209.778 41.9372C210.125 42.3027 210.546 42.5901 211.013 42.7805C211.48 42.9708 211.982 43.0597 212.485 43.0411C213.147 43.1031 213.811 42.9498 214.379 42.6041C214.947 42.2583 215.388 41.7386 215.636 41.1221L218.295 41.1221ZM208.828 37.0493H215.649C215.675 36.5978 215.606 36.146 215.448 35.7223C215.291 35.2985 215.047 34.9119 214.733 34.5868C214.419 34.2616 214.041 34.0049 213.622 33.8328C213.204 33.6607 212.755 33.5768 212.303 33.5865C211.847 33.5838 211.395 33.6715 210.973 33.8444C210.551 34.0173 210.167 34.2721 209.844 34.594C209.521 34.9159 209.265 35.2986 209.091 35.7201C208.916 36.1415 208.827 36.5933 208.828 37.0493H208.828Z" fill="black"/><path d="M36.1886 29.1475C36.2055 27.8395 36.5529 26.557 37.1986 25.4194C37.8443 24.2818 38.7672 23.326 39.8816 22.6409C39.1737 21.6299 38.2397 20.7978 37.154 20.2109C36.0683 19.6239 34.8607 19.2982 33.6271 19.2596C30.9956 18.9834 28.4444 20.8343 27.1034 20.8343C25.7365 20.8343 23.6719 19.287 21.4486 19.3328C20.0105 19.3792 18.609 19.7974 17.3806 20.5466C16.1522 21.2957 15.1388 22.3503 14.4392 23.6076C11.4085 28.8548 13.6691 36.5665 16.5723 40.808C18.0248 42.885 19.7224 45.205 21.9437 45.1227C24.1173 45.0325 24.9291 43.7367 27.5529 43.7367C30.1523 43.7367 30.9139 45.1227 33.1803 45.0704C35.5127 45.0325 36.9822 42.9842 38.3838 40.8876C39.4275 39.4077 40.2306 37.7721 40.7633 36.0414C39.4083 35.4683 38.2519 34.5089 37.4384 33.283C36.6248 32.0571 36.1902 30.6188 36.1886 29.1475Z" fill="black"/><path d="M31.908 16.4701C33.1797 14.9434 33.8062 12.9812 33.6545 11C31.7116 11.2041 29.9169 12.1327 28.628 13.6007C27.9978 14.3179 27.5151 15.1523 27.2076 16.0562C26.9001 16.96 26.7737 17.9156 26.8357 18.8683C27.8075 18.8783 28.7689 18.6677 29.6475 18.2523C30.5261 17.8369 31.299 17.2275 31.908 16.4701Z" fill="black"/><path d="M55.5221 12.3323C56.1093 12.2902 56.6984 12.3789 57.2471 12.592C57.7958 12.8051 58.2904 13.1374 58.6952 13.5648C59.0999 13.9922 59.4047 14.5041 59.5877 15.0636C59.7707 15.6231 59.8271 16.2162 59.7531 16.8002C59.7531 19.6728 58.2005 21.3241 55.5221 21.3241H52.2742V12.3323H55.5221ZM53.6708 20.0525H55.3661C55.7857 20.0775 56.2055 20.0087 56.5952 19.8511C56.9848 19.6934 57.3343 19.4509 57.6184 19.1411C57.9024 18.8313 58.1138 18.4621 58.2372 18.0603C58.3605 17.6586 58.3928 17.2343 58.3315 16.8185C58.3883 16.4044 58.3528 15.9827 58.2276 15.5839C58.1023 15.1851 57.8904 14.8189 57.607 14.5116C57.3236 14.2042 56.9757 13.9634 56.5883 13.8063C56.2009 13.6493 55.7835 13.5798 55.3661 13.603H53.6708V20.0525Z" fill="black"/><path d="M61.3308 17.9282C61.2881 17.4822 61.3391 17.0323 61.4805 16.6072C61.6219 16.1822 61.8506 15.7913 62.1519 15.4598C62.4532 15.1283 62.8205 14.8635 63.2302 14.6822C63.6398 14.501 64.0829 14.4073 64.5308 14.4073C64.9788 14.4073 65.4218 14.501 65.8315 14.6822C66.2412 14.8635 66.6084 15.1283 66.9097 15.4598C67.2111 15.7913 67.4398 16.1822 67.5812 16.6072C67.7226 17.0323 67.7736 17.4822 67.7309 17.9282C67.7744 18.3746 67.724 18.8251 67.583 19.2509C67.4419 19.6766 67.2134 20.0682 66.912 20.4003C66.6106 20.7325 66.2431 20.9979 65.833 21.1795C65.4229 21.3612 64.9793 21.455 64.5308 21.455C64.0823 21.455 63.6388 21.3612 63.2287 21.1795C62.8186 20.9979 62.4511 20.7325 62.1497 20.4003C61.8483 20.0682 61.6198 19.6766 61.4787 19.2509C61.3377 18.8251 61.2873 18.3746 61.3308 17.9282ZM66.3535 17.9282C66.3535 16.4573 65.6927 15.5971 64.533 15.5971C63.369 15.5971 62.7141 16.4573 62.7141 17.9282C62.7141 19.4109 63.369 20.2644 64.533 20.2644C65.6927 20.2644 66.3535 19.405 66.3535 17.9282H66.3535Z" fill="black"/><path d="M76.2385 21.3239H74.8493L73.4468 16.3262H73.3408L71.9442 21.3239H70.5682L68.6978 14.5382H70.0561L71.2717 19.7161H71.3718L72.7669 14.5382H74.0516L75.4467 19.7161H75.5527L76.7624 14.5382H78.1016L76.2385 21.3239Z" fill="black"/><path d="M79.6748 14.5382H80.9639V15.6162H81.064C81.2338 15.229 81.5201 14.9045 81.8831 14.6878C82.2461 14.4711 82.6676 14.373 83.089 14.4072C83.4192 14.3824 83.7507 14.4322 84.059 14.5529C84.3673 14.6736 84.6446 14.8621 84.8701 15.1045C85.0957 15.3469 85.2638 15.6369 85.3621 15.9531C85.4603 16.2693 85.4862 16.6036 85.4377 16.9311V21.3239H84.0985V17.2674C84.0985 16.1769 83.6247 15.6346 82.6343 15.6346C82.4101 15.6242 82.1863 15.6623 81.9783 15.7464C81.7702 15.8306 81.5828 15.9587 81.4289 16.122C81.275 16.2854 81.1583 16.48 81.0866 16.6927C81.015 16.9054 80.9902 17.1311 81.014 17.3542V21.324H79.6748L79.6748 14.5382Z" fill="black"/><path d="M87.5716 11.8893H88.9108V21.324H87.5716V11.8893Z" fill="black"/><path d="M90.7725 17.9282C90.7298 17.4822 90.7808 17.0323 90.9222 16.6072C91.0636 16.1822 91.2923 15.7913 91.5936 15.4598C91.8949 15.1283 92.2622 14.8635 92.6719 14.6822C93.0816 14.501 93.5246 14.4073 93.9725 14.4073C94.4205 14.4073 94.8635 14.501 95.2732 14.6822C95.6829 14.8635 96.0502 15.1283 96.3515 15.4598C96.6528 15.7913 96.8815 16.1822 97.0229 16.6072C97.1643 17.0323 97.2153 17.4822 97.1726 17.9282C97.2161 18.3746 97.1657 18.8251 97.0247 19.2509C96.8836 19.6766 96.6551 20.0682 96.3537 20.4003C96.0523 20.7325 95.6848 20.9979 95.2747 21.1795C94.8646 21.3612 94.4211 21.455 93.9725 21.455C93.524 21.455 93.0805 21.3612 92.6704 21.1795C92.2603 20.9979 91.8928 20.7325 91.5914 20.4003C91.29 20.0682 91.0615 19.6766 90.9204 19.2509C90.7794 18.8251 90.729 18.3746 90.7725 17.9282ZM95.7952 17.9282C95.7952 16.4573 95.1344 15.5971 93.9748 15.5971C92.8107 15.5971 92.1559 16.4573 92.1559 17.9282C92.1559 19.4109 92.8107 20.2644 93.9748 20.2644C95.1344 20.2644 95.7952 19.405 95.7952 17.9282H95.7952Z" fill="black"/><path d="M98.5824 19.405C98.5824 18.1835 99.4919 17.4793 101.106 17.3792L102.944 17.2733V16.6876C102.944 15.9709 102.471 15.5662 101.555 15.5662C100.808 15.5662 100.29 15.8407 100.141 16.3204H98.8444C98.9812 15.1549 100.078 14.4073 101.617 14.4073C103.318 14.4073 104.278 15.2542 104.278 16.6876V21.324H102.989V20.3704H102.883C102.668 20.7124 102.366 20.9913 102.007 21.1785C101.649 21.3657 101.248 21.4545 100.844 21.4358C100.559 21.4654 100.272 21.435 99.9992 21.3466C99.7268 21.2581 99.4759 21.1136 99.2628 20.9222C99.0497 20.7309 98.8791 20.497 98.7619 20.2357C98.6447 19.9744 98.5836 19.6914 98.5824 19.405ZM102.944 18.8251V18.2578L101.287 18.3638C100.353 18.4263 99.929 18.7442 99.929 19.3424C99.929 19.9531 100.459 20.3085 101.187 20.3085C101.401 20.3301 101.616 20.3086 101.821 20.2452C102.026 20.1817 102.216 20.0777 102.38 19.9393C102.544 19.8009 102.679 19.631 102.776 19.4395C102.872 19.2481 102.93 19.0392 102.944 18.8251Z" fill="black"/><path d="M106.038 17.9282C106.038 15.784 107.14 14.4257 108.855 14.4257C109.279 14.4061 109.699 14.5077 110.068 14.7185C110.436 14.9293 110.737 15.2407 110.935 15.6162H111.035V11.8893H112.375V21.324H111.091V20.2519H110.985C110.772 20.6248 110.461 20.9323 110.085 21.141C109.709 21.3497 109.284 21.4516 108.855 21.4358C107.128 21.4359 106.038 20.0775 106.038 17.9282ZM107.421 17.9282C107.421 19.3674 108.1 20.2335 109.234 20.2335C110.363 20.2335 111.061 19.3549 111.061 17.9341C111.061 16.5198 110.356 15.6287 109.234 15.6287C108.107 15.6287 107.421 16.5007 107.421 17.9282H107.421Z" fill="black"/><path d="M117.915 17.9281C117.873 17.4822 117.924 17.0322 118.065 16.6071C118.207 16.182 118.435 15.7912 118.737 15.4597C119.038 15.1282 119.405 14.8633 119.815 14.682C120.225 14.5008 120.668 14.4072 121.116 14.4072C121.564 14.4072 122.007 14.5008 122.417 14.682C122.826 14.8633 123.194 15.1282 123.495 15.4597C123.796 15.7912 124.025 16.182 124.166 16.6071C124.308 17.0322 124.359 17.4822 124.316 17.9281C124.36 18.3745 124.309 18.8251 124.168 19.2509C124.027 19.6766 123.799 20.0681 123.497 20.4003C123.196 20.7324 122.828 20.9978 122.418 21.1795C122.008 21.3611 121.564 21.4549 121.116 21.4549C120.667 21.4549 120.224 21.3611 119.814 21.1795C119.404 20.9978 119.036 20.7324 118.735 20.4003C118.433 20.0681 118.205 19.6766 118.064 19.2509C117.922 18.8251 117.872 18.3745 117.915 17.9281ZM122.938 17.9281C122.938 16.4572 122.277 15.5971 121.118 15.5971C119.954 15.5971 119.299 16.4572 119.299 17.9281C119.299 19.4108 119.954 20.2644 121.118 20.2644C122.277 20.2644 122.938 19.4049 122.938 17.9281H122.938Z" fill="black"/><path d="M126.113 14.5382H127.402V15.6162H127.502C127.672 15.229 127.959 14.9045 128.322 14.6878C128.685 14.4711 129.106 14.373 129.527 14.4072C129.858 14.3824 130.189 14.4322 130.497 14.5529C130.806 14.6736 131.083 14.8621 131.309 15.1045C131.534 15.3469 131.702 15.6369 131.801 15.9531C131.899 16.2693 131.925 16.6036 131.876 16.9311V21.3239H130.537V17.2674C130.537 16.1769 130.063 15.6346 129.073 15.6346C128.849 15.6242 128.625 15.6623 128.417 15.7464C128.209 15.8306 128.021 15.9587 127.867 16.122C127.713 16.2854 127.597 16.48 127.525 16.6927C127.453 16.9054 127.429 17.1311 127.452 17.3542V21.324H126.113V14.5382Z" fill="black"/><path d="M139.443 12.8487V14.5691H140.914V15.6971H139.443V19.1864C139.443 19.8972 139.736 20.2084 140.403 20.2084C140.574 20.2079 140.744 20.1976 140.914 20.1775V21.293C140.673 21.336 140.429 21.3589 140.185 21.3615C138.696 21.3615 138.103 20.8375 138.103 19.5293V15.697H137.025V14.569H138.103V12.8487H139.443Z" fill="black"/><path d="M142.743 11.8893H144.07V15.6287H144.176C144.354 15.2379 144.648 14.9115 145.019 14.694C145.389 14.4765 145.817 14.3784 146.245 14.4131C146.574 14.3953 146.902 14.4501 147.207 14.5737C147.512 14.6974 147.785 14.8867 148.009 15.1284C148.232 15.37 148.399 15.6579 148.498 15.9715C148.597 16.2852 148.626 16.6169 148.582 16.9429V21.324H147.242V17.2733C147.242 16.1894 146.737 15.6405 145.791 15.6405C145.56 15.6216 145.329 15.6532 145.112 15.7332C144.896 15.8131 144.699 15.9394 144.536 16.1033C144.374 16.2672 144.249 16.4646 144.17 16.6818C144.092 16.899 144.062 17.1308 144.082 17.3608V21.3239H142.743L142.743 11.8893Z" fill="black"/><path d="M156.391 19.4918C156.209 20.1119 155.815 20.6484 155.277 21.0073C154.74 21.3662 154.093 21.5246 153.45 21.4549C153.003 21.4667 152.559 21.3811 152.148 21.204C151.738 21.0269 151.371 20.7625 151.072 20.4293C150.774 20.096 150.552 19.7019 150.421 19.2742C150.291 18.8465 150.255 18.3955 150.316 17.9524C150.256 17.5081 150.293 17.0561 150.423 16.6271C150.554 16.1981 150.775 15.8021 151.071 15.4659C151.368 15.1298 151.733 14.8613 152.143 14.6786C152.552 14.496 152.996 14.4034 153.445 14.4072C155.333 14.4072 156.472 15.6972 156.472 17.8281V18.2953H151.68V18.3704C151.659 18.6194 151.69 18.8701 151.772 19.1063C151.854 19.3425 151.984 19.5591 152.154 19.7421C152.324 19.9251 152.53 20.0706 152.76 20.1691C152.99 20.2677 153.237 20.3172 153.487 20.3144C153.808 20.3528 154.132 20.2952 154.42 20.1487C154.707 20.0022 154.944 19.7735 155.102 19.4917L156.391 19.4918ZM151.68 17.3049H155.107C155.124 17.0772 155.093 16.8484 155.017 16.6333C154.94 16.4183 154.819 16.2216 154.662 16.0561C154.504 15.8905 154.314 15.7597 154.103 15.6721C153.892 15.5844 153.665 15.5418 153.437 15.547C153.206 15.5441 152.976 15.5876 152.761 15.6749C152.547 15.7623 152.352 15.8916 152.188 16.0555C152.024 16.2193 151.895 16.4143 151.808 16.6288C151.72 16.8434 151.677 17.0733 151.68 17.3049H151.68Z" fill="black"/></svg>'; diff --git a/src/molecules/appDownloadButton/badges/macLightClear.ts b/src/molecules/appDownloadButton/badges/macLightClear.ts new file mode 100644 index 00000000..9c3d1841 --- /dev/null +++ b/src/molecules/appDownloadButton/badges/macLightClear.ts @@ -0,0 +1 @@ +export default '<svg width="232" height="60" viewBox="0 0 232 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0H222C227.523 0 232 4.47715 232 10V50C232 55.5228 227.523 60 222 60H10C4.47715 60 0 55.5228 0 50V10ZM68.0643 45.1294V31.3556H67.973L62.3322 44.9866H60.1792L54.5237 31.3556H54.4339V45.1294H51.7879V26.4152H55.1476L61.2034 41.1869H61.3064L67.3505 26.4152H70.722V45.1294H68.0643ZM78.0287 37.231C74.7852 37.4254 72.9575 38.8661 72.9575 41.2516C72.9581 41.8283 73.0793 42.3986 73.3133 42.9256C73.5474 43.4527 73.8891 43.925 74.3165 44.3122C74.7439 44.6995 75.2475 44.993 75.7951 45.174C76.3427 45.355 76.9221 45.4195 77.496 45.3634C78.37 45.374 79.2307 45.1495 79.9882 44.7136C80.7457 44.2776 81.3721 43.6461 81.802 42.8851H81.8668V45.1294H84.5511V35.7779C84.5511 33.0935 82.3981 31.3172 79.1428 31.3172C75.9538 31.3172 73.658 33.067 73.58 35.532H76.1995C76.3613 34.9179 76.7417 34.3839 77.2692 34.0303C77.7968 33.6767 78.4352 33.5278 79.0648 33.6115C80.7645 33.6115 81.7638 34.468 81.7638 35.9853V37.0228L78.0287 37.231ZM81.7638 38.9691V40.0199C81.7454 40.4561 81.6399 40.8842 81.4535 41.279C81.2671 41.6738 81.0035 42.0272 80.6783 42.3186C80.3531 42.6099 79.9729 42.8331 79.5601 42.9752C79.1472 43.1172 78.7101 43.1752 78.2745 43.1456C76.7705 43.1456 75.7845 42.3672 75.7845 41.1736C75.7845 40.0066 76.7308 39.2811 78.404 39.1766L81.7638 38.9691ZM96.311 36.1796C96.1885 35.4333 95.7898 34.7603 95.1941 34.2944C94.5984 33.8284 93.8492 33.6036 93.0954 33.6645C90.9424 33.6645 89.5164 35.4673 89.5164 38.3083C89.5164 41.2133 90.9557 42.9631 93.1204 42.9631C93.8642 43.0376 94.6084 42.8256 95.2013 42.3703C95.7942 41.915 96.191 41.2506 96.311 40.5128H99.0084C98.8406 41.9236 98.1287 43.2133 97.0243 44.1071C95.9199 45.001 94.5103 45.4285 93.0954 45.2986C89.2044 45.2986 86.6629 42.6393 86.6629 38.3083C86.6629 34.0663 89.2044 31.3172 93.069 31.3172C94.4942 31.1964 95.9102 31.6371 97.0152 32.5454C98.1201 33.4538 98.8264 34.7578 98.9835 36.1795L96.311 36.1796ZM110.074 40.0714H117.207L118.918 45.1294H121.991L115.235 26.4152H112.096L105.34 45.1294H108.361L110.074 40.0714ZM116.467 37.7373H110.813L113.601 29.5278H113.679L116.467 37.7373ZM136.582 38.3083C136.582 42.5482 134.313 45.2722 130.889 45.2722C130.021 45.3175 129.158 45.1177 128.399 44.6955C127.64 44.2734 127.015 43.646 126.596 42.8851H126.531V49.6429H123.731V31.4851H126.441V33.7543H126.493C126.931 32.9971 127.567 32.373 128.332 31.9482C129.097 31.5235 129.963 31.3141 130.837 31.3423C134.3 31.3423 136.582 34.0796 136.582 38.3083ZM133.704 38.3083C133.704 35.5453 132.276 33.7293 130.098 33.7293C127.959 33.7293 126.519 35.5836 126.519 38.3083C126.519 41.0574 127.959 42.8984 130.098 42.8984C132.276 42.8984 133.704 41.0957 133.704 38.3083ZM145.905 45.2722C149.33 45.2722 151.599 42.5482 151.599 38.3083C151.599 34.0796 149.317 31.3423 145.854 31.3423C144.979 31.3141 144.113 31.5235 143.348 31.9482C142.584 32.373 141.948 32.9972 141.51 33.7543H141.458V31.4851H138.747V49.6429H141.548V42.8851H141.613C142.032 43.646 142.657 44.2734 143.416 44.6955C144.175 45.1177 145.038 45.3175 145.905 45.2722ZM145.115 33.7293C147.293 33.7293 148.721 35.5453 148.721 38.3083C148.721 41.0957 147.293 42.8984 145.115 42.8984C142.975 42.8984 141.536 41.0574 141.536 38.3083C141.536 35.5836 142.975 33.7293 145.115 33.7293ZM161.524 39.9154C161.731 41.7711 163.534 42.9896 165.998 42.9896C168.358 42.9896 170.056 41.7711 170.056 40.0978C170.056 38.6453 169.032 37.7756 166.607 37.1795L164.182 36.5946C160.745 35.7646 159.15 34.1575 159.15 31.5498C159.15 28.321 161.964 26.1032 165.959 26.1032C169.914 26.1032 172.624 28.321 172.716 31.5498H169.889C169.719 29.6823 168.176 28.555 165.92 28.555C163.664 28.555 162.12 29.6955 162.12 31.3555C162.12 32.6785 163.106 33.457 165.518 34.053L167.58 34.5592C171.419 35.4672 173.014 37.0096 173.014 39.7475C173.014 43.2486 170.226 45.4413 165.79 45.4413C161.64 45.4413 158.838 43.3001 158.657 39.9153L161.524 39.9154ZM179.059 31.4851V28.2563H176.245V31.4851H174.261V33.7028H176.245V41.5239C176.245 44.1699 177.322 45.2074 180.084 45.2074C180.606 45.2171 181.127 45.1737 181.64 45.0779V42.8734C181.334 42.9112 181.027 42.9328 180.719 42.9382C179.578 42.9382 179.059 42.3937 179.059 41.2252V33.7029H181.653V31.4851H179.059ZM183.154 38.3083C183.154 34.0148 185.682 31.3173 189.625 31.3173C193.581 31.3173 196.097 34.0147 196.097 38.3083C196.097 42.6129 193.594 45.2986 189.625 45.2986C185.657 45.2986 183.154 42.6129 183.154 38.3083ZM193.244 38.3083C193.244 35.3628 191.894 33.6248 189.625 33.6248C187.356 33.6248 186.006 35.3761 186.006 38.3083C186.006 41.2648 187.356 42.9896 189.625 42.9896C191.894 42.9896 193.244 41.2648 193.244 38.3083ZM201.077 31.485H198.406V45.1294H201.207V37.0361C201.161 36.6315 201.203 36.2217 201.33 35.8349C201.457 35.4482 201.667 35.0935 201.944 34.7953C202.221 34.4971 202.56 34.2624 202.936 34.1073C203.313 33.9523 203.718 33.8805 204.125 33.897C204.551 33.8846 204.976 33.9418 205.383 34.0663V31.4468C205.068 31.3762 204.747 31.3411 204.424 31.3423C203.677 31.3137 202.943 31.5432 202.345 31.9921C201.748 32.441 201.323 33.082 201.142 33.8073H201.077V31.485ZM218.295 41.1221C217.919 43.5989 215.507 45.2986 212.421 45.2986C208.452 45.2986 205.988 42.6394 205.988 38.3731C205.988 34.0928 208.465 31.3173 212.303 31.3173C216.078 31.3173 218.451 33.9103 218.451 38.0478V39.0074H208.815V39.1766C208.771 39.6787 208.834 40.1845 209 40.6605C209.166 41.1365 209.431 41.5716 209.778 41.9372C210.125 42.3027 210.546 42.5901 211.013 42.7805C211.48 42.9708 211.982 43.0597 212.485 43.0411C213.147 43.1031 213.811 42.9498 214.379 42.6041C214.947 42.2583 215.388 41.7386 215.636 41.1221L218.295 41.1221ZM208.828 37.0493H215.649C215.675 36.5978 215.606 36.146 215.448 35.7223C215.291 35.2985 215.047 34.9119 214.733 34.5868C214.419 34.2616 214.041 34.0049 213.622 33.8328C213.204 33.6607 212.755 33.5768 212.303 33.5866C211.847 33.5838 211.395 33.6715 210.973 33.8444C210.551 34.0173 210.167 34.2721 209.844 34.594C209.521 34.9159 209.265 35.2986 209.091 35.7201C208.916 36.1415 208.827 36.5933 208.828 37.0493ZM37.1986 25.4194C36.5529 26.5571 36.2055 27.8395 36.1886 29.1475C36.1902 30.6188 36.6248 32.0571 37.4384 33.283C38.2519 34.5089 39.4083 35.4683 40.7633 36.0414C40.2306 37.7721 39.4275 39.4077 38.3838 40.8876C36.9822 42.9842 35.5127 45.0326 33.1803 45.0704C32.071 45.096 31.3222 44.777 30.542 44.4446C29.7281 44.0979 28.88 43.7367 27.5529 43.7367C26.1454 43.7367 25.2594 44.1096 24.4048 44.4692C23.6663 44.78 22.9513 45.0809 21.9437 45.1227C19.7224 45.205 18.0248 42.885 16.5723 40.808C13.6691 36.5665 11.4085 28.8548 14.4392 23.6076C15.1388 22.3503 16.1522 21.2957 17.3806 20.5466C18.609 19.7974 20.0105 19.3792 21.4486 19.3328C22.7084 19.3069 23.9173 19.7924 24.9771 20.2181C25.7877 20.5437 26.5111 20.8343 27.1034 20.8343C27.6242 20.8343 28.3274 20.5552 29.1469 20.2299C30.4378 19.7176 32.0174 19.0906 33.6271 19.2596C34.8607 19.2982 36.0683 19.6239 37.154 20.2109C38.2397 20.7978 39.1736 21.6299 39.8816 22.6409C38.7672 23.326 37.8443 24.2818 37.1986 25.4194ZM31.908 16.4701C33.1797 14.9434 33.8062 12.9812 33.6545 11C31.7116 11.2041 29.9169 12.1327 28.628 13.6007C27.9978 14.3179 27.5151 15.1523 27.2076 16.0562C26.9001 16.96 26.7737 17.9156 26.8357 18.8683C27.8075 18.8783 28.7689 18.6677 29.6475 18.2523C30.5261 17.8369 31.299 17.2275 31.908 16.4701ZM57.2472 12.592C56.6985 12.3789 56.1093 12.2902 55.5222 12.3323H52.2743V21.3241H55.5222C58.2006 21.3241 59.7531 19.6728 59.7531 16.8002C59.8272 16.2162 59.7707 15.6231 59.5877 15.0636C59.4048 14.5041 59.0999 13.9922 58.6952 13.5648C58.2904 13.1374 57.7959 12.8051 57.2472 12.592ZM55.3662 20.0525H53.6708V13.603H55.3662C55.7836 13.5798 56.2009 13.6493 56.5883 13.8063C56.9757 13.9634 57.3236 14.2042 57.607 14.5116C57.8904 14.8189 58.1023 15.1851 58.2276 15.5839C58.3529 15.9827 58.3883 16.4044 58.3315 16.8185C58.3928 17.2343 58.3606 17.6586 58.2372 18.0603C58.1138 18.4621 57.9024 18.8313 57.6184 19.1411C57.3343 19.4509 56.9848 19.6935 56.5952 19.8511C56.2056 20.0087 55.7857 20.0775 55.3662 20.0525ZM61.3308 17.9282C61.2881 17.4822 61.3391 17.0323 61.4805 16.6072C61.6219 16.1822 61.8506 15.7913 62.1519 15.4598C62.4533 15.1283 62.8205 14.8635 63.2302 14.6822C63.6399 14.501 64.0829 14.4073 64.5309 14.4073C64.9788 14.4073 65.4219 14.501 65.8315 14.6822C66.2412 14.8635 66.6085 15.1283 66.9098 15.4598C67.2111 15.7913 67.4398 16.1822 67.5812 16.6072C67.7226 17.0323 67.7736 17.4822 67.7309 17.9282C67.7744 18.3746 67.724 18.8251 67.583 19.2509C67.4419 19.6766 67.2134 20.0682 66.912 20.4003C66.6106 20.7325 66.2431 20.9979 65.833 21.1795C65.4229 21.3612 64.9794 21.455 64.5309 21.455C64.0824 21.455 63.6388 21.3612 63.2287 21.1795C62.8186 20.9979 62.4511 20.7325 62.1497 20.4003C61.8483 20.0682 61.6198 19.6766 61.4787 19.2509C61.3377 18.8251 61.2873 18.3746 61.3308 17.9282ZM66.3535 17.9282C66.3535 16.4573 65.6927 15.5971 64.5331 15.5971C63.369 15.5971 62.7142 16.4573 62.7142 17.9282C62.7142 19.4109 63.369 20.2644 64.5331 20.2644C65.6927 20.2644 66.3535 19.405 66.3535 17.9282ZM74.8493 21.3239H76.2385L78.1016 14.5382H76.7624L75.5527 19.7161H75.4468L74.0516 14.5382H72.7669L71.3718 19.7161H71.2717L70.0561 14.5382H68.6978L70.5683 21.3239H71.9442L73.3408 16.3262H73.4468L74.8493 21.3239ZM79.6748 14.5382H80.964V15.6162H81.064C81.2338 15.229 81.5201 14.9045 81.8831 14.6878C82.2461 14.4711 82.6676 14.373 83.089 14.4072C83.4192 14.3824 83.7507 14.4322 84.059 14.5529C84.3674 14.6736 84.6446 14.8621 84.8701 15.1045C85.0957 15.3469 85.2638 15.6369 85.3621 15.9531C85.4604 16.2693 85.4862 16.6036 85.4377 16.9311V21.3239H84.0986V17.2674C84.0986 16.1769 83.6247 15.6346 82.6343 15.6346C82.4101 15.6242 82.1863 15.6623 81.9783 15.7465C81.7702 15.8306 81.5828 15.9587 81.4289 16.122C81.275 16.2854 81.1583 16.48 81.0866 16.6927C81.015 16.9054 80.9902 17.1311 81.014 17.3542V21.324H79.6748L79.6748 14.5382ZM88.9108 11.8893H87.5716V21.324H88.9108V11.8893ZM90.7725 17.9282C90.7298 17.4822 90.7808 17.0323 90.9222 16.6072C91.0637 16.1822 91.2924 15.7913 91.5937 15.4598C91.895 15.1283 92.2622 14.8635 92.6719 14.6822C93.0816 14.501 93.5246 14.4073 93.9726 14.4073C94.4205 14.4073 94.8636 14.501 95.2732 14.6822C95.6829 14.8635 96.0502 15.1283 96.3515 15.4598C96.6528 15.7913 96.8815 16.1822 97.0229 16.6072C97.1643 17.0323 97.2153 17.4822 97.1726 17.9282C97.2161 18.3746 97.1657 18.8251 97.0247 19.2509C96.8836 19.6766 96.6551 20.0682 96.3537 20.4003C96.0523 20.7325 95.6848 20.9979 95.2747 21.1795C94.8646 21.3612 94.4211 21.455 93.9726 21.455C93.524 21.455 93.0805 21.3612 92.6704 21.1795C92.2603 20.9979 91.8928 20.7325 91.5914 20.4003C91.29 20.0682 91.0615 19.6766 90.9204 19.2509C90.7794 18.8251 90.729 18.3746 90.7725 17.9282ZM95.7952 17.9282C95.7952 16.4573 95.1344 15.5971 93.9748 15.5971C92.8107 15.5971 92.1559 16.4573 92.1559 17.9282C92.1559 19.4109 92.8107 20.2644 93.9748 20.2644C95.1344 20.2644 95.7952 19.405 95.7952 17.9282ZM101.106 17.3792C99.4919 17.4793 98.5824 18.1835 98.5824 19.405C98.5836 19.6914 98.6447 19.9743 98.7619 20.2357C98.8791 20.497 99.0497 20.7309 99.2628 20.9222C99.4759 21.1136 99.7268 21.2581 99.9992 21.3466C100.272 21.435 100.559 21.4654 100.844 21.4358C101.248 21.4544 101.649 21.3657 102.007 21.1785C102.366 20.9913 102.668 20.7124 102.883 20.3704H102.989V21.324H104.278V16.6876C104.278 15.2542 103.318 14.4073 101.617 14.4073C100.078 14.4073 98.9813 15.1549 98.8444 16.3204H100.141C100.29 15.8406 100.808 15.5662 101.555 15.5662C102.471 15.5662 102.944 15.9709 102.944 16.6876V17.2733L101.106 17.3792ZM102.944 18.2578V18.8251C102.93 19.0392 102.872 19.2481 102.776 19.4395C102.679 19.631 102.544 19.8009 102.38 19.9393C102.216 20.0777 102.026 20.1817 101.821 20.2452C101.616 20.3086 101.401 20.3301 101.187 20.3085C100.459 20.3085 99.929 19.9531 99.929 19.3424C99.929 18.7442 100.353 18.4263 101.287 18.3638L102.944 18.2578ZM106.038 17.9282C106.038 15.784 107.14 14.4257 108.855 14.4257C109.279 14.4061 109.699 14.5077 110.068 14.7185C110.436 14.9293 110.737 15.2407 110.935 15.6162H111.036V11.8893H112.375V21.324H111.091V20.2519H110.985C110.772 20.6248 110.461 20.9323 110.085 21.141C109.709 21.3497 109.284 21.4516 108.855 21.4358C107.128 21.4359 106.038 20.0775 106.038 17.9282ZM107.421 17.9282C107.421 19.3674 108.1 20.2335 109.234 20.2335C110.363 20.2335 111.061 19.3549 111.061 17.9341C111.061 16.5198 110.356 15.6287 109.234 15.6287C108.107 15.6287 107.421 16.5007 107.421 17.9282ZM118.065 16.6071C117.924 17.0322 117.873 17.4822 117.915 17.9281C117.872 18.3745 117.922 18.8251 118.064 19.2509C118.205 19.6766 118.433 20.0681 118.735 20.4003C119.036 20.7324 119.404 20.9978 119.814 21.1795C120.224 21.3611 120.667 21.4549 121.116 21.4549C121.564 21.4549 122.008 21.3611 122.418 21.1795C122.828 20.9978 123.196 20.7324 123.497 20.4003C123.799 20.0681 124.027 19.6766 124.168 19.2509C124.309 18.8251 124.36 18.3745 124.316 17.9281C124.359 17.4822 124.308 17.0322 124.166 16.6071C124.025 16.182 123.796 15.7912 123.495 15.4597C123.194 15.1282 122.826 14.8633 122.417 14.6821C122.007 14.5008 121.564 14.4072 121.116 14.4072C120.668 14.4072 120.225 14.5008 119.815 14.6821C119.405 14.8633 119.038 15.1282 118.737 15.4597C118.435 15.7912 118.207 16.182 118.065 16.6071ZM121.118 15.5971C122.277 15.5971 122.938 16.4572 122.938 17.9281C122.938 19.4049 122.277 20.2644 121.118 20.2644C119.954 20.2644 119.299 19.4108 119.299 17.9282C119.299 16.4572 119.954 15.5971 121.118 15.5971ZM126.113 14.5382H127.402V15.6162H127.502C127.672 15.229 127.959 14.9045 128.322 14.6878C128.685 14.4711 129.106 14.373 129.527 14.4072C129.858 14.3824 130.189 14.4322 130.497 14.5529C130.806 14.6736 131.083 14.8621 131.309 15.1045C131.534 15.3469 131.702 15.6369 131.801 15.9531C131.899 16.2693 131.925 16.6036 131.876 16.9311V21.3239H130.537V17.2674C130.537 16.1769 130.063 15.6346 129.073 15.6346C128.849 15.6242 128.625 15.6623 128.417 15.7465C128.209 15.8306 128.021 15.9587 127.867 16.122C127.713 16.2854 127.597 16.48 127.525 16.6927C127.453 16.9054 127.429 17.1311 127.452 17.3542V21.324H126.113V14.5382ZM139.443 14.5691V12.8487H138.103V14.569H137.025V15.6971H138.103V19.5293C138.103 20.8375 138.696 21.3615 140.185 21.3615C140.429 21.3589 140.673 21.3361 140.914 21.293V20.1775C140.744 20.1976 140.574 20.2079 140.403 20.2084C139.736 20.2084 139.443 19.8972 139.443 19.1864V15.6971H140.914V14.5691H139.443ZM142.743 11.8893H144.07V15.6287H144.176C144.354 15.2379 144.648 14.9115 145.019 14.694C145.389 14.4765 145.817 14.3784 146.245 14.4131C146.574 14.3953 146.902 14.4501 147.207 14.5737C147.512 14.6974 147.785 14.8867 148.009 15.1284C148.232 15.37 148.399 15.6579 148.498 15.9716C148.597 16.2852 148.626 16.6169 148.582 16.9429V21.324H147.242V17.2733C147.242 16.1894 146.737 15.6405 145.791 15.6405C145.56 15.6216 145.329 15.6532 145.112 15.7332C144.896 15.8131 144.699 15.9395 144.536 16.1033C144.374 16.2672 144.249 16.4646 144.17 16.6818C144.092 16.899 144.062 17.1308 144.082 17.3608V21.3239H142.743L142.743 11.8893ZM155.277 21.0073C155.815 20.6484 156.209 20.112 156.391 19.4918L155.102 19.4917C154.945 19.7735 154.707 20.0022 154.42 20.1487C154.132 20.2952 153.808 20.3528 153.487 20.3144C153.237 20.3172 152.99 20.2677 152.76 20.1691C152.53 20.0706 152.324 19.9251 152.154 19.7421C151.984 19.5591 151.854 19.3425 151.772 19.1063C151.69 18.8701 151.659 18.6194 151.68 18.3704V18.2954H156.472V17.8281C156.472 15.6972 155.333 14.4073 153.445 14.4073C152.996 14.4034 152.552 14.496 152.143 14.6786C151.733 14.8613 151.368 15.1298 151.071 15.466C150.775 15.8021 150.554 16.1981 150.423 16.6271C150.293 17.0561 150.256 17.5081 150.316 17.9524C150.255 18.3955 150.291 18.8465 150.421 19.2742C150.552 19.7019 150.774 20.0961 151.072 20.4293C151.371 20.7625 151.738 21.0269 152.148 21.204C152.559 21.3811 153.003 21.4667 153.45 21.4549C154.093 21.5246 154.74 21.3662 155.277 21.0073ZM155.108 17.3049H151.68C151.677 17.0733 151.72 16.8434 151.808 16.6288C151.895 16.4143 152.024 16.2193 152.188 16.0555C152.352 15.8917 152.547 15.7623 152.761 15.6749C152.976 15.5876 153.206 15.5441 153.437 15.547C153.665 15.5418 153.892 15.5844 154.103 15.6721C154.314 15.7597 154.504 15.8905 154.662 16.0561C154.819 16.2216 154.94 16.4183 155.017 16.6333C155.093 16.8484 155.124 17.0772 155.108 17.3049Z" fill="white"/></svg>'; diff --git a/src/molecules/appDownloadButton/component.tsx b/src/molecules/appDownloadButton/component.tsx index 3dbf5ee8..8c2c61f4 100644 --- a/src/molecules/appDownloadButton/component.tsx +++ b/src/molecules/appDownloadButton/component.tsx @@ -6,6 +6,28 @@ import { IMoleculeProps } from '..'; import { LinkBase } from '../../atoms/linkBase'; import { Image } from '../../particles/image'; +// NOTE(krishan711): each badge is in its own chunk (they're 7-20kb each) so apps only load the ones they show +const BADGE_LOADERS: Record<string, () => Promise<{ default: string }>> = { + 'android-dark': () => import('./badges/androidDark'), + 'android-dark-clear': () => import('./badges/androidDarkClear'), + 'android-light': () => import('./badges/androidLight'), + 'android-light-clear': () => import('./badges/androidLightClear'), + 'ios-dark': () => import('./badges/iosDark'), + 'ios-dark-clear': () => import('./badges/iosDarkClear'), + 'ios-light': () => import('./badges/iosLight'), + 'ios-light-clear': () => import('./badges/iosLightClear'), + 'mac-dark': () => import('./badges/macDark'), + 'mac-dark-clear': () => import('./badges/macDarkClear'), + 'mac-light': () => import('./badges/macLight'), + 'mac-light-clear': () => import('./badges/macLightClear'), + 'appletv-dark': () => import('./badges/appletvDark'), + 'appletv-dark-clear': () => import('./badges/appletvDarkClear'), + 'appletv-light': () => import('./badges/appletvLight'), + 'appletv-light-clear': () => import('./badges/appletvLightClear'), +}; + +const loadedBadgeSources = new Map<string, string>(); + export interface AppDownloadButtonProps extends IMoleculeProps { appId: string; appType: 'android' | 'ios' | 'mac' | 'appletv'; @@ -27,6 +49,35 @@ export function AppDownloadButton({ throw new KibaException(`appType not recognized: ${props.appType}`); } + const badgeId = `${props.appType}-${buttonVariant}`; + const [badgeSource, setBadgeSource] = React.useState<string | null>(loadedBadgeSources.get(badgeId) ?? null); + + React.useEffect((): (() => void) | undefined => { + const loadedBadgeSource = loadedBadgeSources.get(badgeId); + if (loadedBadgeSource) { + setBadgeSource(loadedBadgeSource); + return undefined; + } + setBadgeSource(null); + const badgeLoader = BADGE_LOADERS[badgeId]; + if (!badgeLoader) { + return undefined; + } + let isCancelled = false; + badgeLoader().then((badgeModule: { default: string }): void => { + const source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(badgeModule.default)}`; + loadedBadgeSources.set(badgeId, source); + if (!isCancelled) { + setBadgeSource(source); + } + }).catch((error: unknown): void => { + console.error(`Failed to load the ${badgeId} badge`, error); + }); + return (): void => { + isCancelled = true; + }; + }, [badgeId]); + const getAppUrl = (): string => { if (props.appType === 'android') { return `https://play.google.com/store/apps/details?id=${props.appId}`; @@ -67,11 +118,13 @@ export function AppDownloadButton({ variant='image' target={getAppUrl()} > - <Image - source={`https://assets-cdn.kiba.dev/${props.appType}/download-button/v5/${buttonVariant}.svg`} - alternativeText={getAlternativeText()} - isLazyLoadable={isLazyLoadable} - /> + {badgeSource && ( + <Image + source={badgeSource} + alternativeText={getAlternativeText()} + isLazyLoadable={isLazyLoadable} + /> + )} </LinkBase> ); } diff --git a/src/molecules/appDownloadButton/documentation.mdx b/src/molecules/appDownloadButton/documentation.mdx index 9e2eb359..991a4f92 100644 --- a/src/molecules/appDownloadButton/documentation.mdx +++ b/src/molecules/appDownloadButton/documentation.mdx @@ -5,7 +5,7 @@ import * as Stories from './documentation.stories'; # AppDownloadButton -**AppDownloadButton** is a `molecule` component for app store download badges. Supports Android, iOS, Mac, and Apple TV stores. +**AppDownloadButton** is a `molecule` component for app store download badges. Supports Android, iOS, Mac, and Apple TV stores. The badges are bundled with ui-react (each in its own chunk, loaded when shown). <Canvas of={Stories.Default} /> @@ -25,9 +25,9 @@ import * as Stories from './documentation.stories'; <Canvas of={Stories.LightVariants} /> -### With Target Link +### With App Id -<Canvas of={Stories.WithTarget} /> +<Canvas of={Stories.WithAppId} /> ## Theming From 23a18d2b834046e9a69b676b4532161814ac2e0f Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:23:02 +0000 Subject: [PATCH 06/13] Fix the storybook config lint --- .storybook/main.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 78e21f72..21d61587 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -27,11 +27,11 @@ const config: StorybookConfig = { docs: { autodocs: true, }, - viteFinal: (config) => { - // NOTE(krishan711): the stories use the source files, so the icons are registered with the source registry - config.plugins = [...(config.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/registry.ts', import.meta.url)) })]; - return config; - }, + // NOTE(krishan711): the stories use the source files, so the icons are registered with the source registry + viteFinal: (viteConfig) => ({ + ...viteConfig, + plugins: [...(viteConfig.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/registry.ts', import.meta.url)) })], + }), }; export default config; From 296bacce9576a18c3e5d1d04ee10c461b961298b Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:23:02 +0000 Subject: [PATCH 07/13] Document bundling KibaIcon icons with the vite plugin --- CHANGELOG.md | 5 +++ README.md | 20 +++++++++++ src/particles/kibaIcon/documentation.mdx | 42 ++++++++++++++++++------ 3 files changed, 57 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efd43090..9feb0102 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,9 +8,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ## [Unreleased] ### Added +- [MINOR] Added `@kibalabs/ui-react/vite-plugin` with `kibaIconsPlugin` to bundle the icons used with `KibaIcon` at build time, icon packages (`ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) are optional peer dependencies +- [MINOR] Added `registerKibaIcons` to register svgs that `KibaIcon` renders without fetching - [MAJOR] Added `@kibalabs/ui-react/toast` (all of `@kibalabs/ui-react-toast`) and `@kibalabs/ui-react/dropzone` (all of `@kibalabs/ui-react-dropzone`) with their styles, `react-hot-toast` and `react-dropzone` are optional peer dependencies ### Changed +- [MINOR] Changed `KibaIcon` to fetch each icon once per page (shared between instances), retry once and ignore responses for a previous `iconId` +- [MINOR] Changed `AppDownloadButton` to use bundled badges (loaded lazily) instead of `assets-cdn.kiba.dev` +- [PATCH] Changed `Carousel` to use ionicons chevrons - [MAJOR] Use `@kibalabs/core/react` instead of `@kibalabs/core-react`, `react-router` is now a peer dependency - [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid` - [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended diff --git a/README.md b/README.md index fb08d875..3774f9be 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,26 @@ Use `@kibalabs/ui-react/styles.css` instead if you don't use scss. Toast and dropzone styles only hold their own rules, so use them on top of the main styles. +## Icons + +`KibaIcon` shows icons by id (`ion-home`, `mui-home`, `bs-house`, `feather-home`, `remix-home-line`). To bundle the ones you use at build time, install the icon packages you need (optional peer dependencies: `ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) and add the vite plugin: + +```js +// config.build.js +import { kibaIconsPlugin } from '@kibalabs/ui-react/vite-plugin'; + +export default (config) => { + const newConfig = config; + newConfig.viteConfigModifier = (viteConfig) => { + viteConfig.plugins.push(kibaIconsPlugin()); + return viteConfig; + }; + return newConfig; +}; +``` + +It scans `src` (and ui-react) for quoted icon ids and registers their svgs before your app starts. Anything it can't see (e.g. `` `ion-${name}` ``) is fetched from `assets-cdn.kiba.dev` at runtime as before. + ## Theming - **Variables:** everything is themed with CSS variables named `--kiba-{category}-{name}` (e.g. `--kiba-color-brand-primary`, `--kiba-padding`). Each color also gets `-light10/25`, `-dark10/25` and `-clear25/50/75` variants. diff --git a/src/particles/kibaIcon/documentation.mdx b/src/particles/kibaIcon/documentation.mdx index 65732dc7..e2b79721 100644 --- a/src/particles/kibaIcon/documentation.mdx +++ b/src/particles/kibaIcon/documentation.mdx @@ -5,7 +5,7 @@ import * as Stories from './documentation.stories'; # KibaIcon -**KibaIcon** is a convenience wrapper around `Icon` that fetches icons from Kiba's CDN by ID. Supports multiple popular icon libraries. +**KibaIcon** is a convenience wrapper around `Icon` that shows an icon by ID from one of several popular icon libraries. With the vite plugin (below) the icons are bundled into your app at build time. <Canvas of={Stories.Default} /> @@ -49,14 +49,36 @@ Inherits all styling from Icon. See Icon documentation for variants and customiz ### Supported Icon Sets -| Prefix | Icon Set | Example | -|--------|----------|---------| -| `ion-` | [Ionicons v5](https://ionic.io/ionicons) | `ion-home` | -| `mui-` | [Material Icons](https://fonts.google.com/icons) | `mui-home` | -| `bs-` | [Bootstrap Icons](https://icons.getbootstrap.com/) | `bs-house` | -| `feather-` | [Feather Icons](https://feathericons.com/) | `feather-home` | -| `remix-` | [Remix Icons](https://remixicon.com/) | `remix-home-line` | +| Prefix | Icon Set | Package | Example | +|--------|----------|---------|---------| +| `ion-` | [Ionicons](https://ionic.io/ionicons) | `ionicons` | `ion-home` | +| `mui-` | [Material Icons](https://fonts.google.com/icons) | `@material-design-icons/svg` | `mui-home`, `mui-account-box-outlined` | +| `bs-` | [Bootstrap Icons](https://icons.getbootstrap.com/) | `bootstrap-icons` | `bs-house` | +| `feather-` | [Feather Icons](https://feathericons.com/) | `feather-icons` | `feather-home` | +| `remix-` | [Remix Icons](https://remixicon.com/) | `remixicon` | `remix-home-line` | -### Note +## Bundling icons -Icons are fetched asynchronously from `assets-cdn.kiba.dev`. Consider using `Icon` with bundled SVGs for critical icons to avoid network delays. +Install the packages for the icon sets you use (they are optional peer dependencies, ui-react's own components only use `ionicons`) and add the vite plugin in your `config.build.js`: + +```bash +npm install ionicons +``` + +```js +import { kibaIconsPlugin } from '@kibalabs/ui-react/vite-plugin'; + +export default (config) => { + const newConfig = config; + newConfig.viteConfigModifier = (viteConfig) => { + const newViteConfig = viteConfig; + newViteConfig.plugins.push(kibaIconsPlugin()); + return newViteConfig; + }; + return newConfig; +}; +``` + +At build time and in dev the plugin finds every quoted icon id (e.g. `'ion-home'`) in your `src` and in ui-react itself, reads those svgs from the installed packages and registers them before your app's entry runs, so they render straight away with no requests. Ids from a set whose package isn't installed are warned about once. Pass `sourceDirectories` (relative to the vite root) if your code isn't in `src`. + +Ids that aren't written out in full in the code (e.g. `` `ion-${name}` `` or ids from an api) and apps without the plugin still work: those icons are fetched from `assets-cdn.kiba.dev` once per page and shared by every `KibaIcon`. From eb1b53dcc1279fa46e46446474326bf4258c3321 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:23:56 +0000 Subject: [PATCH 08/13] Warn once about all the icons whose package is missing --- src/vitePlugin/index.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/vitePlugin/index.ts b/src/vitePlugin/index.ts index c0be3fe4..98cc2031 100644 --- a/src/vitePlugin/index.ts +++ b/src/vitePlugin/index.ts @@ -14,7 +14,6 @@ export interface IKibaIconsPluginOptions { interface IIconSet { prefix: string; - name: string; packageName: string; iconsDirectory: string; getIconFilePaths: (iconsDirectoryPath: string, iconName: string) => string[]; @@ -46,14 +45,12 @@ const getRemixIconFilePaths = (iconsDirectoryPath: string): Map<string, string> const ICON_SETS: IIconSet[] = [{ prefix: 'ion', - name: 'Ionicons', packageName: 'ionicons', // NOTE(krishan711): the svg files are used (not the ionicons/icons data uris) because those style outlines with classes from ion-icon's css iconsDirectory: 'dist/svg', getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], }, { prefix: 'mui', - name: 'Material Icons', packageName: '@material-design-icons/svg', iconsDirectory: '.', // NOTE(krishan711): mui-account-box is filled/account_box.svg and mui-account-box-outlined is outlined/account_box.svg @@ -66,19 +63,16 @@ const ICON_SETS: IIconSet[] = [{ }, }, { prefix: 'bs', - name: 'Bootstrap Icons', packageName: 'bootstrap-icons', iconsDirectory: 'icons', getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], }, { prefix: 'feather', - name: 'Feather Icons', packageName: 'feather-icons', iconsDirectory: 'dist/icons', getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], }, { prefix: 'remix', - name: 'Remix Icons', packageName: 'remixicon', iconsDirectory: 'icons', getIconFilePaths: (iconsDirectoryPath, iconName) => { @@ -245,11 +239,13 @@ export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin = icons[iconId] = svgContent; } }); - missingIconIds.forEach((setIconIds, iconSet) => { - const packageDirectory = getPackageDirectory(iconSet.packageName); - const reason = packageDirectory ? `the installed ${iconSet.packageName} has no ${iconSet.iconsDirectory} directory` : `${iconSet.packageName} isn't installed`; - logger?.warn(`[kiba-icons] ${setIconIds.length} ${iconSet.name} id(s) are used (${setIconIds.join(', ')}) but ${reason}, so KibaIcon will fetch them at runtime.`); - }); + if (missingIconIds.size > 0) { + const missingDescriptions = [...missingIconIds.entries()].map(([iconSet, setIconIds]) => { + const reason = getPackageDirectory(iconSet.packageName) ? `the installed version has no ${iconSet.iconsDirectory} directory` : 'not installed'; + return `${iconSet.packageName} (${reason}): ${setIconIds.join(', ')}`; + }); + logger?.warn(`[kiba-icons] KibaIcon will fetch these icons at runtime because their icon package is missing:\n ${missingDescriptions.join('\n ')}`); + } return icons; }; From 9fdac142b06790455824c81d2ee7280a04d90adc Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:26:19 +0000 Subject: [PATCH 09/13] Keep the KibaIcon registry in its component module A separate module made rolldown move all of ui-react into a shared chunk instead of keeping it in dist/index.js. --- .storybook/main.ts | 2 +- src/particles/kibaIcon/component.tsx | 19 ++++++++++++++++++- src/particles/kibaIcon/index.ts | 1 - src/particles/kibaIcon/registry.ts | 17 ----------------- 4 files changed, 19 insertions(+), 20 deletions(-) delete mode 100644 src/particles/kibaIcon/registry.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index 21d61587..f7135296 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -30,7 +30,7 @@ const config: StorybookConfig = { // NOTE(krishan711): the stories use the source files, so the icons are registered with the source registry viteFinal: (viteConfig) => ({ ...viteConfig, - plugins: [...(viteConfig.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/registry.ts', import.meta.url)) })], + plugins: [...(viteConfig.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/component.tsx', import.meta.url)) })], }), }; diff --git a/src/particles/kibaIcon/component.tsx b/src/particles/kibaIcon/component.tsx index 23eb3a10..eed016dc 100644 --- a/src/particles/kibaIcon/component.tsx +++ b/src/particles/kibaIcon/component.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { getClassName } from '@kibalabs/core'; -import { getRegisteredKibaIcon, normalizeKibaIconSvg } from './registry'; import { IComponentProps } from '../../model'; import { Icon } from '../icon'; @@ -56,6 +55,24 @@ const getIconData = (iconId: string): IconData | null => { return null; }; +// NOTE(krishan711): icons bundled into the app at build time by @kibalabs/ui-react/vite-plugin are registered +// here (svg content keyed by icon id, already normalised) so KibaIcon can render them without fetching. +const registeredIcons = new Map<string, string>(); + +export const registerKibaIcons = (icons: Record<string, string>): void => { + Object.entries(icons).forEach(([iconId, svgContent]) => { + registeredIcons.set(iconId, svgContent); + }); +}; + +const getRegisteredKibaIcon = (iconId: string): string | undefined => { + return registeredIcons.get(iconId); +}; + +const normalizeKibaIconSvg = (svgContent: string): string => { + return svgContent.replace(/<title>.*<\/title>/gi, '').replace(/stroke:#000/gi, 'stroke:currentColor').replace(/fill:#000/gi, 'fill:currentColor'); +}; + // NOTE(krishan711): icons that weren't bundled at build time are fetched at most once per page and shared by every KibaIcon const fetchedSvgContents = new Map<string, string>(); const inFlightSvgContents = new Map<string, Promise<string>>(); diff --git a/src/particles/kibaIcon/index.ts b/src/particles/kibaIcon/index.ts index 10c1cd65..bb824842 100644 --- a/src/particles/kibaIcon/index.ts +++ b/src/particles/kibaIcon/index.ts @@ -1,2 +1 @@ export * from './component'; -export { registerKibaIcons } from './registry'; diff --git a/src/particles/kibaIcon/registry.ts b/src/particles/kibaIcon/registry.ts deleted file mode 100644 index 5ed7d608..00000000 --- a/src/particles/kibaIcon/registry.ts +++ /dev/null @@ -1,17 +0,0 @@ -// NOTE(krishan711): icons bundled into the app at build time by @kibalabs/ui-react/vite-plugin are registered -// here (svg content keyed by icon id, already normalised) so KibaIcon can render them without fetching. -const registeredIcons = new Map<string, string>(); - -export const registerKibaIcons = (icons: Record<string, string>): void => { - Object.entries(icons).forEach(([iconId, svgContent]) => { - registeredIcons.set(iconId, svgContent); - }); -}; - -export const getRegisteredKibaIcon = (iconId: string): string | undefined => { - return registeredIcons.get(iconId); -}; - -export const normalizeKibaIconSvg = (svgContent: string): string => { - return svgContent.replace(/<title>.*<\/title>/gi, '').replace(/stroke:#000/gi, 'stroke:currentColor').replace(/fill:#000/gi, 'fill:currentColor'); -}; From 4f44c2ab7d9c00b2e630873e636238adb02336e3 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 18:57:37 +0000 Subject: [PATCH 10/13] Feature: icon id props for components' default icons so apps can use any icon set --- CHANGELOG.md | 1 + src/atoms/collapsibleBox/component.tsx | 4 +++- src/atoms/selectableView/component.tsx | 3 ++- src/atoms/titledCollapsibleBox/component.tsx | 4 +++- src/dropzone/component.tsx | 5 +++-- src/molecules/carousel/component.tsx | 6 ++++-- src/molecules/messageDialog/component.tsx | 3 ++- src/particles/kibaIcon/documentation.mdx | 2 +- src/vitePlugin/index.ts | 4 +++- 9 files changed, 22 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9feb0102..5daef499 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Added - [MINOR] Added `@kibalabs/ui-react/vite-plugin` with `kibaIconsPlugin` to bundle the icons used with `KibaIcon` at build time, icon packages (`ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) are optional peer dependencies - [MINOR] Added `registerKibaIcons` to register svgs that `KibaIcon` renders without fetching +- [MINOR] Added icon id props for the icons components show by default, so apps can use any icon set: `previousIconId`/`nextIconId` on `Carousel`, `expandIconId`/`collapseIconId` on `CollapsibleBox` and `TitledCollapsibleBox`, `selectedIconId` on `SelectableView`, `closeIconId` on `MessageDialog` and `iconId` on `Dropzone` - [MAJOR] Added `@kibalabs/ui-react/toast` (all of `@kibalabs/ui-react-toast`) and `@kibalabs/ui-react/dropzone` (all of `@kibalabs/ui-react-dropzone`) with their styles, `react-hot-toast` and `react-dropzone` are optional peer dependencies ### Changed diff --git a/src/atoms/collapsibleBox/component.tsx b/src/atoms/collapsibleBox/component.tsx index 65011b2d..965c0563 100644 --- a/src/atoms/collapsibleBox/component.tsx +++ b/src/atoms/collapsibleBox/component.tsx @@ -14,6 +14,8 @@ interface ICollapsibleBoxProps extends IComponentProps, ISingleAnyChildProps { isCollapsed: boolean; onCollapseToggled(): void; shouldSkipRenderingWhenCollapsed?: boolean; + expandIconId?: string; + collapseIconId?: string; shouldHideIndicator?: boolean; } @@ -46,7 +48,7 @@ export function CollapsibleBox({ > {props.headerView} {!props.shouldHideIndicator && ( - <KibaIcon iconId={props.isCollapsed ? 'ion-chevron-down' : 'ion-chevron-up'} /> + <KibaIcon iconId={props.isCollapsed ? (props.expandIconId || 'ion-chevron-down') : (props.collapseIconId || 'ion-chevron-up')} /> )} </div> {(!props.isCollapsed || !props.shouldSkipRenderingWhenCollapsed) && ( diff --git a/src/atoms/selectableView/component.tsx b/src/atoms/selectableView/component.tsx index b4a1c264..62a7237b 100644 --- a/src/atoms/selectableView/component.tsx +++ b/src/atoms/selectableView/component.tsx @@ -15,6 +15,7 @@ export interface ISelectableViewProps extends IComponentProps, ISingleAnyChildPr isDisabled?: boolean; selectedIndicator?: React.ReactElement; shouldHideDefaultSelectedIndicator?: boolean; + selectedIconId?: string; isFullWidth?: boolean; isFullHeight?: boolean; onClicked(): void; @@ -48,7 +49,7 @@ export function SelectableView({ </React.Fragment> ) : !props.shouldHideDefaultSelectedIndicator && ( <Stack paddingTop={PaddingSize.Default} paddingLeft={PaddingSize.Default}> - <KibaIcon iconId='ion-checkmark-circle' variant='large' _color='var(--kiba-color-brand-primary)' /> + <KibaIcon iconId={props.selectedIconId || 'ion-checkmark-circle'} variant='large' _color='var(--kiba-color-brand-primary)' /> </Stack> )} </React.Fragment> diff --git a/src/atoms/titledCollapsibleBox/component.tsx b/src/atoms/titledCollapsibleBox/component.tsx index cd998cd5..4ae51513 100644 --- a/src/atoms/titledCollapsibleBox/component.tsx +++ b/src/atoms/titledCollapsibleBox/component.tsx @@ -14,6 +14,8 @@ interface ITitledCollapsibleBoxProps extends IComponentProps, ISingleAnyChildPro isCollapsed: boolean; onCollapseToggled(): void; shouldSkipRenderingWhenCollapsed?: boolean; + expandIconId?: string; + collapseIconId?: string; } export function TitledCollapsibleBox({ @@ -35,7 +37,7 @@ export function TitledCollapsibleBox({ onClick={onCollapseToggled} > <span>{props.title}</span> - <KibaIcon iconId={props.isCollapsed ? 'ion-chevron-down' : 'ion-chevron-up'} /> + <KibaIcon iconId={props.isCollapsed ? (props.expandIconId || 'ion-chevron-down') : (props.collapseIconId || 'ion-chevron-up')} /> </button> {(!props.isCollapsed || !props.shouldSkipRenderingWhenCollapsed) && ( <HidingView isHidden={props.isCollapsed}> diff --git a/src/dropzone/component.tsx b/src/dropzone/component.tsx index 896669f1..b7205c20 100644 --- a/src/dropzone/component.tsx +++ b/src/dropzone/component.tsx @@ -15,10 +15,11 @@ export interface IDropzoneProps extends IMultiAnyChildProps { fileMimeTypeExtensions?: Record<string, string[]>; fileLimit?: number; isDisabled?: boolean; + iconId?: string; } export function Dropzone(props: IDropzoneProps): React.ReactElement { - const { onFilesChosen, fileLimit, isDisabled, fileMimeTypeExtensions, fileMimeTypes, id, className, style, children } = props; + const { onFilesChosen, fileLimit, isDisabled, fileMimeTypeExtensions, fileMimeTypes, id, className, style, children, iconId } = props; const onDrop = React.useCallback((files: File[]) => { onFilesChosen(files); }, [onFilesChosen]); @@ -61,7 +62,7 @@ export function Dropzone(props: IDropzoneProps): React.ReactElement { tabIndex={inputProps.tabIndex} style={inputProps.style} /> - {children ?? <KibaIcon iconId='ion-cloud-upload-outline' />} + {children ?? <KibaIcon iconId={iconId || 'ion-cloud-upload-outline'} />} </div> ); } diff --git a/src/molecules/carousel/component.tsx b/src/molecules/carousel/component.tsx index c62a3b97..817d7410 100644 --- a/src/molecules/carousel/component.tsx +++ b/src/molecules/carousel/component.tsx @@ -20,6 +20,8 @@ export interface ICarouselProps extends IMoleculeProps, IMultiAnyChildProps { slidesPerPageResponsive?: ResponsiveField<number>; onIndexProgressed?: (slideIndexProgress: number) => void; onIndexChanged?: (slideIndex: number) => void; + previousIconId?: string; + nextIconId?: string; } // NOTE(krishan711): the slider could potentially be its own component here! @@ -153,7 +155,7 @@ export function Carousel({ {shouldShowButtons && ( <IconButton variant={props.indexButtonVariant} - icon={<KibaIcon iconId='ion-chevron-back' />} + icon={<KibaIcon iconId={props.previousIconId || 'ion-chevron-back'} />} label='Previous' onClicked={onPreviousClicked} /> @@ -180,7 +182,7 @@ export function Carousel({ {shouldShowButtons && ( <IconButton variant={props.indexButtonVariant} - icon={<KibaIcon iconId='ion-chevron-forward' />} + icon={<KibaIcon iconId={props.nextIconId || 'ion-chevron-forward'} />} label='Next' onClicked={onNextClicked} /> diff --git a/src/molecules/messageDialog/component.tsx b/src/molecules/messageDialog/component.tsx index 86cd8ea5..13c14dc3 100644 --- a/src/molecules/messageDialog/component.tsx +++ b/src/molecules/messageDialog/component.tsx @@ -10,6 +10,7 @@ interface IMessageDialogProps extends IMoleculeProps { isOpen: boolean; maxHeight?: string; maxWidth?: string; + closeIconId?: string; title: string; message: string; confirmButtonText?: string; @@ -32,7 +33,7 @@ export function MessageDialog({ <Spacing /> <Text variant='header3' alignment={TextAlignment.Center}>{props.title}</Text> {props.onCloseClicked && ( - <IconButton icon={<KibaIcon iconId='ion-close' />} onClicked={props.onCloseClicked} /> + <IconButton icon={<KibaIcon iconId={props.closeIconId || 'ion-close'} />} onClicked={props.onCloseClicked} /> )} </Stack> <Text alignment={TextAlignment.Center}>{props.message}</Text> diff --git a/src/particles/kibaIcon/documentation.mdx b/src/particles/kibaIcon/documentation.mdx index e2b79721..222f78b4 100644 --- a/src/particles/kibaIcon/documentation.mdx +++ b/src/particles/kibaIcon/documentation.mdx @@ -59,7 +59,7 @@ Inherits all styling from Icon. See Icon documentation for variants and customiz ## Bundling icons -Install the packages for the icon sets you use (they are optional peer dependencies, ui-react's own components only use `ionicons`) and add the vite plugin in your `config.build.js`: +Install the packages for the icon sets you use (they are optional peer dependencies; ui-react's own components default to `ionicons` but take icon id props, e.g. `Carousel`'s `previousIconId`/`nextIconId`, to use another set) and add the vite plugin in your `config.build.js`: ```bash npm install ionicons diff --git a/src/vitePlugin/index.ts b/src/vitePlugin/index.ts index 98cc2031..2a858fcd 100644 --- a/src/vitePlugin/index.ts +++ b/src/vitePlugin/index.ts @@ -218,6 +218,8 @@ export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin = const getIcons = (): Record<string, string> => { const iconIds = [...new Set([...fileIconIds.values()].flat())].sort(); + // NOTE(krishan711): ui-react's own default icons (e.g. the carousel's chevrons) can be swapped with props, so a missing package is only warned about for ids the app uses itself + const appIconIds = new Set([...fileIconIds.entries()].filter(([filePath]) => !libraryDirectory || !filePath.startsWith(`${libraryDirectory}${path.sep}`)).flatMap(([, fileIds]) => fileIds)); const missingIconIds = new Map<IIconSet, string[]>(); const icons: Record<string, string> = {}; iconIds.forEach((iconId) => { @@ -227,7 +229,7 @@ export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin = } const packageDirectory = getPackageDirectory(iconSet.packageName); if (!packageDirectory || !fs.existsSync(path.join(packageDirectory, iconSet.iconsDirectory))) { - if (!warnedIconIds.has(iconId)) { + if (appIconIds.has(iconId) && !warnedIconIds.has(iconId)) { missingIconIds.set(iconSet, [...(missingIconIds.get(iconSet) ?? []), iconId]); warnedIconIds.add(iconId); } From 0d4961a34fd600ef1b7dda049482f4291f7bb8e5 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 19:24:00 +0000 Subject: [PATCH 11/13] Move kibaIconsPlugin into its own file in the vite plugin --- src/vitePlugin/iconsPlugin.ts | 344 ++++++++++++++++++++++++++++++++++ src/vitePlugin/index.ts | 344 +--------------------------------- 2 files changed, 345 insertions(+), 343 deletions(-) create mode 100644 src/vitePlugin/iconsPlugin.ts diff --git a/src/vitePlugin/iconsPlugin.ts b/src/vitePlugin/iconsPlugin.ts new file mode 100644 index 00000000..2a858fcd --- /dev/null +++ b/src/vitePlugin/iconsPlugin.ts @@ -0,0 +1,344 @@ +// NOTE(krishan711): this runs in node (inside vite), so it must only import node builtins and never the browser code +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import type { HmrContext, Logger, Plugin, ResolvedConfig, ViteDevServer } from 'vite'; + +export interface IKibaIconsPluginOptions { + // NOTE(krishan711): directories (relative to the vite root) scanned for icon ids, defaults to src (or the root if there is no src) + sourceDirectories?: string[]; + // NOTE(krishan711): the module that exports registerKibaIcons, only needs changing when building ui-react itself + registrationModule?: string; +} + +interface IIconSet { + prefix: string; + packageName: string; + iconsDirectory: string; + getIconFilePaths: (iconsDirectoryPath: string, iconName: string) => string[]; +} + +const VIRTUAL_MODULE_ID = 'virtual:kiba-icons'; +const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`; +const ICON_ID_REGEX = /(?<=['"`])(ion|mui|bs|feather|remix)-([a-z0-9]+(?:-[a-z0-9]+)*)(?=['"`])/g; +const SOURCE_FILE_EXTENSIONS = new Set(['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts', '.mdx']); +const IGNORED_DIRECTORY_NAMES = new Set(['node_modules', 'dist', 'build', 'tmp']); +const MATERIAL_ICON_STYLES = ['outlined', 'round', 'sharp', 'two-tone']; + +const remixIconFilePaths = new Map<string, Map<string, string>>(); + +const getRemixIconFilePaths = (iconsDirectoryPath: string): Map<string, string> => { + let iconFilePaths = remixIconFilePaths.get(iconsDirectoryPath); + if (!iconFilePaths) { + iconFilePaths = new Map<string, string>(); + // NOTE(krishan711): remixicon puts icons in category directories, e.g. icons/Buildings/home-line.svg + fs.readdirSync(iconsDirectoryPath, { withFileTypes: true }).filter((entry) => entry.isDirectory()).forEach((categoryEntry) => { + fs.readdirSync(path.join(iconsDirectoryPath, categoryEntry.name)).filter((fileName) => fileName.endsWith('.svg')).forEach((fileName) => { + iconFilePaths?.set(fileName.slice(0, -'.svg'.length), path.join(iconsDirectoryPath, categoryEntry.name, fileName)); + }); + }); + remixIconFilePaths.set(iconsDirectoryPath, iconFilePaths); + } + return iconFilePaths; +}; + +const ICON_SETS: IIconSet[] = [{ + prefix: 'ion', + packageName: 'ionicons', + // NOTE(krishan711): the svg files are used (not the ionicons/icons data uris) because those style outlines with classes from ion-icon's css + iconsDirectory: 'dist/svg', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'mui', + packageName: '@material-design-icons/svg', + iconsDirectory: '.', + // NOTE(krishan711): mui-account-box is filled/account_box.svg and mui-account-box-outlined is outlined/account_box.svg + getIconFilePaths: (iconsDirectoryPath, iconName) => { + const filePaths = [path.join(iconsDirectoryPath, 'filled', `${iconName.replace(/-/g, '_')}.svg`)]; + MATERIAL_ICON_STYLES.filter((style) => iconName.endsWith(`-${style}`)).forEach((style) => { + filePaths.push(path.join(iconsDirectoryPath, style, `${iconName.slice(0, -(style.length + 1)).replace(/-/g, '_')}.svg`)); + }); + return filePaths; + }, +}, { + prefix: 'bs', + packageName: 'bootstrap-icons', + iconsDirectory: 'icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'feather', + packageName: 'feather-icons', + iconsDirectory: 'dist/icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], +}, { + prefix: 'remix', + packageName: 'remixicon', + iconsDirectory: 'icons', + getIconFilePaths: (iconsDirectoryPath, iconName) => { + const filePath = getRemixIconFilePaths(iconsDirectoryPath).get(iconName); + return filePath ? [filePath] : []; + }, +}]; + +const ICON_SETS_BY_PREFIX = new Map(ICON_SETS.map((iconSet) => [iconSet.prefix, iconSet])); + +// NOTE(krishan711): the same normalisation KibaIcon does to fetched icons, plus removing whitespace between tags +const normalizeSvgContent = (svgContent: string): string => { + return svgContent + .replace(/<\?xml[^>]*\?>/gi, '') + .replace(/<!--[\s\S]*?-->/g, '') + .replace(/<title>.*<\/title>/gi, '') + .replace(/stroke:#000/gi, 'stroke:currentColor') + .replace(/fill:#000/gi, 'fill:currentColor') + .replace(/>\s+</g, '><') + .trim(); +}; + +const findIconIds = (content: string): string[] => { + return [...new Set([...content.matchAll(ICON_ID_REGEX)].map((match) => match[0]))]; +}; + +const findPackageDirectory = (rootDirectory: string, packageName: string): string | null => { + let directory = path.resolve(rootDirectory); + + while (true) { + const packageDirectory = path.join(directory, 'node_modules', ...packageName.split('/')); + if (fs.existsSync(path.join(packageDirectory, 'package.json'))) { + return packageDirectory; + } + const parentDirectory = path.dirname(directory); + if (parentDirectory === directory) { + return null; + } + directory = parentDirectory; + } +}; + +const listSourceFiles = (directory: string, fileExtensions: Set<string>, ignoredDirectories: Set<string>): string[] => { + if (!fs.existsSync(directory) || ignoredDirectories.has(directory)) { + return []; + } + return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry): string[] => { + const entryPath = path.join(directory, entry.name); + if (entry.isDirectory()) { + if (entry.name.startsWith('.') || IGNORED_DIRECTORY_NAMES.has(entry.name)) { + return []; + } + return listSourceFiles(entryPath, fileExtensions, ignoredDirectories); + } + return entry.isFile() && fileExtensions.has(path.extname(entry.name)) ? [entryPath] : []; + }); +}; + +// NOTE(krishan711): ui-react's own components use KibaIcon too, so its built files are scanned along with the app's source +const getUiReactDirectories = (): { libraryDirectory: string | null; pluginDirectory: string | null } => { + try { + const pluginDirectory = path.dirname(fileURLToPath(import.meta.url)); + let directory = pluginDirectory; + while (path.dirname(directory) !== directory) { + const packageFilePath = path.join(directory, 'package.json'); + if (fs.existsSync(packageFilePath)) { + const packageData = JSON.parse(fs.readFileSync(packageFilePath, 'utf-8')); + return { libraryDirectory: packageData.name === '@kibalabs/ui-react' ? path.join(directory, 'dist') : null, pluginDirectory }; + } + directory = path.dirname(directory); + } + return { libraryDirectory: null, pluginDirectory }; + } catch { + return { libraryDirectory: null, pluginDirectory: null }; + } +}; + +export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin => { + const registrationModule = options.registrationModule ?? '@kibalabs/ui-react'; + let rootDirectory = process.cwd(); + let logger: Logger | null = null; + let sourceDirectories: string[] = []; + let libraryDirectory: string | null = null; + let pluginDirectory: string | null = null; + const fileIconIds = new Map<string, string[]>(); + const iconSvgContents = new Map<string, string | null>(); + const packageDirectories = new Map<string, string | null>(); + const warnedIconIds = new Set<string>(); + const entryModuleIds = new Set<string>(); + + const isSourceFile = (filePath: string): boolean => { + return SOURCE_FILE_EXTENSIONS.has(path.extname(filePath)) && sourceDirectories.some((directory) => filePath.startsWith(`${directory}${path.sep}`)) && !filePath.split(path.sep).includes('node_modules'); + }; + + const scanFile = (filePath: string, content?: string): boolean => { + let fileContent = content; + if (fileContent === undefined) { + try { + fileContent = fs.readFileSync(filePath, 'utf-8'); + } catch { + fileContent = ''; + } + } + const previousIconIds = fileIconIds.get(filePath) ?? []; + const iconIds = findIconIds(fileContent); + fileIconIds.set(filePath, iconIds); + return iconIds.length !== previousIconIds.length || iconIds.some((iconId) => !previousIconIds.includes(iconId)); + }; + + const scanAllFiles = (): void => { + fileIconIds.clear(); + const ignoredDirectories = new Set(pluginDirectory ? [pluginDirectory] : []); + sourceDirectories.forEach((directory) => { + listSourceFiles(directory, SOURCE_FILE_EXTENSIONS, ignoredDirectories).forEach((filePath) => scanFile(filePath)); + }); + if (libraryDirectory) { + listSourceFiles(libraryDirectory, new Set(['.js']), ignoredDirectories).forEach((filePath) => scanFile(filePath)); + } + }; + + const getPackageDirectory = (packageName: string): string | null => { + if (!packageDirectories.has(packageName)) { + packageDirectories.set(packageName, findPackageDirectory(rootDirectory, packageName)); + } + return packageDirectories.get(packageName) ?? null; + }; + + const loadIconSvgContent = (iconId: string): string | null => { + if (!iconSvgContents.has(iconId)) { + const separatorIndex = iconId.indexOf('-'); + const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, separatorIndex)); + const packageDirectory = iconSet ? getPackageDirectory(iconSet.packageName) : null; + let svgContent: string | null = null; + if (iconSet && packageDirectory) { + const iconsDirectoryPath = path.join(packageDirectory, iconSet.iconsDirectory); + const iconFilePath = fs.existsSync(iconsDirectoryPath) ? iconSet.getIconFilePaths(iconsDirectoryPath, iconId.slice(separatorIndex + 1)).find((filePath) => fs.existsSync(filePath)) : undefined; + svgContent = iconFilePath ? normalizeSvgContent(fs.readFileSync(iconFilePath, 'utf-8')) : null; + } + iconSvgContents.set(iconId, svgContent); + } + return iconSvgContents.get(iconId) ?? null; + }; + + const getIcons = (): Record<string, string> => { + const iconIds = [...new Set([...fileIconIds.values()].flat())].sort(); + // NOTE(krishan711): ui-react's own default icons (e.g. the carousel's chevrons) can be swapped with props, so a missing package is only warned about for ids the app uses itself + const appIconIds = new Set([...fileIconIds.entries()].filter(([filePath]) => !libraryDirectory || !filePath.startsWith(`${libraryDirectory}${path.sep}`)).flatMap(([, fileIds]) => fileIds)); + const missingIconIds = new Map<IIconSet, string[]>(); + const icons: Record<string, string> = {}; + iconIds.forEach((iconId) => { + const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, iconId.indexOf('-'))); + if (!iconSet) { + return; + } + const packageDirectory = getPackageDirectory(iconSet.packageName); + if (!packageDirectory || !fs.existsSync(path.join(packageDirectory, iconSet.iconsDirectory))) { + if (appIconIds.has(iconId) && !warnedIconIds.has(iconId)) { + missingIconIds.set(iconSet, [...(missingIconIds.get(iconSet) ?? []), iconId]); + warnedIconIds.add(iconId); + } + return; + } + const svgContent = loadIconSvgContent(iconId); + // NOTE(krishan711): strings that look like icon ids but aren't icons are skipped + if (svgContent) { + icons[iconId] = svgContent; + } + }); + if (missingIconIds.size > 0) { + const missingDescriptions = [...missingIconIds.entries()].map(([iconSet, setIconIds]) => { + const reason = getPackageDirectory(iconSet.packageName) ? `the installed version has no ${iconSet.iconsDirectory} directory` : 'not installed'; + return `${iconSet.packageName} (${reason}): ${setIconIds.join(', ')}`; + }); + logger?.warn(`[kiba-icons] KibaIcon will fetch these icons at runtime because their icon package is missing:\n ${missingDescriptions.join('\n ')}`); + } + return icons; + }; + + // NOTE(krishan711): returns whether the file uses icons that weren't registered yet + const rescanFile = (filePath: string, content?: string): boolean => { + const previousIconIds = new Set(Object.keys(getIcons())); + if (!scanFile(filePath, content)) { + return false; + } + return Object.keys(getIcons()).some((iconId) => !previousIconIds.has(iconId)); + }; + + // NOTE(krishan711): reloads the page so new icons are registered before anything renders them + const reloadWithNewIcons = (server: ViteDevServer): void => { + const virtualModule = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID); + if (virtualModule) { + server.moduleGraph.invalidateModule(virtualModule); + } + server.ws.send({ type: 'full-reload' }); + }; + + return { + name: 'kiba-icons', + enforce: 'pre', + configResolved(config: ResolvedConfig): void { + rootDirectory = config.root; + logger = config.logger; + const directories = options.sourceDirectories ?? (fs.existsSync(path.join(config.root, 'src')) ? ['src'] : ['.']); + sourceDirectories = directories.map((directory) => path.resolve(config.root, directory)); + ({ libraryDirectory, pluginDirectory } = getUiReactDirectories()); + }, + buildStart(): void { + iconSvgContents.clear(); + packageDirectories.clear(); + warnedIconIds.clear(); + scanAllFiles(); + // NOTE(krishan711): called here so missing packages are warned about once at the start + getIcons(); + }, + async resolveId(source, importer, resolveOptions) { + if (source === VIRTUAL_MODULE_ID) { + return RESOLVED_VIRTUAL_MODULE_ID; + } + // NOTE(krishan711): non-html entries (e.g. the server entry of an ssr build) import the icons directly + if (resolveOptions.isEntry && !source.endsWith('.html')) { + const resolved = await this.resolve(source, importer, { ...resolveOptions, skipSelf: true }); + if (resolved && !resolved.external && !resolved.id.endsWith('.html')) { + entryModuleIds.add(resolved.id); + } + return resolved; + } + return null; + }, + load(id: string): string | null { + if (id !== RESOLVED_VIRTUAL_MODULE_ID) { + return null; + } + return `import { registerKibaIcons } from ${JSON.stringify(registrationModule)};\nregisterKibaIcons(${JSON.stringify(getIcons())});\n`; + }, + transform(code: string, id: string): { code: string; map: null } | null { + if (!entryModuleIds.has(id)) { + return null; + } + return { code: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};\n${code}`, map: null }; + }, + // NOTE(krishan711): pre so the build bundles the script (and it runs before the app's entry script) + transformIndexHtml: { + order: 'pre', + handler: () => [{ + tag: 'script', + attrs: { type: 'module' }, + children: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};`, + injectTo: 'head-prepend', + }], + }, + configureServer(server: ViteDevServer): void { + server.watcher.on('add', (filePath: string): void => { + if (isSourceFile(filePath) && rescanFile(filePath)) { + reloadWithNewIcons(server); + } + }); + server.watcher.on('unlink', (filePath: string): void => { + fileIconIds.delete(filePath); + }); + }, + async handleHotUpdate(context: HmrContext) { + if (!isSourceFile(context.file) || !rescanFile(context.file, await context.read())) { + return undefined; + } + reloadWithNewIcons(context.server); + return []; + }, + }; +}; diff --git a/src/vitePlugin/index.ts b/src/vitePlugin/index.ts index 2a858fcd..b1f59e00 100644 --- a/src/vitePlugin/index.ts +++ b/src/vitePlugin/index.ts @@ -1,344 +1,2 @@ // NOTE(krishan711): this runs in node (inside vite), so it must only import node builtins and never the browser code -import fs from 'node:fs'; -import path from 'node:path'; -import { fileURLToPath } from 'node:url'; - -import type { HmrContext, Logger, Plugin, ResolvedConfig, ViteDevServer } from 'vite'; - -export interface IKibaIconsPluginOptions { - // NOTE(krishan711): directories (relative to the vite root) scanned for icon ids, defaults to src (or the root if there is no src) - sourceDirectories?: string[]; - // NOTE(krishan711): the module that exports registerKibaIcons, only needs changing when building ui-react itself - registrationModule?: string; -} - -interface IIconSet { - prefix: string; - packageName: string; - iconsDirectory: string; - getIconFilePaths: (iconsDirectoryPath: string, iconName: string) => string[]; -} - -const VIRTUAL_MODULE_ID = 'virtual:kiba-icons'; -const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`; -const ICON_ID_REGEX = /(?<=['"`])(ion|mui|bs|feather|remix)-([a-z0-9]+(?:-[a-z0-9]+)*)(?=['"`])/g; -const SOURCE_FILE_EXTENSIONS = new Set(['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts', '.mdx']); -const IGNORED_DIRECTORY_NAMES = new Set(['node_modules', 'dist', 'build', 'tmp']); -const MATERIAL_ICON_STYLES = ['outlined', 'round', 'sharp', 'two-tone']; - -const remixIconFilePaths = new Map<string, Map<string, string>>(); - -const getRemixIconFilePaths = (iconsDirectoryPath: string): Map<string, string> => { - let iconFilePaths = remixIconFilePaths.get(iconsDirectoryPath); - if (!iconFilePaths) { - iconFilePaths = new Map<string, string>(); - // NOTE(krishan711): remixicon puts icons in category directories, e.g. icons/Buildings/home-line.svg - fs.readdirSync(iconsDirectoryPath, { withFileTypes: true }).filter((entry) => entry.isDirectory()).forEach((categoryEntry) => { - fs.readdirSync(path.join(iconsDirectoryPath, categoryEntry.name)).filter((fileName) => fileName.endsWith('.svg')).forEach((fileName) => { - iconFilePaths?.set(fileName.slice(0, -'.svg'.length), path.join(iconsDirectoryPath, categoryEntry.name, fileName)); - }); - }); - remixIconFilePaths.set(iconsDirectoryPath, iconFilePaths); - } - return iconFilePaths; -}; - -const ICON_SETS: IIconSet[] = [{ - prefix: 'ion', - packageName: 'ionicons', - // NOTE(krishan711): the svg files are used (not the ionicons/icons data uris) because those style outlines with classes from ion-icon's css - iconsDirectory: 'dist/svg', - getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], -}, { - prefix: 'mui', - packageName: '@material-design-icons/svg', - iconsDirectory: '.', - // NOTE(krishan711): mui-account-box is filled/account_box.svg and mui-account-box-outlined is outlined/account_box.svg - getIconFilePaths: (iconsDirectoryPath, iconName) => { - const filePaths = [path.join(iconsDirectoryPath, 'filled', `${iconName.replace(/-/g, '_')}.svg`)]; - MATERIAL_ICON_STYLES.filter((style) => iconName.endsWith(`-${style}`)).forEach((style) => { - filePaths.push(path.join(iconsDirectoryPath, style, `${iconName.slice(0, -(style.length + 1)).replace(/-/g, '_')}.svg`)); - }); - return filePaths; - }, -}, { - prefix: 'bs', - packageName: 'bootstrap-icons', - iconsDirectory: 'icons', - getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], -}, { - prefix: 'feather', - packageName: 'feather-icons', - iconsDirectory: 'dist/icons', - getIconFilePaths: (iconsDirectoryPath, iconName) => [path.join(iconsDirectoryPath, `${iconName}.svg`)], -}, { - prefix: 'remix', - packageName: 'remixicon', - iconsDirectory: 'icons', - getIconFilePaths: (iconsDirectoryPath, iconName) => { - const filePath = getRemixIconFilePaths(iconsDirectoryPath).get(iconName); - return filePath ? [filePath] : []; - }, -}]; - -const ICON_SETS_BY_PREFIX = new Map(ICON_SETS.map((iconSet) => [iconSet.prefix, iconSet])); - -// NOTE(krishan711): the same normalisation KibaIcon does to fetched icons, plus removing whitespace between tags -const normalizeSvgContent = (svgContent: string): string => { - return svgContent - .replace(/<\?xml[^>]*\?>/gi, '') - .replace(/<!--[\s\S]*?-->/g, '') - .replace(/<title>.*<\/title>/gi, '') - .replace(/stroke:#000/gi, 'stroke:currentColor') - .replace(/fill:#000/gi, 'fill:currentColor') - .replace(/>\s+</g, '><') - .trim(); -}; - -const findIconIds = (content: string): string[] => { - return [...new Set([...content.matchAll(ICON_ID_REGEX)].map((match) => match[0]))]; -}; - -const findPackageDirectory = (rootDirectory: string, packageName: string): string | null => { - let directory = path.resolve(rootDirectory); - - while (true) { - const packageDirectory = path.join(directory, 'node_modules', ...packageName.split('/')); - if (fs.existsSync(path.join(packageDirectory, 'package.json'))) { - return packageDirectory; - } - const parentDirectory = path.dirname(directory); - if (parentDirectory === directory) { - return null; - } - directory = parentDirectory; - } -}; - -const listSourceFiles = (directory: string, fileExtensions: Set<string>, ignoredDirectories: Set<string>): string[] => { - if (!fs.existsSync(directory) || ignoredDirectories.has(directory)) { - return []; - } - return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry): string[] => { - const entryPath = path.join(directory, entry.name); - if (entry.isDirectory()) { - if (entry.name.startsWith('.') || IGNORED_DIRECTORY_NAMES.has(entry.name)) { - return []; - } - return listSourceFiles(entryPath, fileExtensions, ignoredDirectories); - } - return entry.isFile() && fileExtensions.has(path.extname(entry.name)) ? [entryPath] : []; - }); -}; - -// NOTE(krishan711): ui-react's own components use KibaIcon too, so its built files are scanned along with the app's source -const getUiReactDirectories = (): { libraryDirectory: string | null; pluginDirectory: string | null } => { - try { - const pluginDirectory = path.dirname(fileURLToPath(import.meta.url)); - let directory = pluginDirectory; - while (path.dirname(directory) !== directory) { - const packageFilePath = path.join(directory, 'package.json'); - if (fs.existsSync(packageFilePath)) { - const packageData = JSON.parse(fs.readFileSync(packageFilePath, 'utf-8')); - return { libraryDirectory: packageData.name === '@kibalabs/ui-react' ? path.join(directory, 'dist') : null, pluginDirectory }; - } - directory = path.dirname(directory); - } - return { libraryDirectory: null, pluginDirectory }; - } catch { - return { libraryDirectory: null, pluginDirectory: null }; - } -}; - -export const kibaIconsPlugin = (options: IKibaIconsPluginOptions = {}): Plugin => { - const registrationModule = options.registrationModule ?? '@kibalabs/ui-react'; - let rootDirectory = process.cwd(); - let logger: Logger | null = null; - let sourceDirectories: string[] = []; - let libraryDirectory: string | null = null; - let pluginDirectory: string | null = null; - const fileIconIds = new Map<string, string[]>(); - const iconSvgContents = new Map<string, string | null>(); - const packageDirectories = new Map<string, string | null>(); - const warnedIconIds = new Set<string>(); - const entryModuleIds = new Set<string>(); - - const isSourceFile = (filePath: string): boolean => { - return SOURCE_FILE_EXTENSIONS.has(path.extname(filePath)) && sourceDirectories.some((directory) => filePath.startsWith(`${directory}${path.sep}`)) && !filePath.split(path.sep).includes('node_modules'); - }; - - const scanFile = (filePath: string, content?: string): boolean => { - let fileContent = content; - if (fileContent === undefined) { - try { - fileContent = fs.readFileSync(filePath, 'utf-8'); - } catch { - fileContent = ''; - } - } - const previousIconIds = fileIconIds.get(filePath) ?? []; - const iconIds = findIconIds(fileContent); - fileIconIds.set(filePath, iconIds); - return iconIds.length !== previousIconIds.length || iconIds.some((iconId) => !previousIconIds.includes(iconId)); - }; - - const scanAllFiles = (): void => { - fileIconIds.clear(); - const ignoredDirectories = new Set(pluginDirectory ? [pluginDirectory] : []); - sourceDirectories.forEach((directory) => { - listSourceFiles(directory, SOURCE_FILE_EXTENSIONS, ignoredDirectories).forEach((filePath) => scanFile(filePath)); - }); - if (libraryDirectory) { - listSourceFiles(libraryDirectory, new Set(['.js']), ignoredDirectories).forEach((filePath) => scanFile(filePath)); - } - }; - - const getPackageDirectory = (packageName: string): string | null => { - if (!packageDirectories.has(packageName)) { - packageDirectories.set(packageName, findPackageDirectory(rootDirectory, packageName)); - } - return packageDirectories.get(packageName) ?? null; - }; - - const loadIconSvgContent = (iconId: string): string | null => { - if (!iconSvgContents.has(iconId)) { - const separatorIndex = iconId.indexOf('-'); - const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, separatorIndex)); - const packageDirectory = iconSet ? getPackageDirectory(iconSet.packageName) : null; - let svgContent: string | null = null; - if (iconSet && packageDirectory) { - const iconsDirectoryPath = path.join(packageDirectory, iconSet.iconsDirectory); - const iconFilePath = fs.existsSync(iconsDirectoryPath) ? iconSet.getIconFilePaths(iconsDirectoryPath, iconId.slice(separatorIndex + 1)).find((filePath) => fs.existsSync(filePath)) : undefined; - svgContent = iconFilePath ? normalizeSvgContent(fs.readFileSync(iconFilePath, 'utf-8')) : null; - } - iconSvgContents.set(iconId, svgContent); - } - return iconSvgContents.get(iconId) ?? null; - }; - - const getIcons = (): Record<string, string> => { - const iconIds = [...new Set([...fileIconIds.values()].flat())].sort(); - // NOTE(krishan711): ui-react's own default icons (e.g. the carousel's chevrons) can be swapped with props, so a missing package is only warned about for ids the app uses itself - const appIconIds = new Set([...fileIconIds.entries()].filter(([filePath]) => !libraryDirectory || !filePath.startsWith(`${libraryDirectory}${path.sep}`)).flatMap(([, fileIds]) => fileIds)); - const missingIconIds = new Map<IIconSet, string[]>(); - const icons: Record<string, string> = {}; - iconIds.forEach((iconId) => { - const iconSet = ICON_SETS_BY_PREFIX.get(iconId.slice(0, iconId.indexOf('-'))); - if (!iconSet) { - return; - } - const packageDirectory = getPackageDirectory(iconSet.packageName); - if (!packageDirectory || !fs.existsSync(path.join(packageDirectory, iconSet.iconsDirectory))) { - if (appIconIds.has(iconId) && !warnedIconIds.has(iconId)) { - missingIconIds.set(iconSet, [...(missingIconIds.get(iconSet) ?? []), iconId]); - warnedIconIds.add(iconId); - } - return; - } - const svgContent = loadIconSvgContent(iconId); - // NOTE(krishan711): strings that look like icon ids but aren't icons are skipped - if (svgContent) { - icons[iconId] = svgContent; - } - }); - if (missingIconIds.size > 0) { - const missingDescriptions = [...missingIconIds.entries()].map(([iconSet, setIconIds]) => { - const reason = getPackageDirectory(iconSet.packageName) ? `the installed version has no ${iconSet.iconsDirectory} directory` : 'not installed'; - return `${iconSet.packageName} (${reason}): ${setIconIds.join(', ')}`; - }); - logger?.warn(`[kiba-icons] KibaIcon will fetch these icons at runtime because their icon package is missing:\n ${missingDescriptions.join('\n ')}`); - } - return icons; - }; - - // NOTE(krishan711): returns whether the file uses icons that weren't registered yet - const rescanFile = (filePath: string, content?: string): boolean => { - const previousIconIds = new Set(Object.keys(getIcons())); - if (!scanFile(filePath, content)) { - return false; - } - return Object.keys(getIcons()).some((iconId) => !previousIconIds.has(iconId)); - }; - - // NOTE(krishan711): reloads the page so new icons are registered before anything renders them - const reloadWithNewIcons = (server: ViteDevServer): void => { - const virtualModule = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID); - if (virtualModule) { - server.moduleGraph.invalidateModule(virtualModule); - } - server.ws.send({ type: 'full-reload' }); - }; - - return { - name: 'kiba-icons', - enforce: 'pre', - configResolved(config: ResolvedConfig): void { - rootDirectory = config.root; - logger = config.logger; - const directories = options.sourceDirectories ?? (fs.existsSync(path.join(config.root, 'src')) ? ['src'] : ['.']); - sourceDirectories = directories.map((directory) => path.resolve(config.root, directory)); - ({ libraryDirectory, pluginDirectory } = getUiReactDirectories()); - }, - buildStart(): void { - iconSvgContents.clear(); - packageDirectories.clear(); - warnedIconIds.clear(); - scanAllFiles(); - // NOTE(krishan711): called here so missing packages are warned about once at the start - getIcons(); - }, - async resolveId(source, importer, resolveOptions) { - if (source === VIRTUAL_MODULE_ID) { - return RESOLVED_VIRTUAL_MODULE_ID; - } - // NOTE(krishan711): non-html entries (e.g. the server entry of an ssr build) import the icons directly - if (resolveOptions.isEntry && !source.endsWith('.html')) { - const resolved = await this.resolve(source, importer, { ...resolveOptions, skipSelf: true }); - if (resolved && !resolved.external && !resolved.id.endsWith('.html')) { - entryModuleIds.add(resolved.id); - } - return resolved; - } - return null; - }, - load(id: string): string | null { - if (id !== RESOLVED_VIRTUAL_MODULE_ID) { - return null; - } - return `import { registerKibaIcons } from ${JSON.stringify(registrationModule)};\nregisterKibaIcons(${JSON.stringify(getIcons())});\n`; - }, - transform(code: string, id: string): { code: string; map: null } | null { - if (!entryModuleIds.has(id)) { - return null; - } - return { code: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};\n${code}`, map: null }; - }, - // NOTE(krishan711): pre so the build bundles the script (and it runs before the app's entry script) - transformIndexHtml: { - order: 'pre', - handler: () => [{ - tag: 'script', - attrs: { type: 'module' }, - children: `import ${JSON.stringify(VIRTUAL_MODULE_ID)};`, - injectTo: 'head-prepend', - }], - }, - configureServer(server: ViteDevServer): void { - server.watcher.on('add', (filePath: string): void => { - if (isSourceFile(filePath) && rescanFile(filePath)) { - reloadWithNewIcons(server); - } - }); - server.watcher.on('unlink', (filePath: string): void => { - fileIconIds.delete(filePath); - }); - }, - async handleHotUpdate(context: HmrContext) { - if (!isSourceFile(context.file) || !rescanFile(context.file, await context.read())) { - return undefined; - } - reloadWithNewIcons(context.server); - return []; - }, - }; -}; +export * from './iconsPlugin'; From c3c8811ff8f77f8ed9cb285bace08bf07ad468ea Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 19:24:00 +0000 Subject: [PATCH 12/13] Feature: kibaFontsPlugin self-hosts an app's Google Fonts at build time --- CHANGELOG.md | 1 + src/vitePlugin/fontsPlugin.ts | 463 ++++++++++++++++++++++++++++++++++ src/vitePlugin/index.ts | 1 + 3 files changed, 465 insertions(+) create mode 100644 src/vitePlugin/fontsPlugin.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 5daef499..70683081 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Added - [MINOR] Added `@kibalabs/ui-react/vite-plugin` with `kibaIconsPlugin` to bundle the icons used with `KibaIcon` at build time, icon packages (`ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) are optional peer dependencies +- [MINOR] Added `kibaFontsPlugin` to `@kibalabs/ui-react/vite-plugin` to self-host the Google Fonts an app imports, downloading them at build time and preloading the main file of each family - [MINOR] Added `registerKibaIcons` to register svgs that `KibaIcon` renders without fetching - [MINOR] Added icon id props for the icons components show by default, so apps can use any icon set: `previousIconId`/`nextIconId` on `Carousel`, `expandIconId`/`collapseIconId` on `CollapsibleBox` and `TitledCollapsibleBox`, `selectedIconId` on `SelectableView`, `closeIconId` on `MessageDialog` and `iconId` on `Dropzone` - [MAJOR] Added `@kibalabs/ui-react/toast` (all of `@kibalabs/ui-react-toast`) and `@kibalabs/ui-react/dropzone` (all of `@kibalabs/ui-react-dropzone`) with their styles, `react-hot-toast` and `react-dropzone` are optional peer dependencies diff --git a/src/vitePlugin/fontsPlugin.ts b/src/vitePlugin/fontsPlugin.ts new file mode 100644 index 00000000..35255c8c --- /dev/null +++ b/src/vitePlugin/fontsPlugin.ts @@ -0,0 +1,463 @@ +// NOTE(krishan711): this runs in node (inside vite), so it must only import node builtins and never the browser code +import crypto from 'node:crypto'; +import fs from 'node:fs'; +import path from 'node:path'; + +import type { HtmlTagDescriptor, IndexHtmlTransformContext, IndexHtmlTransformResult, Logger, Plugin, ResolvedConfig } from 'vite'; + +export interface IKibaFontsPluginOptions { + // NOTE(krishan711): where downloaded stylesheets and fonts are kept between builds, defaults to node_modules/.cache/kiba-fonts in the vite root + cacheDirectory?: string; + // NOTE(krishan711): preloads the latin normal style file (closest to weight 400) of each family, defaults to true + shouldPreloadFonts?: boolean; +} + +interface IFontFormat { + extension: string; + mimeType: string; + cssFormat: string; + signatures: Buffer[]; +} + +interface IFontFace { + descriptors: [string, string][]; + family: string; + style: string; + weight: string; + subset: string | null; + hasUnicodeRange: boolean; + fontUrl: string; +} + +interface IFont { + content: Buffer; + format: IFontFormat; + hash: string; +} + +interface IStylesheet { + faces: IFontFace[]; + fonts: Map<string, IFont>; + preloadFontUrls: Set<string>; +} + +interface IEmittedFont { + referenceId: string; + mimeType: string; + shouldPreload: boolean; + fileName: string | null; +} + +const STYLESHEET_HOST = 'fonts.googleapis.com'; +const FONT_HOST = 'fonts.gstatic.com'; +const STYLESHEET_PATHS = new Set(['/css', '/css2']); +// NOTE(krishan711): google serves woff2 files split into unicode-range subsets only to modern browsers +const USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36'; +const FETCH_TIMEOUT_MS = 20_000; +const MAX_STYLESHEET_SIZE = 512 * 1024; +const MAX_FONT_SIZE = 5 * 1024 * 1024; +const FONT_FORMATS: IFontFormat[] = [ + { extension: 'woff2', mimeType: 'font/woff2', cssFormat: 'woff2', signatures: [Buffer.from('wOF2')] }, + { extension: 'woff', mimeType: 'font/woff', cssFormat: 'woff', signatures: [Buffer.from('wOFF')] }, + { extension: 'ttf', mimeType: 'font/ttf', cssFormat: 'truetype', signatures: [Buffer.from([0x00, 0x01, 0x00, 0x00]), Buffer.from('true')] }, +]; +const FONT_EXTENSIONS = new Set(FONT_FORMATS.map((format) => format.extension)); +const FONT_CONTENT_TYPES = new Set(['font/woff2', 'font/woff', 'font/ttf', 'font/sfnt', 'application/font-woff', 'application/font-woff2', 'application/x-font-ttf', 'application/font-sfnt']); +// NOTE(krishan711): only these descriptors are copied from google's css, so nothing else from it ends up in the app +const FONT_FACE_DESCRIPTORS = new Set(['font-family', 'font-style', 'font-weight', 'font-stretch', 'font-display', 'unicode-range']); +const SAFE_DESCRIPTOR_VALUE_REGEX = /^[\w\s'"+\-,.?%]+$/; +const FONT_FACE_REGEX = /(?:\/\*\s*([\w-]+)\s*\*\/\s*)?@font-face\s*\{([^{}]*)\}/g; +const FONT_SOURCE_REGEX = /^url\(\s*['"]?(https:\/\/fonts\.gstatic\.com\/[\w\-./]+)['"]?\s*\)/; +const CSS_IMPORT_REGEX = /@import\s+(?:url\(\s*(?:"([^"]*)"|'([^']*)'|([^"'()\s]+))\s*\)|"([^"]*)"|'([^']*)')\s*;/g; +const CSS_FILE_REGEX = /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/; +const LINK_TAG_REGEX = /<link\b[^>]*>/gi; +const PLACEHOLDER_REGEX = /__KIBA_FONT_([a-f0-9]{16})__/g; + +const hashContent = (content: string | Buffer): string => { + return crypto.createHash('sha256').update(content).digest('hex'); +}; + +const getStylesheetUrl = (value: string): string | null => { + let url: URL; + try { + url = new URL(value.startsWith('//') ? `https:${value}` : value); + } catch { + return null; + } + if ((url.protocol !== 'https:' && url.protocol !== 'http:') || url.hostname !== STYLESHEET_HOST || url.port || url.username || url.password || !STYLESHEET_PATHS.has(url.pathname)) { + return null; + } + url.protocol = 'https:'; + return url.href; +}; + +const getContentType = (headers: Headers): string => { + return (headers.get('content-type') ?? '').split(';')[0].trim().toLowerCase(); +}; + +const fetchContent = async (url: string, allowedHost: string, maxSize: number): Promise<{ content: Buffer; contentType: string }> => { + const parsedUrl = new URL(url); + if (parsedUrl.protocol !== 'https:' || parsedUrl.hostname !== allowedHost) { + throw new Error(`only https://${allowedHost} is allowed, not ${url}`); + } + // NOTE(krishan711): redirects are refused so nothing is fetched from any other host + const response = await fetch(parsedUrl, { headers: { 'User-Agent': USER_AGENT }, redirect: 'error', signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) }); + if (!response.ok || !response.body) { + throw new Error(`${url} responded with ${response.status}`); + } + if (Number(response.headers.get('content-length') ?? 0) > maxSize) { + await response.body.cancel(); + throw new Error(`${url} is larger than ${maxSize} bytes`); + } + const reader = response.body.getReader(); + const chunks: Uint8Array[] = []; + let size = 0; + while (true) { + // eslint-disable-next-line no-await-in-loop + const { done, value } = await reader.read(); + if (done) { + break; + } + size += value.byteLength; + if (size > maxSize) { + // eslint-disable-next-line no-await-in-loop + await reader.cancel(); + throw new Error(`${url} is larger than ${maxSize} bytes`); + } + chunks.push(value); + } + return { content: Buffer.concat(chunks), contentType: getContentType(response.headers) }; +}; + +const getFontFormat = (content: Buffer): IFontFormat | null => { + if (content.length > MAX_FONT_SIZE) { + return null; + } + return FONT_FORMATS.find((format) => format.signatures.some((signature) => content.subarray(0, signature.length).equals(signature))) ?? null; +}; + +// NOTE(krishan711): google's css only has (commented) @font-face rules, anything else means it isn't what was expected +const parseStylesheet = (css: string): IFontFace[] => { + const faces = [...css.matchAll(FONT_FACE_REGEX)].map((match): IFontFace => { + const descriptors: [string, string][] = []; + let fontUrl: string | null = null; + match[2].split(';').map((declaration) => declaration.trim()).filter((declaration) => declaration.length > 0).forEach((declaration) => { + const separatorIndex = declaration.indexOf(':'); + if (separatorIndex < 0) { + throw new Error(`unexpected declaration in @font-face: ${declaration}`); + } + const name = declaration.slice(0, separatorIndex).trim().toLowerCase(); + const value = declaration.slice(separatorIndex + 1).trim(); + if (name === 'src') { + fontUrl = value.match(FONT_SOURCE_REGEX)?.[1] ?? null; + if (!fontUrl) { + throw new Error(`unexpected @font-face src: ${value}`); + } + } else if (FONT_FACE_DESCRIPTORS.has(name)) { + if (!SAFE_DESCRIPTOR_VALUE_REGEX.test(value)) { + throw new Error(`unexpected @font-face ${name}: ${value}`); + } + descriptors.push([name, value]); + } + }); + const getDescriptor = (name: string): string | undefined => descriptors.find(([descriptorName]) => descriptorName === name)?.[1]; + const family = getDescriptor('font-family')?.replace(/['"]/g, '').trim(); + if (!family || !fontUrl) { + throw new Error('@font-face without a font-family or src'); + } + return { + descriptors, + family, + style: getDescriptor('font-style') ?? 'normal', + weight: getDescriptor('font-weight') ?? '400', + subset: match[1] ?? null, + hasUnicodeRange: getDescriptor('unicode-range') !== undefined, + fontUrl, + }; + }); + if (faces.length === 0 || css.replace(FONT_FACE_REGEX, '').replace(/\/\*[\s\S]*?\*\//g, '').trim().length > 0) { + throw new Error('the stylesheet has something other than @font-face rules'); + } + return faces; +}; + +const getWeightDistance = (weight: string): number => { + const weights = weight.split(/\s+/).map((value) => (value === 'bold' ? 700 : Number(value) || 400)); + const minimumWeight = Math.min(...weights); + const maximumWeight = Math.max(...weights); + return Math.max(minimumWeight - 400, 400 - maximumWeight, 0); +}; + +// NOTE(krishan711): preloading too much slows the page down, so only the file most text needs is preloaded for each family +const getPreloadFontUrls = (faces: IFontFace[]): Set<string> => { + const familyFaces = new Map<string, IFontFace>(); + faces.filter((face) => face.style === 'normal' && (face.subset === 'latin' || !face.hasUnicodeRange)).forEach((face) => { + const currentFace = familyFaces.get(face.family); + if (!currentFace || getWeightDistance(face.weight) < getWeightDistance(currentFace.weight)) { + familyFaces.set(face.family, face); + } + }); + return new Set([...familyFaces.values()].map((face) => face.fontUrl)); +}; + +const getFontAssetName = (face: IFontFace, format: IFontFormat): string => { + const name = [face.family, face.weight, face.style, face.subset ?? ''].join('-').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); + return `${name}.${format.extension}`; +}; + +const readCacheFile = (filePath: string): Buffer | null => { + try { + return fs.readFileSync(filePath); + } catch { + return null; + } +}; + +const writeCacheFile = (filePath: string, content: Buffer): void => { + try { + fs.mkdirSync(path.dirname(filePath), { recursive: true }); + const temporaryFilePath = `${filePath}.${process.pid}.tmp`; + fs.writeFileSync(temporaryFilePath, content); + fs.renameSync(temporaryFilePath, filePath); + } catch { + // NOTE(krishan711): the cache only saves downloads, so failing to write it is fine + } +}; + +export const kibaFontsPlugin = (options: IKibaFontsPluginOptions = {}): Plugin => { + const shouldPreloadFonts = options.shouldPreloadFonts ?? true; + let rootDirectory = process.cwd(); + let cacheDirectory = path.join(rootDirectory, 'node_modules', '.cache', 'kiba-fonts'); + let base = '/'; + let logger: Logger | null = null; + let stylesheetPromises = new Map<string, Promise<IStylesheet | null>>(); + const emittedFonts = new Map<string, IEmittedFont>(); + + const loadFont = async (fontUrl: string): Promise<IFont> => { + const extension = path.posix.extname(new URL(fontUrl).pathname).slice(1); + const cacheFilePath = path.join(cacheDirectory, `${hashContent(fontUrl).slice(0, 32)}.${FONT_EXTENSIONS.has(extension) ? extension : 'font'}`); + let content = readCacheFile(cacheFilePath); + let format = content ? getFontFormat(content) : null; + if (!content || !format) { + const response = await fetchContent(fontUrl, FONT_HOST, MAX_FONT_SIZE); + if (!FONT_CONTENT_TYPES.has(response.contentType) && !FONT_EXTENSIONS.has(extension)) { + throw new Error(`${fontUrl} is not a font (${response.contentType})`); + } + content = response.content; + format = getFontFormat(content); + if (!format) { + throw new Error(`${fontUrl} is not a woff2, woff or ttf file`); + } + writeCacheFile(cacheFilePath, content); + } + return { content, format, hash: hashContent(content) }; + }; + + const loadStylesheet = async (url: string): Promise<IStylesheet> => { + const cacheFilePath = path.join(cacheDirectory, `${hashContent(`${USER_AGENT}\n${url}`).slice(0, 32)}.css`); + const cachedContent = readCacheFile(cacheFilePath); + let faces: IFontFace[] | null = null; + if (cachedContent) { + try { + faces = parseStylesheet(cachedContent.toString('utf-8')); + } catch { + faces = null; + } + } + if (!faces) { + const response = await fetchContent(url, STYLESHEET_HOST, MAX_STYLESHEET_SIZE); + if (response.contentType !== 'text/css') { + throw new Error(`${url} is not css (${response.contentType})`); + } + faces = parseStylesheet(response.content.toString('utf-8')); + writeCacheFile(cacheFilePath, response.content); + } + const fontUrls = [...new Set(faces.map((face) => face.fontUrl))]; + const fonts = await Promise.all(fontUrls.map((fontUrl) => loadFont(fontUrl))); + return { faces, fonts: new Map(fontUrls.map((fontUrl, index) => [fontUrl, fonts[index]])), preloadFontUrls: getPreloadFontUrls(faces) }; + }; + + // NOTE(krishan711): a failed download leaves the @import as it is (so the browser loads it from google) and is warned about once + const getStylesheet = (url: string): Promise<IStylesheet | null> => { + let stylesheetPromise = stylesheetPromises.get(url); + if (!stylesheetPromise) { + stylesheetPromise = loadStylesheet(url).catch((error: unknown): null => { + // NOTE(krishan711): fetch's own errors only say "fetch failed" with the reason in the cause + const reason = error instanceof Error ? [error.message, 'cause' in error && error.cause instanceof Error ? error.cause.message : null].filter(Boolean).join(': ') : String(error); + logger?.warn(`[kiba-fonts] Leaving ${url} to be loaded from Google at runtime because downloading it failed: ${reason}`); + return null; + }); + stylesheetPromises.set(url, stylesheetPromise); + } + return stylesheetPromise; + }; + + const getFontUrl = (hostFileName: string, fontFileName: string): string => { + if (base === './' || base === '') { + const relativePath = path.posix.relative(path.posix.dirname(hostFileName), fontFileName); + return relativePath.startsWith('.') ? relativePath : `./${relativePath}`; + } + return `${base}${fontFileName}`; + }; + + const replacePlaceholders = (content: string, hostFileName: string): string => { + return content.replace(PLACEHOLDER_REGEX, (placeholder: string, key: string): string => { + const fileName = emittedFonts.get(key)?.fileName; + return fileName ? getFontUrl(hostFileName, fileName) : placeholder; + }); + }; + + const getUsedFontKeys = (content: string): string[] => { + return [...content.matchAll(PLACEHOLDER_REGEX)].map((match) => match[1]); + }; + + const hasStylesheetUrl = (content: string): boolean => { + return [...content.matchAll(CSS_IMPORT_REGEX)].some((match) => getStylesheetUrl(match[1] ?? match[2] ?? match[3] ?? match[4] ?? match[5] ?? '') !== null); + }; + + return { + name: 'kiba-fonts', + // NOTE(krishan711): in dev the @import is left as it is, so the browser loads the fonts from google + apply: 'build', + configResolved(config: ResolvedConfig): void { + rootDirectory = config.root; + cacheDirectory = options.cacheDirectory ? path.resolve(config.root, options.cacheDirectory) : path.join(config.root, 'node_modules', '.cache', 'kiba-fonts'); + base = config.base; + logger = config.logger; + }, + buildStart(): void { + stylesheetPromises = new Map(); + emittedFonts.clear(); + }, + // NOTE(krishan711): runs after vite:css, so the code is css even for sass files (sass leaves @import url(...) as a plain css @import) + async transform(code: string, id: string) { + if (this.environment?.config.consumer === 'server' || !code.includes(STYLESHEET_HOST)) { + return null; + } + // NOTE(krishan711): the html's inline styles have ids like index.html?html-proxy&inline-css&index=0.css, so those are css + if (id.endsWith('.html')) { + // NOTE(krishan711): stylesheet links become inline @imports, which vite then passes through the css transform below + const links = [...code.matchAll(LINK_TAG_REGEX)].map((match) => { + const getAttribute = (name: string): string | null => { + const attributeMatch = match[0].match(new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'>]+))`, 'i')); + return attributeMatch ? (attributeMatch[1] ?? attributeMatch[2] ?? attributeMatch[3]) : null; + }; + const isStylesheet = (getAttribute('rel') ?? '').toLowerCase().split(/\s+/).includes('stylesheet') && getAttribute('media') === null; + return { tag: match[0], url: isStylesheet ? getStylesheetUrl((getAttribute('href') ?? '').replace(/&/g, '&')) : null }; + }).filter((link): link is { tag: string; url: string } => link.url !== null); + const stylesheets = await Promise.all(links.map((link) => getStylesheet(link.url))); + let html = code; + links.forEach((link, index) => { + if (stylesheets[index]) { + html = html.replace(link.tag, (): string => `<style>@import url("${link.url}");</style>`); + } + }); + return html === code ? null : { code: html, map: null }; + } + // NOTE(krishan711): ?inline css ends up in js strings where the placeholders can't be replaced + if (!CSS_FILE_REGEX.test(id) || (!/[?&]html-proxy\b/.test(id) && /[?&](?:inline|raw)\b/.test(id)) || /[?&]style-attr\b/.test(id)) { + return null; + } + const imports = [...code.matchAll(CSS_IMPORT_REGEX)].map((match) => ({ statement: match[0], url: getStylesheetUrl(match[1] ?? match[2] ?? match[3] ?? match[4] ?? match[5] ?? '') })); + const stylesheetUrls = [...new Set(imports.map((cssImport) => cssImport.url).filter((url): url is string => url !== null))]; + if (stylesheetUrls.length === 0) { + return null; + } + const stylesheets = await Promise.all(stylesheetUrls.map((url) => getStylesheet(url))); + const stylesheetCss = new Map<string, string>(); + stylesheetUrls.forEach((url, index) => { + const stylesheet = stylesheets[index]; + if (!stylesheet) { + return; + } + const fontFaces = stylesheet.faces.map((face) => { + const font = stylesheet.fonts.get(face.fontUrl); + if (!font) { + return ''; + } + const key = font.hash.slice(0, 16); + if (!emittedFonts.has(key)) { + const referenceId = this.emitFile({ type: 'asset', name: getFontAssetName(face, font.format), source: font.content }); + emittedFonts.set(key, { referenceId, mimeType: font.format.mimeType, shouldPreload: false, fileName: null }); + } + const emittedFont = emittedFonts.get(key); + if (emittedFont && stylesheet.preloadFontUrls.has(face.fontUrl)) { + emittedFont.shouldPreload = true; + } + // NOTE(krishan711): the placeholder has the font's hash, so the css file's hash changes when the font does + const declarations = [...face.descriptors.map(([name, value]) => `${name}: ${value};`), `src: url(__KIBA_FONT_${key}__) format('${font.format.cssFormat}');`]; + return `@font-face {\n ${declarations.join('\n ')}\n}\n`; + }); + stylesheetCss.set(url, fontFaces.join('')); + }); + // NOTE(krishan711): @font-face rules can go anywhere, so they replace the @import where it was + let css = code; + imports.forEach((cssImport) => { + const fontFaceCss = cssImport.url ? stylesheetCss.get(cssImport.url) : undefined; + if (fontFaceCss !== undefined) { + css = css.replace(cssImport.statement, (): string => fontFaceCss); + } + }); + return css === code ? null : { code: css, map: null }; + }, + // NOTE(krishan711): the file names are needed in transformIndexHtml, which runs (in vite:build-html's generateBundle) before this plugin's generateBundle + renderChunk(): null { + emittedFonts.forEach((emittedFont) => { + if (!emittedFont.fileName) { + // eslint-disable-next-line no-param-reassign + emittedFont.fileName = this.getFileName(emittedFont.referenceId); + } + }); + return null; + }, + // NOTE(krishan711): post so the css vite emits in its own generateBundle (when cssCodeSplit is off) is included + generateBundle: { + order: 'post', + handler(_, bundle): void { + Object.values(bundle).forEach((output) => { + if (output.type !== 'asset' || !(output.fileName.endsWith('.css') || output.fileName.endsWith('.html'))) { + return; + } + const source = typeof output.source === 'string' ? output.source : Buffer.from(output.source).toString('utf-8'); + if (source.includes('__KIBA_FONT_')) { + // eslint-disable-next-line no-param-reassign + output.source = replacePlaceholders(source, output.fileName); + } + }); + }, + }, + transformIndexHtml: { + order: 'post', + handler(html: string, context: IndexHtmlTransformContext): IndexHtmlTransformResult | undefined { + if (!context.bundle) { + return undefined; + } + const htmlFileName = path.relative(rootDirectory, context.filename).split(path.sep).join('/'); + const linkedCss = Object.values(context.bundle).map((output): string => { + if (output.type !== 'asset' || !output.fileName.endsWith('.css') || !html.includes(output.fileName)) { + return ''; + } + return typeof output.source === 'string' ? output.source : Buffer.from(output.source).toString('utf-8'); + }).join('\n'); + const tags: HtmlTagDescriptor[] = []; + if (shouldPreloadFonts) { + const usedFontKeys = new Set([...getUsedFontKeys(html), ...getUsedFontKeys(linkedCss)]); + usedFontKeys.forEach((key) => { + const emittedFont = emittedFonts.get(key); + if (emittedFont?.shouldPreload && emittedFont.fileName) { + tags.push({ tag: 'link', attrs: { rel: 'preload', href: getFontUrl(htmlFileName, emittedFont.fileName), as: 'font', type: emittedFont.mimeType, crossorigin: true }, injectTo: 'head' }); + } + }); + } + let newHtml = replacePlaceholders(html, htmlFileName); + // NOTE(krishan711): connecting to google early is pointless once nothing loads from it + if (!hasStylesheetUrl(newHtml) && !hasStylesheetUrl(linkedCss)) { + newHtml = newHtml.replace(LINK_TAG_REGEX, (tag: string): string => { + return /\srel\s*=\s*["']?(?:preconnect|dns-prefetch)\b/i.test(tag) && /\shref\s*=\s*["']?https:\/\/fonts\.(?:googleapis|gstatic)\.com\/?["'\s>]/i.test(tag) ? '' : tag; + }); + } + return { html: newHtml, tags }; + }, + }, + }; +}; diff --git a/src/vitePlugin/index.ts b/src/vitePlugin/index.ts index b1f59e00..d214d26f 100644 --- a/src/vitePlugin/index.ts +++ b/src/vitePlugin/index.ts @@ -1,2 +1,3 @@ // NOTE(krishan711): this runs in node (inside vite), so it must only import node builtins and never the browser code export * from './iconsPlugin'; +export * from './fontsPlugin'; From 00c07291a630a13788d8e9a1be67870249273280 Mon Sep 17 00:00:00 2001 From: Krishan Patel <krishan711@gmail.com> Date: Mon, 2 Nov 2026 19:24:00 +0000 Subject: [PATCH 13/13] Document self-hosting Google Fonts with the vite plugin --- README.md | 10 ++++++++++ src/theming.mdx | 31 +++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/README.md b/README.md index 3774f9be..2f6de366 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,16 @@ export default (config) => { It scans `src` (and ui-react) for quoted icon ids and registers their svgs before your app starts. Anything it can't see (e.g. `` `ion-${name}` ``) is fetched from `assets-cdn.kiba.dev` at runtime as before. +## Fonts + +Keep loading Google Fonts the usual way (`@import url('https://fonts.googleapis.com/css2?family=...&display=swap');` in your css/scss, or a `<link>` in `index.html`) and add `kibaFontsPlugin()` (from the same `@kibalabs/ui-react/vite-plugin`) to self-host them: + +```js +viteConfig.plugins.push(kibaFontsPlugin()); +``` + +At build time it downloads the stylesheet and its font files, emits them as hashed assets, replaces the `@import` with the `@font-face` rules and preloads the latin, normal style file of each family the page's css uses. Downloads are cached in `node_modules/.cache/kiba-fonts`. If they fail (e.g. offline) the `@import` is left as it is with a warning. In dev the fonts still load from Google. + ## Theming - **Variables:** everything is themed with CSS variables named `--kiba-{category}-{name}` (e.g. `--kiba-color-brand-primary`, `--kiba-padding`). Each color also gets `-light10/25`, `-dark10/25` and `-clear25/50/75` variants. diff --git a/src/theming.mdx b/src/theming.mdx index dc79d81c..23b91057 100644 --- a/src/theming.mdx +++ b/src/theming.mdx @@ -138,6 +138,37 @@ import './theme.scss'; | `--kiba-font-weight-bold` | Bold font weight | | `--kiba-line-height` | Default line height | +### Self-hosting Google Fonts + +Load Google Fonts as usual and add the fonts vite plugin in your `config.build.js` to serve them from your own domain: + +```scss +// theme.scss +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); + +:root { + --kiba-font-family: 'Inter', system-ui, sans-serif; +} +``` + +```js +import { kibaFontsPlugin } from '@kibalabs/ui-react/vite-plugin'; + +export default (config) => { + const newConfig = config; + newConfig.viteConfigModifier = (viteConfig) => { + const newViteConfig = viteConfig; + newViteConfig.plugins.push(kibaFontsPlugin()); + return newViteConfig; + }; + return newConfig; +}; +``` + +At build time the plugin finds `fonts.googleapis.com` stylesheets in your css (after sass has compiled it, so partials count too) and in `<link rel="stylesheet">` tags in `index.html`, downloads them and their font files (only ever from `fonts.googleapis.com` and `fonts.gstatic.com`), emits the fonts as hashed assets and replaces the `@import` with the `@font-face` rules. The latin, normal style file (closest to weight 400) of each family that the page's css uses is preloaded; pass `shouldPreloadFonts: false` to turn that off. + +Downloads are cached in `node_modules/.cache/kiba-fonts` (or `cacheDirectory`). If downloading fails (e.g. an offline build) the build still succeeds: the `@import` is left as it is, so the browser loads the fonts from Google, and a warning is logged. The dev server always leaves the `@import` as it is. + ### Spacing | Variable | Description |