@bikdotai/bik-component-library 0.0.736-beta.1 → 0.0.736-beta.2

package/dist/esm/components/multi-level-dropdown/type.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { FloaterProps } from '../floater/floater';
 export interface MultiLevelDropdownProps extends FloaterProps {
     options: MultiLevelDropdownOption[];
@@ -10,16 +11,16 @@ export interface MultiLevelDropdownProps extends FloaterProps {
 export type GroupedOption = {
     label: string;
     options: SingleOption[];
-    trailingIcon?: JSX.Element;
-    leadingIcon?: JSX.Element;
+    trailingIcon?: React.JSX.Element;
+    leadingIcon?: React.JSX.Element;
 };
 export type SingleOption = {
     label: string;
     value: string;
     subText?: string;
-    trailingIcon?: JSX.Element;
-    leadingIcon?: JSX.Element;
-    customComponent?: JSX.Element;
+    trailingIcon?: React.JSX.Element;
+    leadingIcon?: React.JSX.Element;
+    customComponent?: React.JSX.Element;
     disabled?: boolean;
     selected?: boolean;
     children?: SingleOption[];

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

@@ -1,4 +1 @@
-export declare const Pagination: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+export declare const Pagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/pagination/Pagination.styled.js

@@ -1,4 +1,4 @@
-import t from"@emotion/styled";const e=t.div`
+import t from"styled-components";const e=t.div`
 	display: flex;
 	align-items: center;
 	justify-content: start;

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

@@ -1,4 +1 @@
-export declare const DurationSelectorStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+export declare const DurationSelectorStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -28,14 +28,8 @@ type Props = {
     demoLink?: string;
     onClickingBookADemo?: () => void;
 };
-export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
-export declare const BottomWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+export declare const HeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BottomWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const defaultTabs: {
     key: string;
     title: string;

package/dist/esm/components/plans/SubscriptionPlanSelector.js

@@ -1,12 +1,12 @@
-import{useState as e,createElement as o}from"react";import{jsxs as n,jsx as i,Fragment as t}from"react/jsx-runtime";import r from"@emotion/styled";import s from"../../assets/icons/check.svg.js";import d from"../../assets/icons/info.svg.js";import l from"../../assets/icons/phone.svg.js";import{StyledModal as p}from"../modals/styledModal.js";import{SubscriptionPlan as a}from"./SubscriptionPlan.js";import{COLORS as c}from"../../constants/Theme.js";import{Button as u}from"../button/Button.js";import{Tabs as m}from"../tabs/Tabs.js";import{TitleMedium as h,BodyPrimary as v,BodyCaption as g}from"../TypographyStyle.js";const x=r.div`
+import{useState as e,createElement as o}from"react";import{jsxs as n,jsx as i,Fragment as t}from"react/jsx-runtime";import r from"../../assets/icons/check.svg.js";import s from"../../assets/icons/info.svg.js";import d from"../../assets/icons/phone.svg.js";import p from"styled-components";import{StyledModal as l}from"../modals/styledModal.js";import{SubscriptionPlan as a}from"./SubscriptionPlan.js";import{COLORS as c}from"../../constants/Theme.js";import{Button as u}from"../button/Button.js";import{Tabs as m}from"../tabs/Tabs.js";import{TitleMedium as h,BodyPrimary as v,BodyCaption as g}from"../TypographyStyle.js";const x=p.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
 	padding: 24px;
-`,b=r.div`
+`,b=p.div`
 	color: ${c.content.negative};
 	padding: 0px 24px;
-`,y=r.div`
+`,y=p.div`
 	padding: 24px 24px 0px 24px;
 	display: flex;
 	align-items: center;
@@ -15,7 +15,7 @@ import{useState as e,createElement as o}from"react";import{jsxs as n,jsx as i,Fr
 		margin-top: 8px;
 		color: ${c.content.secondary} !important;
 	}
-`,f=r.div`
+`,f=p.div`
 	padding: 0px 24px 24px 24px;
 	display: flex;
 	align-items: center;
@@ -98,4 +98,4 @@ import{useState as e,createElement as o}from"react";import{jsxs as n,jsx as i,Fr
 		justify-content: flex-start;
 		gap: 8px;
 	}
-`,w=[{key:"Monthly",title:"Monthly"},{key:"yearly",title:"Yearly"}],k=r=>{var k,P,C,j,I,T,N,M,A,S,L,O,$,B;const[D,W]=e(null===(k=r.discountInputProperties)||void 0===k?void 0:k.defaultValue),E=r.staticWidthMultiplier?r.staticWidthMultiplier:275;return n(p,{centralContainerStyles:{width:r.plans.length*E},open:!0,closeOnOutsideClick:!0,onClose:r.onClose,children:[n(y,{children:[n("div",{children:[i(h,{children:r.header||"Select a plan to proceed"}),i(v,{className:"sub--header",children:r.subHeader||""})]}),r.showMonthlyTabs?i(m,{tabs:r.tabProperties&&r.tabProperties.tabs?r.tabProperties.tabs:w,onTabSelected:e=>{var o,n;return(null===(o=r.tabProperties)||void 0===o?void 0:o.onTabSelected)?null===(n=r.tabProperties)||void 0===n?void 0:n.onTabSelected(e):""},isSquared:!0}):i(t,{})]}),r.warningDescription&&i(b,{children:r.warningDescription}),i(x,{children:r.plans.map((e=>o(a,Object.assign({},e,{showMonthly:!0,showMonthlyOptions:r.showMonthlyOptions||!1,showTrialOptions:r.showTrialOptions||!1,onPlanSelect:r.onPlanSelect,key:e.planName}))))}),(r.showCouponApplicationCode||r.showBookAdemo)&&n(f,{children:[i("div",{children:r.showCouponApplicationCode&&n("div",{className:"coupon-code",children:[n("div",{className:"coupon-input",children:[i(v,{style:{color:(null===(P=r.discountInputProperties)||void 0===P?void 0:P.errorMessage)?c.content.negative:""},children:"Apply coupon code"}),n("div",{className:"button--wrapper",children:[n("div",{className:(null===(C=r.discountInputProperties)||void 0===C?void 0:C.errorMessage)?"error--border dotted--border":"dotted--border",children:[i("input",{className:"input--class",onChange:e=>{var o;W(e.target.value),null===(o=r.discountInputProperties)||void 0===o||o.onChangeText(e.target.value)},value:D,placeholder:"eg:PLAN20",disabled:null===(j=r.discountInputProperties)||void 0===j?void 0:j.isLoading}),(null===(I=r.discountInputProperties)||void 0===I?void 0:I.successText)&&n("div",{className:"success--inside--chip",children:[i(s,{height:16,width:16,color:c.content.primaryInverse}),i(g,{style:{color:c.content.primaryInverse},children:"Coupon applied"})]})]}),!(null===(T=r.discountInputProperties)||void 0===T?void 0:T.successText)&&i(u,{buttonText:"Apply",buttonType:"primary",onClick:null===(N=null==r?void 0:r.discountInputProperties)||void 0===N?void 0:N.onCouponApply,isLoading:null===(M=r.discountInputProperties)||void 0===M?void 0:M.isLoading})]}),(null===(A=r.discountInputProperties)||void 0===A?void 0:A.errorMessage)&&n("div",{className:"d-flex",style:{gap:8},children:[i(d,{height:16,width:16,color:c.content.negative}),i(g,{style:{color:c.content.negative},children:null!==(L=null===(S=r.discountInputProperties)||void 0===S?void 0:S.errorMessage)&&void 0!==L?L:"Enter a valid code"})]}),(null===(O=r.discountInputProperties)||void 0===O?void 0:O.showRemoveCoupon)&&i("div",{className:"demo--input",onClick:()=>{var e,o;W(""),(null===(e=r.discountInputProperties)||void 0===e?void 0:e.removeCoupon)&&(null===(o=r.discountInputProperties)||void 0===o||o.removeCoupon())},children:"Remove coupon"})]}),(null===($=r.discountInputProperties)||void 0===$?void 0:$.successText)&&i("div",{className:"coupon--success--chip",children:i(g,{style:{color:"#00580E",maxWidth:180},children:null===(B=r.discountInputProperties)||void 0===B?void 0:B.successText})})]})}),r.showBookAdemo&&n("div",{className:"demo--wrapper",children:[i("div",{className:"demo--phone",children:i(l,{height:16,width:16,color:c.background.brand})}),i(v,{className:"demo--input",onClick:()=>r.demoLink?window.open(r.demoLink,"_blank"):r.onClickingBookADemo?r.onClickingBookADemo():"",children:"Book a demo with the team"})]})]})]})};export{f as BottomWrapper,y as HeaderWrapper,k as SubscriptionPlanSelector,w as defaultTabs};
+`,w=[{key:"Monthly",title:"Monthly"},{key:"yearly",title:"Yearly"}],k=p=>{var k,P,C,j,I,T,N,M,A,S,L,O,$,B;const[D,W]=e(null===(k=p.discountInputProperties)||void 0===k?void 0:k.defaultValue),E=p.staticWidthMultiplier?p.staticWidthMultiplier:275;return n(l,{centralContainerStyles:{width:p.plans.length*E},open:!0,closeOnOutsideClick:!0,onClose:p.onClose,children:[n(y,{children:[n("div",{children:[i(h,{children:p.header||"Select a plan to proceed"}),i(v,{className:"sub--header",children:p.subHeader||""})]}),p.showMonthlyTabs?i(m,{tabs:p.tabProperties&&p.tabProperties.tabs?p.tabProperties.tabs:w,onTabSelected:e=>{var o,n;return(null===(o=p.tabProperties)||void 0===o?void 0:o.onTabSelected)?null===(n=p.tabProperties)||void 0===n?void 0:n.onTabSelected(e):""},isSquared:!0}):i(t,{})]}),p.warningDescription&&i(b,{children:p.warningDescription}),i(x,{children:p.plans.map((e=>o(a,Object.assign({},e,{showMonthly:!0,showMonthlyOptions:p.showMonthlyOptions||!1,showTrialOptions:p.showTrialOptions||!1,onPlanSelect:p.onPlanSelect,key:e.planName}))))}),(p.showCouponApplicationCode||p.showBookAdemo)&&n(f,{children:[i("div",{children:p.showCouponApplicationCode&&n("div",{className:"coupon-code",children:[n("div",{className:"coupon-input",children:[i(v,{style:{color:(null===(P=p.discountInputProperties)||void 0===P?void 0:P.errorMessage)?c.content.negative:""},children:"Apply coupon code"}),n("div",{className:"button--wrapper",children:[n("div",{className:(null===(C=p.discountInputProperties)||void 0===C?void 0:C.errorMessage)?"error--border dotted--border":"dotted--border",children:[i("input",{className:"input--class",onChange:e=>{var o;W(e.target.value),null===(o=p.discountInputProperties)||void 0===o||o.onChangeText(e.target.value)},value:D,placeholder:"eg:PLAN20",disabled:null===(j=p.discountInputProperties)||void 0===j?void 0:j.isLoading}),(null===(I=p.discountInputProperties)||void 0===I?void 0:I.successText)&&n("div",{className:"success--inside--chip",children:[i(r,{height:16,width:16,color:c.content.primaryInverse}),i(g,{style:{color:c.content.primaryInverse},children:"Coupon applied"})]})]}),!(null===(T=p.discountInputProperties)||void 0===T?void 0:T.successText)&&i(u,{buttonText:"Apply",buttonType:"primary",onClick:null===(N=null==p?void 0:p.discountInputProperties)||void 0===N?void 0:N.onCouponApply,isLoading:null===(M=p.discountInputProperties)||void 0===M?void 0:M.isLoading})]}),(null===(A=p.discountInputProperties)||void 0===A?void 0:A.errorMessage)&&n("div",{className:"d-flex",style:{gap:8},children:[i(s,{height:16,width:16,color:c.content.negative}),i(g,{style:{color:c.content.negative},children:null!==(L=null===(S=p.discountInputProperties)||void 0===S?void 0:S.errorMessage)&&void 0!==L?L:"Enter a valid code"})]}),(null===(O=p.discountInputProperties)||void 0===O?void 0:O.showRemoveCoupon)&&i("div",{className:"demo--input",onClick:()=>{var e,o;W(""),(null===(e=p.discountInputProperties)||void 0===e?void 0:e.removeCoupon)&&(null===(o=p.discountInputProperties)||void 0===o||o.removeCoupon())},children:"Remove coupon"})]}),(null===($=p.discountInputProperties)||void 0===$?void 0:$.successText)&&i("div",{className:"coupon--success--chip",children:i(g,{style:{color:"#00580E",maxWidth:180},children:null===(B=p.discountInputProperties)||void 0===B?void 0:B.successText})})]})}),p.showBookAdemo&&n("div",{className:"demo--wrapper",children:[i("div",{className:"demo--phone",children:i(d,{height:16,width:16,color:c.background.brand})}),i(v,{className:"demo--input",onClick:()=>p.demoLink?window.open(p.demoLink,"_blank"):p.onClickingBookADemo?p.onClickingBookADemo():"",children:"Book a demo with the team"})]})]})]})};export{f as BottomWrapper,y as HeaderWrapper,k as SubscriptionPlanSelector,w as defaultTabs};

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

@@ -1,14 +1,8 @@
-export declare const SubscriptionPlanStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+export declare const SubscriptionPlanStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isSelected: boolean;
     isManifestPlan?: boolean;
-}, JSX.IntrinsicElements, {}>;
-export declare const NewSubscriptionStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+}>> & string;
+export declare const NewSubscriptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     showMostPopularChip: boolean;
     height?: string;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/plans/SubscriptionPlanStyled.js

@@ -1,4 +1,4 @@
-import o from"@emotion/styled";import{COLORS as t}from"../../constants/Theme.js";const r=o.div`
+import o from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const r=o.div`
 	position: relative;
 
 	border: 1px solid ${t.stroke.primary};

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

@@ -1,8 +1,2 @@
-export declare const StyledZeroState: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
-export declare const StyledProductPickerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+export declare const StyledZeroState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledProductPickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/product-picker/ProductPicker.styled.js

@@ -1,4 +1,4 @@
-import r from"@emotion/styled";import{DEFAULT_THEME as e}from"../../constants/Theme.js";const o=r.div`
+import r from"styled-components";import{DEFAULT_THEME as e}from"../../constants/Theme.js";const o=r.div`
 	height: 364px;
 	background-color: ${e.colorsV2.surface.standard};
 	display: flex;

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

@@ -5,9 +5,6 @@ export interface ProgressBarProps {
     height?: number;
 }
 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;
-    as?: React.ElementType;
-} & {
+export declare const ProgressCompletedBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     color: string;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/progress-bar/ProgressBarComponent.js

@@ -1,6 +1,6 @@
-import{jsx as o}from"react/jsx-runtime";import t from"@emotion/styled";import{ProgressBar as r}from"react-bootstrap";import{COLORS as e}from"../../constants/Theme.js";const i=t=>o(m,{color:t.color?t.color:e.content.brand,children:o(r,{animated:t.isAnimated,now:t.completed,style:{height:`${t.height?t.height:8}px`}})}),m=t.div`
+import{jsx as o}from"react/jsx-runtime";import{ProgressBar as t}from"react-bootstrap";import r from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const m=r=>o(n,{color:r.color?r.color:e.content.brand,children:o(t,{animated:r.isAnimated,now:r.completed,style:{height:`${r.height?r.height:8}px`}})}),n=r.div`
 	flex: 50%;
 	.progress-bar {
 		background: ${o=>o.color};
 	}
-`;export{i as ProgressBarComponent,m as ProgressCompletedBar};
+`;export{m as ProgressBarComponent,n as ProgressCompletedBar};

package/dist/esm/components/progress-bar-v2/ProgressBarV2.js

@@ -1,4 +1,4 @@
-import{jsxs as r,jsx as o}from"react/jsx-runtime";import e from"@emotion/styled";import{BodyTiny as i}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";var t,s;!function(r){r.RIGHT="right",r.LEFT="left",r.TOP="top",r.BOTTOM="bottom"}(t||(t={})),function(r){r.CIRCLE="circle",r.LINE="line"}(s||(s={}));const a=e=>{const{type:a,progress:p,progressBarThickness:u,size:v,color:T,text:m,textPosition:$,showProgress:k,matchParentWidth:x=!1}=e;let b=$;return b||(b=t.LEFT),r(d,{alignment:b,children:[k&&(b===t.TOP||b===t.LEFT)&&o(i,{style:{marginBottom:b===t.TOP?"8px":void 0,marginRight:b===t.LEFT?"8px":void 0},color:n.content.secondary,children:null!=m?m:`${p}% completed...`}),a===s.LINE?o(g,{size:v,progressBarThickness:u,matchParentWidth:x,children:o(h,{progress:p,color:T})}):o(l,{progress:p,color:T,size:v,children:o(c,{progress:p,size:v,progressBarThickness:u})}),k&&(b===t.BOTTOM||b===t.RIGHT)&&o(i,{style:{marginTop:b===t.BOTTOM?"8px":void 0,marginLeft:b===t.RIGHT?"8px":void 0},color:n.content.secondary,children:null!=m?m:`${p}% completed...`})]})},d=e.div`
+import{jsxs as r,jsx as o}from"react/jsx-runtime";import e from"styled-components";import{BodyTiny as i}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";var t,s;!function(r){r.RIGHT="right",r.LEFT="left",r.TOP="top",r.BOTTOM="bottom"}(t||(t={})),function(r){r.CIRCLE="circle",r.LINE="line"}(s||(s={}));const a=e=>{const{type:a,progress:h,progressBarThickness:u,size:v,color:T,text:m,textPosition:$,showProgress:k,matchParentWidth:x=!1}=e;let b=$;return b||(b=t.LEFT),r(d,{alignment:b,children:[k&&(b===t.TOP||b===t.LEFT)&&o(i,{style:{marginBottom:b===t.TOP?"8px":void 0,marginRight:b===t.LEFT?"8px":void 0},color:n.content.secondary,children:null!=m?m:`${h}% completed...`}),a===s.LINE?o(g,{size:v,progressBarThickness:u,matchParentWidth:x,children:o(p,{progress:h,color:T})}):o(l,{progress:h,color:T,size:v,children:o(c,{progress:h,size:v,progressBarThickness:u})}),k&&(b===t.BOTTOM||b===t.RIGHT)&&o(i,{style:{marginTop:b===t.BOTTOM?"8px":void 0,marginLeft:b===t.RIGHT?"8px":void 0},color:n.content.secondary,children:null!=m?m:`${h}% completed...`})]})},d=e.div`
 	display: flex;
 	flex-direction: ${r=>(null==r?void 0:r.alignment)===t.TOP||(null==r?void 0:r.alignment)===t.BOTTOM?"column":"row"};
 	align-items: center;
@@ -31,7 +31,7 @@ import{jsxs as r,jsx as o}from"react/jsx-runtime";import e from"@emotion/styled"
 	background-color: ${n.background.inactive};
 	border-radius: 4px;
 	overflow: hidden;
-`,h=e.div`
+`,p=e.div`
 	height: 100%;
 	width: ${r=>r.progress}%;
 	background-color: ${r=>{var o;return null!==(o=r.color)&&void 0!==o?o:n.background.brand}};

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

@@ -1,4 +1 @@
-export declare const RadioListStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+export declare const RadioListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/radioList/RadioList.styled.js

@@ -1,4 +1,4 @@
-import t from"@emotion/styled";const o=t.div`
+import t from"styled-components";const o=t.div`
 	.title__container {
 		margin-bottom: 12px;
 	}

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

@@ -1,8 +1,5 @@
 import type { Color, Variant } from './SampleButton';
-export declare const SampleButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+export declare const SampleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $color: Color;
     variant: Variant;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/sample-button/themes.d.ts

@@ -1,2 +1,2 @@
 import type { Color, Variant } from './SampleButton';
-export declare function getTheme(color: Color, variant: Variant): import("@emotion/utils").SerializedStyles;
+export declare function getTheme(color: Color, variant: Variant): import("styled-components").RuleSet<object>;

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

@@ -1,17 +1,11 @@
-export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+export declare const ShimmerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isBrand?: boolean;
     direction?: "row" | "column";
     gap?: string;
-}, JSX.IntrinsicElements, {}>;
-export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+}>> & string;
+export declare const ShimmerComponentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isBrand?: boolean;
     height: number;
     width: number;
     marginTop?: number;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/shimmer/ShimmerComponent/ShimmerStyled.js

@@ -1,4 +1,4 @@
-import{keyframes as i}from"@emotion/react";import n from"@emotion/styled";const t=i`
+import i,{keyframes as n}from"styled-components";const t=n`
   0% {
     background-position: -468px 0;
   }
@@ -6,7 +6,7 @@ import{keyframes as i}from"@emotion/react";import n from"@emotion/styled";const
   100% {
     background-position: 468px 0;
   }
-`,a=n.div`
+`,a=i.div`
 	display: flex;
 	flex-direction: ${i=>i.direction||"column"};
 	width: 100%;
@@ -26,7 +26,7 @@ import{keyframes as i}from"@emotion/react";import n from"@emotion/styled";const
 		-webkit-animation-name: ${t};
 		-webkit-animation-timing-function: linear;
 	}
-`,e=n.div`
+`,e=i.div`
 	border-radius: 4px;
 	background: ${i=>i.isBrand?"linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(224, 224, 224, 0.00) 100%)":"#f6f7f8 linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #F0F0F0 100%) no-repeat"};
 	width: ${i=>i.width}px;

package/dist/esm/components/star-rating/StarRating.js

@@ -1,7 +1,7 @@
-import{jsx as e}from"react/jsx-runtime";import o from"@emotion/styled";import{useState as l,useMemo as r,useEffect as t}from"react";import{Star as i}from"./Star.js";const n=o.div`
+import{jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as l,useEffect as r}from"react";import t from"styled-components";import{Star as i}from"./Star.js";const n=t.div`
 	display: flex;
 	flex-direction: row;
 	gap: 12px;
 	justify-content: start;
 	align-items: center;
-`,m=o=>{let{emptyColor:m,filledColor:a,onChange:s,value:d,maxValue:p,starSize:f,mode:c,version:u="v1"}=o;const[v,x]=l(null!=d?d:0),[y,C]=l(!1),[g,j]=l(0),h=r((()=>Array(null!=p?p:5).fill(null).map(((e,o)=>o+1))),[p]);return t((()=>{y&&s(v)}),[v]),t((()=>{C(!0)}),[]),e(n,{children:h.map((o=>e(i,{asHovered:!!g&&o<=g,size:null!=f?f:24,filled:g?void 0:o<=v,emptyColor:m,filledColor:a,onClick:e=>{x("de-select"===e?o<v?o:o-1:o)},onHover:e=>{j(e?o:0)},mode:c,version:u},o)))})};export{m as StarRating};
+`,m=t=>{let{emptyColor:m,filledColor:a,onChange:s,value:d,maxValue:p,starSize:c,mode:f,version:u="v1"}=t;const[v,x]=o(null!=d?d:0),[y,C]=o(!1),[g,j]=o(0),h=l((()=>Array(null!=p?p:5).fill(null).map(((e,o)=>o+1))),[p]);return r((()=>{y&&s(v)}),[v]),r((()=>{C(!0)}),[]),e(n,{children:h.map((o=>e(i,{asHovered:!!g&&o<=g,size:null!=c?c:24,filled:g?void 0:o<=v,emptyColor:m,filledColor:a,onClick:e=>{x("de-select"===e?o<v?o:o-1:o)},onHover:e=>{j(e?o:0)},mode:f,version:u},o)))})};export{m as StarRating};

package/dist/esm/components/states/StateComponent.d.ts

@@ -1,4 +1,3 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import React from 'react';
 import { Type } from '@src/components/button/model';
 export declare enum StateInterface {
@@ -23,12 +22,12 @@ export type StateComponentProps = {
     heading: string;
     subline: string;
     errorText?: string;
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     isButtonEnabled: boolean;
     type?: ButtonTypes;
     buttonText?: string;
     buttonType?: Type;
-    buttonIcon?: ReactJSXElement;
+    buttonIcon?: React.ReactElement;
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width: number;

package/dist/esm/components/states-modal/StateModalComponent.d.ts

@@ -1,4 +1,3 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import React from 'react';
 import { Type } from '../button/model';
 import { ButtonActions, ButtonTypes, StateInterface } from '../states/StateComponent';
@@ -6,11 +5,11 @@ export type StateModalComponentProps = {
     states: StateInterface;
     heading: string;
     subline: string;
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     isButtonEnabled: boolean;
     type?: ButtonTypes;
     buttonText?: string;
-    buttonIcon?: ReactJSXElement;
+    buttonIcon?: React.ReactElement;
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width?: number;

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

@@ -1,9 +1,6 @@
 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;
-    as?: React.ElementType;
-} & {
+export declare const SwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     trackLength: number;
     trackHeight: number;
     trackColor: SwitchColorProps;
@@ -12,19 +9,13 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
     duration: number;
     disabled?: boolean;
     outlineColor: SwitchColorProps;
-}, JSX.IntrinsicElements, {}>;
-export declare const Thumb: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+}>> & string;
+export declare const Thumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     value: boolean;
     duration: number;
     thumbColor: SwitchColorProps;
-}, JSX.IntrinsicElements, {}>;
-export declare const Loader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+}>> & string;
+export declare const Loader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     value: boolean;
     trackColor: SwitchColorProps;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/switch/Switch.js

