oolib 2.161.0 → 2.162.0

package/dist/stories/v2/components/Button.stories.d.ts

@@ -131,6 +131,7 @@ declare namespace _default {
         export { disabled_1 as disabled };
         let invert_1: boolean;
         export { invert_1 as invert };
+        export let responsive: boolean;
     }
     namespace parameters {
         namespace docs {
@@ -163,8 +164,8 @@ export namespace Button_Secondary {
     }
     export { args_1 as args };
 }
-export function Button_Ghost(args: any): React.JSX.Element;
-export namespace Button_Ghost {
+export function Button_Tertiary(args: any): React.JSX.Element;
+export namespace Button_Tertiary {
     export namespace args_2 {
         let active_1: boolean;
         export { active_1 as active };
@@ -179,6 +180,23 @@ export namespace Button_Ghost {
     }
     export { parameters_3 as parameters };
 }
+export function Button_Ghost(args: any): React.JSX.Element;
+export namespace Button_Ghost {
+    export namespace args_3 {
+        let active_2: boolean;
+        export { active_2 as active };
+    }
+    export { args_3 as args };
+    export namespace parameters_4 {
+        export namespace controls_3 {
+            let exclude_3: string[];
+            export { exclude_3 as exclude };
+        }
+        export { controls_3 as controls };
+    }
+    export { parameters_4 as parameters };
+}
+export function Buttons(args: any): React.JSX.Element;
 declare const availableIcons: string[];
 declare const availableColors: string[];
 import ButtonDocs from "../../Oolib/components/Buttons.mdx";

package/dist/stories/v2/components/Button.stories.js

@@ -23,12 +23,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button_Ghost = exports.Button_Secondary = exports.Button_Primary = void 0;
+exports.Buttons = exports.Button_Ghost = exports.Button_Tertiary = exports.Button_Secondary = exports.Button_Primary = void 0;
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../../../v2/components/Buttons");
 var Buttons_mdx_1 = __importDefault(require("../../Oolib/components/Buttons.mdx"));
 var icons_1 = require("../../../icons");
 var themes_1 = require("../../../themes");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var styled_components_1 = require("styled-components");
 var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
 var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
 exports.default = {
@@ -105,6 +107,7 @@ exports.default = {
         iconColor: undefined,
         disabled: false,
         invert: false,
+        responsive: false
     },
     parameters: {
         docs: {
@@ -149,23 +152,42 @@ exports.Button_Secondary.parameters = { controls: { exclude: ["variant", "color"
 exports.Button_Secondary.args = {
     active: false,
 };
+var Button_Tertiary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonTertiary })); };
+exports.Button_Tertiary = Button_Tertiary;
+exports.Button_Tertiary.args = {
+    active: false,
+};
+exports.Button_Tertiary.parameters = { controls: { exclude: ["variant"] } };
 var Button_Ghost = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhost })); };
 exports.Button_Ghost = Button_Ghost;
 exports.Button_Ghost.args = {
     active: false,
 };
 exports.Button_Ghost.parameters = { controls: { exclude: ["variant"] } };
-// export const Button_Custom = (args) => (
-//   <GenButtonStory args={args} Comp={ButtonCustom} />
-// );
-// Button_Custom.parameters = { controls: { exclude: ["variant", "color"] } };
-// export const Google_Login = (args) => (
-//   <GenButtonStory args={args} Comp={GoogleLogin} />
-// );
-// Google_Login.parameters = {
-//   controls: { exclude: ["variant", "color", "iconOnly", "icon + text"] },
-// };
-// export const Upload_Button = (args) => (
-//   <GenButtonStory args={{ ...args, children: "Upload" }} Comp={UploadButton} />
-// );
-// Upload_Button.parameters = { controls: { exclude: ["color"] } };
+var Buttons = function (args) {
+    var theme = (0, styled_components_1.useTheme)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { display: "flex", gap: '5rem' } },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimary }),
+                react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondary }),
+                react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonTertiary }),
+                react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhost })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonPrimary }),
+                react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonSecondary }),
+                react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonTertiary }),
+                react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonGhost }))),
+        react_1.default.createElement("div", { style: { marginTop: '10rem' } },
+            react_1.default.createElement(Typo2_1.UI_TITLE, { style: { paddingLeft: '20px' } }, "Derived Buttons"),
+            react_1.default.createElement("div", { style: { display: "flex", gap: '5rem' } },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonTertiaryCompact })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonPrimaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonSecondaryCompact }),
+                    react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { responsive: true }), Comp: Buttons_1.ButtonTertiaryCompact }))))));
+};
+exports.Buttons = Buttons;

