@alixpartners/ui-components 1.22.0 → 1.22.2

package/dist/esm/components/ApWidgets/ApTrendChartWidget/utils.js

@@ -1,34 +1,34 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaleLinear = void 0;
-exports.scaleLinear = function (config) {
-    var _a = __read(config.domain, 2), x1 = _a[0], x2 = _a[1];
-    var _b = __read(config.range, 2), y1 = _b[0], y2 = _b[1];
-    var dx = x1 - x2;
-    var dy = y1 - y2;
-    if (dx === 0) {
-        return function () { return x1; };
-    }
-    var slope = dy / dx;
-    var yintercept = y1 - slope * x1;
-    return function (value) {
-        return slope * value + yintercept;
-    };
-};
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleLinear = void 0;
+exports.scaleLinear = function (config) {
+    var _a = __read(config.domain, 2), x1 = _a[0], x2 = _a[1];
+    var _b = __read(config.range, 2), y1 = _b[0], y2 = _b[1];
+    var dx = x1 - x2;
+    var dy = y1 - y2;
+    if (dx === 0) {
+        return function () { return x1; };
+    }
+    var slope = dy / dx;
+    var yintercept = y1 - slope * x1;
+    return function (value) {
+        return slope * value + yintercept;
+    };
+};
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/ApWidgets/ApTrendWidget/ApTrendWidget.js

