@bikdotai/bik-component-library 0.0.289-beta--switch → 0.0.289

package/dist/esm/components/product-picker-v2/style.js

@@ -0,0 +1,70 @@
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
+	display: flex;
+	background-color: white;
+	max-height: 600px;
+	min-height: 600px;
+	flex-direction: column;
+`,o=e.div`
+	overflow-y: scroll;
+	overflow-x: hidden;
+`,n=e.div`
+	height: 64px;
+	background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
+	border-bottom: 1px solid #e0e0e0;
+	padding: 12px 24px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	justify-content: space-between;
+	align-items: center;
+`,l=e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	column-gap: 18px;
+`,d=e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`,r=e.div`
+	display: flex;
+	flex-direction: row;
+	max-height: 32px;
+	min-height: 32px;
+	background-color: ${i.background.base};
+	justify-content: flex-start;
+	align-items: center;
+	padding: 8px 16px;
+	margin-top: 16px;
+`,x=e.div`
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	padding: 12px 16px;
+	border-bottom: 1px solid #e0e0e0;
+	align-items: center;
+`,p=e.div`
+	height: 64px;
+	background-color: white;
+	border-bottom: 1px solid #e0e0e0;
+	padding: 12px 16px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: ${e=>e.isVariant?"42px":"16px"};
+`,c=e.div`
+	display: flex;
+	flex-direction: row;
+	max-height: 32px;
+	min-height: 32px;
+	background-color: ${i.background.base};
+	justify-content: flex-start;
+	align-items: center;
+	padding: 8px 16px;
+`,a=e.div`
+	display: flex;
+	flex-direction: column;
+`;export{d as CollectionCardDetailStyle,l as CollectionCardInfoStyle,n as CollectionCardStyle,a as CollectionNameHolder,t as ContainerStyle,p as ProductCardStyle,x as ProductScreenCollectionCardStyle,r as ProductScreenHeader,o as ScrollContainerStyle,c as SelectedScreenHeader};

package/dist/esm/components/product-picker-v2/utility.d.ts

@@ -0,0 +1 @@
+export declare const liftTheStateUp: (payload: any, data: any) => any;

package/dist/esm/components/product-picker-v2/utility.js

@@ -0,0 +1 @@
+import{cloneDeep as t}from"lodash";const a=(a,s)=>{const o=t(s);if(delete o.products,(a=Object.assign(Object.assign({},a),{catalogOnlyData:o})).productId&&s.products){const c=t(s.products[a.productId]);(null==c?void 0:c.variants)&&delete c.variants,a=Object.assign(Object.assign({},a),{catalogOnlyData:o,productOnlyData:c})}return a};export{a as liftTheStateUp};

package/dist/esm/components/radioButton/RadioButton.d.ts

@@ -3,6 +3,9 @@ export type RadioButtonProps = {
     isActive: boolean;
     isDisabled?: boolean;
     value?: string;
+    label?: string;
     onValueChange: (checked: boolean, value?: string) => void;
+    skipHoverState?: boolean;
+    size?: 'DEFAULT' | 'SMALL';
 };
 export declare const RadioButton: React.FC<RadioButtonProps>;

package/dist/esm/components/radioButton/RadioButton.js

@@ -1 +1 @@
-import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useState as t}from"react";import{RadioButtonContainer as s,RadioButtonIcon as n}from"./RadioButton.styled.js";import{COLORS as o}from"../../constants/Theme.js";const c=t=>{const s=t.isDisabled?o.content.inactive:t.isActive?o.background.positive.vibrant:o.content.primary;return e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("circle",{cx:"10",cy:"10",r:"9",stroke:s,strokeWidth:"2"}),t.isActive&&i("circle",{cx:"10",cy:"10",r:"5",fill:t.isDisabled?o.content.inactive:o.background.positive.vibrant})]}))},r=e=>{const[o,r]=t(e.isActive||!1),[a,l]=t(!1),[d,v]=t(!1);return i(s,Object.assign({onClick:()=>{var i;if(!e.isDisabled){const t=!o;r(t),null===(i=e.onValueChange)||void 0===i||i.call(e,t,e.value)}},onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),onMouseDown:()=>v(!0),onMouseUp:()=>v(!1)},{children:i(n,Object.assign({checked:o,hovered:a,clicked:d,isDisabled:e.isDisabled||!1},{children:i(c,{isActive:o,isDisabled:e.isDisabled||!1})}))}))};export{r as RadioButton};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{RadioButtonContainer as t,RadioButtonIcon as a}from"./RadioButton.styled.js";import{BodyPrimary as o,BodyCaption as r}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const n=s=>{const l=s.isDisabled?c.content.inactive:s.isActive?c.background.positive.vibrant:c.content.primary;return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:l,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?c.content.inactive:c.background.positive.vibrant})]}))},d=d=>{const[m,b]=s(d.isActive||!1),[v,p]=s(!1),[S,h]=s(!1);return l((()=>{b(d.isActive)}),[d.isActive]),i(t,Object.assign({onClick:()=>{var i;if(!d.isDisabled){const e=!m;b(e),null===(i=d.onValueChange)||void 0===i||i.call(d,e,d.value)}},onMouseEnter:()=>p(!d.skipHoverState),onMouseLeave:()=>p(!1),onMouseDown:()=>h(!d.skipHoverState),onMouseUp:()=>h(!1)},{children:[e(a,Object.assign({checked:m,hovered:v,clicked:S,isDisabled:d.isDisabled||!1,size:d.size},{children:e(n,{isSmall:"SMALL"===d.size,isActive:m,isDisabled:d.isDisabled||!1})})),d.label&&"SMALL"!==d.size&&e(o,Object.assign({color:d.isDisabled?c.text.disabled:c.text.primary},{children:d.label})),d.label&&"SMALL"===d.size&&e(r,Object.assign({color:d.isDisabled?c.text.disabled:c.text.primary},{children:d.label}))]}))};export{d as RadioButton};

package/dist/esm/components/radioButton/RadioButton.styled.d.ts

@@ -4,4 +4,5 @@ export declare const RadioButtonIcon: import("styled-components").StyledComponen
     hovered: boolean;
     clicked: boolean;
     isDisabled: boolean;
+    size?: "SMALL" | "DEFAULT" | undefined;
 }, never>;

package/dist/esm/components/radioButton/RadioButton.styled.js

@@ -1,20 +1,22 @@
-import e,{css as i}from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const o=e.div`
+import e,{css as i}from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const s=e.div`
 	display: inline-flex;
+	gap: 8px;
 	align-items: center;
 	cursor: pointer;
-`,s=e.div`
-	width: 20px;
-	height: 20px;
+`,o=e.div`
+	width: ${e=>"SMALL"===e.size?16:20}px;
+	height: ${e=>"SMALL"===e.size?16:20}px;
 	border-radius: 50%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	${e=>e.hovered&&i`
