@xivart/tangram 0.0.1-security → 2.712.1

package/components/Modal/helpers/getModalGridForLargeMobile/getModalGridForLargeMobile.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModalGridForLargeMobile = void 0;
+var constants_1 = require("../../constants");
+var getModalGridForLargeMobile = function (height) { return ({
+    rows: ["calc(" + height * 0.01 + "px * 100)"],
+    areas: [
+        {
+            name: constants_1.MODAL_AREA,
+            from: [0, 0],
+            to: [5, 0],
+        },
+    ],
+}); };
+exports.getModalGridForLargeMobile = getModalGridForLargeMobile;
+//# sourceMappingURL=getModalGridForLargeMobile.js.map

package/components/Modal/helpers/getModalGridForLargeMobile/index.js

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

package/components/Modal/helpers/getModalGridForSmallMobile/getModalGridForSmallMobile.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModalGridForSmallMobile = void 0;
+var constants_1 = require("../../constants");
+var getModalGridForSmallMobile = function (height) { return ({
+    rows: ["calc(" + height * 0.01 + "px * 100)"],
+    areas: [
+        {
+            name: constants_1.MODAL_AREA,
+            from: [0, 0],
+            to: [5, 0],
+        },
+    ],
+}); };
+exports.getModalGridForSmallMobile = getModalGridForSmallMobile;
+//# sourceMappingURL=getModalGridForSmallMobile.js.map

package/components/Modal/helpers/getModalGridForSmallMobile/index.js

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

package/components/Modal/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalActionFooter = exports.ModalActionContent = exports.ModalActionHeader = exports.ModalPopupFooter = exports.ModalPopupContent = exports.ModalPopupHeader = exports.ModalFooter = exports.ModalContentSection = exports.ModalContent = exports.ModalHeader = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Modal"), exports);
+tslib_1.__exportStar(require("./ModalPopup"), exports);
+tslib_1.__exportStar(require("./ModalAction"), exports);
+var ModalHeader_1 = require("./components/ModalHeader");
+Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return ModalHeader_1.ModalHeader; } });
+var ModalContent_1 = require("./components/ModalContent");
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return ModalContent_1.ModalContent; } });
+var ModalContentSection_1 = require("./components/ModalContentSection");
+Object.defineProperty(exports, "ModalContentSection", { enumerable: true, get: function () { return ModalContentSection_1.ModalContentSection; } });
+var ModalFooter_1 = require("./components/ModalFooter");
+Object.defineProperty(exports, "ModalFooter", { enumerable: true, get: function () { return ModalFooter_1.ModalFooter; } });
+var ModalPopupHeader_1 = require("./components/ModalPopupHeader");
+Object.defineProperty(exports, "ModalPopupHeader", { enumerable: true, get: function () { return ModalPopupHeader_1.ModalPopupHeader; } });
+var ModalPopupContent_1 = require("./components/ModalPopupContent");
+Object.defineProperty(exports, "ModalPopupContent", { enumerable: true, get: function () { return ModalPopupContent_1.ModalPopupContent; } });
+var ModalPopupFooter_1 = require("./components/ModalPopupFooter");
+Object.defineProperty(exports, "ModalPopupFooter", { enumerable: true, get: function () { return ModalPopupFooter_1.ModalPopupFooter; } });
+var ModalActionHeader_1 = require("./components/ModalActionHeader");
+Object.defineProperty(exports, "ModalActionHeader", { enumerable: true, get: function () { return ModalActionHeader_1.ModalActionHeader; } });
+var ModalActionContent_1 = require("./components/ModalActionContent");
+Object.defineProperty(exports, "ModalActionContent", { enumerable: true, get: function () { return ModalActionContent_1.ModalActionContent; } });
+var ModalActionFooter_1 = require("./components/ModalActionFooter");
+Object.defineProperty(exports, "ModalActionFooter", { enumerable: true, get: function () { return ModalActionFooter_1.ModalActionFooter; } });
+//# sourceMappingURL=index.js.map