@@ -1,4 +1,4 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as o}from"react/jsx-runtime";import t from"@emotion/styled";import{forwardRef as l,useState as i,useEffect as a}from"react";import{COLORS as n,DEFAULT_THEME as d}from"../../constants/Theme.js";const u=l((t=>{let{customThumbColor:l,trackColor:n,trackHeight:u,trackLength:b,disabled:g,value:v,onValueChange:f,duration:h,containerStyle:k,type:m,isLoading:x,"data-test":y}=t;var C,$,w,L;const{colorsV2:j}=d,[A,H]=i(v),[S,T]=i(null!=x&&x),V=null!=h?h:200;a((()=>{"boolean"==typeof x&&T(x)}),[x]),a((()=>{H(v)}),[v]);const _=g?{false:j.background.inactive,true:j.background.inactive}:{false:(null!==(C=null==n?void 0:n.false)&&void 0!==C?C:"greenred"===m)?j.background.negative.light:j.background.base,true:(null!==($=null==n?void 0:n.true)&&void 0!==$?$:"greenred"===m)?j.background.positive.vibrant:j.background.brand},N={false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.background.positive.vibrant:j.background.brand},q=g?{false:j.content.inactive,true:j.content.inactive}:{false:(null!==(w=null==l?void 0:l.false)&&void 0!==w?w:"greenred"===m)?j.content.negative:j.text.primary,true:null!==(L=null==l?void 0:l.true)&&void 0!==L?L:j.surface.standard},z=m?{false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.stroke.positive.lightAlt:j.background.brandLight}:{false:j.stroke.primary,true:j.stroke.primary};return r(o,{children:r(s,{"data-test":y,trackLength:null!=b?b:40,trackHeight:null!=u?u:20,onClick:()=>function(){return e(this,void 0,void 0,(function*(){if(!g){"boolean"!=typeof x&&T(!0);try{yield null==f?void 0:f(!A),H(!A)}catch(e){console.log(e)}"boolean"!=typeof x&&T(!1)}}))}(),trackColor:_,value:A,style:k,borderColor:N,duration:V,disabled:g,outlineColor:z,children:S?r(p,{value:A,trackColor:_}):r(c,{value:A,duration:V,thumbColor:q})})})}));u.displayName="Switch";const s=t.div`
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,useState as l,useEffect as i}from"react";import a from"styled-components";import{COLORS as n,DEFAULT_THEME as d}from"../../constants/Theme.js";const u=t((t=>{let{customThumbColor:a,trackColor:n,trackHeight:u,trackLength:b,disabled:g,value:v,onValueChange:f,duration:h,containerStyle:k,type:m,isLoading:x,"data-test":y}=t;var C,$,w,L;const{colorsV2:j}=d,[A,H]=l(v),[S,T]=l(null!=x&&x),V=null!=h?h:200;i((()=>{"boolean"==typeof x&&T(x)}),[x]),i((()=>{H(v)}),[v]);const _=g?{false:j.background.inactive,true:j.background.inactive}:{false:(null!==(C=null==n?void 0:n.false)&&void 0!==C?C:"greenred"===m)?j.background.negative.light:j.background.base,true:(null!==($=null==n?void 0:n.true)&&void 0!==$?$:"greenred"===m)?j.background.positive.vibrant:j.background.brand},N={false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.background.positive.vibrant:j.background.brand},q=g?{false:j.content.inactive,true:j.content.inactive}:{false:(null!==(w=null==a?void 0:a.false)&&void 0!==w?w:"greenred"===m)?j.content.negative:j.text.primary,true:null!==(L=null==a?void 0:a.true)&&void 0!==L?L:j.surface.standard},z=m?{false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.stroke.positive.lightAlt:j.background.brandLight}:{false:j.stroke.primary,true:j.stroke.primary};return r(o,{children:r(s,{"data-test":y,trackLength:null!=b?b:40,trackHeight:null!=u?u:20,onClick:()=>function(){return e(this,void 0,void 0,(function*(){if(!g){"boolean"!=typeof x&&T(!0);try{yield null==f?void 0:f(!A),H(!A)}catch(e){console.log(e)}"boolean"!=typeof x&&T(!1)}}))}(),trackColor:_,value:A,style:k,borderColor:N,duration:V,disabled:g,outlineColor:z,children:S?r(p,{value:A,trackColor:_}):r(c,{value:A,duration:V,thumbColor:q})})})}));u.displayName="Switch";const s=a.div`
 	display: flex;
 	flex-direction: row;
 	margin-top: 5px;
