@rocket.chat/fuselage 0.48.0 → 0.50.0

package/dist/fuselage.development.js

@@ -3834,7 +3834,7 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 var Contextualbar = function (_a) {
     var children = _a.children, width = _a.width, position = _a.position, _b = _a.bg, bg = _b === void 0 ? 'room' : _b, props = __rest(_a, ["children", "width", "position", "bg"]);
-    return (react_1.default.createElement(__1.Box, __assign({ "rcx-vertical-bar": true, bg: bg, display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 5 }, props), children));
+    return (react_1.default.createElement(__1.Box, __assign({ "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 5 }, props), children));
 };
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -4186,7 +4186,7 @@ var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 var ContextualbarFooter = (0, react_1.forwardRef)(function ContextualbarFooter(_a, ref) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(__1.Box, __assign({ is: 'footer', p: 24 }, props, { ref: ref }), children));
+    return (react_1.default.createElement(__1.Box, __assign({ ref: ref, p: 24 }, props), children));
 });
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -4254,8 +4254,8 @@ var Box_1 = __importDefault(__webpack_require__(/*! ../Box */ "./src/components/
 var Margins_1 = __importDefault(__webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts"));
 var ContextualbarHeader = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(Box_1.default, __assign({ display: 'flex', alignItems: 'center', height: 'x56', is: 'h3', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0 }, props),
-        react_1.default.createElement(Box_1.default, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontScale: 'h4', flexGrow: 1, overflow: 'hidden', color: 'default' },
+    return (react_1.default.createElement(Box_1.default, __assign({ display: 'flex', alignItems: 'center', height: 'x56', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0 }, props),
+        react_1.default.createElement(Box_1.default, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden' },
             react_1.default.createElement(Margins_1.default, { inline: 'x4' }, children))));
 };
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
@@ -4358,7 +4358,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var _1 = __webpack_require__(/*! . */ "./src/components/Contextualbar/index.ts");
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var ContextualbarSkeleton = function (props) { return (react_1.default.createElement(_1.Contextualbar, __assign({}, props, { width: '100%' }),
+var ContextualbarSkeleton = function (props) { return (react_1.default.createElement(_1.Contextualbar, __assign({}, props),
     react_1.default.createElement(_1.ContextualbarHeader, null,
         react_1.default.createElement(__1.Skeleton, { width: '100%' })),
     react_1.default.createElement(__1.Box, { p: 24 },
@@ -4415,7 +4415,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 var __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
-var ContextualbarTitle = function (props) { return (react_1.default.createElement(__1.Box, __assign({ flexShrink: 1, flexGrow: 1, withTruncatedText: true }, props))); };
+var ContextualbarTitle = function (props) { return (react_1.default.createElement(__1.Box, __assign({ flexShrink: 1, flexGrow: 1, fontScale: 'h4', withTruncatedText: true }, props))); };
 exports["default"] = (0, react_1.memo)(ContextualbarTitle);
 
 
@@ -12674,6 +12674,565 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 __exportStar(__webpack_require__(/*! ./Pagination */ "./src/components/Pagination/Pagination.tsx"), exports);
 
 
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/PaletteStyleTag.tsx":
+/*!************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/PaletteStyleTag.tsx ***!
+  \************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+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;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.PaletteStyleTag = void 0;
+var react_1 = __importStar(__webpack_require__(/*! react */ "react"));
+var react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
+var convertToCss_1 = __webpack_require__(/*! ./helpers/convertToCss */ "./src/components/PaletteStyleTag/helpers/convertToCss.ts");
+var useCreateStyleContainer_1 = __webpack_require__(/*! ./hooks/useCreateStyleContainer */ "./src/components/PaletteStyleTag/hooks/useCreateStyleContainer.ts");
+var codeBlockStyles_1 = __webpack_require__(/*! ./lib/codeBlockStyles */ "./src/components/PaletteStyleTag/lib/codeBlockStyles.ts");
+var themePalettes_1 = __webpack_require__(/*! ./lib/themePalettes */ "./src/components/PaletteStyleTag/lib/themePalettes.ts");
+var themes = {
+    light: themePalettes_1.light,
+    dark: themePalettes_1.dark,
+    'high-contrast': themePalettes_1.highContrast,
+};
+exports.PaletteStyleTag = (0, react_1.memo)(function PaletteStyleTag(_a) {
+    var _b = _a.theme, theme = _b === void 0 ? 'light' : _b, _c = _a.tagId, tagId = _c === void 0 ? 'main-palette' : _c, _d = _a.prefix, prefix = _d === void 0 ? '--rcx-color' : _d, selector = _a.selector;
+    var palette = (0, convertToCss_1.convertToCss)(themes[theme], prefix, selector);
+    return (react_1.default.createElement(react_1.default.Fragment, null, (0, react_dom_1.createPortal)(theme === 'dark' ? palette + codeBlockStyles_1.codeBlock : palette, (0, useCreateStyleContainer_1.useCreateStyleContainer)(tagId))));
+});
+exports["default"] = exports.PaletteStyleTag;
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/helpers/convertToCss.ts":
+/*!****************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/helpers/convertToCss.ts ***!
+  \****************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.convertToCss = void 0;
+var convertToCss = function (values, prefix, selector) {
+    if (selector === void 0) { selector = ':root'; }
+    return "".concat(selector, " {\n").concat(Object.entries(values)
+        .map(function (_a) {
+        var _b = __read(_a, 2), name = _b[0], color = _b[1];
+        return "".concat(prefix, "-").concat(name, ": ").concat(color, ";");
+    })
+        .join('\n'), "\n}");
+};
+exports.convertToCss = convertToCss;
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/helpers/getPalette.ts":
+/*!**************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/helpers/getPalette.ts ***!
+  \**************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+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);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getThemePalette = exports.getTokens = void 0;
+var badge_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/badge.json */ "../fuselage-tokens/dist/badge.json");
+var button_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/button.json */ "../fuselage-tokens/dist/button.json");
+var font_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/font.json */ "../fuselage-tokens/dist/font.json");
+var shadow_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/shadow.json */ "../fuselage-tokens/dist/shadow.json");
+var status_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/status.json */ "../fuselage-tokens/dist/status.json");
+var statusBullet_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/statusBullet.json */ "../fuselage-tokens/dist/statusBullet.json");
+var stroke_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/stroke.json */ "../fuselage-tokens/dist/stroke.json");
+var surface_json_1 = __webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "../fuselage-tokens/dist/surface.json");
+var getTokens = function (theme) {
+    var tokens = {
+        badge: badge_json_1.badge[theme],
+        button: button_json_1.button[theme],
+        font: font_json_1.font[theme],
+        shadow: shadow_json_1.shadow[theme],
+        status: status_json_1.status[theme],
+        statusBullet: statusBullet_json_1.statusBullet[theme],
+        stroke: stroke_json_1.stroke[theme],
+        surface: surface_json_1.surface[theme],
+    };
+    return tokens;
+};
+exports.getTokens = getTokens;
+var getThemePalette = function (theme) {
+    var _a = (0, exports.getTokens)(theme), badge = _a.badge, button = _a.button, font = _a.font, shadow = _a.shadow, status = _a.status, statusBullet = _a.statusBullet, stroke = _a.stroke, surface = _a.surface;
+    var palette = [
+        {
+            category: 'Stroke',
+            description: "Use as component's outline, stroke, dividers",
+            list: [
+                { name: 'stroke-extra-light', color: stroke.extraLight },
+                { name: 'stroke-light', color: stroke.light },
+                { name: 'stroke-medium', color: stroke.medium },
+                { name: 'stroke-dark', color: stroke.dark },
+                { name: 'stroke-extra-dark', color: stroke.extraDark },
+                {
+                    name: 'stroke-extra-light-highlight',
+                    color: stroke.extraLightHighlight,
+                },
+                { name: 'stroke-highlight', color: stroke.highlight },
+                { name: 'stroke-extra-light-error', color: stroke.extraLightError },
+                { name: 'stroke-error', color: stroke.error },
+            ],
+        },
+        {
+            category: 'Surface',
+            description: 'Use as a container on top of the background',
+            list: [
+                { name: 'surface-light', color: surface.light },
+                { name: 'surface-tint', color: surface.tint },
+                { name: 'surface-room', color: surface.room },
+                { name: 'surface-neutral', color: surface.neutral },
+                { name: 'surface-disabled', color: surface.disabled },
+                { name: 'surface-hover', color: surface.hover },
+                { name: 'surface-selected', color: surface.selected },
+                { name: 'surface-dark', color: surface.dark },
+                { name: 'surface-featured', color: surface.featured },
+                { name: 'surface-featured-hover', color: surface.featuredHover },
+                { name: 'surface-overlay', color: surface.overlay },
+                { name: 'surface-sidebar', color: surface.sidebar },
+            ],
+        },
+        {
+            category: 'Shadow',
+            description: 'Use as a shadow color',
+            list: [
+                { name: 'shadow-highlight', color: shadow.highlight },
+                { name: 'shadow-danger', color: shadow.danger },
+                { name: 'shadow-elevation-border', color: shadow['elevation-border'] },
+                { name: 'shadow-elevation-1', color: shadow['elevation-1'] },
+                {
+                    name: 'shadow-elevation-2x',
+                    color: shadow['elevation-2x'],
+                },
+                {
+                    name: 'shadow-elevation-2y',
+                    color: shadow['elevation-2y'],
+                },
+            ],
+        },
+        {
+            category: 'Font',
+            description: 'These should be applied according to surfaces',
+            list: [
+                { name: 'font-white', color: font.white },
+                { name: 'font-disabled', color: font.disabled },
+                { name: 'font-annotation', color: font.annotation },
+                { name: 'font-hint', color: font.hint },
+                { name: 'font-secondary-info', color: font.secondaryInfo },
+                { name: 'font-default', color: font.default },
+                { name: 'font-titles-labels', color: font.titlesLabels },
+                { name: 'font-info', color: font.info },
+                { name: 'font-danger', color: font.danger },
+                { name: 'font-pure-black', color: font.pureBlack },
+                { name: 'font-pure-white', color: font.pureWhite },
+            ],
+        },
+        {
+            category: 'Status',
+            description: 'Status Background',
+            list: [
+                { name: 'status-background-info', color: status.info },
+                { name: 'status-background-success', color: status.success },
+                { name: 'status-background-danger', color: status.danger },
+                { name: 'status-background-warning', color: status.warning },
+                { name: 'status-background-warning-2', color: status['warning-2'] },
+                {
+                    name: 'status-background-service-1',
+                    color: status['service-1'],
+                },
+                {
+                    name: 'status-background-service-2',
+                    color: status['service-2'],
+                },
+                {
+                    name: 'status-background-service-3',
+                    color: status['service-3'],
+                },
+            ],
+        },
+        {
+            description: 'Status Font',
+            list: [
+                { name: 'status-font-on-info', color: status['font-on-info'] },
+                { name: 'status-font-on-success', color: status['font-on-success'] },
+                { name: 'status-font-on-danger', color: status['font-on-danger'] },
+                { name: 'status-font-on-warning', color: status['font-on-warning'] },
+                {
+                    name: 'status-font-on-warning-2',
+                    color: status['font-on-warning-2'],
+                },
+                {
+                    name: 'status-font-on-service-1',
+                    color: status['font-on-service-1'],
+                },
+                {
+                    name: 'status-font-on-service-2 ',
+                    color: status['font-on-service-2'],
+                },
+                {
+                    name: 'status-font-on-service-3 ',
+                    color: status['font-on-service-3'],
+                },
+            ],
+        },
+        {
+            category: 'Badge',
+            description: 'Badge Background',
+            list: [
+                { name: 'badge-background-level-0', color: badge['level-0'] },
+                { name: 'badge-background-level-1', color: badge['level-1'] },
+                { name: 'badge-background-level-2', color: badge['level-2'] },
+                { name: 'badge-background-level-3', color: badge['level-3'] },
+                { name: 'badge-background-level-4', color: badge['level-4'] },
+            ],
+        },
+        {
+            category: 'Status Bullet',
+            description: 'Used to show user status',
+            list: [
+                { name: 'status-bullet-online', color: statusBullet.online },
+                { name: 'status-bullet-away', color: statusBullet.away },
+                { name: 'status-bullet-busy', color: statusBullet.busy },
+                { name: 'status-bullet-disabled', color: statusBullet.disabled },
+                { name: 'status-bullet-offline', color: statusBullet.offline },
+                { name: 'status-bullet-loading', color: statusBullet.loading },
+            ],
+        },
+        {
+            category: 'Button',
+            description: 'Primary Background',
+            list: [
+                {
+                    name: 'button-background-primary-default',
+                    color: button.backgroundPrimaryDefault,
+                },
+                {
+                    name: 'button-background-primary-hover',
+                    color: button.backgroundPrimaryHover,
+                },
+                {
+                    name: 'button-background-primary-press',
+                    color: button.backgroundPrimaryPress,
+                },
+                {
+                    name: 'button-background-primary-focus',
+                    color: button.backgroundPrimaryFocus,
+                },
+                {
+                    name: 'button-background-primary-keyfocus',
+                    color: button.backgroundPrimaryKeyfocus,
+                },
+                {
+                    name: 'button-background-primary-disabled',
+                    color: button.backgroundPrimaryDisabled,
+                },
+            ],
+        },
+        {
+            description: 'Secondary Background',
+            list: [
+                {
+                    name: 'button-background-secondary-default',
+                    color: button.backgroundSecondaryDefault,
+                },
+                {
+                    name: 'button-background-secondary-hover',
+                    color: button.backgroundSecondaryHover,
+                },
+                {
+                    name: 'button-background-secondary-press',
+                    color: button.backgroundSecondaryPress,
+                },
+                {
+                    name: 'button-background-secondary-focus',
+                    color: button.backgroundSecondaryFocus,
+                },
+                {
+                    name: 'button-background-secondary-keyfocus',
+                    color: button.backgroundSecondaryKeyfocus,
+                },
+                {
+                    name: 'button-background-secondary-disabled',
+                    color: button.backgroundSecondaryDisabled,
+                },
+            ],
+        },
+        {
+            description: 'Secondary Danger Background',
+            list: [
+                {
+                    name: 'button-background-secondary-danger-default',
+                    color: button.backgroundSecondaryDangerDefault,
+                },
+                {
+                    name: 'button-background-secondary-danger-hover',
+                    color: button.backgroundSecondaryDangerHover,
+                },
+                {
+                    name: 'button-background-secondary-danger-press',
+                    color: button.backgroundSecondaryDangerPress,
+                },
+                {
+                    name: 'button-background-secondary-danger-focus',
+                    color: button.backgroundSecondaryDangerFocus,
+                },
+                {
+                    name: 'button-background-secondary-danger-keyfocus',
+                    color: button.backgroundSecondaryDangerKeyfocus,
+                },
+                {
+                    name: 'button-background-secondary-danger-disabled',
+                    color: button.backgroundDangerDisabled,
+                },
+            ],
+        },
+        {
+            description: 'Danger Background',
+            list: [
+                {
+                    name: 'button-background-danger-default',
+                    color: button.backgroundDangerDefault,
+                },
+                {
+                    name: 'button-background-danger-hover',
+                    color: button.backgroundDangerHover,
+                },
+                {
+                    name: 'button-background-danger-press',
+                    color: button.backgroundDangerPress,
+                },
+                {
+                    name: 'button-background-danger-focus',
+                    color: button.backgroundDangerFocus,
+                },
+                {
+                    name: 'button-background-danger-keyfocus',
+                    color: button.backgroundDangerKeyfocus,
+                },
+                {
+                    name: 'button-background-danger-disabled',
+                    color: button.backgroundDangerDisabled,
+                },
+            ],
+        },
+        {
+            description: 'Success Background',
+            list: [
+                {
+                    name: 'button-background-success-default',
+                    color: button.backgroundSuccessDefault,
+                },
+                {
+                    name: 'button-background-success-hover',
+                    color: button.backgroundSuccessHover,
+                },
+                {
+                    name: 'button-background-success-press',
+                    color: button.backgroundSuccessPress,
+                },
+                {
+                    name: 'button-background-success-focus',
+                    color: button.backgroundSuccessFocus,
+                },
+                {
+                    name: 'button-background-success-keyfocus',
+                    color: button.backgroundSuccessKeyfocus,
+                },
+                {
+                    name: 'button-background-success-disabled',
+                    color: button.backgroundSuccessDisabled,
+                },
+            ],
+        },
+        {
+            description: 'Font',
+            list: [
+                { name: 'button-font-on-primary', color: button.fontOnPrimary },
+                {
+                    name: 'button-font-on-primary-disabled',
+                    color: button.fontOnPrimaryDisabled,
+                },
+                {
+                    name: 'button-font-on-secondary',
+                    color: button.fontOnSecondary,
+                },
+                {
+                    name: 'button-font-on-secondary-disabled',
+                    color: button.fontOnSecondaryDisabled,
+                },
+                {
+                    name: 'button-font-on-secondary-danger',
+                    color: button.fontOnSecondaryDanger,
+                },
+                {
+                    name: 'button-font-on-secondary-danger-disabled',
+                    color: button.onSecondaryDangerDisabled,
+                },
+                { name: 'button-font-on-danger', color: button.fontOnDanger },
+                {
+                    name: 'button-font-on-danger-disabled',
+                    color: button.fontOnDangerDisabled,
+                },
+                { name: 'button-font-on-success', color: button.fontOnSuccess },
+                {
+                    name: 'button-font-on-success-disabled',
+                    color: button.fontOnSuccessDisabled,
+                },
+            ],
+        },
+    ];
+    return __assign({}, palette.reduce(function (rec, group) { return (__assign(__assign({}, rec), group.list.reduce(function (rec, item) {
+        var _a;
+        return (__assign(__assign({}, rec), (_a = {}, _a[item.name] = item.color, _a)));
+    }, {}))); }, {}));
+};
+exports.getThemePalette = getThemePalette;
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/hooks/useCreateStyleContainer.ts":
+/*!*************************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/hooks/useCreateStyleContainer.ts ***!
+  \*************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useCreateStyleContainer = void 0;
+var react_1 = __webpack_require__(/*! react */ "react");
+var useCreateStyleContainer = function (id) {
+    return (0, react_1.useMemo)(function () {
+        var refElement = document.getElementById('rcx-styles') || document.head.lastChild;
+        var el = document.getElementById(id);
+        if (el) {
+            return el;
+        }
+        var styleElement = document.createElement('style');
+        styleElement.setAttribute('id', id);
+        document.head.insertBefore(styleElement, refElement);
+        document.head.appendChild(document.createElement('style'));
+        return styleElement;
+    }, [id]);
+};
+exports.useCreateStyleContainer = useCreateStyleContainer;
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/index.ts":
+/*!*************************************************!*\
+  !*** ./src/components/PaletteStyleTag/index.ts ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__exportStar(__webpack_require__(/*! ./PaletteStyleTag */ "./src/components/PaletteStyleTag/PaletteStyleTag.tsx"), exports);
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/lib/codeBlockStyles.ts":
+/*!***************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/lib/codeBlockStyles.ts ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.codeBlock = void 0;
+exports.codeBlock = "pre code.hljs {\n\tdisplay: block;\n\toverflow-x: auto;\n\tpadding: 1em;\n}\ncode.hljs {\n\tpadding: 3px 5px;\n}\n.hljs {\n\tbackground: #1d1f21;\n\tcolor: #c5c8c6;\n}\n.hljs span::selection,\n.hljs::selection {\n\tbackground: #373b41;\n}\n.hljs span::-moz-selection,\n.hljs::-moz-selection {\n\tbackground: #373b41;\n}\n.hljs-name,\n.hljs-title {\n\tcolor: #f0c674;\n}\n.hljs-comment,\n.hljs-meta,\n.hljs-meta .hljs-keyword {\n\tcolor: #707880;\n}\n.hljs-deletion,\n.hljs-link,\n.hljs-literal,\n.hljs-number,\n.hljs-symbol {\n\tcolor: #c66;\n}\n.hljs-addition,\n.hljs-doctag,\n.hljs-regexp,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-string {\n\tcolor: #b5bd68;\n}\n.hljs-attribute,\n.hljs-code,\n.hljs-selector-id {\n\tcolor: #b294bb;\n}\n.hljs-bullet,\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-tag {\n\tcolor: #81a2be;\n}\n.hljs-subst,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-variable {\n\tcolor: #8abeb7;\n}\n.hljs-built_in,\n.hljs-quote,\n.hljs-section,\n.hljs-selector-class,\n.hljs-type {\n\tcolor: #de935f;\n}\n.hljs-emphasis {\n\tfont-style: italic;\n}\n.hljs-strong {\n\tfont-weight: 700;\n}";
+
+
+/***/ }),
+
+/***/ "./src/components/PaletteStyleTag/lib/themePalettes.ts":
+/*!*************************************************************!*\
+  !*** ./src/components/PaletteStyleTag/lib/themePalettes.ts ***!
+  \*************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.dark = exports.highContrast = exports.light = void 0;
+var getPalette_1 = __webpack_require__(/*! ../helpers/getPalette */ "./src/components/PaletteStyleTag/helpers/getPalette.ts");
+exports.light = (0, getPalette_1.getThemePalette)('light');
+exports.highContrast = (0, getPalette_1.getThemePalette)('high-contrast');
+exports.dark = (0, getPalette_1.getThemePalette)('dark');
+
+
 /***/ }),
 
 /***/ "./src/components/PasswordInput/PasswordInput.tsx":