@@ -1,90 +1,90 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApTrendWidget = void 0;
-var React = require("react");
-var ApLoaderDefault_1 = require("../../ApLoaderDefault");
-var ApLoaderText_1 = require("../../ApLoaderText");
-var ApWidgetBigValue_1 = require("../ApWidgetBigValue");
-var ApWidgetCard_1 = require("../ApWidgetCard");
-var ApWidgetErrorMessage_1 = require("../ApWidgetErrorMessage");
-var ApWidgetMidValue_1 = require("../ApWidgetMidValue");
-var ApWidgetName_1 = require("../ApWidgetName");
-var styles_1 = require("./styles");
-var SINGLE_ROW_VALUE_HEIGTH = 50;
-exports.ApTrendWidget = function (_a) {
-    var data = _a.data, dataError = _a.dataError, config = _a.config, props = __rest(_a, ["data", "dataError", "config"]);
-    var valueRef = React.useRef();
-    var _b = __read(React.useState(0), 2), valueElHeight = _b[0], setValueElHeight = _b[1];
-    React.useLayoutEffect(function () {
-        if (valueRef && valueRef.current) {
-            setValueElHeight(valueRef.current.clientHeight);
-        }
-    });
-    // truncate data list, to show items that can fit into available height
-    var isValueSingleRow = valueElHeight <= SINGLE_ROW_VALUE_HEIGTH;
-    var dataListMaxLength = isValueSingleRow ? 3 : 2;
-    if (config && config.heightRatio === 2) {
-        dataListMaxLength = isValueSingleRow ? 12 : 11;
-    }
-    return (React.createElement(ApWidgetCard_1.ApWidgetCard, __assign({}, props),
-        React.createElement(styles_1.StyledWidgetWrapper, null,
-            config && (React.createElement(ApWidgetName_1.ApWidgetName, { name: config.name, iconType: config.iconType })),
-            dataError ? (React.createElement(styles_1.StyledWidgetBody, null,
-                React.createElement(ApWidgetErrorMessage_1.ApWidgetErrorMessage, null))) : !data ? (React.createElement(styles_1.StyledWidgetBody, null,
-                React.createElement(ApLoaderDefault_1.ApLoaderDefault, { loaderText: function () { return React.createElement(ApLoaderText_1.ApLoaderText, null); } }))) : (React.createElement(styles_1.Container, null,
-                React.createElement(styles_1.TextWrapper, { ref: valueRef },
-                    React.createElement(ApWidgetBigValue_1.ApWidgetBigValue, null, data.value),
-                    React.createElement(ApWidgetMidValue_1.ApWidgetMidValue, null,
-                        React.createElement(styles_1.ValueHelperText, null, "vendors in\u00A0"),
-                        React.createElement(styles_1.ValueText, null, data.label))),
-                React.createElement(styles_1.Table, null,
-                    React.createElement("thead", null,
-                        React.createElement("tr", null,
-                            React.createElement(styles_1.TableHeader, null, "Top Categories"),
-                            React.createElement(styles_1.TableHeader, null, "Change"))),
-                    React.createElement("tbody", null, data.list &&
-                        data.list
-                            .slice(0, dataListMaxLength)
-                            .map(function (listItem, index) { return (React.createElement(styles_1.TableRow, { key: index },
-                            React.createElement(styles_1.TableCell, null, listItem.label),
-                            React.createElement(styles_1.TableValueCell, null, listItem.value))); }))))))));
-};
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApTrendWidget = void 0;
+var React = require("react");
+var ApLoaderDefault_1 = require("../../ApLoaderDefault");
+var ApLoaderText_1 = require("../../ApLoaderText");
+var ApWidgetBigValue_1 = require("../ApWidgetBigValue");
+var ApWidgetCard_1 = require("../ApWidgetCard");
+var ApWidgetErrorMessage_1 = require("../ApWidgetErrorMessage");
+var ApWidgetMidValue_1 = require("../ApWidgetMidValue");
+var ApWidgetName_1 = require("../ApWidgetName");
+var styles_1 = require("./styles");
+var SINGLE_ROW_VALUE_HEIGTH = 50;
+exports.ApTrendWidget = function (_a) {
+    var data = _a.data, dataError = _a.dataError, config = _a.config, props = __rest(_a, ["data", "dataError", "config"]);
+    var valueRef = React.useRef();
+    var _b = __read(React.useState(0), 2), valueElHeight = _b[0], setValueElHeight = _b[1];
+    React.useLayoutEffect(function () {
+        if (valueRef && valueRef.current) {
+            setValueElHeight(valueRef.current.clientHeight);
+        }
+    });
+    // truncate data list, to show items that can fit into available height
+    var isValueSingleRow = valueElHeight <= SINGLE_ROW_VALUE_HEIGTH;
+    var dataListMaxLength = isValueSingleRow ? 3 : 2;
+    if (config && config.heightRatio === 2) {
+        dataListMaxLength = isValueSingleRow ? 12 : 11;
+    }
+    return (React.createElement(ApWidgetCard_1.ApWidgetCard, __assign({}, props),
+        React.createElement(styles_1.StyledWidgetWrapper, null,
+            config && (React.createElement(ApWidgetName_1.ApWidgetName, { name: config.name, iconType: config.iconType })),
+            dataError ? (React.createElement(styles_1.StyledWidgetBody, null,
+                React.createElement(ApWidgetErrorMessage_1.ApWidgetErrorMessage, null))) : !data ? (React.createElement(styles_1.StyledWidgetBody, null,
+                React.createElement(ApLoaderDefault_1.ApLoaderDefault, { loaderText: function () { return React.createElement(ApLoaderText_1.ApLoaderText, null); } }))) : (React.createElement(styles_1.Container, null,
+                React.createElement(styles_1.TextWrapper, { ref: valueRef },
+                    React.createElement(ApWidgetBigValue_1.ApWidgetBigValue, null, data.value),
+                    React.createElement(ApWidgetMidValue_1.ApWidgetMidValue, null,
+                        React.createElement(styles_1.ValueHelperText, null, "vendors in\u00A0"),
+                        React.createElement(styles_1.ValueText, null, data.label))),
+                React.createElement(styles_1.Table, null,
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement(styles_1.TableHeader, null, "Top Categories"),
+                            React.createElement(styles_1.TableHeader, null, "Change"))),
+                    React.createElement("tbody", null, data.list &&
+                        data.list
+                            .slice(0, dataListMaxLength)
+                            .map(function (listItem, index) { return (React.createElement(styles_1.TableRow, { key: index },
+                            React.createElement(styles_1.TableCell, null, listItem.label),
+                            React.createElement(styles_1.TableValueCell, null, listItem.value))); }))))))));
+};
 //# sourceMappingURL=ApTrendWidget.js.map

package/dist/esm/components/ApWidgets/ApTrendWidget/ArrowIcon.js