package/dist/stories/v2/components/TextInputs.stories.js

@@ -99,7 +99,7 @@ exports.default = {
         actionButton: false,
         actionButtonText: 'Action',
         clearButton: false,
-        clearButtonText: '',
+        clearButtonText: 'Clear',
         readOnly: false,
         isRequired: false,
         disabled: false,

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

@@ -105,6 +105,8 @@ var UIFont = function (args) { return (react_1.default.createElement("div", { st
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_BOLD, compName: "UI_CAPTION_BOLD" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_DF, compName: "UI_CAPTION_DF" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_BOLD_DF, compName: "UI_CAPTION_DF" }),
+    react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_SEMIBOLD, compName: "UI_CAPTION_SEMIBOLD" }),
+    react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_SEMIBOLD_DF, compName: "UI_CAPTION_SEMIBOLD_DF" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TAG, compName: "UI_TAG" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_HELPTEXT, compName: "UI_HELPTEXT" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_STAT_LG, compName: "UI_STAT_LG" }),

package/dist/themes/mixins/index.d.ts

@@ -30,3 +30,4 @@ export declare const multilineUnderline: ({ color, thickness, reverse, }: {
     init: FlattenInterpolation<any>;
     hovered: FlattenInterpolation<any>;
 };
+export declare const useResponsiveMobileStyles: (reponsive?: boolean) => boolean;

package/dist/themes/mixins/index.js

@@ -4,8 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.multilineUnderline = exports.clampText = exports.ellipsis = exports.isElementInViewport = exports.mediaQuery = exports.getBreakPoint = exports.innerShadow0 = exports.boxShadow1 = exports.boxShadow0 = exports.transition = void 0;
+exports.useResponsiveMobileStyles = exports.multilineUnderline = exports.clampText = exports.ellipsis = exports.isElementInViewport = exports.mediaQuery = exports.getBreakPoint = exports.innerShadow0 = exports.boxShadow1 = exports.boxShadow0 = exports.transition = void 0;
 var styled_components_1 = require("styled-components");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var transitions_1 = require("./transitions");
 Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
 var boxShadows_1 = require("./boxShadows");
@@ -72,4 +73,12 @@ var multilineUnderline = function (_a) {
     });
 };
 exports.multilineUnderline = multilineUnderline;
+var useResponsiveMobileStyles = function (reponsive) {
+    if (reponsive === void 0) { reponsive = false; }
+    if (!reponsive)
+        return false;
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    return reponsive && screenWidth < (0, exports.getBreakPoint)("sm");
+};
+exports.useResponsiveMobileStyles = useResponsiveMobileStyles;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const generateCompactButtonStyles: (responsive: any, icon: any) => {
+    borderRadius: string;
+    cursor: string;
+    padding: string;
+    gap: string;
+};
+export declare const ButtonPrimaryCompact: (props: any) => React.JSX.Element;

package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPrimaryCompact = exports.generateCompactButtonStyles = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+var mixins_1 = require("../../../../themes/mixins");
+var generateCompactButtonStyles = function (responsive, icon) {
+    var paddingGenerator = function () {
+        if (responsive) {
+            if (icon) {
+                return "8px 14px 8px 12px";
+            }
+            return "8px 14px";
+        }
+        if (icon) {
+            return "4px 10px 4px 8px";
+        }
+        return "4px 10px";
+    };
+    return {
+        borderRadius: responsive ? "18px" : "14px",
+        cursor: "pointer",
+        padding: paddingGenerator(),
+        gap: '0.2rem'
+    };
+};
+exports.generateCompactButtonStyles = generateCompactButtonStyles;
+var ButtonPrimaryCompact = function (props) {
+    var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
+    return (react_1.default.createElement(__1.ButtonPrimary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, exports.generateCompactButtonStyles)(responsive, props.icon) })));
+};
+exports.ButtonPrimaryCompact = ButtonPrimaryCompact;

