oolib 2.149.4 → 2.150.0

package/dist/components/Dropdowns/DropdownMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder }: {
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown }: {
     saveValueAsString: any;
     value: any;
     id: any;
@@ -33,5 +33,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     broadcastShowOptions: any;
     tagColor: any;
     searchbarPlaceholder: any;
+    alignDropdown?: string;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/DropdownMulti/index.js

@@ -62,24 +62,24 @@ function DropdownMulti(_a) {
     optionsClassName = _a.optionsClassName, //used to override font size in priimary header
     selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
     //props whose existence needs to be questioned:
-    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder;
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
-    var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.handleShowOptions;
+    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     //3 INIT DD FOCUS CUSTOM HOOK
     (0, useHandleClickOutside_1.useHandleClickOutside)(dropdownRef, handleHideOptions, { enabled: screenWidth >= (0, mixins_1.getBreakPoint)('sm') });
     //-- TAG INPUT SPECIFIC
-    var _d = (0, useSearchString_1.useSearchString)({
+    var _e = (0, useSearchString_1.useSearchString)({
         setSearchStringInParent: setSearchStringInParent,
         searchStringInParent: searchStringInParent
-    }), searchString = _d[0], setSearchString = _d[1];
+    }), searchString = _e[0], setSearchString = _e[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -139,7 +139,7 @@ function DropdownMulti(_a) {
         return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme, color: tagColor }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
     };
-    var _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
+    var _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[1];
     var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString,
         setSearchString: setSearchString,
         single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled })); };
@@ -151,7 +151,7 @@ function DropdownMulti(_a) {
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
                 } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
-            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { searchbarPlaceholder: searchbarPlaceholder, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput(), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S })));
+            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { searchbarPlaceholder: searchbarPlaceholder, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput(), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),

package/dist/components/Dropdowns/DropdownSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled, tagColor, observerRef, searchbarPlaceholder }: {
+export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled, tagColor, observerRef, searchbarPlaceholder, alignDropdown }: {
     optionsAnchor: any;
     lightboxHeight: any;
     lightboxStyle: any;
@@ -35,5 +35,6 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     tagColor: any;
     observerRef: any;
     searchbarPlaceholder: any;
+    alignDropdown?: string;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -72,16 +72,16 @@ function DropdownSingle(_a) {
     searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, genCustomSelectComp = _a.genCustomSelectComp, placeholder = _a.placeholder, //
     genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, //
     disabled = _a.disabled, //
-    tagColor = _a.tagColor, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder;
+    tagColor = _a.tagColor, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
-    var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.handleShowOptions;
+    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     //3 INIT DD FOCUS CUSTOM HOOK
     (0, useHandleClickOutside_1.useHandleClickOutside)(dropdownRef, handleHideOptions, { enabled: screenWidth >= (0, mixins_1.getBreakPoint)('sm') });
@@ -99,10 +99,10 @@ function DropdownSingle(_a) {
         });
     };
     //-- TAG INPUT SPECIFIC
