@xivart/tangram 0.0.1-security → 2.712.1

package/components/RoundLogo/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.BrandRoundLogo = exports.RoundLogo = void 0;
+var RoundLogo_1 = require("./RoundLogo");
+Object.defineProperty(exports, "RoundLogo", { enumerable: true, get: function () { return __importDefault(RoundLogo_1).default; } });
+var BrandRoundLogo_1 = require("./BrandRoundLogo");
+Object.defineProperty(exports, "BrandRoundLogo", { enumerable: true, get: function () { return __importDefault(BrandRoundLogo_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Exit/Exit.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = (0, tslib_1.__importDefault)(require("../../Text"));
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Exit = function (_a) {
+    var position = _a.position, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(S.Exit, (0, tslib_1.__assign)({ exitPosition: position }, { children: (0, jsx_runtime_1.jsx)(Text_1.default, (0, tslib_1.__assign)({ color: "SECONDARY_DARK", fontSize: "fs100", fontWeight: "fw700", lineHeight: 1.3, textTransform: "uppercase" }, { children: children }), void 0) }), void 0));
+};
+exports.default = Exit;
+//# sourceMappingURL=Exit.js.map

package/components/Seatmap/Exit/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 Exit_1 = require("./Exit");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Exit_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Exit/styled/Exit.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../../utils/themedStyledComponents"));
+var S = (0, tslib_1.__importStar)(require("../../../Flex/styled"));
+var OFFSET = -43;
+var positionStyles = {
+    left: (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n    left: ", "px;\n    transform: rotate(-90deg);\n  "], ["\n    left: ", "px;\n    transform: rotate(-90deg);\n  "])), OFFSET),
+    right: (0, themedStyledComponents_1.css)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n    right: ", "px;\n    transform: rotate(90deg);\n  "], ["\n    right: ", "px;\n    transform: rotate(90deg);\n  "])), OFFSET),
+};
+var Exit = (0, themedStyledComponents_1.default)(S.Flex).attrs({
+    background: 'CONTENT_BACKGROUND',
+    blockSize: '15px',
+    inlineSize: '36px',
+    justifyContent: 'center',
+    position: 'absolute',
+    insetBlockStart: '22px',
+})(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n  border-radius: ", ";\n  border: ", ";\n  letter-spacing: 1px;\n  z-index: ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  letter-spacing: 1px;\n  z-index: ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br100;
+}, function (_a) {
+    var _b = _a.theme, borders = _b.borders, colors = _b.colors;
+    return "".concat(borders.width.bw100, " ").concat(borders.style.SOLID, " ").concat(colors.TERTIARY_DARK);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.zIndexes.ribbon;
+}, function (_a) {
+    var exitPosition = _a.exitPosition;
+    return positionStyles[exitPosition];
+});
+exports.default = Exit;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Exit.js.map

package/components/Seatmap/Exit/styled/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.Exit = void 0;
+var Exit_1 = require("./Exit");
+Object.defineProperty(exports, "Exit", { enumerable: true, get: function () { return __importDefault(Exit_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Fuselage/Fuselage.js

@@ -0,0 +1,11 @@
+"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 Fuselage = function (_a) {
+    var children = _a.children;
+    return (0, jsx_runtime_1.jsx)(S.Fuselage, { children: children }, void 0);
+};
+exports.default = Fuselage;
+//# sourceMappingURL=Fuselage.js.map

package/components/Seatmap/Fuselage/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 Fuselage_1 = require("./Fuselage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Fuselage_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Fuselage/styled/Fuselage.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../../utils/themedStyledComponents"));
+var S = (0, tslib_1.__importStar)(require("../../../Flex/styled"));
+var Fuselage = (0, themedStyledComponents_1.default)(S.Flex).attrs({
+    flexDirection: 'column',
+    paddingBlock: 's500',
+    paddingInline: 's800',
+})(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border: ", ";\n  border-width: 0 ", ";\n"], ["\n  border: ", ";\n  border-width: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.borders.style.SOLID, " ").concat(theme.colors.SECONDARY);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.width.bw200;
+});
+exports.default = Fuselage;
+var templateObject_1;
+//# sourceMappingURL=Fuselage.js.map

package/components/Seatmap/Fuselage/styled/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.Fuselage = void 0;
+var Fuselage_1 = require("./Fuselage");
+Object.defineProperty(exports, "Fuselage", { enumerable: true, get: function () { return __importDefault(Fuselage_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Wing/Wing.js

@@ -0,0 +1,11 @@
+"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 Wing = function (_a) {
+    var position = _a.position, _b = _a.hasBulkhead, hasBulkhead = _b === void 0 ? false : _b, _c = _a.hasStairs, hasStairs = _c === void 0 ? false : _c;
+    return ((0, jsx_runtime_1.jsx)(S.Wing, { hasBulkhead: hasBulkhead, hasStairs: hasStairs, wingPosition: position }, void 0));
+};
+exports.default = Wing;
+//# sourceMappingURL=Wing.js.map

package/components/Seatmap/Wing/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 Wing_1 = require("./Wing");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Wing_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/Wing/styled/Wing.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../../utils/themedStyledComponents"));
+var S = (0, tslib_1.__importStar)(require("../../../Flex/styled"));
+var HEIGHT = 58;
+var HEIGHT_WITH_STAIRS = 85;
+var HEIGHT_WITH_BULKHEAD = 72;
+var OFFSET = 41;
+var positionStyles = {
+    left: (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n    left: -", "px;\n    transform: skew(0, -45deg);\n  "], ["\n    left: -", "px;\n    transform: skew(0, -45deg);\n  "])), OFFSET),
+    right: (0, themedStyledComponents_1.css)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n    right: -", "px;\n    transform: skew(0, 45deg);\n  "], ["\n    right: -", "px;\n    transform: skew(0, 45deg);\n  "])), OFFSET),
+};
+var getHeight = function (_a) {
+    var hasBulkhead = _a.hasBulkhead, hasStairs = _a.hasStairs;
+    if (hasBulkhead)
+        return HEIGHT_WITH_BULKHEAD;
+    if (hasStairs)
+        return HEIGHT_WITH_STAIRS;
+    return HEIGHT;
+};
+var Wing = (0, themedStyledComponents_1.default)(S.Flex).attrs(function (props) { return ({
+    background: 'TERTIARY_DARK',
+    insetBlockStart: '1px',
+    position: 'absolute',
+    inlineSize: '15px',
+    blockSize: "".concat(getHeight(props), "px"),
+}); })(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var wingPosition = _a.wingPosition;
+    return positionStyles[wingPosition];
+});
+exports.default = Wing;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Wing.js.map

package/components/Seatmap/Wing/styled/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.Wing = void 0;
+var Wing_1 = require("./Wing");
+Object.defineProperty(exports, "Wing", { enumerable: true, get: function () { return __importDefault(Wing_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Seatmap/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.Wing = exports.Fuselage = exports.Exit = void 0;
+var Exit_1 = require("./Exit");
+Object.defineProperty(exports, "Exit", { enumerable: true, get: function () { return __importDefault(Exit_1).default; } });
+var Fuselage_1 = require("./Fuselage");
+Object.defineProperty(exports, "Fuselage", { enumerable: true, get: function () { return __importDefault(Fuselage_1).default; } });
+var Wing_1 = require("./Wing");
+Object.defineProperty(exports, "Wing", { enumerable: true, get: function () { return __importDefault(Wing_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/SectionTitle/SectionTitle.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionTitle = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var H1_1 = tslib_1.__importDefault(require("../H1"));
+var StaticAsset_1 = tslib_1.__importDefault(require("../StaticAsset"));
+var SectionTitle = function (_a) {
+    var title = _a.title, logoName = _a.logoName, logoWidth = _a.logoWidth, noPaddingInline = _a.noPaddingInline;
+    return (jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ justifyContent: "space-between", padding: noPaddingInline ? undefined : 's500', paddingBlockEnd: "s300", paddingBlockStart: "s900" }, { children: [jsx_runtime_1.jsx(H1_1.default, { children: title }, void 0),
+            logoName && (jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ flexDirection: "column", inlineSize: logoWidth, justifyContent: "center" }, { children: jsx_runtime_1.jsx(StaticAsset_1.default, { name: logoName }, void 0) }), void 0))] }), void 0));
+};
+exports.SectionTitle = SectionTitle;
+//# sourceMappingURL=SectionTitle.js.map

package/components/SectionTitle/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionTitleSkeleton = exports.SectionTitle = void 0;
+var SectionTitle_1 = require("./SectionTitle");
+Object.defineProperty(exports, "SectionTitle", { enumerable: true, get: function () { return SectionTitle_1.SectionTitle; } });
+var SectionTitleSkeleton_1 = require("./skeletons/SectionTitleSkeleton");
+Object.defineProperty(exports, "SectionTitleSkeleton", { enumerable: true, get: function () { return SectionTitleSkeleton_1.SectionTitleSkeleton; } });
+//# sourceMappingURL=index.js.map

package/components/SectionTitle/skeletons/SectionTitleSkeleton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionTitleSkeleton = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Skeleton_1 = tslib_1.__importDefault(require("../../../components/Skeleton"));
+var SectionTitleSkeleton = function () { return (jsx_runtime_1.jsx(Skeleton_1.default, { backgroundColor: "TERTIARY_LIGHT", blockSize: "28px", inlineSize: "174px" }, void 0)); };
+exports.SectionTitleSkeleton = SectionTitleSkeleton;
+//# sourceMappingURL=SectionTitleSkeleton.js.map

package/components/SelectInput/SelectInput.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = tslib_1.__importStar(require("./styled"));
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var Text_1 = tslib_1.__importDefault(require("../Text"));
+var SelectInput = function (_a) {
+    var dataAttrs = _a.dataAttrs, _b = _a.withBorder, withBorder = _b === void 0 ? false : _b, roundedBottom = _a.roundedBottom, roundedTop = _a.roundedTop, placeholder = _a.placeholder, inputValue = _a.inputValue, icon = _a.icon, onClick = _a.onClick, _c = _a.isValid, isValid = _c === void 0 ? true : _c;
+    var showInputValue = !!inputValue;
+    var showPlaceholder = !showInputValue && !!placeholder;
+    var textProps = {
+        withEllipsis: true,
+        fontSize: 'fs400',
+    };
+    return (jsx_runtime_1.jsx(S.SelectInput, tslib_1.__assign({}, dataAttrs, { isValid: isValid, onClick: onClick, roundedBottom: roundedBottom, roundedTop: roundedTop, withBorder: withBorder }, { children: jsx_runtime_1.jsxs(S.SelectInputContent, { children: [!!icon && jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ alignItems: "center" }, { children: icon }), void 0),
+                jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ alignItems: "center", alignSelf: "center", blockSize: "20px", inlineSize: "calc(100% - 64px)", marginInlineStart: "s900", position: "absolute" }, { children: [showPlaceholder && (jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ color: isValid ? 'TEXT_LIGHT' : 'NEGATIVE' }, textProps, { children: placeholder }), void 0)),
+                        showInputValue && (jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ color: isValid ? 'TEXT_DARK' : 'NEGATIVE' }, textProps, { children: inputValue }), void 0))] }), void 0)] }, void 0) }), void 0));
+};
+exports.default = SelectInput;
+//# sourceMappingURL=SelectInput.js.map