package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ButtonSecondaryCompact: (props: any) => React.JSX.Element;

package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSecondaryCompact = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
+var mixins_1 = require("../../../../themes/mixins");
+var ButtonSecondaryCompact = function (props) {
+    var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
+    return (react_1.default.createElement(__1.ButtonSecondary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
+};
+exports.ButtonSecondaryCompact = ButtonSecondaryCompact;

package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ButtonTertiaryCompact: (props: any) => React.JSX.Element;

package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTertiaryCompact = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
+var mixins_1 = require("../../../../themes/mixins");
+var ButtonTertiaryCompact = function (props) {
+    var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
+    return (react_1.default.createElement(__1.ButtonTertiary, __assign({}, props, { typo: "UI_CAPTION_BOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
+};
+exports.ButtonTertiaryCompact = ButtonTertiaryCompact;

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

@@ -36,6 +36,8 @@ export interface ButtonProps {
     stopPropagation?: boolean;
     preventDefault?: boolean;
     forceHover?: boolean;
+    responsive?: boolean;
+    typo?: string;
 }
 export interface ButtonStyledWrapperProps {
     props: ButtonProps;
@@ -43,6 +45,8 @@ export interface ButtonStyledWrapperProps {
 }
 export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;
 export declare const ButtonSecondary: React.FunctionComponent<ButtonProps>;
+export declare const ButtonTertiary: React.FunctionComponent<ButtonProps>;
 export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
-export { ClearButton } from "./derivedComps/ClearButton";
-export { ActionButton } from "./derivedComps/ActionButton";
+export { ButtonSecondaryCompact } from "./derivedComps/ButtonSecondaryCompact";
+export { ButtonPrimaryCompact } from "./derivedComps/ButtonPrimaryCompact";
+export { ButtonTertiaryCompact } from "./derivedComps/ButtonTertiaryCompact";

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionButton = exports.ClearButton = exports.ButtonGhost = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
+exports.ButtonTertiaryCompact = exports.ButtonPrimaryCompact = exports.ButtonSecondaryCompact = exports.ButtonGhost = exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_1 = require("./styled");
 var react_router_dom_1 = require("react-router-dom");
@@ -22,14 +22,20 @@ var lodash_1 = require("lodash");
 var icons_1 = require("../../../icons");
 var themes_1 = require("../../../themes");
 var Typo2_1 = require("../Typo2");
+var mixins_1 = require("../../../themes/mixins");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, size = _a.size, color = _a.color, iconWeight = _a.iconWeight;
     var IconComp = icons_1.icons[icon];
     return react_1.default.createElement("div", { style: { minWidth: 'max-content', display: "flex", justifyContent: "center", alignItems: "center" } }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: iconWeight || 'bold' }));
 };
+var Typos = {
+    UI_BODY_SEMIBOLD_SM_DF: Typo2_1.UI_BODY_SEMIBOLD_SM_DF,
+    UI_CAPTION_BOLD_DF: Typo2_1.UI_CAPTION_BOLD_DF
+};
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, iconWeight = props.iconWeight, stopPropagation = props.stopPropagation, preventDefault = props.preventDefault, forceHover = props.forceHover;
+    var responsive_ = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, iconWeight = props.iconWeight, stopPropagation = props.stopPropagation, preventDefault = props.preventDefault, forceHover = props.forceHover, typo = props.typo;
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
     var debouncedOnClick = onClick && (0, lodash_1.debounce)(onClick, 200);
     var debouncedMouseDown = onMouseDown && (0, lodash_1.debounce)(onMouseDown, 150);
@@ -40,12 +46,13 @@ var ButtonStyledWrapper = function (_a) {
             : "textOnly";
     var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
         ? (S && 'S') || 'M'
-        : (M && 'M') || 'S';
+        : (M && 'M') || 'S'; // this size logic dont have design defination yet, default size is "S"
     var calcIconSize = function () {
         var thisSize = iconSize || size;
-        return thisSize === 'S' ? 16 : 20;
+        return typeof thisSize === 'number' ? thisSize : (thisSize === 'S' && responsive_) ? 18 : (thisSize === 'S' && !responsive_) ? 16 : 20;
     };
     var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
+    var DisplayTextTypo = Typos[typo] || Typo2_1.UI_BODY_SEMIBOLD_SM_DF;
     return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
             stopPropagation && e.stopPropagation();
             preventDefault && e.preventDefault();
@@ -54,9 +61,9 @@ var ButtonStyledWrapper = function (_a) {
             stopPropagation && e.stopPropagation();
             preventDefault && e.preventDefault();
             debouncedMouseDown && debouncedMouseDown(e);
-        }, composition: composition, width: width, color: color, forceHover: forceHover },
+        }, composition: composition, width: width, color: color, forceHover: forceHover, responsive: responsive_ },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' }),
-        displayText && react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, null, displayText),
+        displayText && react_1.default.createElement(DisplayTextTypo, null, displayText),
         iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' })));
 };
 /**
@@ -77,9 +84,13 @@ var ButtonPrimary = function (props) { return (react_1.default.createElement(But
 exports.ButtonPrimary = ButtonPrimary;
 var ButtonSecondary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "secondary" })); };
 exports.ButtonSecondary = ButtonSecondary;
+var ButtonTertiary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "tertiary" })); };
+exports.ButtonTertiary = ButtonTertiary;
 var ButtonGhost = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "ghost" })); };
 exports.ButtonGhost = ButtonGhost;
-var ClearButton_1 = require("./derivedComps/ClearButton");
-Object.defineProperty(exports, "ClearButton", { enumerable: true, get: function () { return ClearButton_1.ClearButton; } });
-var ActionButton_1 = require("./derivedComps/ActionButton");
-Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
+var ButtonSecondaryCompact_1 = require("./derivedComps/ButtonSecondaryCompact");
+Object.defineProperty(exports, "ButtonSecondaryCompact", { enumerable: true, get: function () { return ButtonSecondaryCompact_1.ButtonSecondaryCompact; } });
+var ButtonPrimaryCompact_1 = require("./derivedComps/ButtonPrimaryCompact");
+Object.defineProperty(exports, "ButtonPrimaryCompact", { enumerable: true, get: function () { return ButtonPrimaryCompact_1.ButtonPrimaryCompact; } });
+var ButtonTertiaryCompact_1 = require("./derivedComps/ButtonTertiaryCompact");
+Object.defineProperty(exports, "ButtonTertiaryCompact", { enumerable: true, get: function () { return ButtonTertiaryCompact_1.ButtonTertiaryCompact; } });

package/dist/v2/components/Buttons/styled.d.ts

@@ -1,22 +1,5 @@
 /// <reference types="react" />
-export interface HoverStylingProps {
-    active?: boolean;
-    theme: {
-        colors: any;
-    };
-}
-export interface ButtonVariantProps {
-    disabled?: boolean;
-    color?: string;
-    forceHover?: boolean;
-    theme: {
-        colors: string[];
-    };
-    active?: boolean;
-}
-export interface ButtonGhostProps extends ButtonVariantProps {
-    composition?: string;
-}
+export type ButtonComposition = 'iconOnly' | 'icon+text' | 'textOnly';
 export interface ButtonStyledProps {
     size: string;
     width?: string;
@@ -24,6 +7,7 @@ export interface ButtonStyledProps {
     active?: boolean;
     composition?: string;
     forceHover?: boolean;
+    responsive?: boolean;
 }
 export declare const ButtonStyled: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;
-export declare const Styled_UI_BODY_BOLD_SM: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;
+export declare const StyledBodyText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

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

@@ -27,78 +27,96 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Styled_UI_BODY_BOLD_SM = exports.ButtonStyled = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+exports.StyledBodyText = exports.ButtonStyled = void 0;
 var colors_1 = require("../../../v2/themes/colors");
 var mixins_1 = require("../../../themes/mixins");
 var utils_1 = require("../../themes/utils");
+var styled_components_1 = __importStar(require("styled-components"));
 var Typo2_1 = require("../Typo2");
-var primaryContainer = colors_1.colors.primaryContainer, onPrimary = colors_1.colors.onPrimary, secondaryContainer = colors_1.colors.secondaryContainer, onSecondary = colors_1.colors.onSecondary, grey80 = colors_1.colors.grey80, grey40 = colors_1.colors.grey40, grey10 = colors_1.colors.grey10;
-//sizes
-var SIZES = {
-    S: "3rem",
-    M: "3.2rem",
+// Constants
+var BUTTON_SIZES = {
+    S: '3rem',
+    M: '3.2rem',
 };
-var hoverBeforeElement = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"])), (0, mixins_1.transition)("background-color"));
-var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
-var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
-var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
-var ButtonPrimary = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n\n\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n\n\n"])), function (_a) {
-    var colors = _a.theme.colors;
-    return colors ? (0, utils_1.getPrimaryContainer)(colors) : primaryContainer;
-}, function (_a) {
-    var colors = _a.theme.colors;
-    return colors ? (0, utils_1.getOnPrimary)(colors) : onPrimary;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), grey10, grey40);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingPrimary;
-}, hoverStylingPrimary);
-var ButtonSecondary = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n\n   @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n\n   @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
-    var colors = _a.theme.colors;
-    return colors ? (0, utils_1.getSecondaryContainer)(colors) : secondaryContainer;
-}, function (_a) {
-    var colors = _a.theme.colors;
-    return colors ? (0, utils_1.getOnSecondary)(colors) : onSecondary;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background-color: ", ";\n\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n\n      color: ", ";\n      pointer-events: none;\n    "])), grey10, grey40);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingSecondary;
-}, hoverStylingSecondary);
-var ButtonGhost = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: transparent;\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n"], ["\n  background-color: transparent;\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n"])), grey80, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey80);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingGhost;
-}, hoverStylingGhost);
-var buttonVariantSetting = {
-    primary: ButtonPrimary,
-    secondary: ButtonSecondary,
-    ghost: ButtonGhost,
-    // custom: ButtonCustom,
-    // googleAuth: GoogleButton,
+var BUTTON_PADDING = {
+    default: '0.9rem 1.2rem',
+    iconWithText: '0.9rem 1.2rem 0.9rem 1rem',
+    iconOnly: '0.9rem',
 };
-exports.ButtonStyled = styled_components_1.default.button(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n    \n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2; // important for text color to have same color when overlay hover is \n  }\n\n"], ["\n  ", "\n    \n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2; // important for text color to have same color when overlay hover is \n  }\n\n"])), function (_a) {
-    var composition = _a.composition, size = _a.size;
+var BUTTON_PADDING_DF = {
+    default: '1.2rem 1.4rem 1.2rem 1.6rem',
+    iconWithText: '1.2rem 1.4rem 1.2rem 1.2rem',
+    iconOnly: '1.2rem',
+};
+// Hover Effects
+var createHoverEffect = function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"])), (0, mixins_1.transition)("background-color")); };
+// Disabled States
+var disabledStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), colors_1.colors.grey10, colors_1.colors.grey40);
+// Variant Styles
+var variants = {
+    primary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
+        var colors = _a.theme.colors;
+        return colors ? (0, utils_1.getPrimaryContainer)(colors) : colors_1.colors.primaryContainer;
+    }, function (_a) {
+        var colors = _a.theme.colors;
+        return colors ? (0, utils_1.getOnPrimary)(colors) : colors_1.colors.onPrimary;
+    }, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && disabledStyles;
+    }, function (_a) {
+        var forceHover = _a.forceHover;
+        return forceHover && createHoverEffect();
+    }, createHoverEffect()),
+    secondary: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
+        var colors = _a.theme.colors;
+        return colors ? (0, utils_1.getSecondaryContainer)(colors) : colors_1.colors.secondaryContainer;
+    }, function (_a) {
+        var colors = _a.theme.colors;
+        return colors ? (0, utils_1.getOnSecondary)(colors) : colors_1.colors.onSecondary;
+    }, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && disabledStyles;
+    }, function (_a) {
+        var forceHover = _a.forceHover;
+        return forceHover && createHoverEffect();
+    }, createHoverEffect()),
+    tertiary: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), colors_1.colors.grey80, colors_1.colors.grey10, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), colors_1.colors.grey80);
+    }, function (_a) {
+        var forceHover = _a.forceHover;
+        return forceHover && createHoverEffect();
+    }, createHoverEffect()),
+    ghost: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n    \n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n    \n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), colors_1.colors.grey80, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), colors_1.colors.grey80);
+    }, function (_a) {
+        var forceHover = _a.forceHover;
+        return forceHover && createHoverEffect();
+    }, createHoverEffect()),
+};
+// Composition Styles
+var getCompositionStyles = function (composition, responsive) {
     switch (composition) {
-        case "iconOnly":
-            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.9rem 1.2rem 0.9rem 1rem; \n          /* height: ", "; */\n        "], ["\n          padding: 0.9rem 1.2rem 0.9rem 1rem; \n          /* height: ", "; */\n        "])), SIZES[size]);
+        case 'iconOnly':
+            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: ", "; \n        flex-shrink: 0;\n      "], ["\n        padding: ", "; \n        flex-shrink: 0;\n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
+        case 'icon+text':
+            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
         default:
