oolib 2.17.11 → 2.17.12

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

@@ -1,8 +1,7 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, sideEffect }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize }: {
     icon?: string;
     invert: any;
     actions: any;
     align?: string;
     iconSize?: string;
-    sideEffect: any;
 }): JSX.Element;

package/dist/components/ActionMenu/index.js

@@ -43,15 +43,11 @@ var styled_1 = require("./styled");
 var ActionMenu = function (_a) {
     var _b, _c;
     var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
-    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, sideEffect = _a.sideEffect // if you want this click to trigger a sideeffect in parent. e.g in table elem we set table overflow to unset when action menu is open
-    ;
+    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
     var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
     (0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
-    (0, react_1.useEffect)(function () {
-        sideEffect && sideEffect(showActions);
-    }, [showActions]);
     if (!actions || actions.length === 0)
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };

package/dist/components/BlockLabel/index.js

@@ -9,15 +9,9 @@ var Typo_1 = require("../Typo");
 var InlineAlert_1 = require("../InlineAlert");
 var index_styled_1 = require("./index.styled");
 var colors_1 = require("../../themes/colors");
-var red = colors_1.colors.red, greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
+var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
 var BlockLabel = function (props) {
-    /*
-      missing parts of this component compared to kPlabel:
-        - deployment._ShowOptionalTag configuration
-       
-    */
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, error = props.error, //for storybook view purposes
-    errorMsgs = props.errorMsgs;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -34,10 +28,7 @@ var BlockLabel = function (props) {
             (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel)),
             optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
             !readOnly &&
-                (error ? (react_1.default.createElement(Typo_1.SANS_3, { color: red },
-                    " ",
-                    error,
-                    " ")) : (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null)),
+                (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null),
         !readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel)))));
 };
 exports.BlockLabel = BlockLabel;

package/dist/components/Buttons/index.js

@@ -38,6 +38,7 @@ exports.GoogleLogin = exports.UploadButton = exports.ButtonGhost = exports.Butto
 var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.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 DisplayIcon = function (_a) {
@@ -49,6 +50,8 @@ 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;
     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
@@ -66,7 +69,7 @@ var ButtonStyledWrapper = function (_a) {
         var thisSize = iconSize || size;
         return thisSize === 'S' ? 15 : 20;
     };
-    return (react_1.default.createElement(index_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: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
+    return (react_1.default.createElement(index_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: debouncedOnClick, onMouseDown: debouncedMouseDown, composition: composition, width: width, color: color },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: calcIconSize() }),
         displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
         iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, size: calcIconSize() })));

package/dist/components/Loader/index.js

@@ -20,20 +20,34 @@ var Typo_1 = require("../Typo");
 var colors_1 = require("../../themes/colors");
 var styled_components_1 = require("styled-components");
 var greyColor100 = colors_1.colors.greyColor100;
-var index_styled_1 = require("./index.styled");
-var LoaderDiv = function (props) {
+var styled_1 = require("./styled");
+var LoaderDiv = function (_a) {
+    var L = _a.L, M = _a.M, _b = _a.S, S = _b === void 0 ? true : _b, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, _c = _a.isBlock, isBlock = _c === void 0 ? true : _c;
     var theme = (0, styled_components_1.useTheme)();
-    var SuitableTypo = props.L ? Typo_1.SANS_5_6 : props.M ? Typo_1.SANS_4 : Typo_1.SANS_3;
-    return (!props.children ?
-        react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props)) :
-        react_1.default.createElement(index_styled_1.StyledLoaderWrapper, __assign({}, props),
-            react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props, { children: null })),
-            react_1.default.createElement(SuitableTypo, __assign({ color: greyColor100, invert: props.invert }, (props.L ? { bold: true } : { semibold: true })), ((theme === null || theme === void 0 ? void 0 : theme._Env) === 'dev' && props.debug) || props.children)));
+    var text = _text || children;
+    var getTypoSizeAndTrackSize = function (_a) {
+        var L = _a.L, M = _a.M, S = _a.S;
+        switch (true) {
+            case L:
+                return { TypoComp: Typo_1.SANS_4_5, trackSize: 10, size: 70 };
+            case M:
+                return { TypoComp: Typo_1.SANS_3, trackSize: 7, size: 43 };
+            case S:
+            default:
+                return { TypoComp: Typo_1.SANS_2, trackSize: 3.65, size: 21.35 };
+        }
+    };
+    var _d = getTypoSizeAndTrackSize({ L: L, M: M, S: S }), TypoComp = _d.TypoComp, trackSize = _d.trackSize, size = _d.size;
+    return (react_1.default.createElement(styled_1.StyledLoaderWrapper, __assign({}, { isBlock: isBlock }),
+        react_1.default.createElement(styled_1.StyledLoader, __assign({}, { size: size, trackSize: trackSize, invert: invert })),
+        (text || ((theme === null || theme === void 0 ? void 0 : theme._Env) === "dev" && debug)) && (react_1.default.createElement(TypoComp, __assign({ invert: invert }, (L ? { bold: true } : { semibold: true })), "".concat((theme === null || theme === void 0 ? void 0 : theme._Env) === "dev" && debug ? debug : "").concat(text)))));
 };