package/components/Modal/styled/ModalActionWrapper.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalActionWrapper = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var ModalWrapper_1 = require("./ModalWrapper");
+exports.ModalActionWrapper = themedStyledComponents_1.default(ModalWrapper_1.ModalWrapper)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    box-shadow: ", ";\n  "], ["\n    box-shadow: ", ";\n  "])), function (_a) {
+    var theme = _a.theme;
+    return "0 2px 4px 0 " + theme.colors.SHADOW;
+}));
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ModalActionWrapper.js.map

package/components/Modal/styled/ModalPopupWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalPopupWrapper = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var constants_1 = require("../constants");
+exports.ModalPopupWrapper = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  overflow: hidden;\n  grid-area: ", ";\n  align-self: center;\n\n  pointer-events: auto;\n\n  border-radius: ", ";\n  box-shadow: ", ";\n  background: ", ";\n"], ["\n  overflow: hidden;\n  grid-area: ", ";\n  align-self: center;\n\n  pointer-events: auto;\n\n  border-radius: ", ";\n  box-shadow: ", ";\n  background: ", ";\n"])), constants_1.MODAL_AREA, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br200;
+}, function (_a) {
+    var theme = _a.theme;
+    return "0 2px 3px 0 " + theme.colors.SHADOW;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+});
+var templateObject_1;
+//# sourceMappingURL=ModalPopupWrapper.js.map

package/components/Modal/styled/ModalWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalWrapper = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var constants_1 = require("../constants");
+exports.ModalWrapper = themedStyledComponents_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  overflow: hidden;\n  display: flex;\n  flex-flow: column nowrap;\n\n  grid-area: ", ";\n\n  pointer-events: auto;\n\n  background: ", ";\n\n  ", "\n"], ["\n  overflow: hidden;\n  display: flex;\n  flex-flow: column nowrap;\n\n  grid-area: ", ";\n\n  pointer-events: auto;\n\n  background: ", ";\n\n  ",
+    "\n"])), constants_1.MODAL_AREA, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    align-self: center;\n\n    max-height: 68vh;\n\n    border-radius: ", ";\n    box-shadow: ", ";\n  "], ["\n    align-self: center;\n\n    max-height: 68vh;\n\n    border-radius: ", ";\n    box-shadow: ", ";\n  "])), function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return "0 2px 4px 0 " + theme.colors.SHADOW_DARK;
+}));
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ModalWrapper.js.map

package/components/Modal/styled/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ModalWrapper"), exports);
+tslib_1.__exportStar(require("./ModalPopupWrapper"), exports);
+tslib_1.__exportStar(require("./ModalActionWrapper"), exports);
+//# sourceMappingURL=index.js.map

package/components/NavigationHeader/NavigationHeader.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Touchable_1 = tslib_1.__importDefault(require("../Touchable"));
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var Text_1 = tslib_1.__importDefault(require("../Text"));
+var Icon_1 = tslib_1.__importDefault(require("../Icon"));
+var constants_1 = require("./constants");
+var NavigationHeader = function (_a) {
+    var dataAttrs = _a.dataAttrs, onBackClick = _a.onBackClick, title = _a.title;
+    return (jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ alignItems: "center", background: "CONTENT_BACKGROUND", dataAttrs: dataAttrs, minBlockSize: "56px", padding: "s400" }, { children: [onBackClick && (jsx_runtime_1.jsx(Touchable_1.default, tslib_1.__assign({ alignItems: "center", inlineSize: constants_1.ICON_WIDTH, justifyContent: "center", noFeedback: true, onClick: onBackClick }, { children: jsx_runtime_1.jsx(Icon_1.default, { color: "SECONDARY_DARK", flip: "horizontal", height: 12, name: "chevron-horizontal", width: 12 }, void 0) }), void 0)),
+            jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ alignItems: "center", flexGrow: 1, justifyContent: "center" }, { children: jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ align: "center", color: "PRIMARY", fontSize: "fs500", fontWeight: "fw500" }, { children: title }), void 0) }), void 0),
+            onBackClick && jsx_runtime_1.jsx(Flex_1.default, { contentVisibility: "hidden", inlineSize: constants_1.ICON_WIDTH }, void 0)] }), void 0));
+};
+exports.default = NavigationHeader;
+//# sourceMappingURL=NavigationHeader.js.map

