oolib 2.109.3 → 2.110.0

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

@@ -8,10 +8,12 @@ interface BreadcrumbsProps {
     invert?: boolean;
 }
 /**
- * Renders a Breadcrumbs component based on the provided links and invert flag.
+ * @component Renders a Breadcrumbs component based on the provided links and invert flag.
  *
- * @param {BreadcrumbsProps} links - The array of links to be displayed in the breadcrumbs
- * @param {boolean} invert - Flag to indicate whether to invert the colors of the breadcrumbs
+ * - The properties of the Breadcrumbs component.
+ * @prop {Object} props - The properties of the Breadcrumbs component
+ * @prop {BreadcrumbsProps} props.links - The array of links to be displayed in the breadcrumbs
+ * @prop {boolean} props.invert - Flag to indicate whether to invert the colors of the breadcrumbs
  * @return {React.ReactElement} The rendered Breadcrumbs component
  */
 export declare const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps>;

package/dist/components/Breadcrumbs/index.js

@@ -33,10 +33,12 @@ var mixins_1 = require("../../themes/mixins");
 var ArrowLeft = icons_1.icons.ArrowLeft;
 var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, greyColor50 = themes_1.colors.greyColor50;
 /**
- * Renders a Breadcrumbs component based on the provided links and invert flag.
+ * @component Renders a Breadcrumbs component based on the provided links and invert flag.
  *
- * @param {BreadcrumbsProps} links - The array of links to be displayed in the breadcrumbs
- * @param {boolean} invert - Flag to indicate whether to invert the colors of the breadcrumbs
+ * - The properties of the Breadcrumbs component.
+ * @prop {Object} props - The properties of the Breadcrumbs component
+ * @prop {BreadcrumbsProps} props.links - The array of links to be displayed in the breadcrumbs
+ * @prop {boolean} props.invert - Flag to indicate whether to invert the colors of the breadcrumbs
  * @return {React.ReactElement} The rendered Breadcrumbs component
  */
 var Breadcrumbs = function (_a) {

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

@@ -1,7 +1,100 @@
-export function ButtonPrimary(props: any): React.JSX.Element;
-export function ButtonSecondary(props: any): React.JSX.Element;
-export function ButtonCustom(props: any): React.JSX.Element;
-export function ButtonGhost(props: any): React.JSX.Element;
-export function UploadButton(props: any): React.JSX.Element;
-export function GoogleLogin(props: any): React.JSX.Element;
 import React from "react";
+export interface DisplayIconProps {
+    icon: string;
+    size: number;
+    color?: string;
+    iconWeight?: string;
+}
+export interface ButtonStyledWrapperProps {
+    props: {
+        id?: string;
+        link?: {
+            val: string;
+            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;
+        iconColor?: string;
+        iconWeight?: string;
+        stopPropagation?: boolean;
+        preventDefault?: boolean;
+        forceHover?: boolean;
+    };
+    variant?: string;
+}
+export interface ButtonProps {
+    props: {
+        link?: {
+            val: string;
+            displayText?: string;
+        };
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        [key: string]: any;
+    };
+    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>;
+interface UploadButtonProps {
+    mutilple?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    variant?: string;
+    id?: string;
+    accept?: string;
+    [key: string]: any;
+}
+/**
+ * Renders an upload button component.
+ *
+ * @param {UploadButtonProps} props - The props for the upload button component.
+ * @return {React.ReactNode} The rendered upload button component.
+ */
+export declare const UploadButton: React.FunctionComponent<UploadButtonProps>;
+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>;
+export {};

package/dist/components/Buttons/index.js

@@ -49,28 +49,7 @@ var DisplayIcon = function (_a) {
 };
 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 //used by multi-option button
-    ;
-    /**
-     * WHY WE ARE HAVING TO DO STOP PROPAGATION IN THIS TWISTED WAY:
-     *
-     * We have debounced our mousedown and click events
-     * Why debounce? Cuz sometimes users end up double clicking buttons
-     * by mistake and end up firing parallel api calls, which leads to all
-     * sorts of duplication issues. Hence debounce.
-     *
-     * Now the problem with debounce is that, it doesnt allow this to work:
-     * <Button onClick={e => e.stopPropagation()}/>
-     * Funny thing is if you wrap the button in a div, and apply stopPropagation
-     * to that div, then it works, but that is a bit messy.
-     *
-     * Which means, e.stopPropagation has to be done before the debounce,
-     * which would have to be done inside the Button Component.
-     * Hence the boolean prop stopPropagation which controls this.
-     *
-     * We dont default to stopPropagation = true, cuz we are unsure
-     * of what other sideeffects it might have on the codebase
-     */
+    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);
@@ -80,13 +59,8 @@ var ButtonStyledWrapper = function (_a) {
             ? "iconOnly"
             : "textOnly";
     var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
-        ? (S && 'S') || 'M' //icon+text defaults to 'M'
-        : (M && 'M') || 'S'; //iconOnly defaults to 'S'
-    /**
-     * In rare cases, even if the button is 'S'
-     * we need the icon to be 'M'
-     * e.g. the DotsThree icon in ActionMenu
-     */
+        ? (S && 'S') || 'M'
+        : (M && 'M') || 'S';
     var calcIconSize = function () {
         var thisSize = iconSize || size;
         return thisSize === 'S' ? 15 : 20;
@@ -94,7 +68,7 @@ var ButtonStyledWrapper = function (_a) {
     var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
     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: function (e) {
             stopPropagation && e.stopPropagation();
-            preventDefault && e.preventDefault(); // if the button is used inside a <Link> then, clicking the button will trigger off the link. I thought stopPopagation would stop that from happening. But it doesnt. e.preventDefault however works.
+            preventDefault && e.preventDefault();
             debouncedOnClick && debouncedOnClick(e);
         }, onMouseDown: function (e) {
             stopPropagation && e.stopPropagation();
@@ -105,6 +79,13 @@ var ButtonStyledWrapper = function (_a) {
         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;
@@ -120,17 +101,39 @@ var ButtonCustom = function (props) { return (react_1.default.createElement(Butt
 exports.ButtonCustom = ButtonCustom;
 var ButtonGhost = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "ghost" })); };
 exports.ButtonGhost = ButtonGhost;
+/**
+ * Renders an upload button component.
+ *
+ * @param {UploadButtonProps} props - The props for the upload button component.
+ * @return {React.ReactNode} The rendered upload button component.
+ */
 var UploadButton = function (props) {
     var inputRef = (0, react_1.useRef)(null);
     var mutilple = props.mutilple, onChange = props.onChange, variant = props.variant, id = props.id, accept = props.accept;
     var handleFileUpload = function () {
-        inputRef.current.click();
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { id: id, ref: inputRef, type: "file", accept: accept, multiple: mutilple, onChange: onChange, style: { display: "none" } }),
         react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: handleFileUpload }), variant: variant || "secondary" })));
 };
 exports.UploadButton = UploadButton;
