@xivart/tangram 0.0.1-security → 2.712.1

package/components/Collapse/CollapseItem.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var types_1 = require("./types");
+var constants_1 = require("./constants");
+var S = tslib_1.__importStar(require("./styled"));
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var ChevronIcon_1 = tslib_1.__importDefault(require("../ChevronIcon"));
+var collapseItemDefaultProps = {
+    onClick: function () { },
+    isActive: false,
+    disabled: false,
+    hideContentPadding: false,
+    themeType: types_1.CollapseThemeTypes.CONTENT_BACKGROUND,
+};
+var CollapseItem = (function (_super) {
+    tslib_1.__extends(CollapseItem, _super);
+    function CollapseItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleClick = function (e) {
+            var _a = _this
+                .props, id = _a.id, disabled = _a.disabled, onClick = _a.onClick;
+            if (disabled) {
+                return;
+            }
+            onClick(e, id);
+        };
+        return _this;
+    }
+    CollapseItem.prototype.render = function () {
+        var _a = this.props, renderTitle = _a.renderTitle, children = _a.children, isActive = _a.isActive, hideContentPadding = _a.hideContentPadding, theme = _a.theme, themeType = _a.themeType, dataAttrs = _a.dataAttrs;
+        var resolvedTheme = theme !== null && theme !== void 0 ? theme : constants_1.THEMES[themeType];
+        var iconColor = isActive
+            ? resolvedTheme.header.iconColor.active
+            : resolvedTheme.header.iconColor.inactive;
+        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(S.CollapseItemHeader, tslib_1.__assign({ isActive: isActive, itemTheme: resolvedTheme.header, onClick: this.handleClick }, dataAttrs, { children: jsx_runtime_1.jsxs(S.CollapseItemHeaderWrapper, { children: [jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ dataAttrs: dataAttrs, flexGrow: 1 }, { children: renderTitle() }), void 0),
+                            jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ alignItems: "center", dataAttrs: dataAttrs, flexShrink: 0, paddingInlineStart: "s500" }, { children: jsx_runtime_1.jsx(ChevronIcon_1.default, tslib_1.__assign({}, resolvedTheme.header.iconSize, { color: iconColor, dataAttrs: dataAttrs, isActive: isActive }), void 0) }), void 0)] }, void 0) }), void 0),
+                isActive && (jsx_runtime_1.jsx(S.CollapseItemContent, tslib_1.__assign({ hideContentPadding: hideContentPadding, itemTheme: resolvedTheme.content }, { children: children }), void 0))] }, void 0));
+    };
+    CollapseItem.defaultProps = collapseItemDefaultProps;
+    CollapseItem.Header = S.CollapseItemHeader;
+    CollapseItem.Content = S.CollapseItemContent;
+    return CollapseItem;
+}(react_1.Component));
+exports.default = CollapseItem;
+//# sourceMappingURL=CollapseItem.js.map

package/components/Collapse/constants.js

@@ -0,0 +1,74 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEMES = void 0;
+var types_1 = require("./types");
+exports.THEMES = (_a = {},
+    _a[types_1.CollapseThemeTypes.CONTENT_BACKGROUND] = {
+        header: {
+            iconColor: {
+                active: 'ACTIVE',
+                inactive: 'SECONDARY_LIGHT',
+            },
+            textColor: 'TEXT_DARK',
+            backgroundColor: 'CONTENT_BACKGROUND',
+            borderBottom: {
+                color: 'TERTIARY_DARK',
+                width: 'bw100',
+            },
+        },
+        content: {
+            textColor: 'TEXT',
+            backgroundColor: 'CONTENT_BACKGROUND',
+            borderBottom: {
+                color: 'TERTIARY_DARK',
+                width: 'bw100',
+            },
+        },
+    },
+    _a[types_1.CollapseThemeTypes.PRIMARY] = {
+        header: {
+            iconColor: {
+                active: 'ACTIVE',
+                inactive: 'SECONDARY_LIGHT',
+            },
+            textColor: 'CONTENT_BACKGROUND',
+            backgroundColor: 'PRIMARY',
+            borderBottom: {
+                color: 'SECONDARY_DARK',
+                width: 'bw100',
+            },
+        },
+        content: {
+            textColor: 'CONTENT_BACKGROUND',
+            backgroundColor: 'PRIMARY',
+            borderBottom: {
+                color: 'SECONDARY_DARK',
+                width: 'bw100',
+            },
+        },
+    },
+    _a[types_1.CollapseThemeTypes.TERTIARY] = {
+        header: {
+            iconColor: {
+                active: 'SECONDARY_DARK',
+                inactive: 'SECONDARY_DARK',
+            },
+            textColor: 'PRIMARY',
+            backgroundColor: 'TERTIARY',
+            borderBottom: {
+                color: 'TERTIARY_DARK',
+                width: 'bw100',
+            },
+        },
+        content: {
+            textColor: 'TEXT',
+            backgroundColor: 'TERTIARY',
+            borderBottom: {
+                color: 'TERTIARY_DARK',
+                width: 'bw100',
+            },
+        },
+    },
+    _a);
+//# sourceMappingURL=constants.js.map