-    var _d = (0, useSearchString_1.useSearchString)({
+    var _e = (0, useSearchString_1.useSearchString)({
         searchStringInParent: searchStringInParent,
         setSearchStringInParent: setSearchStringInParent
-    }), searchString = _d[0], setSearchString = _d[1];
+    }), searchString = _e[0], setSearchString = _e[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -124,7 +124,7 @@ function DropdownSingle(_a) {
         // forceFocus, comp is expecting this
      })); };
     var genInputComp = function () {
-        return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
+        return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef, id: "StyledDropdownRefWrapper" },
             react_1.default.createElement("div", { ref: selectRef, className: "OKE-Dropdown__Select-wrapper", onClick: disabled ? function () { } : function () {
                     isTagsStyle
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
@@ -132,7 +132,7 @@ function DropdownSingle(_a) {
                 } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, genCustomSelectComp: genCustomSelectComp, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
             react_1.default.createElement(OptionsSingle_1.OptionsSingle, { searchbarPlaceholder: searchbarPlaceholder, observerRef: observerRef, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, searchString: searchString, setSearchString: setSearchString, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, invert: invert, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
                 //combobox specific
-                isSearchable: isTagsStyle ? false : isSearchable, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
+                isSearchable: isTagsStyle ? false : isSearchable, alignDropdown: alignDropdown, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
     };
     var genDisplayComp = function () {
         if (!value)

package/dist/components/Dropdowns/comps/OptionsMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, invert, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder }: {
+export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, invert, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -23,5 +23,6 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
     popOutOfOverflowHiddenParent: any;
     S: any;
     searchbarPlaceholder: any;
+    alignDropdown: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/OptionsMulti/index.js

@@ -58,7 +58,7 @@ var OptionsMulti = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, // for mobile
-    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder;
+    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
@@ -128,7 +128,7 @@ var OptionsMulti = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, forceFocus: searchBarFocus, invert: invert, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S },
+    return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown },
         isSearchable && genSearchBar(),
         !isTagsStyle && createSelectedOptions(),
         options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (options.map(function (d, i) {

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle }: {
+export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown }: {
     options: any;
     optionsRef: any;
     relativeToRef: any;
@@ -9,5 +9,6 @@ export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, show
     optionsAnchor: any;
     children: any;
     lightboxStyle: any;
+    alignDropdown: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.js

@@ -40,7 +40,7 @@ var styled_1 = require("./styled");
 var OptionsAnimateWrapper = function (_a) {
     var _b;
     var _c;
-    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle;
+    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown;
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     //we need to recalc when ops length change because, in tag comps, when loading a fixed set of 'loading' options are shown
     //before the actual number of options are loaded
@@ -57,7 +57,13 @@ var OptionsAnimateWrapper = function (_a) {
         });
     }, [options.length]);
     return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { zIndex: 100000 }), (fixPos
-            ? __assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? __assign(__assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px") }, (alignDropdown === "right"
+                ? {
+                    right: "".concat(window.innerWidth - fixPos.right, "px")
+                }
+                : {
+                    left: "".concat(fixPos.x, "px")
+                })), (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : alignDropdown === "right" ? { right: 0 } : { left: 0 })), (yOrientation === "bottom"
             ? { bottom: 0, transform: "translateY(100%)" }
             : { top: 0, transform: "translateY(-100%)" })))) }, children));
 };

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -35,7 +35,7 @@ var Modal_1 = require("../../../Modals/Modal");
 var styled_1 = require("./styled");
 var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
     var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
@@ -49,7 +49,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle },
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown },
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
                 style: {

package/dist/components/Dropdowns/comps/OptionsSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef, searchbarPlaceholder }: {
+export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef, searchbarPlaceholder, alignDropdown }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -23,5 +23,6 @@ export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, va
     S: any;
     observerRef: any;
     searchbarPlaceholder: any;
+    alignDropdown: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/OptionsSingle/index.js

@@ -47,7 +47,7 @@ var OptionsSingle = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, _b = _a.enableUseSetYOrientation, enableUseSetYOrientation = _b === void 0 ? true : _b, // if using this component standalone, this should be set to false ( if relativeToRef is not being passed thru)
-    S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder
+    S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown
     //disabled only with this is being used for the RTEEmbedLightbox. Also this might be temp.
     //ensure this is set to false, if you are not passing a 'relativeToRef'
     ;
@@ -82,7 +82,7 @@ var OptionsSingle = function (_a) {
             react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, invert: invert, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S },
+        react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, invert: invert, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, S: S },
             isSearchable && genSearchBar(),
             options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
                     return focussedOp === index && el && scrollFocussedOpIntoView(el);

package/dist/components/Dropdowns/comps/SelectDropdown/styled.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var utilsOolib_1 = require("../../../../utilsOolib");
 var mixins_1 = require("../../../../themes/mixins");
-exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"])), function (_a) {
+exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    right: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    right: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
 }, function (_a) {

package/dist/stories/Oolib/components/Dropdowns.stories.d.ts

@@ -72,6 +72,17 @@ declare namespace _default {
             let name_11: string;
             export { name_11 as name };
         }
+        namespace alignDropdown {
+            let name_12: string;
+            export { name_12 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
     }
     namespace args {
         let placeholder_1: string;
@@ -100,6 +111,9 @@ declare namespace _default {
         export { readOnly_1 as readOnly };
         let invert_1: boolean;
         export { invert_1 as invert };
+        export let popOutOfOverflowHiddenParent: boolean;
+        let alignDropdown_1: string;
+        export { alignDropdown_1 as alignDropdown };
     }
     namespace parameters {
         namespace docs {

package/dist/stories/Oolib/components/Dropdowns.stories.js

@@ -129,7 +129,12 @@ exports.default = {
         },
         showColorInSelectArea: {
             name: "Show Color in Select Area"
-        }
+        },
+        alignDropdown: {
+            name: "Align Dropdown",
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
     },
     args: {
         // label: "This is a label",
@@ -147,6 +152,8 @@ exports.default = {
         disabled: false,
         readOnly: false,
         invert: false,
+        popOutOfOverflowHiddenParent: false,
+        alignDropdown: "left",
     },
     parameters: {
         docs: {
@@ -243,7 +250,7 @@ var Dropdowns = function (args) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
                         });
-                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type" }))))));
+                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))))));
 };
 exports.Dropdowns = Dropdowns;
 // export const Button_Primary = (args) => (

package/dist/stories/v2/themes/MaterialTheme.stories.js

@@ -11,9 +11,9 @@ exports.Colors = exports._MaterialColors = void 0;
 var react_1 = require("react");
 var MaterialColors_1 = __importDefault(require("../../../components/MaterialColors"));
 var Typo_1 = require("../../../components/Typo");
-var Typo2_1 = require("../../../v2/components/Typo2");
 var themes_1 = require("../../../v2/themes");
 var styled_components_1 = __importDefault(require("styled-components"));
+var Typo2_1 = require("../../../v2/components/Typo2");
 exports.default = {
     title: "Oolib V 2.0/themes/Material Colors",
     argTypes: {
@@ -48,14 +48,14 @@ var Colors = function (args) {
     };
     return (React.createElement("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, Object.entries(themes_1.colors).map(function (item, i) { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: "1rem" } },
         React.createElement(ColorDiv, { onClick: function () { return handleCopyToClipboard(item[1], i); }, color: item[1] },
-            React.createElement(Typo2_1.UI_CARDTITLE, { capitalize: true }, copied === i ? 'Copied' : 'copy color')),
+            React.createElement(Typo2_1.UI_CAPTION, { capitalize: true }, copied === i ? 'Copied' : 'copy color')),
         React.createElement("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
             } },
-            React.createElement(Typo2_1.UI_CARDTITLE, null, item[0]),
-            React.createElement(Typo2_1.UI_CARDTITLE, null, item[1])))); })));
+            React.createElement(Typo2_1.UI_CAPTION, null, item[0]),
+            React.createElement(Typo2_1.UI_CAPTION, null, item[1])))); })));
 };
 exports.Colors = Colors;
 var templateObject_1;

package/dist/stories/v2/themes/Typo.stories.js

@@ -81,8 +81,6 @@ var UIFont = function (args) { return (react_1.default.createElement("div", { st
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_HEADLINE_SM, compName: "UI_HEADLINE_SM" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TITLE, compName: "UI_TITLE" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TITLE_SM, compName: "UI_TITLE_SM" }),
-    react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CARDTITLE, compName: "UI_CARDTITLE" }),
-    react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CARDTITLE_BOLD, compName: "UI_CARDTITLE_BOLD" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY, compName: "UI_BODY" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_BOLD, compName: "UI_BODY_BOLD" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_SM, compName: "UI_BODY_SM" }),

package/dist/v2/components/Buttons/styled.js

@@ -87,11 +87,11 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_16 || (
     var composition = _a.composition, size = _a.size;
     switch (composition) {
         case "iconOnly":
-            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "], ["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "])), SIZES[size], SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          padding: 0.9rem 1.2rem;\n          /* height: ", "; */\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "], ["\n          padding: 0.9rem 1.2rem;\n          /* height: ", "; */\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "])), SIZES[size], SIZES[size]);
         case "icon+text":
