oolib 2.137.1 → 2.139.0

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

@@ -57,10 +57,7 @@ var OptionsAnimateWrapper = function (_a) {
         });
     }, [options.length]);
     return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { zIndex: 100000 }), (fixPos
-            ? __assign({ position: "fixed", top: "".concat(fixPos.y -
-                    (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
-                ? { transform: "translateY(-100%)" }
-                : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? __assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
             ? { bottom: 0, transform: "translateY(100%)" }
             : { top: 0, transform: "translateY(-100%)" })))) }, children));
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { DisplayIconProps } from '../../utils/comps/DisplayIcon';
 import { icons } from '../../icons';
 export interface OKELinkProps {
@@ -18,4 +18,25 @@ export interface OKELinkProps {
     style?: React.CSSProperties;
     avatar?: any;
 }
-export declare const OKELink: React.FC<OKELinkProps>;
+/**
+ * @component Renders a link component with customizable text, styling, and behavior.
+ *
+ * - The component props object containing the following properties:
+ * @prop {string} [to]: The URL to link to.
+ * @prop {string} [link]: An external URL to link to.
+ * @prop {(e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void} [onClick]: A callback function to execute when the link is clicked.
+ * @prop {keyof typeof icons} [icon]: An icon to display before the text.
+ * @prop {DisplayIconProps['weight']} [iconWeight]: The weight of the icon font. Defaults to "regular".
+ * @prop {keyof typeof icons} [iconAfter]: An icon to display after the text.
+ * @prop {string} [text]: The text to display in the link.
+ * @prop {React.ReactNode} [children]: The content to be rendered inside the link.
+ * @prop {boolean} [invertUnderline]: A boolean indicating whether to invert the underline style of the link. Defaults to false.
+ * @prop {string} [color]: A string indicating the color of the link. Defaults to the primary color of the theme.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the colors of the link. Defaults to false.
+ * @prop {boolean} [disabled]: A boolean indicating whether the link is disabled. Defaults to false.
+ * @prop {string} [className]: A string indicating the CSS class name to apply to the link.
+ * @prop {React.CSSProperties} [style]: Additional CSS styles to apply to the link.
+ * @prop {ProfileImageInputProps['value']} [avatar]: An avatar to display in the link.
+ * @return {ReactElement} The rendered link component.
+ */
+export declare const OKELink: FunctionComponent<OKELinkProps>;

package/dist/components/OKELink/index.js

@@ -43,6 +43,27 @@ var injectHttps_1 = require("../../utils/injectHttps");
 var utilsOolib_1 = require("../../utilsOolib");
 var styled_1 = require("./styled");
 var ProfileImageInput_1 = require("../ImageInput/derivedComps/ProfileImageInput");
+/**
+ * @component Renders a link component with customizable text, styling, and behavior.
+ *
+ * - The component props object containing the following properties:
+ * @prop {string} [to]: The URL to link to.
+ * @prop {string} [link]: An external URL to link to.
+ * @prop {(e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void} [onClick]: A callback function to execute when the link is clicked.
+ * @prop {keyof typeof icons} [icon]: An icon to display before the text.
+ * @prop {DisplayIconProps['weight']} [iconWeight]: The weight of the icon font. Defaults to "regular".
+ * @prop {keyof typeof icons} [iconAfter]: An icon to display after the text.
+ * @prop {string} [text]: The text to display in the link.
+ * @prop {React.ReactNode} [children]: The content to be rendered inside the link.
+ * @prop {boolean} [invertUnderline]: A boolean indicating whether to invert the underline style of the link. Defaults to false.
+ * @prop {string} [color]: A string indicating the color of the link. Defaults to the primary color of the theme.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the colors of the link. Defaults to false.
+ * @prop {boolean} [disabled]: A boolean indicating whether the link is disabled. Defaults to false.
+ * @prop {string} [className]: A string indicating the CSS class name to apply to the link.
+ * @prop {React.CSSProperties} [style]: Additional CSS styles to apply to the link.
+ * @prop {ProfileImageInputProps['value']} [avatar]: An avatar to display in the link.
+ * @return {ReactElement} The rendered link component.
+ */
 var OKELink = function (_a) {
     var _to = _a.to, link = _a.link, onClick = _a.onClick, icon = _a.icon, iconWeight = _a.iconWeight, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar;
     var to = link || _to;

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

@@ -1,9 +1,15 @@
-export function genColor({ color, theme, invert, disabled }: {
-    color: any;
-    theme: any;
-    invert: any;
-    disabled: any;
-}): any;
-export const styledOKELinkCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export const StyledLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { OKFTheme } from "../../interfaces";
+export interface ColorProps {
+    color?: string;
+    theme?: OKFTheme;
+    invert?: boolean;
+    disabled?: boolean;
+}
+export declare const genColor: ({ color, theme, invert, disabled }: ColorProps) => string;
+interface StyledLinkProps extends ColorProps {
+    invertUnderline?: boolean;
+}
+export declare const styledOKELinkCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledLinkProps, any>>;
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, StyledLinkProps, never>;
+export declare const StyledLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/components/OKELink/styled.js

@@ -43,8 +43,8 @@ var genColor = function (_a) {
                 : (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
 };
 exports.genColor = genColor;
-//separated out this way so we can use it in LexicalTextEditor's StyledEditorWrapperLex
-exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"], ["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"])), function (_a) {
+// Separated out this way so we can use it in LexicalTextEditor's StyledEditorWrapperLex
+exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  gap: 0.7rem;\n  align-items: center;\n  max-width: 100%;\n  text-decoration: none;\n  position: relative;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: ", ";\n    height: ", ";\n    pointer-events: ", ";\n    ", ";\n    background-color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    &::after { width: ", "; }\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  gap: 0.7rem;\n  align-items: center;\n  max-width: 100%;\n  text-decoration: none;\n  position: relative;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: ", ";\n    height: ", ";\n    pointer-events: ", ";\n    ", ";\n    background-color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    &::after { width: ", "; }\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return !disabled ? 'pointer' : 'not-allowed';
 }, exports.genColor, function (_a) {
@@ -60,6 +60,6 @@ exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (tem
     var invertUnderline = _a.invertUnderline;
     return invertUnderline ? '100%' : 0;
 });
-exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), exports.styledOKELinkCSS);
-exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    max-width: 100%;\n    ", ";\n"], ["\n    max-width: 100%;\n    ", ";\n"])), mixins_1.ellipsis);
+exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.styledOKELinkCSS);
+exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 100%;\n  ", ";\n"], ["\n  max-width: 100%;\n  ", ";\n"])), mixins_1.ellipsis);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/cards/CardContent/index.js