-            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]);
+            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        padding: ", "; \n      "], ["\n        padding: ", "; \n      "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
     }
+};
+// Main Button Component
+exports.ButtonStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"], ["\n  ", "\n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.4rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  /* ", " */\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2;\n  }\n"])), function (_a) {
+    var _b = _a.composition, composition = _b === void 0 ? 'textOnly' : _b, responsive = _a.responsive;
+    return getCompositionStyles(composition, responsive);
 }, function (_a) {
     var width = _a.width, composition = _a.composition, size = _a.size;
-    return width ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      min-width: ", ";\n      max-width: 400px;\n    "], ["\n      min-width: ", ";\n      max-width: 400px;\n    "])), composition === "iconOnly" ? SIZES[size] : "60px");
+    return width
+        ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), width) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      min-width: ", ";\n      max-width: 400px;\n    "], ["\n      min-width: ", ";\n      max-width: 400px;\n    "])), composition === 'iconOnly' ? BUTTON_SIZES[size] : '60px');
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var variant = _a.variant;
-    return buttonVariantSetting[variant];
+    return variants[variant];
 });
-exports.Styled_UI_BODY_BOLD_SM = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
-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;
+exports.StyledBodyText = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
+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;

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

@@ -92,9 +92,8 @@ var NumberInput_1 = require("./derivedComps/NumberInput");
 Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
 var PhoneInput_1 = require("./derivedComps/PhoneInput");
 Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
