@net-advantage/jo-ui-logo 1.1.7 → 1.3.1

package/README.md

@@ -2,23 +2,26 @@
 
 JourneyOf wordmark. `journey` uses Inter. The accent `of..` uses Caveat. A dotted curve sits under the word.
 
-The logo follows a strict MVVM split. The model owns defaults and the font address. The view-model projects presentation values and requests the font faces. The view only renders the view-model.
+The logo follows a strict MVVM split. The model owns defaults. The view-model projects presentation values. The view only renders the view-model. Inter and Caveat are self-hosted by `@net-advantage/jo-ui-theme`.
 
 ## MVVM
 
 ```mermaid
 flowchart LR
   Props["LogoProps"] --> ViewModel["useLogoViewModel"]
-  Model["logo.model.ts<br/>defaults and font address"] --> ViewModel
+  Model["logo.model.ts<br/>defaults and class name"] --> ViewModel
   ViewModel --> View["Logo.tsx"]
+  MarkProps["MobileMarkProps"] --> MarkModel["useMobileMarkViewModel"]
+  MarkModel --> Mark["MobileMark.tsx"]
 ```
 
 | Layer | File | Responsibility |
 | --- | --- | --- |
 | Contract | [logo.types.ts](src/logo.types.ts) | Props and view-model |
-| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, class name, and font address |
-| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families; request font faces |
+| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, and class name |
+| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families |
 | View | [Logo.tsx](src/Logo.tsx) | Render the wordmark and dotted curve |
+| View | [MobileMark.tsx](src/MobileMark.tsx) | Render the 43×28 compact mark. Light uses the primary artwork. Dark uses the reversed artwork. |
 
 ## Models
 
@@ -26,7 +29,6 @@ flowchart LR
 flowchart TD
   Defaults["LOGO_DEFAULTS"] --> ViewModel["LogoViewModel"]
   Props["LogoProps"] --> ViewModel
-  Font["LOGO_FONT_HREF"] --> Link["font stylesheet link"]
   ViewModel --> Word["journey"]
   ViewModel --> Accent["of.."]
   ViewModel --> Curve["dotted curve"]
@@ -35,7 +37,7 @@ flowchart TD
 - `primaryColor` colors `journey` and the curve's end dot. It defaults to `#14224a`.
 - `accentColor` colors `of..` and the curve. It defaults to `#6495ed`.
 - `curveWidth` defaults to `80`. `curveHeight` defaults to `10`.
-- The font request lives in the view-model. The model only names the address.
+- Font families stay `Inter` and `Caveat`. Load them with `import '@net-advantage/jo-ui-theme/style.css'`. The logo does not request Google Fonts.
 
 ## Structure
 
@@ -43,11 +45,13 @@ flowchart TD
 
 ## Fonts
 
-The module requests Inter and Caveat from Google Fonts as soon as it loads. It adds one `preconnect` to `fonts.gstatic.com` and one stylesheet link marked `data-jo-ui-logo-fonts`. A second import does not add another link.
+Inter (including weight 800) and Caveat 600 ship in `@net-advantage/jo-ui-theme`. Import that stylesheet once:
 
-Do not request these faces with a CSS `@import` inside `logo.css`. A component stylesheet is often injected after other rules, and the browser then ignores the import. That is why the accent face could look wrong until another screen loaded the font first.
+```ts
+import '@net-advantage/jo-ui-theme/style.css';
+```
 
-The first paint may still use the fallback face until the font files arrive. `display=swap` replaces it with Caveat when the face is ready.
+The faces use `font-display: swap` and are licensed under the SIL Open Font License. The logo package does not add a Google Fonts `<link>` or CSS `@import`.
 
 ## Props
 

package/dist/MobileMark.d.ts

