@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/stories/Typography.stories.js

@@ -1,130 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, HyperLink, Note, Quote, UpperCase } from '../src/index';
-import { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS } from '../src/index';
-export default {
-    title: 'Components/Typography',
-    decorators: [],
-    parameter: {},
-};
-export var HeadersDemo = function () { return (React.createElement(React.Fragment, null,
-    React.createElement("h1", null, "H1"),
-    React.createElement(Note, null, "Previously known as Headline XL"),
-    React.createElement("h2", null, "H2"),
-    React.createElement(Note, null, "Previously known as Headline L"),
-    React.createElement("h3", null, "H3"),
-    React.createElement(Note, null, "Previously known as Headline M"),
-    React.createElement("h4", null, "H4"),
-    React.createElement(Note, null, "Previously known as Headline S"),
-    React.createElement("h5", null, "H5"),
-    React.createElement(Note, null, "Previously known as Headline XS"),
-    React.createElement("h6", null, "H6"),
-    React.createElement(Note, null, "Previously known as Headline XXS"))); };
-export var ParagraphsDemo = function () { return (React.createElement(React.Fragment, null,
-    React.createElement("div", null,
-        React.createElement("div", null,
-            React.createElement("p", null, "Paragraph text"),
-            React.createElement(Quote, null, "Quote text"),
-            React.createElement(Note, null, "Note text"),
-            React.createElement(UpperCase, null, "Upper case text"))))); };
-export var ComponentsDemo = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(ComponentXL, { color: COLORS.neutral_300 }, "Component typography"),
-    React.createElement("div", { style: { display: 'flex', flexDirection: 'row', marginTop: '32px' } },
-        React.createElement("div", null,
-            React.createElement(ComponentXL, null, "Regular XL"),
-            React.createElement(ComponentL, null, "Regular L"),
-            React.createElement(ComponentM, null, "Regular M"),
-            React.createElement(ComponentS, null, "Regular S"),
-            React.createElement(ComponentXS, null, "Regular XS"),
-            React.createElement(ComponentXXS, null, "Regular XXS")),
-        React.createElement("div", { style: { marginLeft: '32px' } },
-            React.createElement(ComponentXL, { textStyle: ComponentTextStyle.Bold }, "Bold XL"),
-            React.createElement(ComponentL, { textStyle: ComponentTextStyle.Bold }, "Bold L"),
-            React.createElement(ComponentM, { textStyle: ComponentTextStyle.Bold }, "Bold M"),
-            React.createElement(ComponentS, { textStyle: ComponentTextStyle.Bold }, "Bold S"),
-            React.createElement(ComponentXS, { textStyle: ComponentTextStyle.Bold }, "Bold XS"),
-            React.createElement(ComponentXXS, { textStyle: ComponentTextStyle.Bold }, "Bold XXS")),
-        React.createElement("div", { style: { marginLeft: '32px' } },
-            React.createElement(ComponentXL, { textStyle: ComponentTextStyle.Italic }, "Italic XL"),
-            React.createElement(ComponentL, { textStyle: ComponentTextStyle.Italic }, "Italic L"),
-            React.createElement(ComponentM, { textStyle: ComponentTextStyle.Italic }, "Italic M"),
-            React.createElement(ComponentS, { textStyle: ComponentTextStyle.Italic }, "Italic S"),
-            React.createElement(ComponentXS, { textStyle: ComponentTextStyle.Italic }, "Italic XS"),
-            React.createElement(ComponentXXS, { textStyle: ComponentTextStyle.Italic }, "Italic XXS"))
-    /*<div style={{marginLeft: '32px'}}>
-        *<ComponentXL>N/A</ComponentXL>
-        *<ComponentL>N/A</ComponentL>
-        *<ComponentM>N/A</ComponentM>
-        *<ComponentS>N/A</ComponentS>
-        *<ComponentXS textStyle={ComponentTextStyle.UppercaseBold}>Uppercase XS</ComponentXS>
-        *<ComponentXXS textStyle={ComponentTextStyle.UppercaseBold}>Uppercase XXS</ComponentXXS>
-    </div>*/
-    ,
-        "/*",
-        React.createElement("div", { style: { marginLeft: '32px' } },
-            "*",
-            React.createElement(ComponentXL, null, "N/A"),
-            "*",
-            React.createElement(ComponentL, null, "N/A"),
-            "*",
-            React.createElement(ComponentM, null, "N/A"),
-            "*",
-            React.createElement(ComponentS, null, "N/A"),
-            "*",
-            React.createElement(ComponentXS, { textStyle: ComponentTextStyle.UppercaseBold }, "Uppercase XS"),
-            "*",
-            React.createElement(ComponentXXS, { textStyle: ComponentTextStyle.UppercaseBold }, "Uppercase XXS")),
-        "*/"))); };
-var ButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var DarkButtonContainer = styled(ButtonContainer)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), COLORS.black);
-var ButtonWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    font-size: 16px;\n    margin: 0;\n  }\n"], ["\n  flex: 1 0 calc(16.6% - 16px);\n  padding: 8px;\n\n  h5 {\n    font-size: 16px;\n    margin: 0;\n  }\n"])));
-export var HyperlinkDemo = function () { return (React.createElement(React.Fragment, null,
-    React.createElement("div", null,
-        React.createElement("h1", null, "HyperLink"),
-        React.createElement("div", null,
-            React.createElement("h3", null, "Default HyperLink "),
-            React.createElement("p", null),
-            React.createElement(ButtonContainer, null,
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Normal State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Hover State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Active State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Focus State"))),
-            React.createElement(ButtonContainer, null,
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkDefault", variant: "default", href: "page1" }, "Link to page1")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkDefaultHover", variant: "default", href: "page2", className: "hover-state" }, "Link to page2")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkDefaultActive", variant: "default", href: "page3", className: "active-state" }, "Link to page3")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkDefaultFocus", variant: "default", href: "page3", className: "focus-state" }, "Link to page3")))),
-        React.createElement("div", null,
-            React.createElement("h3", null, "Inverted HyperLink "),
-            React.createElement("p", null),
-            React.createElement(ButtonContainer, null,
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Normal State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Hover State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Active State")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement("h5", null, "Focus State"))),
-            React.createElement(DarkButtonContainer, null,
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkInverted", variant: "inverted", href: "page1" }, "Link to page1")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkInvertedHover", variant: "inverted", href: "page2", className: "hover-state" }, "Link to page2")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkInvertedActive", variant: "inverted", href: "page3", className: "active-state" }, "Link to page3")),
-                React.createElement(ButtonWrapper, null,
-                    React.createElement(HyperLink, { id: "HyperLinkInvertedFocus", variant: "inverted", href: "page4", className: "focus-state" }, "Link to page4"))))))); };
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/stories/color.stories.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    decorators: never[];
-    parameter: {};
-};
-export default _default;
-export declare const ColorDemo: () => React.JSX.Element;

