@treasuryspatial/viewer-ui-kit 0.1.36 → 0.1.37

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.
Files changed (13) hide show
  1. package/dist/LandingShell.d.ts.map +1 -1
  2. package/dist/LandingShell.js +49 -185
  3. package/dist/LoginForm.d.ts.map +1 -1
  4. package/dist/LoginForm.js +1 -1
  5. package/dist/LoginShell.d.ts.map +1 -1
  6. package/dist/LoginShell.js +31 -84
  7. package/dist/ManifestTopBar.d.ts +1 -2
  8. package/dist/ManifestTopBar.d.ts.map +1 -1
  9. package/dist/ManifestTopBar.js +157 -126
  10. package/dist/TopBar.d.ts.map +1 -1
  11. package/dist/TopBar.js +2 -6
  12. package/dist/tsconfig.tsbuildinfo +1 -1
  13. package/package.json +2 -2
package/dist/LandingShell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AA4P/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,2CA4DnB"}
1
+ {"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAsG/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
package/dist/LandingShell.js CHANGED
@@ -4,228 +4,92 @@ import styled from 'styled-components';
4
4
  import ManifestTopBar from './ManifestTopBar.js';
5
5
  const Root = styled.main `
6
6
  min-height: 100vh;
7
- background:
8
- radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 32%),
9
- linear-gradient(180deg, color-mix(in srgb, var(--brand-background) 90%, white 10%), var(--brand-background));
7
+ background: var(--brand-background);
10
8
  color: var(--brand-text-primary);
11
- overflow-x: hidden;
12
9
  `;
13
- const HeroShell = styled.section `
14
- padding: calc(var(--ui-nav-height) + 48px) 24px 40px;
10
+ const Section = styled.section `
11
+ display: flex;
12
+ flex-direction: column;
13
+ padding: calc(var(--ui-nav-height) + 28px) 0 56px;
15
14
 
16
- @media (min-width: 768px) {
17
- padding: calc(var(--ui-nav-height) + 72px) 40px 56px;
15
+ @media (min-width: 1024px) {
16
+ padding-top: calc(var(--ui-nav-height) + 40px);
17
+ padding-bottom: 96px;
18
18
  }
19
+ `;
20
+ const Row = styled.div `
21
+ display: flex;
22
+ flex-direction: column;
19
23
 
20
24
  @media (min-width: 1024px) {
21
- padding: calc(var(--ui-nav-height) + 96px) 56px 72px;
25
+ flex-direction: row;
26
+ position: relative;
22
27
  }
23
28
  `;
24
- const HeroGrid = styled.div `
25
- display: grid;
26
- gap: 28px;
27
- max-width: 1480px;
28
- margin: 0 auto;
29
+ const LeftColumn = styled.div `
30
+ flex: 0 0 auto;
29
31
 
30
32
  @media (min-width: 1024px) {
31
- grid-template-columns: minmax(0, 1.25fr) minmax(320px, 440px);
32
- align-items: stretch;
33
+ width: 50%;
33
34
  }
34
35
  `;
35
- const HeroCopy = styled.div `
36
- display: flex;
37
- flex-direction: column;
38
- gap: 18px;
39
- padding: 30px 28px;
40
- border-radius: 28px;
41
- background:
42
- linear-gradient(145deg, color-mix(in srgb, var(--brand-panel) 94%, white 6%), color-mix(in srgb, var(--brand-background) 82%, var(--brand-panel) 18%));
43
- border: 1px solid color-mix(in srgb, var(--brand-panel-border) 72%, transparent);
44
- box-shadow: 0 24px 60px rgba(32, 33, 36, 0.08);
36
+ const RightColumn = styled.div `
37
+ flex: 1 1 auto;
45
38
 
46
39
  @media (min-width: 1024px) {
47
- padding: 42px 40px;
40
+ width: 50%;
48
41
  }
49
42
  `;
50
- const Eyebrow = styled.div `
51
- font-size: 12px;
52
- font-weight: 700;
53
- letter-spacing: 0.22em;
54
- text-transform: uppercase;
55
- color: var(--brand-accent);
56
- `;
57
- const HeroTitle = styled.h1 `
58
- margin: 0;
43
+ const Header = styled.div `
44
+ max-width: 65vw;
45
+ padding: 72px 24px 0;
59
46
  font-family: var(--ui-font-family, system-ui);
60
- font-size: clamp(42px, 8vw, 96px);
61
- line-height: 0.98;
62
- letter-spacing: -0.03em;
47
+ font-weight: 400;
63
48
  color: var(--brand-primary);
64
- `;
65
- const HeroSubtitle = styled.p `
66
- margin: 0;
67
- max-width: 26ch;
68
- font-size: clamp(22px, 3.4vw, 40px);
69
- line-height: 1.04;
70
- color: color-mix(in srgb, var(--brand-primary) 86%, var(--brand-accent) 14%);
71
- `;
72
- const HeroDescription = styled.p `
73
- margin: 0;
74
- max-width: 64ch;
75
- font-size: 16px;
76
- line-height: 1.7;
77
- color: var(--brand-text-secondary);
78
49
 
79
50
  @media (min-width: 768px) {
80
- font-size: 18px;
81
- }
82
- `;
83
- const HeroActions = styled.div `
84
- display: flex;
85
- flex-wrap: wrap;
86
- gap: 12px;
87
- padding-top: 8px;
88
- `;
89
- const PrimaryLink = styled.a `
90
- display: inline-flex;
91
- align-items: center;
92
- justify-content: center;
93
- min-height: 46px;
94
- padding: 0 18px;
95
- border-radius: 999px;
96
- font-size: 13px;
97
- font-weight: 700;
98
- letter-spacing: 0.08em;
99
- text-transform: uppercase;
100
- text-decoration: none;
101
- transition: transform 0.18s ease;
102
- background: var(--brand-accent);
103
- border: 1px solid var(--brand-accent);
104
- color: #ffffff;
105
-
106
- &:hover {
107
- transform: translateY(-1px);
51
+ padding-left: 48px;
52
+ font-size: 36px;
108
53
  }
109
- `;
110
- const SecondaryAnchor = styled.a `
111
- display: inline-flex;
112
- align-items: center;
113
- justify-content: center;
114
- min-height: 46px;
115
- padding: 0 18px;
116
- border-radius: 999px;
117
- font-size: 13px;
118
- font-weight: 700;
119
- letter-spacing: 0.08em;
120
- text-transform: uppercase;
121
- text-decoration: none;
122
- transition: transform 0.18s ease;
123
- background: transparent;
124
- border: 1px solid var(--brand-panel-border);
125
- color: var(--brand-text-primary);
126
54
 
127
- &:hover {
128
- transform: translateY(-1px);
55
+ @media (min-width: 1024px) {
56
+ padding: 0 0 0 84px;
129
57
  }
130
58
  `;
131
- const CardGrid = styled.aside `
132
- display: grid;
133
- gap: 14px;
134
- `;
135
- const Card = styled.div `
136
- padding: 20px 18px;
137
- border-radius: 22px;
138
- background: color-mix(in srgb, var(--brand-panel) 90%, white 10%);
139
- border: 1px solid color-mix(in srgb, var(--brand-panel-border) 74%, transparent);
140
- box-shadow: 0 18px 46px rgba(32, 33, 36, 0.06);
141
- `;
142
- const CardLabel = styled.div `
143
- font-size: 11px;
144
- font-weight: 700;
145
- letter-spacing: 0.18em;
146
- text-transform: uppercase;
147
- color: var(--brand-text-secondary);
59
+ const HeaderTitle = styled.div `
60
+ font-size: clamp(34px, 3vw + 18px, 61px);
61
+ line-height: 1.02;
62
+ letter-spacing: -0.03em;
148
63
  `;
149
- const CardValue = styled.div `
150
- margin-top: 10px;
151
- font-size: 24px;
64
+ const HeaderStrap = styled.div `
65
+ margin-top: 18px;
66
+ font-size: clamp(22px, 2vw + 12px, 40px);
152
67
  line-height: 1.1;
153
- font-weight: 700;
68
+ letter-spacing: -0.02em;
154
69
  `;
155
- const CardText = styled.p `
156
- margin: 10px 0 0;
157
- font-size: 14px;
158
- line-height: 1.6;
70
+ const Body = styled.div `
71
+ padding: 32px 24px 0;
72
+ font-size: 15px;
73
+ line-height: 1.8;
159
74
  color: var(--brand-text-secondary);
160
- `;
161
- const Sections = styled.section `
162
- max-width: 1480px;
163
- margin: 0 auto;
164
- padding: 0 24px 64px;
165
- display: grid;
166
- gap: 20px;
167
75
 
168
- @media (min-width: 768px) {
169
- padding: 0 40px 80px;
76
+ p {
77
+ margin: 0 0 20px;
170
78
  }
171
79
 
172
- @media (min-width: 1024px) {
173
- padding: 0 56px 96px;
174
- grid-template-columns: repeat(2, minmax(0, 1fr));
80
+ p:last-child {
81
+ margin-bottom: 0;
175
82
  }
176
- `;
177
- const SectionCard = styled.article `
178
- border-radius: 24px;
179
- padding: 26px 24px;
180
- background: color-mix(in srgb, var(--brand-panel) 92%, white 8%);
181
- border: 1px solid color-mix(in srgb, var(--brand-panel-border) 72%, transparent);
182
- box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
183
- `;
184
- const SectionTitle = styled.h2 `
185
- margin: 0;
186
- font-size: 24px;
187
- line-height: 1.1;
188
- color: var(--brand-primary);
189
- `;
190
- const SectionDescription = styled.p `
191
- margin: 14px 0 0;
192
- font-size: 15px;
193
- line-height: 1.7;
194
- color: var(--brand-text-secondary);
195
- `;
196
- const SectionBody = styled.div `
197
- margin-top: 16px;
198
- display: flex;
199
- flex-direction: column;
200
- gap: 14px;
201
- font-size: 15px;
202
- line-height: 1.75;
203
- color: var(--brand-text-secondary);
204
- `;
205
- const BulletList = styled.ul `
206
- margin: 16px 0 0;
207
- padding-left: 18px;
208
- display: flex;
209
- flex-direction: column;
210
- gap: 10px;
211
- color: var(--brand-text-secondary);
212
- `;
213
- const Notice = styled.p `
214
- max-width: 1480px;
215
- margin: 0 auto;
216
- padding: 0 24px 80px;
217
- font-size: 13px;
218
- line-height: 1.7;
219
- color: var(--brand-text-secondary);
220
83
 
221
84
  @media (min-width: 768px) {
222
- padding: 0 40px 88px;
85
+ padding-left: 48px;
86
+ padding-right: 48px;
223
87
  }
224
88
 
225
89
  @media (min-width: 1024px) {
226
- padding: 0 56px 104px;
90
+ padding: 24px 84px 0 32px;
227
91
  }
228
92
  `;
229
- export default function LandingShell({ manifest, content, showPoweredBy = false, showLogout = true, className, }) {
230
- return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(HeroShell, { children: _jsxs(HeroGrid, { children: [_jsxs(HeroCopy, { children: [_jsx(Eyebrow, { children: content.hero.eyebrow }), _jsx(HeroTitle, { children: content.hero.title }), _jsx(HeroSubtitle, { children: content.hero.subtitle }), _jsx(HeroDescription, { children: content.hero.description }), _jsxs(HeroActions, { children: [_jsx(PrimaryLink, { href: content.hero.primaryCta.href, children: content.hero.primaryCta.label }), content.hero.secondaryCta ? (_jsx(SecondaryAnchor, { href: content.hero.secondaryCta.href, target: "_blank", rel: "noreferrer", children: content.hero.secondaryCta.label })) : null] })] }), content.cards?.length ? (_jsx(CardGrid, { children: content.cards.map((card) => (_jsxs(Card, { children: [_jsx(CardLabel, { children: card.label }), _jsx(CardValue, { children: card.value }), _jsx(CardText, { children: card.text })] }, card.id))) })) : null] }) }), content.sections?.length ? (_jsx(Sections, { children: content.sections.map((section) => (_jsxs(SectionCard, { children: [_jsx(SectionTitle, { children: section.title }), section.description ? _jsx(SectionDescription, { children: section.description }) : null, section.paragraphs?.length ? (_jsx(SectionBody, { children: section.paragraphs.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })) : null, section.bullets?.length ? (_jsx(BulletList, { children: section.bullets.map((bullet) => (_jsx("li", { children: bullet }, bullet))) })) : null] }, section.id))) })) : null, content.notice ? _jsx(Notice, { children: content.notice }) : null] }));
93
+ export default function LandingShell({ manifest, content, showPoweredBy = false, showLogout = false, className, }) {
94
+ return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Section, { children: _jsxs(Row, { children: [_jsx(LeftColumn, { children: _jsxs(Header, { children: [_jsx(HeaderTitle, { children: content.header }), _jsx(HeaderStrap, { children: content.strap })] }) }), _jsx(RightColumn, { children: _jsx(Body, { children: content.bodyParagraphs.map((paragraph, index) => (_jsx("p", { children: paragraph }, `${index}-${paragraph.slice(0, 16)}`))) }) })] }) })] }));
231
95
  }
package/dist/LoginForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../src/LoginForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0EvC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,IAAY,EACZ,MAAa,EACb,UAAoB,EACpB,aAA0B,EAC1B,WAAqB,EACrB,SAAyB,GAC1B,EAAE,cAAc,2CAsChB"}
1
+ {"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../src/LoginForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0EvC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,IAAY,EACZ,MAAa,EACb,UAAoB,EACpB,aAA0B,EAC1B,WAAqB,EACrB,SAAyB,GAC1B,EAAE,cAAc,2CA2ChB"}
package/dist/LoginForm.js CHANGED
@@ -65,5 +65,5 @@ const Notice = styled.p `
65
65
  max-width: 720px;
66
66
  `;
67
67
  export default function LoginForm({ email, password, onEmailChange, onPasswordChange, onSubmit, busy = false, status = null, emailLabel = 'Email', passwordLabel = 'Password', submitLabel = 'Login', busyLabel = 'Logging in…', }) {
68
- return (_jsxs(Form, { onSubmit: onSubmit, autoComplete: "off", children: [_jsxs(Row, { children: [_jsx(LabelCell, { children: emailLabel }), _jsx(Input, { "aria-label": emailLabel, name: "email", placeholder: emailLabel, value: email, onChange: (event) => onEmailChange(event.target.value), autoComplete: "email", "data-lpignore": "true" })] }), _jsxs(Row, { style: { marginTop: '1px' }, children: [_jsx(LabelCell, { children: passwordLabel }), _jsx(Input, { type: "password", "aria-label": passwordLabel, name: "password", placeholder: passwordLabel, required: true, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "new-password", "data-lpignore": "true" })] }), _jsxs(ButtonRow, { style: { marginTop: '1px' }, children: [_jsx(Button, { type: "submit", "aria-label": submitLabel, disabled: busy || password.trim() === '', children: busy ? busyLabel : submitLabel }), _jsx(Spacer, {})] }), status ? _jsx(Notice, { style: { color: '#9f1d1d' }, children: status }) : null] }));
68
+ return (_jsxs(Form, { onSubmit: onSubmit, autoComplete: "off", children: [_jsxs(Row, { children: [_jsx(LabelCell, { children: emailLabel }), _jsx(Input, { "aria-label": emailLabel, name: "email", placeholder: emailLabel, value: email, onChange: (event) => onEmailChange(event.target.value), autoComplete: "email", "data-lpignore": "true", required: true })] }), _jsxs(Row, { style: { marginTop: '1px' }, children: [_jsx(LabelCell, { children: passwordLabel }), _jsx(Input, { type: "password", "aria-label": passwordLabel, name: "password", placeholder: passwordLabel, required: true, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "new-password", "data-lpignore": "true" })] }), _jsxs(ButtonRow, { style: { marginTop: '1px' }, children: [_jsx(Button, { type: "submit", "aria-label": submitLabel, disabled: busy || email.trim() === '' || password.trim() === '', children: busy ? busyLabel : submitLabel }), _jsx(Spacer, {})] }), status ? _jsx(Notice, { style: { color: 'var(--viewer-ui-color-text-error, #b91c1c)' }, children: status }) : null] }));
69
69
  }
package/dist/LoginShell.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoginShell.d.ts","sourceRoot":"","sources":["../src/LoginShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAyH7E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAsCjB"}
1
+ {"version":3,"file":"LoginShell.d.ts","sourceRoot":"","sources":["../src/LoginShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAkE7E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,aAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAwBjB"}
package/dist/LoginShell.js CHANGED
@@ -4,111 +4,58 @@ import styled from 'styled-components';
4
4
  import ManifestTopBar from './ManifestTopBar.js';
5
5
  const Root = styled.main `
6
6
  min-height: 100vh;
7
- background:
8
- radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 36%),
9
- linear-gradient(180deg, color-mix(in srgb, var(--brand-background) 94%, white 6%), var(--brand-background));
7
+ background: var(--brand-background);
10
8
  color: var(--brand-text-primary);
11
9
  `;
12
10
  const Shell = styled.section `
13
11
  min-height: 100vh;
14
- padding: calc(var(--ui-nav-height) + 48px) 24px 40px;
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ padding: calc(var(--ui-nav-height) + 40px) 24px 40px;
15
16
 
16
17
  @media (min-width: 768px) {
17
- padding: calc(var(--ui-nav-height) + 64px) 40px 56px;
18
- }
19
-
20
- @media (min-width: 1024px) {
21
- padding: calc(var(--ui-nav-height) + 72px) 56px 72px;
18
+ padding: calc(var(--ui-nav-height) + 48px) 40px 48px;
22
19
  }
23
20
  `;
24
- const Grid = styled.div `
25
- display: grid;
26
- gap: 28px;
27
- max-width: 1280px;
28
- margin: 0 auto;
29
-
30
- @media (min-width: 1024px) {
31
- grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px);
32
- align-items: start;
33
- }
21
+ const Inner = styled.div `
22
+ width: 100%;
23
+ max-width: 1200px;
34
24
  `;
35
- const Intro = styled.div `
36
- display: flex;
37
- flex-direction: column;
38
- gap: 16px;
39
- padding: 24px 0;
40
- `;
41
- const Eyebrow = styled.div `
42
- font-size: 12px;
43
- font-weight: 700;
44
- letter-spacing: 0.2em;
45
- text-transform: uppercase;
46
- color: var(--brand-accent);
25
+ const Header = styled.header `
26
+ margin-bottom: 32px;
47
27
  `;
48
28
  const Title = styled.h1 `
49
29
  margin: 0;
50
30
  font-family: var(--ui-font-family, system-ui);
51
- font-size: clamp(44px, 5.5vw, 82px);
31
+ font-size: clamp(44px, 7vw, 72px);
52
32
  line-height: 0.96;
53
33
  letter-spacing: -0.03em;
54
- color: var(--brand-primary);
55
- `;
56
- const Subtitle = styled.p `
57
- margin: 0;
58
- max-width: 28ch;
59
- font-size: clamp(20px, 2.8vw, 34px);
60
- line-height: 1.06;
61
- color: color-mix(in srgb, var(--brand-primary) 86%, var(--brand-accent) 14%);
34
+ font-weight: 400;
35
+ color: var(--brand-text-primary);
62
36
  `;
63
- const Description = styled.p `
64
- margin: 0;
65
- max-width: 64ch;
66
- font-size: 16px;
67
- line-height: 1.7;
37
+ const Strap = styled.p `
38
+ margin: 16px 0 0;
39
+ max-width: 42ch;
40
+ font-size: 18px;
41
+ line-height: 1.45;
68
42
  color: var(--brand-text-secondary);
69
43
  `;
70
- const SupportLink = styled.a `
71
- display: inline-flex;
72
- align-items: center;
73
- gap: 8px;
74
- width: fit-content;
75
- text-decoration: none;
76
- font-size: 13px;
77
- font-weight: 700;
78
- letter-spacing: 0.08em;
79
- text-transform: uppercase;
80
- color: var(--brand-primary);
81
-
82
- &:hover {
83
- color: var(--brand-text-primary);
84
- }
85
- `;
86
- const Panel = styled.div `
87
- border-radius: 28px;
88
- background: color-mix(in srgb, var(--brand-panel) 94%, white 6%);
89
- border: 1px solid color-mix(in srgb, var(--brand-panel-border) 76%, transparent);
90
- box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
91
- padding: 26px 22px;
92
-
93
- @media (min-width: 768px) {
94
- padding: 32px 28px;
95
- }
96
- `;
97
- const Meta = styled.div `
98
- display: flex;
99
- flex-direction: column;
100
- gap: 14px;
101
- margin-top: 20px;
44
+ const Body = styled.p `
45
+ margin: 18px 0 0;
46
+ max-width: 52ch;
47
+ font-size: 15px;
48
+ line-height: 1.75;
49
+ color: var(--brand-text-secondary);
102
50
  `;
103
- const MetaText = styled.p `
104
- margin: 0;
51
+ const Disclaimer = styled.p `
52
+ margin: 20px 0 0;
53
+ max-width: 720px;
105
54
  font-size: 13px;
106
- line-height: 1.6;
55
+ line-height: 1.7;
107
56
  color: var(--brand-text-secondary);
108
57
  `;
109
58
  export default function LoginShell({ manifest, content, children, showLogout = false, showPoweredBy = false, className, }) {
110
- const title = content?.title?.trim() ||
111
- manifest.surface?.label ||
112
- `${manifest.topbar.title} ${manifest.topbar.productLabel}`.trim();
113
- return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Shell, { children: _jsxs(Grid, { children: [_jsxs(Intro, { children: [content?.eyebrow ? _jsx(Eyebrow, { children: content.eyebrow }) : null, _jsx(Title, { children: title }), _jsx(Subtitle, { children: content?.subtitle ?? `${manifest.topbar.title} ${manifest.topbar.productLabel}`.trim() }), content?.description ? _jsx(Description, { children: content.description }) : null, content?.supportLink ? (_jsx(SupportLink, { href: content.supportLink.href, target: "_blank", rel: "noreferrer", children: content.supportLink.label })) : null, (content?.notice || content?.legal) ? (_jsxs(Meta, { children: [content.notice ? _jsx(MetaText, { children: content.notice }) : null, content.legal ? _jsx(MetaText, { children: content.legal }) : null] })) : null] }), _jsx(Panel, { children: children })] }) })] }));
59
+ const fallbackHeading = `${manifest.topbar.title} ${manifest.surface?.label || manifest.topbar.productLabel}`.trim();
60
+ return (_jsxs(Root, { className: className, children: [_jsx(ManifestTopBar, { manifest: manifest, variant: "landing", showPoweredBy: showPoweredBy, showLogout: showLogout }), _jsx(Shell, { children: _jsxs(Inner, { children: [_jsxs(Header, { children: [_jsx(Title, { children: content?.heading || fallbackHeading }), content?.strap ? _jsx(Strap, { children: content.strap }) : null, content?.body ? _jsx(Body, { children: content.body }) : null] }), children, content?.disclaimer ? _jsx(Disclaimer, { children: content.disclaimer }) : null] }) })] }));
114
61
  }
