unframer 3.0.2 → 3.0.5

package/esm/generated/api-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-client.js","sourceRoot":"","sources":["../../src/generated/api-client.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE;IACtC,MAAM,EAAE,qBAAqB,EAAE,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;QACtC,oCAAoC;QACpC,kDAAkD;QAClD,qBAAqB;QACrB,4CAA4C;QAC5C,QAAQ;QACR,iBAAiB;QACjB,KAAK;QACL,+BAA+B;QAC/B,0BAA0B;QAC1B,iDAAiD;QACjD,QAAQ;QACR,sBAAsB;QACtB,KAAK;QACL,OAAO;YACH,OAAO;YACH,yFAAyF;aAC5F,CAAA;QACL,CAAC;KACJ,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACjB,CAAC;AACD,iFAAiF"}
+{"version":3,"file":"api-client.js","sourceRoot":"","sources":["../../src/generated/api-client.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE;IACtC,MAAM,EAAE,qBAAqB,EAAE,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;QACtC,oCAAoC;QACpC,kDAAkD;QAClD,qBAAqB;QACrB,4CAA4C;QAC5C,QAAQ;QACR,iBAAiB;QACjB,KAAK;QACL,+BAA+B;QAC/B,0BAA0B;QAC1B,iDAAiD;QACjD,QAAQ;QACR,sBAAsB;QACtB,KAAK;QACL,OAAO;YACH,OAAO;YACP,yFAAyF;aACxF,CAAC;QACN,CAAC;KACJ,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAClB,CAAC;AACD,iFAAiF"}

package/esm/typescript.d.ts

@@ -0,0 +1,20 @@
+import { PropertyControls } from './framer.js';
+export declare function componentCamelCase(str: string): string;
+/**
+ * Generates TypeDoc comments that will be injected into JSX files
+ * instead of generating separate .d.ts files
+ */
+export declare function propControlsToTypedocComments({ locales, componentImportedName, propertyControls, logger, includeLocaleTypes, }: {
+    propertyControls: PropertyControls;
+    componentImportedName: string;
+    locales?: Array<{
+        slug: string;
+    }>;
+    logger: any;
+    includeLocaleTypes?: boolean;
+}): {
+    headerComment: string;
+    responsiveComment: string;
+    defaultExportComment: string;
+};
+//# sourceMappingURL=typescript.d.ts.map

package/esm/typescript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typescript.d.ts","sourceRoot":"","sources":["../src/typescript.ts"],"names":[],"mappings":"AACA,OAAO,EAAmC,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE/E,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAoC7C;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,EAC1C,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,MAAM,EACN,kBAA0B,GAC7B,EAAE;IACC,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACjC,MAAM,EAAE,GAAG,CAAA;IACX,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B;;;;EA0IA"}

package/esm/typescript.js

@@ -0,0 +1,165 @@
+import { propCamelCaseJustLikeFramer } from './compat.js';
+import { ControlType } from './framer.js';
+export function componentCamelCase(str) {
+    str = str?.replace(/\.jsx?$/, '');
+    if (!str) {
+        return 'FramerComponent';
+    }
+    // Take last part after slashes
+    str = str.split('/').filter(Boolean).pop() || '';
+    // Replace all non-alphanumeric characters with space
+    // This handles spaces, special chars, underscores, hyphens, etc.
+    str = str.replace(/[^a-zA-Z0-9]+/g, ' ');
+    // Convert to camelCase: split by spaces, capitalize each word except first
+    const words = str.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return 'FramerComponent';
+    }
+    str = words
+        .map((word, index) => {
+        // First word: capitalize only if it starts with lowercase
+        if (index === 0) {
+            return word[0].toUpperCase() + word.slice(1);
+        }
+        // Other words: always capitalize first letter
+        return word[0].toUpperCase() + word.slice(1);
+    })
+        .join('');
+    // If component name starts with a number, add prefix 'Framer'
+    if (/^[0-9]/.test(str)) {
+        str = 'Framer' + str;
+    }
+    str = str + 'FramerComponent';
+    return str;
+}
+/**
+ * Generates TypeDoc comments that will be injected into JSX files
+ * instead of generating separate .d.ts files
+ */
+export function propControlsToTypedocComments({ locales, componentImportedName, propertyControls, logger, includeLocaleTypes = false, }) {
+    try {
+        const types = Object.entries(propertyControls || {})
+            .map(([key, value]) => {
+            if (!value) {
+                return;
+            }
+            const typescriptType = (value) => {
+                value.type;
+                switch (value.type) {
+                    case ControlType.Color:
+                        return 'string';
+                    case ControlType.Boolean:
+                        return 'boolean';
+                    case ControlType.Number:
+                        return 'number';
+                    case ControlType.String:
+                        return 'string';
+                    case ControlType.Enum: {
+                        // @ts-expect-error
+                        const options = value.optionTitles || value.options;
+                        return options.map((x) => `'${x}'`).join(' | ');
+                    }
+                    case ControlType.File:
+                        return 'string';
+                    case ControlType.Image:
+                        return 'string';
+                    case ControlType.ComponentInstance:
+                        return 'React.ReactNode';
+                    case ControlType.Array:
+                        // @ts-expect-error
+                        return `${typescriptType(value.control)}[]`;
+                    case ControlType.Object:
+                        // @ts-expect-error
+                        return `{${Object.entries(value.controls)
+                            .map(([k, v]) => {
+                            // @ts-expect-error
+                            return `${k}: ${typescriptType(v)}`;
+                        })
+                            .join(', ')}`;
+                    case ControlType.Date:
+                        return 'string | Date';
+                    case ControlType.Link:
+                        return 'string';
+                    case ControlType.ResponsiveImage:
+                        return `{src: string, srcSet?: string, alt?: string}`;
+                    case ControlType.FusedNumber:
+                        return 'number';
+                    case ControlType.Transition:
+                        return 'any';
+                    case ControlType.EventHandler:
+                        return 'Function';
+                }
+            };
+            let name = propCamelCaseJustLikeFramer(value.title || key || '');
+            if (!name) {
+                return '';
+            }
+            return ` * ${name}?: ${typescriptType(value)} // ${value.title || name}`;
+        })
+            .filter(Boolean)
+            .join('\n');
+        const componentName = componentImportedName;
+        const defaultPropsJsDoc = [
+            ' * children?: React.ReactNode',
+            includeLocaleTypes ? ' * locale?: Locale' : null,
+            ' * style?: React.CSSProperties',
+            ' * className?: string',
+            ' * id?: string',
+            ' * ref?: any',
+            ' * width?: any',
+            ' * height?: any',
+            ' * layoutId?: string',
+        ].filter(Boolean).join('\n');
+        // Generate header comment with type definitions
+        let headerComment = '';
+        if (includeLocaleTypes) {
+            headerComment += '/**\n';
+            headerComment += ' * @typedef Locale\n';
+            // Generate union type from locales if available
+            const localeType = (() => {
+                if (locales && Array.isArray(locales) && locales.length > 0) {
+                    return locales.map((locale) => `'${locale.slug}'`).join(' | ');
+                }
+                return 'string';
+            })();
+            headerComment += ` * ${localeType}\n`;
+            headerComment += ' */\n\n';
+        }
+        headerComment += '/**\n';
+        headerComment += ' * @typedef {{\n';
+        headerComment += defaultPropsJsDoc;
+        if (types) {
+            headerComment += '\n' + types;
+        }
+        headerComment += `\n}} Props\n`;
+        headerComment += '\n */';
+        // Generate responsive comment
+        let responsiveComment = '/**\n';
+        responsiveComment += ' * @type {import("unframer").UnframerBreakpoint}\n';
+        responsiveComment += ' * Represents a responsive breakpoint for unframer.\n';
+        responsiveComment += ' */\n\n';
+        responsiveComment += '/**\n';
+        responsiveComment += ' * @typedef VariantsMap\n';
+        responsiveComment += " * Partial record of UnframerBreakpoint to Props.variant, with a mandatory 'base' key.\n";
+        responsiveComment += " * { [key in UnframerBreakpoint]?: Props['variant'] } & { base: Props['variant'] }\n";
+        responsiveComment += ' */\n\n';
+        responsiveComment += `/**\n * Renders ${componentName} for all breakpoints with a variants map. Variant prop is inferred per breakpoint.\n * @function\n * @param {Omit<Props, 'variant'> & {variants?: VariantsMap}} props\n * @returns {any}\n */`;
+        // Generate default export comment - use inline function type instead of referencing undefined type
+        const defaultExportComment = `/** @type {function(Props): any} */`;
+        return {
+            headerComment,
+            responsiveComment,
+            defaultExportComment,
+        };
+    }
+    catch (e) {
+        logger.error(e.message);
+        logger.error('cannot generate typedoc comments', e.stack);
+        return {
+            headerComment: '',
+            responsiveComment: '',
+            defaultExportComment: '',
+        };
+    }
+}
+//# sourceMappingURL=typescript.js.map