@@ -1,40 +1,40 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowIcon = void 0;
-var React = require("react");
-exports.ArrowIcon = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (React.createElement("svg", __assign({ viewBox: "0 0 16 32" }, props, { className: "ap-arrow-svg" + (className ? " " + className : '') }),
-        React.createElement("defs", null,
-            React.createElement("polygon", { id: "a", points: "16.02 14 -8 14 -8 18 16.02 18 16.02 24 24 16 16.02 8" })),
-        React.createElement("g", { fill: "none", fillRule: "evenodd" },
-            React.createElement("mask", { fill: "white" },
-                React.createElement("use", { xlinkHref: "#a" })),
-            React.createElement("use", { transform: "translate(8 16) rotate(-90) translate(-8 -16)", fill: "currentColor", fillRule: "nonzero", xlinkHref: "#a" }))));
-};
-{
-    /* */
-}
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowIcon = void 0;
+var React = require("react");
+exports.ArrowIcon = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("svg", __assign({ viewBox: "0 0 16 32" }, props, { className: "ap-arrow-svg" + (className ? " " + className : '') }),
+        React.createElement("defs", null,
+            React.createElement("polygon", { id: "a", points: "16.02 14 -8 14 -8 18 16.02 18 16.02 24 24 16 16.02 8" })),
+        React.createElement("g", { fill: "none", fillRule: "evenodd" },
+            React.createElement("mask", { fill: "white" },
+                React.createElement("use", { xlinkHref: "#a" })),
+            React.createElement("use", { transform: "translate(8 16) rotate(-90) translate(-8 -16)", fill: "currentColor", fillRule: "nonzero", xlinkHref: "#a" }))));
+};
+{
+    /* */
+}
 //# sourceMappingURL=ArrowIcon.js.map

package/dist/esm/components/ApWidgets/ApTrendWidget/index.js

@@ -1,14 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ApTrendWidget"), exports);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ApTrendWidget"), exports);
 //# sourceMappingURL=index.js.map

package/dist/esm/components/ApWidgets/ApTrendWidget/mockData.js

