@redhat-cloud-services/frontend-components 3.8.10 → 3.9.0

package/ErrorBoundary/ErrorBoundary.css

@@ -0,0 +1,13 @@
+:root {
+  --ins-color--orange: #ec7a08;
+}
+
+.ins-error-boundary-stack {
+  font-family: "monospace";
+  font-size: var(--pf-global--icon--FontSize--md);
+  text-align: left;
+  background-color: white;
+  border-style: solid;
+  border-color: var(--pf-global--BackgroundColor--dark-300);
+  padding: var(--pf-global--spacer--sm);
+}

package/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface ErrorPageProps {
+    headerTitle: string;
+    errorTitle?: string;
+    errorDescription?: string;
+}
+interface ErrorPageState {
+    hasError: boolean;
+    error?: Error;
+    historyState: History['state'];
+}
+declare class ErrorBoundaryPage extends React.Component<ErrorPageProps, ErrorPageState> {
+    constructor(props: Readonly<ErrorPageProps>);
+    static getDerivedStateFromError(error: Error): ErrorPageState;
+    render(): React.ReactNode;
+}
+export default ErrorBoundaryPage;

package/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,81 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var PageHeader_1 = __importStar(require("../PageHeader"));
+var ErrorState_1 = __importDefault(require("../ErrorState"));
+var react_core_1 = require("@patternfly/react-core");
+var ErrorStack_1 = __importDefault(require("./ErrorStack"));
+var Section_1 = __importDefault(require("../Section"));
+var ErrorBoundaryPage = (function (_super) {
+    __extends(ErrorBoundaryPage, _super);
+    function ErrorBoundaryPage(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false,
+            historyState: history.state,
+        };
+        return _this;
+    }
+    ErrorBoundaryPage.getDerivedStateFromError = function (error) {
+        return { hasError: true, error: error, historyState: history.state };
+    };
+    ErrorBoundaryPage.prototype.render = function () {
+        if (this.state.historyState !== history.state) {
+            this.setState({
+                hasError: false,
+                historyState: history.state,
+            });
+        }
+        if (this.state.hasError) {
+            return (React.createElement("div", null,
+                React.createElement(PageHeader_1.default, null,
+                    React.createElement(PageHeader_1.PageHeaderTitle, { title: this.props.headerTitle })),
+                React.createElement(Section_1.default, null,
+                    React.createElement(ErrorState_1.default, { errorTitle: this.props.errorTitle, errorDescription: React.createElement(React.Fragment, null,
+                            React.createElement("span", null, this.props.errorDescription),
+                            this.state.error && (React.createElement(react_core_1.ExpandableSection, { toggleText: "Show details" },
+                                React.createElement(ErrorStack_1.default, { error: this.state.error })))) }))));
+        }
+        return this.props.children;
+    };
+    return ErrorBoundaryPage;
+}(React.Component));
+exports.default = ErrorBoundaryPage;
+//# sourceMappingURL=ErrorBoundary.js.map

package/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../src/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,0DAA4D;AAC5D,6DAAuC;AACvC,qDAA2D;AAC3D,4DAAsC;AACtC,uDAAiC;AAejC;IAAgC,qCAA+C;IAC7E,2BAAY,KAA+B;QAA3C,YACE,kBAAM,KAAK,CAAC,SAKb;QAJC,KAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;YACf,YAAY,EAAE,OAAO,CAAC,KAAK;SAC5B,CAAC;;IACJ,CAAC;IAEM,0CAAwB,GAA/B,UAAgC,KAAY;QAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,OAAA,EAAE,YAAY,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;IAChE,CAAC;IAED,kCAAM,GAAN;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC;gBACZ,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE,OAAO,CAAC,KAAK;aAC5B,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,OAAO,CACL;gBACE,oBAAC,oBAAU;oBACT,oBAAC,4BAAe,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAI,CACvC;gBACb,oBAAC,iBAAO;oBACN,oBAAC,oBAAU,IACT,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,gBAAgB,EACd;4BACE,kCAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAQ;4BACzC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CACnB,oBAAC,8BAAiB,IAAC,UAAU,EAAC,cAAc;gCAC1C,oBAAC,oBAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CACrB,CACrB,CACA,GAEL,CACM,CACN,CACP,CAAC;SACH;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IACH,wBAAC;AAAD,CAAC,AAhDD,CAAgC,KAAK,CAAC,SAAS,GAgD9C;AAED,kBAAe,iBAAiB,CAAC"}

