oolib 2.239.0 → 3.0.0

package/dist/components/Accordion/index.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 var framer_motion_1 = require("framer-motion");
 var react_1 = __importStar(require("react"));
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var Typo_1 = require("../Typo");
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");

package/dist/components/ActionMenu/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from "react";
-import * as ButtonComps from "../Buttons";
+import * as ButtonComps from "../../v2/components/Buttons";
 export interface ActionItem {
     display: string;
     icon?: string;

package/dist/components/ActionMenu/index.js

@@ -46,7 +46,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionMenu = void 0;
 var react_1 = __importStar(require("react"));
-var ButtonComps = __importStar(require("../Buttons"));
+var ButtonComps = __importStar(require("../../v2/components/Buttons"));
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOutside");
@@ -154,7 +154,7 @@ var ActionMenu = function (_a) {
             } },
             react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
                     setShowActions(!showActions);
-                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
+                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, stopPropagation: true, preventDefault: true, onClick: function (e) {
                 setShowActions(!showActions);
             }, active: showActions })))),
         popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),

package/dist/components/DatePicker/index.js

@@ -53,7 +53,7 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
 var handlePos_1 = require("./utils/handlePos");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var mixins_1 = require("../../themes/mixins");
 var Modal_1 = require("../Modals/Modal");
 var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
@@ -251,10 +251,10 @@ function DatePicker(props) {
         setRange(item);
     };
     var wrapCaretLeft = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer" } }));
     }, [value, invert]);
     var wrapCaretRight = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer" } }));
     }, [value, invert]);
     var getReadOnlyDate = function () {
         var dateObj = new Date(value);

package/dist/components/HomeCover/index.js

@@ -49,7 +49,7 @@ var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 // import { useScreenWidth } from "../../utils/customHooks/useScreenWidth";
 var toArray_1 = require("../../utils/toArray");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var mixins_1 = require("../../themes/mixins");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");

package/dist/components/ImageInput/comps/ImageEditor/comps/EditToolbar/index.js

@@ -49,7 +49,7 @@ var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var changesMadeToUnderEditImageData_1 = require("../../utils/changesMadeToUnderEditImageData");
 var themes_1 = require("../../../../../../themes");
-var Buttons_1 = require("../../../../../Buttons");
+var Buttons_1 = require("../../../../../../v2/components/Buttons");
 /**
  * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
  */
@@ -68,14 +68,14 @@ function EditToolbar(_a) {
                 gap: "0.5rem",
             } },
             !omitEditorTools.includes('cover_contain') &&
-                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, S: true, iconSize: "M", onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, iconSize: "M", onClick: function () {
                         return setUnderEditImageData(function (prev) {
                             var spreadToSet = imageSpread === "cover" ? "contain" : "cover";
                             return __assign(__assign(__assign({}, prev), { imageSpread: spreadToSet }), (spreadToSet === "contain" ? { cropX: 0, cropY: 0 } : {}));
                         });
                     }, icon: imageSpread === "cover" ? "ArrowsIn" : "ArrowsOut" }),
             !omitEditorTools.includes('rotate') &&
-                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "ArrowsClockwise", iconSize: "M", S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "ArrowsClockwise", iconSize: "M", onClick: function () {
                         setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { imageRotate: ((prev.imageRotate || 0) + 90) % 360 })); });
                     } })),
         react_1.default.createElement("div", { style: {
@@ -87,10 +87,10 @@ function EditToolbar(_a) {
                 underEditImageData: underEditImageData,
                 defaultImageSpread: defaultImageSpread,
             }) && (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { invert: true, S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () {
                         setUnderEditImageData((0, lodash_1.cloneDeep)(imageData));
                     } }, "Revert"),
-                react_1.default.createElement(Buttons_1.ButtonPrimary, { invert: true, S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: function () {
                         handleSingleImageDataChange({
                             publicUrl: publicUrl,
                             imageData: __assign(__assign({}, underEditImageData), { caption: imageData.caption //cuz caption edits are made directly to imageData and we dont want underEditImageData to overwrite that.
@@ -99,7 +99,7 @@ function EditToolbar(_a) {
                         setUnderEditImageData(undefined);
                         setImageUnderEdit && setImageUnderEdit(false);
                     } }, "Save"))),
-            react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "X", S: true, onClick: function () {
+            react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "X", onClick: function () {
                     setUnderEditImageData(undefined);
                 } }))));
 }

package/dist/components/Modals/ModalConfirm/index.js

@@ -38,7 +38,7 @@ var react_1 = __importStar(require("react"));
 var react_dom_1 = require("react-dom");
 var mixins_1 = require("../../../themes/mixins");
 var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