package/components/Collapse/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Collapse_1 = require("./Collapse");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Collapse_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Collapse/styled/CollapseItemContent.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var CollapseItemContent = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border-bottom: ", ";\n  display: flex;\n  font-family: ", ";\n  font-size: ", ";\n  padding: ", ";\n  ", "\n"], ["\n  border-bottom: ",
+    ";\n  display: flex;\n  font-family: ", ";\n  font-size: ", ";\n  padding: ",
+    ";\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme, borderBottom = _a.itemTheme.borderBottom;
+    return borderBottom &&
+        theme.borders.style.SOLID + " " + theme.borders.width[borderBottom.width] + " " + theme.colors[borderBottom.color];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs300;
+}, function (_a) {
+    var theme = _a.theme, hideContentPadding = _a.hideContentPadding;
+    return !hideContentPadding && "0 " + theme.spacings.s500 + " " + theme.spacings.s400;
+}, function (_a) {
+    var _b = _a.itemTheme, backgroundColor = _b.backgroundColor, textColor = _b.textColor, colors = _a.theme.colors;
+    return "\n    background-color: " + colors[backgroundColor] + ";\n    color: " + colors[textColor] + ";\n  ";
+});
+exports.default = CollapseItemContent;
+var templateObject_1;
+//# sourceMappingURL=CollapseItemContent.js.map

package/components/Collapse/styled/CollapseItemHeader.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var CollapseItemHeader = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border-bottom: ", ";\n  border-radius: ", ";\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  cursor: pointer;\n  font-family: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-bottom: ",
+    ";\n  border-radius: ",
+    ";\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  cursor: pointer;\n  font-family: ", ";\n  font-weight: ", ";\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme, isActive = _a.isActive, borderBottom = _a.itemTheme.borderBottom;
+    return !isActive &&
+        borderBottom &&
+        theme.borders.style.SOLID + " " + theme.borders.width[borderBottom.width] + " " + theme.colors[borderBottom.color];
+}, function (_a) {
+    var isActive = _a.isActive, borderRadius = _a.itemTheme.borderRadius, radius = _a.theme.borders.radius;
+    return borderRadius &&
+        (isActive
+            ? radius[borderRadius] + " " + radius[borderRadius] + " 0 0"
+            : "" + radius[borderRadius]);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw500;
+}, function (_a) {
+    var _b, _c;
+    var _d = _a.itemTheme, backgroundColor = _d.backgroundColor, textColor = _d.textColor, _e = _d.paddingInline, paddingInline = _e === void 0 ? 's500' : _e, _f = _d.paddingBlock, paddingBlock = _f === void 0 ? 's500' : _f, _g = _a.theme, colors = _g.colors, spacings = _g.spacings;
+    return "\n    background-color: " + colors[backgroundColor] + ";\n    color: " + colors[textColor] + ";\n    padding: " + ((_b = spacings[paddingBlock]) !== null && _b !== void 0 ? _b : paddingBlock) + " \n    " + ((_c = spacings[paddingInline]) !== null && _c !== void 0 ? _c : paddingInline) + ";\n  ";
+});
+exports.default = CollapseItemHeader;
+var templateObject_1;
+//# sourceMappingURL=CollapseItemHeader.js.map

package/components/Collapse/styled/CollapseItemHeaderWrapper.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var CollapseItemHeaderWrapper = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  pointer-events: none;\n  display: flex;\n"], ["\n  pointer-events: none;\n  display: flex;\n"])));
+exports.default = CollapseItemHeaderWrapper;
+var templateObject_1;
+//# sourceMappingURL=CollapseItemHeaderWrapper.js.map