package/components/SelectInput/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 SelectInput_1 = require("./SelectInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SelectInput_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/SelectInput/styled/SelectInput.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var SelectInput = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  display: flex;\n  min-height: 48px;\n  width: 100%;\n  position: relative;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  display: flex;\n  min-height: 48px;\n  width: 100%;\n  position: relative;\n\n  ",
+    "\n\n  ",
+    "\n\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s400;
+}, function (_a) {
+    var _b = _a.theme, borders = _b.borders, colors = _b.colors, withBorder = _a.withBorder;
+    return withBorder &&
+        "\n      border: " + borders.width.bw200 + " " + borders.style.SOLID + " " + colors.SECONDARY + ";\n    ";
+}, function (_a) {
+    var theme = _a.theme, roundedBottom = _a.roundedBottom;
+    return roundedBottom &&
+        "\n      border-bottom-left-radius: " + theme.borders.radius.br200 + ";\n      border-bottom-right-radius: " + theme.borders.radius.br200 + ";\n    ";
+}, function (_a) {
+    var theme = _a.theme, roundedTop = _a.roundedTop;
+    return roundedTop &&
+        "\n      border-top-left-radius: " + theme.borders.radius.br200 + ";\n      border-top-right-radius: " + theme.borders.radius.br200 + ";\n    ";
+});
+exports.default = SelectInput;
+var templateObject_1;
+//# sourceMappingURL=SelectInput.js.map