@@ -27,7 +27,7 @@ import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as
 		outline-offset: 2px;
 		outline-width: 2px;
 	}
-`,c=t.div`
+`,c=a.div`
 	height: 12px;
 	width: 12px;
 	margin: 4px;
@@ -36,7 +36,7 @@ import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as
 	left: ${e=>e.value?"calc(100% - 20px)":"0px"};
 	transition: ${e=>e.duration/1e3+"s ease all"};
 	background-color: ${e=>e.value?e.thumbColor.true:e.thumbColor.false};
-`,p=t.div`
+`,p=a.div`
 	border-width: 2px;
 	border-style: solid;
 	border-color: ${e=>e.value?e.trackColor.true:e.trackColor.false};

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

@@ -37,7 +37,7 @@ export interface TabViewHeaderProps {
     }>;
     selectedTab?: string;
     extendedBorder?: boolean;
-    rightComponent?: JSX.Element;
+    rightComponent?: React.JSX.Element;
     size?: 'small' | 'default';
     isSquared?: boolean;
     containerStyles?: React.CSSProperties;

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

@@ -1,26 +1,14 @@
-import { TabItemProps } from './Tabs.model';
-export declare const TabHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+import { TabItemProps, TabItemTextProps } from './Tabs.model';
+export declare const TabHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     bgColor?: string;
-}, JSX.IntrinsicElements, {}>;
-export declare const TabItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & TabItemProps, JSX.IntrinsicElements, {}>;
-export declare const TrailingNumberContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+}>> & string;
+export declare const TabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabItemProps>> & string;
+export declare const TrailingNumberContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     selected: boolean;
-}, JSX.IntrinsicElements, {}>;
-export declare const TabItemText: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const EmptyTab: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
-export declare const RightComponent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;
+export declare const TabItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
+    numberOfLines?: number;
+    color?: string;
+}, TabItemTextProps>> & string;
+export declare const EmptyTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RightComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/tabs/Tabs.styles.js

