@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/common/InputTable.d.ts

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+export declare type InputTableProps = {
+    tableHeaders: (string | JSX.Element)[];
+    setData: (data: string[][]) => void;
+    data: string[][];
+};
+/***
+ * A table full on input fields. It auto-grows as users use it, and it provides "Remove row" functionality.
+ * The number of columns in the table is determined by the number of table headers provided, which are required.
+ * @param {string|JSX} tableHeaders The headers at the top of each column
+ * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.
+ * @param {string[][]} [data] Initial data for the table
+ */
+export declare const InputTable: ({ tableHeaders, setData, data }: InputTableProps) => JSX.Element;

package/react/components/common/InputTable.js

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useEffect } from "react";
+import { ButtonIcon } from "./ButtonIcon";
+const isLastRowEmpty = (arr) => {
+    const lastRow = arr[arr.length - 1];
+    if (!Array.isArray(lastRow)) {
+        return true;
+    }
+    const nonEmptyCells = lastRow.filter((str) => str.length > 0);
+    return nonEmptyCells.length === 0;
+};
+const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
+const emptyRow = (colCount) => Array(colCount).fill("").slice(0);
+/***
+ * A table full on input fields. It auto-grows as users use it, and it provides "Remove row" functionality.
+ * The number of columns in the table is determined by the number of table headers provided, which are required.
+ * @param {string|JSX} tableHeaders The headers at the top of each column
+ * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.
+ * @param {string[][]} [data] Initial data for the table
+ */
+export const InputTable = ({ tableHeaders, setData, data }) => {
+    const rowCount = data.length;
+    const addRow = () => {
+        setData(data.concat([emptyRow(tableHeaders.length)]));
+    };
+    const deleteRow = (rowIndex) => {
+        const newData = data.splice(0);
+        newData.splice(rowIndex, 1);
+        setData(newData);
+    };
+    useEffect(() => {
+        if (data.length === 0) {
+            setData([emptyRow(tableHeaders.length)]);
+        }
+        if (!isLastRowEmpty(data)) {
+            addRow();
+        }
+    }, [data]);
+    return (React.createElement("table", { className: "inputTable" },
+        React.createElement("thead", null,
+            React.createElement("tr", null, tableHeaders.map((th, index) => (React.createElement("th", { scope: "col", key: `th-${index}` }, th))))),
+        React.createElement("tbody", null, data.map((row, rowNumber) => Array.isArray(row) ? (React.createElement("tr", { key: `tr-${rowNumber}` },
+            row.map((td, colNumber) => (React.createElement("td", { key: `td-${rowNumber}-${colNumber}` },
+                React.createElement("input", { type: "text", id: `input-${rowNumber}-${colNumber}`, value: td, onChange: (e) => {
+                        const newData = deepCopy(data);
+                        newData[rowNumber][colNumber] = e.target.value;
+                        setData(newData);
+                    } })))),
+            rowNumber < rowCount - 1 && (React.createElement("td", null,
+                React.createElement(ButtonIcon, { icon: "times", text: "Remove row", onClick: () => {
+                        deleteRow(rowNumber);
+                    } }))))) : null))));
+};
+//# sourceMappingURL=InputTable.js.map

package/react/components/common/InputTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useEffect } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tsetData: (data: string[][]) => void;\n\tdata: string[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [data] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, setData, data }: InputTableProps) => {\n\tconst rowCount = data.length;\n\n\tconst addRow = () => {\n\t\tsetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tsetData(newData);\n\t};\n\n\tuseEffect(() => {\n\t\tif (data.length === 0) {\n\t\t\tsetData([emptyRow(tableHeaders.length)]);\n\t\t}\n\t\tif (!isLastRowEmpty(data)) {\n\t\t\taddRow();\n\t\t}\n\t}, [data]);\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tsetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}

package/react/components/common/LoadingSpinner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import "./css/loading-spinner.css";
+export declare function CircularLoadingSpinner(): JSX.Element;

