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

package/dist/cjs/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/cjs/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/cjs/components/pagination/Pagination.styled.js

@@ -1,4 +1,4 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("@emotion/styled")).default.div`
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.div`
 	display: flex;
 	align-items: center;
 	justify-content: start;

package/dist/cjs/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/cjs/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/cjs/components/plans/SubscriptionPlanSelector.js

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

package/dist/cjs/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/cjs/components/plans/SubscriptionPlanStyled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),t=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e);const a=r.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e);const a=r.default.div`
 	position: relative;
 
 	border: 1px solid ${t.COLORS.stroke.primary};

package/dist/cjs/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/cjs/components/product-picker/ProductPicker.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const i=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const i=o.default.div`
 	height: 364px;
 	background-color: ${r.DEFAULT_THEME.colorsV2.surface.standard};
 	display: flex;

package/dist/cjs/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/cjs/components/progress-bar/ProgressBarComponent.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@emotion/styled"),t=require("react-bootstrap"),o=require("../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=s(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-bootstrap"),t=require("styled-components"),o=require("../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=s(t).default.div`
 	flex: 50%;
 	.progress-bar {
 		background: ${e=>e.color};
 	}
-`;exports.ProgressBarComponent=r=>e.jsx(n,{color:r.color?r.color:o.COLORS.content.brand,children:e.jsx(t.ProgressBar,{animated:r.isAnimated,now:r.completed,style:{height:`${r.height?r.height:8}px`}})}),exports.ProgressCompletedBar=n;
+`;exports.ProgressBarComponent=t=>e.jsx(n,{color:t.color?t.color:o.COLORS.content.brand,children:e.jsx(r.ProgressBar,{animated:t.isAnimated,now:t.completed,style:{height:`${t.height?t.height:8}px`}})}),exports.ProgressCompletedBar=n;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@emotion/styled"),t=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s,i,l=n(r);exports.TextAlignment=void 0,(s=exports.TextAlignment||(exports.TextAlignment={})).RIGHT="right",s.LEFT="left",s.TOP="top",s.BOTTOM="bottom",exports.ProgressBarType=void 0,(i=exports.ProgressBarType||(exports.ProgressBarType={})).CIRCLE="circle",i.LINE="line";const a=l.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s,i,l=n(r);exports.TextAlignment=void 0,(s=exports.TextAlignment||(exports.TextAlignment={})).RIGHT="right",s.LEFT="left",s.TOP="top",s.BOTTOM="bottom",exports.ProgressBarType=void 0,(i=exports.ProgressBarType||(exports.ProgressBarType={})).CIRCLE="circle",i.LINE="line";const a=l.default.div`
 	display: flex;
 	flex-direction: ${e=>(null==e?void 0:e.alignment)===exports.TextAlignment.TOP||(null==e?void 0:e.alignment)===exports.TextAlignment.BOTTOM?"column":"row"};
 	align-items: center;

package/dist/cjs/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/cjs/components/radioList/RadioList.styled.js

@@ -1,4 +1,4 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("@emotion/styled")).default.div`
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.div`
 	.title__container {
 		margin-bottom: 12px;
 	}

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/shimmer/ShimmerComponent/ShimmerStyled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("@emotion/react");function e(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var t=e(require("@emotion/styled"));const n=i.keyframes`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("styled-components");function e(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var n=e(i);const t=i.keyframes`
   0% {
     background-position: -468px 0;
   }
@@ -6,7 +6,7 @@
   100% {
     background-position: 468px 0;
   }
-`,a=t.default.div`
+`,a=n.default.div`
 	display: flex;
 	flex-direction: ${i=>i.direction||"column"};
 	width: 100%;
@@ -23,10 +23,10 @@
 		-webkit-animation-duration: 1s;
 		-webkit-animation-fill-mode: forwards;
 		-webkit-animation-iteration-count: infinite;
-		-webkit-animation-name: ${n};
+		-webkit-animation-name: ${t};
 		-webkit-animation-timing-function: linear;
 	}
