@bikdotai/bik-component-library 0.0.769 → 0.0.770-beta.1

package/dist/esm/components/dropdown/hooks/useDropdown.js

@@ -1 +1 @@
-import e from"lodash/debounce";import{useState as t,useRef as l,useEffect as s,useCallback as n,useMemo as c}from"react";import{iterateOnOptionsRaw as o,iterateOnOptions as i}from"../OpenedDropdown/utils/iterationOnOptions.js";const a=function(){let a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",r=arguments.length>1?arguments[1]:void 0,u=arguments.length>2?arguments[2]:void 0,d=arguments.length>3?arguments[3]:void 0,v=arguments.length>4?arguments[4]:void 0,p=arguments.length>5?arguments[5]:void 0,f=arguments.length>6?arguments[6]:void 0,g=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],b=arguments.length>8?arguments[8]:void 0;const[h,O]=t(null!=r?r:[]),[j,m]=t([]),[S,F]=t(""),w=l(h),A=l(p);s((()=>{A.current=p}),[p]),s((()=>{if(w.current=h,j.length&&S&&p){let e=[...j];const t=h.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const l=t.find((t=>e.value===t.value));return l?Object.assign(Object.assign({},e),{selected:l.selected}):e})),f&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!g.includes(e.value)})))),m(v&&!d?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[h]),s((()=>{if(r){const e=[...r];O(v&&!d?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[r]);const C=e=>{const t=[];return e.forEach((e=>{if(e.options){const l=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...l]}))}else e.selected&&t.push(Object.assign({},e))})),t},E=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},x=e=>!(!v||!b&&0!==b)&&E(e)>=b,M=n((e=>{const t=A.current;if(!e||!t)return;const l=[];o(w.current,(e=>{e.selected&&!l.includes(e.value)&&l.push(e.value)})),t(e).then((e=>{if(e){const t=e.map((e=>{if(e.options){const t=e;return Object.assign(Object.assign({},t),{options:t.options.map((e=>Object.assign(Object.assign({},e),{selected:l.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:l.includes(e.value)})}));m([...t])}}))}),[]),y=c((()=>e(M,300)),[M]);function D(e,t){if(v){if(e.selected&&b&&x(h))return;if(j.length&&S&&p)if(e.selected){if(b&&x(h))return;let l=!1;const s=i(h,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l||s.push(e),t)return[...s];O([...s]),"2.0"===a&&H(s)}else{let l=!1,s=i(h,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l&&(s=s.filter((t=>t.value!==e.value))),t)return[...s];O([...s]),"2.0"===a&&H(s)}else{const l=i(h,{selected:e.selected},(t=>t.value===e.value));if(t)return[...l];O([...l]),"2.0"===a&&H(l)}}else null==u||u(e)}function H(e){const t=C(null!=e?e:w.current);null==u||u([...t])}return s((()=>()=>null==y?void 0:y.cancel()),[y]),{latestDropdownOptionsRef:w,dropdownOptions:h,search:function(e){F(e),m([]),e?y(e):null==y||y.cancel()},searchedString:S,searchedOptions:j,onApplyHandler:D,selectAllHandler:function(e){if(j.length&&S&&p)!function(e){let t=[...h];e?j.forEach((e=>{let l=!1;t=t.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?(l=!0,Object.assign(Object.assign({},t),{selected:!0})):t})),l||t.push(Object.assign(Object.assign({},e),{selected:!0}))})):j.forEach((e=>{t=t.map((t=>{const l=e;return void 0!==l.value&&l.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),O([...t]),"2.0"===a&&H(t)}("selectAll"===e);else if("selectAll"===e){const e=i(h,{selected:!0},(e=>{var t;return S?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(S.toLowerCase()))&&!e.disabled:!e.disabled}));O([...e]),"2.0"===a&&H(e)}else if("notSelected"===e){const e=i(h,{selected:!1},(e=>!e.disabled));O([...e]),"2.0"===a&&H(e)}},onMultiSelectClear:function(){const e=i(h,{selected:!1});O([...e]),"2.0"===a&&H(e)},onFreeFormSelect:function(e){if(!v)return void D({label:S,value:S,isFreeForm:!0,selected:!0});const t=h.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===S&&t.value===S?e:t.selected})));e&&(t.some((e=>e.label===S&&e.value===S))||t.unshift({label:S,value:S,isFreeForm:!0,selected:!0})),O([...t]),"2.0"===a&&H(t)},onMultiSelectApply:H,getSelectedOptions:C,getCurrentSelectionCount:E,isMaxSelectionsReached:x,maxSelections:b}};export{a as useDropdown};
+import e from"lodash/debounce";import{useState as t,useRef as s,useEffect as l,useCallback as n,useMemo as c}from"react";import{iterateOnOptionsRaw as i,iterateOnOptions as o}from"../OpenedDropdown/utils/iterationOnOptions.js";const a=function(){let a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",r=arguments.length>1?arguments[1]:void 0,u=arguments.length>2?arguments[2]:void 0,d=arguments.length>3?arguments[3]:void 0,v=arguments.length>4?arguments[4]:void 0,f=arguments.length>5?arguments[5]:void 0,p=arguments.length>6?arguments[6]:void 0,b=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],g=arguments.length>8?arguments[8]:void 0;const[O,j]=t(null!=r?r:[]),[h,m]=t([]),[w,C]=t(""),S=s(O),F=s(f);l((()=>{F.current=f}),[f]),l((()=>{if(S.current=O,h.length&&w&&f){let e=[...h];const t=O.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const s=t.find((t=>e.value===t.value));return s?Object.assign(Object.assign({},e),{selected:s.selected}):e})),p&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!b.includes(e.value)})))),m(v&&!d?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[O]),l((()=>{if(r){const e=[...r];j(v&&!d?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[r]);const L=e=>{const t=[];return e.forEach((e=>{if(e.options){const s=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...s]}))}else e.selected&&t.push(Object.assign({},e))})),t},A=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},E=e=>!(!v||!g&&0!==g)&&A(e)>=g,x=n((e=>{const t=F.current;if(!e||!t)return;const s=[];i(S.current,(e=>{e.selected&&!s.includes(e.value)&&s.push(e.value)})),t(e).then((e=>{if(e){const t=e.map((e=>{if(e.options){const t=e;return Object.assign(Object.assign({},t),{options:t.options.map((e=>Object.assign(Object.assign({},e),{selected:s.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:s.includes(e.value)})}));m([...t])}}))}),[]),M=c((()=>e(x,300)),[x]);function y(e,t){if(v){if(e.selected&&g&&E(O))return;if(h.length&&w&&f)if(e.selected){if(g&&E(O))return;let s=!1;const l=o(O,{selected:e.selected},(t=>t.value===e.value&&(s=!0,!0)));if(s||l.push(e),t)return[...l];j([...l]),"2.0"===a&&D(l)}else{let s=!1,l=o(O,{selected:e.selected},(t=>t.value===e.value&&(s=!0,!0)));if(s&&(l=l.filter((t=>t.value!==e.value))),t)return[...l];j([...l]),"2.0"===a&&D(l)}else{const s=o(O,{selected:e.selected},(t=>t.value===e.value));if(t)return[...s];j([...s]),"2.0"===a&&D(s)}}else null==u||u(e)}function D(e){const t=L(null!=e?e:S.current);null==u||u([...t])}return l((()=>()=>null==M?void 0:M.cancel()),[M]),{latestDropdownOptionsRef:S,dropdownOptions:O,search:function(e){C(e),m([]),e?M(e):null==M||M.cancel()},searchedString:w,searchedOptions:h,onApplyHandler:y,selectAllHandler:function(e){if(h.length&&w&&f)"selectAll"===e?function(e){let t=[...O];if(e&&g&&g>0){const e=A(t),s=g-e;if(s<=0)return;let l=0;h.forEach((e=>{if(l>=s)return;let n=!1;t=t.map((t=>{const s=e;return t.selected||t.disabled?t:void 0!==s.value&&s.value===t.value?(n=!0,l++,Object.assign(Object.assign({},t),{selected:!0})):t})),!n&&l<s&&(e.disabled||(t.push(Object.assign(Object.assign({},e),{selected:!0})),l++))})),j([...t]),"2.0"===a&&D(t)}}(!0):function(e){let t=[...O];e?h.forEach((e=>{let s=!1;t=t.map((t=>{const l=e;return void 0!==l.value&&l.value===t.value?(s=!0,Object.assign(Object.assign({},t),{selected:!0})):t})),s||t.push(Object.assign(Object.assign({},e),{selected:!0}))})):h.forEach((e=>{t=t.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),j([...t]),"2.0"===a&&D(t)}(!1);else if("selectAll"===e)if(g&&g>0){const e=A(O),t=g-e;if(t<=0)return;let s=0;const l=O.map((e=>{var l;if(e.options){const l=e;return Object.assign(Object.assign({},l),{options:l.options.map((e=>{var l;return e.disabled||e.selected||w&&!(null===(l=e.label)||void 0===l?void 0:l.toLowerCase().includes(w.toLowerCase()))?e:s<t?(s++,Object.assign(Object.assign({},e),{selected:!0})):e}))})}{const n=e;return n.disabled||(n.selected||w&&!(null===(l=n.label)||void 0===l?void 0:l.toLowerCase().includes(w.toLowerCase())))?e:s<t?(s++,Object.assign(Object.assign({},e),{selected:!0})):e}}));j([...l]),"2.0"===a&&D(l)}else{const e=o(O,{selected:!0},(e=>{var t;return w?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(w.toLowerCase()))&&!e.disabled:!e.disabled}));j([...e]),"2.0"===a&&D(e)}else if("notSelected"===e){const e=o(O,{selected:!1},(e=>!e.disabled));j([...e]),"2.0"===a&&D(e)}},onMultiSelectClear:function(){const e=o(O,{selected:!1});j([...e]),"2.0"===a&&D(e)},onFreeFormSelect:function(e){if(!v)return void y({label:w,value:w,isFreeForm:!0,selected:!0});const t=O.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===w&&t.value===w?e:t.selected})));e&&(t.some((e=>e.label===w&&e.value===w))||t.unshift({label:w,value:w,isFreeForm:!0,selected:!0})),j([...t]),"2.0"===a&&D(t)},onMultiSelectApply:D,getSelectedOptions:L,getCurrentSelectionCount:A,isMaxSelectionsReached:E,maxSelections:g}};export{a as useDropdown};

package/dist/esm/components/dropdown/type.d.ts

@@ -8,6 +8,7 @@ export interface OpenDropdownProps {
     error?: string;
     isMultiSelect?: boolean;
     maxSelections?: number;
+    inputWidth?: string;
     width?: string;
     height?: number | string;
     allowFreeForm?: boolean;
@@ -39,6 +40,13 @@ export interface OpenDropdownProps {
         title: string;
         subTitle?: string;
     };
+    /** Enable drag-and-drop reordering of options */
+    isDraggable?: boolean;
+    hideClearButton?: boolean;
+    /** Callback when options are reordered via drag-and-drop */
+    onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
+    /** z-index of the dropdown popover. Defaults to 3. */
+    dropdownZIndex?: number;
 }
 export type GroupedOption = {
     label?: string;

package/dist/esm/components/input/Input.styled.d.ts

@@ -2,7 +2,7 @@
 import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/dist/esm/components/keywords-input/KeywordsInput.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const ChipStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/list-item/ListItem.styled.d.ts

@@ -2,7 +2,7 @@
 import type { Variant } from './ListItem';
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     variant: Variant;
     borderBottom?: string | undefined;

package/dist/esm/components/modals/modal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CentralContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CloseButtonWithTimer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     timerExists?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/pagination/Pagination.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const Pagination: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/plans/DurationSelectorStyles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const DurationSelectorStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/plans/SubscriptionPlanSelector.d.ts

@@ -30,11 +30,11 @@ type Props = {
 };
 export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BottomWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const defaultTabs: {
     key: string;

package/dist/esm/components/plans/SubscriptionPlanStyled.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const SubscriptionPlanStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isSelected: boolean;
     isManifestPlan?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NewSubscriptionStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     showMostPopularChip: boolean;
     height?: string | undefined;

package/dist/esm/components/product-picker/ProductPicker.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledZeroState: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledProductPickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/progress-bar/ProgressBarComponent.d.ts

@@ -8,7 +8,7 @@ export interface ProgressBarProps {
 export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/radioList/RadioList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const RadioListStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/sample-button/SampleButton.styled.d.ts

@@ -2,7 +2,7 @@
 import type { Color, Variant } from './SampleButton';
 export declare const SampleButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     $color: Color;
     variant: Variant;

package/dist/esm/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isBrand?: boolean | undefined;
     direction?: "row" | "column" | undefined;
@@ -9,7 +9,7 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isBrand?: boolean | undefined;
     height: number;

package/dist/esm/components/switch/Switch.d.ts

@@ -3,7 +3,7 @@ import { SwitchColorProps, SwitchProps } from './Switch.d';
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     trackLength: number;
     trackHeight: number;
@@ -16,7 +16,7 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Thumb: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     value: boolean;
     duration: number;
@@ -24,7 +24,7 @@ export declare const Thumb: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Loader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     value: boolean;
     trackColor: SwitchColorProps;

package/dist/esm/components/tabs/Tabs.styles.d.ts

@@ -2,17 +2,17 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     bgColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TabItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & TabItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TrailingNumberContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -30,9 +30,9 @@ export declare const TabItemText: import("@emotion/styled").StyledComponent<{
 } & TabItemTextProps, {}, {}>;
 export declare const EmptyTab: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const RightComponent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/tag/Tag.styled.d.ts

@@ -2,7 +2,7 @@
 import { TagTheme, TagType, TagVariant } from './model';
 export declare const Tag: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     theme: TagTheme;
     type: TagType;

package/dist/esm/components/testimonial-card/TestimonialCard.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const TestimonialCardStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -9,35 +9,35 @@ export declare const TestimonialCardStyle: import("@emotion/styled").StyledCompo
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileInfo2: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Logo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const TestimonialProfileInfo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileFooter: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FooterText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterStat: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterArrow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/esm/components/toaster/Toaster.styled.d.ts

@@ -2,7 +2,7 @@
 import { TypeOptions } from 'react-toastify';
 export declare const ToasterStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.769",
+	"version": "0.0.770-beta.1",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",