@bloom-housing/ui-components 7.1.0 → 7.2.1

package/dist/src/navigation/SideNav.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithinLayout = exports.ChildItems = exports.Current = exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var constants_1 = require("../../.storybook/constants");
+var StandardTable_1 = require("../tables/StandardTable");
+var SideNav_1 = require("./SideNav");
+var StandardTable_stories_1 = require("../tables/StandardTable.stories");
+var SideNav_docs_mdx_1 = __importDefault(require("./SideNav.docs.mdx"));
+exports.default = {
+    title: "Navigation/Side Nav 🚩",
+    id: "navigation/side-nav",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+    parameters: {
+        docs: {
+            page: SideNav_docs_mdx_1.default,
+        },
+        badges: [constants_1.BADGES.GEN2],
+    },
+};
+var Default = function () { return (react_1.default.createElement("div", { style: { maxWidth: "275px" } },
+    react_1.default.createElement(SideNav_1.SideNav, { navItems: [
+            { label: "Nav Item 1", url: "#", current: false },
+            { label: "Nav Item 2", url: "#", current: false },
+            { label: "Nav Item 3", url: "#" },
+        ] }))); };
+exports.Default = Default;
+var Current = function () { return (react_1.default.createElement("div", { style: { maxWidth: "275px" } },
+    react_1.default.createElement(SideNav_1.SideNav, { navItems: [
+            { label: "Nav Item 1", url: "#", current: true },
+            { label: "Nav Item 2", url: "#", current: false },
+            { label: "Nav Item 3", url: "#", current: false },
+        ] }))); };
+exports.Current = Current;
+var MultiLevelNav = function () { return (react_1.default.createElement(SideNav_1.SideNav, { navItems: [
+        { label: "Nav Item 1", url: "#", current: false },
+        {
+            label: "Nav Item 2",
+            url: "#",
+            count: 10,
+            childrenItems: [
+                { label: "Child Item 1", url: "#", count: 7 },
+                { label: "Child Item 2", url: "#", current: true, count: 3 },
+            ],
+        },
+        { label: "Nav Item 3", url: "#" },
+    ] })); };
+var ChildItems = function () { return (react_1.default.createElement("div", { style: { maxWidth: "275px" } },
+    react_1.default.createElement(MultiLevelNav, null))); };
+exports.ChildItems = ChildItems;
+var WithinLayout = function () { return (react_1.default.createElement("div", { className: "sidebar-detail-layout" },
+    react_1.default.createElement("aside", null,
+        react_1.default.createElement(MultiLevelNav, null)),
+    react_1.default.createElement("div", { className: "rounded-lg border border-gray-500 overflow-hidden" },
+        react_1.default.createElement(StandardTable_1.StandardTable, { headers: StandardTable_stories_1.mockHeaders, data: StandardTable_stories_1.mockData })))); };
+exports.WithinLayout = WithinLayout;
+//# sourceMappingURL=SideNav.stories.js.map

package/dist/src/navigation/SideNav.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/SideNav.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,wDAAmD;AACnD,yDAAuD;AACvD,qCAAmC;AACnC,yEAAuE;AACvE,wEAAqD;AAErD,kBAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,0BAAoB;SAC3B;QACD,MAAM,EAAE,CAAC,kBAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAEM,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;IAC/B,8BAAC,iBAAO,IACN,QAAQ,EAAE;YACR,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE;YACjD,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE;YACjD,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE;SAClC,GACD,CACE,CACP,EAV4B,CAU5B,CAAA;AAVY,QAAA,OAAO,WAUnB;AAEM,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;IAC/B,8BAAC,iBAAO,IACN,QAAQ,EAAE;YACR,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE;YAChD,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE;YACjD,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE;SAClD,GACD,CACE,CACP,EAV4B,CAU5B,CAAA;AAVY,QAAA,OAAO,WAUnB;AAED,IAAM,aAAa,GAAG,cAAM,OAAA,CAC1B,8BAAC,iBAAO,IACN,QAAQ,EAAE;QACR,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE;QACjD;YACE,KAAK,EAAE,YAAY;YACnB,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,EAAE;YACT,aAAa,EAAE;gBACb,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC7C,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;aAC7D;SACF;QACD,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE;KAClC,GACD,CACH,EAhB2B,CAgB3B,CAAA;AAEM,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;IAC/B,8BAAC,aAAa,OAAG,CACb,CACP,EAJ+B,CAI/B,CAAA;AAJY,QAAA,UAAU,cAItB;AAEM,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,uCAAK,SAAS,EAAC,uBAAuB;IACpC;QACE,8BAAC,aAAa,OAAG,CACX;IACR,uCAAK,SAAS,EAAC,mDAAmD;QAChE,8BAAC,6BAAa,IAAC,OAAO,EAAE,mCAAW,EAAE,IAAI,EAAE,gCAAQ,GAAI,CACnD,CACF,CACP,EATiC,CASjC,CAAA;AATY,QAAA,YAAY,gBASxB"}