-var ClearButton_1 = require("../Buttons/derivedComps/ClearButton");
-var ActionButton_1 = require("../Buttons/derivedComps/ActionButton");
 var icons_1 = require("../../../icons");
+var Buttons_1 = require("../Buttons");
 var BadgeVetted = icons_1.icons.BadgeVetted;
 function TextInput(_a) {
     var _this = this;
@@ -189,8 +188,8 @@ function TextInput(_a) {
                     react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
                     react_1.default.createElement(BadgeVetted, { size: 26 }))),
-                clearBtn && clearBtnEnabled && (react_1.default.createElement(ClearButton_1.ClearButton, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } })),
-                actionBtn && (react_1.default.createElement(ActionButton_1.ActionButton, { value: actionBtn.text || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } }))),
+                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } })),
+                actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } }))),
             displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
                 react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,

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

@@ -47,6 +47,8 @@ export declare const UI_CAPTION: React.FunctionComponent<TypoCompProps>;
 export declare const UI_CAPTION_BOLD: React.FunctionComponent<TypoCompProps>;
 export declare const UI_CAPTION_DF: React.FunctionComponent<TypoCompProps>;
 export declare const UI_CAPTION_BOLD_DF: React.FunctionComponent<TypoCompProps>;
+export declare const UI_CAPTION_SEMIBOLD_DF: React.FunctionComponent<TypoCompProps>;
+export declare const UI_CAPTION_SEMIBOLD: React.FunctionComponent<TypoCompProps>;
 export declare const UI_TAG: React.FunctionComponent<TypoCompProps>;
 export declare const UI_HELPTEXT: React.FunctionComponent<TypoCompProps>;
 export declare const UI_STAT_LG: 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_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = 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;