package/components/SelectInput/styled/SelectInputContent.js

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

package/components/SelectInput/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.SelectInputContent = exports.SelectInput = void 0;
+var SelectInput_1 = require("./SelectInput");
+Object.defineProperty(exports, "SelectInput", { enumerable: true, get: function () { return __importDefault(SelectInput_1).default; } });
+var SelectInputContent_1 = require("./SelectInputContent");
+Object.defineProperty(exports, "SelectInputContent", { enumerable: true, get: function () { return __importDefault(SelectInputContent_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Shape/Shape.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shape = void 0;
+var react_1 = require("react");
+var react_is_1 = require("react-is");
+var withShape_1 = require("./helpers/withShape");
+exports.Shape = withShape_1.withShape(function (_a) {
+    var className = _a.className, children = _a.children;
+    if (process.env.NODE_ENV !== 'production' ||
+        process.env.STORYBOOK_LOCAL === 'true') {
+        if (react_is_1.isFragment(children)) {
+            throw new Error('Fragment as child is not supported.');
+        }
+    }
+    return react_1.cloneElement(children, { className: className });
+});
+//# sourceMappingURL=Shape.js.map

package/components/Shape/helpers/withShape/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withShape = void 0;
+var withShape_1 = require("./withShape");
+Object.defineProperty(exports, "withShape", { enumerable: true, get: function () { return withShape_1.withShape; } });
+//# sourceMappingURL=index.js.map

package/components/Shape/helpers/withShape/withShape.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withShape = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importStar(require("../../../../utils/themedStyledComponents"));
+var getBorderStyle = function (_a) {
+    var _b = _a.theme, colors = _b.colors, _c = _b.borders, style = _c.style, width = _c.width, radius = _c.radius, borderColor = _a.borderColor, borderStyle = _a.borderStyle, borderWidth = _a.borderWidth, borderRadius = _a.borderRadius, borderTopLeftRadius = _a.borderTopLeftRadius, borderTopRightRadius = _a.borderTopRightRadius, borderBottomLeftRadius = _a.borderBottomLeftRadius, borderBottomRightRadius = _a.borderBottomRightRadius, overflow = _a.overflow;
+    return themedStyledComponents_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n  overflow: ", ";\n"], ["\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ",
+        ";\n  border-bottom-left-radius: ",
+        ";\n  border-bottom-right-radius: ",
+        ";\n  overflow: ", ";\n"])), borderColor && colors[borderColor], borderStyle && style[borderStyle], borderWidth && width[borderWidth], borderRadius && radius[borderRadius], borderTopLeftRadius && radius[borderTopLeftRadius], borderTopRightRadius &&
+        radius[borderTopRightRadius], borderBottomLeftRadius &&
+        radius[borderBottomLeftRadius], borderBottomRightRadius &&
+        radius[borderBottomRightRadius], overflow);
+};
+var withShape = function (Component) {
+    return themedStyledComponents_1.default(Component)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    ", "\n    opacity:", ";\n    ", "\n  "], ["\n    ", "\n    opacity:", ";\n    ",
+        "\n  "])), getBorderStyle, function (_a) {
+        var opacity = _a.opacity;
+        return opacity;
+    }, function (_a) {
+        var shadow = _a.shadow, _b = _a.theme, boxShadows = _b.boxShadows, zIndexes = _b.zIndexes;
+        return shadow && "box-shadow: " + boxShadows[shadow] + "; z-index: " + zIndexes.base + ";";
+    });
+};
+exports.withShape = withShape;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=withShape.js.map