package/dist/src/navigation/TabNav.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { AppearanceSizeType } from "../global/AppearanceTypes";
+import "./TabNav.scss";
+export interface TabNavItemProps {
+    href: string;
+    current?: boolean;
+    tagContent?: React.ReactNode;
+    tagSize?: AppearanceSizeType;
+    children: React.ReactNode;
+}
+declare const TabNavItem: (props: TabNavItemProps) => JSX.Element;
+declare const TabNav: (props: {
+    children: React.ReactNode;
+    className?: string;
+}) => JSX.Element;
+export { TabNav as default, TabNav, TabNavItem };

package/dist/src/navigation/TabNav.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabNavItem = exports.TabNav = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var LocalizedLink_1 = require("../actions/LocalizedLink");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var Tag_1 = require("../text/Tag");
+require("./TabNav.scss");
+var TabNavItem = function (props) {
+    var tabRef = react_1.default.useRef(null);
+    var handleKeyboard = function (event) {
+        var _a, _b, _c, _d;
+        if (event.key == "ArrowLeft") {
+            var previousTab = (_a = tabRef.current) === null || _a === void 0 ? void 0 : _a.previousSibling;
+            (_b = previousTab === null || previousTab === void 0 ? void 0 : previousTab.querySelector("a")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (event.key == "ArrowRight") {
+            var nextTab = (_c = tabRef.current) === null || _c === void 0 ? void 0 : _c.nextSibling;
+            (_d = nextTab === null || nextTab === void 0 ? void 0 : nextTab.querySelector("a")) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+    };
+    return (react_1.default.createElement("li", { role: "tab", "aria-selected": props.current ? "true" : undefined, ref: tabRef, onKeyUp: handleKeyboard, className: "tab-nav__tab" },
+        react_1.default.createElement(LocalizedLink_1.LocalizedLink, { className: props.current ? "is-active" : undefined, "aria-current": props.current ? "page" : undefined, href: props.href, tabIndex: props.current ? 0 : -1 },
+            props.children,
+            props.tagContent && (react_1.default.createElement(Tag_1.Tag, { pillStyle: true, size: props.tagSize ? props.tagSize : AppearanceTypes_1.AppearanceSizeType.normal }, props.tagContent)))));
+};
+exports.TabNavItem = TabNavItem;
+var TabNav = function (props) {
+    var classes = ["tab-nav"];
+    if (props.className) {
+        classes.push(props.className);
+    }
+    return (react_1.default.createElement("nav", { className: classes.join(" "), "aria-label": "Secondary navigation" },
+        react_1.default.createElement("ul", { role: "tablist", "aria-label": "Secondary navigation" }, props.children)));
+};
+exports.default = TabNav;
+exports.TabNav = TabNav;
+//# sourceMappingURL=TabNav.js.map

package/dist/src/navigation/TabNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.js","sourceRoot":"","sources":["../../../src/navigation/TabNav.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,0DAAwD;AACxD,6DAA8D;AAC9D,mCAAiC;AACjC,yBAAsB;AAUtB,IAAM,UAAU,GAAG,UAAC,KAAsB;IACxC,IAAM,MAAM,GAAG,eAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAA;IAEhD,IAAM,cAAc,GAAG,UAAC,KAA0B;;QAChD,IAAI,KAAK,CAAC,GAAG,IAAI,WAAW,EAAE;YAC5B,IAAM,WAAW,GAAG,MAAA,MAAM,CAAC,OAAO,0CAAE,eAA8B,CAAA;YAClE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,GAAG,CAAC,0CAAE,KAAK,EAAE,CAAA;SACzC;aAAM,IAAI,KAAK,CAAC,GAAG,IAAI,YAAY,EAAE;YACpC,IAAM,OAAO,GAAG,MAAA,MAAM,CAAC,OAAO,0CAAE,WAA0B,CAAA;YAC1D,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,GAAG,CAAC,0CAAE,KAAK,EAAE,CAAA;SACrC;IACH,CAAC,CAAA;IAED,OAAO,CACL,sCACE,IAAI,EAAC,KAAK,mBACK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,cAAc;QAExB,8BAAC,6BAAa,IACZ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,kBACpC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAChD,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE/B,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,UAAU,IAAI,CACnB,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,oCAAkB,CAAC,MAAM,IAClF,KAAK,CAAC,UAAU,CACb,CACP,CACa,CACb,CACN,CAAA;AACH,CAAC,CAAA;AAkBmC,gCAAU;AAhB9C,IAAM,MAAM,GAAG,UAAC,KAAwD;IACtE,IAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAA;IAE3B,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;KAC9B;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAc,sBAAsB;QACnE,sCAAI,IAAI,EAAC,SAAS,gBAAY,sBAAsB,IACjD,KAAK,CAAC,QAAQ,CACZ,CACD,CACP,CAAA;AACH,CAAC,CAAA;AAEkB,yBAAO;AAAE,wBAAM"}

package/dist/src/navigation/TabNav.stories.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (): JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Other: {
+    (): JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};

package/dist/src/navigation/TabNav.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Other = exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var TabNav_1 = require("./TabNav");
+exports.default = {
+    title: "Navigation/Tab-like Nav",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+    parameters: { actions: { argTypesRegex: "^on[A-Z].*" } },
+};
+var Default = function () {
+    return (react_1.default.createElement(TabNav_1.TabNav, null,
+        react_1.default.createElement(TabNav_1.TabNavItem, { href: "/other" }, "Other"),
+        react_1.default.createElement(TabNav_1.TabNavItem, { href: "/default", current: true, tagContent: "15" }, "Default")));
+};
+exports.Default = Default;
+// TODO: Fix tab roles for this component in #1489
+exports.Default.parameters = {
+    a11y: {
+        config: {
+            rules: [
+                {
+                    id: "no-focusable-content",
+                    enabled: false,
+                },
+                {
+                    id: "nested-interactive",
+                    enabled: false,
+                },
+            ],
+        },
+    },
+};
+var Other = function () {
+    return (react_1.default.createElement(TabNav_1.TabNav, null,
+        react_1.default.createElement(TabNav_1.TabNavItem, { href: "/other", current: true }, "Other"),
+        react_1.default.createElement(TabNav_1.TabNavItem, { href: "/default", tagContent: "15" }, "Default")));
+};
+exports.Other = Other;
+// TODO: Fix tab roles for this component in #1489
+exports.Other.parameters = {
+    a11y: {
+        config: {
+            rules: [
+                {
+                    id: "no-focusable-content",
+                    enabled: false,
+                },
+                {
+                    id: "nested-interactive",
+                    enabled: false,
+                },
+            ],
+        },
+    },
+};
+//# sourceMappingURL=TabNav.stories.js.map

package/dist/src/navigation/TabNav.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/TabNav.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,mCAA6C;AAE7C,kBAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE;CACzD,CAAA;AAEM,IAAM,OAAO,GAAG;IACrB,OAAO,CACL,8BAAC,eAAM;QACL,8BAAC,mBAAU,IAAC,IAAI,EAAE,QAAQ,YAAoB;QAC9C,8BAAC,mBAAU,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,QAAC,UAAU,EAAC,IAAI,cAExC,CACN,CACV,CAAA;AACH,CAAC,CAAA;AATY,QAAA,OAAO,WASnB;AACD,kDAAkD;AAClD,eAAO,CAAC,UAAU,GAAG;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,sBAAsB;oBAC1B,OAAO,EAAE,KAAK;iBACf;gBACD;oBACE,EAAE,EAAE,oBAAoB;oBACxB,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAA;AAEM,IAAM,KAAK,GAAG;IACnB,OAAO,CACL,8BAAC,eAAM;QACL,8BAAC,mBAAU,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,kBAEtB;QACb,8BAAC,mBAAU,IAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAC,IAAI,cAEhC,CACN,CACV,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,KAAK,SAWjB;AAED,kDAAkD;AAClD,aAAK,CAAC,UAAU,GAAG;IACjB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,sBAAsB;oBAC1B,OAAO,EAAE,KAAK;iBACf;gBACD;oBACE,EAAE,EAAE,oBAAoB;oBACxB,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAA"}

package/dist/src/navigation/Tabs.d.ts

@@ -0,0 +1,39 @@
+import React, { FunctionComponent } from "react";
+import "./Tabs.scss";
+export interface TabsProps {
+    children: React.ReactNode;
+    className?: string;
+    defaultFocus?: boolean;
+    defaultIndex?: number;
+    disabledTabClassName?: string;
+    domRef?: (node?: HTMLElement) => void;
+    forceRenderTabPanel?: boolean;
+    onSelect?: (index: number, last: number, event: Event) => boolean | void;
+    selectedIndex?: number;
+    selectedTabClassName?: string;
+    selectedTabPanelClassName?: string;
+}
+export declare const Tabs: FunctionComponent<TabsProps>;
+export interface TabProps {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    disabledClassName?: string;
+    selectedClassName?: string;
+    tabIndex?: string;
+}
+export declare const Tab: FunctionComponent<TabProps>;
+export interface TabListProps {
+    children: React.ReactNode;
+    className?: string | string[] | {
+        [name: string]: boolean;
+    };
+}
+export declare const TabList: FunctionComponent<TabListProps>;
+export interface TabPanelProps {
+    children: React.ReactNode;
+    className?: string;
+    forceRender?: boolean;
+    selectedClassName?: string;
+}
+export declare const TabPanel: FunctionComponent<TabPanelProps>;

package/dist/src/navigation/Tabs.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = void 0;
+var react_1 = __importDefault(require("react"));
+require("./Tabs.scss");
+var react_tabs_1 = require("react-tabs");
+var Tabs = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var className = ["tabs"];
+    if (props.className)
+        className.push(props.className);
+    return (react_1.default.createElement(react_tabs_1.Tabs, __assign({}, props, { className: className.join(" ") }), children));
+};
+exports.Tabs = Tabs;
+var Tab = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var className = ["tabs__tab"];
+    if (props.className)
+        className.push(props.className);
+    return (react_1.default.createElement(react_tabs_1.Tab, __assign({ selectedClassName: "is-active" }, props, { className: className }), children));
+};
+exports.Tab = Tab;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+exports.Tab.tabsRole = "Tab";
+var TabList = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement(react_tabs_1.TabList, __assign({}, props), children);
+};
+exports.TabList = TabList;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+exports.TabList.tabsRole = "TabList";
+var TabPanel = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var className = ["tabs__panel"];
+    if (props.className)
+        className.push(props.className);
+    return (react_1.default.createElement(react_tabs_1.TabPanel, __assign({ selectedClassName: "is-active" }, props, { className: className }), children));
+};
+exports.TabPanel = TabPanel;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+exports.TabPanel.tabsRole = "TabPanel";
+//# sourceMappingURL=Tabs.js.map