+/**
+ * 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";

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

@@ -1 +1,33 @@
-export const ButtonStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
+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/index.styled.js

@@ -38,7 +38,7 @@ var SIZES = {
     S: "3rem",
     M: "4rem",
 };
-var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\ncolor: ", ";\n"], ["\n  background-color: ", ";\ncolor: ", ";\n"])), function (_a) {
+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)
@@ -49,7 +49,7 @@ var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_1 || (temp
         ? 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 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
         ? ""
@@ -57,13 +57,13 @@ var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_2 || (te
             ? 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 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 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
         ? ""
@@ -71,7 +71,7 @@ var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templa
             ? greyColor80
             : greyColor10;
 });
-var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
+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)
@@ -81,10 +81,10 @@ var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateOb
     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);
+    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) {
+    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);
@@ -92,7 +92,7 @@ var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateOb
     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 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)
@@ -107,10 +107,10 @@ var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templat
         : (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);
+    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) {
+    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)
@@ -122,7 +122,7 @@ var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templat
     });
 }, 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) {
+    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);
@@ -130,7 +130,7 @@ var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templat
     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 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)
@@ -153,7 +153,7 @@ var ButtonCustom = (0, styled_components_1.css)(templateObject_14 || (templateOb
     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) {
+    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) {
@@ -164,7 +164,7 @@ var ButtonCustom = (0, styled_components_1.css)(templateObject_14 || (templateOb
     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 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) {
@@ -176,23 +176,23 @@ var ButtonGhost = (0, styled_components_1.css)(templateObject_18 || (templateObj
             : (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);
+    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) {
+    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);
+    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 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    "])));
+    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,
@@ -201,19 +201,19 @@ var buttonVariantSetting = {
     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) {
+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]);
+            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]);
+            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]);
+            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);
+    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];

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

@@ -7,13 +7,14 @@ export interface ContainerProps {
 }
 export declare const Comp: ({ children, className, style, enableContainerQuery }: ContainerProps, ref: React.RefObject<HTMLDivElement> | null) => React.JSX.Element;
 /**
- * Renders a container component with optional container query feature.
+ * @component Renders a container component with optional container query feature.
  *
- * @param {ContainerProps} children - The child elements to be rendered within the container.
- * @param {string} className - The CSS class for styling the container.
- * @param {Object} style - The inline styles for the container.
- * @param {boolean} enableContainerQuery - Flag to enable or disable the container query feature.
- * @param {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
+ * - The properties of the container component.
+ * @prop {React.ReactNode} props.children - The child elements to be rendered within the container.
+ * @prop {string} props.className - The CSS class for styling the container.
+ * @prop {Object} props.style - The inline styles for the container.
+ * @prop {boolean} props.enableContainerQuery - Flag to enable or disable the container query feature.
+ * @prop {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
  * @return {React.ReactElement} The rendered container component.
  */
 export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Container/index.js

