@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/stories/Typography.stories.js

@@ -0,0 +1,130 @@
+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.js

@@ -0,0 +1,272 @@
+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/colors.cjs

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.OverwriteColors = void 0;
-var _react = require("react");
-var _styledComponents = require("styled-components");
+exports["default"] = void 0;
 var COLORS = {
   black: '#1F1F1F',
   // Neutrals / Black
@@ -114,14 +112,6 @@ var COLORS = {
   toast_warning: '#E97116',
   toast_error: '#DC3449'
 };
-var OverwriteColors = function OverwriteColors() {
-  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
-  for (var a in themeContext.colors) {
-    if (COLORS.hasOwnProperty(a)) COLORS[a] = themeContext.colors[a];
-  }
-  return true;
-};
-exports.OverwriteColors = OverwriteColors;
 var _default = COLORS;
 exports["default"] = _default;
 //# sourceMappingURL=colors.cjs.map

package/dist/styles/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs","names":["_react","require","_styledComponents","COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","OverwriteColors","themeContext","useContext","ThemeContext","a","colors","hasOwnProperty","exports","_default"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport const OverwriteColors = () => {\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 true;\r\n}\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"colors.cjs","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","_default","exports"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/colors.js

@@ -1,5 +1,3 @@
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
 var COLORS = {
   black: '#1F1F1F',
   // Neutrals / Black
@@ -108,12 +106,5 @@ var COLORS = {
   toast_warning: '#E97116',
   toast_error: '#DC3449'
 };
-export var OverwriteColors = function OverwriteColors() {
-  var themeContext = useContext(ThemeContext);
-  for (var a in themeContext.colors) {
-    if (COLORS.hasOwnProperty(a)) COLORS[a] = themeContext.colors[a];
-  }
-  return true;
-};
 export default COLORS;
 //# sourceMappingURL=colors.js.map

package/dist/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["useContext","ThemeContext","COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","OverwriteColors","themeContext","a","colors","hasOwnProperty"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport const OverwriteColors = () => {\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 true;\r\n}\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"colors.js","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/global.d.ts

@@ -1,2 +1,2 @@
-declare const globalStyles: string;
+declare const globalStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export default globalStyles;

package/dist/styles/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,7 +34,7 @@ Object.defineProperty(exports, "COLORS", {
 Object.defineProperty(exports, "OverwriteColors", {
   enumerable: true,
   get: function get() {
-    return _colors.OverwriteColors;
+    return _OverwriteColors["default"];
   }
 });
 Object.defineProperty(exports, "Z_INDEXES", {
@@ -53,7 +52,8 @@ Object.defineProperty(exports, "globalStyles", {
 exports.scrollBarStyling = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = require("styled-components");
-var _colors = _interopRequireWildcard(require("./colors"));
+var _colors = _interopRequireDefault(require("./colors"));
+var _OverwriteColors = _interopRequireDefault(require("./OverwriteColors"));
 var _breakpoints = _interopRequireDefault(require("./breakpoints"));
 var _shadowstyles = require("./shadowstyles");
 var _typography = require("./typography");
@@ -84,8 +84,6 @@ Object.keys(_focusStyles).forEach(function (key) {
   });
 });
 var _templateObject;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var scrollBarStyling = function scrollBarStyling() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _types.Size.Small;
   return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == _types.Size.Medium ? '6px' : '4px', size == _types.Size.Medium ? '6px' : '4px', _colors["default"].neutral_100, _colors["default"].neutral_500, _colors["default"].primary_700, _colors["default"].primary_800);

package/dist/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_styledComponents","require","_colors","_interopRequireWildcard","_breakpoints","_interopRequireDefault","_shadowstyles","_typography","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_global","_types","_zIndexes","_focusStyles","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set","scrollBarStyling","size","arguments","length","undefined","Size","Small","css","_taggedTemplateLiteral2","Medium","COLORS","neutral_100","neutral_500","primary_700","primary_800"],"sources":["../../src/styles/index.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport COLORS, { OverwriteColors } from './colors';\r\nimport BREAKPOINTS from './breakpoints';\r\nimport { BOXSHADOWS } from './shadowstyles';\r\n\r\nexport  * from './typography';\r\n\r\nimport globalStyles from './global';\r\nimport { Size } from '../types';\r\n\r\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles, OverwriteColors };\r\n\r\n\r\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\r\n  \r\n  ::-webkit-scrollbar {\r\n    width: ${size == Size.Medium ? '6px' : '4px'};\r\n    height: ${size == Size.Medium ? '6px' : '4px'};\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.neutral_100};\r\n    border-radius: 6px;\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_500};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.primary_700};\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:active {\r\n    background: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nexport {Z_INDEXES} from './z-indexes'\r\n\r\nexport * from './focus-styles';\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_styledComponents","require","_colors","_interopRequireDefault","_OverwriteColors","_breakpoints","_shadowstyles","_typography","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_global","_types","_zIndexes","_focusStyles","_templateObject","scrollBarStyling","size","arguments","length","undefined","Size","Small","css","_taggedTemplateLiteral2","Medium","COLORS","neutral_100","neutral_500","primary_700","primary_800"],"sources":["../../src/styles/index.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport COLORS from './colors';\r\nimport OverwriteColors from './OverwriteColors';\r\nimport BREAKPOINTS from './breakpoints';\r\nimport { BOXSHADOWS } from './shadowstyles';\r\n\r\nexport  * from './typography';\r\n\r\nimport globalStyles from './global';\r\nimport { Size } from '../types';\r\n\r\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles, OverwriteColors };\r\n\r\n\r\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\r\n  \r\n  ::-webkit-scrollbar {\r\n    width: ${size == Size.Medium ? '6px' : '4px'};\r\n    height: ${size == Size.Medium ? '6px' : '4px'};\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.neutral_100};\r\n    border-radius: 6px;\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_500};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.primary_700};\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:active {\r\n    background: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nexport {Z_INDEXES} from './z-indexes'\r\n\r\nexport * from './focus-styles';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,YAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAEA,IAAAM,WAAA,GAAAN,OAAA;AAAAO,MAAA,CAAAC,IAAA,CAAAF,WAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,WAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,WAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAEA,IAAAS,OAAA,GAAAjB,sBAAA,CAAAF,OAAA;AACA,IAAAoB,MAAA,GAAApB,OAAA;AAoCA,IAAAqB,SAAA,GAAArB,OAAA;AAEA,IAAAsB,YAAA,GAAAtB,OAAA;AAAAO,MAAA,CAAAC,IAAA,CAAAc,YAAA,EAAAb,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAY,YAAA,CAAAZ,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAI,YAAA,CAAAZ,GAAA;IAAA;EAAA;AAAA;AAA+B,IAAAa,eAAA;AAjCxB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;EAAA,IAAIC,IAA8B,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGG,WAAI,CAACC,KAAK;EAAA,WAAKC,qBAAG,EAAAR,eAAA,KAAAA,eAAA,OAAAS,uBAAA,wfAGvEP,IAAI,IAAII,WAAI,CAACI,MAAM,GAAG,KAAK,GAAG,KAAK,EAClCR,IAAI,IAAII,WAAI,CAACI,MAAM,GAAG,KAAK,GAAG,KAAK,EAM/BC,kBAAM,CAACC,WAAW,EAMlBD,kBAAM,CAACE,WAAW,EAMlBF,kBAAM,CAACG,WAAW,EAKlBH,kBAAM,CAACI,WAAW;AAAA,CAEnC;AAACvB,OAAA,CAAAS,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/dist/styles/index.d.ts

@@ -1,10 +1,11 @@
 import COLORS from './colors';
+import OverwriteColors from './OverwriteColors';
 import BREAKPOINTS from './breakpoints';
 import { BOXSHADOWS } from './shadowstyles';
 export * from './typography';
 import globalStyles from './global';
 import { Size } from '../types';
-export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };
+export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles, OverwriteColors };
 export declare const scrollBarStyling: (size?: Size.Small | Size.Medium) => import("styled-components").FlattenSimpleInterpolation;
 export { Z_INDEXES } from './z-indexes';
 export * from './focus-styles';