@@ -1,62 +1,62 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.props = void 0;
-var ApWidgetIcon_1 = require("../ApWidgetIcon");
-exports.props = {
-    config: { name: 'Current gross margin', iconType: ApWidgetIcon_1.ApWidgetIconTypes.sxr },
-    data: {
-        label: 'December, 2020',
-        list: [
-            {
-                label: 'Outsourced Services',
-                value: '+231',
-            },
-            {
-                label: 'Facilities Management',
-                value: '0',
-            },
-            {
-                label: 'Long Long Loooooong Loong IT Consulting Other Services',
-                value: '-12',
-            },
-            {
-                label: 'Second Outsourced Services',
-                value: '+231',
-            },
-            {
-                label: 'Second Facilities Management',
-                value: '0',
-            },
-            {
-                label: 'Second Long Long Loooooong Loong IT Consulting Other Services',
-                value: '-12',
-            },
-            {
-                label: 'Third Outsourced Services',
-                value: '+231',
-            },
-            {
-                label: 'Third Facilities Management',
-                value: '0',
-            },
-            {
-                label: 'Third Long Long Loooooong Loong IT Consulting Other Services',
-                value: '-12',
-            },
-            {
-                label: 'Fourth Outsourced Services',
-                value: '+231',
-            },
-            {
-                label: 'Fourth Facilities Management',
-                value: '0',
-            },
-            {
-                label: 'Fourth Long Long Loooooong Loong IT Consulting Other Services',
-                value: '-12',
-            },
-        ],
-        value: '+1,245',
-    },
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.props = void 0;
+var ApWidgetIcon_1 = require("../ApWidgetIcon");
+exports.props = {
+    config: { name: 'Current gross margin', iconType: ApWidgetIcon_1.ApWidgetIconTypes.sxr },
+    data: {
+        label: 'December, 2020',
+        list: [
+            {
+                label: 'Outsourced Services',
+                value: '+231',
+            },
+            {
+                label: 'Facilities Management',
+                value: '0',
+            },
+            {
+                label: 'Long Long Loooooong Loong IT Consulting Other Services',
+                value: '-12',
+            },
+            {
+                label: 'Second Outsourced Services',
+                value: '+231',
+            },
+            {
+                label: 'Second Facilities Management',
+                value: '0',
+            },
+            {
+                label: 'Second Long Long Loooooong Loong IT Consulting Other Services',
+                value: '-12',
+            },
+            {
+                label: 'Third Outsourced Services',
+                value: '+231',
+            },
+            {
+                label: 'Third Facilities Management',
+                value: '0',
+            },
+            {
+                label: 'Third Long Long Loooooong Loong IT Consulting Other Services',
+                value: '-12',
+            },
+            {
+                label: 'Fourth Outsourced Services',
+                value: '+231',
+            },
+            {
+                label: 'Fourth Facilities Management',
+                value: '0',
+            },
+            {
+                label: 'Fourth Long Long Loooooong Loong IT Consulting Other Services',
+                value: '-12',
+            },
+        ],
+        value: '+1,245',
+    },
+};
 //# sourceMappingURL=mockData.js.map

package/dist/esm/components/ApWidgets/ApTrendWidget/styles.js

@@ -1,61 +1,61 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableHeader = exports.TableRow = exports.TableValueCell = exports.TableCell = exports.Table = exports.Value = exports.NameDetail = exports.TextWrapper = exports.Container = exports.ValueTextWrapper = exports.ValueText = exports.ValueHelperText = exports.StyledWidgetWrapper = exports.StyledWidgetBody = exports.ArrowDownIconSmall = exports.ArrowIconSmall = exports.ArrowIcon = void 0;
-var React = require("react");
-var styled_components_1 = require("styled-components");
-var theme_1 = require("../../../utils/theme");
-var ArrowIcon_1 = require("./ArrowIcon");
-var ApWidgetName_1 = require("../ApWidgetName");
-exports.ArrowIcon = styled_components_1.default(function (_a) {
-    var isSmall = _a.isSmall, props = __rest(_a, ["isSmall"]);
-    return (React.createElement(ArrowIcon_1.ArrowIcon, __assign({}, props)));
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: 16px;\n  color: ", ";\n  margin: 8px 16px 8px 0;\n\n  ", ";\n"], ["\n  display: inline-block;\n  width: 16px;\n  color: ", ";\n  margin: 8px 16px 8px 0;\n\n  ",
-    ";\n"])), theme_1.colors.green1, function (_a) {
-    var _b = _a.isSmall, isSmall = _b === void 0 ? false : _b;
-    return isSmall && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: -12px;\n    "], ["\n      margin-top: -12px;\n    "])));
-});
-exports.ArrowIconSmall = styled_components_1.default(exports.ArrowIcon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 5px;\n  margin: 0;\n"], ["\n  width: 5px;\n  margin: 0;\n"])));
-exports.ArrowDownIconSmall = styled_components_1.default(exports.ArrowIconSmall)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  color: ", ";\n"], ["\n  transform: rotate(180deg);\n  color: ", ";\n"])), theme_1.colors.black);
-exports.StyledWidgetBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n"])));
-exports.StyledWidgetWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-exports.ValueHelperText = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: flex-end;\n  white-space: nowrap;\n  display: inline-block;\n"], ["\n  align-self: flex-end;\n  white-space: nowrap;\n  display: inline-block;\n"])));
-exports.ValueText = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: flex-end;\n  flex-grow: 1;\n"], ["\n  align-self: flex-end;\n  flex-grow: 1;\n"])));
-exports.ValueTextWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 13px;\n  flex: 1 1 157px;\n  font-weight: 500;\n  letter-spacing: 0.3px;\n  font-size: 23px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 13px;\n  flex: 1 1 157px;\n  font-weight: 500;\n  letter-spacing: 0.3px;\n  font-size: 23px;\n"])));
-exports.Container = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n"])));
-exports.TextWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-bottom: 20px;\n  align-items: center;\n\n  & > div:last-child {\n    margin-top: 4px;\n  }\n"], ["\n  margin-bottom: 20px;\n  align-items: center;\n\n  & > div:last-child {\n    margin-top: 4px;\n  }\n"])));
-exports.NameDetail = styled_components_1.default(ApWidgetName_1.ApWidgetName)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 1em;\n"], ["\n  color: ", ";\n  margin-left: 1em;\n"])), theme_1.colors.grey7);
-exports.Value = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: 83px;\n  font-weight: 500;\n  letter-spacing: 0.03px;\n  color: ", ";\n  line-height: 88px;\n  margin-right: 24px;\n"], ["\n  font-size: 83px;\n  font-weight: 500;\n  letter-spacing: 0.03px;\n  color: ", ";\n  line-height: 88px;\n  margin-right: 24px;\n"])), theme_1.colors.grey7);
-exports.Table = styled_components_1.default.table(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border: none;\n  table-layout: fixed;\n  color: ", ";\n  font-size: 13px;\n  border-spacing: 0;\n"], ["\n  border: none;\n  table-layout: fixed;\n  color: ", ";\n  font-size: 13px;\n  border-spacing: 0;\n"])), theme_1.colors.grey8);
-var cellCss = styled_components_1.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  letter-spacing: 0.8px;\n  padding: 4px 0;\n  line-height: 19px;\n"], ["\n  border-bottom: 1px solid ", ";\n  letter-spacing: 0.8px;\n  padding: 4px 0;\n  line-height: 19px;\n"])), theme_1.colors.grey2);
-exports.TableCell = styled_components_1.default.td(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n  max-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  ", ";\n  max-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), cellCss);
-exports.TableValueCell = styled_components_1.default.td(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n  width: 1%;\n  padding-left: 15px;\n  text-align: right;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  color: ", ";\n"], ["\n  ", ";\n  width: 1%;\n  padding-left: 15px;\n  text-align: right;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  color: ", ";\n"])), cellCss, theme_1.colors.grey7);
-exports.TableRow = styled_components_1.default.tr(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  &:last-child {\n    ", ", ", " {\n      border-bottom: none;\n    }\n  }\n"], ["\n  &:last-child {\n    ", ", ", " {\n      border-bottom: none;\n    }\n  }\n"])), exports.TableCell, exports.TableValueCell);
-exports.TableHeader = styled_components_1.default.th(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: 11px;\n  text-align: right;\n  font-weight: 200;\n  padding-bottom: 4px;\n\n  &:first-child {\n    text-align: left;\n  }\n\n  &:last-child {\n    padding-left: 5px;\n  }\n"], ["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: 11px;\n  text-align: right;\n  font-weight: 200;\n  padding-bottom: 4px;\n\n  &:first-child {\n    text-align: left;\n  }\n\n  &:last-child {\n    padding-left: 5px;\n  }\n"])), theme_1.colors.grey5);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeader = exports.TableRow = exports.TableValueCell = exports.TableCell = exports.Table = exports.Value = exports.NameDetail = exports.TextWrapper = exports.Container = exports.ValueTextWrapper = exports.ValueText = exports.ValueHelperText = exports.StyledWidgetWrapper = exports.StyledWidgetBody = exports.ArrowDownIconSmall = exports.ArrowIconSmall = exports.ArrowIcon = void 0;
+var React = require("react");
+var styled_components_1 = require("styled-components");
+var theme_1 = require("../../../utils/theme");
+var ArrowIcon_1 = require("./ArrowIcon");
+var ApWidgetName_1 = require("../ApWidgetName");
+exports.ArrowIcon = styled_components_1.default(function (_a) {
+    var isSmall = _a.isSmall, props = __rest(_a, ["isSmall"]);
+    return (React.createElement(ArrowIcon_1.ArrowIcon, __assign({}, props)));
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: 16px;\n  color: ", ";\n  margin: 8px 16px 8px 0;\n\n  ", ";\n"], ["\n  display: inline-block;\n  width: 16px;\n  color: ", ";\n  margin: 8px 16px 8px 0;\n\n  ",
+    ";\n"])), theme_1.colors.green1, function (_a) {
+    var _b = _a.isSmall, isSmall = _b === void 0 ? false : _b;
+    return isSmall && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: -12px;\n    "], ["\n      margin-top: -12px;\n    "])));
+});
+exports.ArrowIconSmall = styled_components_1.default(exports.ArrowIcon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 5px;\n  margin: 0;\n"], ["\n  width: 5px;\n  margin: 0;\n"])));
+exports.ArrowDownIconSmall = styled_components_1.default(exports.ArrowIconSmall)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  color: ", ";\n"], ["\n  transform: rotate(180deg);\n  color: ", ";\n"])), theme_1.colors.black);
+exports.StyledWidgetBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n"])));
+exports.StyledWidgetWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+exports.ValueHelperText = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: flex-end;\n  white-space: nowrap;\n  display: inline-block;\n"], ["\n  align-self: flex-end;\n  white-space: nowrap;\n  display: inline-block;\n"])));
+exports.ValueText = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: flex-end;\n  flex-grow: 1;\n"], ["\n  align-self: flex-end;\n  flex-grow: 1;\n"])));
+exports.ValueTextWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 13px;\n  flex: 1 1 157px;\n  font-weight: 500;\n  letter-spacing: 0.3px;\n  font-size: 23px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 13px;\n  flex: 1 1 157px;\n  font-weight: 500;\n  letter-spacing: 0.3px;\n  font-size: 23px;\n"])));
+exports.Container = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n"])));
+exports.TextWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-bottom: 20px;\n  align-items: center;\n\n  & > div:last-child {\n    margin-top: 4px;\n  }\n"], ["\n  margin-bottom: 20px;\n  align-items: center;\n\n  & > div:last-child {\n    margin-top: 4px;\n  }\n"])));
+exports.NameDetail = styled_components_1.default(ApWidgetName_1.ApWidgetName)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 1em;\n"], ["\n  color: ", ";\n  margin-left: 1em;\n"])), theme_1.colors.grey7);
+exports.Value = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: 83px;\n  font-weight: 500;\n  letter-spacing: 0.03px;\n  color: ", ";\n  line-height: 88px;\n  margin-right: 24px;\n"], ["\n  font-size: 83px;\n  font-weight: 500;\n  letter-spacing: 0.03px;\n  color: ", ";\n  line-height: 88px;\n  margin-right: 24px;\n"])), theme_1.colors.grey7);
+exports.Table = styled_components_1.default.table(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border: none;\n  table-layout: fixed;\n  color: ", ";\n  font-size: 13px;\n  border-spacing: 0;\n"], ["\n  border: none;\n  table-layout: fixed;\n  color: ", ";\n  font-size: 13px;\n  border-spacing: 0;\n"])), theme_1.colors.grey8);
+var cellCss = styled_components_1.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  letter-spacing: 0.8px;\n  padding: 4px 0;\n  line-height: 19px;\n"], ["\n  border-bottom: 1px solid ", ";\n  letter-spacing: 0.8px;\n  padding: 4px 0;\n  line-height: 19px;\n"])), theme_1.colors.grey2);
+exports.TableCell = styled_components_1.default.td(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n  max-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  ", ";\n  max-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), cellCss);
+exports.TableValueCell = styled_components_1.default.td(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n  width: 1%;\n  padding-left: 15px;\n  text-align: right;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  color: ", ";\n"], ["\n  ", ";\n  width: 1%;\n  padding-left: 15px;\n  text-align: right;\n  font-weight: bold;\n  letter-spacing: 0.3px;\n  color: ", ";\n"])), cellCss, theme_1.colors.grey7);
+exports.TableRow = styled_components_1.default.tr(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  &:last-child {\n    ", ", ", " {\n      border-bottom: none;\n    }\n  }\n"], ["\n  &:last-child {\n    ", ", ", " {\n      border-bottom: none;\n    }\n  }\n"])), exports.TableCell, exports.TableValueCell);
+exports.TableHeader = styled_components_1.default.th(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: 11px;\n  text-align: right;\n  font-weight: 200;\n  padding-bottom: 4px;\n\n  &:first-child {\n    text-align: left;\n  }\n\n  &:last-child {\n    padding-left: 5px;\n  }\n"], ["\n  text-transform: uppercase;\n  color: ", ";\n  font-size: 11px;\n  text-align: right;\n  font-weight: 200;\n  padding-bottom: 4px;\n\n  &:first-child {\n    text-align: left;\n  }\n\n  &:last-child {\n    padding-left: 5px;\n  }\n"])), theme_1.colors.grey5);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
 //# sourceMappingURL=styles.js.map