package/components/Collapse/styled/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseItemHeaderWrapper = exports.CollapseItemContent = exports.CollapseItemHeader = void 0;
+var CollapseItemHeader_1 = require("./CollapseItemHeader");
+Object.defineProperty(exports, "CollapseItemHeader", { enumerable: true, get: function () { return __importDefault(CollapseItemHeader_1).default; } });
+var CollapseItemContent_1 = require("./CollapseItemContent");
+Object.defineProperty(exports, "CollapseItemContent", { enumerable: true, get: function () { return __importDefault(CollapseItemContent_1).default; } });
+var CollapseItemHeaderWrapper_1 = require("./CollapseItemHeaderWrapper");
+Object.defineProperty(exports, "CollapseItemHeaderWrapper", { enumerable: true, get: function () { return __importDefault(CollapseItemHeaderWrapper_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Collapse/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseThemeTypes = void 0;
+var CollapseThemeTypes;
+(function (CollapseThemeTypes) {
+    CollapseThemeTypes["CONTENT_BACKGROUND"] = "CONTENT_BACKGROUND";
+    CollapseThemeTypes["PRIMARY"] = "PRIMARY";
+    CollapseThemeTypes["TERTIARY"] = "TERTIARY";
+})(CollapseThemeTypes = exports.CollapseThemeTypes || (exports.CollapseThemeTypes = {}));
+//# sourceMappingURL=types.js.map

package/components/ComparisonTable/ComparisonTable.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var HeaderCell_1 = (0, tslib_1.__importDefault)(require("./components/HeaderCell"));
+var Row_1 = (0, tslib_1.__importDefault)(require("./components/Row"));
+var Flex_1 = (0, tslib_1.__importDefault)(require("../Flex"));
+var ComparisonTable = function (_a) {
+    var items = _a.items, features = _a.features, noHighlightBottomPadding = _a.noHighlightBottomPadding, children = _a.children;
+    var itemCount = items.length;
+    var featureCount = features.length;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.default, (0, tslib_1.__assign)({ alignItems: "flex-end" }, { children: [(0, jsx_runtime_1.jsx)(S.Title, { children: children }, void 0), items.map(function (item, index) {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsx)(HeaderCell_1.default, (0, tslib_1.__assign)({ highlighted: item.highlighted, index: index, itemCount: itemCount, onClick: item.onClick, ribbonText: item.ribbonText, selected: item.selected }, { children: (_a = item.renderHeader) === null || _a === void 0 ? void 0 : _a.call(item, item, index) }), index));
+                    })] }), void 0), features.map(function (feature, index) { return ((0, jsx_runtime_1.jsx)(Row_1.default, (0, tslib_1.__assign)({ featureCount: featureCount, featureIndex: index, items: items }, { children: feature }), index)); }), (0, jsx_runtime_1.jsx)(Flex_1.default, (0, tslib_1.__assign)({ alignItems: "flex-start", justifyContent: "flex-end" }, { children: items.map(function (item, index) {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)(S.FooterCell, (0, tslib_1.__assign)({ highlighted: item.highlighted, itemCount: itemCount, noHighlightBottomPadding: noHighlightBottomPadding, onClick: item.onClick, selected: item.selected }, { children: (0, jsx_runtime_1.jsx)(S.FooterCellContainer, (0, tslib_1.__assign)({ highlighted: item.highlighted, index: index, itemCount: itemCount, noHighlightBottomPadding: noHighlightBottomPadding, selected: item.selected }, { children: (_a = item.renderFooter) === null || _a === void 0 ? void 0 : _a.call(item, item, index) }), void 0) }), index));
+                }) }), void 0)] }, void 0));
+};
+exports.default = ComparisonTable;
+//# sourceMappingURL=ComparisonTable.js.map

package/components/ComparisonTable/components/HeaderCell/HeaderCell.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Ribbon_1 = (0, tslib_1.__importDefault)(require("../../../Ribbon"));
+var Corner_1 = (0, tslib_1.__importDefault)(require("../../../Corner"));
+var HeaderCell = function (_a) {
+    var selected = _a.selected, highlighted = _a.highlighted, itemCount = _a.itemCount, onClick = _a.onClick, ribbonText = _a.ribbonText, children = _a.children, index = _a.index;
+    return ((0, jsx_runtime_1.jsx)(S.HeaderCell, (0, tslib_1.__assign)({ highlighted: highlighted, itemCount: itemCount, onClick: onClick, selected: selected }, { children: (0, jsx_runtime_1.jsxs)(S.HeaderCellContainer, (0, tslib_1.__assign)({ highlighted: highlighted, index: index, itemCount: itemCount, selected: selected }, { children: [ribbonText && ((0, jsx_runtime_1.jsx)(Ribbon_1.default, (0, tslib_1.__assign)({ maxWidth: "70%", offsetY: "-2%", position: "top" }, { children: ribbonText }), void 0)), selected && (0, jsx_runtime_1.jsx)(Corner_1.default, {}, void 0), children] }), void 0) }), void 0));
+};
+exports.default = HeaderCell;
+//# sourceMappingURL=HeaderCell.js.map