package/dist/src/navigation/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/navigation/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAgD;AAChD,uBAAoB;AAEpB,yCAKmB;AAgBZ,IAAM,IAAI,GAAiC,UAAC,EAAiC;IAA/B,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACrE,IAAM,SAAS,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,IAAI,KAAK,CAAC,SAAS;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACpD,OAAO,CACL,8BAAC,iBAAS,eAAK,KAAK,IAAE,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KACjD,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AARY,QAAA,IAAI,QAQhB;AAWM,IAAM,GAAG,GAAgC,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACnE,IAAM,SAAS,GAAG,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,KAAK,CAAC,SAAS;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACpD,OAAO,CACL,8BAAC,gBAAQ,aAAC,iBAAiB,EAAC,WAAW,IAAK,KAAK,IAAE,SAAS,EAAE,SAAS,KACpE,QAAQ,CACA,CACZ,CAAA;AACH,CAAC,CAAA;AARY,QAAA,GAAG,OAQf;AAED,6DAA6D;AAC7D,aAAa;AACb,WAAG,CAAC,QAAQ,GAAG,KAAK,CAAA;AAOb,IAAM,OAAO,GAAoC,UAAC,EAAoC;IAAlC,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC3E,OAAO,8BAAC,oBAAY,eAAK,KAAK,GAAG,QAAQ,CAAgB,CAAA;AAC3D,CAAC,CAAA;AAFY,QAAA,OAAO,WAEnB;AAED,6DAA6D;AAC7D,aAAa;AACb,eAAO,CAAC,QAAQ,GAAG,SAAS,CAAA;AASrB,IAAM,QAAQ,GAAqC,UAAC,EAG3C;IAFd,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAM,SAAS,GAAG,CAAC,aAAa,CAAC,CAAA;IACjC,IAAI,KAAK,CAAC,SAAS;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACpD,OAAO,CACL,8BAAC,qBAAa,aAAC,iBAAiB,EAAC,WAAW,IAAK,KAAK,IAAE,SAAS,EAAE,SAAS,KACzE,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,QAAQ,YAWpB;AAED,6DAA6D;AAC7D,aAAa;AACb,gBAAQ,CAAC,QAAQ,GAAG,UAAU,CAAA"}