package/react/components/common/LoadingSpinner.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./css/loading-spinner.css";
+export function CircularLoadingSpinner() {
+    return (React.createElement("div", { className: "modal same-spin" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 43.83 43.83" },
+            React.createElement("g", { id: "Layer_2", "data-name": "Layer 2" },
+                React.createElement("g", { id: "Layer_1-2", className: "circle_rotate", "data-name": "Layer 1" },
+                    React.createElement("circle", { className: "cls-1", cx: "21.92", cy: "21.92", r: "20.2" }),
+                    React.createElement("path", { className: "cls-2", d: "M42.11,21.92a20.2,20.2,0,0,0-20.2-20.2" }))))));
+}
+//# sourceMappingURL=LoadingSpinner.js.map

package/react/components/common/LoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/common/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,UAAU,sBAAsB;IACrC,OAAO,CACN,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,iBAAiB;YAChE,2BAAG,EAAE,EAAC,SAAS,eAAW,SAAS;gBAClC,2BAAG,EAAE,EAAC,WAAW,EAAC,SAAS,EAAC,eAAe,eAAW,SAAS;oBAC9D,gCAAQ,SAAS,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,MAAM,GAAG;oBAC3D,8BAAM,SAAS,EAAC,OAAO,EAAC,CAAC,EAAC,wCAAwC,GAAG,CAClE,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import React from \"react\";\nimport \"./css/loading-spinner.css\";\n\nexport function CircularLoadingSpinner() {\n\treturn (\n\t\t<div className=\"modal same-spin\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 43.83 43.83\">\n\t\t\t\t<g id=\"Layer_2\" data-name=\"Layer 2\">\n\t\t\t\t\t<g id=\"Layer_1-2\" className=\"circle_rotate\" data-name=\"Layer 1\">\n\t\t\t\t\t\t<circle className=\"cls-1\" cx=\"21.92\" cy=\"21.92\" r=\"20.2\" />\n\t\t\t\t\t\t<path className=\"cls-2\" d=\"M42.11,21.92a20.2,20.2,0,0,0-20.2-20.2\" />\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/common/Tab.d.ts

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { FunctionComponent } from "react";
+import "./css/tab.css";
+export declare type TabProps = {
+    children?: React.ReactNode;
+    autofocus?: number;
+};
+export declare const Tab: FunctionComponent<TabProps>;

package/react/components/common/Tab.js

@@ -0,0 +1,58 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState, useRef, useLayoutEffect } from "react";
+import "./css/tab.css";
+export const Tab = ({ children, autofocus }) => {
+    const [selectedTab, setSelectedTab] = useState(autofocus || 0);
+    const ref = useRef(null);
+    const tabList = useRef(null);
+    useLayoutEffect(() => {
+        var _a;
+        // Allow for the tab panel content to look nice with its own scrollbar,
+        // which also keeps the heading/tab group at the top of the page.
+        // It feels like css flex should do this, but I could never get it to work.
+        if (ref.current !== null) {
+            ref.current.style.height = `${window.innerHeight - (((_a = ref.current.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) || 0) - 10}px`;
+        }
+    });
+    const changeTab = (fromKey, direction) => {
+        var _a, _b;
+        const tabReferences = (_a = tabList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='tab']");
+        if (tabReferences === undefined) {
+            return;
+        }
+        if (fromKey === tabReferences.length) {
+            return;
+        }
+        (_b = tabReferences[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "horizontal-tabs", role: "tablist", ref: tabList }, React.Children.map(children, (tab, key) => React.isValidElement(tab) && (React.createElement("div", { key: `tab-${key}`, role: "tab", "aria-selected": selectedTab === key, "aria-controls": `tabpanel-${key}`, tabIndex: selectedTab === key ? 0 : -1, onKeyDown: (e) => {
+                switch (e.key) {
+                    case "Enter":
+                    case " ": {
+                        setSelectedTab(key);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowRight": {
+                        changeTab(key, 1);
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ArrowLeft": {
+                        changeTab(key, -1);
+                        e.preventDefault();
+                        break;
+                    }
+                    default: {
+                    }
+                }
+            }, onClick: () => {
+                setSelectedTab(key);
+            } }, tab.props["data-label"])))),
+        React.createElement("div", { className: "horizontal-tabs", id: "tabpanelContainer", ref: ref }, React.Children.map(children, (tab, key) => (React.createElement("div", { key: `tabpanel-${key}`, role: "tabpanel", id: `tabpanel-${key}`, className: selectedTab === key ? "visible" : "" }, tab))))));
+};
+//# sourceMappingURL=Tab.js.map