+// still dont think we need to have this overlay thing, 
+// but lets consult with design and make a decision on this
+//also i think the gap between loader and text should also be modified dynamically based on 
+//size L, M or S
 var Loader = function (props) {
-    return (!props.isBlock ?
-        react_1.default.createElement(LoaderDiv, __assign({}, props)) :
-        react_1.default.createElement(index_styled_1.StyledLoaderOverlay, __assign({}, props),
-            react_1.default.createElement(LoaderDiv, __assign({}, props))));
+    return !props.isBlock ? (react_1.default.createElement(LoaderDiv, __assign({}, props))) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, __assign({}, props),
+        react_1.default.createElement(LoaderDiv, __assign({}, props))));
 };
 exports.Loader = Loader;

package/dist/components/Loader/{index.styled.js → styled.js}

@@ -33,24 +33,19 @@ var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
 var greyColor10 = colors_1.colors.greyColor10, greyColor70 = colors_1.colors.greyColor70, greyColor100 = colors_1.colors.greyColor100, white = colors_1.colors.white;
 var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"], ["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
-var StyledLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
-    var M = _a.M, L = _a.L, invert = _a.invert, colors = _a.theme.colors;
-    var size = M ? 10 : L ? 15 : 3;
-    var trackSize = size === 30 ? size / 5 : size / 7;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", ";\n    "], ["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", ";\n    "])), size, size, trackSize, invert ? greyColor70 : greyColor10, invert ? white : (0, utilsOolib_1.getPrimaryColor100)(colors));
+var StyledLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
+    var size = _a.size, trackSize = _a.trackSize, invert = _a.invert, colors = _a.theme.colors;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      border-style: solid;\n      border-width: ", "px;\n      border-color: ", ";\n      border-top-color: ", ";\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      border-style: solid;\n      border-width: ", "px;\n      border-color: ", ";\n      border-top-color: ", ";\n    "])), size, size, trackSize, invert ? greyColor70 : greyColor10, invert ? white : (0, utilsOolib_1.getPrimaryColor100)(colors));
 });
 exports.StyledLoader = StyledLoader;
-var StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
+var StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
     var isBlock = _a.isBlock;
-    return isBlock && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.8rem;\n  "], ["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.8rem;\n  "])));
+    return isBlock && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "], ["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "])));
 });
 exports.StyledLoaderWrapper = StyledLoaderWrapper;
-var StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 100%;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  background-color: ", ";\n  width: 100%;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor100 : white;
-}, function (_a) {
+var StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"], ["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"])), function (_a) {
     var blockHeight = _a.blockHeight;
-    return blockHeight || '100vh';
+    return blockHeight || '100%';
 });
 exports.StyledLoaderOverlay = StyledLoaderOverlay;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/OKELink/index.js