-var Buttons_1 = require("../../Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("./styled");
 /**
@@ -70,7 +70,7 @@ var ModalConfirm = function (_a) {
     var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
     var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
         onClose && (react_1.default.createElement(styled_1.StyledModalConfirmClose, null,
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
         react_1.default.createElement(styled_1.StyledModalConfirmContent, null,
             title && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),

package/dist/components/PDFInput/index.js

@@ -66,7 +66,7 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var bannerContext_1 = require("../Banners/bannerContext");
 var PDFEmbed_1 = __importDefault(require("./comps/PDFEmbed"));
 var react_2 = require("react");
@@ -119,7 +119,7 @@ function PDFInput(_a) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
         (readOnly && value) ? (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement(PDFEmbed_1.default, { key: i, filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation })); }))
             : !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: "18rem", isLoading: isLoading, mediaType: "pdf", handleUpload: handleUpload, onChange: parentOnChange, uploadProgress: uploadProgress, enableClickUpload: false },
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf" }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
                 react_1.default.createElement(PDFEmbed_1.default, { filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation }),
                 react_1.default.createElement(StyledActionsButtonWrapper, null,
                     react_1.default.createElement(PDFActions_1.PDFActions, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange })))); })),

package/dist/components/TabBar/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
 var useScrollBar_1 = require("../../utils/customHooks/useScrollBar");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var index_styled_1 = require("./index.styled");
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
@@ -31,7 +31,7 @@ var Base = function (_a) {
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
             react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
                     var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
@@ -42,7 +42,7 @@ var Base = function (_a) {
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
 };
 var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
 exports.TabBarStyle1 = TabBarStyle1;

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -37,7 +37,7 @@ exports.EmbedLinkModal = void 0;
 var react_1 = __importStar(require("react"));
 var Modal_1 = require("../../Modals/Modal");
 var Paddings_1 = require("../../Paddings");
-var Buttons_1 = require("../../Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var styled_1 = require("../styled");
 var utils_1 = require("../utils");
 var TextInputs_1 = require("../../../v2/components/TextInputs");

package/dist/components/VideoInput/index.js

@@ -52,7 +52,7 @@ var styled_components_1 = require("styled-components");
 var react_player_1 = __importDefault(require("react-player"));
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var styled_1 = require("./styled");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var Typo_1 = require("../Typo");
 var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
 var themes_1 = require("../../themes");
@@ -146,10 +146,10 @@ function VideoInput(_a) {
             (value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) :
                 react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, enableClickUpload: false, mediaType: 'video', handleUpload: handleUpload },
                     react_1.default.createElement(styled_1.StyledInnerWrapper, null,
-                        react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }, invert: invert }),
+                        react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); } }),
                         enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
                             react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
-                            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
+                            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", id: "videoField" }))))),
         showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview, onChange: onChange, id: id, invert: invert })),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) {

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { GlobalStyles } from "./globalStyles";
 export * from "./themes/mixins";
 export * from "./components/Typo";
 export * from "./globalStyles/globalVariables";
-export * from "./components/Buttons";
 export * from "./components/Breadcrumbs";
 export * from "./components/InlineAlert";
 export * from "./components/Container";
@@ -30,7 +29,6 @@ export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
-export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
 export { default as DatePicker } from "./components/DatePicker";
@@ -83,7 +81,7 @@ export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
 export { TextInput, EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput } from "./v2/components/TextInputs";
-export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
+export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2, TagSelect as TagSelectV2 } from "./v2/components/Tags";
 export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact, ButtonGhostCompact, ButtonUpload } from "./v2/components/Buttons";
 export { colors as colors2, typo as typoV2_CSS } from "./v2/themes";
 export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";

package/dist/index.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = 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.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = exports.BannerProvider = void 0;
+exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = 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.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagSelectV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = void 0;
 exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -60,7 +60,6 @@ var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
 var LoadersAndProgress_2 = require("./components/LoadersAndProgress");
 Object.defineProperty(exports, "LoaderOverlay", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderOverlay; } });
-__exportStar(require("./components/Buttons"), exports);
 var Tags_1 = require("./components/Tags");
 Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return Tags_1.TagClear; } });
 Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return Tags_1.TagLink; } });
@@ -101,8 +100,6 @@ var ModalSmall_1 = require("./components/Modals/derivedComps/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");
 Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
-var HomeCover_1 = require("./components/HomeCover");
-Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
 Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
 var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
@@ -202,6 +199,7 @@ var Tags_2 = require("./v2/components/Tags");
 Object.defineProperty(exports, "TagDisplayV2", { enumerable: true, get: function () { return Tags_2.TagDisplay; } });
 Object.defineProperty(exports, "TagLinkV2", { enumerable: true, get: function () { return Tags_2.TagLink; } });
 Object.defineProperty(exports, "TagClearV2", { enumerable: true, get: function () { return Tags_2.TagClear; } });
+Object.defineProperty(exports, "TagSelectV2", { enumerable: true, get: function () { return Tags_2.TagSelect; } });
 var Buttons_1 = require("./v2/components/Buttons");
 Object.defineProperty(exports, "ButtonPrimaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonPrimary; } });
 Object.defineProperty(exports, "ButtonSecondaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonSecondary; } });
@@ -221,8 +219,8 @@ var MetaBlock_2 = require("./v2/components/MetaBlock");
 Object.defineProperty(exports, "MetaBlockV2", { enumerable: true, get: function () { return __importDefault(MetaBlock_2).default; } });
 var DateRangePicker_2 = require("./v2/components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
-var HomeCover_2 = require("./v2/components/HomeCover");
-Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
+var HomeCover_1 = require("./v2/components/HomeCover");
+Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 //V2 data viz comps
 var Accordion_2 = require("./v2/components/Accordion");
 Object.defineProperty(exports, "AccordionV2", { enumerable: true, get: function () { return Accordion_2.Accordion; } });

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

@@ -18,7 +18,7 @@ exports.HomeCover_ = void 0;
 var react_1 = __importDefault(require("react"));
 var HomeCover_1 = require("../../../components/HomeCover");
 var Typo_1 = require("../../../components/Typo");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 exports.default = {
     title: "Components/HomeCover",
     argTypes: {

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal_Confirm_Action = void 0;
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var ModalConfirmAction_1 = require("../../../components/Modals/derivedComps/ModalConfirmAction");
 var Banners_1 = require("../../../components/Banners");
 var react_1 = require("react");

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

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var react_1 = __importDefault(require("react"));
 var Tooltip_1 = require("../../../components/Tooltip");
-// import { ButtonPrimary } from '../components/Buttons';
 var themes_1 = require("../../../themes");
 var icons_1 = require("../../../icons");
 var Info = icons_1.icons.Info;

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

@@ -39,7 +39,7 @@ var Typo_1 = require("../../../components/Typo");
 var contextApi_1 = require("./contextApi");
 var colors_1 = require("../../themes/colors");
 var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../Buttons");
 var Modal_1 = require("../../../components/Modals/Modal");
 var mixins_1 = require("../../../themes/mixins");
 var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");

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

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
 var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../Buttons");
 var index_styled_1 = require("./index.styled");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var mixins_1 = require("../../../themes/mixins");
@@ -48,7 +48,7 @@ var Base = function (_a) {
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
             react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText, tabBarStyle: tabBarStyle }, options.map(function (op) {
                     var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
@@ -69,7 +69,7 @@ var Base = function (_a) {
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
 };
 var TabBarStyle1 = function (props) {
     var _a = props.placeholder, placeholder = _a === void 0 ? 'Select An Option' : _a;

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

@@ -29,8 +29,8 @@ var mixins_1 = require("../../../../../themes/mixins");
 var white = themes_1.colors.white;
 var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
 var TagDisplay = function (_a) {
-    var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
-    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: STYLED_UI_TAG_DF }));
+    var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
+    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: STYLED_UI_TAG_DF }));
 };
 exports.TagDisplay = TagDisplay;
 var templateObject_1;

package/dist/v2/components/Tags/Comps/TagSelect/index.d.ts

@@ -14,6 +14,7 @@ export interface TagSelectInterface {
     isSelected?: boolean;
     disabled?: boolean;
     icon?: string;
+    badgeColor?: string;
     weight?: "bold" | "light" | "default";
     colorPreset?: TagColorPreset;
     color?: TagSelectColor;

package/dist/v2/components/Tags/Comps/TagSelect/index.js

@@ -45,12 +45,12 @@ var colorFromPreset = function (colorPreset) {
  * Selected   → `fill` background, `textOnFill` text, `fill` border.
  */
 var TagSelect = function (_a) {
-    var id = _a.id, display = _a.display, value = _a.value, _b = _a.size, size = _b === void 0 ? "S" : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, icon = _a.icon, weight = _a.weight, colorPreset = _a.colorPreset, color = _a.color, onClick = _a.onClick, style = _a.style;
+    var id = _a.id, display = _a.display, value = _a.value, _b = _a.size, size = _b === void 0 ? "S" : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, icon = _a.icon, badgeColor = _a.badgeColor, weight = _a.weight, colorPreset = _a.colorPreset, color = _a.color, onClick = _a.onClick, style = _a.style;
     var base = colorPreset ? colorFromPreset(colorPreset) : DEFAULT_COLOR;
     var c = __assign(__assign({}, base), (color || {}));
     return (react_1.default.createElement(styled_1.StyledTagSelect, { bgColor: isSelected ? c.fill : "transparent", borderColor: isSelected ? c.fill : c.outline, disabled: disabled, onClick: function () {
             return !disabled && onClick && onClick({ display: display, value: value, isSelected: !isSelected });
         }, style: style },
-        react_1.default.createElement(TagDisplay_1.TagDisplay, { id: id, display: display, size: size, icon: icon, weight: weight, tagColor: "transparent", textColor: isSelected ? c.textOnFill : c.text })));
+        react_1.default.createElement(TagDisplay_1.TagDisplay, { id: id, display: display, size: size, icon: icon, badgeColor: badgeColor, weight: weight, tagColor: "transparent", textColor: isSelected ? c.textOnFill : c.text })));
 };
 exports.TagSelect = TagSelect;