package/components/Shape/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shape = void 0;
+var Shape_1 = require("./Shape");
+Object.defineProperty(exports, "Shape", { enumerable: true, get: function () { return Shape_1.Shape; } });
+//# sourceMappingURL=index.js.map

package/components/SidePanel/Content.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var TooltipContext_1 = require("../Tooltip/TooltipContext");
+var S = tslib_1.__importStar(require("./styled"));
+var Content = react_1.forwardRef(function (props, ref) {
+    var _a = tslib_1.__read(react_1.useState(false), 2), setMounted = _a[1];
+    var contentRef = react_1.useRef(null);
+    react_1.useImperativeHandle(ref, function () { return contentRef.current; });
+    react_1.useEffect(function () {
+        setMounted(true);
+    }, []);
+    return (react_1.default.createElement(TooltipContext_1.Provider, { value: contentRef.current },
+        react_1.default.createElement(S.Content, tslib_1.__assign({}, props, { ref: contentRef }))));
+});
+exports.default = Content;
+//# sourceMappingURL=Content.js.map

package/components/SidePanel/SidePanel.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Overlay_1 = tslib_1.__importDefault(require("../Overlay"));
+var TitleBar_1 = tslib_1.__importDefault(require("../TitleBar"));
+var S = tslib_1.__importStar(require("./styled"));
+var Content_1 = tslib_1.__importDefault(require("./Content"));
+var SidePanel = function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'CONTENT_BACKGROUND' : _c, children = _a.children, childrenDataAttrs = _a.childrenDataAttrs, _d = _a.dataAttrs, dataAttrs = _d === void 0 ? {} : _d, onBack = _a.onBack, onClose = _a.onClose, _e = _a.priority, priority = _e === void 0 ? 9 : _e, _f = _a.title, title = _f === void 0 ? '' : _f;
+    return (react_1.default.createElement(Overlay_1.default, { active: active, onClose: onClose, priority: priority },
+        react_1.default.createElement(S.SidePanel, tslib_1.__assign({ backgroundColor: backgroundColor }, dataAttrs),
+            react_1.default.createElement(TitleBar_1.default, { childrenDataAttrs: childrenDataAttrs && childrenDataAttrs.header, onBack: onBack, onClose: onClose }, title),
+            children)));
+};
+SidePanel.Content = Content_1.default;
+SidePanel.Footer = S.Footer;
+exports.default = SidePanel;
+//# sourceMappingURL=SidePanel.js.map