package/dist/src/navigation/Tabs.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/src/navigation/Tabs.stories.js

@@ -0,0 +1,42 @@
+"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 react_1 = __importDefault(require("react"));
+var Tabs_1 = require("./Tabs");
+exports.default = {
+    title: "Navigation/Tabs",
+    decorators: [
+        function (storyFn) { return (react_1.default.createElement("div", { style: { padding: "1rem" } },
+            react_1.default.createElement("style", null, "\n      .styled {\n        color: blue !important;\n        font-weight: bold;\n      }\n      .tabs__panel.styled {\n        display: block;\n      }\n    "),
+            storyFn())); },
+    ],
+};
+var Default = function () {
+    return (react_1.default.createElement(Tabs_1.Tabs, null,
+        react_1.default.createElement(Tabs_1.TabList, null,
+            react_1.default.createElement(Tabs_1.Tab, null, "Title 1"),
+            react_1.default.createElement(Tabs_1.Tab, null, "Title 2"),
+            react_1.default.createElement(Tabs_1.Tab, null, "Long Tab Title 3"),
+            react_1.default.createElement(Tabs_1.Tab, { disabled: true }, "Disabled Tab"),
+            react_1.default.createElement(Tabs_1.Tab, { selectedClassName: "funky" }, "Funky Tab")),
+        react_1.default.createElement(Tabs_1.TabPanel, null,
+            react_1.default.createElement("h2", null, "Any content 1"),
+            react_1.default.createElement("p", null, "Paragraph text 1.")),
+        react_1.default.createElement(Tabs_1.TabPanel, null,
+            react_1.default.createElement("h2", null, "Any content 2"),
+            react_1.default.createElement("p", null, "Paragraph text 2.")),
+        react_1.default.createElement(Tabs_1.TabPanel, null,
+            react_1.default.createElement("h2", null, "Any kind of content here"),
+            react_1.default.createElement("p", null, "Paragraph text 3."),
+            react_1.default.createElement("p", null, "Paragraph text 3."),
+            react_1.default.createElement("p", null, "Paragraph text 3.")),
+        react_1.default.createElement(Tabs_1.TabPanel, null,
+            react_1.default.createElement("p", null, "This is disabled")),
+        react_1.default.createElement(Tabs_1.TabPanel, { selectedClassName: "styled" },
+            react_1.default.createElement("p", null, "Feeling funky!"))));
+};
+exports.Default = Default;
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/src/navigation/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/navigation/Tabs.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,+BAAqD;AAErD,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE;QACV,UAAC,OAAY,IAAK,OAAA,CAChB,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC7B,6CACG,8JAQN,CACW;YAEP,OAAO,EAAE,CACN,CACP,EAhBiB,CAgBjB;KACF;CACF,CAAA;AAEM,IAAM,OAAO,GAAG;IACrB,OAAO,CACL,8BAAC,WAAI;QACH,8BAAC,cAAO;YACN,8BAAC,UAAG,kBAAc;YAClB,8BAAC,UAAG,kBAAc;YAClB,8BAAC,UAAG,2BAAuB;YAC3B,8BAAC,UAAG,IAAC,QAAQ,yBAAmB;YAChC,8BAAC,UAAG,IAAC,iBAAiB,EAAC,OAAO,gBAAgB,CACtC;QAEV,8BAAC,eAAQ;YACP,0DAAsB;YACtB,6DAAwB,CACf;QACX,8BAAC,eAAQ;YACP,0DAAsB;YACtB,6DAAwB,CACf;QACX,8BAAC,eAAQ;YACP,qEAAiC;YACjC,6DAAwB;YACxB,6DAAwB;YACxB,6DAAwB,CACf;QACX,8BAAC,eAAQ;YACP,4DAAuB,CACd;QACX,8BAAC,eAAQ,IAAC,iBAAiB,EAAC,QAAQ;YAClC,0DAAqB,CACZ,CACN,CACR,CAAA;AACH,CAAC,CAAA;AAjCY,QAAA,OAAO,WAiCnB"}

