oolib 2.161.0 → 2.163.0

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/
 export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
 export { colors as colors2 } from "./v2/themes";
 export { HintsProvider } from "./v2/components/Hints/contextApi";
+export { DateRangePicker as DateRangePicker2 } from "./v2/components/DateRangePicker";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.HintsProvider = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.DateRangePicker2 = exports.HintsProvider = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 var TabBar_1 = require("./v2/components/TabBar");
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -191,5 +191,7 @@ Object.defineProperty(exports, "colors2", { enumerable: true, get: function () {
 // v2 contexts
 var contextApi_1 = require("./v2/components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
+var DateRangePicker_2 = require("./v2/components/DateRangePicker");
+Object.defineProperty(exports, "DateRangePicker2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
 // V2 new ready components
 // export * from './v2/components/TextInputs';

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/Date.stories.d.ts

@@ -0,0 +1,43 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function DateRangePicker_(args: any): import("react").JSX.Element;
+export namespace DateRangePicker_ {
+    namespace argTypes {
+        namespace allowPresentlyOngoing {
+            let name: string;
+        }
+        namespace previousDateOnly {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace futureDateOnly {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace disabled {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace readOnly {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let previousDateOnly_1: boolean;
+        export { previousDateOnly_1 as previousDateOnly };
+        let futureDateOnly_1: boolean;
+        export { futureDateOnly_1 as futureDateOnly };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let allowPresentlyOngoing_1: boolean;
+        export { allowPresentlyOngoing_1 as allowPresentlyOngoing };
+        export let debug: boolean;
+        export let startDateLabel: string;
+        export let endDateLabel: string;
+    }
+}

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

@@ -0,0 +1,61 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker_ = void 0;
+var react_1 = require("react");
+var DateRangePicker_1 = require("../../../v2/components/DateRangePicker");
+exports.default = {
+    title: 'Oolib V 2.0/components/Date',
+};
+var DateRangePicker_ = function (args) {
+    var _a = (0, react_1.useState)([]), dateRange = _a[0], setDateRange = _a[1];
+    var handleDateRangeChange = function (id, newValue) {
+        setDateRange(newValue);
+        // console.log(dateRange)
+    };
+    return (React.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        React.createElement(DateRangePicker_1.DateRangePicker, __assign({}, args, { id: "my-date-range-picker", value: dateRange, onChange: handleDateRangeChange, label: "Date Range Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
+};
+exports.DateRangePicker_ = DateRangePicker_;
+exports.DateRangePicker_.argTypes = {
+    allowPresentlyOngoing: {
+        name: 'Allow Presently Ongoing',
+    },
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+};
+exports.DateRangePicker_.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    allowPresentlyOngoing: true,
+    debug: false,
+    startDateLabel: "",
+    endDateLabel: "",
+};

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