package/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,11 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
+
+.ins-error-boundary-stack {
+  font-family: 'monospace';
+  font-size: var(--pf-global--icon--FontSize--md);
+  text-align: left;
+  background-color: white;
+  border-style: solid;
+  border-color: var(--pf-global--BackgroundColor--dark-300);
+  padding: var(--pf-global--spacer--sm);
+}

package/ErrorBoundary/ErrorStack.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface ErrorStackProps {
+    error: Error;
+}
+declare const ErrorStack: React.FunctionComponent<ErrorStackProps>;
+export default ErrorStack;

package/ErrorBoundary/ErrorStack.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 });
+var React = __importStar(require("react"));
+var react_core_1 = require("@patternfly/react-core");
+var errorStackClass = 'ins-error-boundary-stack';
+var ErrorStack = function (_a) {
+    var error = _a.error;
+    if (error.stack) {
+        return (React.createElement(react_core_1.Text, { className: errorStackClass }, error.stack.split('\n').map(function (line) { return (React.createElement("div", { key: line }, line)); })));
+    }
+    if (error.name && error.message) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(react_core_1.Text, { component: "h6" }, error.name),
+            React.createElement(react_core_1.Text, { className: errorStackClass, component: "blockquote" }, error.message)));
+    }
+    return (React.createElement(react_core_1.Text, { className: errorStackClass, component: "blockquote" }, error.toString()));
+};
+exports.default = ErrorStack;
+//# sourceMappingURL=ErrorStack.js.map

package/ErrorBoundary/ErrorStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorStack.js","sourceRoot":"","sources":["../src/ErrorBoundary/ErrorStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,qDAA8C;AAM9C,IAAM,eAAe,GAAG,0BAA0B,CAAC;AAEnD,IAAM,UAAU,GAA6C,UAAC,EAAS;QAAP,KAAK,WAAA;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,OAAO,CACL,oBAAC,iBAAI,IAAC,SAAS,EAAE,eAAe,IAC7B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACrC,6BAAK,GAAG,EAAE,IAAI,IAAG,IAAI,CAAO,CAC7B,EAFsC,CAEtC,CAAC,CACG,CACR,CAAC;KACH;IAED,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;QAC/B,OAAO,CACL;YACE,oBAAC,iBAAI,IAAC,SAAS,EAAC,IAAI,IAAE,KAAK,CAAC,IAAI,CAAQ;YACxC,oBAAC,iBAAI,IAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAC,YAAY,IACrD,KAAK,CAAC,OAAO,CACT,CACN,CACJ,CAAC;KACH;IAED,OAAO,CACL,oBAAC,iBAAI,IAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAC,YAAY,IACrD,KAAK,CAAC,QAAQ,EAAE,CACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/ErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ErrorBoundary';
+export { default as ErrorBoundary } from './ErrorBoundary';

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

package/ErrorBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/ErrorBoundary/index.ts"],"names":[],"mappings":";;;;;;AAAA,iDAA0C;AAAjC,yHAAA,OAAO,OAAA;AAChB,iDAA2D;AAAlD,+HAAA,OAAO,OAAiB"}

package/ErrorBoundary/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/ErrorBoundary/index.js","typings":"index.d.ts"}

package/InsightsLabel/InsightsLabel.js