package/components/SidePanel/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 SidePanel_1 = require("./SidePanel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SidePanel_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/SidePanel/styled/Content.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Content = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  flex: 1;\n  overflow-x: ", ";\n  overflow-y: ", ";\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  position: relative;\n  display: ", ";\n  flex: 1;\n  overflow-x: ", ";\n  overflow-y: ", ";\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
+    var display = _a.display;
+    return display;
+}, function (_a) {
+    var noScroll = _a.noScroll;
+    return (noScroll ? 'unset' : 'hidden');
+}, function (_a) {
+    var noScroll = _a.noScroll;
+    return (noScroll ? 'unset' : 'auto');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.zIndexes.base;
+});
+exports.default = Content;
+var templateObject_1;
+//# sourceMappingURL=Content.js.map

package/components/SidePanel/styled/Footer.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Footer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  width: 100%;\n  box-shadow: ", ";\n  ", "\n  bottom: 0;\n  z-index: ", ";\n"], ["\n  background: ", ";\n  width: 100%;\n  box-shadow: ", ";\n  ",
+    "\n  bottom: 0;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return "0 -1px 2px 0 " + theme.colors.SHADOW;
+}, function (_a) {
+    var sticky = _a.sticky;
+    return sticky &&
+        "\n    position: sticky;\n  ";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.zIndexes.sticky;
+});
+exports.default = Footer;
+var templateObject_1;
+//# sourceMappingURL=Footer.js.map