@@ -0,0 +1,3 @@
+import type { MobileMarkProps } from './logo.types';
+import './logo.css';
+export declare function MobileMark(props: MobileMarkProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=`https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap`,r={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function i(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function a(e){return e===void 0?null:{width:e}}function o(){if(typeof document>`u`||document.querySelector(`link[data-jo-ui-logo-fonts]`))return;let e=document.createElement(`link`);e.rel=`preconnect`,e.href=`https://fonts.gstatic.com`,e.crossOrigin=`anonymous`,document.head.appendChild(e);let t=document.createElement(`link`);t.rel=`stylesheet`,t.href=n,t.dataset.joUiLogoFonts=`true`,document.head.appendChild(t)}function s(e){let{className:n,primaryColor:s=r.primaryColor,accentColor:c=r.accentColor,width:l,curveWidth:u=r.curveWidth,curveHeight:d=r.curveHeight,rootProps:f}=e;return(0,t.useEffect)(()=>{o()},[]),(0,t.useMemo)(()=>({className:i(n),primaryColor:s,accentColor:c,curveWidth:u,curveHeight:d,widthStyle:a(l),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:f}),[c,n,d,u,s,f,l])}var c=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),l=e(((e,t)=>{t.exports=c()}))();function u(e){let t=s(e);return(0,l.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,l.jsxs)(`p`,{children:[(0,l.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,l.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,l.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,l.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,l.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,l.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}exports.Logo=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 77.0 50.4" role="img" aria-label="JourneyOf"><path fill="#14224a" fill-rule="evenodd" d="M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z"/><path fill="#6495ed" d="M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z"/><circle cx="47.4" cy="38.4" r="3.1" fill="#a9c0f2"/><circle cx="57.4" cy="36" r="4.3" fill="#6495ed"/><circle cx="70.4" cy="33" r="5.6" fill="#14224a"/></svg>`,r=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 77.0 50.4" role="img" aria-label="JourneyOf"><path fill="#ffffff" fill-rule="evenodd" d="M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z"/><path fill="#6495ed" d="M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z"/><circle cx="47.4" cy="38.4" r="3.1" fill="#3b5bab"/><circle cx="57.4" cy="36" r="4.3" fill="#6495ed"/><circle cx="70.4" cy="33" r="5.6" fill="#ffffff"/></svg>`;function i(e){return[`jo-ui-mobile-mark`,e??``].filter(Boolean).join(` `)}function a(e){return(e===`dark`?r:n).replace(`<svg `,`<svg width="43" height="28" `)}var o={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function s(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function c(e){return e===void 0?null:{width:e}}function l(e){let{className:n,primaryColor:r=o.primaryColor,accentColor:i=o.accentColor,width:a,curveWidth:l=o.curveWidth,curveHeight:u=o.curveHeight,rootProps:d}=e;return(0,t.useMemo)(()=>({className:s(n),primaryColor:r,accentColor:i,curveWidth:l,curveHeight:u,widthStyle:c(a),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:d}),[i,n,u,l,r,d,a])}function u(e){let n=e.theme===`dark`?`dark`:`light`;return(0,t.useMemo)(()=>({className:i(e.className),markup:a(n),rootProps:e.rootProps}),[e.className,e.rootProps,n])}var d=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),f=e(((e,t)=>{t.exports=d()}))();function p(e){let t=l(e);return(0,f.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,f.jsxs)(`p`,{children:[(0,f.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,f.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,f.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,f.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,f.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,f.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}function m(e){let t=u(e);return(0,f.jsx)(`span`,{...t.rootProps,className:t.className,dangerouslySetInnerHTML:{__html:t.markup}})}exports.Logo=p,exports.MobileMark=m;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { Logo } from './Logo';
-export type { LogoProps, LogoViewModel } from './logo.types';
+export { MobileMark } from './MobileMark';
+export type { LogoProps, LogoViewModel, MobileMarkProps, MobileMarkViewModel } from './logo.types';

package/dist/index.js

@@ -1,54 +1,64 @@
 import "./jo-ui-logo.css";
-import { useEffect as e, useMemo as t } from "react";
+import { useMemo as e } from "react";
 //#region \0rolldown/runtime.js
-var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), r = "https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap", i = {
+var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 3 77.0 50.4\" role=\"img\" aria-label=\"JourneyOf\"><path fill=\"#14224a\" fill-rule=\"evenodd\" d=\"M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z\"/><path fill=\"#6495ed\" d=\"M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z\"/><circle cx=\"47.4\" cy=\"38.4\" r=\"3.1\" fill=\"#a9c0f2\"/><circle cx=\"57.4\" cy=\"36\" r=\"4.3\" fill=\"#6495ed\"/><circle cx=\"70.4\" cy=\"33\" r=\"5.6\" fill=\"#14224a\"/></svg>", r = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 3 77.0 50.4\" role=\"img\" aria-label=\"JourneyOf\"><path fill=\"#ffffff\" fill-rule=\"evenodd\" d=\"M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z\"/><path fill=\"#6495ed\" d=\"M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z\"/><circle cx=\"47.4\" cy=\"38.4\" r=\"3.1\" fill=\"#3b5bab\"/><circle cx=\"57.4\" cy=\"36\" r=\"4.3\" fill=\"#6495ed\"/><circle cx=\"70.4\" cy=\"33\" r=\"5.6\" fill=\"#ffffff\"/></svg>";
+function i(e) {
+	return ["jo-ui-mobile-mark", e ?? ""].filter(Boolean).join(" ");
+}
+function a(e) {
+	return (e === "dark" ? r : n).replace("<svg ", "<svg width=\"43\" height=\"28\" ");
+}
+var o = {
 	primaryColor: "#14224a",
 	accentColor: "#6495ed",
 	curveWidth: 80,
 	curveHeight: 10
 };
-function a(e) {
+function s(e) {
 	return ["jo-ui-logo", e ?? ""].filter(Boolean).join(" ");
 }
-function o(e) {
+function c(e) {
 	return e === void 0 ? null : { width: e };
 }
 //#endregion
 //#region src/logo.view-model.ts
-function s() {
-	if (typeof document > "u" || document.querySelector("link[data-jo-ui-logo-fonts]")) return;
-	let e = document.createElement("link");
-	e.rel = "preconnect", e.href = "https://fonts.gstatic.com", e.crossOrigin = "anonymous", document.head.appendChild(e);
-	let t = document.createElement("link");
-	t.rel = "stylesheet", t.href = r, t.dataset.joUiLogoFonts = "true", document.head.appendChild(t);
-}
-function c(n) {
-	let { className: r, primaryColor: c = i.primaryColor, accentColor: l = i.accentColor, width: u, curveWidth: d = i.curveWidth, curveHeight: f = i.curveHeight, rootProps: p } = n;
-	return e(() => {
-		s();
-	}, []), t(() => ({
-		className: a(r),
-		primaryColor: c,
-		accentColor: l,
-		curveWidth: d,
-		curveHeight: f,
-		widthStyle: o(u),
+function l(t) {
+	let { className: n, primaryColor: r = o.primaryColor, accentColor: i = o.accentColor, width: a, curveWidth: l = o.curveWidth, curveHeight: u = o.curveHeight, rootProps: d } = t;
+	return e(() => ({
+		className: s(n),
+		primaryColor: r,
+		accentColor: i,
+		curveWidth: l,
+		curveHeight: u,
+		widthStyle: c(a),
 		mainFontFamily: "Inter, 'Segoe UI', system-ui, sans-serif",
 		accentFontFamily: "'Caveat', cursive",
-		rootProps: p
+		rootProps: d
 	}), [
+		i,
+		n,
+		u,
 		l,
 		r,
-		f,
 		d,
-		c,
-		p,
-		u
+		a
+	]);
+}
+function u(t) {
+	let n = t.theme === "dark" ? "dark" : "light";
+	return e(() => ({
+		className: i(t.className),
+		markup: a(n),
+		rootProps: t.rootProps
+	}), [
+		t.className,
+		t.rootProps,
+		n
 	]);
 }
 //#endregion
 //#region ../../node_modules/.pnpm/react@19.3.0/node_modules/react/cjs/react-jsx-runtime.production.js
-var l = /* @__PURE__ */ n(((e) => {
+var d = /* @__PURE__ */ t(((e) => {
 	var t = Symbol.for("react.transitional.element");
 	function n(e, n, r) {
 		var i = null;
@@ -63,17 +73,17 @@ var l = /* @__PURE__ */ n(((e) => {
 		};
 	}
 	e.jsx = n, e.jsxs = n;
-})), u = (/* @__PURE__ */ n(((e, t) => {
-	t.exports = l();
+})), f = (/* @__PURE__ */ t(((e, t) => {
+	t.exports = d();
 })))();
-function d(e) {
-	let t = c(e);
-	return /* @__PURE__ */ (0, u.jsxs)("div", {
+function p(e) {
+	let t = l(e);
+	return /* @__PURE__ */ (0, f.jsxs)("div", {
 		...t.rootProps,
 		className: t.className,
 		style: t.widthStyle ?? void 0,
 		"aria-label": "JourneyOf",
-		children: [/* @__PURE__ */ (0, u.jsxs)("p", { children: [/* @__PURE__ */ (0, u.jsx)("span", {
+		children: [/* @__PURE__ */ (0, f.jsxs)("p", { children: [/* @__PURE__ */ (0, f.jsx)("span", {
 			style: {
 				fontFamily: t.mainFontFamily,
 				fontWeight: 800,
@@ -81,7 +91,7 @@ function d(e) {
 				color: t.primaryColor
 			},
 			children: "journey"
-		}), /* @__PURE__ */ (0, u.jsx)("span", {
+		}), /* @__PURE__ */ (0, f.jsx)("span", {
 			style: {
 				fontFamily: t.accentFontFamily,
 				fontWeight: 600,
@@ -89,14 +99,14 @@ function d(e) {
 				color: t.accentColor
 			},
 			children: "of.."
-		})] }), /* @__PURE__ */ (0, u.jsxs)("svg", {
+		})] }), /* @__PURE__ */ (0, f.jsxs)("svg", {
 			width: t.curveWidth,
 			height: t.curveHeight,
 			viewBox: "0 0 100 15",
 			"aria-hidden": "true",
 			focusable: "false",
 			children: [
-				/* @__PURE__ */ (0, u.jsx)("path", {
+				/* @__PURE__ */ (0, f.jsx)("path", {
 					d: "M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3",
 					fill: "none",
 					stroke: t.accentColor,
@@ -105,13 +115,13 @@ function d(e) {
 					strokeDasharray: "0.2 6",
 					opacity: "0.9"
 				}),
-				/* @__PURE__ */ (0, u.jsx)("circle", {
+				/* @__PURE__ */ (0, f.jsx)("circle", {
 					cx: "2",
 					cy: "4",
 					r: "2.2",
 					fill: t.accentColor
 				}),
-				/* @__PURE__ */ (0, u.jsx)("circle", {
+				/* @__PURE__ */ (0, f.jsx)("circle", {
 					cx: "90",
 					cy: "3",
 					r: "2.2",
@@ -122,4 +132,14 @@ function d(e) {
 	});
 }
 //#endregion
-export { d as Logo };
+//#region src/MobileMark.tsx
+function m(e) {
+	let t = u(e);
+	return /* @__PURE__ */ (0, f.jsx)("span", {
+		...t.rootProps,
+		className: t.className,
+		dangerouslySetInnerHTML: { __html: t.markup }
+	});
+}
+//#endregion
+export { p as Logo, m as MobileMark };

package/dist/jo-ui-logo.css

@@ -1,2 +1,2 @@
-.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-logo{--jo-ui-logo-primary:#14224a;--jo-ui-logo-accent:#6495ed;--jo-ui-logo-font-main:"Inter","Segoe UI",system-ui,sans-serif;--jo-ui-logo-font-accent:"Caveat",cursive;display:inline-block}.jo-ui-logo p{margin:0;line-height:1}.jo-ui-logo svg{margin-top:.125rem;display:block}.visible{visibility:visible}.m-0{margin:0}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.font-extrabold{font-weight:800}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
+.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-logo{--jo-ui-logo-primary:#14224a;--jo-ui-logo-accent:#6495ed;--jo-ui-logo-font-main:"Inter","Segoe UI",system-ui,sans-serif;--jo-ui-logo-font-accent:"Caveat",cursive;display:inline-block}.jo-ui-logo p{margin:0;line-height:1}.jo-ui-logo svg{margin-top:.125rem;display:block}.jo-ui-mobile-mark{flex:none;width:43px;height:28px;display:inline-flex}.jo-ui-mobile-mark svg{width:43px;height:28px;display:block}.visible{visibility:visible}.m-0{margin:0}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.flex{display:flex}.font-extrabold{font-weight:800}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
 /*$vite$:1*/

package/dist/logo.model.d.ts

@@ -1,4 +1,7 @@
-export declare const LOGO_FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap";
+export declare const MOBILE_MARK_WIDTH = 43;
+export declare const MOBILE_MARK_HEIGHT = 28;
+export declare function mobileMarkClassName(className?: string): string;
+export declare function mobileMarkMarkup(theme: 'light' | 'dark'): string;
 export declare const LOGO_DEFAULTS: {
     readonly primaryColor: "#14224a";
     readonly accentColor: "#6495ed";

package/dist/logo.types.d.ts

@@ -8,6 +8,16 @@ export interface LogoProps {
     readonly curveHeight?: number;
     readonly rootProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 }
+export interface MobileMarkProps {
+    readonly theme?: 'light' | 'dark';
+    readonly className?: string;
+    readonly rootProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'dangerouslySetInnerHTML'>;
+}
+export interface MobileMarkViewModel {
+    readonly className: string;
+    readonly markup: string;
+    readonly rootProps?: MobileMarkProps['rootProps'];
+}
 export interface LogoViewModel {
     readonly className: string;
     readonly primaryColor: string;

package/dist/logo.view-model.d.ts

@@ -1,2 +1,3 @@
-import type { LogoProps, LogoViewModel } from './logo.types';
+import type { LogoProps, LogoViewModel, MobileMarkProps, MobileMarkViewModel } from './logo.types';
 export declare function useLogoViewModel(props: LogoProps): LogoViewModel;
+export declare function useMobileMarkViewModel(props: MobileMarkProps): MobileMarkViewModel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net-advantage/jo-ui-logo",
-  "version": "1.1.7",
+  "version": "1.3.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",