package/react/components/common/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\nimport \"./css/tab.css\";\n\nexport type TabProps = {\n\tchildren?: React.ReactNode;\n\tautofocus?: number;\n};\n\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst tabList = useRef<HTMLDivElement>(null);\n\n\tuseLayoutEffect(() => {\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\n\t\t// which also keeps the heading/tab group at the top of the page.\n\t\t// It feels like css flex should do this, but I could never get it to work.\n\t\tif (ref.current !== null) {\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\n\t\t}\n\t});\n\n\tconst changeTab = (fromKey: number, direction: 1 | -1) => {\n\t\tconst tabReferences = tabList.current?.querySelectorAll(\"[role='tab']\") as NodeListOf<HTMLElement> | undefined;\n\t\tif (tabReferences === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (fromKey === tabReferences.length) {\n\t\t\treturn;\n\t\t}\n\n\t\ttabReferences[fromKey + direction]?.focus();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"horizontal-tabs\" role=\"tablist\" ref={tabList}>\n\t\t\t\t{React.Children.map(\n\t\t\t\t\tchildren,\n\t\t\t\t\t(tab, key) =>\n\t\t\t\t\t\tReact.isValidElement(tab) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\n\t\t\t\t\t\t\t\ttabIndex={selectedTab === key ? 0 : -1}\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\tswitch (e.key) {\n\t\t\t\t\t\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\t\t\t\t\t\tcase \" \": {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcase \"ArrowRight\": {\n\t\t\t\t\t\t\t\t\t\t\tchangeTab(key, 1);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcase \"ArrowLeft\": {\n\t\t\t\t\t\t\t\t\t\t\tchangeTab(key, -1);\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdefault: {\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"horizontal-tabs\" id=\"tabpanelContainer\" ref={ref}>\n\t\t\t\t{React.Children.map(children, (tab, key) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\tid={`tabpanel-${key}`}\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tab}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}

package/react/components/common/TimeSelect.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./css/time-select.css";
+export interface TimeSelectProps {
+    label?: string;
+    initialTime?: TimeSelectTime;
+    onChange?: (time: TimeSelectTime) => void;
+    enabled?: boolean;
+    className?: string;
+    minuteInterval?: number;
+}
+export declare type TimeSelectTime = {
+    hour: number;
+    minute: number;
+    meridiem?: string;
+};
+export declare const TimeSelect: React.FunctionComponent<TimeSelectProps>;