+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_SEMIBOLD = exports.UI_CAPTION_SEMIBOLD_DF = exports.UI_CAPTION_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = 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");
@@ -117,6 +117,10 @@ var UI_CAPTION_DF = function (props) { return react_1.default.createElement(GenC
 exports.UI_CAPTION_DF = UI_CAPTION_DF;
 var UI_CAPTION_BOLD_DF = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_BOLD_DF_STYLED }); };
 exports.UI_CAPTION_BOLD_DF = UI_CAPTION_BOLD_DF;
+var UI_CAPTION_SEMIBOLD_DF = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_SEMIBOLD_DF_STYLED }); };
+exports.UI_CAPTION_SEMIBOLD_DF = UI_CAPTION_SEMIBOLD_DF;
+var UI_CAPTION_SEMIBOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_SEMIBOLD_STYLED }); };
+exports.UI_CAPTION_SEMIBOLD = UI_CAPTION_SEMIBOLD;
 var UI_TAG = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_TAG_STYLED }); };
 exports.UI_TAG = UI_TAG;
 var UI_HELPTEXT = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HELPTEXT_STYLED }); };

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

@@ -21,6 +21,8 @@ export declare const UI_CAPTION_STYLED: import("styled-components").StyledCompon
 export declare const UI_CAPTION_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_CAPTION_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_CAPTION_BOLD_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const UI_CAPTION_SEMIBOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const UI_CAPTION_SEMIBOLD_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_TAG_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_HELPTEXT_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_STAT_LG_STYLED: import("styled-components").StyledComponent<"h2", 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_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_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;