package/dist/stories/color.stories.js

@@ -1,272 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import { Note } from '../src/styles/typography';
-import COLORS from '../src/styles/colors';
-import styled from 'styled-components';
-export default {
-    title: 'Components/Colors',
-    decorators: [],
-    parameter: {},
-};
-var ColorWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  text-align: center;\n  width: 160px;\n  padding: 16px;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  margin: 0px 8px 8px 0px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n"], ["\n  display: inline-block;\n  text-align: center;\n  width: 160px;\n  padding: 16px;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  margin: 0px 8px 8px 0px;\n  &:hover {\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n  }\n"])), COLORS.neutral_20);
-var ColorContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 64px;\n  height: 64px;\n  margin: auto;\n  background: ", ";\n  border-radius: 64px;\n"], ["\n  width: 64px;\n  height: 64px;\n  margin: auto;\n  background: ", ";\n  border-radius: 64px;\n"])), function (props) { return props.bgColor; });
-export var ColorDemo = function () {
-    return (React.createElement("div", { style: { background: '#DEDADA' } },
-        React.createElement("div", { style: { padding: '16px' } },
-            React.createElement("h5", null, "Laerdal brand colors"),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px' } },
-                React.createElement("div", null,
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.primary }, " "),
-                        React.createElement(Note, null, "Primary")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.accent1 }, " "),
-                        React.createElement(Note, null, "Accent1")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.accent2 }, " "),
-                        React.createElement(Note, null, "Accent2"))),
-                React.createElement("div", { style: { padding: '0px 16px' } },
-                    React.createElement("h6", null, "Low level brand colors"),
-                    React.createElement(Note, null, "These are the main three brand colors of Life that are used for UI and decorative elements."))),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px' } },
-                React.createElement("div", null,
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.correct }, " "),
-                        React.createElement(Note, null, "Correct")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.warning }, " "),
-                        React.createElement(Note, null, "Warning")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.critical }, " "),
-                        React.createElement(Note, null, "Critical"))),
-                React.createElement("div", { style: { padding: '0px 16px' } },
-                    React.createElement("h6", null, "Semantic colors"),
-                    React.createElement(Note, null, "These colors convey specific meaning for usability purposes, such as giving direct feedback to the learner for success, warning, or critical situations."))),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', padding: '0px 0px 32px' } },
-                React.createElement("div", null,
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.black }, " "),
-                        React.createElement(Note, null, "Laerdal Black")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.white }, " "),
-                        React.createElement(Note, null, "Laerdal White")),
-                    React.createElement(ColorWrapper, null,
-                        React.createElement(ColorContainer, { bgColor: COLORS.grey }, " "),
-                        React.createElement(Note, null, "Laerdal Grey"))),
-                React.createElement("div", { style: { padding: '0px 16px' } },
-                    React.createElement("h6", null, "Neutrals"),
-                    React.createElement(Note, null, "The neutrals are used for layout. They consist of grayscale to make them stay in the background, letting the UI and the semantic colors get the attention.")))),
-        React.createElement("hr", null),
-        React.createElement("div", { style: { padding: '16px' } },
-            React.createElement("h5", null, "Full color palette"),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Neutrals"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_20 }, " "),
-                    React.createElement(Note, null, "neutral_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_50 }, " "),
-                    React.createElement(Note, null, "neutral_50")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_100 }, " "),
-                    React.createElement(Note, null, "neutral_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_200 }, " "),
-                    React.createElement(Note, null, "neutral_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_300 }, " "),
-                    React.createElement(Note, null, "neutral_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_400 }, " "),
-                    React.createElement(Note, null, "neutral_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_500 }, " "),
-                    React.createElement(Note, null, "neutral_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_600 }, " "),
-                    React.createElement(Note, null, "neutral_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_700 }, " "),
-                    React.createElement(Note, null, "neutral_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.neutral_800 }, " "),
-                    React.createElement(Note, null, "neutral_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Primary"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_20 }, " "),
-                    React.createElement(Note, null, "primary_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_100 }, " "),
-                    React.createElement(Note, null, "primary_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_200 }, " "),
-                    React.createElement(Note, null, "primary_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_300 }, " "),
-                    React.createElement(Note, null, "primary_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_400 }, " "),
-                    React.createElement(Note, null, "primary_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_500 }, " "),
-                    React.createElement(Note, null, "primary_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_600 }, " "),
-                    React.createElement(Note, null, "primary_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_700 }, " "),
-                    React.createElement(Note, null, "primary_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.primary_800 }, " "),
-                    React.createElement(Note, null, "primary_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Accent 1"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_20 }, " "),
-                    React.createElement(Note, null, "accent1_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_100 }, " "),
-                    React.createElement(Note, null, "accent1_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_200 }, " "),
-                    React.createElement(Note, null, "accent1_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_300 }, " "),
-                    React.createElement(Note, null, "accent1_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_400 }, " "),
-                    React.createElement(Note, null, "accent1_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_500 }, " "),
-                    React.createElement(Note, null, "accent1_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_600 }, " "),
-                    React.createElement(Note, null, "accent1_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_700 }, " "),
-                    React.createElement(Note, null, "accent1_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent1_800 }, " "),
-                    React.createElement(Note, null, "accent1_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Accent 2"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_20 }, " "),
-                    React.createElement(Note, null, "accent2_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_100 }, " "),
-                    React.createElement(Note, null, "accent2_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_200 }, " "),
-                    React.createElement(Note, null, "accent2_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_300 }, " "),
-                    React.createElement(Note, null, "accent2_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_400 }, " "),
-                    React.createElement(Note, null, "accent2_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_500 }, " "),
-                    React.createElement(Note, null, "accent2_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_600 }, " "),
-                    React.createElement(Note, null, "accent2_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_700 }, " "),
-                    React.createElement(Note, null, "accent2_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.accent2_800 }, " "),
-                    React.createElement(Note, null, "accent2_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Correct"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_20 }, " "),
-                    React.createElement(Note, null, "correct_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_100 }, " "),
-                    React.createElement(Note, null, "correct_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_200 }, " "),
-                    React.createElement(Note, null, "correct_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_300 }, " "),
-                    React.createElement(Note, null, "correct_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_400 }, " "),
-                    React.createElement(Note, null, "correct_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_500 }, " "),
-                    React.createElement(Note, null, "correct_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_600 }, " "),
-                    React.createElement(Note, null, "correct_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_700 }, " "),
-                    React.createElement(Note, null, "correct_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.correct_800 }, " "),
-                    React.createElement(Note, null, "correct_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Warning"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_20 }, " "),
-                    React.createElement(Note, null, "warning_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_100 }, " "),
-                    React.createElement(Note, null, "warning_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_200 }, " "),
-                    React.createElement(Note, null, "warning_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_300 }, " "),
-                    React.createElement(Note, null, "warning_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_400 }, " "),
-                    React.createElement(Note, null, "warning_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_500 }, " "),
-                    React.createElement(Note, null, "warning_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_600 }, " "),
-                    React.createElement(Note, null, "warning_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_700 }, " "),
-                    React.createElement(Note, null, "warning_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.warning_800 }, " "),
-                    React.createElement(Note, null, "warning_800"))),
-            React.createElement("div", null,
-                React.createElement("h6", null, "Critical"),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_20 }, " "),
-                    React.createElement(Note, null, "critical_20")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_100 }, " "),
-                    React.createElement(Note, null, "critical_100")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_200 }, " "),
-                    React.createElement(Note, null, "critical_200")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_300 }, " "),
-                    React.createElement(Note, null, "critical_300")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_400 }, " "),
-                    React.createElement(Note, null, "critical_400")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_500 }, " "),
-                    React.createElement(Note, null, "critical_500")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_600 }, " "),
-                    React.createElement(Note, null, "critical_600")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_700 }, " "),
-                    React.createElement(Note, null, "critical_700")),
-                React.createElement(ColorWrapper, null,
-                    React.createElement(ColorContainer, { bgColor: COLORS.critical_800 }, " "),
-                    React.createElement(Note, null, "critical_800"))))));
-};
-var templateObject_1, templateObject_2;

package/dist/styles/WriteThemedColors.cjs

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-var _styledComponents = require("styled-components");
-var _colors = _interopRequireDefault(require("./colors"));
-var WriteThemedColors = function WriteThemedColors() {
-  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
-  for (var a in themeContext.colors) {
-    if (_colors["default"].hasOwnProperty(a)) _colors["default"][a] = themeContext.colors[a];
-  }
-  return null;
-};
-var _default = WriteThemedColors;
-exports["default"] = _default;
-//# sourceMappingURL=WriteThemedColors.cjs.map

package/dist/styles/WriteThemedColors.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"WriteThemedColors.cjs","names":["_react","require","_styledComponents","_colors","_interopRequireDefault","WriteThemedColors","themeContext","useContext","ThemeContext","a","colors","COLORS","hasOwnProperty","_default","exports"],"sources":["../../src/styles/WriteThemedColors.tsx"],"sourcesContent":["import { useContext } from \"react\";\r\nimport { ThemeContext } from \"styled-components\";\r\nimport COLORS from \"./colors\";\r\n\r\n\r\nconst WriteThemedColors: React.FunctionComponent = () => {\r\n    const themeContext = useContext(ThemeContext);\r\n    for(var a in themeContext.colors){\r\n      if(COLORS.hasOwnProperty(a))\r\n        COLORS[a as keyof typeof COLORS] = themeContext.colors[a];\r\n    }  \r\n    return null;\r\n}\r\n\r\nexport default WriteThemedColors;\r\n  "],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAGA,IAAMI,iBAA0C,GAAG,SAA7CA,iBAA0CA,CAAA,EAAS;EACrD,IAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EAC7C,KAAI,IAAIC,CAAC,IAAIH,YAAY,CAACI,MAAM,EAAC;IAC/B,IAAGC,kBAAM,CAACC,cAAc,CAACH,CAAC,CAAC,EACzBE,kBAAM,CAACF,CAAC,CAAwB,GAAGH,YAAY,CAACI,MAAM,CAACD,CAAC,CAAC;EAC7D;EACA,OAAO,IAAI;AACf,CAAC;AAAA,IAAAI,QAAA,GAEcR,iBAAiB;AAAAS,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/styles/WriteThemedColors.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const WriteThemedColors: React.FunctionComponent;
-export default WriteThemedColors;

package/dist/styles/WriteThemedColors.js

@@ -1,12 +0,0 @@
-import { useContext } from "react";
-import { ThemeContext } from "styled-components";
-import COLORS from "./colors";
-var WriteThemedColors = function WriteThemedColors() {
-  var themeContext = useContext(ThemeContext);
-  for (var a in themeContext.colors) {
-    if (COLORS.hasOwnProperty(a)) COLORS[a] = themeContext.colors[a];
-  }
-  return null;
-};
-export default WriteThemedColors;
-//# sourceMappingURL=WriteThemedColors.js.map

package/dist/styles/WriteThemedColors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WriteThemedColors.js","names":["useContext","ThemeContext","COLORS","WriteThemedColors","themeContext","a","colors","hasOwnProperty"],"sources":["../../src/styles/WriteThemedColors.tsx"],"sourcesContent":["import { useContext } from \"react\";\r\nimport { ThemeContext } from \"styled-components\";\r\nimport COLORS from \"./colors\";\r\n\r\n\r\nconst WriteThemedColors: React.FunctionComponent = () => {\r\n    const themeContext = useContext(ThemeContext);\r\n    for(var a in themeContext.colors){\r\n      if(COLORS.hasOwnProperty(a))\r\n        COLORS[a as keyof typeof COLORS] = themeContext.colors[a];\r\n    }  \r\n    return null;\r\n}\r\n\r\nexport default WriteThemedColors;\r\n  "],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,YAAY,QAAQ,mBAAmB;AAChD,OAAOC,MAAM,MAAM,UAAU;AAG7B,IAAMC,iBAA0C,GAAG,SAA7CA,iBAA0CA,CAAA,EAAS;EACrD,IAAMC,YAAY,GAAGJ,UAAU,CAACC,YAAY,CAAC;EAC7C,KAAI,IAAII,CAAC,IAAID,YAAY,CAACE,MAAM,EAAC;IAC/B,IAAGJ,MAAM,CAACK,cAAc,CAACF,CAAC,CAAC,EACzBH,MAAM,CAACG,CAAC,CAAwB,GAAGD,YAAY,CAACE,MAAM,CAACD,CAAC,CAAC;EAC7D;EACA,OAAO,IAAI;AACf,CAAC;AAED,eAAeF,iBAAiB","ignoreList":[]}

package/dist/styles/overwritecolors.cjs

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-var _styledComponents = require("styled-components");
-var _colors = _interopRequireDefault(require("./colors"));
-var OverwriteColors = function OverwriteColors() {
-  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
-  for (var a in themeContext.colors) {
-    if (_colors["default"].hasOwnProperty(a)) _colors["default"][a] = themeContext.colors[a];
-  }
-  return null;
-};
-var _default = OverwriteColors;
-exports["default"] = _default;
-//# sourceMappingURL=OverwriteColors.cjs.map

package/dist/styles/overwritecolors.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OverwriteColors.cjs","names":["_react","require","_styledComponents","_colors","_interopRequireDefault","OverwriteColors","themeContext","useContext","ThemeContext","a","colors","COLORS","hasOwnProperty","_default","exports"],"sources":["../../src/styles/OverwriteColors.tsx"],"sourcesContent":["import { useContext } from \"react\";\r\nimport { ThemeContext } from \"styled-components\";\r\nimport COLORS from \"./colors\";\r\n\r\n\r\nconst OverwriteColors: React.FunctionComponent = () => {\r\n    const themeContext = useContext(ThemeContext);\r\n    for(var a in themeContext.colors){\r\n      if(COLORS.hasOwnProperty(a))\r\n        COLORS[a as keyof typeof COLORS] = themeContext.colors[a];\r\n    }  \r\n    return null;\r\n}\r\n\r\nexport default OverwriteColors;\r\n  "],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAGA,IAAMI,eAAwC,GAAG,SAA3CA,eAAwCA,CAAA,EAAS;EACnD,IAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EAC7C,KAAI,IAAIC,CAAC,IAAIH,YAAY,CAACI,MAAM,EAAC;IAC/B,IAAGC,kBAAM,CAACC,cAAc,CAACH,CAAC,CAAC,EACzBE,kBAAM,CAACF,CAAC,CAAwB,GAAGH,YAAY,CAACI,MAAM,CAACD,CAAC,CAAC;EAC7D;EACA,OAAO,IAAI;AACf,CAAC;AAAA,IAAAI,QAAA,GAEcR,eAAe;AAAAS,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/styles/overwritecolors.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const OverwriteColors: React.FunctionComponent;
-export default OverwriteColors;

package/dist/styles/overwritecolors.js

@@ -1,12 +0,0 @@
-import { useContext } from "react";
-import { ThemeContext } from "styled-components";
-import COLORS from "./colors";
-var OverwriteColors = function OverwriteColors() {
-  var themeContext = useContext(ThemeContext);
-  for (var a in themeContext.colors) {
-    if (COLORS.hasOwnProperty(a)) COLORS[a] = themeContext.colors[a];
-  }
-  return null;
-};
-export default OverwriteColors;
-//# sourceMappingURL=OverwriteColors.js.map

package/dist/styles/overwritecolors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OverwriteColors.js","names":["useContext","ThemeContext","COLORS","OverwriteColors","themeContext","a","colors","hasOwnProperty"],"sources":["../../src/styles/OverwriteColors.tsx"],"sourcesContent":["import { useContext } from \"react\";\r\nimport { ThemeContext } from \"styled-components\";\r\nimport COLORS from \"./colors\";\r\n\r\n\r\nconst OverwriteColors: React.FunctionComponent = () => {\r\n    const themeContext = useContext(ThemeContext);\r\n    for(var a in themeContext.colors){\r\n      if(COLORS.hasOwnProperty(a))\r\n        COLORS[a as keyof typeof COLORS] = themeContext.colors[a];\r\n    }  \r\n    return null;\r\n}\r\n\r\nexport default OverwriteColors;\r\n  "],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,YAAY,QAAQ,mBAAmB;AAChD,OAAOC,MAAM,MAAM,UAAU;AAG7B,IAAMC,eAAwC,GAAG,SAA3CA,eAAwCA,CAAA,EAAS;EACnD,IAAMC,YAAY,GAAGJ,UAAU,CAACC,YAAY,CAAC;EAC7C,KAAI,IAAII,CAAC,IAAID,YAAY,CAACE,MAAM,EAAC;IAC/B,IAAGJ,MAAM,CAACK,cAAc,CAACF,CAAC,CAAC,EACzBH,MAAM,CAACG,CAAC,CAAwB,GAAGD,YAAY,CAACE,MAAM,CAACD,CAAC,CAAC;EAC7D;EACA,OAAO,IAAI;AACf,CAAC;AAED,eAAeF,eAAe","ignoreList":[]}