tenara-ui-components 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -32
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/themes/core/context.d.ts +9 -7
- package/dist/themes/index.d.ts +0 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Tenara UI Components
|
|
2
2
|
|
|
3
|
-
A React component library built with atomic design principles
|
|
3
|
+
A React component library with built-in theming system for multi-tenant applications. Built with atomic design principles and optimized for separate tenant deployments.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,66 +8,101 @@ A React component library built with atomic design principles, featuring reusabl
|
|
|
8
8
|
npm install tenara-ui-components
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Quick Start
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
import { Button, Header } from 'tenara-ui-components';
|
|
13
|
+
### 1. Wrap Your App with ThemeProvider
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
```tsx
|
|
16
|
+
// app/layout.tsx (Next.js 13+) or _app.tsx
|
|
17
|
+
import { ThemeProvider, advisorsPlusTheme } from 'tenara-ui-components';
|
|
18
|
+
|
|
19
|
+
export default function RootLayout({ children }) {
|
|
20
|
+
return (
|
|
21
|
+
<html>
|
|
22
|
+
<body>
|
|
23
|
+
<ThemeProvider initialTheme={advisorsPlusTheme} initialThemeName="theme-name-here">
|
|
24
|
+
{children}
|
|
25
|
+
</ThemeProvider>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Use Components
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button, Card, Header } from 'tenara-ui-components';
|
|
36
|
+
|
|
37
|
+
function HomePage() {
|
|
17
38
|
return (
|
|
18
39
|
<div>
|
|
19
40
|
<Header
|
|
20
41
|
onLogin={() => console.log('Login')}
|
|
21
42
|
onCreateAccount={() => console.log('Sign up')}
|
|
22
43
|
/>
|
|
23
|
-
<
|
|
44
|
+
<Card>
|
|
45
|
+
<h2>Welcome</h2>
|
|
46
|
+
<Button buttonType="general" label="Get Started" />
|
|
47
|
+
<Button buttonType="cta" label="Learn More" />
|
|
48
|
+
</Card>
|
|
24
49
|
</div>
|
|
25
50
|
);
|
|
26
51
|
}
|
|
27
52
|
```
|
|
28
53
|
|
|
54
|
+
## Available Themes
|
|
55
|
+
|
|
56
|
+
### Default Theme (Velera)
|
|
57
|
+
```tsx
|
|
58
|
+
import { ThemeProvider, defaultTheme } from 'tenara-ui-components';
|
|
59
|
+
|
|
60
|
+
<ThemeProvider initialTheme={defaultTheme} initialThemeName="default">
|
|
61
|
+
<App />
|
|
62
|
+
</ThemeProvider>
|
|
63
|
+
```
|
|
64
|
+
- **Colors:** Cobalt Blue & Gold
|
|
65
|
+
- **Style:** Professional, modern
|
|
66
|
+
|
|
67
|
+
|
|
29
68
|
## Components
|
|
30
69
|
|
|
31
70
|
### Atoms
|
|
32
|
-
- **Button** -
|
|
71
|
+
- **Button** - Multi-variant button component
|
|
72
|
+
- **TextLink** - Styled link component
|
|
73
|
+
- **Heading** - Typography component
|
|
74
|
+
- **BackgroundMedia** - Media background component
|
|
33
75
|
|
|
34
76
|
### Molecules
|
|
35
|
-
- **Header** - Navigation header with
|
|
77
|
+
- **Header** - Navigation header with authentication
|
|
78
|
+
- **Card** - Content card with flexible styling
|
|
79
|
+
- **CTA** - Call-to-action component
|
|
36
80
|
|
|
37
81
|
### Pages
|
|
38
|
-
- **Page** - Complete page layout
|
|
82
|
+
- **Page** - Complete page layout template
|
|
39
83
|
|
|
40
|
-
##
|
|
84
|
+
## Architecture
|
|
41
85
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
### Run development server
|
|
48
|
-
```bash
|
|
49
|
-
npm run dev
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Run Storybook
|
|
53
|
-
```bash
|
|
54
|
-
npm run storybook
|
|
55
|
-
```
|
|
86
|
+
Each site gets:
|
|
87
|
+
- ✅ Automatic brand colors
|
|
88
|
+
- ✅ Consistent component styling
|
|
89
|
+
- ✅ Zero configuration beyond theme selection
|
|
90
|
+
- ✅ Full TypeScript support
|
|
56
91
|
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
npm run build:lib
|
|
60
|
-
```
|
|
92
|
+
## Features
|
|
61
93
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
94
|
+
- 🎨 **Built-in Theming** - Multiple brand themes included
|
|
95
|
+
- 🏗️ **Atomic Design** - Scalable component architecture
|
|
96
|
+
- 📱 **Responsive** - Mobile-first design approach
|
|
97
|
+
- ♿ **Accessible** - WCAG compliant components
|
|
98
|
+
- 🔧 **TypeScript** - Full type safety
|
|
99
|
+
- 📚 **Storybook** - Interactive component documentation
|
|
66
100
|
|
|
67
101
|
## Built With
|
|
68
102
|
|
|
69
103
|
- React 19
|
|
70
104
|
- Next.js 15
|
|
71
105
|
- TypeScript
|
|
106
|
+
- SCSS
|
|
72
107
|
- Storybook
|
|
73
108
|
- Rollup
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{createContext as r,
|
|
1
|
+
import e,{createContext as r,useEffect as o,useContext as n}from"react";function t(e,r){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(n=Object.getOwnPropertySymbols(e);t<n.length;t++)r.indexOf(n[t])<0&&Object.prototype.propertyIsEnumerable.call(e,n[t])&&(o[n[t]]=e[n[t]])}return o}"function"==typeof SuppressedError&&SuppressedError;var a,c={exports:{}},s={};var l,i,d={};
|
|
2
2
|
/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.development.js
|
|
@@ -7,5 +7,5 @@ import e,{createContext as r,useState as o,useEffect as t,useContext as n}from"r
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/function p(){return l||(l=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===_?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case f:return"Fragment";case g:return"Profiler";case h:return"StrictMode";case x:return"Suspense";case k:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case b:return"Portal";case y:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case v:var o=e.render;return(e=e.displayName)||(e=""!==(e=o.displayName||o.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(o=e.displayName||null)?o:r(e.type)||"Memo";case $:o=e._payload,e=e._init;try{return r(e(o))}catch(e){}}return null}function o(e){return""+e}function t(e){try{o(e);var r=!1}catch(e){r=!0}if(r){var t=(r=console).error,n="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),o(e)}}function n(e){if(e===f)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===$)return"<...>";try{var o=r(e);return o?"<"+o+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function s(){var e=r(this.type);return T[e]||(T[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function c(e,o,n,a,c,d,u,b){var f,h=o.children;if(void 0!==h)if(a)if(H(h)){for(a=0;a<h.length;a++)i(h[a]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else i(h);if(S.call(o,"key")){h=r(e);var g=Object.keys(o).filter(function(e){return"key"!==e});a=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",C[h+a]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,h,g,h),C[h+a]=!0)}if(h=null,void 0!==n&&(t(n),h=""+n),function(e){if(S.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(o)&&(t(o.key),h=""+o.key),"key"in o)for(var m in n={},o)"key"!==m&&(n[m]=o[m]);else n=o;return h&&function(e,r){function o(){l||(l=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}(n,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,o,t,n,a,c,i){return o=a.ref,e={$$typeof:p,type:e,key:r,props:a,_owner:n},null!==(void 0!==o?o:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:s}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,h,d,0,null===(f=N.A)?null:f.getOwner(),n,u,b)}function i(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var l,d=e,p=Symbol.for("react.transitional.element"),b=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),y=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),$=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),N=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,S=Object.prototype.hasOwnProperty,H=Array.isArray,O=console.createTask?console.createTask:function(){return null},T={},A=(d={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(d,a)(),R=O(n(a)),C={};u.Fragment=f,u.jsx=function(e,r,o,t,a){var s=1e4>N.recentlyCreatedOwnerStacks++;return c(e,r,o,!1,0,a,s?Error("react-stack-top-frame"):A,s?O(n(e)):R)},u.jsxs=function(e,r,o,t,a){var s=1e4>N.recentlyCreatedOwnerStacks++;return c(e,r,o,!0,0,a,s?Error("react-stack-top-frame"):A,s?O(n(e)):R)}}()),u}var b=(d||(d=1,"production"===process.env.NODE_ENV?c.exports=function(){if(s)return i;s=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(r,o,t){var n=null;if(void 0!==t&&(n=""+t),void 0!==o.key&&(n=""+o.key),"key"in o)for(var a in t={},o)"key"!==a&&(t[a]=o[a]);else t=o;return o=t.ref,{$$typeof:e,type:r,key:n,ref:void 0!==o?o:null,props:t}}return i.Fragment=r,i.jsx=o,i.jsxs=o,i}():c.exports=p()),c.exports);const f=e=>{var{buttonType:r="general",label:o,icon:t,className:n,children:s,style:c,disabled:i=!1,onClick:l}=e,d=a(e,["buttonType","label","icon","className","children","style","disabled","onClick"]);const u=`button button--${r} ${n||""}`;return b.jsxs("button",Object.assign({type:"button",className:u,style:c,onClick:l,disabled:i},d,{children:[s||o," ",t&&b.jsx("span",{className:"icon",children:t})]}))},h=e=>{var{buttonType:r="general",label:o,icon:t,href:n,target:s="_self",className:c,children:i,style:l}=e,d=a(e,["buttonType","label","icon","href","target","className","children","style"]);const u=`button button--${r} ${c||""}`,p="_blank"===s?"noopener noreferrer":void 0;return b.jsxs("a",Object.assign({href:n,target:s,rel:p,className:u,style:l},d,{children:[i||o," ",t&&b.jsx("span",{className:"icon",children:t})]}))},g=({label:e,href:r,externalLink:o,target:t="_self",onClick:n,className:a="",icon:s,style:c,disabled:i=!1,"aria-label":l,"aria-describedby":d,"data-testid":u})=>{const p=o||r,f=!!o||"_blank"===t;return!p||i?b.jsxs("span",{className:`text-link text-link--disabled ${a}`,style:c,"data-testid":u,"aria-label":l||e,"aria-describedby":d,children:[e," ",s]}):b.jsxs("a",{href:p,target:t,rel:f?"noopener noreferrer":void 0,onClick:e=>{i?e.preventDefault():n&&n(e)},onKeyDown:e=>{!i||"Enter"!==e.key&&" "!==e.key||e.preventDefault()},className:`text-link ${a}`,style:c,"aria-label":l,"aria-describedby":d,"data-testid":u,children:[e," ",s]})},m=({videoUrl:e,imageUrl:r,gradient:o,bgColor:t,className:n,style:a})=>{const s=["background-media",n].filter(Boolean).join(" ");if(e)return b.jsxs("video",{className:`${s} background-media--video`,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,style:a,children:[b.jsx("source",{src:e,type:"video/mp4"}),"Your browser does not support video."]});const c=Object.assign({backgroundImage:o?`${o}, url(${r})`:r?`url(${r})`:void 0,backgroundColor:t},a);return b.jsx("div",{className:s,style:c})},y=({level:e="h2",children:r,className:o,style:t})=>{const n=e,a=["heading",o].filter(Boolean).join(" ");return b.jsx(n,{className:a,style:t,children:r})},v=({user:e,onLogin:r,onLogout:o,onCreateAccount:t})=>b.jsx("header",{children:b.jsxs("div",{className:"storybook-header",children:[b.jsxs("div",{children:[b.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:b.jsxs("g",{fill:"none",fillRule:"evenodd",children:[b.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),b.jsx("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),b.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),b.jsx("h1",{children:"Acme"})]}),b.jsx("div",{children:e?b.jsxs(b.Fragment,{children:[b.jsxs("span",{className:"welcome",children:["Welcome, ",b.jsx("b",{children:e.name}),"!"]}),b.jsx(f,{buttonType:"secondary",onClick:o,label:"Log out"})]}):b.jsxs(b.Fragment,{children:[b.jsx(f,{buttonType:"secondary",onClick:r,label:"Log in"}),b.jsx(f,{buttonType:"cta",onClick:t,label:"Sign up"})]})})]})}),x=({children:e,maxWidth:r="340px",padding:o="30px",onClick:t,href:n,target:a="_self",imageUrl:s,imageAlt:c="",className:i="",style:l,aspectRatio:d="3/2",borderRadius:u="20px",hoverEffect:p=!0,"aria-label":f,"data-testid":h})=>{const g=e=>{"Enter"!==e.key&&" "!==e.key||!t||(e.preventDefault(),t(e))},m=e=>{t&&t(e)},y=Object.assign({maxWidth:r},l),v={borderRadius:u},x={aspectRatio:d,borderRadius:`${u} ${u} 0 0`},k={padding:o},j=["card",p&&"card--hover-effect",i].filter(Boolean).join(" "),$=b.jsxs("div",{className:j,style:v,"data-testid":h,children:[s&&b.jsx("div",{className:"card__image-wrapper",style:x,children:b.jsx("div",{className:"card__image-container",children:b.jsx("img",{src:s,alt:c,className:"card__image",loading:"lazy"})})}),b.jsx("div",{className:"card__body",style:k,children:e})]});return n?b.jsx("div",{className:"card-wrapper",style:y,children:b.jsx("a",{href:n,target:a,rel:"_blank"===a?"noopener noreferrer":void 0,onClick:m,className:"card__link",style:{borderRadius:u},"aria-label":f,children:$})}):t?b.jsx("div",{className:"card-wrapper",style:y,children:b.jsxs("div",{className:j,style:v,onClick:t,onKeyDown:g,role:"button",tabIndex:0,"aria-label":f,"data-testid":h,children:[s&&b.jsx("div",{className:"card__image-wrapper",style:x,children:b.jsx("div",{className:"card__image-container",children:b.jsx("img",{src:s,alt:c,className:"card__image",loading:"lazy"})})}),b.jsx("div",{className:"card__body",style:k,children:e})]})}):b.jsx("div",{className:"card-wrapper",style:y,children:$})},k=({videoUrl:e,imageUrl:r,gradient:o,bgColor:t,title:n,headingLevel:a="h2",description:s,buttonText:c,link:i,externalLink:l,target:d="_self",className:u,style:p})=>{const g=["cta",u].filter(Boolean).join(" ");return b.jsxs("div",{className:g,style:p,children:[b.jsx(m,{videoUrl:e,imageUrl:r,gradient:o,bgColor:t}),b.jsxs("div",{className:"cta__content",children:[b.jsx(y,{level:a,className:"cta__title",children:n}),s&&b.jsx("p",{className:"cta__description",children:s}),i?b.jsx(h,{buttonType:"cta",label:c,href:i,target:l?d:"_self"}):b.jsx(f,{buttonType:"cta",label:c,onClick:()=>{}})]})]})},j=()=>{const[r,o]=e.useState();return b.jsxs("article",{children:[b.jsx(v,{user:r,onLogin:()=>o({name:"Jane Doe"}),onLogout:()=>o(void 0),onCreateAccount:()=>o({name:"Jane Doe"})}),b.jsxs("section",{className:"storybook-page",children:[b.jsx("h2",{children:"Pages in Storybook"}),b.jsxs("p",{children:["We recommend building UIs with a"," ",b.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:b.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]})]})]})},$={name:"default",colors:{primary:"#2e6bf0",primaryHover:"#1e40af",primaryActive:"#1e3a8a",secondary:"#efe63f",secondaryHover:"#eab308",secondaryActive:"#ca8a04",text:"#1f2937",textInverse:"#ffffff",background:"#ffffff",border:"#e5e5e5",success:"#10b981",warning:"#efe63f",error:"#ef4444"},spacing:{xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px",xxl:"48px"},borderRadius:{sm:"4px",md:"8px",lg:"16px",xl:"24px"},shadows:{sm:"0 2px 4px rgba(0, 0, 0, 0.1)",md:"0 4px 8px rgba(0, 0, 0, 0.15)",lg:"0 8px 16px rgba(0, 0, 0, 0.2)",xl:"0 16px 32px rgba(0, 0, 0, 0.25)"},typography:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontFamilyHeading:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSizeXs:"12px",fontSizeSm:"14px",fontSizeMd:"16px",fontSizeLg:"18px",fontSizeXl:"24px",fontWeightNormal:"400",fontWeightMedium:"500",fontWeightBold:"700",lineHeightTight:"1.25",lineHeightNormal:"1.5",lineHeightRelaxed:"1.75"},buttons:{borderRadius:"8px",padding:"12px 24px",fontSize:"16px",fontWeight:"500",general:{background:"#2e6bf0",backgroundHover:"#1e40af",backgroundActive:"#1e3a8a",color:"#ffffff",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#1e40af",shadow:"0 2px 4px rgba(46, 107, 240, 0.2)"},cta:{background:"#efe63f",backgroundHover:"#eab308",backgroundActive:"#ca8a04",color:"#1f2937",colorHover:"#1f2937",border:"#efe63f",borderHover:"#eab308",shadow:"0 4px 8px rgba(239, 230, 63, 0.3)"},secondary:{background:"transparent",backgroundHover:"#2e6bf0",backgroundActive:"#1e40af",color:"#2e6bf0",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#2e6bf0",shadow:"none"},outline:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"#e5e5e5",borderHover:"#d1d5db",shadow:"none"},ghost:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"transparent",borderHover:"transparent",shadow:"none"}},components:{card:{background:"#ffffff",border:"1px solid #e5e5e5",borderRadius:"8px",shadow:"0 2px 4px rgba(0, 0, 0, 0.1)",padding:"24px"},header:{background:"#ffffff",borderBottom:"1px solid #e5e5e5",height:"64px",padding:"0 24px"},cta:{background:"#1e40af",borderRadius:"16px",padding:"32px"}}};var w=Object.freeze({__proto__:null,defaultTheme:$});const _=Object.assign(Object.assign({},$),{name:"advisors-plus",colors:Object.assign(Object.assign({},$.colors),{primary:"#1e2a78",primaryHover:"#151f5c",primaryActive:"#0f1640",secondary:"#4f46e5",secondaryHover:"#4338ca",secondaryActive:"#3730a3",text:"#1f2937",background:"#f8fafc"}),buttons:Object.assign(Object.assign({},$.buttons),{borderRadius:"8px",general:{background:"#1e2a78",backgroundHover:"#151f5c",backgroundActive:"#0f1640",color:"#ffffff",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#151f5c",shadow:"0 2px 6px rgba(30, 42, 120, 0.25)"},cta:{background:"#4f46e5",backgroundHover:"#4338ca",backgroundActive:"#3730a3",color:"#ffffff",colorHover:"#ffffff",border:"#4f46e5",borderHover:"#4338ca",shadow:"0 3px 6px rgba(79, 70, 229, 0.3)"},secondary:{background:"transparent",backgroundHover:"#1e2a78",backgroundActive:"#151f5c",color:"#1e2a78",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#1e2a78",shadow:"none"}}),components:Object.assign(Object.assign({},$.components),{cta:{background:"#1e2a78",borderRadius:"16px",padding:"32px"}})});var N=Object.freeze({__proto__:null,advisorsPlusTheme:_});const S=Object.assign(Object.assign({},$),{name:"primax",colors:Object.assign(Object.assign({},$.colors),{primary:"#0066cc",primaryHover:"#0052a3",primaryActive:"#003d7a",secondary:"#ff6600",secondaryHover:"#e55a00",secondaryActive:"#cc4f00"}),buttons:Object.assign(Object.assign({},$.buttons),{borderRadius:"8px",general:{background:"#0066cc",backgroundHover:"#0052a3",backgroundActive:"#003d7a",color:"#ffffff",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0052a3",shadow:"0 2px 4px rgba(0, 102, 204, 0.2)"},cta:{background:"#ff6600",backgroundHover:"#e55a00",backgroundActive:"#cc4f00",color:"#ffffff",colorHover:"#ffffff",border:"#ff6600",borderHover:"#e55a00",shadow:"0 4px 8px rgba(255, 102, 0, 0.3)"},secondary:{background:"transparent",backgroundHover:"#0066cc",backgroundActive:"#0052a3",color:"#0066cc",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0066cc",shadow:"none"}}),components:Object.assign(Object.assign({},$.components),{cta:{background:"#003d7a",borderRadius:"0px 0px 50px 50px",padding:"54px 60px 0px 30px"}})});var H=Object.freeze({__proto__:null,primaxTheme:S});function O(e,r=":root"){const o=[];return o.push(" /* Colors */"),o.push(` --primary-color: ${e.colors.primary};`),o.push(` --primary-color-hover: ${e.colors.primaryHover};`),o.push(` --primary-color-active: ${e.colors.primaryActive};`),o.push(` --secondary-color: ${e.colors.secondary};`),o.push(` --secondary-color-hover: ${e.colors.secondaryHover};`),o.push(` --secondary-color-active: ${e.colors.secondaryActive};`),o.push(` --text-color: ${e.colors.text};`),o.push(` --text-color-inverse: ${e.colors.textInverse};`),o.push(` --background-color: ${e.colors.background};`),o.push(` --border-color: ${e.colors.border};`),o.push(` --success-color: ${e.colors.success};`),o.push(` --warning-color: ${e.colors.warning};`),o.push(` --error-color: ${e.colors.error};`),o.push("\n /* Spacing */"),o.push(` --spacing-xs: ${e.spacing.xs};`),o.push(` --spacing-sm: ${e.spacing.sm};`),o.push(` --spacing-md: ${e.spacing.md};`),o.push(` --spacing-lg: ${e.spacing.lg};`),o.push(` --spacing-xl: ${e.spacing.xl};`),o.push(` --spacing-xxl: ${e.spacing.xxl};`),o.push("\n /* Border Radius */"),o.push(` --border-radius-sm: ${e.borderRadius.sm};`),o.push(` --border-radius-md: ${e.borderRadius.md};`),o.push(` --border-radius-lg: ${e.borderRadius.lg};`),o.push(` --border-radius-xl: ${e.borderRadius.xl};`),o.push("\n /* Shadows */"),o.push(` --shadow-sm: ${e.shadows.sm};`),o.push(` --shadow-md: ${e.shadows.md};`),o.push(` --shadow-lg: ${e.shadows.lg};`),o.push(` --shadow-xl: ${e.shadows.xl};`),o.push("\n /* Typography */"),o.push(` --font-family: ${e.typography.fontFamily};`),o.push(` --font-family-heading: ${e.typography.fontFamilyHeading};`),o.push(` --font-size-xs: ${e.typography.fontSizeXs};`),o.push(` --font-size-sm: ${e.typography.fontSizeSm};`),o.push(` --font-size-md: ${e.typography.fontSizeMd};`),o.push(` --font-size-lg: ${e.typography.fontSizeLg};`),o.push(` --font-size-xl: ${e.typography.fontSizeXl};`),o.push(` --font-weight-normal: ${e.typography.fontWeightNormal};`),o.push(` --font-weight-medium: ${e.typography.fontWeightMedium};`),o.push(` --font-weight-bold: ${e.typography.fontWeightBold};`),o.push(` --line-height-tight: ${e.typography.lineHeightTight};`),o.push(` --line-height-normal: ${e.typography.lineHeightNormal};`),o.push(` --line-height-relaxed: ${e.typography.lineHeightRelaxed};`),o.push("\n /* Button Base */"),o.push(` --button-border-radius: ${e.buttons.borderRadius};`),o.push(` --button-padding: ${e.buttons.padding};`),o.push(` --button-font-size: ${e.buttons.fontSize};`),o.push(` --button-font-weight: ${e.buttons.fontWeight};`),o.push("\n /* Button - General */"),o.push(` --button-general-bg: ${e.buttons.general.background};`),o.push(` --button-general-bg-hover: ${e.buttons.general.backgroundHover};`),o.push(` --button-general-bg-active: ${e.buttons.general.backgroundActive};`),o.push(` --button-general-color: ${e.buttons.general.color};`),o.push(` --button-general-color-hover: ${e.buttons.general.colorHover};`),o.push(` --button-general-border: ${e.buttons.general.border};`),o.push(` --button-general-border-hover: ${e.buttons.general.borderHover};`),o.push(` --button-general-shadow: ${e.buttons.general.shadow};`),o.push("\n /* Button - CTA */"),o.push(` --button-cta-bg: ${e.buttons.cta.background};`),o.push(` --button-cta-bg-hover: ${e.buttons.cta.backgroundHover};`),o.push(` --button-cta-bg-active: ${e.buttons.cta.backgroundActive};`),o.push(` --button-cta-color: ${e.buttons.cta.color};`),o.push(` --button-cta-color-hover: ${e.buttons.cta.colorHover};`),o.push(` --button-cta-border: ${e.buttons.cta.border};`),o.push(` --button-cta-border-hover: ${e.buttons.cta.borderHover};`),o.push(` --button-cta-shadow: ${e.buttons.cta.shadow};`),o.push("\n /* Button - Secondary */"),o.push(` --button-secondary-bg: ${e.buttons.secondary.background};`),o.push(` --button-secondary-bg-hover: ${e.buttons.secondary.backgroundHover};`),o.push(` --button-secondary-bg-active: ${e.buttons.secondary.backgroundActive};`),o.push(` --button-secondary-color: ${e.buttons.secondary.color};`),o.push(` --button-secondary-color-hover: ${e.buttons.secondary.colorHover};`),o.push(` --button-secondary-border: ${e.buttons.secondary.border};`),o.push(` --button-secondary-border-hover: ${e.buttons.secondary.borderHover};`),o.push(` --button-secondary-shadow: ${e.buttons.secondary.shadow};`),o.push("\n /* Card Component */"),o.push(` --card-background: ${e.components.card.background};`),o.push(` --card-border: ${e.components.card.border};`),o.push(` --card-border-radius: ${e.components.card.borderRadius};`),o.push(` --card-shadow: ${e.components.card.shadow};`),o.push(` --card-padding: ${e.components.card.padding};`),o.push("\n /* Header Component */"),o.push(` --header-background: ${e.components.header.background};`),o.push(` --header-border-bottom: ${e.components.header.borderBottom};`),o.push(` --header-height: ${e.components.header.height};`),o.push(` --header-padding: ${e.components.header.padding};`),o.push("\n /* CTA Component */"),o.push(` --content-container-bg: ${e.components.cta.background};`),o.push(` --content-container-border-radius: ${e.components.cta.borderRadius};`),o.push(` --content-container-padding: ${e.components.cta.padding};`),`${r} {\n${o.join("\n")}\n}`}function T(e,r){const o=O(e,r?`[data-theme="${r}"]`:":root"),t=document.getElementById(`theme-${e.name}`);t&&t.remove();const n=document.createElement("style");n.id=`theme-${e.name}`,n.textContent=o,document.head.appendChild(n)}function A(e){document.documentElement.setAttribute("data-theme",e)}const R=r(void 0);function C({children:e,initialTheme:r=$,initialThemeName:n="default",themes:a={default:$}}){const[s,c]=o(r),[i,l]=o(n),[d,u]=o(a),p=(e,r="custom")=>{c(e),l(r),T(e,r),A(r)};t(()=>{T(s,i),A(i)},[]);const f={currentTheme:s,themeName:i,setTheme:p,switchTheme:e=>{const r=d[e];r?p(r,e):console.warn(`Theme "${e}" not found`)},registerTheme:(e,r)=>{u(o=>Object.assign(Object.assign({},o),{[e]:r}))},availableThemes:d};return b.jsx(R.Provider,{value:f,children:e})}function z(){const e=n(R);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e}const E={default:()=>Promise.resolve().then(function(){return w}).then(e=>e.defaultTheme),"advisors-plus":()=>Promise.resolve().then(function(){return N}).then(e=>e.advisorsPlusTheme),primax:()=>Promise.resolve().then(function(){return H}).then(e=>e.primaxTheme)};async function P(e){const r=E[e];if(!r)throw new Error(`Theme "${e}" not found`);return await r()}export{m as BackgroundMedia,f as Button,h as ButtonLink,k as CTA,x as Card,v as Header,y as Heading,j as Page,g as TextLink,C as ThemeProvider,_ as advisorsPlusTheme,T as applyTheme,$ as defaultTheme,O as generateThemeCSS,P as loadTheme,S as primaxTheme,A as setThemeAttribute,E as themes,z as useTheme};
|
|
10
|
+
*/function b(){return l||(l=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===_?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case h:return"Suspense";case k:return"SuspenseList";case N:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return"Portal";case v:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case x:var o=e.render;return(e=e.displayName)||(e=""!==(e=o.displayName||o.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(o=e.displayName||null)?o:r(e.type)||"Memo";case w:o=e._payload,e=e._init;try{return r(e(o))}catch(e){}}return null}function o(e){return""+e}function n(e){try{o(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),o(e)}}function t(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===w)return"<...>";try{var o=r(e);return o?"<"+o+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function c(){var e=r(this.type);return A[e]||(A[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function s(e,o,t,a,s,d,b,u){var p,g=o.children;if(void 0!==g)if(a)if(S(g)){for(a=0;a<g.length;a++)l(g[a]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else l(g);if(O.call(o,"key")){g=r(e);var y=Object.keys(o).filter(function(e){return"key"!==e});a=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",C[g+a]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,g,y,g),C[g+a]=!0)}if(g=null,void 0!==t&&(n(t),g=""+t),function(e){if(O.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(o)&&(n(o.key),g=""+o.key),"key"in o)for(var m in t={},o)"key"!==m&&(t[m]=o[m]);else t=o;return g&&function(e,r){function o(){i||(i=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,o,n,t,a,s,l){return o=a.ref,e={$$typeof:f,type:e,key:r,props:a,_owner:t},null!==(void 0!==o?o:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:c}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,g,d,0,null===(p=$.A)?null:p.getOwner(),t,b,u)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var i,b=e,f=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),v=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),$=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,S=Array.isArray,H=console.createTask?console.createTask:function(){return null},A={},R=(b={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(b,a)(),T=H(t(a)),C={};d.Fragment=p,d.jsx=function(e,r,o,n,a){var c=1e4>$.recentlyCreatedOwnerStacks++;return s(e,r,o,!1,0,a,c?Error("react-stack-top-frame"):R,c?H(t(e)):T)},d.jsxs=function(e,r,o,n,a){var c=1e4>$.recentlyCreatedOwnerStacks++;return s(e,r,o,!0,0,a,c?Error("react-stack-top-frame"):R,c?H(t(e)):T)}}()),d}var f=(i||(i=1,"production"===process.env.NODE_ENV?c.exports=function(){if(a)return s;a=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(r,o,n){var t=null;if(void 0!==n&&(t=""+n),void 0!==o.key&&(t=""+o.key),"key"in o)for(var a in n={},o)"key"!==a&&(n[a]=o[a]);else n=o;return o=n.ref,{$$typeof:e,type:r,key:t,ref:void 0!==o?o:null,props:n}}return s.Fragment=r,s.jsx=o,s.jsxs=o,s}():c.exports=b()),c.exports);const u=e=>{var{buttonType:r="general",label:o,icon:n,className:a,children:c,style:s,disabled:l=!1,onClick:i}=e,d=t(e,["buttonType","label","icon","className","children","style","disabled","onClick"]);const b=`button button--${r} ${a||""}`;return f.jsxs("button",Object.assign({type:"button",className:b,style:s,onClick:i,disabled:l},d,{children:[c||o," ",n&&f.jsx("span",{className:"icon",children:n})]}))},p=e=>{var{buttonType:r="general",label:o,icon:n,href:a,target:c="_self",className:s,children:l,style:i}=e,d=t(e,["buttonType","label","icon","href","target","className","children","style"]);const b=`button button--${r} ${s||""}`,u="_blank"===c?"noopener noreferrer":void 0;return f.jsxs("a",Object.assign({href:a,target:c,rel:u,className:b,style:i},d,{children:[l||o," ",n&&f.jsx("span",{className:"icon",children:n})]}))},g=({label:e,href:r,externalLink:o,target:n="_self",onClick:t,className:a="",icon:c,style:s,disabled:l=!1,"aria-label":i,"aria-describedby":d,"data-testid":b})=>{const u=o||r,p=!!o||"_blank"===n;return!u||l?f.jsxs("span",{className:`text-link text-link--disabled ${a}`,style:s,"data-testid":b,"aria-label":i||e,"aria-describedby":d,children:[e," ",c]}):f.jsxs("a",{href:u,target:n,rel:p?"noopener noreferrer":void 0,onClick:e=>{l?e.preventDefault():t&&t(e)},onKeyDown:e=>{!l||"Enter"!==e.key&&" "!==e.key||e.preventDefault()},className:`text-link ${a}`,style:s,"aria-label":i,"aria-describedby":d,"data-testid":b,children:[e," ",c]})},y=({videoUrl:e,imageUrl:r,gradient:o,bgColor:n,className:t,style:a})=>{const c=["background-media",t].filter(Boolean).join(" ");if(e)return f.jsxs("video",{className:`${c} background-media--video`,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,style:a,children:[f.jsx("source",{src:e,type:"video/mp4"}),"Your browser does not support video."]});const s=Object.assign({backgroundImage:o?`${o}, url(${r})`:r?`url(${r})`:void 0,backgroundColor:n},a);return f.jsx("div",{className:c,style:s})},m=({level:e="h2",children:r,className:o,style:n})=>{const t=e,a=["heading",o].filter(Boolean).join(" ");return f.jsx(t,{className:a,style:n,children:r})},v=({user:e,onLogin:r,onLogout:o,onCreateAccount:n})=>f.jsx("header",{children:f.jsxs("div",{className:"storybook-header",children:[f.jsxs("div",{children:[f.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:f.jsxs("g",{fill:"none",fillRule:"evenodd",children:[f.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),f.jsx("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),f.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),f.jsx("h1",{children:"Acme"})]}),f.jsx("div",{children:e?f.jsxs(f.Fragment,{children:[f.jsxs("span",{className:"welcome",children:["Welcome, ",f.jsx("b",{children:e.name}),"!"]}),f.jsx(u,{buttonType:"secondary",onClick:o,label:"Log out"})]}):f.jsxs(f.Fragment,{children:[f.jsx(u,{buttonType:"secondary",onClick:r,label:"Log in"}),f.jsx(u,{buttonType:"cta",onClick:n,label:"Sign up"})]})})]})}),x=({children:e,maxWidth:r="340px",padding:o="30px",onClick:n,href:t,target:a="_self",imageUrl:c,imageAlt:s="",className:l="",style:i,aspectRatio:d="3/2",borderRadius:b="20px",hoverEffect:u=!0,"aria-label":p,"data-testid":g})=>{const y=e=>{"Enter"!==e.key&&" "!==e.key||!n||(e.preventDefault(),n(e))},m=e=>{n&&n(e)},v=Object.assign({maxWidth:r},i),x={borderRadius:b},h={aspectRatio:d,borderRadius:`${b} ${b} 0 0`},k={padding:o},j=["card",u&&"card--hover-effect",l].filter(Boolean).join(" "),w=f.jsxs("div",{className:j,style:x,"data-testid":g,children:[c&&f.jsx("div",{className:"card__image-wrapper",style:h,children:f.jsx("div",{className:"card__image-container",children:f.jsx("img",{src:c,alt:s,className:"card__image",loading:"lazy"})})}),f.jsx("div",{className:"card__body",style:k,children:e})]});return t?f.jsx("div",{className:"card-wrapper",style:v,children:f.jsx("a",{href:t,target:a,rel:"_blank"===a?"noopener noreferrer":void 0,onClick:m,className:"card__link",style:{borderRadius:b},"aria-label":p,children:w})}):n?f.jsx("div",{className:"card-wrapper",style:v,children:f.jsxs("div",{className:j,style:x,onClick:n,onKeyDown:y,role:"button",tabIndex:0,"aria-label":p,"data-testid":g,children:[c&&f.jsx("div",{className:"card__image-wrapper",style:h,children:f.jsx("div",{className:"card__image-container",children:f.jsx("img",{src:c,alt:s,className:"card__image",loading:"lazy"})})}),f.jsx("div",{className:"card__body",style:k,children:e})]})}):f.jsx("div",{className:"card-wrapper",style:v,children:w})},h=({videoUrl:e,imageUrl:r,gradient:o,bgColor:n,title:t,headingLevel:a="h2",description:c,buttonText:s,link:l,externalLink:i,target:d="_self",className:b,style:g})=>{const v=["cta",b].filter(Boolean).join(" ");return f.jsxs("div",{className:v,style:g,children:[f.jsx(y,{videoUrl:e,imageUrl:r,gradient:o,bgColor:n}),f.jsxs("div",{className:"cta__content",children:[f.jsx(m,{level:a,className:"cta__title",children:t}),c&&f.jsx("p",{className:"cta__description",children:c}),l?f.jsx(p,{buttonType:"cta",label:s,href:l,target:i?d:"_self"}):f.jsx(u,{buttonType:"cta",label:s,onClick:()=>{}})]})]})},k=()=>{const[r,o]=e.useState();return f.jsxs("article",{children:[f.jsx(v,{user:r,onLogin:()=>o({name:"Jane Doe"}),onLogout:()=>o(void 0),onCreateAccount:()=>o({name:"Jane Doe"})}),f.jsxs("section",{className:"storybook-page",children:[f.jsx("h2",{children:"Pages in Storybook"}),f.jsxs("p",{children:["We recommend building UIs with a"," ",f.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:f.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]})]})]})},j={name:"default",colors:{primary:"#2e6bf0",primaryHover:"#1e40af",primaryActive:"#1e3a8a",secondary:"#efe63f",secondaryHover:"#eab308",secondaryActive:"#ca8a04",text:"#1f2937",textInverse:"#ffffff",background:"#ffffff",border:"#e5e5e5",success:"#10b981",warning:"#efe63f",error:"#ef4444"},spacing:{xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px",xxl:"48px"},borderRadius:{sm:"4px",md:"8px",lg:"16px",xl:"24px"},shadows:{sm:"0 2px 4px rgba(0, 0, 0, 0.1)",md:"0 4px 8px rgba(0, 0, 0, 0.15)",lg:"0 8px 16px rgba(0, 0, 0, 0.2)",xl:"0 16px 32px rgba(0, 0, 0, 0.25)"},typography:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontFamilyHeading:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSizeXs:"12px",fontSizeSm:"14px",fontSizeMd:"16px",fontSizeLg:"18px",fontSizeXl:"24px",fontWeightNormal:"400",fontWeightMedium:"500",fontWeightBold:"700",lineHeightTight:"1.25",lineHeightNormal:"1.5",lineHeightRelaxed:"1.75"},buttons:{borderRadius:"8px",padding:"12px 24px",fontSize:"16px",fontWeight:"500",general:{background:"#2e6bf0",backgroundHover:"#1e40af",backgroundActive:"#1e3a8a",color:"#ffffff",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#1e40af",shadow:"0 2px 4px rgba(46, 107, 240, 0.2)"},cta:{background:"#efe63f",backgroundHover:"#eab308",backgroundActive:"#ca8a04",color:"#1f2937",colorHover:"#1f2937",border:"#efe63f",borderHover:"#eab308",shadow:"0 4px 8px rgba(239, 230, 63, 0.3)"},secondary:{background:"transparent",backgroundHover:"#2e6bf0",backgroundActive:"#1e40af",color:"#2e6bf0",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#2e6bf0",shadow:"none"},outline:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"#e5e5e5",borderHover:"#d1d5db",shadow:"none"},ghost:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"transparent",borderHover:"transparent",shadow:"none"}},components:{card:{background:"#ffffff",border:"1px solid #e5e5e5",borderRadius:"8px",shadow:"0 2px 4px rgba(0, 0, 0, 0.1)",padding:"24px"},header:{background:"#ffffff",borderBottom:"1px solid #e5e5e5",height:"64px",padding:"0 24px"},cta:{background:"#1e40af",borderRadius:"16px",padding:"32px"}}},w=Object.assign(Object.assign({},j),{name:"advisors-plus",colors:Object.assign(Object.assign({},j.colors),{primary:"#1e2a78",primaryHover:"#151f5c",primaryActive:"#0f1640",secondary:"#4f46e5",secondaryHover:"#4338ca",secondaryActive:"#3730a3",text:"#1f2937",background:"#f8fafc"}),buttons:Object.assign(Object.assign({},j.buttons),{borderRadius:"8px",general:{background:"#1e2a78",backgroundHover:"#151f5c",backgroundActive:"#0f1640",color:"#ffffff",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#151f5c",shadow:"0 2px 6px rgba(30, 42, 120, 0.25)"},cta:{background:"#4f46e5",backgroundHover:"#4338ca",backgroundActive:"#3730a3",color:"#ffffff",colorHover:"#ffffff",border:"#4f46e5",borderHover:"#4338ca",shadow:"0 3px 6px rgba(79, 70, 229, 0.3)"},secondary:{background:"transparent",backgroundHover:"#1e2a78",backgroundActive:"#151f5c",color:"#1e2a78",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#1e2a78",shadow:"none"}}),components:Object.assign(Object.assign({},j.components),{cta:{background:"#1e2a78",borderRadius:"16px",padding:"32px"}})}),N=Object.assign(Object.assign({},j),{name:"primax",colors:Object.assign(Object.assign({},j.colors),{primary:"#0066cc",primaryHover:"#0052a3",primaryActive:"#003d7a",secondary:"#ff6600",secondaryHover:"#e55a00",secondaryActive:"#cc4f00"}),buttons:Object.assign(Object.assign({},j.buttons),{borderRadius:"8px",general:{background:"#0066cc",backgroundHover:"#0052a3",backgroundActive:"#003d7a",color:"#ffffff",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0052a3",shadow:"0 2px 4px rgba(0, 102, 204, 0.2)"},cta:{background:"#ff6600",backgroundHover:"#e55a00",backgroundActive:"#cc4f00",color:"#ffffff",colorHover:"#ffffff",border:"#ff6600",borderHover:"#e55a00",shadow:"0 4px 8px rgba(255, 102, 0, 0.3)"},secondary:{background:"transparent",backgroundHover:"#0066cc",backgroundActive:"#0052a3",color:"#0066cc",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0066cc",shadow:"none"}}),components:Object.assign(Object.assign({},j.components),{cta:{background:"#003d7a",borderRadius:"0px 0px 50px 50px",padding:"54px 60px 0px 30px"}})});const _=r(void 0);function $({children:e,initialTheme:r=j,initialThemeName:n="default"}){o(()=>{!function(e,r){const o=document.getElementById(`theme-${r}`)||document.createElement("style");o.id=`theme-${r}`;const n=`\n [data-theme="${r}"] {\n --primary-color: ${e.colors.primary};\n --primary-color-hover: ${e.colors.primaryHover};\n --primary-color-active: ${e.colors.primaryActive};\n --secondary-color: ${e.colors.secondary};\n --secondary-color-hover: ${e.colors.secondaryHover};\n --secondary-color-active: ${e.colors.secondaryActive};\n --text-color: ${e.colors.text};\n --text-color-inverse: ${e.colors.textInverse};\n --background-color: ${e.colors.background};\n --border-color: ${e.colors.border};\n \n --button-general-bg: ${e.buttons.general.background};\n --button-general-bg-hover: ${e.buttons.general.backgroundHover};\n --button-general-bg-active: ${e.buttons.general.backgroundActive};\n --button-general-color: ${e.buttons.general.color};\n --button-general-border: ${e.buttons.general.border};\n --button-general-shadow: ${e.buttons.general.shadow};\n \n --button-cta-bg: ${e.buttons.cta.background};\n --button-cta-bg-hover: ${e.buttons.cta.backgroundHover};\n --button-cta-bg-active: ${e.buttons.cta.backgroundActive};\n --button-cta-color: ${e.buttons.cta.color};\n --button-cta-border: ${e.buttons.cta.border};\n --button-cta-shadow: ${e.buttons.cta.shadow};\n \n --button-secondary-bg: ${e.buttons.secondary.background};\n --button-secondary-bg-hover: ${e.buttons.secondary.backgroundHover};\n --button-secondary-bg-active: ${e.buttons.secondary.backgroundActive};\n --button-secondary-color: ${e.buttons.secondary.color};\n --button-secondary-color-hover: ${e.buttons.secondary.colorHover};\n --button-secondary-border: ${e.buttons.secondary.border};\n --button-secondary-shadow: ${e.buttons.secondary.shadow};\n \n --button-border-radius: ${e.buttons.borderRadius};\n \n --content-container-bg: ${e.components.cta.background};\n --content-container-border-radius: ${e.components.cta.borderRadius};\n --content-container-padding: ${e.components.cta.padding};\n }\n `;o.textContent=n,document.head.contains(o)||document.head.appendChild(o)}(r,n),document.documentElement.setAttribute("data-theme",n)},[r,n]);const t={currentTheme:r,themeName:n};return f.jsx(_.Provider,{value:t,children:e})}function O(){const e=n(_);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e}export{y as BackgroundMedia,u as Button,p as ButtonLink,h as CTA,x as Card,v as Header,m as Heading,k as Page,g as TextLink,$ as ThemeProvider,w as advisorsPlusTheme,j as defaultTheme,N as primaxTheme,O as useTheme};
|
|
11
11
|
//# sourceMappingURL=index.esm.js.map
|