package/components/NavigationHeader/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_WIDTH = void 0;
+exports.ICON_WIDTH = '20px';
+//# sourceMappingURL=constants.js.map

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

package/components/NavigationItem/CollapsibleNavigationItem.js

@@ -0,0 +1,20 @@
+"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 _1 = (0, tslib_1.__importDefault)(require("."));
+var Collapse_1 = (0, tslib_1.__importDefault)(require("../Collapse"));
+var Divider_1 = (0, tslib_1.__importDefault)(require("../Divider"));
+var Layout_1 = (0, tslib_1.__importDefault)(require("../Layout"));
+var Flex_1 = (0, tslib_1.__importDefault)(require("../Flex"));
+var CollapsibleNavigationItem = function (_a) {
+    var subItems = _a.subItems, dataAttrs = _a.dataAttrs, props = (0, tslib_1.__rest)(_a, ["subItems", "dataAttrs"]);
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.default, { children: (0, jsx_runtime_1.jsx)(Collapse_1.default.CollapseItem, (0, tslib_1.__assign)({ dataAttrs: dataAttrs, hideContentPadding: true, id: "collapsibleNavigationItem", renderTitle: function () { return ((0, jsx_runtime_1.jsx)(Layout_1.default, (0, tslib_1.__assign)({ inlineSize: "100%" }, { children: (0, jsx_runtime_1.jsx)(_1.default, (0, tslib_1.__assign)({}, props, { hidePadding: true, navigationDirection: types_1.NavigationDirection.None }), void 0) }), void 0)); } }, { children: (0, jsx_runtime_1.jsx)(Flex_1.default, (0, tslib_1.__assign)({ flexDirection: "column", flexGrow: 1 }, { children: subItems.map(function (itemProps, index) {
+                    var divider = (0, jsx_runtime_1.jsx)(Divider_1.default, { color: "TERTIARY_DARK" }, void 0);
+                    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index === 0 && divider, (0, jsx_runtime_1.jsxs)(Layout_1.default, (0, tslib_1.__assign)({ background: "TERTIARY", paddingInlineStart: "s300" }, { children: [(0, jsx_runtime_1.jsx)(_1.default, (0, tslib_1.__assign)({ backgroundColor: "TERTIARY" }, itemProps), void 0), index < subItems.length - 1 && ((0, jsx_runtime_1.jsx)(Layout_1.default, (0, tslib_1.__assign)({ paddingInlineEnd: "s300" }, { children: divider }), void 0))] }), void 0)] }, itemProps.key));
+                }) }), void 0) }), void 0) }, void 0));
+};
+exports.default = CollapsibleNavigationItem;
+//# sourceMappingURL=CollapsibleNavigationItem.js.map