-            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          padding: 0 1.2rem 0 1rem; \n          height: ", ";\n        "], ["\n          padding: 0 1.2rem 0 1rem; \n          height: ", ";\n        "])), SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          padding: 0.9rem 1.2rem 0.9rem 1rem; \n          /* height: ", "; */\n        "], ["\n          padding: 0.9rem 1.2rem 0.9rem 1rem; \n          /* height: ", "; */\n        "])), SIZES[size]);
         default:
-            return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          padding: 0 1.2rem;\n          height: ", ";\n        "], ["\n          padding: 0 1.2rem;\n          height: ", ";\n        "])), SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          padding: 0.9rem 1.2rem;\n          /* height: ", "; */\n        "], ["\n          padding: 0.9rem 1.2rem;\n          /* height: ", "; */\n        "])), SIZES[size]);
     }
 }, function (_a) {
     var width = _a.width, composition = _a.composition, size = _a.size;

package/dist/v2/components/Tags/Comps/TagDisplay/styled.js

@@ -31,7 +31,7 @@ exports.StyledTagDisplay = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var styled_1 = require("../styled");
 var themes_1 = require("../../../../themes");
-var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, success = themes_1.colors.success, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
+var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
 exports.StyledTagDisplay = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: max-content;\n  ", "\n  ", "\n"], ["\n  width: max-content;\n  ", "\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return (0, styled_1.commonStyle)({ size: size });
@@ -43,7 +43,7 @@ exports.StyledTagDisplay = styled_components_1.default.div(templateObject_9 || (
         case 'secondary':
             return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n          height: ", ";\n          border-radius: 3.1rem;\n        "], ["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n          height: ", ";\n          border-radius: 3.1rem;\n        "])), (size === 'XS' || size === 'S') ? '1px' : '2px', tagColor || grey10, textColor || grey80, size === 'XS' ? '2.4rem' : '2.6rem');
         case 'positive':
-            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), success, textColor || white);
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), green, textColor || white);
         case 'inProgress':
             return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), blue, textColor || white);
         case 'warning':

package/dist/v2/components/Typo2/index.d.ts

@@ -29,8 +29,6 @@ export declare const UI_HEADLINE: React.FunctionComponent<TypoCompProps>;
 export declare const UI_HEADLINE_SM: React.FunctionComponent<TypoCompProps>;
 export declare const UI_TITLE: React.FunctionComponent<TypoCompProps>;
 export declare const UI_TITLE_SM: React.FunctionComponent<TypoCompProps>;
-export declare const UI_CARDTITLE: React.FunctionComponent<TypoCompProps>;
-export declare const UI_CARDTITLE_BOLD: React.FunctionComponent<TypoCompProps>;
 export declare const UI_BODY: React.FunctionComponent<TypoCompProps>;
 export declare const UI_BODY_SM: React.FunctionComponent<TypoCompProps>;
 export declare const UI_BODY_SEMIBOLD: React.FunctionComponent<TypoCompProps>;

package/dist/v2/components/Typo2/index.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_CARDTITLE_BOLD = exports.UI_CARDTITLE = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
+exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
 var react_1 = __importDefault(require("react"));
 var index_styled_1 = require("./index.styled");
 var utilsOolib_1 = require("../../../utilsOolib");
@@ -79,10 +79,6 @@ var UI_TITLE = function (props) { return react_1.default.createElement(GenComp,
 exports.UI_TITLE = UI_TITLE;
 var UI_TITLE_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_TITLE_SM_STYLED }); };
 exports.UI_TITLE_SM = UI_TITLE_SM;
-var UI_CARDTITLE = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CARDTITLE_STYLED }); };
-exports.UI_CARDTITLE = UI_CARDTITLE;
-var UI_CARDTITLE_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CARDTITLE_BOLD_STYLED }); };
-exports.UI_CARDTITLE_BOLD = UI_CARDTITLE_BOLD;
 var UI_BODY = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_STYLED }); };
 exports.UI_BODY = UI_BODY;
 var UI_BODY_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_SM_STYLED }); };

package/dist/v2/components/Typo2/index.styled.d.ts