package/react/components/common/TimeSelect.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import "./css/time-select.css";
+import DefaultDropdownButton from "../shared/DefaultDropdownButton";
+const DEFAULT_VALUE = {
+    hour: 4,
+    minute: 0,
+    meridiem: "AM",
+};
+export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onChange, className = "", minuteInterval = 15, }) => {
+    /**
+     * Prevents change event from triggering on initial setup
+     */
+    const [changed, setChanged] = useState(false);
+    const [time, setTime] = useState(initialTime !== null && initialTime !== void 0 ? initialTime : DEFAULT_VALUE);
+    let wrapClasses = `time-select ${className}`;
+    if (!enabled) {
+        wrapClasses = `${wrapClasses} disabled-time-select`;
+    }
+    // Create an array 1-12.
+    let HOURS = [];
+    for (let i = 1; i < 13; i++) {
+        HOURS.push(i);
+    }
+    let MINUTES = ["00"];
+    for (let i = 1; i < 60; i++) {
+        if (i % minuteInterval == 0) {
+            MINUTES.push(i);
+        }
+    }
+    /**
+     * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.
+     * e.g., 8PM (20) => 8AM (8).
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
+    const setHour = (e) => {
+        let hour = Number(e);
+        if (hour < 12 && time.meridiem === "PM") {
+            hour = hour + 12;
+        }
+        else if (hour > 12 && time.meridiem === "AM") {
+            hour = hour - 12;
+        }
+        else if (time.meridiem === "AM" && hour === 12) {
+            hour = 0;
+        }
+        setTime(Object.assign(Object.assign({}, time), { hour }));
+    };
+    /**
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
+    const setMinute = (e) => {
+        const minute = Number(e);
+        time.minute = minute;
+        setTime(Object.assign(Object.assign({}, time), { minute }));
+    };
+    /**
+     * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook
+     * @param {event} e
+     */
+    const setMeridiem = (e) => {
+        const meridiem = e;
+        setTime(Object.assign(Object.assign({}, time), { meridiem }));
+    };
+    const correctMeridiem = () => {
+        if (!time.meridiem) {
+            let localMeridiem = "AM";
+            if (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {
+                localMeridiem = "PM";
+            }
+            setMeridiem(localMeridiem);
+        }
+    };
+    /**
+     * The meridiem has changed, update the hour
+     */
+    useEffect(() => {
+        setHour(time.hour);
+    }, [time.meridiem]);
+    /**
+     * Call on change when the hour and minute values have changed
+     */
+    useEffect(() => {
+        correctMeridiem();
+        if (enabled && onChange && changed) {
+            onChange(time);
+        }
+    }, [time.hour, time.minute]);
+    const hourOptions = HOURS.map((hour) => {
+        return {
+            optionLabel: hour,
+            optionValue: hour,
+            clickHandler: () => {
+                setChanged(true);
+                setHour(hour);
+            },
+        };
+    });
+    const minuteOptions = MINUTES.map((minute) => {
+        return {
+            optionLabel: minute,
+            optionValue: minute,
+            clickHandler: () => {
+                setChanged(true);
+                setMinute(minute);
+            },
+        };
+    });
+    const getDisplayHour = () => {
+        if (time.meridiem === "AM" && time.hour === 0) {
+            return 12;
+        }
+        else if (time.meridiem === "PM" && time.hour > 12) {
+            return time.hour - 12;
+        }
+        else {
+            return time.hour;
+        }
+    };
+    const getDisplayMinute = () => {
+        if (time.minute === 0)
+            return "00";
+        else {
+            return String(time.minute).length === 1 ? `0${time.minute}` : time.minute;
+        }
+    };
+    return (React.createElement("div", { className: wrapClasses, style: { display: "flex" } },
+        React.createElement("span", { className: "time-select-label" }, label),
+        React.createElement("div", { className: "row-section", style: { width: "10px", marginRight: "40px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, buttonLabel: `Hour, ${getDisplayHour().toString()}`, defaultSelection: {
+                    optionLabel: getDisplayHour().toString(),
+                    optionValue: getDisplayHour(),
+                    clickHandler: () => {
+                        setHour(getDisplayHour());
+                    },
+                }, enabled: enabled })),
+        React.createElement("div", { className: "row-section", style: { marginLeft: 30, marginRight: 10, marginTop: 5 } }, "\u00A0:\u00A0"),
+        React.createElement("div", { style: { width: "10px", marginRight: "65px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, buttonLabel: `Minute, ${getDisplayMinute()}`, defaultSelection: {
+                    optionLabel: getDisplayMinute(),
+                    optionValue: time.minute,
+                    clickHandler: () => {
+                        setMinute(time.minute);
+                    },
+                }, enabled: enabled })),
+        "\u00A0",
+        React.createElement("div", { className: "row-section", style: { width: "10px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: [
+                    {
+                        optionLabel: "AM",
+                        optionValue: "AM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("AM");
+                        },
+                    },
+                    {
+                        optionLabel: "PM",
+                        optionValue: "PM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("PM");
+                        },
+                    },
+                ], defaultSelection: {
+                    optionLabel: time.meridiem,
+                    optionValue: time.meridiem,
+                    clickHandler: () => {
+                        setHour(time.meridiem);
+                    },
+                }, enabled: enabled }))));
+};
+//# sourceMappingURL=TimeSelect.js.map