package/esm/typescript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typescript.js","sourceRoot":"","sources":["../src/typescript.ts"],"names":[],"mappings":"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"}

package/esm/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "3.0.2";
+export declare const version = "3.0.5";
 //# sourceMappingURL=version.d.ts.map

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '3.0.2';
+export const version = '3.0.5';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -29,6 +29,9 @@
       "module": "./esm/exporter.js",
       "default": "./dist/exporter.js"
     },
+    "./styles/*": {
+      "default": "./src/styles/*"
+    },
     "./src/*": {
       "default": "./src/*.ts"
     },
@@ -51,11 +54,11 @@
     "@biomejs/wasm-nodejs": "^1.9.4",
     "async-sema": "^3.1.1",
     "cac": "^6.7.14",
-    "esbuild": "^0.25.4",
+    "esbuild": "^0.25.8",
     "esbuild-plugins-node-modules-polyfill": "^1.6.8",
     "nanospinner": "^1.2.2",
     "picocolors": "^1.1.1",
-    "real-framer-motion": "npm:framer-motion@^12.16.0",
+    "real-framer-motion": "npm:framer-motion@^12.23.12",
     "spiceflow": "^1.13.2",
     "string-dedent": "^3.0.1",
     "undici": "^7.10.0"

package/src/cli.test.ts