@@ -1,28 +1,28 @@
-import c from"@emotion/styled/base";import{DEFAULT_THEME as b}from"../../constants/Theme.js";import{ButtonLarge as d}from"../TypographyStyle.js";const l=styled.div`
+import o from"styled-components";import{DEFAULT_THEME as e}from"../../constants/Theme.js";import{ButtonLarge as r}from"../TypographyStyle.js";const t=o.div`
 	display: flex;
 	flex-direction: row;
-	background-color: ${c=>c.bgColor};
-`,e=styled.div`
+	background-color: ${o=>o.bgColor};
+`,d=o.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
-	padding: ${c=>c.isSquared?"8px 24px":"14px 24px 12px 24px"};
-	padding-bottom: ${c=>c.isSquared?"":c.selected?"12px":"13px"};
+	padding: ${o=>o.isSquared?"8px 24px":"14px 24px 12px 24px"};
+	padding-bottom: ${o=>o.isSquared?"":o.selected?"12px":"13px"};
 	align-items: center;
 	justify-content: center;
-	width: ${c=>c.hasEqualSpacing?"50%":"auto"};
-	border-bottom-color: ${c=>c.isSquared?"":c.selected?c.selectedTextColor:b.colorsV2.background.inactive};
-	border-bottom-width: ${c=>c.isSquared?"":c.selected?"2px":"1px"};
-	border-bottom-style: ${c=>c.isSquared?"":"solid"};
-	border: ${c=>c.isSquared?c.selected?`1px solid ${c.selectedTextColor}`:`1px solid ${b.colorsV2.background.inactive}`:""};
+	width: ${o=>o.hasEqualSpacing?"50%":"auto"};
+	border-bottom-color: ${o=>o.isSquared?"":o.selected?o.selectedTextColor:e.colorsV2.background.inactive};
+	border-bottom-width: ${o=>o.isSquared?"":o.selected?"2px":"1px"};
+	border-bottom-style: ${o=>o.isSquared?"":"solid"};
+	border: ${o=>o.isSquared?o.selected?`1px solid ${o.selectedTextColor}`:`1px solid ${e.colorsV2.background.inactive}`:""};
 	flex-direction: row;
 	cursor: pointer;
-	min-width: ${c=>c.isSquared?"120px":""};
+	min-width: ${o=>o.isSquared?"120px":""};
 	&:hover {
 		background-color: rgba(0, 0, 0, 0.03);
 	}
-	background-color: ${c=>c.isSquared&&c.selected?`${b.colorsV2.background.brandLight}`:""};
-`,o=styled.div`
+	background-color: ${o=>o.isSquared&&o.selected?`${e.colorsV2.background.brandLight}`:""};
+`,i=o.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -30,14 +30,16 @@ import c from"@emotion/styled/base";import{DEFAULT_THEME as b}from"../../constan
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${c=>c.selected?b.colorsV2.background.inverseLight:b.colorsV2.content.secondary};
-	color: ${b.colorsV2.content.primaryInverse};
+	background: ${o=>o.selected?e.colorsV2.background.inverseLight:e.colorsV2.content.secondary};
+	color: ${e.colorsV2.content.primaryInverse};
 	border-radius: 10px;