package/components/ComparisonTable/components/HeaderCell/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var HeaderCell_1 = require("./HeaderCell");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HeaderCell_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/ComparisonTable/components/HeaderCell/styled/HeaderCell.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../../../utils/themedStyledComponents"));
+var omitAttrs_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/omitAttrs"));
+var S = (0, tslib_1.__importStar)(require("../../../../Touchable/styled"));
+var feedbackStyles = (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border-color: ", ";\n  border-radius: ", ";\n  z-index: ", ";\n"], ["\n  border-color: ", ";\n  border-radius: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.colors.ACTIVE : theme.colors.SECONDARY_DARK;
+}, function (_a) {
+    var theme = _a.theme, highlighted = _a.highlighted;
+    return highlighted
+        ? "".concat(theme.borders.radius.br400, " ").concat(theme.borders.radius.br400, " 0 0 ")
+        : undefined;
+}, function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.zIndexes.sticky + 1 : theme.zIndexes.sticky;
+});
+var HeaderCell = (0, themedStyledComponents_1.default)(S.Touchable)
+    .withConfig((0, omitAttrs_1.default)('selected'))
+    .attrs(function (_a) {
+    var itemCount = _a.itemCount, onClick = _a.onClick;
+    return ({
+        background: 'CONTENT_BACKGROUND',
+        cursor: onClick ? undefined : 'auto',
+        inlineSize: "calc(70% / ".concat(itemCount, ")"),
+        noFeedback: true,
+        position: 'relative',
+    });
+})(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n  border: solid ", ";\n  border-width: 3px 3px 0;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  &:nth-of-type(2) {\n    border-top-left-radius: ", ";\n  }\n\n  &:last-of-type {\n    border-top-right-radius: ", ";\n  }\n\n  ", "\n"], ["\n  border: solid ", ";\n  border-width: 3px 3px 0;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  &:nth-of-type(2) {\n    border-top-left-radius: ", ";\n  }\n\n  &:last-of-type {\n    border-top-right-radius: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TERTIARY_DARK;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? '3px -1px 3px -3px rgba(0,0,0,.15)' : undefined;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return (highlighted || selected) && feedbackStyles;
+});
+exports.default = HeaderCell;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=HeaderCell.js.map

package/components/ComparisonTable/components/HeaderCell/styled/HeaderCellContainer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/themedStyledComponents"));
+var HeaderCellContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  padding-top: ", ";\n  box-shadow: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  padding-top: ", ";\n  box-shadow: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var highlighted = _a.highlighted, theme = _a.theme;
+    return highlighted ? theme.spacings.s900 : undefined;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? undefined : '3px -1px 3px -3px rgba(0,0,0,.15)';
+}, function (_a) {
+    var index = _a.index, theme = _a.theme;
+    return index === 0 ? theme.borders.radius.br200 : undefined;
+}, function (_a) {
+    var itemCount = _a.itemCount, index = _a.index, theme = _a.theme;
+    return index === itemCount - 1 ? theme.borders.radius.br200 : undefined;
+});
+exports.default = HeaderCellContainer;
+var templateObject_1;
+//# sourceMappingURL=HeaderCellContainer.js.map