@@ -19,10 +19,10 @@ var react_1 = __importDefault(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../utilsOolib");
-var utils_1 = require("../../utils");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var icons_1 = require("../../icons");
 var styled_1 = require("./styled");
-var utils_2 = require("./utils");
+var utils_1 = require("./utils");
 var AvatarDisplay_1 = require("./comps/AvatarDisplay");
 var OKELink = function (_a) {
     var invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, storyBookTheme = _a.storyBookTheme, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, _b = _a.iconSize, iconSize = _b === void 0 ? 15 : _b, avatar = _a.avatar, avatarTitle = _a.avatarTitle;
@@ -31,7 +31,7 @@ var OKELink = function (_a) {
     var link = linkProp || to;
     var PrefixIconComp = icons_1.icons[icon];
     var SuffixIconComp = icons_1.icons[iconAfter];
-    var iconColor = (0, utils_2.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme || storyBookTheme });
+    var iconColor = (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme || storyBookTheme });
     var AvatarComp = avatar && AvatarDisplay_1.AvatarDisplay;
     return (react_1.default.createElement(styled_1.StyledLink, __assign({ onClick: function (ev) {
             ev.stopPropagation();
@@ -40,7 +40,7 @@ var OKELink = function (_a) {
         { as: 'span' }
         : linkType === 'external' ?
             {
-                href: !disabled ? (0, utils_1.injectHttps)(link) : '#',
+                href: !disabled ? (0, _EXPORTS_1.injectHttps)(link) : '#',
                 target: "_blank"
             } :
             {

package/dist/components/TextInputs/index.js

@@ -78,7 +78,7 @@ var Loader_1 = require("../Loader");
 var BlockLabel_1 = require("../BlockLabel");
 var Typo_1 = require("../Typo");
 var Buttons_1 = require("../Buttons");
-var utils_1 = require("../../utils");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, onClick = _a.onClick, size = _a.size;
     var IconComp = icons_1.icons[icon];
@@ -120,7 +120,7 @@ var TextInput = function (props) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
+            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),

package/dist/components/ToggleButton/index.js

@@ -18,7 +18,7 @@ exports.SingleToggleButton = exports.ToggleButton = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
 var BlockLabel_1 = require("../BlockLabel");
-var utils_1 = require("../../utils");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
 var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
@@ -35,7 +35,7 @@ var ToggleButton = function (props) {
         rightOptionColor = isLeftOptionActive ? greyColor40 : greyColor100;
     }
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledToggleWrraper, null,
             react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { color: leftOptionColor } }, options[0].display),
             react_1.default.createElement(styled_1.StyledButtonSlider, { invert: invert, square: square, onClick: function () { return onChange('', options.find(function (op) { return op.value !== value.value; })); } },
@@ -50,7 +50,7 @@ var SingleToggleButton = function (props) {
     if (invert)
         labelColor = isInactive ? greyColor40 : white;
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledToggleWrraper, null,
             react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, square: square, onClick: function () { return !disabled && onChange('', isInactive ? option : undefined); } },
                 react_1.default.createElement(styled_1.StyledToggleButton, { direction: isInactive ? 'left' : 'right', inactive: isInactive, disabled: disabled, square: square, invert: invert })),

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

@@ -1,5 +1,6 @@
-export function UserRoleBadge({ role, value, className }: {
+export function UserRoleBadge({ role, value, className, dummyThemeFromStoryBook }: {
     role: any;
     value: any;
     className: any;
+    dummyThemeFromStoryBook: any;
 }): JSX.Element;

package/dist/components/UserRoleBadge/index.js

@@ -10,14 +10,14 @@ var styled_components_1 = require("styled-components");
 var BadgeAdmin = icons_1.icons.BadgeAdmin, BadgeSuperAdmin = icons_1.icons.BadgeSuperAdmin, BadgeMod = icons_1.icons.BadgeMod, BadgeVetted = icons_1.icons.BadgeVetted;
 var UserRoleBadge = function (_a) {
     var _b;
-    var role = _a.role, value = _a.value, className = _a.className;
+    var role = _a.role, value = _a.value, className = _a.className, dummyThemeFromStoryBook = _a.dummyThemeFromStoryBook;
     var badges = {
         BadgeSuperAdmin: BadgeSuperAdmin,
         BadgeAdmin: BadgeAdmin,
         BadgeMod: BadgeMod,
         BadgeVetted: BadgeVetted
     };
-    var theme = (0, styled_components_1.useTheme)();
+    var theme = (0, styled_components_1.useTheme)() || dummyThemeFromStoryBook;
     var iconName = (_b = theme._Roles[value || role]) === null || _b === void 0 ? void 0 : _b.badgeIcon;
     var Icon = iconName && badges[iconName];
     return (Icon ?

package/dist/components/Wrappers/index.js

@@ -18,9 +18,9 @@ exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper80
 var react_1 = __importDefault(require("react"));
 var index_styled_1 = require("./index.styled");
 var Wrapper = function (_a) {
-    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, left = _a.left;
-    var alignment = left ? 'left' : 'center';
-    return (react_1.default.createElement(index_styled_1.StyledWrapper, __assign({}, { maxWidth: maxWidth, alignment: alignment }, { className: className || "", style: style }), children));
+    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, left = _a.left, align = _a.align;
+    align = align || (left ? 'left' : 'center');
+    return (react_1.default.createElement(index_styled_1.StyledWrapper, __assign({}, { maxWidth: maxWidth, align: align }, { className: className || "", style: style }), children));
 };
 var Wrapper1500 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1500 })); };
 exports.Wrapper1500 = Wrapper1500;

package/dist/components/Wrappers/index.styled.js

@@ -13,7 +13,7 @@ exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (tem
     var maxWidth = _a.maxWidth;
     return maxWidth + 'px';
 }, function (_a) {
-    var alignment = _a.alignment;
-    return alignment === 'left' ? 'unset' : '0 auto';
+    var align = _a.align;
+    return align === 'left' ? 'unset' : '0 auto';
 });
 var templateObject_1;

package/dist/icons/index.d.ts

@@ -44,6 +44,7 @@ export namespace icons {
     export { CheckSquareOffset };
     export { Cards };
     export { SignOut };
+    export { Swap };
     export { CheckCircle };
     export { Circle };
     export { ImageSquare };
@@ -129,6 +130,7 @@ import { Wrench } from "phosphor-react";
 import { CheckSquareOffset } from "phosphor-react";
 import { Cards } from "phosphor-react";
 import { SignOut } from "phosphor-react";
+import { Swap } from "phosphor-react";
 import { CheckCircle } from "phosphor-react";
 import { Circle } from "phosphor-react";
 import { ImageSquare } from "phosphor-react";

package/dist/icons/index.js

@@ -49,6 +49,7 @@ exports.icons = {
     CheckSquareOffset: phosphor_react_1.CheckSquareOffset,
     Cards: phosphor_react_1.Cards,
     SignOut: phosphor_react_1.SignOut,
+    Swap: phosphor_react_1.Swap,
     CheckCircle: phosphor_react_1.CheckCircle,
     Circle: phosphor_react_1.Circle,
     ImageSquare: phosphor_react_1.ImageSquare,

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { GlobalStyles } from "./globalStyles";
+export * from "./themes/mixins";
 export * from "./components/Typo";
 export * from "./components/Loader";
 export * from "./components/Buttons";
@@ -12,7 +13,6 @@ export * from "./components/Wrappers";
 export * from "./components/ToggleButton";
 export * from "./components/TabBar";
 export * from "./components/Banners";
-export * from "./themes/mixins";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
@@ -21,3 +21,4 @@ export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPi } from "./components/PercentCompletedPi";
+export * as utils from "./utils/_EXPORTS";

package/dist/index.js

@@ -10,19 +10,35 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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 __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.utils = exports.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = 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; } });
-__exportStar(require("./components/Typo"), exports);
-__exportStar(require("./components/Loader"), exports);
+__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 icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
+__exportStar(require("./components/Typo"), exports);
+//components
+__exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);
@@ -32,6 +48,8 @@ __exportStar(require("./components/TextInputs"), exports);
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
 __exportStar(require("./components/ToggleButton"), exports);
+__exportStar(require("./components/TabBar"), exports);
+__exportStar(require("./components/Banners"), exports);
 var Section_1 = require("./components/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
 var UserRoleBadge_1 = require("./components/UserRoleBadge");
@@ -44,6 +62,5 @@ var ActionMenu_1 = require("./components/ActionMenu");
 Object.defineProperty(exports, "ActionMenu", { enumerable: true, get: function () { return ActionMenu_1.ActionMenu; } });
 var PercentCompletedPi_1 = require("./components/PercentCompletedPi");
 Object.defineProperty(exports, "PercentCompletedPi", { enumerable: true, get: function () { return PercentCompletedPi_1.PercentCompletedPi; } });
-__exportStar(require("./components/TabBar"), exports);
-__exportStar(require("./components/Banners"), exports);
-__exportStar(require("./themes/mixins"), exports);
+//utility functions
+exports.utils = __importStar(require("./utils/_EXPORTS"));

package/dist/utils/_EXPORTS.d.ts

@@ -0,0 +1,2 @@
+export { getBlockLabelProps } from "./getBlockLabelProps";
+export { injectHttps } from "./injectHttps.js";

package/dist/utils/_EXPORTS.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectHttps = exports.getBlockLabelProps = void 0;
+var getBlockLabelProps_1 = require("./getBlockLabelProps");
+Object.defineProperty(exports, "getBlockLabelProps", { enumerable: true, get: function () { return getBlockLabelProps_1.getBlockLabelProps; } });
+var injectHttps_js_1 = require("./injectHttps.js");
+Object.defineProperty(exports, "injectHttps", { enumerable: true, get: function () { return injectHttps_js_1.injectHttps; } });

package/dist/utils/{index.d.ts → getBlockLabelProps.d.ts}

@@ -1,2 +1 @@
 export function getBlockLabelProps(props: any): {};
-export function injectHttps(value: any): any;

package/dist/utils/getBlockLabelProps.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlockLabelProps = void 0;
+var getBlockLabelProps = function (props) {
+    var blockLabelProps = [
+        'id',
+        'srNo',
+        'label',
+        'sublabel',
+        'inputOnlyLabel',
+        'readOnly',
+        'errorMsgs',
+        'error',
+        'isRequired',
+        'invert',
+    ];
+    var labelProps = {};
+    Object.keys(props).map(function (key) {
+        if (blockLabelProps.includes(key)) {
+            labelProps[key] = props[key];
+        }
+    });
+    return labelProps;
+};
+exports.getBlockLabelProps = getBlockLabelProps;

package/dist/utils/injectHttps.d.ts

@@ -0,0 +1 @@
+export function injectHttps(value: any): any;

package/dist/utils/injectHttps.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectHttps = void 0;
+var injectHttps = function (value) {
+    if (['mailto:', 'tel:', 'http://', 'https://'].every(function (d) { return typeof value === 'string' && !value.includes(d); })) {
+        return 'https://' + value;
+    }
+    else {
+        return value;
+    }
+};
+exports.injectHttps = injectHttps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.17.11",
+  "version": "2.17.12",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,13 +41,13 @@
     "chromatic": "^6.1.0",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
+    "mdx-embed": "^1.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^5.1.2",
     "semantic-release": "^18.0.0",
-    "styled-components": "^5.3.1",
-    "mdx-embed": "^1.0.0"
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -67,6 +67,7 @@
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
+    "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "phosphor-react": "^1.3.1"
   }

package/dist/utils/index.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectHttps = exports.getBlockLabelProps = void 0;
-var blockLabelProps = [
-    'id',
-    'srNo',
-    'label',
-    'sublabel',
-    'inputOnlyLabel',
-    'readOnly',
-    'errorMsgs',
-    'error',
-    'isRequired',
-    'invert',
-];
-var getBlockLabelProps = function (props) {
-    var labelProps = {};
-    Object.keys(props).map(function (key) {
-        if (blockLabelProps.includes(key)) {
-            labelProps[key] = props[key];
-        }
-    });
-    return labelProps;
-};
-exports.getBlockLabelProps = getBlockLabelProps;
-var injectHttps = function (value) {
-    if (['mailto:', 'tel:', 'http://', 'https://'].every(function (d) { return typeof value === 'string' && !value.includes(d); })) {
-        return 'https://' + value;
-    }
-    else {
-        return value;
-    }
-};
-exports.injectHttps = injectHttps;