package/components/NavigationItem/NavigationItem.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = (0, tslib_1.__importDefault)(require("../Flex"));
+var Stack_1 = (0, tslib_1.__importDefault)(require("../Stack"));
+var Touchable_1 = (0, tslib_1.__importDefault)(require("../Touchable"));
+var NavigationArrowIcon_1 = (0, tslib_1.__importDefault)(require("./components/NavigationArrowIcon"));
+var types_1 = require("./types");
+var NavigationItem = function (_a) {
+    var arrowColor = _a.arrowColor, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'CONTENT_BACKGROUND' : _b, children = _a.children, _c = _a.compact, compact = _c === void 0 ? false : _c, dataAttrs = _a.dataAttrs, _d = _a.hidePadding, hidePadding = _d === void 0 ? false : _d, href = _a.href, to = _a.to, icon = _a.icon, isContentCentered = _a.isContentCentered, _e = _a.navigationDirection, navigationDirection = _e === void 0 ? types_1.NavigationDirection.Forward : _e, onClick = _a.onClick;
+    var showBackArrow = navigationDirection === types_1.NavigationDirection.Backward;
+    var showForwardArrow = navigationDirection === types_1.NavigationDirection.Forward;
+    var showIcon = !!icon && !isContentCentered;
+    var paddingBlockValue = compact ? 's300' : 's500';
+    return ((0, jsx_runtime_1.jsx)(Touchable_1.default, (0, tslib_1.__assign)({ alignItems: "center", background: backgroundColor, blockSize: "100%", childrenPointerEvents: "none", cursor: onClick || href || to ? 'pointer' : 'auto', dataAttrs: dataAttrs, href: href, noFeedback: true, onClick: onClick, paddingBlock: hidePadding ? undefined : paddingBlockValue, paddingInline: hidePadding ? undefined : 's500', position: "relative", to: to }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.default, (0, tslib_1.__assign)({ alignItems: "center", flexDirection: "row", gap: "s500", inlineSize: "100%" }, { children: [showBackArrow && ((0, jsx_runtime_1.jsx)(Flex_1.default, { children: (0, jsx_runtime_1.jsx)(NavigationArrowIcon_1.default, { color: arrowColor, flipped: true }, void 0) }, void 0)), showIcon && (0, jsx_runtime_1.jsx)(Flex_1.default, { children: icon }, void 0), (0, jsx_runtime_1.jsx)(Flex_1.default, (0, tslib_1.__assign)({ flexGrow: 1, justifyContent: isContentCentered ? 'center' : undefined, minInlineSize: 0 }, { children: children }), void 0), showForwardArrow && ((0, jsx_runtime_1.jsx)(Flex_1.default, { children: (0, jsx_runtime_1.jsx)(NavigationArrowIcon_1.default, { color: arrowColor }, void 0) }, void 0))] }), void 0) }), void 0));
+};
+exports.default = NavigationItem;
+//# sourceMappingURL=NavigationItem.js.map

package/components/NavigationItem/components/NavigationArrowIcon/NavigationArrowIcon.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 Icon_1 = (0, tslib_1.__importDefault)(require("../../../Icon"));
+var NavigationArrowIcon = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'SECONDARY_LIGHT' : _b, flipped = _a.flipped;
+    return ((0, jsx_runtime_1.jsx)(Icon_1.default, { color: color, flip: flipped ? 'horizontal' : undefined, height: 12, name: "chevron-horizontal", width: 12 }, void 0));
+};
+exports.default = NavigationArrowIcon;
+//# sourceMappingURL=NavigationArrowIcon.js.map

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

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

package/components/NavigationItem/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationDirection = void 0;
+var NavigationDirection;
+(function (NavigationDirection) {
+    NavigationDirection["Forward"] = "forward";
+    NavigationDirection["Backward"] = "backward";
+    NavigationDirection["None"] = "none";
+})(NavigationDirection = exports.NavigationDirection || (exports.NavigationDirection = {}));
+//# sourceMappingURL=types.js.map