@@ -17785,6 +18344,7 @@ var Option_1 = __webpack_require__(/*! ./Option */ "./src/components/Option/inde
 Object.defineProperty(exports, "Option", ({ enumerable: true, get: function () { return __importDefault(Option_1).default; } }));
 __exportStar(__webpack_require__(/*! ./Option */ "./src/components/Option/index.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./Pagination */ "./src/components/Pagination/index.ts"), exports);
+__exportStar(__webpack_require__(/*! ./PaletteStyleTag */ "./src/components/PaletteStyleTag/index.ts"), exports);
 var PasswordInput_1 = __webpack_require__(/*! ./PasswordInput */ "./src/components/PasswordInput/index.ts");
 Object.defineProperty(exports, "PasswordInput", ({ enumerable: true, get: function () { return __importDefault(PasswordInput_1).default; } }));
 __exportStar(__webpack_require__(/*! ./StatusBullet */ "./src/components/StatusBullet/index.tsx"), exports);
@@ -18780,6 +19340,86 @@ module.exports = JSON.parse('{"white":"#FFFFFF","n100":"#F7F8FA","n200":"#F2F3F5
 
 /***/ }),
 
+/***/ "../fuselage-tokens/dist/badge.json":
+/*!******************************************!*\
+  !*** ../fuselage-tokens/dist/badge.json ***!
+  \******************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"badge":{"light":{"level-0":"#E4E7EA","level-1":"#6C737A","level-2":"#156FF5","level-3":"#F38C39","level-4":"#EC0D2A"},"high-contrast":{"level-0":"#E4E7EA","level-1":"#2F343D","level-2":"#10529E","level-3":"#713607","level-4":"#9B1325"},"dark":{"level-0":"#404754","level-1":"#484C51","level-2":"#2C65BA","level-3":"#955828","level-4":"#B43C4C"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/button.json":
+/*!*******************************************!*\
+  !*** ../fuselage-tokens/dist/button.json ***!
+  \*******************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"button":{"light":{"backgroundPrimaryDefault":"#156FF5","backgroundPrimaryHover":"#095AD2","backgroundPrimaryPress":"#10529E","backgroundPrimaryFocus":"#156FF5","backgroundPrimaryKeyfocus":"#156FF5","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#BB0B21","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#EC0D2A","backgroundDangerHover":"#D40C26","backgroundDangerPress":"#BB0B21","backgroundDangerFocus":"#EC0D2A","backgroundDangerKeyfocus":"#EC0D2A","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#2DE0A5","backgroundSuccessHover":"#1ECB92","backgroundSuccessPress":"#19AC7C","backgroundSuccessFocus":"#2DE0A5","backgroundSuccessKeyfocus":"#2DE0A5","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#1F2329","fontOnSuccessDisabled":"#ffffff"},"high-contrast":{"backgroundPrimaryDefault":"#10529E","backgroundPrimaryHover":"#01336B","backgroundPrimaryPress":"#012247","backgroundPrimaryFocus":"#10529E","backgroundPrimaryKeyfocus":"#10529E","backgroundPrimaryDisabled":"#D1EBFE","fontOnPrimary":"#ffffff","fontOnPrimaryDisabled":"#ffffff","backgroundSecondaryDefault":"#E4E7EA","backgroundSecondaryHover":"#CBCED1","backgroundSecondaryPress":"#9EA2A8","backgroundSecondaryFocus":"#E4E7EA","backgroundSecondaryKeyfocus":"#E4E7EA","backgroundSecondaryDisabled":"#EBECEF","fontOnSecondary":"#1F2329","fontOnSecondaryDisabled":"#CBCED1","backgroundSecondaryDangerDefault":"#E4E7EA","backgroundSecondaryDangerHover":"#CBCED1","backgroundSecondaryDangerPress":"#9EA2A8","backgroundSecondaryDangerFocus":"#E4E7EA","backgroundSecondaryDangerKeyfocus":"#E4E7EA","backgroundSecondaryDangerDisabled":"#EBECEF","fontOnSecondaryDanger":"#8B0719","onSecondaryDangerDisabled":"#F98F9D","backgroundDangerDefault":"#9B1325","backgroundDangerHover":"#8B0719","backgroundDangerPress":"#8B0719","backgroundDangerFocus":"#9B1325","backgroundDangerKeyfocus":"#9B1325","backgroundDangerDisabled":"#FFC1C9","fontOnDanger":"#ffffff","fontOnDangerDisabled":"#ffffff","backgroundSuccessDefault":"#2DE0A5","backgroundSuccessHover":"#1ECB92","backgroundSuccessPress":"#19AC7C","backgroundSuccessFocus":"#2DE0A5","backgroundSuccessKeyfocus":"#2DE0A5","backgroundSuccessDisabled":"#C0F6E4","fontOnSuccess":"#1F2329","fontOnSuccessDisabled":"#ffffff"},"dark":{"backgroundPrimaryDefault":"#095AD2","backgroundPrimaryHover":"#10529E","backgroundPrimaryPress":"#01336B","backgroundPrimaryFocus":"#095AD2","backgroundPrimaryKeyfocus":"#095AD2","backgroundPrimaryDisabled":"#012247","fontOnPrimary":"#FFFFFF","fontOnPrimaryDisabled":"#6C727A","backgroundSecondaryDefault":"#353B45","backgroundSecondaryHover":"#404754","backgroundSecondaryPress":"#4C5362","backgroundSecondaryFocus":"#353B45","backgroundSecondaryKeyfocus":"#353B45","backgroundSecondaryDisabled":"#353B45","fontOnSecondary":"#E4E7EA","fontOnSecondaryDisabled":"#6C727A","backgroundSecondaryDangerDefault":"#353B45","backgroundSecondaryDangerHover":"#404754","backgroundSecondaryDangerPress":"#4C5362","backgroundSecondaryDangerFocus":"#353B45","backgroundSecondaryDangerKeyfocus":"#353B45","backgroundSecondaryDangerDisabled":"#353B45","fontOnSecondaryDanger":"#FFC1C9","onSecondaryDangerDisabled":"#6B0513","backgroundDangerDefault":"#BB3E4E","backgroundDangerHover":"#95323F","backgroundDangerPress":"#822C37","backgroundDangerFocus":"#BB3E4E","backgroundDangerKeyfocus":"#BB3E4E","backgroundDangerDisabled":"#3D2126","fontOnDanger":"#FFFFFF","fontOnDangerDisabled":"#757575","backgroundSuccessDefault":"#1D7256","backgroundSuccessHover":"#175943","backgroundSuccessPress":"#134937","backgroundSuccessFocus":"#1D7256","backgroundSuccessKeyfocus":"#1D7256","backgroundSuccessDisabled":"#1E4B40","fontOnSuccess":"#FFFFFF","fontOnSuccessDisabled":"#757575"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/font.json":
+/*!*****************************************!*\
+  !*** ../fuselage-tokens/dist/font.json ***!
+  \*****************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"font":{"light":{"white":"#ffffff","disabled":"#CBCED1","annotation":"#9EA2A8","hint":"#6C737A","secondaryInfo":"#6C737A","default":"#2F343D","titlesLabels":"#1F2329","info":"#095AD2","danger":"#D40C26","pureWhite":"#ffffff","pureBlack":"#2F343D"},"high-contrast":{"white":"#ffffff","disabled":"#CBCED1","annotation":"#1F2329","hint":"#1F2329","secondaryInfo":"#1F2329","default":"#1F2329","titlesLabels":"#1F2329","info":"#01336B","danger":"#9B1325","pureWhite":"#ffffff","pureBlack":"#1F2329"},"dark":{"white":"#2F343D","disabled":"#60646C","annotation":"#9EA2A8","hint":"#9EA2A8","secondaryInfo":"#9EA2A8","default":"#C1C7D0","titlesLabels":"#F2F3F5","info":"#739EDE","danger":"#D88892","pureWhite":"#ffffff","pureBlack":"#1F2329"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/shadow.json":
+/*!*******************************************!*\
+  !*** ../fuselage-tokens/dist/shadow.json ***!
+  \*******************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"shadow":{"light":{"highlight":"#D1EBFE","danger":"#FFE9EC","elevation-border":"#EBECEF","elevation-1":"rgba(47, 52, 61, 0.1)","elevation-2x":"rgba(47, 52, 61, 0.08)","elevation-2y":"rgba(47, 52, 61, 0.12)"},"high-contrast":{"highlight":"#D1EBFE","danger":"#FFE9EC","elevation-border":"#EBECEF","elevation-1":"rgba(47, 52, 61, 0.1)","elevation-2x":"rgba(47, 52, 61, 0.08)","elevation-2y":"rgba(47, 52, 61, 0.12)"},"dark":{"highlight":"#D1EBFE","danger":"#FFE9EC","elevation-border":"#2F343D","elevation-1":"rgba(9, 9, 9, 0.35)","elevation-2x":"rgba(9, 9, 9, 0.3)","elevation-2y":"rgba(9, 9, 9, 0.45)"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/status.json":
+/*!*******************************************!*\
+  !*** ../fuselage-tokens/dist/status.json ***!
+  \*******************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"status":{"light":{"info":"#D1EBFE","font-on-info":"#095AD2","success":"#C0F6E4","font-on-success":"#148660","danger":"#FFC1C9","font-on-danger":"#9B1325","warning":"#FFECAD","font-on-warning":"#8E6300","warning-2":"#FFF8E0","font-on-warning-2":"#2F343D","service-1":"#FAD1B0","font-on-service-1":"#974809","service-2":"#EDD0F7","font-on-service-2":"#7F1B9F","service-3":"#5F1477","font-on-service-3":"#ffffff"},"high-contrast":{"info":"#D1EBFE","font-on-info":"#10529E","success":"#C0F6E4","font-on-success":"#0D5940","danger":"#FFC1C9","font-on-danger":"#6B0513","warning":"#FFECAD","font-on-warning":"#573D00","warning-2":"#FFF8E0","font-on-warning-2":"#2F343D","service-1":"#FAD1B0","font-on-service-1":"#5B2C06","service-2":"#EDD0F7","font-on-service-2":"#7F1B9F","service-3":"#5F1477","font-on-service-3":"#ffffff"},"dark":{"info":"#A8C3EB","font-on-info":"#739EDE","success":"#C1EBDD","font-on-success":"#58AD90","danger":"#F7CFD4","font-on-danger":"#D88892","warning":"#FEEFBE","font-on-warning":"#C7AA66","warning-2":"#3C3625","font-on-warning-2":"#FFFFFF","service-1":"#FCE3CF","font-on-service-1":"#CA9163","service-2":"#EDD0F7","font-on-service-2":"#C393D2","service-3":"#5F1477","font-on-service-3":"#FFFFFF"}},"statusBullet":{"light":{"online":"#148660","away":"#AC892F","busy":"#D40C26","disabled":"#F38C39","offline":"#6C737A","loading":"#6C737A"},"high-contrast":{"online":"#0D5940","away":"#AC892F","busy":"#6B0513","disabled":"#BD5A0B","offline":"#1F2329","loading":"#1F2329"},"dark":{"online":"#1CBF89","away":"#B08C30","busy":"#C75765","disabled":"#CC7F42","offline":"#8B9098","loading":"#8B9098"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/statusBullet.json":
+/*!*************************************************!*\
+  !*** ../fuselage-tokens/dist/statusBullet.json ***!
+  \*************************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"statusBullet":{"light":{"online":"#148660","away":"#AC892F","busy":"#D40C26","disabled":"#F38C39","offline":"#6C737A","loading":"#6C737A"},"high-contrast":{"online":"#0D5940","away":"#AC892F","busy":"#6B0513","disabled":"#BD5A0B","offline":"#1F2329","loading":"#1F2329"},"dark":{"online":"#1CBF89","away":"#B08C30","busy":"#C75765","disabled":"#CC7F42","offline":"#8B9098","loading":"#8B9098"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/stroke.json":
+/*!*******************************************!*\
+  !*** ../fuselage-tokens/dist/stroke.json ***!
+  \*******************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"stroke":{"light":{"extraLight":"#EBECEF","light":"#CBCED1","medium":"#9EA2A8","dark":"#6C737A","extraDark":"#2F343D","extraLightHighlight":"#D1EBFE","highlight":"#156FF5","extraLightError":"#FFC1C9","error":"#EC0D2A"},"high-contrast":{"extraLight":"#EBECEF","light":"#CBCED1","medium":"#9EA2A8","dark":"#6C737A","extraDark":"#2F343D","extraLightHighlight":"#D1EBFE","highlight":"#156FF5","extraLightError":"#FFC1C9","error":"#EC0D2A"},"dark":{"extraLight":"#333842","light":"#404754","medium":"#4B5362","dark":"#9EA2A8","extraDark":"#CBCED1","extraLightHighlight":"#D1EBFE","highlight":"#6292DA","extraLightError":"#F49AA6","error":"#BB3E4E"}}}');
+
+/***/ }),
+
+/***/ "../fuselage-tokens/dist/surface.json":
+/*!********************************************!*\
+  !*** ../fuselage-tokens/dist/surface.json ***!
+  \********************************************/
+/***/ (function(module) {
+
+module.exports = JSON.parse('{"surface":{"light":{"light":"#ffffff","tint":"#F7F8FA","room":"#ffffff","neutral":"#E4E7EA","disabled":"#F7F8FA","hover":"#F2F3F5","selected":"#D7DBE0","dark":"#1F2329","featured":"#5F1477","featuredHover":"#4A105D","sidebar":"#E4E7EA","overlay":"rgba(47, 52, 61, 0.5)"},"high-contrast":{"light":"#ffffff","tint":"#F7F8FA","room":"#ffffff","neutral":"#E4E7EA","disabled":"#F7F8FA","hover":"#F2F3F5","selected":"#D7DBE0","dark":"#1F2329","featured":"#5F1477","featuredHover":"#4A105D","sidebar":"#E4E7EA","overlay":"rgba(47, 52, 61, 0.5)"},"dark":{"light":"#262931","tint":"#1F2329","room":"#1F2329","neutral":"#2D3039","disabled":"#24272E","hover":"#1A1E23","selected":"#4C5362","dark":"#E4E7EA","featured":"#5F1477","featuredHover":"#4A105D","sidebar":"#2F343D","overlay":"rgba(0, 0, 0, 0.6)"}}}');
+
+/***/ }),
+
 /***/ "../fuselage-tokens/typography.json":
 /*!******************************************!*\
   !*** ../fuselage-tokens/typography.json ***!