package/react/components/common/TimeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../src/components/common/TimeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/time-select.css\";\nimport DefaultDropdownButton from \"../shared/DefaultDropdownButton\";\n\nexport interface TimeSelectProps {\n\tlabel?: string;\n\tinitialTime?: TimeSelectTime;\n\tonChange?: (time: TimeSelectTime) => void;\n\tenabled?: boolean;\n\tclassName?: string;\n\tminuteInterval?: number;\n}\n\nexport type TimeSelectTime = {\n\thour: number;\n\tminute: number;\n\tmeridiem?: string;\n};\n\nconst DEFAULT_VALUE: TimeSelectTime = {\n\thour: 4,\n\tminute: 0,\n\tmeridiem: \"AM\",\n};\n\nexport const TimeSelect: React.FunctionComponent<TimeSelectProps> = ({\n\tinitialTime,\n\tenabled = true,\n\tlabel = \"Time:\",\n\tonChange,\n\tclassName = \"\",\n\tminuteInterval = 15,\n}) => {\n\t/**\n\t * Prevents change event from triggering on initial setup\n\t */\n\tconst [changed, setChanged] = useState<boolean>(false);\n\tconst [time, setTime] = useState<TimeSelectTime>(initialTime ?? DEFAULT_VALUE);\n\n\tlet wrapClasses = `time-select ${className}`;\n\tif (!enabled) {\n\t\twrapClasses = `${wrapClasses} disabled-time-select`;\n\t}\n\n\t// Create an array 1-12.\n\tlet HOURS: Array<number> = [];\n\tfor (let i = 1; i < 13; i++) {\n\t\tHOURS.push(i);\n\t}\n\n\tlet MINUTES: any = [\"00\"];\n\tfor (let i = 1; i < 60; i++) {\n\t\tif (i % minuteInterval == 0) {\n\t\t\tMINUTES.push(i);\n\t\t}\n\t}\n\n\t/**\n\t * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.\n\t * e.g., 8PM (20) => 8AM (8).\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setHour = (e: any) => {\n\t\tlet hour = Number(e);\n\t\tif (hour < 12 && time.meridiem === \"PM\") {\n\t\t\thour = hour + 12;\n\t\t} else if (hour > 12 && time.meridiem === \"AM\") {\n\t\t\thour = hour - 12;\n\t\t} else if (time.meridiem === \"AM\" && hour === 12) {\n\t\t\thour = 0;\n\t\t}\n\n\t\tsetTime({ ...time, hour });\n\t};\n\n\t/**\n\t * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.\n\t * @param {event} e\n\t */\n\tconst setMinute = (e: any) => {\n\t\tconst minute = Number(e);\n\t\ttime.minute = minute;\n\t\tsetTime({ ...time, minute });\n\t};\n\n\t/**\n\t * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook\n\t * @param {event} e\n\t */\n\tconst setMeridiem = (e: any) => {\n\t\tconst meridiem = e;\n\t\tsetTime({ ...time, meridiem });\n\t};\n\n\tconst correctMeridiem = () => {\n\t\tif (!time.meridiem) {\n\t\t\tlet localMeridiem = \"AM\";\n\t\t\tif (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {\n\t\t\t\tlocalMeridiem = \"PM\";\n\t\t\t}\n\t\t\tsetMeridiem(localMeridiem);\n\t\t}\n\t};\n\n\t/**\n\t * The meridiem has changed, update the hour\n\t */\n\tuseEffect(() => {\n\t\tsetHour(time.hour);\n\t}, [time.meridiem]);\n\n\t/**\n\t * Call on change when the hour and minute values have changed\n\t */\n\tuseEffect(() => {\n\t\tcorrectMeridiem();\n\t\tif (enabled && onChange && changed) {\n\t\t\tonChange(time);\n\t\t}\n\t}, [time.hour, time.minute]);\n\n\tconst hourOptions: Array<any> = HOURS.map((hour: number) => {\n\t\treturn {\n\t\t\toptionLabel: hour,\n\t\t\toptionValue: hour,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetHour(hour);\n\t\t\t},\n\t\t};\n\t});\n\tconst minuteOptions: Array<any> = MINUTES.map((minute: any) => {\n\t\treturn {\n\t\t\toptionLabel: minute,\n\t\t\toptionValue: minute,\n\t\t\tclickHandler: () => {\n\t\t\t\tsetChanged(true);\n\t\t\t\tsetMinute(minute);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst getDisplayHour = () => {\n\t\tif (time.meridiem === \"AM\" && time.hour === 0) {\n\t\t\treturn 12;\n\t\t} else if (time.meridiem === \"PM\" && time.hour > 12) {\n\t\t\treturn time.hour - 12;\n\t\t} else {\n\t\t\treturn time.hour;\n\t\t}\n\t};\n\n\tconst getDisplayMinute = () => {\n\t\tif (time.minute === 0) return \"00\";\n\t\telse {\n\t\t\treturn String(time.minute).length === 1 ? `0${time.minute}` : time.minute;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={wrapClasses} style={{ display: \"flex\" }}>\n\t\t\t<span className=\"time-select-label\">{label}</span>\n\t\t\t{/* HOURS */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\", marginRight: \"40px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={hourOptions}\n\t\t\t\t\tbuttonLabel={`Hour, ${getDisplayHour().toString()}`}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayHour().toString(),\n\t\t\t\t\t\toptionValue: getDisplayHour(),\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(getDisplayHour());\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"row-section\" style={{ marginLeft: 30, marginRight: 10, marginTop: 5 }}>\n\t\t\t\t&nbsp;:&nbsp;\n\t\t\t</div>\n\t\t\t{/* MINUTES */}\n\t\t\t<div style={{ width: \"10px\", marginRight: \"65px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={minuteOptions}\n\t\t\t\t\tbuttonLabel={`Minute, ${getDisplayMinute() as string}`}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: getDisplayMinute() as string,\n\t\t\t\t\t\toptionValue: time.minute,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetMinute(time.minute);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t&nbsp;\n\t\t\t{/* MERIDIEM */}\n\t\t\t<div className=\"row-section\" style={{ width: \"10px\" }}>\n\t\t\t\t<DefaultDropdownButton\n\t\t\t\t\tclassNames={\"push-right\"}\n\t\t\t\t\tallowEmpty={false}\n\t\t\t\t\tcaretLocation={\"right\"}\n\t\t\t\t\tbuttonOptions={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"AM\",\n\t\t\t\t\t\t\toptionValue: \"AM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"AM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\toptionLabel: \"PM\",\n\t\t\t\t\t\t\toptionValue: \"PM\",\n\t\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\t\tsetChanged(true);\n\t\t\t\t\t\t\t\tsetMeridiem(\"PM\");\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tdefaultSelection={{\n\t\t\t\t\t\toptionLabel: time.meridiem as string,\n\t\t\t\t\t\toptionValue: time.meridiem,\n\t\t\t\t\t\tclickHandler: () => {\n\t\t\t\t\t\t\tsetHour(time.meridiem);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tenabled={enabled}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/Tooltip.d.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+import "./css/tooltip.css";
+export declare type TooltipProps = {
+    type?: "info" | "error" | "warn" | "lock";
+    altClassName?: string;
+    position?: string;
+    children?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare const Tooltip: ({ type, position, children, altClassName, onClick, }: TooltipProps) => JSX.Element;

package/react/components/common/Tooltip.js

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState, useRef } from "react";
+import "./css/tooltip.css";
+import { FinsembleIcon } from "./FinsembleIcon";
+export const Tooltip = ({ type = "info", position = "right", children = "", altClassName, onClick = () => { }, }) => {
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    // If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.
+    // This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.
+    const tooltipContentRef = useRef(null);
+    const pos = tooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth
+        ? "left"
+        : position;
+    const FinsembleIconLockedOrQuestion = type === "lock" ? (React.createElement(FinsembleIcon, { icon: "lock" })) : (React.createElement(FinsembleIcon, { icon: "question-circle" }));
+    const FinsembleIconForType = type === "error" || type === "warn" ? (React.createElement(FinsembleIcon, { icon: "exclamation-circle" })) : (FinsembleIconLockedOrQuestion);
+    return (React.createElement("div", { className: ["tooltip", `tooltip-position-content-${pos}`].join(" "), tabIndex: 0, role: "tooltip", "aria-label": children, onMouseOver: () => {
+            setTooltipOpen(true);
+        }, onFocus: () => {
+            setTooltipOpen(true);
+        }, onMouseLeave: () => {
+            setTooltipOpen(false);
+        }, onBlur: () => {
+            setTooltipOpen(false);
+        }, onClick: onClick },
+        altClassName ? (React.createElement("div", { className: altClassName })) : (React.createElement("div", { className: ["tooltip-icon", `tooltip-icon-${type}`].join(" ") }, FinsembleIconForType)),
+        React.createElement("div", { ref: tooltipContentRef, className: ["tooltip-content", tooltipOpen ? "visible" : ""].join(" ") }, children)));
+};
+//# sourceMappingURL=Tooltip.js.map