@@ -32,16 +32,15 @@ var react_icons_3 = require("@patternfly/react-icons");
 var react_icons_4 = require("@patternfly/react-icons");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
 var VALUE_TO_STATE = {
-    1: { icon: react_1.default.createElement(react_icons_1.AngleDoubleDownIcon, null), text: 'Low' },
-    2: { icon: react_1.default.createElement(react_icons_4.EqualsIcon, null), text: 'Moderate' },
-    3: { icon: react_1.default.createElement(react_icons_2.AngleDoubleUpIcon, null), text: 'Important' },
-    4: { icon: react_1.default.createElement(react_icons_3.CriticalRiskIcon, null), text: 'Critical' },
+    1: { icon: react_1.default.createElement(react_icons_1.AngleDoubleDownIcon, null), text: 'Low', color: 'blue' },
+    2: { icon: react_1.default.createElement(react_icons_4.EqualsIcon, null), text: 'Moderate', color: undefined },
+    3: { icon: react_1.default.createElement(react_icons_2.AngleDoubleUpIcon, null), text: 'Important', color: 'orange' },
+    4: { icon: react_1.default.createElement(react_icons_3.CriticalRiskIcon, null), text: 'Critical', color: 'red' },
 };
 var InsightsLabel = function (_a) {
     var _b = _a.value, value = _b === void 0 ? 1 : _b, text = _a.text, hideIcon = _a.hideIcon, className = _a.className, rest = _a.rest, props = __rest(_a, ["value", "text", "hideIcon", "className", "rest"]);
-    return (react_1.default.createElement(react_core_1.Label, __assign({}, rest, props, { className: (0, classnames_1.default)(className, "ins-c-label-".concat(value)), icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
+    return (react_1.default.createElement(react_core_1.Label, __assign({}, rest, props, { className: value === 2 ? 'ins-c-label-2' : '', color: VALUE_TO_STATE[value].color, icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
 };
 exports.default = InsightsLabel;
 //# sourceMappingURL=InsightsLabel.js.map

package/InsightsLabel/InsightsLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yBAAuB;AAEvB,uDAA8D;AAC9D,uDAA4D;AAC5D,uDAA2D;AAC3D,uDAAqD;AACrD,qDAA2D;AAC3D,gDAA0B;AAC1B,0DAAoC;AAQpC,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,iCAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,wBAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;IAC7C,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,+BAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE;IACrD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,8BAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;CACpD,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,8BAAC,kBAAK,eAAK,IAAI,EAAM,KAAK,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,sBAAe,KAAK,CAAE,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAChI,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}
+{"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yBAAuB;AAEvB,uDAA8D;AAC9D,uDAA4D;AAC5D,uDAA2D;AAC3D,uDAAqD;AACrD,qDAA2D;AAC3D,gDAA0B;AAS1B,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,iCAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;IAChE,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,wBAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;IAC/D,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,+BAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtE,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,8BAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;CAClE,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,8BAAC,kBAAK,eACA,IAAI,EACJ,KAAK,IACT,SAAS,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7C,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,KAAK,EAClC,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAE5C,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/InsightsLabel/labels.css

@@ -1,36 +1,8 @@
 .pf-c-label {
-  --ins-c-label--red-bg: #faeae8;
-  --inc-c-label--content-red: var(--pf-global--palette--red-300);
-  --inc-c-label--icon-red: var(--pf-global--palette--red-200);
-  --ins-c-label--orange-bg: #FFF5EC;
-  --inc-c-label--content-orange: #773D00;
-  --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
   --ins-c-label--gold-bg: #fdf7e7;
   --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
   --inc-c-label--icon-gold: #F4C145;
-  --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
-  --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
-  --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
-}
-
-.ins-c-label-4.pf-c-label {
-  background-color: var(--ins-c-label--red-bg);
-}
-.ins-c-label-4.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-red);
-}
-.ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-red);
-}
-
-.ins-c-label-3.pf-c-label {
-  background-color: var(--ins-c-label--orange-bg);
-}
-.ins-c-label-3.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-orange);
-}
-.ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-orange);
+  --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
 }
 
 .ins-c-label-2.pf-c-label {
@@ -43,12 +15,6 @@
   color: var(--inc-c-label--icon-gold);
 }
 
-.ins-c-label-1.pf-c-label {
-  background-color: var(--ins-c-label--blue-bg);
-}
-.ins-c-label-1.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-blue);
-}
-.ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-blue);
+.ins-c-label-2.pf-c-label .pf-c-label__content::before {
+  border: 1px solid var(--inc-c-label--border-gold);
 }

package/InsightsLabel/labels.scss

@@ -1,36 +1,8 @@
 .pf-c-label {
-    --ins-c-label--red-bg:              #faeae8;
-    --inc-c-label--content-red:         var(--pf-global--palette--red-300);
-    --inc-c-label--icon-red:            var(--pf-global--palette--red-200);
-    --ins-c-label--orange-bg:           #FFF5EC;
-    --inc-c-label--content-orange:      #773D00;
-    --inc-c-label--icon-orange:         var(--pf-global--palette--orange-300);
     --ins-c-label--gold-bg:             #fdf7e7;
     --inc-c-label--content-gold:        var(--pf-global--palette--gold-700);
     --inc-c-label--icon-gold:           #F4C145;
-    --ins-c-label--blue-bg:             var(--pf-global--palette--blue-50);
-    --inc-c-label--content-blue:        var(--pf-global--palette--blue-600);
-    --inc-c-label--icon-blue:           var(--pf-global--palette--blue-300);
-}
-
-.ins-c-label-4.pf-c-label {
-    background-color: var(--ins-c-label--red-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-red);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-red);
-        }
-    }
-}
-
-.ins-c-label-3.pf-c-label {
-    background-color: var(--ins-c-label--orange-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-orange);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-orange);
-        }
-    }
+    --inc-c-label--border-gold:         var(--pf-global--palette--gold-100)
 }
 
 .ins-c-label-2.pf-c-label {
@@ -42,13 +14,6 @@
         }
     }
 }