@@ -3,8 +3,6 @@ export declare const UI_HEADLINE_STYLED: import("styled-components").StyledCompo
 export declare const UI_HEADLINE_SM_STYLED: import("styled-components").StyledComponent<"h4", any, {}, never>;
 export declare const UI_TITLE_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const UI_TITLE_SM_STYLED: import("styled-components").StyledComponent<"h1", any, {}, never>;
-export declare const UI_CARDTITLE_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const UI_CARDTITLE_BOLD_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const UI_BODY_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_BODY_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_BODY_SEMIBOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;

package/dist/v2/components/Typo2/index.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_CARDTITLE_BOLD_STYLED = exports.UI_CARDTITLE_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
+exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var typo_1 = require("../../themes/typo");
 // UI Fonts
@@ -16,33 +16,31 @@ exports.UI_HEADLINE_STYLED = styled_components_1.default.h5(templateObject_2 ||
 exports.UI_HEADLINE_SM_STYLED = styled_components_1.default.h4(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HEADLINE_SM);
 exports.UI_TITLE_STYLED = styled_components_1.default.h3(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TITLE);
 exports.UI_TITLE_SM_STYLED = styled_components_1.default.h1(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TITLE_SM);
-exports.UI_CARDTITLE_STYLED = styled_components_1.default.h3(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CARDTITLE);
-exports.UI_CARDTITLE_BOLD_STYLED = styled_components_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CARDTITLE_BOLD);
-exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY);
-exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SM);
-exports.UI_BODY_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD);
-exports.UI_BODY_SEMIBOLD_SM_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM);
-exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n  "], ["\n  ", "\n  "])), typo_1.typo.UI_BODY_BOLD);
-exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
-exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH);
-exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
-exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION);
-exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
-exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
-exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
-exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY);
+exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SM);
+exports.UI_BODY_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD);
+exports.UI_BODY_SEMIBOLD_SM_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM);
+exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  "], ["\n  ", "\n  "])), typo_1.typo.UI_BODY_BOLD);
+exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
+exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH);
+exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
+exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION);
+exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
+exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
+exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
+exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
     // Content Fonts
 ])), typo_1.typo.UI_STAT_SM);
 // Content Fonts
-exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
-exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
-exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
-exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
-exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
-exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
-exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
-exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
-exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
-exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
-exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_CARDTITLE {\n    ", "\n  }\n  \n  .UI_CARDTITLE_BOLD {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"], ["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_CARDTITLE {\n    ", "\n  }\n  \n  .UI_CARDTITLE_BOLD {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_CARDTITLE, typo_1.typo.UI_CARDTITLE_BOLD, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
+exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
+exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
+exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
+exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
+exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
+exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
+exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
+exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
+exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
+exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
+exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"], ["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;

package/dist/v2/components/cards/CardContent/styled.js

@@ -11,17 +11,17 @@ exports.StyledMetaBlockWrapper = exports.StyledStarWrapper = exports.StyledStatu
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../../themes/colors");
 var Typo2_1 = require("../../Typo2");
-var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, yellowBG = colors_1.colors.yellowBG, yellowStroke = colors_1.colors.yellowStroke, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellow = colors_1.colors.yellow, meadow = colors_1.colors.meadow, meadowBG = colors_1.colors.meadowBG, meadowStroke = colors_1.colors.meadowStroke;
+var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellowBG = colors_1.colors.yellowBG, yellow = colors_1.colors.yellow, yellowStroke = colors_1.colors.yellowStroke, green = colors_1.colors.green, greenBG = colors_1.colors.greenBG, greenStroke = colors_1.colors.greenStroke;
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 182px;\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"], ["\n  max-height: 182px;\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"])));
 exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  /* max-width: 450px; */\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  \n  &:hover {\n    border: ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"], ["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  /* max-width: 450px; */\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  \n  &:hover {\n    border: ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"])), function (_a) {
     var highlight = _a.highlight;
-    return highlight === "secondary" ? yellowStroke : highlight === "primary" ? meadowStroke : grey10;
+    return highlight === "secondary" ? yellowStroke : highlight === "primary" ? greenStroke : grey10;
 }, function (_a) {
     var highlight = _a.highlight;
-    return highlight === "secondary" ? yellowBG : highlight === "primary" ? meadowBG : white;
+    return highlight === "secondary" ? yellowBG : highlight === "primary" ? greenBG : white;
 }, shadowDefault, function (_a) {
     var highlight = _a.highlight;
-    return highlight === 'secondary' ? "1px solid ".concat(yellow) : highlight === 'primary' ? "1px solid ".concat(meadow) : "1px solid ".concat(grey50);
+    return highlight === 'secondary' ? "1px solid ".concat(yellow) : highlight === 'primary' ? "1px solid ".concat(green) : "1px solid ".concat(grey50);
 }, shadowHover);
 exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n  width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"], ["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n  width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"])), function (_a) {
     var highlight = _a.highlight, showEmbedSection = _a.showEmbedSection;
@@ -39,7 +39,7 @@ exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_
 exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 8px;\n  /* max-width: 40%; */\n"], ["\n  margin-bottom: 8px;\n  /* max-width: 40%; */\n"])));
 exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 3.6rem;\n  height: 3.6rem;\n  position: absolute;\n  top: 1.2rem;\n  right: 1.2rem;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", "; \n  border-radius: 4px;\n"], ["\n  width: 3.6rem;\n  height: 3.6rem;\n  position: absolute;\n  top: 1.2rem;\n  right: 1.2rem;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", "; \n  border-radius: 4px;\n"])), function (_a) {
     var highlight = _a.highlight;
-    return highlight === "secondary" ? yellow : highlight === "primary" ? meadow : white;
+    return highlight === "secondary" ? yellow : highlight === "primary" ? green : white;
 });
 exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  padding-top: 0.2rem;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  padding-top: 0.2rem;\n"])), grey50, Typo2_1.UI_CAPTION);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/v2/themes/colors.d.ts