package/react/components/common/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,mHAAmH;IACnH,wGAAwG;IACxG,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,MAAM,6BAA6B,GAClC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACjB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CAAC;IACH,MAAM,oBAAoB,GACzB,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,CACH,6BAA6B,CAC7B,CAAC;IAEH,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,oBAAoB,CAAO,CAChG;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef } from \"react\";\nimport \"./css/tooltip.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport type TooltipProps = {\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\n\taltClassName?: string;\n\tposition?: string;\n\tchildren?: string;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nexport const Tooltip = ({\n\ttype = \"info\",\n\tposition = \"right\",\n\tchildren = \"\",\n\taltClassName,\n\tonClick = () => {},\n}: TooltipProps) => {\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\n\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\n\tconst pos =\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\n\t\t\t? \"left\"\n\t\t\t: position;\n\n\tconst FinsembleIconLockedOrQuestion =\n\t\ttype === \"lock\" ? (\n\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\n\t\t) : (\n\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\n\t\t);\n\tconst FinsembleIconForType =\n\t\ttype === \"error\" || type === \"warn\" ? (\n\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\n\t\t) : (\n\t\t\tFinsembleIconLockedOrQuestion\n\t\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\n\t\t\ttabIndex={0}\n\t\t\trole=\"tooltip\"\n\t\t\taria-label={children}\n\t\t\tonMouseOver={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonFocus={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonBlur={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{altClassName ? (\n\t\t\t\t<div className={altClassName}></div>\n\t\t\t) : (\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>{FinsembleIconForType}</div>\n\t\t\t)}\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/css/FinsembleToggle.css