package/components/SidePanel/styled/SidePanel.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var SidePanel = themedStyledComponents_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  overflow-x: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  ", "\n"], ["\n  background: ", ";\n  overflow-x: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return theme.colors[backgroundColor];
+}, media_1.default.s(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    margin-left: auto;\n    max-width: 400px;\n  "], ["\n    margin-left: auto;\n    max-width: 400px;\n  "]))));
+exports.default = SidePanel;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=SidePanel.js.map

package/components/SidePanel/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.Footer = exports.SidePanel = exports.Content = void 0;
+var Content_1 = require("./Content");
+Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return __importDefault(Content_1).default; } });
+var SidePanel_1 = require("./SidePanel");
+Object.defineProperty(exports, "SidePanel", { enumerable: true, get: function () { return __importDefault(SidePanel_1).default; } });
+var Footer_1 = require("./Footer");
+Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return __importDefault(Footer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = tslib_1.__importStar(require("./styled"));
+var Skeleton = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '100%' : _b, _c = _a.blockSize, blockSize = _c === void 0 ? size : _c, _d = _a.inlineSize, inlineSize = _d === void 0 ? size : _d, _e = _a.elliptical, elliptical = _e === void 0 ? false : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'TERTIARY_DARK' : _f;
+    return (jsx_runtime_1.jsx(S.Skeleton, tslib_1.__assign({ backgroundColor: backgroundColor, blockSize: blockSize, elliptical: elliptical, inlineSize: inlineSize }, { children: "\u200C" }), void 0));
+};
+exports.default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map

package/components/Skeleton/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 Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Skeleton_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Skeleton/styled/Skeleton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importStar(require("../../../utils/themedStyledComponents"));
+var BACKGROUND_GRADIENT_COLOR = {
+    PRIMARY_LIGHTER: 'PRIMARY',
+    TERTIARY_LIGHT: 'TERTIARY',
+    TERTIARY_DARK: 'TERTIARY',
+};
+var BACKGROUND_WIDTH = '200px';
+var waveAnimation = themedStyledComponents_1.keyframes(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  0% {\n    background-position: -", " 0;\n  }\n  100% {\n    background-position: calc(", " + 100%) 0;\n  }\n"], ["\n  0% {\n    background-position: -", " 0;\n  }\n  100% {\n    background-position: calc(", " + 100%) 0;\n  }\n"])), BACKGROUND_WIDTH, BACKGROUND_WIDTH);
+var Skeleton = themedStyledComponents_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  animation: 1.2s ", " ease-in-out infinite;\n  background-color: ", ";\n  background-image: linear-gradient(\n    90deg,\n    ", ",\n    ", ",\n    ", "\n  );\n  background-size: ", " 100%;\n  background-repeat: no-repeat;\n  border-radius: ", ";\n  display: block;\n  line-height: 1;\n  width: ", ";\n  height: ", ";\n"], ["\n  animation: 1.2s ", " ease-in-out infinite;\n  background-color: ",
+    ";\n  background-image: linear-gradient(\n    90deg,\n    ", ",\n    ",
+    ",\n    ", "\n  );\n  background-size: ", " 100%;\n  background-repeat: no-repeat;\n  border-radius: ",
+    ";\n  display: block;\n  line-height: 1;\n  width: ", ";\n  height: ", ";\n"])), waveAnimation, function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return theme.colors[backgroundColor];
+}, function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return theme.colors[backgroundColor];
+}, function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return theme.colors[BACKGROUND_GRADIENT_COLOR[backgroundColor]];
+}, function (_a) {
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return theme.colors[backgroundColor];
+}, BACKGROUND_WIDTH, function (_a) {
+    var theme = _a.theme, elliptical = _a.elliptical;
+    return elliptical ? '50%' : theme.borders.radius.br100;
+}, function (_a) {
+    var inlineSize = _a.inlineSize;
+    return inlineSize;
+}, function (_a) {
+    var blockSize = _a.blockSize;
+    return blockSize;
+});
+exports.default = Skeleton;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=Skeleton.js.map