-			outline: 3px solid ${t.surface.hovered};
+			outline: ${"SMALL"===e.size?1.5:3}px solid
+				${t.surface.hovered};
 		`}
 	${e=>e.clicked&&!e.isDisabled&&i`
-			outline: 3px solid
+			outline: ${"SMALL"===e.size?1.5:3}px solid
 				${e.checked?t.stroke.positive.lightAlt:t.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;export{o as RadioButtonContainer,s as RadioButtonIcon};
+`;export{s as RadioButtonContainer,o as RadioButtonIcon};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioButtonProps } from "../radioButton";
+type RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {
+    value: string;
+};
+export type RadioListProps = {
+    title?: string;
+    subTitle?: string;
+    listItems: RadioListItem[];
+    onChange: (option: RadioListItem) => void;
+};
+export declare const RadioList: React.FC<RadioListProps>;
+export {};

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

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RadioButton as o}from"../radioButton/RadioButton.js";import{RadioListStyled as r}from"./RadioList.styled.js";import{TitleRegular as n,BodySecondary as a}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const l=l=>{const[m,d]=i(l.listItems);s((()=>{d(l.listItems)}),[l.listItems]);const h=(t,e)=>{let i;const s=[...m];s.forEach((s=>{s.value===e?(i=s,s.isActive=t):s.isActive=!t})),d(s),l.onChange(i)};return t(r,{children:[(l.title||l.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[l.title&&e(n,{children:l.title}),l.subTitle&&e(a,Object.assign({color:c.text.secondary},{children:l.subTitle}))]})),e("div",Object.assign({className:"list__container"},{children:m.map((t=>e(o,Object.assign({},t,{onValueChange:h}),t.value)))}))]})};export{l as RadioList};

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

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

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

@@ -0,0 +1 @@
+import t from"@emotion/styled/base";const e=t("div","production"===process.env.NODE_ENV?{target:"eik8mml0"}:{target:"eik8mml0",label:"RadioListStyled"})("production"===process.env.NODE_ENV?{name:"1w7m8q0",styles:".title__container{margin-bottom:12px;}.list__container{display:flex;flex-direction:column;gap:10px;}"}:{name:"1w7m8q0",styles:".title__container{margin-bottom:12px;}.list__container{display:flex;flex-direction:column;gap:10px;}",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJhZGlvTGlzdC5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUMwQyIsImZpbGUiOiJSYWRpb0xpc3Quc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuZXhwb3J0IGNvbnN0IFJhZGlvTGlzdFN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHQudGl0bGVfX2NvbnRhaW5lciB7XG5cdFx0bWFyZ2luLWJvdHRvbTogMTJweDtcblx0fVxuXHQubGlzdF9fY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5cdFx0Z2FwOiAxMHB4O1xuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1SYWRpb0xpc3Quc3R5bGVkLmpzLm1hcCJdfQ== */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}});export{e as RadioListStyled};

package/dist/esm/components/radioList/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioList';

package/dist/esm/components/searchBar/index.d.ts

@@ -0,0 +1 @@
+export * from './searchBar';

package/dist/esm/components/searchBar/searchBar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { InputVariant } from '../input/Input';
+export interface SearchBarProps {
+    width: string;
+    isEnabled: boolean;
+    onChange: (searchText: string) => void;
+    onEnter: (searchText: string) => void;
+    placeholder: string;
+    variant: InputVariant;
+    validate?: (input?: string | number) => [boolean, string];
+    initialValue?: string;
+    reset?: boolean;
+    onClickCross?: () => void;
+    isActive?: boolean;
+}
+export declare const SearchBar: (props: SearchBarProps) => JSX.Element;

package/dist/esm/components/searchBar/searchBar.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import a from"../../assets/icons/cross.svg.js";import{Input as s}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,C]=t("default"),[g,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),C("default"),j(""),i.onChange(""),k("none"),c("")};return e(s,{validate:u,onFocus:()=>{"default"===p&&r&&(C("clicked"),k("active"))},width:d,state:g,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:a,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||C("default"),k("none")}})};export{i as SearchBar};

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

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+export interface ShimmerBox {
+    height: string;
+    width: string;
+    marginTop?: string;
+    borderRadius?: string;
+}
+export interface BikShimmerProps {
+    boxes: ShimmerBox[];
+    isBrand?: boolean;
+    gap?: string;
+    direction?: 'row' | 'column';
+}
+export declare const BikShimmer: FunctionComponent<BikShimmerProps>;
+export default BikShimmer;

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

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{ShimmerStyled as r}from"./ShimmerStyled.js";const e=e=>i(r,Object.assign({isBrand:e.isBrand,direction:e.direction,gap:e.gap},{children:e.boxes.map(((r,e)=>i("div",{className:"shine",style:{width:r.width,height:r.height,marginTop:r.marginTop||"16px",borderRadius:r.borderRadius||"4px"}},e)))}));export{e as BikShimmer,e as default};

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

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

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

@@ -0,0 +1,9 @@
+import i from"@emotion/styled/base";import{keyframes as b}from"@emotion/react";const l=b`
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+`,t=i("div","production"===process.env.NODE_ENV?{target:"eh9q9i90"}:{target:"eh9q9i90",label:"ShimmerStyled"})("display:flex;flex-direction:",(i=>i.direction||"column"),";width:100%;height:100%;gap:",(i=>i.gap||"0px"),";.shine{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"),";background-size:800px 304px;display:inline-block;position:relative;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-name:",l,";-webkit-animation-timing-function:linear;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoaW1tZXJTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVd3QyIsImZpbGUiOiJTaGltbWVyU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5jb25zdCBrZXlmcmFtZXNBbmltYXRpb24gPSBrZXlmcmFtZXMgYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTQ2OHB4IDA7XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiA0NjhweCAwO1xuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgU2hpbW1lclN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogJHsocHJvcHMpID0+IHByb3BzLmRpcmVjdGlvbiB8fCAnY29sdW1uJ307XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGdhcDogJHsocHJvcHMpID0+IHByb3BzLmdhcCB8fCAnMHB4J307XG5cblx0LnNoaW5lIHtcblx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLmlzQnJhbmRcclxuICAgID8gJ2xpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMwKSAwJSwgcmdiYSgyMjQsIDIyNCwgMjI0LCAwLjAwKSAxMDAlKSdcclxuICAgIDogJyNmNmY3ZjggbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjZjZmN2Y4IDAlLCAjZWRlZWYxIDIwJSwgI2Y2ZjdmOCA0MCUsICNGMEYwRjAgMTAwJSkgbm8tcmVwZWF0J307XG5cdFx0YmFja2dyb3VuZC1zaXplOiA4MDBweCAzMDRweDtcblx0XHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdFx0LXdlYmtpdC1hbmltYXRpb24tZHVyYXRpb246IDFzO1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG5cdFx0LXdlYmtpdC1hbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTtcblx0XHQtd2Via2l0LWFuaW1hdGlvbi1uYW1lOiAke2tleWZyYW1lc0FuaW1hdGlvbn07XG5cdFx0LXdlYmtpdC1hbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNoaW1tZXJTdHlsZWQuanMubWFwIl19 */"));export{t as ShimmerStyled};

package/dist/esm/components/shimmer/index.d.ts

@@ -0,0 +1 @@
+export * from './ShimmerComponent/BikShimmer';

package/dist/esm/components/shimmer-image/ShimmerImage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ShimmerImageProps = {
+    imageUrl: string;
+    width: number;
+    height: number;
+    alt?: string;
+    borderRadius?: number;
+    defaultImageUrl?: string;
+};
+export declare const ShimmerImage: React.FC<ShimmerImageProps>;

package/dist/esm/components/shimmer-image/ShimmerImage.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:h,defaultImageUrl:c=a}=l;const[g,p]=t(!0),[b,u]=t(!1);return i((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),p(!1)},e.onerror=()=>{u(!0),p(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[g&&r(o,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),r("img",b?{src:c,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%"}}:{src:s,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:g?"none":"block",width:"100%",height:"100%"}})]}))};export{l as ShimmerImage};

package/dist/esm/components/shimmer-image/ShimmerImage.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
+export default _default;
+export declare const Image: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
+export declare const ImageWithError: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;

package/dist/esm/components/shimmer-image/index.d.ts

@@ -0,0 +1 @@
+export * from './ShimmerImage';

package/dist/esm/components/side-modal/SideModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ButtonProps } from '../button/model';
+export interface SideModalProps {
+    header: string;
+    children: React.ReactNode;
+    footerCustomComponent?: React.ReactNode;
+    footerDirection?: 'row' | 'row-reverse';
+    hideCrossButton?: boolean;
+    width?: string;
+    saveButtonProps: ButtonProps;
+    cancelButtonProps: ButtonProps;
+    onClose: () => void;
+    zIndex?: number;
+}
+export declare const SideModal: React.FC<SideModalProps>;

package/dist/esm/components/side-modal/SideModal.js

@@ -0,0 +1 @@
+import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import n from"../../assets/icons/cross.svg.js";import{Button as i}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as m,SideModalHeader as d,SideModalBody as a,SideModalFooter as l,FooterButtonWrapper as h}from"./SideModal.style.js";const p=p=>r.createPortal(o(c,Object.assign({zIndex:p.zIndex},{children:t(m,{children:[t(d,{children:[o(s,{children:p.header}),!p.hideCrossButton&&o(n,{width:24,height:24,onClick:p.onClose})]}),o(a,{children:p.children}),t(l,Object.assign({footerDirection:p.footerDirection},{children:[t(h,Object.assign({footerDirection:p.footerDirection},{children:[o(i,Object.assign({},p.saveButtonProps)),o(i,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:o(e,{})]}))]})})),document.body);export{p as SideModal};

package/dist/esm/components/side-modal/SideModal.style.d.ts

@@ -0,0 +1,14 @@
+export declare const SideModalStyle: import("styled-components").StyledComponent<"div", any, {
+    zIndex?: number | undefined;
+}, never>;
+export declare const SideModalContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
+    footerDirection?: "row" | "row-reverse" | undefined;
+}, never>;
+export declare const FooterButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    footerDirection?: "row" | "row-reverse" | undefined;
+}, never>;

package/dist/esm/components/side-modal/SideModal.style.js

@@ -0,0 +1,54 @@
+import t from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as e}from"../../constants/zindex.js";const o=t.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: ${t=>t.zIndex||e.SIDE_MODAL};
+	height: 100%;
+	width: 100%;
+	background-color: rgba(0, 0, 0, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+`,r=t.div`
+	height: 100%;
+	width: ${t=>t.width||"566px"};
+	background: ${i.surface.standard};
+	position: relative;
+	display: flex;
+	flex-direction: column;
+`,n=t.div`
+	width: 100%;
+	height: 60px;
+	position: sticky;
+	top: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	background: ${i.surface.standard};
+	padding: 0px 24px;
+	border-bottom: 1px solid ${i.stroke.primary};
+	svg:hover {
+		cursor: pointer;
+	}
+`,d=t.div`
+	overflow-y: auto;
+	padding: 24px;
+	height: calc(100% - 120px);
+`,s=t.div`
+	height: 60px;
+	width: 100%;
+	position: sticky;
+	bottom: 0;
+	display: flex;
+	flex-direction: ${t=>t.footerDirection||"row"};
+	justify-content: space-between;
+	align-items: center;
+	background: ${i.surface.standard};
+	border-top: 1px solid ${i.stroke.primary};
+	padding: 0px 24px;
+`,p=t.div`
+	display: flex;
+	flex-direction: ${t=>t.footerDirection||"row"};
+	gap: 8px;
+`;export{p as FooterButtonWrapper,d as SideModalBody,r as SideModalContainer,s as SideModalFooter,n as SideModalHeader,o as SideModalStyle};

package/dist/esm/components/side-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './SideModal';

package/dist/esm/components/spinner/Spinner.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import e from"react-lottie";import{COLORS as o}from"../../constants/Theme.js";import*as s from"./lotties/black.json.js";import*as r from"./lotties/brand.json.js";import*as i from"./lotties/red.json.js";import*as n from"./lotties/white.json.js";import{SizeMap as a}from"./themes.js";const m={[o.stroke.brand]:r,[o.content.primary]:s,[o.content.primaryInverse]:n,[o.content.negative]:i},p=s=>{let{size:r,color:i,className:n}=s;const p={loop:!0,autoplay:!0,animationData:m[null!=i?i:o.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return t("div",Object.assign({className:`spinner-container ${n}`},{children:t(e,{options:p,height:a[r],width:a[r],isStopped:!1,isPaused:!1})}))};p.displayName="Spinner";export{p as Spinner};
+import{jsx as t}from"react/jsx-runtime";import e from"react-lottie";import{COLORS as o}from"../../constants/Theme.js";import*as s from"./lotties/black.json.js";import*as r from"./lotties/brand.json.js";import*as i from"./lotties/red.json.js";import*as n from"./lotties/white.json.js";import{SizeMap as a}from"./themes.js";const m={[o.stroke.brand]:r,[o.content.primary]:s,[o.content.primaryInverse]:n,[o.content.negative]:i},p=s=>{let{size:r,color:i,className:n}=s;const p={loop:!0,autoplay:!0,animationData:m[null!=i?i:o.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return t("div",Object.assign({className:`spinner-container ${n}`},{children:t(e,{options:p,width:a[r],isStopped:!1,isPaused:!1})}))};p.displayName="Spinner";export{p as Spinner};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ShopifyScopeWrapper {
+    permissions: string[];
+    permissionRequestTitle: string;
+    permissionRequestSubTitle: string;
+    cacheInLocal?: boolean;
+    permissionEvaluationFunction: (permissions: string[]) => Promise<{
+        hasPermission: boolean;
+        urlForPermissions?: string;
+    }>;
+    children: React.ReactNode;
+    onPermissionClickCallback?: () => void;
+}
+export declare const ShopifyScopeWrapper: React.FC<ShopifyScopeWrapper>;

package/dist/esm/components/states/ShopifyScopeWrapper.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as i,Fragment as t}from"react/jsx-runtime";import s,{useCallback as o,useEffect as n}from"react";import{StateComponent as r,StateInterface as a}from"./StateComponent.js";const c=c=>{const[l,m]=s.useState(!1),[u,p]=s.useState(!1),[h,d]=s.useState(""),b=o((()=>c.permissions.join("-")+"-hasPermission"),[c.permissions]),g=o((()=>{const e=b(),i=localStorage.getItem(e);return!!i&&"true"===i}),[b]),f=o((e=>{const i=b();localStorage.setItem(i,e.toString())}),[b]),k=o((()=>{h?window.open(h,"_blank"):c.onPermissionClickCallback&&c.onPermissionClickCallback()}),[c,h]);return n((()=>{e(void 0,void 0,void 0,(function*(){if(c.cacheInLocal&&g())return void m(!0);const{hasPermission:e,urlForPermissions:i}=yield c.permissionEvaluationFunction(c.permissions);m(e),d(i),p(!0),c.cacheInLocal&&e&&f(e)})).then().catch()}),[g,c,f]),u?l?i(t,{children:c.children}):i(r,{states:a.WARNING,heading:c.permissionRequestTitle,subline:c.permissionRequestSubTitle,width:400,isButtonEnabled:!0,buttonText:"Grant permissions",onButtonClick:k}):i(r,{states:a.LOADING,heading:"Checking permissions",subline:"Checking if we have the right shopify scopes approved to access this page.",width:400,isButtonEnabled:!1})};export{c as ShopifyScopeWrapper};

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

@@ -1,9 +1,11 @@
 import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import React from 'react';
+import { Type } from "../button/model";
 export declare enum StateInterface {
     SUCCESS = "success",
     ERROR = "error",
-    WARNING = "warning"
+    WARNING = "warning",
+    LOADING = "loading"
 }
 export declare enum ButtonActions {
     CANCEL = "cancel",
@@ -21,9 +23,11 @@ export type StateComponentProps = {
     isButtonEnabled: boolean;
     type?: ButtonTypes;
     buttonText?: string;
+    buttonType?: Type;
     buttonIcon?: ReactJSXElement;
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width: number;
+    size?: 'DEFAULT' | 'SMALL';
 };
-export declare const StateComponent: React.FC<StateComponentProps>;
+export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;

package/dist/esm/components/states/StateComponent.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as t,Fragment as e}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import i from"../../assets/icons/errorIcon.svg.js";import s from"../../assets/icons/successIcon.svg.js";import r from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as l,TitleMedium as d,BodyPrimary as m,BodySecondary as h}from"../TypographyStyle.js";import{StateComponentContainer as u,StateIcon as p,StateHeading as L,StateSubline as g,ButtonContainer as S}from"./StateComponent.styled.js";var b,j,E;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(b||(b={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(j||(j={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(E||(E={}));const O=O=>{var y;const C=()=>f==b.SUCCESS?t(s,{}):f==b.WARNING?t(r,{}):f==b.ERROR?t(i,{}):f===b.LOADING?t(a,{size:"large"}):void 0,{states:f,heading:I,subline:R,icon:A=C(),isButtonEnabled:N,type:T,buttonText:z,buttonType:v,onButtonClick:B,leadingIcon:G,width:x}=O;return n(u,Object.assign({width:x},{children:[t(p,{children:A}),n(L,Object.assign({size:O.size},{children:["SMALL"===O.size&&t(l,{children:I}),"SMALL"!==O.size&&t(d,{children:I})]})),n(g,{children:["SMALL"!==O.size&&t(m,Object.assign({color:o.content.secondary},{children:R})),"SMALL"===O.size&&t(h,Object.assign({color:o.content.secondary},{children:R}))]}),null!==(y=O.children)&&void 0!==y?y:t(e,{}),N&&t(e,{children:n(S,Object.assign({size:O.size},{children:[T==E.DOUBLE&&t(c,{onClick:()=>B&&B(j.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>B&&B(j.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:G,buttonText:null!=z?z:"Retry",matchParentWidth:!0})]}))})]}))};export{j as ButtonActions,E as ButtonTypes,O as StateComponent,b as StateInterface};

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

@@ -2,6 +2,10 @@ export declare const StateComponentContainer: import("styled-components").Styled
     width: number;
 }, never>;
 export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {
+    size?: "SMALL" | "DEFAULT" | undefined;
+}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {
+    size?: "SMALL" | "DEFAULT" | undefined;
+}, never>;
 export declare const StateSubline: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/states/StateComponent.styled.js

@@ -0,0 +1,29 @@
+import i from"styled-components";const t=i.div`
+	width: ${i=>i.width?`${i.width}px`:"400px"};
+	position: relative;
+	border-radius: 4px;
+	padding: 32px 24px 24px 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`,e=i.div`
+	width: 64px;
+	height: 64px;
+	display: flex;
+	justify-content: center;
+	align-items: end;
+`,p=i.div`
+	margin-top: ${i=>"SMALL"===i.size?8:16}px;
+	text-align: center;
+	max-width: 100%;
+`,d=i.div`
+	display: flex;
+	margin-top: ${i=>"SMALL"===i.size?8:24}px;
+	gap: 12px;
+	width: 100%;
+`,x=i.div`
+	margin-top: 4px;
+	max-width: 100%;
+	text-align: center;
+	max-width: 100%;
+`;export{d as ButtonContainer,t as StateComponentContainer,p as StateHeading,e as StateIcon,x as StateSubline};

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

@@ -1 +1,2 @@
 export * from './StateComponent';
+export * from './ShopifyScopeWrapper';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface DeleteConfirmationModalProps {
+    header: string;
+    subHeader: string;
+    confirmationText: string;
+    onDeleteConfirmed: () => void;
+    onCancelClicked: () => void;
+}
+export declare const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps>;

package/dist/esm/components/states-modal/DeleteConfirmationModal.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{StyledModal as t}from"../modals/styledModal.js";const n=n=>e(t,{centralContainerStyles:{width:400},onClose:()=>n.onCancelClicked(),open:!0,headingTitle:n.header,headingSubtitle:n.subHeader,primaryButton:{buttonText:n.confirmationText,buttonType:"destructive",size:"small",onClick:()=>n.onDeleteConfirmed()},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:()=>n.onCancelClicked()}});export{n as DeleteConfirmationModal};

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

@@ -13,5 +13,7 @@ export type StateModalComponentProps = {
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width?: number;
+    onClose?: () => void;
+    zIndex?: number;
 };
-export declare const StateModalComponent: React.FC<StateModalComponentProps>;
+export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;

package/dist/esm/components/states-modal/StateModalComponent.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{ComponentZindex as o}from"../../constants/zindex.js";import s from"../../assets/icons/errorIcon.svg.js";import e from"../../assets/icons/successIcon.svg.js";import i from"../../assets/icons/warningIcon.svg.js";import{StyledModal as r}from"../modals/styledModal.js";import{Spinner as c}from"../spinner/Spinner.js";import{StateInterface as a,StateComponent as l}from"../states/StateComponent.js";const d=d=>{const m=()=>p==a.SUCCESS?t(e,{}):p==a.WARNING?t(i,{}):p==a.ERROR?t(s,{}):p===a.LOADING?t(c,{size:"large"}):void 0,{states:p,heading:u,subline:f,icon:g=m(),isButtonEnabled:C,type:I,buttonText:j,onButtonClick:h,leadingIcon:O,width:b,zIndex:x}=d,[S,y]=n(!0);return t(r,Object.assign({open:S,onClose:function(){d.onClose&&d.onClose(),y(!1)},closeOnOutsideClick:!(p===a.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:b},hideCrossButton:p===a.LOADING,zIndex:x||o.STATE_MODAL},{children:t(l,Object.assign({states:p,heading:u,subline:f,isButtonEnabled:C,leadingIcon:O,type:I,buttonText:j,onButtonClick:h,icon:g,width:b||400},{children:d.children}))}))};export{d as StateModalComponent};

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

@@ -1 +1,2 @@
 export * from './StateModalComponent';
+export * from './DeleteConfirmationModal';

package/dist/esm/components/stepper/Stepper.d.ts

@@ -18,5 +18,6 @@ export interface SingleStepperProps {
     eachStep: EachStep;
     isActive: boolean;
     onClickingStep: (step: EachStep) => void;
+    stepsCount: number;
 }
 export declare const Stepper: (stepperDetails: StepperProps) => JSX.Element;

package/dist/esm/components/stepper/Stepper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import s from"../../assets/icons/check.svg.js";import c from"../../assets/icons/errorInfo.svg.js";import{BodySecondary as r,BodyPrimary as n}from"../TypographyStyle.js";import{StepperContainer as o,SingleStepperChildContainer as a}from"./Stepper.styled.js";const l=t=>{const{steps:i,activeStep:s,onClickingEachStep:c}=t;return e(o,{children:i.map(((t,r)=>e(p,{eachStep:t,onClickingStep:e=>{c(e)},isActive:(null==s?void 0:s.stepKey)==(null==t?void 0:t.stepKey),isLastElement:r==i.length-1,index:r},r)))})},p=o=>{const{eachStep:l,isLastElement:p,index:d,isActive:m,onClickingStep:h}=o,{stepName:g,isCompleted:v,isError:j,isInActive:S}=l,b=()=>m?"active":v?"completed":j?"error":S?"inactive":"default";return t(a,Object.assign({onClick:()=>{!S&&h(l)},selectedState:b()},{children:[t("div",Object.assign({className:`hover-container ${S?"blocked":"pointer"} `},{children:[e("div",Object.assign({className:"badge"},{children:"completed"==b()?e(s,{height:16,width:16,color:i.content.positive}):"error"==b()?e(c,{height:16,width:16}):e(r,Object.assign({className:"badge-text"},{children:d+1}))})),e(n,Object.assign({className:"step-text",title:g},{children:g}))]})),e("div",{className:p?"":"horizontal-divider"})]}))};export{l as Stepper};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import i from"../../assets/icons/check.svg.js";import n from"../../assets/icons/errorInfo.svg.js";import{BodySecondary as o,BodyPrimary as c}from"../TypographyStyle.js";import{StepperContainer as r,SingleStepperChildContainer as a}from"./Stepper.styled.js";const l=t=>{const{steps:s,activeStep:i,onClickingEachStep:n}=t;return e(r,{children:s.map(((t,o)=>e(p,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{n(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:o==s.length-1,index:o},o)))})},p=r=>{const{eachStep:l,isLastElement:p,index:d,isActive:m,onClickingStep:h}=r,{stepName:g,isCompleted:v,isError:j,isInActive:u}=l,S=()=>m?"active":v?"completed":j?"error":u?"inactive":"default";return t(a,Object.assign({stepsCount:r.stepsCount,onClick:()=>{!u&&h(l)},selectedState:S()},{children:[t("div",Object.assign({className:`hover-container ${u?"blocked":"pointer"} `},{children:[e("div",Object.assign({className:"badge"},{children:"completed"==S()?e(i,{height:16,width:16,color:s.content.positive}):"error"==S()?e(n,{height:16,width:16}):e(o,Object.assign({className:"badge-text"},{children:d+1}))})),e(c,Object.assign({className:"step-text",title:g},{children:g}))]})),e("div",{className:p?"":"horizontal-divider"})]}))};export{l as Stepper};

package/dist/esm/components/stepper/Stepper.styled.d.ts

@@ -2,5 +2,6 @@ import { StepperStates } from './Stepper';
 export declare const StepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SingleStepperChildContainer: import("styled-components").StyledComponent<"div", any, {
     selectedState: StepperStates;
+    stepsCount: number;
 }, never>;
 export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/stepper/Stepper.styled.js

@@ -55,7 +55,7 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const o=
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 200px;
+		max-width: ${e=>e.stepsCount>2?200:250}px;
 	}
 	.horizontal-divider {
 		width: 48px;

package/dist/esm/components/stepper/WorkingStepper.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const WorkingStepper: () => JSX.Element;
 export declare enum STEPENUM {
     STEP1 = "STEP1",

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { SwitchColorProps, SwitchProps } from './Switch.d';
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SwitchContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     trackLength: number;
     trackHeight: number;
     trackColor: SwitchColorProps;
@@ -10,13 +13,19 @@ export declare const SwitchContainer: import("styled-components").StyledComponen
     duration: number;
     disabled?: boolean | undefined;
     outlineColor: SwitchColorProps;
-}, never>;
-export declare const Thumb: import("styled-components").StyledComponent<"div", any, {
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Thumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     value: boolean;
     duration: number;
     thumbColor: SwitchColorProps;
-}, never>;
-export declare const Loader: import("styled-components").StyledComponent<"div", any, {
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Loader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     value: boolean;
     trackColor: SwitchColorProps;
-}, never>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;