package/dist/src/notifications/AlertBox.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { IconTypes } from "../icons/Icon";
+import type { AlertTypes } from "./alertTypes";
+import "./AlertBox.scss";
+export interface AlertBoxProps {
+    boundToLayoutWidth?: boolean;
+    children: ReactNode;
+    className?: string;
+    closeable?: boolean;
+    customIcon?: IconTypes;
+    inverted?: boolean;
+    narrow?: boolean;
+    onClose?: () => void;
+    sticky?: boolean;
+    type?: AlertTypes;
+}
+declare const AlertBox: (props: AlertBoxProps) => JSX.Element | null;
+export { AlertBox as default, AlertBox };

package/dist/src/notifications/AlertBox.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertBox = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+var Icon_1 = require("../icons/Icon");
+var alertTypes_1 = require("./alertTypes");
+require("./AlertBox.scss");
+var icons = {
+    alert: "warning",
+    notice: "info",
+    success: "check",
+    warn: "warning",
+};
+var AlertBox = function (props) {
+    var _a;
+    var _b = (0, react_1.useState)(true), showing = _b[0], setShowing = _b[1];
+    var onClose = props.onClose, closeable = props.closeable;
+    var classNames = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
+        "alert-box",
+        alertTypes_1.colorClasses[props.type || ""]
+    ], (props.inverted ? ["invert"] : []), true), (props.className ? [props.className] : []), true), (props.boundToLayoutWidth ? [] : ["fullWidth"]), true), (props.narrow ? ["narrow"] : []), true), (props.sticky ? ["alert-box__sticky"] : []), true).join(" ");
+    if (onClose)
+        closeable = true;
+    if (!onClose && closeable) {
+        onClose = function () {
+            setShowing(false);
+        };
+    }
+    var innerSection = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "alert-box__head" },
+            react_1.default.createElement("div", { className: "alert-box__title" },
+                (props.type || props.customIcon) && (react_1.default.createElement("span", { className: "alert-box__icon" },
+                    react_1.default.createElement(Icon_1.Icon, { size: "medium", symbol: props.type ? icons[props.type] : (_a = props.customIcon) !== null && _a !== void 0 ? _a : "warning", fill: props.inverted ? Icon_1.IconFillColors.white : undefined, ariaHidden: true }))),
+                react_1.default.createElement("span", { className: "alert-box__body" }, typeof props.children === "string" ? react_1.default.createElement("p", null, props.children) : props.children)),
+            closeable && (react_1.default.createElement("button", { className: "alert-box__close ".concat(props.inverted ? "text-white" : ""), onClick: onClose, "aria-label": "close alert" },
+                react_1.default.createElement("span", { "aria-hidden": true }, "\u00D7"))))));
+    if (props.boundToLayoutWidth) {
+        innerSection = react_1.default.createElement("div", { className: "alert-box_inner" }, innerSection);
+    }
+    return showing ? (react_1.default.createElement("div", { className: classNames, role: "alert", "data-test-id": "alert-box" }, innerSection)) : null;
+};
+exports.default = AlertBox;
+exports.AlertBox = AlertBox;
+//# sourceMappingURL=AlertBox.js.map