@@ -1,9 +1,9 @@
 import { expect, test } from 'vitest'
 import {
-    componentCamelCase,
     extractTokenInfo,
     findRelativeLinks,
 } from './exporter.js'
+import { componentCamelCase } from './typescript.js'
 
 import { componentNameToPath } from './utils.js'
 
@@ -38,6 +38,13 @@ test('componentCamelCase', () => {
     expect(componentCamelCase('shared/nav/framer-nav')).toMatchInlineSnapshot(
         `"FramerNavFramerComponent"`,
     )
+    // Test cases with spaces and special characters
+    expect(componentCamelCase('hero section')).toMatchInlineSnapshot(`"HeroSectionFramerComponent"`)
+    expect(componentCamelCase('hero-section with spaces')).toMatchInlineSnapshot(`"HeroSectionWithSpacesFramerComponent"`)
+    expect(componentCamelCase('component@#$name')).toMatchInlineSnapshot(`"ComponentNameFramerComponent"`)
+    expect(componentCamelCase('123-component')).toMatchInlineSnapshot(`"Framer123ComponentFramerComponent"`)
+    expect(componentCamelCase('component!!name??test')).toMatchInlineSnapshot(`"ComponentNameTestFramerComponent"`)
+    expect(componentCamelCase('  multiple   spaces  ')).toMatchInlineSnapshot(`"MultipleSpacesFramerComponent"`)
 })
 test('findRelativeLinks', () => {
     expect(

package/src/cli.ts

@@ -300,7 +300,7 @@ export async function configFromFetch({
             }) || []
     const config: Config = {
         ...data,
-
+        pageBackgroundColor: data.project?.pageBackgroundColor || '',
         breakpoints: defaultBreakpointSizes,
         outDir,
         externalPackages,

package/src/example-code.test.ts

@@ -28,7 +28,7 @@ describe('createExampleComponentCode', () => {
 
           export default function App() {
             return (
-              <div className='flex flex-col items-center gap-3 '>
+              <div className='flex flex-col items-center gap-3 bg-[rgb(8,_8, 7)]'>
                 <NavigationFramerComponent.Responsive
                   ctaVariant={"Primary"}
                 />

package/src/exporter.ts

@@ -30,6 +30,10 @@ import {
     groupBy,
     logFontsUsage,
 } from './css.js'
+import {
+    propControlsToTypedocComments,
+    componentCamelCase,
+} from './typescript.js'
 import {
     defaultExternalPackages,
     esbuildPluginBundleDependencies,
@@ -425,10 +429,13 @@ export async function bundle({
                             fileName: path.basename(file.path),
                         })),
                     )
+                    const componentImportedName = componentCamelCase(name)
                     const typedocComments = propControlsToTypedocComments({
-                        controls: propertyControls!,
-                        fileName: name,
-                        config,
+                        propertyControls: propertyControls!,
+                        logger,
+                        componentImportedName,
+                        locales: config.locales,
+                        includeLocaleTypes: true,
                     })
                     logger.log(
                         `Generated TypeDoc comments for ${name}: ${!!typedocComments.headerComment}`,
@@ -457,15 +464,12 @@ export async function bundle({
 
         const cssString =
             doNotEditComment +
-            '/* This css file has all the necessary styles to run all your components */\n' +
-            '\n' +
-            resetCssStyles +
+            '/* This css file has all the necessary styles to run all your Framer components */\n' +
+            '@import "unframer/styles/reset.css";\n' +
+            '@import "unframer/styles/framer.css";\n\n' +
             getStyleTokensCss(tokens || []) +
             breakpointsStyles(breakpoints) +
             '\n\n' +
-            combinedCSSRules
-                .map((x) => (x?.startsWith('  ') ? dedent(x) : x))
-                .join('\n') +
             getFontsStyles(allFonts)
         await fs.promises.writeFile(
             path.resolve(out, 'styles.css'),
@@ -1144,159 +1148,6 @@ function safeJsonParse(text) {
     }
 }
 
-/**
- * Generates TypeDoc comments that will be injected into JSX files
- * instead of generating separate .d.ts files
- */
-export function propControlsToTypedocComments({
-    config,
-    fileName,
-    controls,
-}: {
-    controls: PropertyControls
-    fileName: string
-    config: Config
-}) {
-    try {
-        const types = Object.entries(controls || ({} as PropertyControls))
-            .map(([key, value]) => {
-                if (!value) {
-                    return
-                }
-
-                const typescriptType = (value: ControlDescription<any>) => {
-                    value.type
-                    switch (value.type) {
-                        case ControlType.Color:
-                            return 'string'
-                        case ControlType.Boolean:
-                            return 'boolean'
-                        case ControlType.Number:
-                            return 'number'
-                        case ControlType.String:
-                            return 'string'
-                        case ControlType.Enum: {
-                            // @ts-expect-error
-                            const options = value.optionTitles || value.options
-                            return options.map((x) => `'${x}'`).join(' | ')
-                        }
-                        case ControlType.File:
-                            return 'string'
-                        case ControlType.Image:
-                            return 'string'
-                        case ControlType.ComponentInstance:
-                            return 'React.ReactNode'
-                        case ControlType.Array:
-                            // @ts-expect-error
-                            return `${typescriptType(value.control)}[]`
-                        case ControlType.Object:
-                            // @ts-expect-error
-                            return `{${Object.entries(value.controls)
-                                .map(([k, v]) => {
-                                    // @ts-expect-error
-                                    return `${k}: ${typescriptType(v)}`
-                                })
-                                .join(', ')}`
-                        case ControlType.Date:
-                            return 'string | Date'
-                        case ControlType.Link:
-                            return 'string'
-                        case ControlType.ResponsiveImage:
-                            return `{src: string, srcSet?: string, alt?: string}`
-                        case ControlType.FusedNumber:
-                            return 'number'
-                        case ControlType.Transition:
-                            return 'any'
-                        case ControlType.EventHandler:
-                            return 'Function'
-                    }
-                }
-                let name = propCamelCaseJustLikeFramer(value.title || key || '')
-                if (!name) {
-                    return ''
-                }
-                return ` * ${name}?: ${typescriptType(value)} // ${value.title || name}`
-            })
-            .filter(Boolean)
-            .join('\n')
-
-        const componentName = componentCamelCase(fileName)
-
-        const defaultPropsJsDoc = [
-            ' * children?: React.ReactNode',
-            ' * locale?: Locale',
-            ' * style?: React.CSSProperties',
-            ' * className?: string',
-            ' * id?: string',
-            ' * ref?: any',
-            ' * width?: any',
-            ' * height?: any',
-            ' * layoutId?: string',
-        ].join('\n')
-
-        // Generate header comment with type definitions
-        let headerComment = '/**\n'
-        headerComment += ' * @typedef Locale\n'
-
-        // Generate union type from config.locales if available
-        const localeType = (() => {
-            if (
-                config?.locales &&
-                Array.isArray(config.locales) &&
-                config.locales.length > 0
-            ) {
-                return config.locales
-                    .map((locale) => `'${locale.slug}'`)
-                    .join(' | ')
-            }
-            return 'string'
-        })()
-
-        headerComment += ` * ${localeType}\n`
-        headerComment += ' */\n\n'
-        headerComment += '/**\n'
-        headerComment += ' * @typedef {{\n'
-        headerComment += defaultPropsJsDoc
-
-        if (types) {
-            headerComment += '\n' + types
-        }
-        headerComment += `\n}} Props\n`
-        headerComment += '\n */\n\n'
-        headerComment += '/**\n'
-        headerComment += ' * @type {import("unframer").UnframerBreakpoint}\n'
-        headerComment += ' * Represents a responsive breakpoint for unframer.\n'
-        headerComment += ' */\n\n'
-        headerComment += '/**\n'
-        headerComment += ' * @typedef VariantsMap\n'
-        headerComment +=
-            " * Partial record of UnframerBreakpoint to Props.variant, with a mandatory 'base' key.\n"
-        headerComment +=
-            " * { [key in UnframerBreakpoint]?: Props['variant'] } & { base: Props['variant'] }\n"
-        headerComment += ' */'
-
-        // Generate responsive comment
-        const responsiveComment = `/**\n * Renders ${componentName} for all breakpoints with a variants map. Variant prop is inferred per breakpoint.\n * @function\n * @param {Omit<Props, 'variant'> & {variants?: VariantsMap}} props\n * @returns {any}\n */`
-
-        // Generate default export comment - use inline function type instead of referencing undefined type
-        const defaultExportComment = `/** @type {function(Props): any} */`
-
-        return {
-            headerComment,
-            responsiveComment,
-            defaultExportComment,
-        }
-    } catch (e: any) {
-        logger.error(e.message)
-        logger.error('cannot generate typedoc comments', e.stack)
-        return {
-            headerComment: '',
-            responsiveComment: '',
-            defaultExportComment: '',
-        }
-    }
-}
-
 export function parsePropertyControls(code: string) {
     const start = code.indexOf('addPropertyControls(')
     if (start === -1) {
@@ -1411,20 +1262,6 @@ function splitOnce(str: string, separator: string) {
     return [str.slice(0, index), str.slice(index + 1)]
 }
 
-export function componentCamelCase(str: string) {
-    str = str?.replace(/\.jsx?$/, '')
-    if (!str) {
-        return 'FramerComponent'
-    }
-    // Take last part after slashes
-    str = str.split('/').filter(Boolean).pop() || ''
-    str = str.replace(/-([\w])/g, (g) => g[1].toUpperCase())
-    str = str.replace(/_([a-z])/g, (g) => g[1].toUpperCase())
-    str = str[0].toUpperCase() + str.slice(1)
-    str = str + 'FramerComponent'
-    return str
-}
-
 const breakpointVariants = ['mobile', 'tablet', 'desktop']
 
 function getVariantsFromPropControls(propControls?: PropertyControls) {
@@ -1464,33 +1301,6 @@ function findExampleProperty(propertyControls?: PropertyControls) {
     return propCamelCaseJustLikeFramer(stringProp[1]?.title || '')
 }
 
-// these styles are global styles injected by Framer in the generated websites, without them things like icons can look weird
-const resetCssStyles = `
-
-:root {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-    box-sizing: border-box;
-    -webkit-font-smoothing: inherit;
-}
-
-.unframer h1, .unframer h2, .unframer h3, .unframer h4, .unframer h5, .unframer h6, .unframer p, .unframer figure {
-    margin: 0;
-}
-
-.unframer {
-    line-height: normal;
-}
-
-.unframer, .unframer input, .unframer textarea, .unframer select, .unframer button {
-    font-size: 12px;
-    font-family: sans-serif;
-}
-`
-
 async function recursiveReaddir(dir: string): Promise<string[]> {
     const dirents = await fs.promises.readdir(dir, { withFileTypes: true })
     const files = await Promise.all(

package/src/framer-chunks/fontshare-4J2ZFRBB-H5VQLZTM.js

@@ -0,0 +1,7 @@
+import "./chunk-A2PMVMFI.js";
+
+// /:https://app.framerstatic.com/fontshare-4J2ZFRBB.mjs
+var fontshare_default = { "FS;Spline Sans": true, "FS;Satoshi": true, "FS;Epilogue": true, "FS;JetBrains Mono": true, "FS;Nippo": true, "FS;Boxing": true, "FS;Cabinet Grotesk": true, "FS;Bespoke Serif": true, "FS;Panchang": true, "FS;Sora": true, "FS;Familjen Grotesk": true, "FS;Sharpie": true, "FS;Chillax": true, "FS;Array": true, "FS;Boska": true, "FS;Clash Grotesk": true, "FS;Plus Jakarta Sans": true, "FS;Pally": true, "FS;Space Grotesk": true, "FS;Khand": true, "FS;Comico": true, "FS;Sentient": true, "FS;Plein": true, "FS;Rowan": true, "FS;Kalam": true, "FS;Stardom": true, "FS;Clash Display": true, "FS;Britney": true, "FS;Fira Sans": true, "FS;Quilon": true, "FS;Literata": true, "FS;Archivo": true, "FS;Manrope": true, "FS;Rosaline": true, "FS;Dancing Script": true, "FS;Syne": true, "FS;Outfit": true, "FS;Hind": true, "FS;Gambarino": true, "FS;Pilcrow Rounded": true, "FS;Bevellier": true, "FS;Telma": true, "FS;Supreme": true, "FS;Bespoke Slab": true, "FS;Aktura": true, "FS;Montserrat": true, "FS;Erode": true, "FS;Be Vietnam Pro": true, "FS;Melodrama": true, "FS;Pramukh Rounded": true, "FS;Bespoke Sans": true, "FS;Teko": true, "FS;Striper": true, "FS;General Sans": true, "FS;Lobster": true, "FS;Karma": true, "FS;Tabular": true, "FS;Karla": true, "FS;Tanker": true, "FS;Paquito": true, "FS;Kohinoor Zerone": true, "FS;Bespoke Stencil": true, "FS;Bebas Neue": true, "FS;Gambetta": true, "FS;Asap": true, "FS;Lora": true, "FS;Zina": true, "FS;Pencerio": true, "FS;Bonny": true, "FS;Author": true, "FS;Kola": true, "FS;Rajdhani": true, "FS;Switzer": true, "FS;Roundo": true, "FS;Red Hat Display": true, "FS;Zodiak": true, "FS;Styro": true, "FS;RX100": true, "FS;Quicksand": true, "FS;Urbanist": true, "FS;Oswald": true, "FS;Azeret Mono": true, "FS;Crimson Pro": true, "FS;Work Sans": true, "FS;Expose": true, "FS;Ranade": true, "FS;Merriweather Sans": true, "FS;Excon": true, "FS;Nunito": true, "FS;Synonym": true, "FS;Anton": true, "FS;Ballet": true, "FS;Trench Slab": true, "FS;New Title": true, "FS;Alpino": true, "FS;Halant": true, "FS;Recia": true, "FS;Kihim": true, "FS;Amulya": true, "FS;Raleway": true, "FS;Poppins": true, "FS;Stick No Bills": true, "FS;Technor": true, "FS;Chubbo": true, "FS;Segment": true, "FS;Public Sans": true, "FS;Neco": true, "FS;Rozha One": true, "FS;Tillana": true, "FS;Laila": true, "FS;Hoover": true };
+export {
+  fontshare_default as default
+};