+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_SEMIBOLD_DF_STYLED = exports.UI_CAPTION_SEMIBOLD_STYLED = exports.UI_CAPTION_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_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
@@ -34,22 +34,24 @@ exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_20 || (
 exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
 exports.UI_CAPTION_DF_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_DF);
 exports.UI_CAPTION_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_BOLD_DF);
-exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
-exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
-exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
-exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+exports.UI_CAPTION_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD);
+exports.UI_CAPTION_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD_DF);
+exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
+exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
+exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
+exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_29 || (templateObject_29 = __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_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
-exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
-exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
-exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
-exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
-exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
-exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
-exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
-exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
-exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
-exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __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  .UI_BODY_BOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_DF {\n    ", "\n  }\n\n  .UI_BODY_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM_DF {\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  .UI_CAPTION_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION_DF {\n    ", "\n  }\n  \n  .UI_CAPTION_BOLD_DF {\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  .UI_BODY_BOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_DF {\n    ", "\n  }\n\n  .UI_BODY_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM_DF {\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  .UI_CAPTION_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION_DF {\n    ", "\n  }\n  \n  .UI_CAPTION_BOLD_DF {\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_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, 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_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, 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, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38;
+exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
+exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
+exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
+exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
+exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
+exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
+exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
+exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
+exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
+exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
+exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __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  .UI_BODY_BOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_DF {\n    ", "\n  }\n\n  .UI_BODY_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM_DF {\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  .UI_CAPTION_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION_DF {\n    ", "\n  }\n  \n  .UI_CAPTION_BOLD_DF {\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  .UI_BODY_BOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_DF {\n    ", "\n  }\n\n  .UI_BODY_SM_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_DF {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM_DF {\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  .UI_CAPTION_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION_DF {\n    ", "\n  }\n  \n  .UI_CAPTION_BOLD_DF {\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_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, 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_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, 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, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40;

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

@@ -22,6 +22,8 @@ export declare const typo: {
     UI_PARAGRAPH_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_CAPTION: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_CAPTION_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+    UI_CAPTION_SEMIBOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+    UI_CAPTION_SEMIBOLD_DF: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_TAG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_HELPTEXT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     UI_STAT_LG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/v2/themes/typo.js

@@ -47,25 +47,27 @@ var UI_CAPTION_DESKTOP = (0, styled_components_1.css)(templateObject_27 || (temp
 var UI_CAPTION_MOBILE = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n"])));
 var UI_CAPTION = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
 var UI_CAPTION_BOLD = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
-var UI_CAPTION_DF = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
-var UI_CAPTION_BOLD_DF = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
-var UI_TAG = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __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_34 || (templateObject_34 = __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_35 || (templateObject_35 = __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_36 || (templateObject_36 = __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_37 || (templateObject_37 = __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_38 || (templateObject_38 = __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_39 || (templateObject_39 = __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_40 || (templateObject_40 = __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_41 || (templateObject_41 = __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_42 || (templateObject_42 = __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_43 || (templateObject_43 = __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_44 || (templateObject_44 = __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_CAPTION_SEMIBOLD = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  font-weight: 500;\n  ", ";\n  ", ";\n\n  ", ";\n"], ["\n  font-weight: 500;\n  ", ";\n  ", ";\n\n  ", ";\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
+var UI_CAPTION_DF = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"], ["\n  font-weight: 400;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
+var UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  font-weight: 500;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"], ["\n  font-weight: 500;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
+var UI_CAPTION_BOLD_DF = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"], ["\n  font-weight: 700;\n  ", ";\n  ", ";\n\n  ", ";\n  \n  ", "{\n    ", ";\n  }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
+var UI_TAG = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __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_36 || (templateObject_36 = __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_37 || (templateObject_37 = __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_38 || (templateObject_38 = __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_39 || (templateObject_39 = __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_40 || (templateObject_40 = __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_41 || (templateObject_41 = __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_42 || (templateObject_42 = __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_43 || (templateObject_43 = __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_44 || (templateObject_44 = __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_45 || (templateObject_45 = __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_46 || (templateObject_46 = __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_45 || (templateObject_45 = __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_46 || (templateObject_46 = __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_47 || (templateObject_47 = __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_48 || (templateObject_48 = __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,
@@ -92,6 +94,8 @@ exports.typo = {
     UI_PARAGRAPH_BOLD: UI_PARAGRAPH_BOLD,
     UI_CAPTION: UI_CAPTION,
     UI_CAPTION_BOLD: UI_CAPTION_BOLD,
+    UI_CAPTION_SEMIBOLD: UI_CAPTION_SEMIBOLD,
+    UI_CAPTION_SEMIBOLD_DF: UI_CAPTION_SEMIBOLD_DF,
     UI_TAG: UI_TAG,
     UI_HELPTEXT: UI_HELPTEXT,
     UI_STAT_LG: UI_STAT_LG,
@@ -107,4 +111,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, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46;
+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, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48;

package/package.json

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

package/dist/v2/components/Buttons/derivedComps/ActionButton.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { ButtonStyledProps } from "../styled";
-export declare const StyledOriginalButton: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;
-export interface ActionButtonInterface extends ButtonStyledProps {
-    value: string;
-}
-export declare const ActionButton: React.FunctionComponent<ActionButtonInterface>;

package/dist/v2/components/Buttons/derivedComps/ActionButton.js

@@ -1,43 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionButton = exports.StyledOriginalButton = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var styled_1 = require("../styled");
-var Typo2_1 = require("../../Typo2");
-exports.StyledOriginalButton = (0, styled_components_1.default)(styled_1.ButtonStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"], ["\n  border-radius: 14px;\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"])));
-var ActionButton = function (_a) {
-    var value = _a.value, props = __rest(_a, ["value"]);
-    return (react_1.default.createElement(exports.StyledOriginalButton, __assign({}, props, { variant: "primary" }), value && react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { semibold: true }, value)));
-};
-exports.ActionButton = ActionButton;
-var templateObject_1;

package/dist/v2/components/Buttons/derivedComps/ClearButton.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { ButtonStyledProps } from "../styled";
-export interface clearButtonInterface extends ButtonStyledProps {
-    value: string;
-}
-export declare const ClearButton: React.FunctionComponent<clearButtonInterface>;

package/dist/v2/components/Buttons/derivedComps/ClearButton.js

@@ -1,36 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClearButton = void 0;
-var react_1 = __importDefault(require("react"));
-var Typo2_1 = require("../../Typo2");
-var ActionButton_1 = require("./ActionButton");
-var ClearButton = function (_a) {
-    var value = _a.value, props = __rest(_a, ["value"]);
-    return (react_1.default.createElement(ActionButton_1.StyledOriginalButton, __assign({}, props, { variant: "secondary" }), value && react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { semibold: true }, value)));
-};
-exports.ClearButton = ClearButton;