@@ -68,9 +68,9 @@ var CardContent = function (_a) {
             showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
                 !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
                     react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
-                (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))),
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
                     react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
-                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))),
-                (0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : null)))));
+                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : null)))));
 };
 exports.CardContent = CardContent;

package/dist/components/cards/CardEmbed/index.js

@@ -80,7 +80,7 @@ var CardEmbed = function (_a) {
                             height: "100%",
                             width: "auto",
                         } }))),
-                (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(styled_2.StyledMediaContainer, null,
                     react_1.default.createElement("div", { style: {
                             position: "relative",
                             height: "100%",
@@ -93,8 +93,8 @@ var CardEmbed = function (_a) {
                                 left: 0,
                                 width: "100%",
                                 height: "100%",
-                            } })))),
-                (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                            } })))) : null,
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
                     react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: imageAspectRatio, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))))));
 };
 exports.CardEmbed = CardEmbed;

package/dist/components/cards/ListContent/index.js

@@ -62,7 +62,7 @@ var ListContent = function (_a) {
                     mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, null,
                         !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
                             react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
-                        (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                        (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
                             react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
                                 react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
                                 react_1.default.createElement("div", { style: {
@@ -71,8 +71,8 @@ var ListContent = function (_a) {
                                         left: 0,
                                         width: "100%",
                                         height: "100%",
-                                    } })))),
-                        (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
+                                    } })))) : null,
+                        (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
                         // <div
                         //   // style={{
                         //   //   width: "14rem",

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { GlobalStyles } from "./globalStyles";
 export * from "./themes/mixins";
 export * from "./components/Typo";
-export * from "./v2/components/Typo2";
 export * from "./globalStyles/globalVariables";
 export * from "./components/Buttons";
 export * from "./components/Tags";
@@ -17,8 +16,9 @@ export * from "./components/RadioAndCheckbox";
 export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
+export * from "./v2/components/Buttons";
+export * from "./v2/components/Typo2";
 export { colors } from "./themes";
-export { colors as colors2 } from "./v2/themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
@@ -70,6 +70,7 @@ export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfir
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
 export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/TableCellResizer";
+export { colors as colors2 } from "./v2/themes";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors2 = exports.colors = exports.GlobalStyles = void 0;
-exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = void 0;
+exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.colors2 = 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;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -26,12 +26,9 @@ __exportStar(require("./themes/mixins"), exports);
 //base style guide : i.e colors, icons, typo
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
-var themes_2 = require("./v2/themes");
-Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 var icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Typo"), exports);
-__exportStar(require("./v2/components/Typo2"), exports);
 __exportStar(require("./globalStyles/globalVariables"), exports);
 ////components
 var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
@@ -176,3 +173,8 @@ Object.defineProperty(exports, "styledOKELinkCSS", { enumerable: true, get: func
 // lexical
 var TableCellResizer_1 = require("./components/Lexical/Plugins/TableCellResizer");
 Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get: function () { return __importDefault(TableCellResizer_1).default; } });
+/////// V2 components /themes 
+__exportStar(require("./v2/components/Buttons"), exports);
+__exportStar(require("./v2/components/Typo2"), exports);
+var themes_2 = require("./v2/themes");
+Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });

package/dist/interfaces/index.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
 import { DefaultTheme } from "styled-components";
+import { ColorsType } from "../themes/colors";
 export interface OKFTheme extends DefaultTheme {
     ENV?: string;
     localize?: (text: ReactNode) => ReactNode;
+    colors?: ColorsType;
 }

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

@@ -0,0 +1,185 @@
+/// <reference types="mdx" />
+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 width {
+            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 };
+        }
+        namespace variant {
+            let name_7: string;
+            export { name_7 as name };
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            let options_3: string[];
+            export { options_3 as options };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace children {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace invert {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        namespace disabled {
+            let name_10: string;
+            export { name_10 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 };
+}
+declare const availableIcons: string[];
+declare const availableColors: string[];
+import ButtonDocs from "../../Oolib/components/Buttons.mdx";
+import React from "react";

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

@@ -0,0 +1,171 @@
+"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.Button_Ghost = 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 availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: "Oolib V 2.0/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",
+        },
+        width: {
+            name: "Width",
+            control: { type: "text" }
+        },
+        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"] } };
+// 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"] } };