-
-.ins-c-label-1.pf-c-label {
-    background-color: var(--ins-c-label--blue-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-blue);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-blue);
-        }
-    }
-}
+.ins-c-label-2.pf-c-label {.pf-c-label__content::before {
+    border: 1px solid var(--inc-c-label--border-gold);
+        }}

package/README.md

@@ -139,7 +139,6 @@ transform: (importName) =>`@redhat-cloud-services/frontend-components/esm/${FECM
   * [table](doc/table.md)
   * [truncate](doc/truncate.md)
   * [tableToolbar](doc/tableToolbar.md)
-  * [wizard](doc/wizard.md)
   * [pagination](doc/pagination.md)
   * [treeview-table](doc/treeview-table.md)
   * [section](doc/section.md)

package/esm/ErrorBoundary/ErrorBoundary.css

@@ -0,0 +1,13 @@
+:root {
+  --ins-color--orange: #ec7a08;
+}
+
+.ins-error-boundary-stack {
+  font-family: "monospace";
+  font-size: var(--pf-global--icon--FontSize--md);
+  text-align: left;
+  background-color: white;
+  border-style: solid;
+  border-color: var(--pf-global--BackgroundColor--dark-300);
+  padding: var(--pf-global--spacer--sm);
+}

package/esm/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,57 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import * as React from 'react';
+import PageHeader, { PageHeaderTitle } from '../PageHeader';
+import ErrorState from '../ErrorState';
+import { ExpandableSection } from '@patternfly/react-core';
+import ErrorStack from './ErrorStack';
+import Section from '../Section';
+var ErrorBoundaryPage = (function (_super) {
+    __extends(ErrorBoundaryPage, _super);
+    function ErrorBoundaryPage(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false,
+            historyState: history.state,
+        };
+        return _this;
+    }
+    ErrorBoundaryPage.getDerivedStateFromError = function (error) {
+        return { hasError: true, error: error, historyState: history.state };
+    };
+    ErrorBoundaryPage.prototype.render = function () {
+        if (this.state.historyState !== history.state) {
+            this.setState({
+                hasError: false,
+                historyState: history.state,
+            });
+        }
+        if (this.state.hasError) {
+            return (React.createElement("div", null,
+                React.createElement(PageHeader, null,
+                    React.createElement(PageHeaderTitle, { title: this.props.headerTitle })),
+                React.createElement(Section, null,
+                    React.createElement(ErrorState, { errorTitle: this.props.errorTitle, errorDescription: React.createElement(React.Fragment, null,
+                            React.createElement("span", null, this.props.errorDescription),
+                            this.state.error && (React.createElement(ExpandableSection, { toggleText: "Show details" },
+                                React.createElement(ErrorStack, { error: this.state.error })))) }))));
+        }
+        return this.props.children;
+    };
+    return ErrorBoundaryPage;
+}(React.Component));
+export default ErrorBoundaryPage;
+//# sourceMappingURL=ErrorBoundary.js.map

package/esm/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,EAAE,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,OAAO,MAAM,YAAY,CAAC;AAejC;IAAgC,qCAA+C;IAC7E,2BAAY,KAA+B;QAA3C,YACE,kBAAM,KAAK,CAAC,SAKb;QAJC,KAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;YACf,YAAY,EAAE,OAAO,CAAC,KAAK;SAC5B,CAAC;;IACJ,CAAC;IAEM,0CAAwB,GAA/B,UAAgC,KAAY;QAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,OAAA,EAAE,YAAY,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;IAChE,CAAC;IAED,kCAAM,GAAN;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC;gBACZ,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE,OAAO,CAAC,KAAK;aAC5B,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,OAAO,CACL;gBACE,oBAAC,UAAU;oBACT,oBAAC,eAAe,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAI,CACvC;gBACb,oBAAC,OAAO;oBACN,oBAAC,UAAU,IACT,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,gBAAgB,EACd;4BACE,kCAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAQ;4BACzC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CACnB,oBAAC,iBAAiB,IAAC,UAAU,EAAC,cAAc;gCAC1C,oBAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CACrB,CACrB,CACA,GAEL,CACM,CACN,CACP,CAAC;SACH;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IACH,wBAAC;AAAD,CAAC,AAhDD,CAAgC,KAAK,CAAC,SAAS,GAgD9C;AAED,eAAe,iBAAiB,CAAC"}

package/esm/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,11 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
+
+.ins-error-boundary-stack {
+  font-family: 'monospace';
+  font-size: var(--pf-global--icon--FontSize--md);
+  text-align: left;
+  background-color: white;
+  border-style: solid;
+  border-color: var(--pf-global--BackgroundColor--dark-300);
+  padding: var(--pf-global--spacer--sm);
+}

package/esm/ErrorBoundary/ErrorStack.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Text } from '@patternfly/react-core';
+var errorStackClass = 'ins-error-boundary-stack';
+var ErrorStack = function (_a) {
+    var error = _a.error;
+    if (error.stack) {
+        return (React.createElement(Text, { className: errorStackClass }, error.stack.split('\n').map(function (line) { return (React.createElement("div", { key: line }, line)); })));
+    }
+    if (error.name && error.message) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Text, { component: "h6" }, error.name),
+            React.createElement(Text, { className: errorStackClass, component: "blockquote" }, error.message)));
+    }
+    return (React.createElement(Text, { className: errorStackClass, component: "blockquote" }, error.toString()));
+};
+export default ErrorStack;
+//# sourceMappingURL=ErrorStack.js.map

package/esm/ErrorBoundary/ErrorStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorStack.js","sourceRoot":"","sources":["../../src/ErrorBoundary/ErrorStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAM9C,IAAM,eAAe,GAAG,0BAA0B,CAAC;AAEnD,IAAM,UAAU,GAA6C,UAAC,EAAS;QAAP,KAAK,WAAA;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,eAAe,IAC7B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACrC,6BAAK,GAAG,EAAE,IAAI,IAAG,IAAI,CAAO,CAC7B,EAFsC,CAEtC,CAAC,CACG,CACR,CAAC;KACH;IAED,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;QAC/B,OAAO,CACL;YACE,oBAAC,IAAI,IAAC,SAAS,EAAC,IAAI,IAAE,KAAK,CAAC,IAAI,CAAQ;YACxC,oBAAC,IAAI,IAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAC,YAAY,IACrD,KAAK,CAAC,OAAO,CACT,CACN,CACJ,CAAC;KACH;IAED,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAC,YAAY,IACrD,KAAK,CAAC,QAAQ,EAAE,CACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/ErrorBoundary/index.js

@@ -0,0 +1,3 @@
+export { default } from './ErrorBoundary';
+export { default as ErrorBoundary } from './ErrorBoundary';
+//# sourceMappingURL=index.js.map

package/esm/ErrorBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ErrorBoundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/InsightsLabel/InsightsLabel.js

@@ -27,16 +27,15 @@ import { CriticalRiskIcon } from '@patternfly/react-icons';
 import { EqualsIcon } from '@patternfly/react-icons';
 import { Label } from '@patternfly/react-core';
 import React from 'react';
-import classNames from 'classnames';
 var VALUE_TO_STATE = {
-    1: { icon: React.createElement(AngleDoubleDownIcon, null), text: 'Low' },
-    2: { icon: React.createElement(EqualsIcon, null), text: 'Moderate' },
-    3: { icon: React.createElement(AngleDoubleUpIcon, null), text: 'Important' },
-    4: { icon: React.createElement(CriticalRiskIcon, null), text: 'Critical' },
+    1: { icon: React.createElement(AngleDoubleDownIcon, null), text: 'Low', color: 'blue' },
+    2: { icon: React.createElement(EqualsIcon, null), text: 'Moderate', color: undefined },
+    3: { icon: React.createElement(AngleDoubleUpIcon, null), text: 'Important', color: 'orange' },
+    4: { icon: React.createElement(CriticalRiskIcon, null), text: 'Critical', color: 'red' },
 };
 var InsightsLabel = function (_a) {
     var _b = _a.value, value = _b === void 0 ? 1 : _b, text = _a.text, hideIcon = _a.hideIcon, className = _a.className, rest = _a.rest, props = __rest(_a, ["value", "text", "hideIcon", "className", "rest"]);
-    return (React.createElement(Label, __assign({}, rest, props, { className: classNames(className, "ins-c-label-".concat(value)), icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
+    return (React.createElement(Label, __assign({}, rest, props, { className: value === 2 ? 'ins-c-label-2' : '', color: VALUE_TO_STATE[value].color, icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
 };
 export default InsightsLabel;
 //# sourceMappingURL=InsightsLabel.js.map

package/esm/InsightsLabel/InsightsLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAc,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,UAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;IAC7C,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,iBAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE;IACrD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,gBAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;CACpD,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,oBAAC,KAAK,eAAK,IAAI,EAAM,KAAK,IAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,sBAAe,KAAK,CAAE,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAChI,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAc,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;IAChE,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,UAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;IAC/D,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,iBAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtE,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,gBAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;CAClE,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,oBAAC,KAAK,eACA,IAAI,EACJ,KAAK,IACT,SAAS,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7C,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,KAAK,EAClC,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAE5C,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/InsightsLabel/labels.css

@@ -1,36 +1,8 @@
 .pf-c-label {
-  --ins-c-label--red-bg: #faeae8;
-  --inc-c-label--content-red: var(--pf-global--palette--red-300);
-  --inc-c-label--icon-red: var(--pf-global--palette--red-200);
-  --ins-c-label--orange-bg: #FFF5EC;
-  --inc-c-label--content-orange: #773D00;
-  --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
   --ins-c-label--gold-bg: #fdf7e7;
   --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
   --inc-c-label--icon-gold: #F4C145;
-  --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
-  --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
-  --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
-}
-
-.ins-c-label-4.pf-c-label {
-  background-color: var(--ins-c-label--red-bg);
-}
-.ins-c-label-4.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-red);
-}
-.ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-red);
-}
-
-.ins-c-label-3.pf-c-label {
-  background-color: var(--ins-c-label--orange-bg);
-}
-.ins-c-label-3.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-orange);
-}
-.ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-orange);
+  --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
 }
 
 .ins-c-label-2.pf-c-label {
@@ -43,12 +15,6 @@
   color: var(--inc-c-label--icon-gold);
 }
 
-.ins-c-label-1.pf-c-label {
-  background-color: var(--ins-c-label--blue-bg);
-}
-.ins-c-label-1.pf-c-label .pf-c-label__content {
-  color: var(--inc-c-label--content-blue);
-}
-.ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
-  color: var(--inc-c-label--icon-blue);
+.ins-c-label-2.pf-c-label .pf-c-label__content::before {
+  border: 1px solid var(--inc-c-label--border-gold);
 }

package/esm/InsightsLabel/labels.scss

@@ -1,36 +1,8 @@
 .pf-c-label {
-    --ins-c-label--red-bg:              #faeae8;
-    --inc-c-label--content-red:         var(--pf-global--palette--red-300);
-    --inc-c-label--icon-red:            var(--pf-global--palette--red-200);
-    --ins-c-label--orange-bg:           #FFF5EC;
-    --inc-c-label--content-orange:      #773D00;
-    --inc-c-label--icon-orange:         var(--pf-global--palette--orange-300);
     --ins-c-label--gold-bg:             #fdf7e7;
     --inc-c-label--content-gold:        var(--pf-global--palette--gold-700);
     --inc-c-label--icon-gold:           #F4C145;
-    --ins-c-label--blue-bg:             var(--pf-global--palette--blue-50);
-    --inc-c-label--content-blue:        var(--pf-global--palette--blue-600);
-    --inc-c-label--icon-blue:           var(--pf-global--palette--blue-300);
-}
-
-.ins-c-label-4.pf-c-label {
-    background-color: var(--ins-c-label--red-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-red);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-red);
-        }
-    }
-}
-
-.ins-c-label-3.pf-c-label {
-    background-color: var(--ins-c-label--orange-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-orange);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-orange);
-        }
-    }
+    --inc-c-label--border-gold:         var(--pf-global--palette--gold-100)
 }
 
 .ins-c-label-2.pf-c-label {
@@ -42,13 +14,6 @@
         }
     }
 }
-
-.ins-c-label-1.pf-c-label {
-    background-color: var(--ins-c-label--blue-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-blue);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-blue);
-        }
-    }
-}
+.ins-c-label-2.pf-c-label {.pf-c-label__content::before {
+    border: 1px solid var(--inc-c-label--border-gold);
+        }}