-`,o=t.default.div`
+`,o=n.default.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;
@@ -37,6 +37,6 @@
 	-webkit-animation-duration: 1s;
 	-webkit-animation-fill-mode: forwards;
 	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: ${n};
+	-webkit-animation-name: ${t};
 	-webkit-animation-timing-function: linear;
 `;exports.ShimmerComponentStyled=o,exports.ShimmerStyled=a;

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

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/switch/Switch.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@emotion/styled"),o=require("react"),l=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(t);const n=o.forwardRef((t=>{let{customThumbColor:a,trackColor:i,trackHeight:n,trackLength:c,disabled:p,value:b,onValueChange:f,duration:g,containerStyle:v,type:h,isLoading:x,"data-test":k}=t;var m,y,C,w;const{colorsV2:$}=l.DEFAULT_THEME,[j,L]=o.useState(b),[S,_]=o.useState(null!=x&&x),q=null!=g?g:200;o.useEffect((()=>{"boolean"==typeof x&&_(x)}),[x]),o.useEffect((()=>{L(b)}),[b]);const E=p?{false:$.background.inactive,true:$.background.inactive}:{false:(null!==(m=null==i?void 0:i.false)&&void 0!==m?m:"greenred"===h)?$.background.negative.light:$.background.base,true:(null!==(y=null==i?void 0:i.true)&&void 0!==y?y:"greenred"===h)?$.background.positive.vibrant:$.background.brand},O={false:"greenred"===h?$.stroke.negative.lightAlt:$.stroke.primary,true:"greenred"===h?$.background.positive.vibrant:$.background.brand},T=p?{false:$.content.inactive,true:$.content.inactive}:{false:(null!==(C=null==a?void 0:a.false)&&void 0!==C?C:"greenred"===h)?$.content.negative:$.text.primary,true:null!==(w=null==a?void 0:a.true)&&void 0!==w?w:$.surface.standard},A=h?{false:"greenred"===h?$.stroke.negative.lightAlt:$.stroke.primary,true:"greenred"===h?$.stroke.positive.lightAlt:$.background.brandLight}:{false:$.stroke.primary,true:$.stroke.primary};return r.jsx(r.Fragment,{children:r.jsx(u,{"data-test":k,trackLength:null!=c?c:40,trackHeight:null!=n?n:20,onClick:()=>function(){return e.__awaiter(this,void 0,void 0,(function*(){if(!p){"boolean"!=typeof x&&_(!0);try{yield null==f?void 0:f(!j),L(!j)}catch(e){console.log(e)}"boolean"!=typeof x&&_(!1)}}))}(),trackColor:E,value:j,style:v,borderColor:O,duration:q,disabled:p,outlineColor:A,children:S?r.jsx(s,{value:j,trackColor:E}):r.jsx(d,{value:j,duration:q,thumbColor:T})})})}));n.displayName="Switch";const u=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("styled-components"),l=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(o);const n=t.forwardRef((o=>{let{customThumbColor:a,trackColor:i,trackHeight:n,trackLength:c,disabled:p,value:b,onValueChange:f,duration:g,containerStyle:v,type:h,isLoading:x,"data-test":k}=o;var m,y,C,w;const{colorsV2:$}=l.DEFAULT_THEME,[j,L]=t.useState(b),[S,_]=t.useState(null!=x&&x),q=null!=g?g:200;t.useEffect((()=>{"boolean"==typeof x&&_(x)}),[x]),t.useEffect((()=>{L(b)}),[b]);const E=p?{false:$.background.inactive,true:$.background.inactive}:{false:(null!==(m=null==i?void 0:i.false)&&void 0!==m?m:"greenred"===h)?$.background.negative.light:$.background.base,true:(null!==(y=null==i?void 0:i.true)&&void 0!==y?y:"greenred"===h)?$.background.positive.vibrant:$.background.brand},O={false:"greenred"===h?$.stroke.negative.lightAlt:$.stroke.primary,true:"greenred"===h?$.background.positive.vibrant:$.background.brand},T=p?{false:$.content.inactive,true:$.content.inactive}:{false:(null!==(C=null==a?void 0:a.false)&&void 0!==C?C:"greenred"===h)?$.content.negative:$.text.primary,true:null!==(w=null==a?void 0:a.true)&&void 0!==w?w:$.surface.standard},A=h?{false:"greenred"===h?$.stroke.negative.lightAlt:$.stroke.primary,true:"greenred"===h?$.stroke.positive.lightAlt:$.background.brandLight}:{false:$.stroke.primary,true:$.stroke.primary};return r.jsx(r.Fragment,{children:r.jsx(u,{"data-test":k,trackLength:null!=c?c:40,trackHeight:null!=n?n:20,onClick:()=>function(){return e.__awaiter(this,void 0,void 0,(function*(){if(!p){"boolean"!=typeof x&&_(!0);try{yield null==f?void 0:f(!j),L(!j)}catch(e){console.log(e)}"boolean"!=typeof x&&_(!1)}}))}(),trackColor:E,value:j,style:v,borderColor:O,duration:q,disabled:p,outlineColor:A,children:S?r.jsx(s,{value:j,trackColor:E}):r.jsx(d,{value:j,duration:q,thumbColor:T})})})}));n.displayName="Switch";const u=i.default.div`
 	display: flex;
 	flex-direction: row;
 	margin-top: 5px;