package/package.json

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

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

@@ -1,75 +0,0 @@
-import React from "react";
-import { To } from "react-router-dom";
-export interface DisplayIconProps {
-    icon: string;
-    size: number;
-    color?: string;
-    iconWeight?: string;
-}
-export interface ButtonProps {
-    id?: string;
-    link?: {
-        val: To;
-        displayText?: string;
-    };
-    children?: React.ReactNode;
-    value?: string;
-    submit?: boolean;
-    icon?: string;
-    iconAfter?: string;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    active?: boolean;
-    disabled?: boolean;
-    invert?: boolean;
-    theme?: string;
-    width?: string;
-    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    color?: string;
-    style?: React.CSSProperties;
-    className?: string;
-    S?: boolean;
-    M?: boolean;
-    iconSize?: number | "S" | "M";
-    iconColor?: string;
-    iconWeight?: string;
-    stopPropagation?: boolean;
-    preventDefault?: boolean;
-    forceHover?: boolean;
-}
-export interface ButtonStyledWrapperProps {
-    props: ButtonProps;
-    variant?: string;
-}
-export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;
-export declare const ButtonSecondary: React.FunctionComponent<ButtonProps>;
-export declare const ButtonCustom: React.FunctionComponent<ButtonProps>;
-export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
-export interface GoogleLoginProps {
-    theme?: string;
-    S?: boolean;
-    disabled?: boolean;
-    width?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    value?: string;
-    children?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-/**
- * Renders a Google login button component.
- *
- * @props - The props for the Google login button component.
- * @prop {string} props.theme - The theme for the button.
- * @prop {string} props.S - The size of the button.
- * @prop {boolean} props.disabled - Whether the button is disabled or not.
- * @prop {string} props.width - The width of the button.
- * @prop {string} props.className - The class name of the button.
- * @prop {React.CSSProperties} props.style - The inline style of the button.
- * @prop {string} props.value - The value of the button.
- * @prop {React.ReactNode} props.children - The children of the button.
- * @prop {Function} props.onClick - The click event handler for the button.
- * @return {React.ReactNode} The rendered Google login button component.
- */
-export declare const GoogleLogin: React.FunctionComponent<GoogleLoginProps>;

package/dist/components/Buttons/index.js

@@ -1,107 +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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GoogleLogin = exports.ButtonGhost = exports.ButtonCustom = 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");
-var lodash_1 = require("lodash");
-var Typo_1 = require("../Typo");
-var icons_1 = require("../../icons");
-var themes_1 = require("../../themes");
-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(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: iconWeight || 'bold' }));
-};
-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, invert = props.invert, 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 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);
-    var composition = (icon || iconAfter) && displayText
-        ? "icon+text"
-        : !displayText
-            ? "iconOnly"
-            : "textOnly";
-    var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
-        ? (S && 'S') || 'M'
-        : (M && 'M') || 'S';
-    var calcIconSize = function () {
-        var thisSize = iconSize || size;
-        return thisSize === 'S' ? 15 : 20;
-    };
-    var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
-    return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
-            stopPropagation && e.stopPropagation();
-            preventDefault && e.preventDefault();
-            debouncedOnClick && debouncedOnClick(e);
-        }, onMouseDown: function (e) {
-            stopPropagation && e.stopPropagation();
-            preventDefault && e.preventDefault();
-            debouncedMouseDown && debouncedMouseDown(e);
-        }, composition: composition, width: width, color: color, forceHover: forceHover },
-        icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' }),
-        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
-        iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' })));
-};
-/**
- * Generates a Button component based on the provided props and variant.
- *
- * @prop { ButtonProps } props - The properties for the Button component
- * @prop { string } variant - The variant of the Button component
- * @return { ReactNode } The Button component to be rendered
- */
-var Button = function (_a) {
-    var props = _a.props, variant = _a.variant;
-    var link = props.link, onClick = props.onClick;
-    var buttonAction = link ? function () { return null; } : onClick;
-    return link ? (react_1.default.createElement(react_router_dom_1.Link, { to: link.val },
-        react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }))) : (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
-};
-var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "primary" })); };
-exports.ButtonPrimary = ButtonPrimary;
-var ButtonSecondary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "secondary" })); };
-exports.ButtonSecondary = ButtonSecondary;
-var ButtonCustom = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "custom" })); };
-exports.ButtonCustom = ButtonCustom;
-var ButtonGhost = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "ghost" })); };
-exports.ButtonGhost = ButtonGhost;
-/**
- * Renders a Google login button component.
- *
- * @props - The props for the Google login button component.
- * @prop {string} props.theme - The theme for the button.
- * @prop {string} props.S - The size of the button.
- * @prop {boolean} props.disabled - Whether the button is disabled or not.
- * @prop {string} props.width - The width of the button.
- * @prop {string} props.className - The class name of the button.
- * @prop {React.CSSProperties} props.style - The inline style of the button.
- * @prop {string} props.value - The value of the button.
- * @prop {React.ReactNode} props.children - The children of the button.
- * @prop {Function} props.onClick - The click event handler for the button.
- * @return {React.ReactNode} The rendered Google login button component.
- */
-var GoogleLogin = function (props) {
-    var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children, onClick = props.onClick;
-    var displayText = value || children || "Sign up with Google";
-    var size = (S && "S") || "M";
-    return (react_1.default.createElement(styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: onClick, variant: "googleAuth", theme: theme, style: style, className: className },
-        react_1.default.createElement(DisplayIcon, { icon: "OkeGoogleIcon", size: 24 }),
-        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
-};
-exports.GoogleLogin = GoogleLogin;

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

@@ -1,33 +0,0 @@
-export interface HoverStylingProps {
-    invert?: boolean;
-    active?: boolean;
-    theme: {
-        colors: any;
-    };
-}
-export interface ButtonVariantProps {
-    invert?: boolean;
-    disabled?: boolean;
-    color?: string;
-    forceHover?: boolean;
-    theme: {
-        colors: string[];
-    };
-    active?: boolean;
-}
-export interface ButtonGhostProps extends ButtonVariantProps {
-    composition?: string;
-}
-export interface GoogleButtonProps {
-    disabled?: boolean;
-}
-export interface ButtonStyledProps {
-    size: string;
-    width?: string;
-    variant: string;
-    active?: boolean;
-    invert?: boolean;
-    composition?: string;
-    forceHover?: boolean;
-}
-export declare const ButtonStyled: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;

package/dist/components/Buttons/styled.js

@@ -1,231 +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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonStyled = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../themes/colors");
-var mixins_1 = require("../../themes/mixins");
-var utilsOolib_1 = require("../../utilsOolib");
-var greyColor100 = colors_1.colors.greyColor100, greyColor90 = colors_1.colors.greyColor90, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, greyColor10 = colors_1.colors.greyColor10, white = colors_1.colors.white, none = colors_1.colors.none;
-//sizes
-var SIZES = {
-    S: "3rem",
-    M: "4rem",
-};
-var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
-        : (0, utilsOolib_1.getPrimaryColor40)(colors);
-}, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? greyColor100
-        : (0, utilsOolib_1.getPrimaryColorText)(colors);
-});
-var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
-    return active
-        ? ""
-        : invert
-            ? greyColor80
-            : (0, utilsOolib_1.getPrimaryColor40)(colors);
-});
-var hoverStylingCustom = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? greyColor80
-        : (0, utilsOolib_1.getPrimaryColor40)(colors);
-});
-var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
-    var invert = _a.invert, active = _a.active;
-    return active
-        ? ""
-        : invert
-            ? greyColor80
-            : greyColor10;
-});
-var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: none;\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", "  \n \n @media (hover: hover) {\n   &:hover {\n     ", "\n   }\n }\n"], ["\n border: none;\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", "  \n \n @media (hover: hover) {\n   &:hover {\n     ", "\n   }\n }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor100 : white;
-}, function (_a) {
-    var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n     color: ", ";\n   "], ["\n     color: ", ";\n   "])), color);
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n     background-color: ", ";\n     color: ", ";\n     pointer-events: none;\n   "], ["\n     background-color: ", ";\n     color: ", ";\n     pointer-events: none;\n   "])), function (_a) {
-        var invert = _a.invert;
-        return invert ? greyColor70 : greyColor15;
-    }, greyColor40);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingPrimary;
-}, hoverStylingPrimary);
-var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border: 2px solid\n   ", ";\n background-color: ", ";\n\n color: ", "; \n ", "\n ", "\n ", "\n\n   ", "  \n\n   @media (hover: hover) {\n     &:hover {\n       ", "\n   }\n }\n"], ["\n border: 2px solid\n   ", ";\n background-color: ", ";\n\n color: ", "; \n ", "\n ", "\n ", "\n\n   ", "  \n\n   @media (hover: hover) {\n     &:hover {\n       ", "\n   }\n }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor100 : white;
-}, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColorText)(colors);
-}, function (_a) {
-    var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n     color: ", ";\n   "], ["\n     color: ", ";\n   "])), color);
-}, function (_a) {
-    var active = _a.active;
-    return active && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n     background-color: ", ";\n     color: ", ";\n   "], ["\n     background-color: ", ";\n     color: ", ";\n   "])), function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return invert ?
-            (0, utilsOolib_1.getPrimaryColor40)(colors)
-            :
-                (0, utilsOolib_1.getPrimaryColor10)(colors);
-    }, function (_a) {
-        var colors = _a.theme.colors;
-        return (0, utilsOolib_1.getPrimaryColorText)(colors);
-    });
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n     background-color: ", ";\n     border: 2px solid ", ";\n     color: ", "; \n     pointer-events: none;\n   "], ["\n     background-color: ", ";\n     border: 2px solid ", ";\n     color: ", "; \n     pointer-events: none;\n   "])), function (_a) {
-        var invert = _a.invert;
-        return invert ? greyColor80 : white;
-    }, greyColor15, greyColor40);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingSecondary;
-}, hoverStylingSecondary);
-var ButtonCustom = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: 2px solid\n   ", ";\n box-shadow: -4px 4px 1px\n   ", ";\n   \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n\n ", "  \n\n @media (hover: hover) {\n   &:hover {\n     ", "\n   }\n }\n"], ["\n border: 2px solid\n   ", ";\n box-shadow: -4px 4px 1px\n   ", ";\n   \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n\n ", "  \n\n @media (hover: hover) {\n   &:hover {\n     ", "\n   }\n }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor100 : white;
-}, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : (0, utilsOolib_1.getPrimaryColorText)(colors);
-}, function (_a) {
-    var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n     color: ", ";\n     border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n     box-shadow: -4px 4px 1px ", ";\n     pointer-events: none;\n     background-color: ", "; \n   "], ["\n     color: ", ";\n     border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n     box-shadow: -4px 4px 1px ", ";\n     pointer-events: none;\n     background-color: ", "; \n   "])), greyColor40, function (_a) {
-        var invert = _a.invert;
-        return (invert ? greyColor40 : greyColor15);
-    }, greyColor40, function (_a) {
-        var invert = _a.invert;
-        return invert ? greyColor80 : white;
-    });
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingCustom;
-}, hoverStylingCustom);
-var ButtonGhost = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n ", "\n ", "\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 ", "  \n \n @media (hover: hover) {\n   &:hover {\n     ", "\n   }\n }\n"])), function (_a) {
-    var active = _a.active, colors = _a.theme.colors;
-    return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : none;
-}, function (_a) {
-    var invert = _a.invert, composition = _a.composition, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
-        : composition === "iconOnly"
-            ? greyColor100
-            : (0, utilsOolib_1.getPrimaryColorText)(colors);
-}, function (_a) {
-    var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n     color: ", ";\n   "], ["\n     color: ", ";\n   "])), color);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n     background-color: ", ";\n   "], ["\n     background-color: ", ";\n   "])), function (_a) {
-        var active = _a.active;
-        return active ? greyColor80 : greyColor100;
-    });
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n     color: ", "; //$greyColor40;\n     pointer-events: none;\n   "], ["\n     color: ", "; //$greyColor40;\n     pointer-events: none;\n   "])), greyColor40);
-}, function (_a) {
-    var forceHover = _a.forceHover;
-    return forceHover && hoverStylingGhost;
-}, hoverStylingGhost);
-var GoogleButton = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: #4285f4;\n border: 2px solid #4285f4;\n background-color: ", ";\n ", "\n"], ["\n color: #4285f4;\n border: 2px solid #4285f4;\n background-color: ", ";\n ", "\n"])), white, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n     pointer-events: none;\n   "], ["\n     pointer-events: none;\n   "])));
-});
-var buttonVariantSetting = {
-    primary: ButtonPrimary,
-    secondary: ButtonSecondary,
-    ghost: ButtonGhost,
-    custom: ButtonCustom,
-    googleAuth: GoogleButton,
-};
-exports.ButtonStyled = styled_components_1.default.button(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled {\n   cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled {\n   cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"])), function (_a) {
-    var composition = _a.composition, size = _a.size;
-    switch (composition) {
-        case "iconOnly":
-            return (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n         padding: 0;\n         height: ", ";\n         width: ", ";\n         flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n       "], ["\n         padding: 0;\n         height: ", ";\n         width: ", ";\n         flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n       "])), SIZES[size], SIZES[size]);
-        case "icon+text":
-            return (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n         padding: 0 2rem 0 1.5rem;\n         height: ", ";\n       "], ["\n         padding: 0 2rem 0 1.5rem;\n         height: ", ";\n       "])), SIZES[size]);
-        default:
-            return (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n         padding: 0 2rem;\n         height: ", ";\n       "], ["\n         padding: 0 2rem;\n         height: ", ";\n       "])), SIZES[size]);
-    }
-}, function (_a) {
-    var width = _a.width;
-    return width && (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n     width: ", ";\n   "], ["\n     width: ", ";\n   "])), width);
-}, (0, mixins_1.transition)("background-color"), function (_a) {
-    var variant = _a.variant;
-    return buttonVariantSetting[variant];
-});
-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;

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

@@ -1,197 +0,0 @@
-declare namespace _default {
-    let title: string;
-    namespace argTypes {
-        namespace size {
-            let name: string;
-            let options: string[];
-            namespace mapping {
-                let Small: string;
-                let Medium: string;
-            }
-            namespace control {
-                let type: string;
-            }
-        }
-        namespace icon {
-            let name_1: string;
-            export { name_1 as name };
-            export { availableIcons as options };
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-            export let defaultValue: string;
-        }
-        namespace iconAfter {
-            let name_2: string;
-            export { name_2 as name };
-            export { availableIcons as options };
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-        }
-        namespace iconSize {
-            let name_3: string;
-            export { name_3 as name };
-            let options_1: string[];
-            export { options_1 as options };
-            export namespace mapping_1 {
-                let Small_1: string;
-                export { Small_1 as Small };
-                let Medium_1: string;
-                export { Medium_1 as Medium };
-            }
-            export { mapping_1 as mapping };
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-        namespace iconColor {
-            let name_4: string;
-            export { name_4 as name };
-            export { availableColors as options };
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_4 as control };
-        }
-        namespace composition {
-            let name_5: string;
-            export { name_5 as name };
-            let options_2: string[];
-            export { options_2 as options };
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-            }
-            export { control_5 as control };
-            let defaultValue_1: string;
-            export { defaultValue_1 as defaultValue };
-        }
-        namespace variant {
-            let name_6: string;
-            export { name_6 as name };
-            export namespace control_6 {
-                let type_6: string;
-                export { type_6 as type };
-            }
-            export { control_6 as control };
-            let options_3: string[];
-            export { options_3 as options };
-            let defaultValue_2: string;
-            export { defaultValue_2 as defaultValue };
-        }
-        namespace children {
-            let name_7: string;
-            export { name_7 as name };
-        }
-        namespace invert {
-            let name_8: string;
-            export { name_8 as name };
-        }
-        namespace disabled {
-            let name_9: string;
-            export { name_9 as name };
-        }
-    }
-    namespace args {
-        let size_1: string;
-        export { size_1 as size };
-        let variant_1: string;
-        export { variant_1 as variant };
-        let composition_1: string;
-        export { composition_1 as composition };
-        let children_1: string;
-        export { children_1 as children };
-        let icon_1: string;
-        export { icon_1 as icon };
-        let iconAfter_1: any;
-        export { iconAfter_1 as iconAfter };
-        let iconSize_1: string;
-        export { iconSize_1 as iconSize };
-        let iconColor_1: any;
-        export { iconColor_1 as iconColor };
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        let invert_1: boolean;
-        export { invert_1 as invert };
-    }
-    namespace parameters {
-        namespace docs {
-            export { ButtonDocs as page };
-        }
-    }
-}
-export default _default;
-export function Button_Primary(args: any): React.JSX.Element;
-export namespace Button_Primary {
-    export namespace parameters_1 {
-        namespace controls {
-            let exclude: string[];
-        }
-    }
-    export { parameters_1 as parameters };
-}
-export function Button_Secondary(args: any): React.JSX.Element;
-export namespace Button_Secondary {
-    export namespace parameters_2 {
-        export namespace controls_1 {
-            let exclude_1: string[];
-            export { exclude_1 as exclude };
-        }
-        export { controls_1 as controls };
-    }
-    export { parameters_2 as parameters };
-    export namespace args_1 {
-        let active: boolean;
-    }
-    export { args_1 as args };
-}
-export function Button_Ghost(args: any): React.JSX.Element;
-export namespace Button_Ghost {
-    export namespace args_2 {
-        let active_1: boolean;
-        export { active_1 as active };
-    }
-    export { args_2 as args };
-    export namespace parameters_3 {
-        export namespace controls_2 {
-            let exclude_2: string[];
-            export { exclude_2 as exclude };
-        }
-        export { controls_2 as controls };
-    }
-    export { parameters_3 as parameters };
-}
-export function Button_Custom(args: any): React.JSX.Element;
-export namespace Button_Custom {
-    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 Google_Login(args: any): React.JSX.Element;
-export namespace Google_Login {
-    export namespace parameters_5 {
-        export namespace controls_4 {
-            let exclude_4: string[];
-            export { exclude_4 as exclude };
-        }
-        export { controls_4 as controls };
-    }
-    export { parameters_5 as parameters };
-}
-declare const availableIcons: string[];
-declare const availableColors: string[];
-import ButtonDocs from "./Buttons.mdx";
-import React from "react";

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

@@ -1,161 +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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Google_Login = exports.Button_Custom = exports.Button_Ghost = exports.Button_Secondary = exports.Button_Primary = void 0;
-var react_1 = __importDefault(require("react"));
-var Buttons_1 = require("../../../components/Buttons");
-var Buttons_mdx_1 = __importDefault(require("./Buttons.mdx"));
-var icons_1 = require("../../../icons");
-var themes_1 = require("../../../themes");
-var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
-var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
-exports.default = {
-    title: "Components/Buttons",
-    argTypes: {
-        size: {
-            name: "Button Size",
-            options: ["Small", "Medium"],
-            mapping: {
-                Small: "S",
-                Medium: "M",
-            },
-            control: { type: "inline-radio" },
-        },
-        icon: {
-            name: "Icon Before",
-            options: availableIcons,
-            control: { type: "select" },
-            defaultValue: "PencilSimple",
-        },
-        iconAfter: {
-            name: "Icon After",
-            options: availableIcons,
-            control: { type: "select" },
-        },
-        iconSize: {
-            name: "Icon Size",
-            options: ["Small", "Medium"],
-            mapping: {
-                Small: "S",
-                Medium: "M",
-            },
-            control: { type: "inline-radio" },
-        },
-        iconColor: {
-            name: "Icon Color",
-            options: availableColors,
-            control: { type: "select" },
-        },
-        composition: {
-            name: "Button Compostion",
-            options: ["Default", "Text-only", "Icon-only"],
-            control: { type: "select" },
-            defaultValue: "Default",
-        },
-        variant: {
-            name: "Button Type",
-            control: { type: "select" },
-            options: ["secondary", "primary", "ghost", "custom"],
-            defaultValue: "secondary",
-        },
-        children: {
-            name: "Text",
-        },
-        invert: {
-            name: "Invert",
-        },
-        disabled: {
-            name: "Disabled",
-        },
-    },
-    args: {
-        size: "Small",
-        variant: "secondary",
-        composition: "Default",
-        children: "Text",
-        icon: "PencilSimple",
-        iconAfter: undefined,
-        iconSize: "Small",
-        iconColor: undefined,
-        disabled: false,
-        invert: false,
-    },
-    parameters: {
-        docs: {
-            page: Buttons_mdx_1.default,
-        },
-    },
-};
-var GenButtonStory = function (_a) {
-    var args = _a.args, Comp = _a.Comp;
-    console.log(args.composition);
-    args[args["size"]] = true;
-    args[args["state"]] = true;
-    args.iconColor = themes_1.colors[args.iconColor];
-    args["onClick"] = function () { return console.log("clicked"); };
-    if (args.composition === "Text-only") {
-        delete args.icon;
-        delete args.iconAfter;
-    }
-    if (args.composition === "Icon-only") {
-        delete args["children"];
-    }
-    args["theme"] = {
-        colors: {
-            primaryColor40: "#addbff",
-            primaryColor100: "#33a4ff",
-            primaryColor10: "#EBF6FF",
-            primaryColorText: "#0071CC",
-        },
-    };
-    return (react_1.default.createElement("div", { style: {
-            backgroundColor: args.invert ? "#383838" : "",
-            padding: "20px",
-        } },
-        react_1.default.createElement(Comp, __assign({}, args))));
-};
-var Button_Primary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimary })); };
-exports.Button_Primary = Button_Primary;
-exports.Button_Primary.parameters = { controls: { exclude: ["variant", "color"] } };
-var Button_Secondary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondary })); };
-exports.Button_Secondary = Button_Secondary;
-exports.Button_Secondary.parameters = { controls: { exclude: ["variant", "color"] } };
-exports.Button_Secondary.args = {
-    active: false,
-};
-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"] } };
-var Button_Custom = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonCustom })); };
-exports.Button_Custom = Button_Custom;
-exports.Button_Custom.parameters = { controls: { exclude: ["variant", "color"] } };
-var Google_Login = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.GoogleLogin })); };
-exports.Google_Login = Google_Login;
-exports.Google_Login.parameters = {
-    controls: { exclude: ["variant", "color", "iconOnly", "icon + text"] },
-};