-`,t=c(d,"production"===process.env.NODE_ENV?{target:"e1yo8x5a0"}:{target:"e1yo8x5a0",label:"TabItemText"})("color:",(c=>c.selected?c.selectedTextColor:c.textColor),";"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RCtDIiwiZmlsZSI6IlRhYnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IERFRkFVTFRfVEhFTUUgfSBmcm9tICdAc3JjL2NvbnN0YW50cy9UaGVtZSc7XG5pbXBvcnQgeyBCdXR0b25MYXJnZSB9IGZyb20gJy4uL1R5cG9ncmFwaHlTdHlsZSc7XG5leHBvcnQgY29uc3QgVGFiSGVhZGVyID0gc3R5bGVkWydkaXYnXSBgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBwcm9wcy5iZ0NvbG9yfTtcbmA7XG5leHBvcnQgY29uc3QgVGFiSXRlbSA9IHN0eWxlZFsnZGl2J10gYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRjb2x1bW4tZ2FwOiA4cHg7XG5cdHBhZGRpbmc6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNTcXVhcmVkID8gJzhweCAyNHB4JyA6ICcxNHB4IDI0cHggMTJweCAyNHB4Jyl9O1xuXHRwYWRkaW5nLWJvdHRvbTogJHsocHJvcHMpID0+IHByb3BzLmlzU3F1YXJlZCA/ICcnIDogcHJvcHMuc2VsZWN0ZWQgPyAnMTJweCcgOiAnMTNweCd9O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0d2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuaGFzRXF1YWxTcGFjaW5nID8gJzUwJScgOiAnYXV0bycpfTtcblx0Ym9yZGVyLWJvdHRvbS1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmlzU3F1YXJlZFxuICAgID8gJydcbiAgICA6IHByb3BzLnNlbGVjdGVkXG4gICAgICAgID8gcHJvcHMuc2VsZWN0ZWRUZXh0Q29sb3JcbiAgICAgICAgOiBERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuaW5hY3RpdmV9O1xuXHRib3JkZXItYm90dG9tLXdpZHRoOiAkeyhwcm9wcykgPT4gcHJvcHMuaXNTcXVhcmVkID8gJycgOiBwcm9wcy5zZWxlY3RlZCA/ICcycHgnIDogJzFweCd9O1xuXHRib3JkZXItYm90dG9tLXN0eWxlOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzU3F1YXJlZCA/ICcnIDogJ3NvbGlkJyl9O1xuXHRib3JkZXI6ICR7KHByb3BzKSA9PiBwcm9wcy5pc1NxdWFyZWRcbiAgICA/IHByb3BzLnNlbGVjdGVkXG4gICAgICAgID8gYDFweCBzb2xpZCAke3Byb3BzLnNlbGVjdGVkVGV4dENvbG9yfWBcbiAgICAgICAgOiBgMXB4IHNvbGlkICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5iYWNrZ3JvdW5kLmluYWN0aXZlfWBcbiAgICA6ICcnfTtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0Y3Vyc29yOiBwb2ludGVyO1xuXHRtaW4td2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNTcXVhcmVkID8gJzEyMHB4JyA6ICcnKX07XG5cdCY6aG92ZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC4wMyk7XG5cdH1cblx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmlzU3F1YXJlZFxuICAgID8gcHJvcHMuc2VsZWN0ZWRcbiAgICAgICAgPyBgJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuYnJhbmRMaWdodH1gXG4gICAgICAgIDogJydcbiAgICA6ICcnfTtcbmA7XG5leHBvcnQgY29uc3QgVHJhaWxpbmdOdW1iZXJDb250YWluZXIgPSBzdHlsZWRbJ2RpdiddIGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Z2FwOiA2cHg7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRtaW4td2lkdGg6IDIwcHg7XG5cdGhlaWdodDogMjBweDtcblx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLnNlbGVjdGVkXG4gICAgPyBERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuaW52ZXJzZUxpZ2h0XG4gICAgOiBERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmNvbnRlbnQuc2Vjb25kYXJ5fTtcblx0Y29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5jb250ZW50LnByaW1hcnlJbnZlcnNlfTtcblx0Ym9yZGVyLXJhZGl1czogMTBweDtcbmA7XG5leHBvcnQgY29uc3QgVGFiSXRlbVRleHQgPSBzdHlsZWQoQnV0dG9uTGFyZ2UpIGBcblx0Y29sb3I6ICR7KHByb3BzKSA9PiBwcm9wcy5zZWxlY3RlZCA/IHByb3BzLnNlbGVjdGVkVGV4dENvbG9yIDogcHJvcHMudGV4dENvbG9yfTtcbmA7XG5leHBvcnQgY29uc3QgRW1wdHlUYWIgPSBzdHlsZWRbJ2RpdiddIGBcblx0ZmxleC1ncm93OiAxO1xuXHRib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuaW5hY3RpdmV9O1xuYDtcbmV4cG9ydCBjb25zdCBSaWdodENvbXBvbmVudCA9IHN0eWxlZFsnZGl2J10gYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuaW5hY3RpdmV9O1xuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhYnMuc3R5bGVzLmpzLm1hcCJdfQ== */")),g=styled.div`
+`,c=o(r)`
+	color: ${o=>o.selected?o.selectedTextColor:o.textColor};
+`,l=o.div`
 	flex-grow: 1;