package/dist/src/notifications/AlertBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBox.js","sourceRoot":"","sources":["../../../src/notifications/AlertBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAEvC,sCAA+D;AAE/D,2CAA2C;AAC3C,2BAAwB;AAexB,IAAM,KAAK,GAAqC;IAC9C,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,IAAM,QAAQ,GAAG,UAAC,KAAoB;;IAC9B,IAAA,KAAwB,IAAA,gBAAQ,EAAC,IAAI,CAAC,EAArC,OAAO,QAAA,EAAE,UAAU,QAAkB,CAAA;IACtC,IAAA,OAAO,GAAgB,KAAK,QAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAU;IAElC,IAAM,UAAU,GAAG;QACjB,WAAW;QACX,yBAAY,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;OAC3B,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAClC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAC1C,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,SAC/C,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAChC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAC9C,IAAI,CAAC,GAAG,CAAC,CAAA;IAEX,IAAI,OAAO;QAAE,SAAS,GAAG,IAAI,CAAA;IAE7B,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;QACzB,OAAO,GAAG;YACR,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC,CAAA;KACF;IAED,IAAI,YAAY,GAAG,CACjB;QACE,uCAAK,SAAS,EAAC,iBAAiB;YAC9B,uCAAK,SAAS,EAAC,kBAAkB;gBAC9B,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CACnC,wCAAM,SAAS,EAAC,iBAAiB;oBAC/B,8BAAC,WAAI,IACH,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,UAAU,mCAAI,SAAS,EACtE,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAc,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACvD,UAAU,EAAE,IAAI,GAChB,CACG,CACR;gBACD,wCAAM,SAAS,EAAC,iBAAiB,IAC9B,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,yCAAI,KAAK,CAAC,QAAQ,CAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CACzE,CACH;YAEL,SAAS,IAAI,CACZ,0CACE,SAAS,EAAE,2BAAoB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAE,EACnE,OAAO,EAAE,OAAO,gBACL,aAAa;gBAExB,uDAAmB,IAAI,aAAgB,CAChC,CACV,CACG,CACL,CACJ,CAAA;IACD,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,GAAG,uCAAK,SAAS,EAAC,iBAAiB,IAAE,YAAY,CAAO,CAAA;KACrE;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,uCAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,kBAAe,WAAW,IAC/D,YAAY,CACT,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAEoB,2BAAO;AAAE,4BAAQ"}