@@ -37,13 +37,14 @@ var Comp = function (_a, ref //if a ref is passed from outside, it will override
 };
 exports.Comp = Comp;
 /**
- * Renders a container component with optional container query feature.
+ * @component Renders a container component with optional container query feature.
  *
- * @param {ContainerProps} children - The child elements to be rendered within the container.
- * @param {string} className - The CSS class for styling the container.
- * @param {Object} style - The inline styles for the container.
- * @param {boolean} enableContainerQuery - Flag to enable or disable the container query feature.
- * @param {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
+ * - The properties of the container component.
+ * @prop {React.ReactNode} props.children - The child elements to be rendered within the container.
+ * @prop {string} props.className - The CSS class for styling the container.
+ * @prop {Object} props.style - The inline styles for the container.
+ * @prop {boolean} props.enableContainerQuery - Flag to enable or disable the container query feature.
+ * @prop {React.RefObject<HTMLDivElement> | null} ref - Reference object to the container element.
  * @return {React.ReactElement} The rendered container component.
  */
 exports.Container = (0, react_1.forwardRef)(exports.Comp);

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -111,12 +111,14 @@ function DropdownSingle(_a) {
         });
         return (!isSearchable && !isTagsStyle)
             ? ops
-            : (0, keywordSearchOptions_1.keywordSearchOptions)({
-                options: ops,
-                searchString: searchString,
-                searchFieldsConfig: searchFieldsConfig,
-                setFilteredOptionsInParent: setFilteredOptionsInParent,
-            });
+            : !!observerRef === true //if this exists that means search is being handled on the backend via elastic search
+                ? ops
+                : (0, keywordSearchOptions_1.keywordSearchOptions)({
+                    options: ops,
+                    searchString: searchString,
+                    searchFieldsConfig: searchFieldsConfig,
+                    setFilteredOptionsInParent: setFilteredOptionsInParent,
+                });
     }, [optionsProp, optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn, searchString]);
     var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({}, {
         id: id,

package/dist/components/EmptyStates/comps/styled.d.ts

@@ -1,3 +1,3 @@
-export const StyledSERIF_4_5: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const StyledSERIF_4_5: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../Typo").TypoCompProps>, any, {}, never>;
 export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Container").ContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/LoadersAndProgress/utils/index.d.ts

@@ -1,5 +1,5 @@
 export function getTypoAndLoaderDimensions(size: any): {
-    TypoComp: (props: any) => import("react").JSX.Element;
+    TypoComp: import("react").FunctionComponent<import("../../Typo").TypoCompProps>;
     trackThickness: number;
     diameter: number;
 };

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

@@ -2,4 +2,4 @@ export const StyledOptionsContainer: import("styled-components").StyledComponent
 export const StyledOption: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOtherOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOtherTextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledCorrectMessage: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const StyledCorrectMessage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;

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

@@ -2,4 +2,4 @@ export const StyledSwitchWrapperStyle1: import("styled-components").StyledCompon
 export const StyledSwitchWrapperStyle2: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButtonSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSwitch: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const STYLED_SANS_3: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const STYLED_SANS_3: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;

package/dist/components/TabBar/index.styled.d.ts

@@ -3,6 +3,6 @@ export const TabBarContainerStyled: import("styled-components").StyledComponent<
 export const TabBarRowStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const TabBarTabWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const TabBarTabStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const STYLED_SANS_2: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const STYLED_SANS_2: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;
 export const StyledDirectionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDot: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Tags/index.styled.d.ts

@@ -1,5 +1,5 @@
-export const STYLED_ELLIPSIS_SANS_2: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
-export const STYLED_ELLIPSIS_SANS_3: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const STYLED_ELLIPSIS_SANS_2: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;
+export const STYLED_ELLIPSIS_SANS_3: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;
 export const StyledTagClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledLink: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, {}, never>;