@@ -32,9 +32,9 @@ export declare const colors: {
     purple: string;
     shadowDefault: string;
     shadowHover: string;
-    meadow: string;
-    meadowBG: string;
-    meadowStroke: string;
+    green: string;
+    greenBG: string;
+    greenStroke: string;
 };
 export interface Colors2Type {
     primary: string;
@@ -63,7 +63,7 @@ export interface Colors2Type {
     success: string;
     hintHover: string;
     hint: string;
-    meadow: string;
-    meadowBG: string;
-    meadowStroke: string;
+    green: string;
+    greenBG: string;
+    greenStroke: string;
 }

package/dist/v2/themes/colors.js

@@ -30,17 +30,17 @@ var blue = "#2F55FF";
 var yellow = "#DA9A0F";
 var yellowBG = "#FFF7DC";
 var yellowStroke = "#FFE09A";
-var purple = "#9D13E8";
 // const green = "#159300";
+var purple = "#9D13E8";
 var error = "#C41717";
 var success = "#53AC00";
 var shadowDefault = "#0000000f";
 var shadowHover = "#0000001f";
 var hintHover = "#F4E8C3";
 var hint = "#B77222";
-var meadow = '#1DBC8C';
-var meadowBG = '#E4FFF7';
-var meadowStroke = '#C3E5DB';
+var green = '#53AC00';
+var greenBG = '#E8F6DA';
+var greenStroke = '#C4DAAF';
 exports.colors = {
     primary: primary,
     secondary: secondary,
@@ -75,7 +75,7 @@ exports.colors = {
     purple: purple,
     shadowDefault: shadowDefault,
     shadowHover: shadowHover,
-    meadow: meadow,
-    meadowBG: meadowBG,
-    meadowStroke: meadowStroke
+    green: green,
+    greenBG: greenBG,
+    greenStroke: greenStroke
 };

package/dist/v2/themes/typo.d.ts

@@ -4,8 +4,6 @@ export declare const typo: {
     UI_HEADLINE_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_TITLE: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_TITLE_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-    UI_CARDTITLE: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-    UI_CARDTITLE_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_BODY: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_BODY_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_BODY_SEMIBOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/v2/themes/typo.js

@@ -20,47 +20,43 @@ var fontCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
 });
 var uiFont = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: 'DM Sans', 'Noto Sans Devanagari', '\n      Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n  font-family: 'DM Sans', 'Noto Sans Devanagari', '\n      Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
 var contentFont = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n      Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n  font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n      Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
-var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  font-size: 40px;\n  line-height: 130%;\n  font-weight: 700;\n"], ["\n  ", ";\n  ", ";\n  font-size: 40px;\n  line-height: 130%;\n  font-weight: 700;\n"])), uiFont, fontCss);
-var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";;\n  font-size: 32px;\n  line-height: 130%;\n  font-weight: 500;\n"], ["\n  ", ";\n  ", ";;\n  font-size: 32px;\n  line-height: 130%;\n  font-weight: 500;\n"])), uiFont, fontCss);
-var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 130%;\n  font-weight: 600;\n"], ["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 130%;\n  font-weight: 600;\n"])), uiFont, fontCss);
-var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 20px;\n  line-height: 130%;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"], ["\n  font-size: 20px;\n  line-height: 130%;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 16px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_CARDTITLE = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 18px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_CARDTITLE_BOLD = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 18px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_BODY = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n"], ["\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n"], ["\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n  \n"], ["\n  line-height: 130%;\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n  \n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n"], ["\n  line-height: 130%;\n  font-weight: 500;\n  ", "\n  ", "\n\n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n"], ["\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  font-size: 18px;\n  ", "{\n    font-size: 16px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n\n"], ["\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  ", "{\n    font-size: 14px;\n  }\n\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
-var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_CAPTION = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_TAG = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  font-size: 10px;\n  line-height: 130%;\n  font-weight: 700; \n  text-transform: uppercase;\n  letter-spacing: 1px;\n  ", ";\n  ", ";\n"], ["\n  font-size: 10px;\n  line-height: 130%;\n  font-weight: 700; \n  text-transform: uppercase;\n  letter-spacing: 1px;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 130%;\n  font-weight: 400; \n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  line-height: 130%;\n  font-weight: 400; \n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_STAT_LG = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 24px;\n  line-height: 100%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 24px;\n  line-height: 100%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var UI_STAT_SM = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
-var CONTENT_H1 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
-var CONTENT_H2 = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
-var CONTENT_H3 = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_BODY = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  font-style: italic;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  font-style: italic;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  padding: 0 16px;\n  font-size: 24px;\n  line-height: 35.04px;\n  font-weight: 400;\n  font-style: italic;\n  position: relative;\n  ::before {\n    /* Quote line (left) */\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        height: inherit; \n        width: 6px; \n        background-color: ", "; // temp colors need to replace with material colors */\n    }\n  ", ";\n  ", ";\n"], ["\n  padding: 0 16px;\n  font-size: 24px;\n  line-height: 35.04px;\n  font-weight: 400;\n  font-style: italic;\n  position: relative;\n  ::before {\n    /* Quote line (left) */\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        height: inherit; \n        width: 6px; \n        background-color: ", "; // temp colors need to replace with material colors */\n    }\n  ", ";\n  ", ";\n"])), function (_a) {
+var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  font-size: 40px;\n  line-height: 52px;\n  font-weight: 700;\n"], ["\n  ", ";\n  ", ";\n  font-size: 40px;\n  line-height: 52px;\n  font-weight: 700;\n"])), uiFont, fontCss);
+var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";;\n  font-size: 32px;\n  line-height: 42px;\n  font-weight: 500;\n"], ["\n  ", ";\n  ", ";;\n  font-size: 32px;\n  line-height: 42px;\n  font-weight: 500;\n"])), uiFont, fontCss);
+var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 36px;\n  font-weight: 600;\n"], ["\n  ", ";\n  ", ";;\n  font-size: 28px;\n  line-height: 36px;\n  font-weight: 600;\n"])), uiFont, fontCss);
+var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 20px;\n  line-height: 26px;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"], ["\n  font-size: 20px;\n  line-height: 26px;\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 16px;\n  line-height: 21px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 16px;\n  line-height: 21px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_BODY = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SM = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n \n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  line-height: 23px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n \n  font-weight: 400;\n  ", ";\n  ", ";\n\n  font-size: 16px;\n  line-height: 23px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n  \n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    font-size: 16px;\n    line-height: 21px;\n  }\n  \n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-weight: 500;\n  ", "\n  ", "\n  font-size: 16px;\n  font-size: 20px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  font-weight: 500;\n  ", "\n  ", "\n  font-size: 16px;\n  font-size: 20px;\n\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    line-height: 21px;\n    font-size: 16px;\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 18px;\n  line-height: 23px;\n\n  ", "{\n    line-height: 21px;\n    font-size: 16px;\n  }\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 20px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n  \n  font-size: 16px;\n  line-height: 20px;\n  ", "{\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n"])), uiFont, fontCss, (0, mixins_1.mediaQuery)("md"));
+var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 130%;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_CAPTION = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_TAG = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: 10px;\n  line-height: 13px;\n  font-weight: 700; \n  text-transform: uppercase;\n  letter-spacing: 1px;\n  ", ";\n  ", ";\n"], ["\n  font-size: 10px;\n  line-height: 13px;\n  font-weight: 700; \n  text-transform: uppercase;\n  letter-spacing: 1px;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400; \n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  line-height: 16px;\n  font-weight: 400; \n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_STAT_LG = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  font-size: 24px;\n  line-height: 24px;\n  font-weight: 500;\n  ", ";\n  ", ";\n"], ["\n  font-size: 24px;\n  line-height: 24px;\n  font-weight: 500;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var UI_STAT_SM = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), uiFont, fontCss);
+var CONTENT_H1 = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 36px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
+var CONTENT_H2 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "], ["\n  font-size: 25px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n  "])), contentFont, fontCss);
+var CONTENT_H3 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"], ["\n  font-size: 18px;\n  line-height: 140%;\n  font-weight: 700;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_BODY = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"], ["\n  font-size: 15px;\n  line-height: 140%;\n  font-weight: 400;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 400;\n  font-style: italic;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  font-style: italic;\n  ", ";\n  ", ";\n"], ["\n  font-size: 17px;\n  line-height: 140%;\n  font-weight: 600;\n  font-style: italic;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  padding: 0 16px;\n  font-size: 24px;\n  line-height: 35.04px;\n  font-weight: 400;\n  font-style: italic;\n  position: relative;\n  ::before {\n    /* Quote line (left) */\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        height: inherit; \n        width: 6px; \n        background-color: ", "; // temp colors need to replace with material colors */\n    }\n  ", ";\n  ", ";\n"], ["\n  padding: 0 16px;\n  font-size: 24px;\n  line-height: 35.04px;\n  font-weight: 400;\n  font-style: italic;\n  position: relative;\n  ::before {\n    /* Quote line (left) */\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        height: inherit; \n        width: 6px; \n        background-color: ", "; // temp colors need to replace with material colors */\n    }\n  ", ";\n  ", ";\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
 }, contentFont, fontCss);
-var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 700;\n  line-height:  130%;\n  ", ";\n  ", ";\n"], ["\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 700;\n  line-height:  130%;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
-var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 130%;\n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 130%;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 700;\n  line-height:  130%;\n  ", ";\n  ", ";\n"], ["\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 700;\n  line-height:  130%;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
+var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 130%;\n  ", ";\n  ", ";\n"], ["\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 130%;\n  ", ";\n  ", ";\n"])), contentFont, fontCss);
 exports.typo = {
     UI_DISPLAY: UI_DISPLAY,
     UI_HEADLINE: UI_HEADLINE,
     UI_HEADLINE_SM: UI_HEADLINE_SM,
     UI_TITLE: UI_TITLE,
     UI_TITLE_SM: UI_TITLE_SM,
-    UI_CARDTITLE: UI_CARDTITLE,
-    UI_CARDTITLE_BOLD: UI_CARDTITLE_BOLD,
     UI_BODY: UI_BODY,
     UI_BODY_SM: UI_BODY_SM,
     UI_BODY_SEMIBOLD: UI_BODY_SEMIBOLD,
@@ -85,4 +81,4 @@ exports.typo = {
     CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
     CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.149.4",
+  "version": "2.150.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",