package/dist/src/notifications/AlertBox.stories.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="mdx" />
+import AlertBoxDocumentation from "./AlertBox.docs.mdx";
+import { BADGES } from "../../.storybook/constants";
+declare const _default: {
+    title: string;
+    id: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+    component: (props: import("./AlertBox").AlertBoxProps) => JSX.Element | null;
+    parameters: {
+        docs: {
+            page: typeof AlertBoxDocumentation;
+        };
+        badges: BADGES[];
+    };
+};
+export default _default;
+export declare const AlertBoxAlert: () => JSX.Element;
+export declare const AlertBoxAlertInvert: () => JSX.Element;
+export declare const AlertBoxNotice: () => JSX.Element;
+export declare const AlertBoxNoticeInvert: () => JSX.Element;
+export declare const AlertBoxNoticeInvertLink: () => JSX.Element;
+export declare const AlertBoxSuccess: () => JSX.Element;
+export declare const AlertBoxSuccessInvert: () => JSX.Element;
+export declare const AlertBoxWarn: () => JSX.Element;
+export declare const AlertBoxBoundToLayoutWidth: () => JSX.Element;
+export declare const AlertBoxNarrow: () => JSX.Element;
+export declare const AlertBoxSticky: () => JSX.Element;
+export declare const styleOverrides: () => JSX.Element;