-	border-bottom: 1px solid ${b.colorsV2.background.inactive};
-`,i=styled.div`
+	border-bottom: 1px solid ${e.colorsV2.background.inactive};
+`,s=o.div`
 	display: flex;
 	align-items: center;
-	border-bottom: 1px solid ${b.colorsV2.background.inactive};
-`;export{g as EmptyTab,i as RightComponent,l as TabHeader,e as TabItem,t as TabItemText,o as TrailingNumberContainer};
+	border-bottom: 1px solid ${e.colorsV2.background.inactive};
+`;export{l as EmptyTab,s as RightComponent,t as TabHeader,d as TabItem,c as TabItemText,i as TrailingNumberContainer};

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

@@ -1,8 +1,5 @@
 import { TagTheme, TagType, TagVariant } from './model';
-export declare const Tag: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
+export declare const Tag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: TagTheme;
     type: TagType;
     variant: TagVariant;
@@ -11,4 +8,4 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
     alignIcon?: string;
     noBorder?: boolean;
     contentPadding?: number;
-}, JSX.IntrinsicElements, {}>;
+}>> & string;

package/dist/esm/components/tag/Tag.styled.js

@@ -1,4 +1,4 @@
-import e from"@emotion/styled";import{getPadding as t,getBackgroundColor as n,generateBorder as i,getTextColor as r}from"./themes.js";const a=e.div`
+import e from"styled-components";import{getPadding as t,getBackgroundColor as n,generateBorder as i,getTextColor as r}from"./themes.js";const a=e.div`
 	cursor: ${e=>{var t;return null!==(t=e.cursor)&&void 0!==t?t:"default"}};
 	${e=>"regular"===e.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;"}
 	.container {

package/dist/esm/components/tag/model.d.ts

@@ -96,7 +96,7 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
     cursor?: string;
     alignIcon?: string;
     noBorder?: boolean;
-    tagHtmlText?: JSX.Element;
+    tagHtmlText?: React.JSX.Element;
     contentPadding?: number;
     tagColor?: string;
     numberOfLines?: number;