package/components/Notification/Notification.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Layout_1 = tslib_1.__importDefault(require("../Layout"));
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var Text_1 = tslib_1.__importDefault(require("../Text"));
+var Icon_1 = tslib_1.__importDefault(require("../Icon"));
+var A_1 = tslib_1.__importDefault(require("../A"));
+var types_1 = require("./types");
+var S = tslib_1.__importStar(require("./styled"));
+var constants_1 = require("./constants");
+var Button_1 = require("../Button");
+var Notification = function (_a) {
+    var stretched = _a.stretched, _b = _a.dataAttrs, dataAttrs = _b === void 0 ? {} : _b, _c = _a.notificationType, notificationType = _c === void 0 ? types_1.NotificationTypes.Warning : _c, text = _a.text, primaryButtonLink = _a.primaryButtonLink, primaryButtonText = _a.primaryButtonText, secondaryButtonText = _a.secondaryButtonText, _d = _a.hasIcon, hasIcon = _d === void 0 ? false : _d, _e = _a.hasRoundedCorners, hasRoundedCorners = _e === void 0 ? false : _e, _f = _a.secondaryButtonOnClick, secondaryButtonOnClick = _f === void 0 ? function () { } : _f;
+    var theme = constants_1.THEMES[notificationType];
+    var inverse = [
+        types_1.NotificationTypes.Primary,
+        types_1.NotificationTypes.Warning,
+    ].includes(notificationType);
+    var variation = notificationType === types_1.NotificationTypes.Warning ? 'alert' : undefined;
+    var marginInline = stretched ? undefined : 'auto';
+    var maxInlineSize = stretched ? undefined : '1200px';
+    return (jsx_runtime_1.jsxs(S.Notification, tslib_1.__assign({ hasRoundedCorners: hasRoundedCorners, notificationTheme: theme }, { children: [jsx_runtime_1.jsx(S.Border, { borderTheme: theme }, void 0),
+            jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ marginInline: marginInline, maxInlineSize: maxInlineSize, padding: "s500", paddingBlockEnd: "s300" }, { children: jsx_runtime_1.jsxs(Flex_1.default, { children: [hasIcon && (jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ alignItems: "start", m: { marginBlockStart: 's200' }, marginBlockEnd: "s300", marginInlineEnd: "s500" }, { children: jsx_runtime_1.jsx(Icon_1.default, { color: theme.iconColor, height: 20, name: theme.iconName, width: 20 }, void 0) }), void 0)),
+                        jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ flexDirection: "column", m: { flexGrow: 1, flexDirection: 'row', flexWrap: 'wrap' } }, { children: [jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ alignItems: "center", flexGrow: 1, marginBlockEnd: "s300", paddingInlineEnd: "s200" }, { children: jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ color: theme.textColor, fontSize: "fs300", lineHeight: 1.6 }, { children: text }), void 0) }), void 0),
+                                jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ marginBlockEnd: "s300" }, { children: [primaryButtonLink && (jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ marginInlineEnd: "s400" }, { children: jsx_runtime_1.jsx(A_1.default, tslib_1.__assign({ href: primaryButtonLink }, dataAttrs.readButton, { children: jsx_runtime_1.jsx(Button_1.TertiaryButton, tslib_1.__assign({ dataAttrs: dataAttrs.readButton, inverse: inverse, outline: false, variation: variation }, { children: primaryButtonText }), void 0) }), void 0) }), void 0)),
+                                        jsx_runtime_1.jsx(Button_1.TertiaryButton, tslib_1.__assign({ dataAttrs: dataAttrs.dismissButton, inverse: inverse, onClick: secondaryButtonOnClick, outline: true, variation: variation }, { children: secondaryButtonText }), void 0)] }), void 0)] }), void 0)] }, void 0) }), void 0)] }), void 0));
+};
+exports.default = Notification;
+//# sourceMappingURL=Notification.js.map

package/components/Notification/constants.js

@@ -0,0 +1,38 @@
+"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.NotificationTypes.Warning] = {
+        iconColor: 'CONTENT_BACKGROUND',
+        iconName: 'alert',
+        borderColor: 'CONTENT_BACKGROUND',
+        backgroundColor: 'WARNING',
+        buttonColor: 'CONTENT_BACKGROUND',
+        buttonTextColor: 'WARNING',
+        textColor: 'CONTENT_BACKGROUND',
+        borderOpacity: 0.6,
+    },
+    _a[types_1.NotificationTypes.Primary] = {
+        iconColor: 'CONTENT_BACKGROUND',
+        iconName: 'info-circle',
+        borderColor: 'CONTENT_BACKGROUND',
+        backgroundColor: 'PRIMARY_LIGHT',
+        buttonColor: 'CONTENT_BACKGROUND',
+        buttonTextColor: 'PRIMARY_LIGHT',
+        textColor: 'CONTENT_BACKGROUND',
+        borderOpacity: 0.6,
+    },
+    _a[types_1.NotificationTypes.Secondary] = {
+        iconColor: 'PRIMARY',
+        iconName: 'info-circle',
+        borderColor: 'ACTIVE',
+        backgroundColor: 'CONTENT_BACKGROUND',
+        buttonColor: 'PRIMARY_LIGHT',
+        buttonTextColor: 'CONTENT_BACKGROUND',
+        textColor: 'TEXT_DARK',
+        borderOpacity: 1,
+    },
+    _a);
+//# sourceMappingURL=constants.js.map

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