package/components/ComparisonTable/components/HeaderCell/styled/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderCellContainer = exports.HeaderCell = void 0;
+var HeaderCell_1 = require("./HeaderCell");
+Object.defineProperty(exports, "HeaderCell", { enumerable: true, get: function () { return __importDefault(HeaderCell_1).default; } });
+var HeaderCellContainer_1 = require("./HeaderCellContainer");
+Object.defineProperty(exports, "HeaderCellContainer", { enumerable: true, get: function () { return __importDefault(HeaderCellContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/ComparisonTable/components/Row/Row.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Text_1 = (0, tslib_1.__importDefault)(require("../../../Text"));
+var Row = function (_a) {
+    var items = _a.items, children = _a.children, featureIndex = _a.featureIndex, featureCount = _a.featureCount;
+    var itemCount = items.length;
+    return ((0, jsx_runtime_1.jsxs)(S.Row, { children: [(0, jsx_runtime_1.jsx)(S.Title, (0, tslib_1.__assign)({ featureCount: featureCount, index: featureIndex }, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { children: children }, void 0) }), void 0), items.map(function (item, index) {
+                var highlighted = item.highlighted, selected = item.selected, onClick = item.onClick;
+                return ((0, jsx_runtime_1.jsx)(S.Cell, (0, tslib_1.__assign)({ highlighted: highlighted, itemCount: itemCount, onClick: onClick, selected: selected }, { children: (0, jsx_runtime_1.jsx)(S.RowCellContainer, (0, tslib_1.__assign)({ highlighted: highlighted, selected: selected }, { children: item.features[featureIndex] }), void 0) }), index));
+            })] }, void 0));
+};
+exports.default = Row;
+//# sourceMappingURL=Row.js.map

package/components/ComparisonTable/components/Row/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/ComparisonTable/components/Row/styled/Cell.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../../../utils/themedStyledComponents"));
+var omitAttrs_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/omitAttrs"));
+var S = (0, tslib_1.__importStar)(require("../../../../Touchable/styled"));
+var feedbackStyles = (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border-color: ", ";\n  z-index: ", ";\n"], ["\n  border-color: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.colors.ACTIVE : theme.colors.SECONDARY_DARK;
+}, function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.zIndexes.sticky + 1 : theme.zIndexes.sticky;
+});
+var Cell = (0, themedStyledComponents_1.default)(S.Touchable)
+    .withConfig((0, omitAttrs_1.default)('selected'))
+    .attrs(function (_a) {
+    var itemCount = _a.itemCount, onClick = _a.onClick;
+    return ({
+        cursor: onClick ? undefined : 'auto',
+        inlineSize: "calc(70% / ".concat(itemCount, ")"),
+        noFeedback: true,
+    });
+})(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n  border: solid ", ";\n  border-width: 0 3px;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  ", "\n"], ["\n  border: solid ", ";\n  border-width: 0 3px;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TERTIARY_DARK;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? '3px 0 3px -3px rgba(0,0,0,.15)' : undefined;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return (highlighted || selected) && feedbackStyles;
+});
+exports.default = Cell;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=Cell.js.map

package/components/ComparisonTable/components/Row/styled/Row.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/themedStyledComponents"));
+var Row = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n\n  &:nth-child(even) {\n    background-color: ", ";\n  }\n\n  &:nth-child(odd) {\n    background-color: ", ";\n  }\n\n  &:nth-last-of-type(2) {\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  display: flex;\n\n  &:nth-child(even) {\n    background-color: ", ";\n  }\n\n  &:nth-child(odd) {\n    background-color: ", ";\n  }\n\n  &:nth-last-of-type(2) {\n    border-bottom-left-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TERTIARY;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+});
+exports.default = Row;
+var templateObject_1;
+//# sourceMappingURL=Row.js.map

package/components/ComparisonTable/components/Row/styled/RowCellContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/themedStyledComponents"));
+var RowCellContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  box-shadow: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? undefined : '3px 0 3px -3px rgba(0,0,0,.15)';
+});
+exports.default = RowCellContainer;
+var templateObject_1;
+//# sourceMappingURL=RowCellContainer.js.map

package/components/ComparisonTable/components/Row/styled/Title.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../../../utils/themedStyledComponents"));
+var Title = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  flex: 1 1 0;\n  font-size: ", ";\n  padding: ", ";\n  border-bottom-left-radius: ", ";\n  box-shadow: ", ";\n"], ["\n  display: flex;\n  flex: 1 1 0;\n  font-size: ", ";\n  padding: ", ";\n  border-bottom-left-radius: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs300;
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacings.s500, " ").concat(theme.spacings.s600);
+}, function (_a) {
+    var index = _a.index, featureCount = _a.featureCount, theme = _a.theme;
+    return index === featureCount - 1 ? theme.borders.radius.br400 : undefined;
+}, function (_a) {
+    var index = _a.index, featureCount = _a.featureCount;
+    return index === featureCount - 1
+        ? '-3px 5px 3px -3px rgba(0, 0, 0, 0.15)'
+        : '-3px -1px 3px -3px rgba(0, 0, 0, 0.15)';
+});
+exports.default = Title;
+var templateObject_1;
+//# sourceMappingURL=Title.js.map