@@ -0,0 +1,22 @@
+.finsembleToggle {
+	background-color: var(--core-primary);
+	padding: 4px;
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label.disabled {
+	opacity: 0.5;
+}
+
+.finsembleToggle .toggle-text-label {
+	border-radius: 5px;
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="true"] {
+	background-color: var(--accent-primary-1);
+}
+
+.finsembleToggle .toggle-text-label[aria-checked="false"]:focus,
+.finsembleToggle .toggle-text-label[aria-checked="false"]:hover {
+	background-color: var(--core-primary-3);
+}

package/react/components/common/css/accordion.css

@@ -0,0 +1,100 @@
+.accordion {
+	width: 100%;
+}
+
+.accordion-cb {
+	display: none;
+}
+
+.accordion.medium > button {
+	font-size: 1.2em;
+}
+
+.accordion.small .finsemble-icon-caret {
+	font-size: 0.8em;
+}
+
+.accordion button {
+	width: 100%;
+	display: flex;
+	justify-content: left;
+	padding: 0.5em 0;
+}
+
+.accordion button:hover {
+	background: #373b43;
+}
+
+.accordion > .accordion-summary {
+	margin: 0 24px 0.5em;
+}
+
+.accordion > .accordion-content {
+	margin: 0.5em 22px 0;
+	padding-bottom: 0;
+}
+
+.accordion > button .accordion-caret {
+	transform: rotate(-90deg) translate(0.1em);
+	flex-basis: 1.5em;
+}
+
+.accordion input:checked + button .accordion-caret {
+	transform: rotate(0) translate(0, 0.2em);
+}
+
+.accordion input:not(:checked) ~ .accordion-content {
+	display: none;
+}
+
+input:checked ~ .accordion-content {
+	display: block;
+}
+
+/** Animations */
+.accordion.enter-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotate-icon;
+}
+
+.accordion.exit-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotate-icon;
+	animation-direction: reverse;
+}
+
+.accordion.enter-active > .accordion-content {
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: open-content;
+}
+
+.accordion.exit-active > .accordion-content {
+	/* stylelint-disable-next-line declaration-no-important */
+	display: block !important;
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: open-content;
+	animation-direction: reverse;
+	max-height: 0;
+}
+
+@keyframes rotate-icon {
+	from {
+		transform: rotate(-90deg) translate(0.1em);
+	}
+
+	to {
+		transform: rotate(0) translate(0, 0.2em);
+	}
+}
+
+@keyframes open-content {
+	from {
+		max-height: 1px;
+	}
+
+	to {
+		max-height: 2000px;
+	}
+}