package/components/Notification/styled/Border.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Border = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var colors = _a.theme.colors, _b = _a.borderTheme, borderOpacity = _b.borderOpacity, borderColor = _b.borderColor;
+    return "\n    height: 4px;\n    background-color: " + colors[borderColor] + ";\n    opacity: " + borderOpacity + ";\n  ";
+});
+exports.default = Border;
+var templateObject_1;
+//# sourceMappingURL=Border.js.map

package/components/Notification/styled/Notification.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Notification = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var _b = _a.theme, colors = _b.colors, br200 = _b.borders.radius.br200, hasRoundedCorners = _a.hasRoundedCorners, backgroundColor = _a.notificationTheme.backgroundColor;
+    return "\n    min-width: 280px;\n    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);\n    background-color: " + colors[backgroundColor] + ";\n\n    " + (hasRoundedCorners
+        ? "\n      border-radius: 0 0 " + br200 + " " + br200 + ";\n    "
+        : '') + "\n  ";
+});
+exports.default = Notification;
+var templateObject_1;
+//# sourceMappingURL=Notification.js.map

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

package/components/Notification/types.js

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

package/components/Overlay/Overlay.js

@@ -0,0 +1,63 @@
+"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 react_dom_1 = require("react-dom");
+var isSSR_1 = tslib_1.__importDefault(require("../../utils/isSSR"));
+var scrollLocker_1 = require("./helpers/scrollLocker");
+var S = tslib_1.__importStar(require("./styled"));
+var DefaultProps = {
+    active: false,
+    priority: 9,
+    onClose: function () { return null; },
+};
+var Overlay = (function (_super) {
+    tslib_1.__extends(Overlay, _super);
+    function Overlay() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.setRef = function (ref) {
+            if (ref) {
+                _this.overlayRef = ref;
+            }
+        };
+        _this.updateBodyScroll = function (_a) {
+            var active = _a.active;
+            if (_this.overlayRef) {
+                if (active) {
+                    scrollLocker_1.lockScrollWithElement(_this.overlayRef);
+                }
+                else {
+                    scrollLocker_1.unlockScrollWithElement(_this.overlayRef);
+                }
+            }
+        };
+        _this.handleClick = function (e) {
+            e.stopPropagation();
+        };
+        return _this;
+    }
+    Overlay.prototype.componentDidMount = function () {
+        this.updateBodyScroll(this.props);
+    };
+    Overlay.prototype.componentDidUpdate = function (prevProps) {
+        var active = this.props.active;
+        if (prevProps.active !== active) {
+            this.updateBodyScroll(this.props);
+        }
+    };
+    Overlay.prototype.componentWillUnmount = function () {
+        this.updateBodyScroll(tslib_1.__assign(tslib_1.__assign({}, this.props), { active: false }));
+    };
+    Overlay.prototype.render = function () {
+        var _a = this.props, children = _a.children, active = _a.active, onClose = _a.onClose, priority = _a.priority;
+        if (!active || isSSR_1.default()) {
+            return null;
+        }
+        return react_dom_1.createPortal(jsx_runtime_1.jsxs(S.Wrapper, tslib_1.__assign({ onClick: this.handleClick, priority: priority }, { children: [jsx_runtime_1.jsx(S.Overlay, { ref: this.setRef, onClick: onClose }, void 0), children] }), void 0), document.body);
+    };
+    Overlay.defaultProps = DefaultProps;
+    return Overlay;
+}(react_1.PureComponent));
+exports.default = Overlay;
+//# sourceMappingURL=Overlay.js.map

package/components/Overlay/helpers/scrollLocker/index.js

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