package/dist/cjs/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/cjs/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/cjs/components/tabs/Tabs.styles.js

@@ -1,28 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),e=require("../../constants/Theme.js"),b=require("../TypographyStyle.js");function d(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}var t=d(c);const l=styled.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=t(e);const i=d.default.div`
 	display: flex;
 	flex-direction: row;
-	background-color: ${c=>c.bgColor};
-`,o=styled.div`
+	background-color: ${e=>e.bgColor};
+`,l=d.default.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: ${e=>e.isSquared?"8px 24px":"14px 24px 12px 24px"};
+	padding-bottom: ${e=>e.isSquared?"":e.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:e.DEFAULT_THEME.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 ${e.DEFAULT_THEME.colorsV2.background.inactive}`:""};
+	width: ${e=>e.hasEqualSpacing?"50%":"auto"};
+	border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:o.DEFAULT_THEME.colorsV2.background.inactive};
+	border-bottom-width: ${e=>e.isSquared?"":e.selected?"2px":"1px"};
+	border-bottom-style: ${e=>e.isSquared?"":"solid"};
+	border: ${e=>e.isSquared?e.selected?`1px solid ${e.selectedTextColor}`:`1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive}`:""};
 	flex-direction: row;
 	cursor: pointer;
-	min-width: ${c=>c.isSquared?"120px":""};
+	min-width: ${e=>e.isSquared?"120px":""};
 	&:hover {
 		background-color: rgba(0, 0, 0, 0.03);
 	}
-	background-color: ${c=>c.isSquared&&c.selected?`${e.DEFAULT_THEME.colorsV2.background.brandLight}`:""};
-`,g=styled.div`
+	background-color: ${e=>e.isSquared&&e.selected?`${o.DEFAULT_THEME.colorsV2.background.brandLight}`:""};
+`,s=d.default.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -30,14 +30,16 @@
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${c=>c.selected?e.DEFAULT_THEME.colorsV2.background.inverseLight:e.DEFAULT_THEME.colorsV2.content.secondary};
-	color: ${e.DEFAULT_THEME.colorsV2.content.primaryInverse};
+	background: ${e=>e.selected?o.DEFAULT_THEME.colorsV2.background.inverseLight:o.DEFAULT_THEME.colorsV2.content.secondary};
+	color: ${o.DEFAULT_THEME.colorsV2.content.primaryInverse};
 	border-radius: 10px;
-`,i=t.default(b.ButtonLarge,"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== */")),n=styled.div`
+`,a=d.default(r.ButtonLarge)`
+	color: ${e=>e.selected?e.selectedTextColor:e.textColor};
+`,c=d.default.div`
 	flex-grow: 1;
-	border-bottom: 1px solid ${e.DEFAULT_THEME.colorsV2.background.inactive};
-`,I=styled.div`
+	border-bottom: 1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive};
+`,n=d.default.div`
 	display: flex;
 	align-items: center;
-	border-bottom: 1px solid ${e.DEFAULT_THEME.colorsV2.background.inactive};
-`;exports.EmptyTab=n,exports.RightComponent=I,exports.TabHeader=l,exports.TabItem=o,exports.TabItemText=i,exports.TrailingNumberContainer=g;
+	border-bottom: 1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive};
+`;exports.EmptyTab=c,exports.RightComponent=n,exports.TabHeader=i,exports.TabItem=l,exports.TabItemText=a,exports.TrailingNumberContainer=s;

package/dist/cjs/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/cjs/components/tag/Tag.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),t=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=n(e).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=n(e).default.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/cjs/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;