package/dist/src/notifications/AlertBox.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleOverrides = exports.AlertBoxSticky = exports.AlertBoxNarrow = exports.AlertBoxBoundToLayoutWidth = exports.AlertBoxWarn = exports.AlertBoxSuccessInvert = exports.AlertBoxSuccess = exports.AlertBoxNoticeInvertLink = exports.AlertBoxNoticeInvert = exports.AlertBoxNotice = exports.AlertBoxAlertInvert = exports.AlertBoxAlert = void 0;
+var react_1 = __importDefault(require("react"));
+var AlertBox_1 = require("./AlertBox");
+var AlertBox_docs_mdx_1 = __importDefault(require("./AlertBox.docs.mdx"));
+var constants_1 = require("../../.storybook/constants");
+var SiteHeader_stories_1 = require("../headers/SiteHeader.stories");
+exports.default = {
+    title: "Notifications/Alert Box  🚩",
+    id: "notifications/alert-box",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+    component: AlertBox_1.AlertBox,
+    parameters: {
+        docs: {
+            page: AlertBox_docs_mdx_1.default,
+        },
+        badges: [constants_1.BADGES.GEN2],
+    },
+};
+var AlertBoxAlert = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "alert" }, "Some warning")); };
+exports.AlertBoxAlert = AlertBoxAlert;
+var AlertBoxAlertInvert = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "alert", inverted: true }, "Some warning")); };
+exports.AlertBoxAlertInvert = AlertBoxAlertInvert;
+var AlertBoxNotice = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "notice" }, "Some warning")); };
+exports.AlertBoxNotice = AlertBoxNotice;
+var AlertBoxNoticeInvert = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "notice", inverted: true }, "Some warning")); };
+exports.AlertBoxNoticeInvert = AlertBoxNoticeInvert;
+var AlertBoxNoticeInvertLink = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "notice", inverted: true },
+    "Some warning ",
+    react_1.default.createElement("a", { href: "" }, "with link text"))); };
+exports.AlertBoxNoticeInvertLink = AlertBoxNoticeInvertLink;
+var AlertBoxSuccess = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "success" }, "Some warning")); };
+exports.AlertBoxSuccess = AlertBoxSuccess;
+var AlertBoxSuccessInvert = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "success", inverted: true }, "Some warning")); };
+exports.AlertBoxSuccessInvert = AlertBoxSuccessInvert;
+var AlertBoxWarn = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "warn" }, "Some warning")); };
+exports.AlertBoxWarn = AlertBoxWarn;
+var AlertBoxBoundToLayoutWidth = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "success", boundToLayoutWidth: true }, "Some warning")); };
+exports.AlertBoxBoundToLayoutWidth = AlertBoxBoundToLayoutWidth;
+var AlertBoxNarrow = function () { return (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "success", narrow: true }, "Some warning")); };
+exports.AlertBoxNarrow = AlertBoxNarrow;
+var AlertBoxSticky = function () { return (react_1.default.createElement("div", { style: { height: "200rem", border: "3px solid gray" } },
+    react_1.default.createElement("div", null, (0, SiteHeader_stories_1.withMenuLinks)()),
+    react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { }, type: "success", sticky: true }, "Some warning"),
+    react_1.default.createElement("div", { style: { borderTop: "1px solid gray", padding: "5rem" } }, "Page Content"))); };
+exports.AlertBoxSticky = AlertBoxSticky;
+var styleOverrides = function () {
+    var cssVarsOverride = "\n    .alert-box-overrides .alert-box {\n      --background-color: var(--bloom-color-gray-400);\n      --horizontal-padding: var(--bloom-s3);\n      --font-weight: 400;\n      --close-icon-color: var(--bloom-color-gray-600);\n    }\n  ";
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "alert-box-overrides" },
+            react_1.default.createElement(AlertBox_1.AlertBox, { onClose: function () { } }, "Some warning"),
+            react_1.default.createElement("style", null, cssVarsOverride)),
+        react_1.default.createElement("p", { className: "mt-12 font-semibold" }, "Customized using the following variable overrides:"),
+        react_1.default.createElement("pre", null, cssVarsOverride.replace(".page-header-overrides ", ""))));
+};
+exports.styleOverrides = styleOverrides;
+//# sourceMappingURL=AlertBox.stories.js.map

package/dist/src/notifications/AlertBox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBox.stories.js","sourceRoot":"","sources":["../../../src/notifications/AlertBox.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/notifications/AlertNotice.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { AlertTypes } from "./alertTypes";
+import "./AlertNotice.scss";
+export interface AlertNoticeProps {
+    type?: AlertTypes;
+    inverted?: boolean;
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const AlertNotice: (props: AlertNoticeProps) => JSX.Element;
+export { AlertNotice as default, AlertNotice };