package/components/Overlay/helpers/scrollLocker/scrollLocker.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unlockScrollWithElement = exports.lockScrollWithElement = void 0;
+var offsetY = 0;
+var previousBodyStyles;
+var locks = new Set();
+var applyBodyStyles = function () {
+    var scrollY = window.scrollY;
+    if (!previousBodyStyles) {
+        var _a = document.body.style, top_1 = _a.top, position = _a.position, height = _a.height, width = _a.width;
+        previousBodyStyles = {
+            top: top_1,
+            position: position,
+            height: height,
+            width: width,
+        };
+        offsetY = scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.height = '100%';
+        document.body.style.width = '100%';
+        document.body.style.top = "-" + offsetY + "px";
+    }
+};
+var removeBodyStyles = function () {
+    if (previousBodyStyles) {
+        var top_2 = previousBodyStyles.top, position = previousBodyStyles.position, height = previousBodyStyles.height, width = previousBodyStyles.width;
+        document.body.style.position = position;
+        document.body.style.height = height;
+        document.body.style.width = width;
+        document.body.style.top = top_2;
+        previousBodyStyles = undefined;
+        window.scrollTo(0, offsetY);
+    }
+};
+var lockScrollWithElement = function (lock) {
+    if (!locks.has(lock)) {
+        applyBodyStyles();
+        locks.add(lock);
+    }
+};
+exports.lockScrollWithElement = lockScrollWithElement;
+var unlockScrollWithElement = function (lock) {
+    locks.delete(lock);
+    if (locks.size === 0) {
+        removeBodyStyles();
+    }
+};
+exports.unlockScrollWithElement = unlockScrollWithElement;
+//# sourceMappingURL=scrollLocker.js.map

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

package/components/Overlay/styled/Overlay.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Overlay = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  display: block;\n  height: 100%;\n  left: 0;\n  opacity: 0.65;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -1;\n"], ["\n  background: ", ";\n  display: block;\n  height: 100%;\n  left: 0;\n  opacity: 0.65;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -1;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.PRIMARY_DARKER;
+});
+exports.default = Overlay;
+var templateObject_1;
+//# sourceMappingURL=Overlay.js.map

package/components/Overlay/styled/Wrapper.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var MAX_Z_INDEX = 9;
+var Wrapper = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: block;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  display: block;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ",
+    ";\n"])), function (_a) {
+    var priority = _a.priority, theme = _a.theme;
+    return theme.zIndexes.modal + MAX_Z_INDEX - Number(priority);
+});
+exports.default = Wrapper;
+var templateObject_1;
+//# sourceMappingURL=Wrapper.js.map

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

package/components/PageGrid/PageGrid.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Grid_1 = tslib_1.__importDefault(require("../Grid"));
+var constants_1 = require("./constants");
+function buildGridBreakpointConfig(gridBreakpointConfig, pageGridBreakpointConfig) {
+    return tslib_1.__assign(tslib_1.__assign({}, gridBreakpointConfig), pageGridBreakpointConfig);
+}
+var PageGrid = function (_a) {
+    var rows = _a.rows, rowGap = _a.rowGap, areas = _a.areas, l = _a.l, m = _a.m, s = _a.s, xl = _a.xl, noPointerEvents = _a.noPointerEvents, children = _a.children;
+    var gridProps = tslib_1.__assign(tslib_1.__assign({}, buildGridBreakpointConfig(constants_1.DEFAULT_CONFIG, {
+        rows: rows,
+        rowGap: rowGap,
+        areas: areas,
+    })), { s: buildGridBreakpointConfig(constants_1.S_CONFIG, s), m: buildGridBreakpointConfig(constants_1.M_CONFIG, m), l: buildGridBreakpointConfig(constants_1.M_CONFIG, l), xl: buildGridBreakpointConfig(constants_1.M_CONFIG, xl) });
+    return (jsx_runtime_1.jsx(Grid_1.default, tslib_1.__assign({ noPointerEvents: noPointerEvents }, gridProps, { children: children }), void 0));
+};
+exports.default = PageGrid;
+//# sourceMappingURL=PageGrid.js.map