package/dist/ManifestTopBar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { UiManifest } from '@treasuryspatial/ui-manifest';
2
- type ManifestTopBarProps = {
2
+ export type ManifestTopBarProps = {
3
3
  manifest: UiManifest;
4
4
  variant?: 'landing' | 'canvas';
5
5
  showPoweredBy?: boolean;
@@ -11,5 +11,4 @@ type ManifestTopBarProps = {
11
11
  logoutHref?: string;
12
12
  };
13
13
  export default function ManifestTopBar({ manifest, variant, showPoweredBy, showLogout, showPanelToggle, showSubtitle, logoutCookieNames, logoutEndpoint, logoutHref, }: ManifestTopBarProps): import("react/jsx-runtime").JSX.Element;
14
- export type { ManifestTopBarProps };
15
14
  //# sourceMappingURL=ManifestTopBar.d.ts.map
package/dist/ManifestTopBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM/D,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA0MF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAoB,EACpB,UAAkB,EAClB,eAAuB,EACvB,YAAoB,EACpB,iBAA2C,EAC3C,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA2HrB;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
1
+ {"version":3,"file":"ManifestTopBar.d.ts","sourceRoot":"","sources":["../src/ManifestTopBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAa/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA2KF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAkB,EAClB,aAAqB,EACrB,UAAkB,EAClB,eAAuB,EACvB,YAAoB,EACpB,iBAAiB,EACjB,cAAmC,EACnC,UAAqB,GACtB,EAAE,mBAAmB,2CA2JrB"}