package/components/ComparisonTable/components/Row/styled/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowCellContainer = exports.Title = exports.Cell = exports.Row = void 0;
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });
+var Cell_1 = require("./Cell");
+Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return __importDefault(Cell_1).default; } });
+var Title_1 = require("./Title");
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
+var RowCellContainer_1 = require("./RowCellContainer");
+Object.defineProperty(exports, "RowCellContainer", { enumerable: true, get: function () { return __importDefault(RowCellContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/ComparisonTable/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ComparisonTable_1 = require("./ComparisonTable");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ComparisonTable_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/ComparisonTable/styled/FooterCell.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../utils/themedStyledComponents"));
+var omitAttrs_1 = (0, tslib_1.__importDefault)(require("../../../utils/omitAttrs"));
+var S = (0, tslib_1.__importStar)(require("../../Touchable/styled"));
+var feedbackStyles = (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border-color: ", ";\n  border-radius: ", ";\n  z-index: ", ";\n"], ["\n  border-color: ", ";\n  border-radius: ", ";\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.colors.ACTIVE : theme.colors.SECONDARY_DARK;
+}, function (_a) {
+    var theme = _a.theme, highlighted = _a.highlighted, noHighlightBottomPadding = _a.noHighlightBottomPadding;
+    return highlighted && !noHighlightBottomPadding
+        ? "0 0 ".concat(theme.borders.radius.br400, " ").concat(theme.borders.radius.br400)
+        : undefined;
+}, function (_a) {
+    var theme = _a.theme, selected = _a.selected;
+    return selected ? theme.zIndexes.sticky + 1 : theme.zIndexes.sticky;
+});
+var FooterCell = (0, themedStyledComponents_1.default)(S.Touchable)
+    .withConfig((0, omitAttrs_1.default)('selected'))
+    .attrs(function (_a) {
+    var itemCount = _a.itemCount, onClick = _a.onClick;
+    return ({
+        background: 'CONTENT_BACKGROUND',
+        cursor: onClick ? undefined : 'auto',
+        inlineSize: "calc(70% / ".concat(itemCount, ")"),
+        noFeedback: true,
+    });
+})(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n  border: solid ", ";\n  border-width: 0 3px 3px;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  &:first-of-type {\n    border-bottom-left-radius: ", ";\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: ", ";\n  }\n\n  ", "\n"], ["\n  border: solid ", ";\n  border-width: 0 3px 3px;\n  margin-left: -3px;\n  text-align: center;\n  box-shadow: ", ";\n\n  &:first-of-type {\n    border-bottom-left-radius: ", ";\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TERTIARY_DARK;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? '3px 5px 3px -3px rgba(0,0,0,.15)' : undefined;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return (highlighted || selected) && feedbackStyles;
+});
+exports.default = FooterCell;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=FooterCell.js.map

package/components/ComparisonTable/styled/FooterCellContainer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var FooterCellContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  padding-bottom: ", ";\n  box-shadow: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n  padding-bottom: ", ";\n  box-shadow: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var highlighted = _a.highlighted, noHighlightBottomPadding = _a.noHighlightBottomPadding, theme = _a.theme;
+    return highlighted && !noHighlightBottomPadding ? theme.spacings.s900 : undefined;
+}, function (_a) {
+    var highlighted = _a.highlighted, selected = _a.selected;
+    return highlighted || selected ? undefined : '3px 5px 3px -3px rgba(0,0,0,.15)';
+}, function (_a) {
+    var index = _a.index, theme = _a.theme;
+    return index === 0 ? theme.borders.radius.br200 : undefined;
+}, function (_a) {
+    var itemCount = _a.itemCount, index = _a.index, theme = _a.theme;
+    return index === itemCount - 1 ? theme.borders.radius.br200 : undefined;
+});
+exports.default = FooterCellContainer;
+var templateObject_1;
+//# sourceMappingURL=FooterCellContainer.js.map

package/components/ComparisonTable/styled/Title.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var Title = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  flex: 1 1 0;\n  padding: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  box-shadow: -3px -1px 3px -3px rgba(0, 0, 0, 0.15);\n"], ["\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  flex: 1 1 0;\n  padding: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  box-shadow: -3px -1px 3px -3px rgba(0, 0, 0, 0.15);\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TEXT_DARK;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw500;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+});
+exports.default = Title;
+var templateObject_1;
+//# sourceMappingURL=Title.js.map