oolib 2.160.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/components/cards/CardContent.stories.d.ts

@@ -7,22 +7,12 @@ declare namespace _default {
                 type: string;
             };
         };
-        highlight: {
-            name: string;
-            control: string;
-            options: string[];
-        };
         desc: {
             name: string;
             control: {
                 type: string;
             };
         };
-        statusTagVariant: {
-            name: string;
-            control: string;
-            options: string[];
-        };
         cardLabel: {
             name: string;
             control: string;
@@ -60,6 +50,16 @@ declare namespace _default {
             name: string;
             control: string;
         };
+        highlight: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        statusTagVariant: {
+            name: string;
+            control: string;
+            options: string[];
+        };
     };
     let args: {
         cardLabel: string;

package/dist/stories/v2/components/cards/ListContent.stories.d.ts

@@ -8,10 +8,6 @@ declare namespace _default {
                 type: string;
             };
         };
-        highlight: {
-            name: string;
-            control: string;
-        };
         cardLabel: {
             name: string;
             control: string;
@@ -49,6 +45,16 @@ declare namespace _default {
             name: string;
             control: string;
         };
+        highlight: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        statusTagVariant: {
+            name: string;
+            control: string;
+            options: string[];
+        };
     };
     let args: {
         cardLabel: string;

package/dist/stories/v2/components/cards/ListContent.stories.js

@@ -24,7 +24,6 @@ var cardArgTypes_1 = require("./utils/cardArgTypes");
 var parseCardArgs_1 = require("./utils/parseCardArgs");
 var Wrappers_1 = require("../../../../components/Wrappers");
 var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
-var Divider_1 = require("../../../../v2/components/Divider");
 exports.default = {
     title: "Oolib V 2.0/Components/ListContent",
     argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.listContentArgTypes),
@@ -46,9 +45,6 @@ var Playground = function (args) {
     var props = (0, parseCardArgs_1.parseCardArgs)(args);
     return (react_1.default.createElement(Container_1.Container, null,
         react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
-            react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { style: { padding: "1px 0" } },
-                    react_1.default.createElement(Divider_1.Divider, null)),
-                react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config })))); })))));
+            react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config }))); })))));
 };
 exports.Playground = Playground;

package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts

@@ -68,44 +68,44 @@ export namespace commonCardArgTypes {
         export { control_6 as control };
     }
     export { metaDate_1 as metaDate };
-}
-export namespace cardContentArgTypes {
-    namespace tagDisplay {
+    export namespace highlight {
         let name_7: string;
         export { name_7 as name };
-        export namespace control_7 {
-            let type: string;
-        }
+        let control_7: string;
         export { control_7 as control };
+        let options_1: string[];
+        export { options_1 as options };
     }
-    namespace highlight {
+    export namespace statusTagVariant {
         let name_8: string;
         export { name_8 as name };
         let control_8: string;
         export { control_8 as control };
-        let options_1: string[];
-        export { options_1 as options };
+        let options_2: string[];
+        export { options_2 as options };
     }
-    namespace desc {
+}
+export namespace cardContentArgTypes {
+    namespace tagDisplay {
         let name_9: string;
         export { name_9 as name };
         export namespace control_9 {
-            let type_1: string;
-            export { type_1 as type };
+            let type: string;
         }
         export { control_9 as control };
     }
-    namespace statusTagVariant {
+    namespace desc {
         let name_10: string;
         export { name_10 as name };
-        let control_10: string;
+        export namespace control_10 {
+            let type_1: string;
+            export { type_1 as type };
+        }
         export { control_10 as control };
-        let options_2: string[];
-        export { options_2 as options };
     }
 }
 export namespace listContentArgTypes {
-    export namespace statusTag {
+    namespace statusTag {
         let name_11: string;
         export { name_11 as name };
         export namespace control_11 {
@@ -114,11 +114,4 @@ export namespace listContentArgTypes {
         }
         export { control_11 as control };
     }
-    export namespace highlight_1 {
-        let name_12: string;
-        export { name_12 as name };
-        let control_12: string;
-        export { control_12 as control };
-    }
-    export { highlight_1 as highlight };
 }

package/dist/stories/v2/components/cards/utils/cardArgTypes.js

@@ -42,35 +42,31 @@ exports.commonCardArgTypes = {
     metaDate: {
         name: "Meta (Date)",
         control: "date",
-    }
-};
-exports.cardContentArgTypes = {
-    tagDisplay: {
-        name: "Status Tag",
-        control: { type: "text" },
     },
     highlight: {
         name: "Highlight",
         control: 'select',
         options: [undefined, 'primary', 'secondary'],
     },
+    statusTagVariant: {
+        name: "Status Tag Variant",
+        control: 'select',
+        options: [undefined, 'primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
+    },
+};
+exports.cardContentArgTypes = {
+    tagDisplay: {
+        name: "Status Tag",
+        control: { type: "text" },
+    },
     desc: {
         name: "Description",
         control: { type: "text" },
     },
-    statusTagVariant: {
-        name: "Status Tag Variant",
-        control: 'select',
-        options: ['primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
-    }
 };
 exports.listContentArgTypes = {
     statusTag: {
         name: "Status Tag",
         control: { type: "text" },
     },
-    highlight: {
-        name: "Highlight",
-        control: 'boolean',
-    },
 };

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>;