@financial-times/n-myft-ui 26.1.0 → 27.2.1

package/components/collections/collections.html

@@ -0,0 +1,85 @@
+<section
+	class="collection {{#if liteStyle}}collection--lite{{else}}collection--regular{{/if}}"
+	data-trackable="{{#if trackable}}{{trackable}}{{else}}collection{{/if}}">
+	<header class="collection__header {{#if liteStyle}}collection__header--lite{{else}}collection__header--regular{{/if}}">
+		<h2 class="collection__title {{#if liteStyle}}collection__title--lite{{else}}collection__title--regular{{/if}}">
+			{{title}}
+		</h2>
+	</header>
+	<ul class="collection__concepts">
+		{{#concepts}}
+			<li class="collection__concept">
+				{{#if ../liteStyle}}
+					{{>	n-myft-ui/components/follow-button/follow-button
+						variant="primary"
+						buttonText=name
+						collectionName=../collectionName
+					}}
+				{{else}}
+					{{>	n-myft-ui/components/follow-button/follow-button
+						variant="inverse"
+						buttonText=name
+						collectionName=../collectionName
+					}}
+				{{/if}}
+			</li>
+		{{/concepts}}
+	</ul>
+	<div class="collection__meta">
+		<form
+			method="POST"
+			action="#"
+			data-myft-ui="follow"
+			{{#if collectionName}}data-myft-tracking="collectionName={{collectionName}}"{{/if}}
+			data-concept-id="
+				{{~#concepts~}}
+					{{conceptId}}
+					{{~#unless @last~}}
+						,
+					{{~/unless~}}
+				{{~/concepts~}}"
+			class="n-myft-ui n-myft-ui--follow n-ui-hide-core collection-follow-all">
+			<input
+				type="hidden"
+				name="directType"
+				value="
+					{{~#concepts~}}
+						{{directType}}
+						{{~#unless @last~}}
+							,
+						{{~/unless~}}
+					{{~/concepts~}}"
+			/>
+			{{> n-myft-ui/components/csrf-token/input}}
+			<input
+				type="hidden"
+				name="name"
+				value="
+					{{~#concepts~}}
+						{{name}}
+					{{~#unless @last~}}
+						,
+					{{~/unless~}}
+				{{~/concepts~}}"
+			/>
+			<button
+				type="submit"
+				aria-pressed="false"
+				class="collection-follow-all__button {{#if liteStyle}}collection-follow-all__button--lite{{else}}collection-follow-all__button--regular{{/if}}"
+				data-trackable="follow all"
+				data-concept-id="
+					{{~#concepts~}}
+						{{conceptId}}
+						{{~#unless @last~}}
+							,
+						{{~/unless~}}
+					{{~/concepts~}}"
+				aria-label="Add all topics in the {{title}} collection to my F T"
+				data-alternate-label="Remove all topics in the {{title}} collection from my F T"
+				data-alternate-text="Added"
+				title="Add all topics in the {{title}} collection to my F T">
+				Add all to myFT
+			</button>
+		</form>
+	</div>
+</section>

package/components/concept-list/concept-list.html

@@ -0,0 +1,31 @@
+{{#ifAll @root.flags.myFtApi @root.flags.myFtApiWrite concepts concepts.length}}
+	<div
+		class="concept-list"
+		data-trackable="{{#if trackable}}{{trackable}}{{else}}concept-list{{/if}}">
+		{{#ifSome contentType conceptListTitle}}
+			<h2 class="concept-list__title">
+				{{#if conceptListTitle}}
+					{{conceptListTitle}}
+				{{else}}
+					Follow the topics in this {{contentType}}
+				{{/if}}
+			</h2>
+		{{/ifSome}}
+		<ul class="concept-list__list">
+			{{#each concepts}}
+				<li class="concept-list__list-item">
+					<a
+						href="{{relativeUrl}}"
+						data-trackable="{{#if conceptTrackable}}{{conceptTrackable}}{{else}}concept{{/if}}"
+						class="concept-list__concept">
+						{{prefLabel}}
+					</a>
+					{{> n-myft-ui/components/follow-button/follow-button
+						conceptId=id
+						name=prefLabel
+					}}
+				</li>
+			{{/each}}
+		</ul>
+	</div>
+{{/ifAll}}

package/components/csrf-token/input.html

@@ -0,0 +1,5 @@
+<input
+	data-myft-csrf-token
+	value="{{#if @root.cacheablePersonalisedUrl}}{{@root.csrfToken}}{{/if}}"
+	type="hidden"
+	name="token">

package/components/follow-button/follow-button.html

@@ -0,0 +1,79 @@
+{{#if @root.flags.myFtApiWrite}}
+	<form
+		class="n-myft-ui n-myft-ui--follow {{extraClasses}}"
+		method="GET"
+		data-myft-ui="follow"
+		data-concept-id="{{conceptId}}"
+		{{#if collectionName}}data-myft-tracking="collectionName={{collectionName}}"{{/if}}
+		{{#if followPlusDigestEmail}}
+			action="/__myft/api/core/follow-plus-digest-email/{{conceptId}}?method=put"
+			data-myft-ui-variant="followPlusDigestEmail"
+		{{else}}
+			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
+				action="/myft/remove/{{conceptId}}"
+				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=delete"
+			{{else}}
+				action="/myft/add/{{conceptId}}"
+				data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put"
+			{{/ifAll}}
+		{{/if}}>
+		{{> n-myft-ui/components/csrf-token/input}}
+		<div
+			class="n-myft-ui__announcement o-normalise-visually-hidden"
+			aria-live="assertive"
+			data-pressed-text="Now following {{name}}."
+			data-unpressed-text="No longer following {{name}}."
+		></div>
+		<button
+			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
+				aria-label="Remove {{name}} from myFT"
+				title="Remove {{name}} from myFT"
+				data-alternate-label="Add {{name}} to myFT"
+				aria-pressed="true"
+				{{#if alternateText}}
+					data-alternate-text="{{alternateText}}"
+				{{else}}
+					{{#if buttonText}}
+						data-alternate-text="{{buttonText}}"
+					{{else}}
+						data-alternate-text="Add to myFT"
+					{{/if}}
+				{{/if}}
+			{{else}}
+				aria-pressed="false"
+				aria-label="Add {{name}} to myFT"
+				title="Add {{name}} to myFT"
+				data-alternate-label="Remove {{name}} from myFT"
+				{{#if alternateText}}
+					data-alternate-text="{{alternateText}}"
+				{{else}}
+					{{#if buttonText}}
+						data-alternate-text="{{buttonText}}"
+					{{else}}
+						data-alternate-text="Added"
+					{{/if}}
+				{{/if}}
+			{{/ifAll}}
+			class="{{extraButtonClasses}}
+				n-myft-follow-button
+				{{~#variant}} n-myft-follow-button--{{this}}{{/variant~}}"
+			data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
+			{{#if followPlusDigestEmail}}
+				data-trackable-context-messaging="add-to-myft-plus-digest-button"
+			{{/if}}
+			data-trackable="follow"
+			type="submit">
+			{{~#if buttonText~}}
+				{{buttonText}}
+			{{~else~}}
+				{{~#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl~}}
+					Added
+				{{~else~}}
+					Add to myFT
+				{{~/ifAll~}}
+			{{~/if~}}
+		</button>
+	</form>
+{{else}}
+	<!-- Add to myFT button hidden due to myFtApiWrite being off -->
+{{/if}}

package/components/instant-alert/instant-alert.html

@@ -0,0 +1,47 @@
+{{#if @root.flags.myFtApiWrite}}
+<form class="n-myft-ui n-myft-ui--instant{{#if hideButtonText}} n-myft-ui--instant--hide-text{{/if}} {{extraClasses}}"
+			method="GET"
+			data-myft-ui="instant"
+			data-concept-id="{{conceptId}}"
+			action="/myft/add/{{conceptId}}?instant=true"
+			data-js-action="/__myft/api/core/followed/concept/{{conceptId}}?method=put">
+	{{> n-myft-ui/components/csrf-token/input}}
+	<input type="hidden" value="{{name}}" name="name">
+	{{#if directType}}
+	<input type="hidden" value="{{directType}}" name="directType">
+	{{else}}
+	<input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType">
+	{{/if}}
+	<button
+			aria-label="Get instant alerts for {{name}}"
+			{{#ifAll hasInstantAlert @root.cacheablePersonalisedUrl}}
+			aria-pressed="true"
+			{{else}}
+			aria-pressed="false"
+			{{/ifAll}}
+	class="n-myft-ui__button
+	{{#variant}} n-myft-ui__button--{{this}}{{/variant}}
+	{{#size}} n-myft-ui__button--{{this}}{{/size}}
+	n-myft-ui__button--instant
+	n-myft-ui__button--instant-light"
+	data-alternate-label="Stop instant alerts for {{name}}"
+	{{#if alternateText}}
+	data-alternate-text="{{alternateText}}"
+	{{else}}
+	{{#if buttonText}}
+	data-alternate-text="{{buttonText}}"
+	{{else}}
+	data-alternate-text="Instant alerts"
+	{{/if}}
+	{{/if}}
+	data-concept-id="{{conceptId}}" {{! duplicated here for tracking}}
+	data-trackable="instant"
+	title="Get instant alerts for {{name}}"
+	name="_rel.instant"
+	value="{{#if hasInstantAlert}}false{{else}}true{{/if}}"
+	type="submit"
+	>{{#if buttonText}}{{buttonText}}{{else}}Instant alerts{{/if}}</button>
+</form>
+{{else}}
+<!-- Instant alert button hidden due to myFtApiWrite being off -->
+{{/if}}

package/components/pin-button/pin-button.html

@@ -0,0 +1,20 @@
+{{#if showPrioritiseButton}}
+<span class="myft-pin-divider"></span>
+<div class="myft-pin-button-wrapper">
+	<form method="post" action="/__myft/api/core/prioritised/concept/{{id}}?method={{#if prioritised}}delete{{else}}put{{/if}}" data-myft-prioritise>
+		{{> n-myft-ui/components/csrf-token/input }}
+		<input type="hidden" value="{{name}}" name="name"> {{#if directType}}
+		<input type="hidden" value="{{directType}}" name="directType"> {{else}}
+		<input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType"> {{/if}}
+		<div
+			class="n-myft-ui__announcement o-normalise-visually-hidden"
+			aria-live="assertive"
+			data-pressed-text="{{name}} pinned in myFT."
+			data-unpressed-text="Unpinned {{name}} from myFT."
+		></div>
+		<button id="myft-pin-button__{{id}}" class="myft-pin-button" data-prioritise-button data-trackable="prioritised" data-concept-id="{{id}}" data-prioritised="{{#if prioritised}}true{{else}}false{{/if}}"
+				aria-label="{{#if prioritised}}Unpin{{else}}Pin{{/if}} {{name}} {{#if prioritised}}from{{else}}in{{/if}} myFT" aria-pressed="{{#if prioritised}}true{{else}}false{{/if}}" title="{{#if prioritised}}Unpin{{else}}Pin{{/if}} {{name}}">
+		</button>
+	</form>
+</div>
+{{/if}}

package/components/save-for-later/save-for-later.html

@@ -0,0 +1,68 @@
+{{#if @root.flags.myFtApiWrite}}
+<form class="n-myft-ui n-myft-ui--save" method="GET"
+	data-content-id="{{contentId}}"
+	data-myft-ui="saved"
+	action="/myft/save/{{contentId}}"
+	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put"
+	{{#ifEquals @root.flags.professorLists 'variant'}}data-myft-ui-variant="createListAndSaveArticleVariant"{{/ifEquals}}>
+	{{> n-myft-ui/components/csrf-token/input}}
+	<div
+		class="n-myft-ui__announcement o-normalise-visually-hidden"
+		aria-live="assertive"
+		data-pressed-text="Article saved in My FT."
+		data-unpressed-text="Removed article from My FT."
+	></div>
+	<button
+		type="submit"
+		class="{{#if saveButtonWithIcon}}n-myft-ui__save-button-with-icon{{else}}n-myft-ui__button{{#variant}} n-myft-ui__button--{{this}}{{/variant}}{{/if}}"
+		data-trackable="{{#if trackableId}}{{trackableId}}{{else}}save-for-later{{/if}}"
+		{{#if isSaved}}
+			{{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
+			title="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			data-alternate-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			aria-pressed="true"
+		{{else}}
+			title="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			aria-label="{{#if title}}Save {{title}} to myFT for later{{else}}Save this article to myFT for later{{/if}}"
+			data-alternate-label="{{#if title}}{{title}} is{{/if}} Saved to myFT"
+			aria-pressed="false"
+		{{/if}}
+		{{#unlessEquals appIsStreamPage true}}
+			{{#if saveButtonWithIcon}}
+				data-text-variant="save-button-with-icon-copy"
+			{{else}}
+				data-text-variant="save-button-longer-copy"
+			{{/if}}
+		{{/unlessEquals}}
+		{{#if alternateText}}
+			data-alternate-text="{{alternateText}}"
+		{{else}}
+			{{#if isSaved}}
+				data-alternate-text="Save&nbsp;"
+			{{else}}
+				data-alternate-text="Saved&nbsp;"
+			{{/if}}
+		{{/if}}
+		data-content-id="{{contentId}}" {{! duplicated here for tracking}}
+		>
+			{{#if saveButtonWithIcon}}
+				<span class="save-button-with-icon-copy" data-variant-label>{{#if buttonText~}}
+					{{buttonText}}
+				{{~else~}}
+					{{#if isSaved}}Saved{{else}}Save{{/if}}
+				{{~/if}}</span>
+			{{else}}
+				{{#if buttonText}}{{buttonText}}{{else}}
+					{{#unlessEquals appIsStreamPage true}}
+						<span class="save-button-longer-copy" data-variant-label>{{#if isSaved}}Saved&nbsp;{{else}}Save&nbsp;{{/if}}</span><span class="n-myft-ui__button--viewport-large" aria-hidden="true">to myFT</span>
+					{{else}}
+						<span>{{#if isSaved}}Saved{{else}}Save{{/if}}</span>
+					{{/unlessEquals}}
+				{{/if}}
+			{{/if}}
+		</button>
+	</form>
+{{else}}
+	<!-- Save button hidden due to myFtApiWrite being off -->
+{{/if }}

package/components/unread-articles-indicator/date-fns.js

@@ -2,12 +2,12 @@
 // the detail => https://github.com/date-fns/date-fns/blob/HEAD/CHANGELOG.md#200---2019-08-20
 // By adding validation for dates before their functions allows us to know it when unexpected value passed.
 
-import isTodayOriginal from 'date-fns/src/isToday';
-import isAfterOriginal from 'date-fns/src/isAfter';
-import addMinutesOriginal from 'date-fns/src/addMinutes';
-import startOfDayOriginal from 'date-fns/src/startOfDay';
-import isValidOriginal from 'date-fns/src/isValid';
-import parseISO from 'date-fns/src/parseISO';
+import isTodayOriginal from "date-fns/src/isToday";
+import isAfterOriginal from "date-fns/src/isAfter";
+import addMinutesOriginal from "date-fns/src/addMinutes";
+import startOfDayOriginal from "date-fns/src/startOfDay";
+import isValidOriginal from "date-fns/src/isValid";
+import parseISO from "date-fns/src/parseISO";
 
 const isValid = (date) => {
 	if (!isValidOriginal(date)) {

package/demos/app.js

@@ -1,17 +1,11 @@
-require('sucrase/register');
 const nExpress = require('@financial-times/n-express');
 const chalk = require('chalk');
 const errorHighlight = chalk.bold.red;
 const highlight = chalk.bold.green;
-const { PageKitReactJSX } = require('@financial-times/dotcom-server-react-jsx');
-const fs = require('fs');
 const path = require('path');
 const handlebars = require('handlebars');
 const { PageKitHandlebars, helpers } = require('@financial-times/dotcom-server-handlebars');
 
-const demoJSX = require('./templates/demo').default;
-const demoLayoutSource = fs.readFileSync(path.join(__dirname, './templates/demo-layout.html'),'utf8').toString();
-
 const fixtures = {
 	followButton: require('./fixtures/follow-button'),
 	saveButton: require('./fixtures/save-button'),
@@ -37,43 +31,26 @@ const app = module.exports = nExpress({
 
 app.set('views', path.join(__dirname, '/templates'));
 app.set('view engine', '.html');
-
 app.engine('.html', new PageKitHandlebars({
 	cache: false,
 	handlebars,
-	helpers
+	helpers: {
+		...helpers
+	}
 }).engine);
 
 app.use('/public', nExpress.static(path.join(__dirname, '../public'), { redirect: false }));
 
-const jsxRenderer = (new PageKitReactJSX({ includeDoctype: false }));
-
 app.get('/', (req, res) => {
 	res.render('demo', Object.assign({
-		title: 'n-myft-ui demo',
-		flags: {
-			myFtApi: true,
-			myFtApiWrite: true
-		},
-	}, fixtures));
-});
-
-app.get('/demo-jsx', async (req, res) => {
-	let demo = await jsxRenderer.render(demoJSX, Object.assign({
 		title: 'n-myft-ui demo',
 		flags: {
 			myFtApi: true,
 			myFtApiWrite: true
 		}
 	}, fixtures));
-
-	let template = handlebars.compile(demoLayoutSource);
-	let result = template({body: demo});
-
-	res.send(result);
 });
 
-
 function runPa11yTests () {
 	const spawn = require('child_process').spawn;
 	const pa11y = spawn('pa11y-ci');

package/demos/templates/demo.html

@@ -32,7 +32,7 @@
 					</h2>
 
 					{{#followButton}}
-						{{{renderReactComponent localPath="components/follow-button/follow-button" flags=@root.flags}}}
+						{{> n-myft-ui/components/follow-button/follow-button}}
 					{{/followButton}}
 
 					<h2
@@ -41,51 +41,52 @@
 					</h2>
 
 					{{#followButton}}
-						{{{renderReactComponent localPath="components/follow-button/follow-button" buttonText=name flags=@root.flags}}}
+						{{> n-myft-ui/components/follow-button/follow-button buttonText=name}}
 					{{/followButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Save button
 						</h2>
-						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId }}}
+						{{> n-myft-ui/components/save-for-later/save-for-later }}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button
 						</h2>
-						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId isSaved=true }}}
+						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Save button with icon
 						</h2>
-						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true }}}
+						{{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button with icon
 						</h2>
-						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true isSaved=true }}}
+						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
 					{{/saveButton}}
 
 					<h2 class="demo-section__title">
 						Pin button
 					</h2>
 					{{#each pinButton}}
-						{{{renderReactComponent localPath="components/pin-button/pin-button" flags=@root.flags title=title id=id name=name directType=directType showPrioritiseButton=showPrioritiseButton }}}
+						{{> n-myft-ui/components/pin-button/pin-button }}
 					{{/each}}
 
 					{{#instantAlert}}
 						<h2 class="demo-section__title">
 							Instant Alert
 						</h2>
-						{{{renderReactComponent localPath="components/instant-alert/instant-alert" flags=@root.flags title=title conceptId=id name=name directType=directType }}}
+						{{> n-myft-ui/components/instant-alert/instant-alert }}
 					{{/instantAlert}}
 
+
 				</div>
 			</div>
 		</section>
@@ -448,7 +449,7 @@
 
 				{{#collections}}
 					<div data-o-grid-colspan="3">
-						{{{renderReactComponent localPath="components/collections/collections" flags=@root.flags concepts=this.concepts title=this.title liteStyle=this.liteStyle collectionName=this.collectionName trackable=this.trackable}}}
+						{{> n-myft-ui/components/collections/collections }}
 					</div>
 				{{/collections}}
 			</div>
@@ -470,7 +471,7 @@
 
 				{{#each conceptList}}
 					<div data-o-grid-colspan="3">
-						{{{renderReactComponent localPath="components/concept-list/concept-list" flags=@root.flags concepts=this.concepts contentType=this.contentType conceptListTitle=this.conceptListTitle trackable=this.trackable}}}
+						{{> n-myft-ui/components/concept-list/concept-list }}
 					</div>
 				{{/each}}
 			</div>

package/myft/main.scss

@@ -173,3 +173,148 @@ $spacing-unit: 20px;
 	}
 
 }
+
+.share-nav {
+	&.data-overlap-initialised {
+		.o-overlay {
+			transition: opacity 0.15s ease-in;
+			opacity: 0;
+			z-index: -1;
+		}
+	}
+
+	.myft-ui-create-list-variant {
+		border-radius: 10px;
+		border: 1px solid oColorsByName('black-5');
+		background: oColorsByName('white-80');
+
+		.o-overlay__heading {
+			border-radius: 10px 10px 0 0;
+			background: oColorsByName('white-60');
+			@include oTypographySans($scale: 2);
+			color: oColorsByName('black-80');
+		}
+
+		.o-overlay__content {
+			@include oTypographySans($scale: 0);
+			color: oColorsByName('black-80');
+			padding: 0;
+		}
+
+		.o-overlay__title {
+			margin: 8px 14px 0 8px;
+		}
+
+		&-container {
+			display: block;
+			width: 340px;
+			top: 115.5px;
+			left: 50px;
+		}
+
+		&-add {
+			border: 0;
+			background: none;
+			@include oTypographySans($scale: 1, $weight: 'semibold');
+			color: oColorsByName('black-80');
+
+			padding-left: 0;
+			margin-left: -8px;
+
+			&:hover {
+				text-decoration: underline;
+			}
+
+			&::before {
+				content: '';
+				@include oIconsContent(
+					'plus',
+					oColorsByName('black-80'),
+					28,
+					$iconset-version: 1
+				);
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+		}
+
+		&-add-description {
+			margin: 4px 0;
+		}
+
+		&-heading {
+			&::before {
+				content: '';
+				@include oIconsContent(
+					'tick',
+					oColorsByName('teal'),
+					32,
+					$iconset-version: 1
+				);
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+		}
+
+		&-footer {
+			border-top: 1px solid oColorsByName('black-5');
+			padding: 16px;
+		}
+
+		&-icon {
+			&::before {
+				content: "";
+				display: inline-block;
+				background-repeat: no-repeat;
+				background-size: contain;
+				background-position: 50%;
+				background-color: transparent;
+				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);
+				width: 42px;
+				height: 42px;
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+
+			&-visually-hidden {
+				clip: rect(0 0 0 0);
+				clip-path: inset(50%);
+				height: 1px;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap;
+				width: 1px;
+			}
+		}
+
+		&-form {
+			display: flex;
+			width: calc(100% - 32px);
+			justify-content: space-between;
+			height: 40px;
+			gap: 8px;
+			padding: 0 16px 16px;
+
+			& > * {
+				flex: 1 1 auto;
+			}
+
+			.o-forms-input {
+				margin-top: 0;
+			}
+		}
+
+		&-lists {
+			padding: 16px 16px 0;
+			@include oTypographySans($scale: 1);
+			&-text {
+				@include oTypographySans($weight: 'semibold');
+				color: oColorsByName('black-80');
+				margin-bottom: 16px;
+			}
+			&-container {
+				margin-top: 0;
+			}
+		}
+	}
+}