@bikdotai/bik-component-library 0.0.6-beta → 0.0.6-beta.2

package/dist/esm/components/opennedDropdown/components/searchbox/ZeroState.js

@@ -0,0 +1,16 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"styled-components";import{TitleRegular as n,BodyCaption as o}from"../../../TypographyStyle.js";import{COLORS as i}from"../../../../constants/Theme.js";import s from"../../../../assets/icons/alert.svg.js";const c=r.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+`,l=r.div`
+	background: ${i.background.base};
+	width: 48px;
+	height: 48px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+`,d=r=>{let{searchedString:d}=r;return e(c,{children:[t(l,{children:t(s,{color:i.content.placeholder,height:24,width:24})}),t(n,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:"No results found"})),e(o,Object.assign({style:{marginTop:4,color:i.content.secondary}},{children:['Sorry we could not find any results for "',null!=d?d:"",'"']}))]})};export{d as SearchZeroState};

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

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

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

@@ -0,0 +1,27 @@
+export interface OpenDropdownProps {
+    options: DropdownOption[];
+    isSearchable?: boolean;
+    error?: string;
+    disabledFocus?: boolean;
+    isMultiSelect?: boolean;
+    width?: number | string;
+    height?: number | string;
+    allowFreeForm?: boolean;
+    onClose?: () => void;
+    onSelect?: (option: SingleOption | SingleOption[]) => void;
+}
+export type GroupedOption = {
+    label?: string;
+    options: SingleOption[];
+};
+export type SingleOption = {
+    label?: string;
+    value?: string;
+    descriptions?: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+export type MultiSelectOption = SingleOption & {
+    isFreeForm?: boolean;
+};
+export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/esm/components/opennedDropdown/utils/iterationOnOptions.d.ts

@@ -0,0 +1,23 @@
+import { DropdownOption, SingleOption } from '../type';
+export declare function iterateOnOptions(options: DropdownOption[], newVal: SingleOption, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    options: {
+        label?: string | undefined;
+        value?: string | undefined;
+        descriptions?: string | undefined;
+        selected?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }[];
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+} | {
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+})[];

package/dist/esm/components/opennedDropdown/utils/iterationOnOptions.js

@@ -0,0 +1 @@
+function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>t?t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s):Object.assign(Object.assign({},s),n)));return Object.assign(Object.assign({},s),{options:[...i]})}return t?t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s):Object.assign(Object.assign({},s),n)}))}export{s as iterateOnOptions};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    numberOfItemsLoaded: number;
+    totalNumberOfItems: number;
+    isLoading?: boolean;
+    onShowMore?: () => void;
+    width?: string;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as n}from"react";import{BodySecondary as i,ButtonRegular as s}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";import{Pagination as l}from"./Pagination.styled.js";const c=n((n=>{var{id:c,onShowMore:d,isLoading:m,numberOfItemsLoaded:h,totalNumberOfItems:g}=n,f=o(n,["id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems"]);return r(l,Object.assign({id:c},f,{children:m?r(e,{children:"loading..."}):r("div",{children:h<g?t(l,{children:[t(i,Object.assign({style:{color:a.content.secondary}},{children:["Showing ",h," out of ",g," ","results"]})),r(s,Object.assign({style:{color:a.content.brand,cursor:"pointer"},onClick:()=>d&&d()},{children:"Show more"}))]}):r(l,{children:t(i,Object.assign({style:{color:a.content.secondary}},{children:["Showing all ",g," results"]}))})})}))}));c.displayName="Pagination";export{c as Pagination};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Pagination: 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/pagination/Pagination.styled.js

@@ -0,0 +1 @@
+import t from"@emotion/styled/base";const e=t("div","production"===process.env.NODE_ENV?{target:"e14rxdu80"}:{target:"e14rxdu80",label:"Pagination"})("production"===process.env.NODE_ENV?{name:"ifuiz5",styles:"display:flex;align-items:center;justify-content:start;column-gap:16px;width:100%"}:{name:"ifuiz5",styles:"display:flex;align-items:center;justify-content:start;column-gap:16px;width:100%",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBhZ2luYXRpb24uc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDcUMiLCJmaWxlIjoiUGFnaW5hdGlvbi5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5leHBvcnQgY29uc3QgUGFnaW5hdGlvbiA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuXHRjb2x1bW4tZ2FwOiAxNnB4O1xuXHR3aWR0aDogMTAwJTtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVBhZ2luYXRpb24uc3R5bGVkLmpzLm1hcCJdfQ== */",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 Pagination};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type RadioButtonProps = {
+    isActive: boolean;
+    isDisabled?: boolean;
+    value?: string;
+    onValueChange: (checked: boolean, value?: string) => void;
+};
+export declare const RadioButton: React.FC<RadioButtonProps>;

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

@@ -0,0 +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};

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

@@ -0,0 +1,7 @@
+export declare const RadioButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RadioButtonIcon: import("styled-components").StyledComponent<"div", any, {
+    checked: boolean;
+    hovered: boolean;
+    clicked: boolean;
+    isDisabled: boolean;
+}, never>;

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

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

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

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

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type Color = 'primary' | 'secondary' | 'success' | 'error' | 'warn';
+export type Variant = 'solid' | 'outline' | 'text';
+export interface SampleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The color of the Button.
+     *
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * The visual style of the Button.
+     *
+     * @default 'solid'
+     */
+    variant?: Variant;
+}
+export declare const SampleButton: import("react").ForwardRefExoticComponent<SampleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { Color, Variant } from './SampleButton';
+export declare const SampleButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $color: Color;
+    variant: Variant;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

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

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

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

package/dist/esm/components/spinner/Spinner.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SpinnerProps } from './model';
+export declare const Spinner: {
+    ({ size, color, className }: SpinnerProps): JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +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};

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

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

package/dist/esm/components/spinner/lotties/black.json.js

@@ -0,0 +1 @@
+var a="loader for public",i=0,k=246,t=246,x={g:"LottieFiles AE 0.1.21"},s=[{ty:4,nm:"Shape Layer 1",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,hasMask:!1,td:1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[100,100,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[3.002,-217.775,0],ix:2},r:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[360],t:90}],ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"st",bm:0,hd:!1,mn:"ADBE Vector Graphic - Stroke",nm:"Stroke 1",lc:2,lj:1,ml:4,o:{a:0,k:100,ix:4},w:{a:0,k:28,ix:5},c:{a:0,k:[1,1,1],ix:3}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[10],t:0},{s:[70],t:44.25}],ix:2},o:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[144],t:90}],ix:3},s:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[0],t:44.25},{s:[60],t:90}],ix:1},m:1}],ind:1,parent:2},{ty:4,nm:"color",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,tt:1,hasMask:!1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[89.983,89.983,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[123,123,0],ix:2},r:{a:0,k:360,ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"gs",bm:0,hd:!1,mn:"ADBE Vector Graphic - G-Stroke",nm:"Gradient Stroke 1",e:{a:0,k:[122.126,120.78],ix:5},g:{p:3,k:{a:0,k:[0,.12941176470588237,.12941176470588237,.12941176470588237,.5,.12941176470588237,.12941176470588237,.12941176470588237,1,.12941176470588237,.12941176470588237,.12941176470588237],ix:8}},t:1,a:{a:0,k:0},h:{a:0,k:0},s:{a:0,k:[-118.969,-118.703],ix:4},lc:2,lj:1,ml:4,o:{a:0,k:100,ix:9},w:{a:0,k:32,ix:10}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:0,k:100,ix:2},o:{a:0,k:0,ix:3},s:{a:0,k:0,ix:1},m:1}],ind:2}],e="5.5.7",r=60,m=90,o=0,p=[],l={nm:a,ddd:0,h:246,w:246,meta:x,layers:s,v:e,fr:60,op:90,ip:0,assets:p};export{p as assets,i as ddd,l as default,r as fr,k as h,o as ip,s as layers,x as meta,a as nm,m as op,e as v,t as w};

package/dist/esm/components/spinner/lotties/brand.json.js

@@ -0,0 +1 @@
+var a="loader for public",i=0,k=246,t=246,x={g:"LottieFiles AE 0.1.21"},s=[{ty:4,nm:"Shape Layer 1",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,hasMask:!1,td:1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[100,100,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[3.002,-217.775,0],ix:2},r:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[360],t:90}],ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"st",bm:0,hd:!1,mn:"ADBE Vector Graphic - Stroke",nm:"Stroke 1",lc:2,lj:1,ml:4,o:{a:0,k:100,ix:4},w:{a:0,k:28,ix:5},c:{a:0,k:[1,1,1],ix:3}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[10],t:0},{s:[70],t:44.25}],ix:2},o:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[144],t:90}],ix:3},s:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[0],t:44.25},{s:[60],t:90}],ix:1},m:1}],ind:1,parent:2},{ty:4,nm:"color",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,tt:1,hasMask:!1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[89.983,89.983,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[123,123,0],ix:2},r:{a:0,k:360,ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"gs",bm:0,hd:!1,mn:"ADBE Vector Graphic - G-Stroke",nm:"Gradient Stroke 1",e:{a:0,k:[122.126,120.78],ix:5},g:{p:3,k:{a:0,k:[0,.45098039215686275,.11372549019607843,.8117647058823529,.5,.45098039215686275,.11372549019607843,.8117647058823529,1,.45098039215686275,.11372549019607843,.8117647058823529],ix:8}},t:1,a:{a:0,k:0},h:{a:0,k:0},s:{a:0,k:[-118.969,-118.703],ix:4},lc:2,lj:1,ml:4,o:{a:0,k:100,ix:9},w:{a:0,k:32,ix:10}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:0,k:100,ix:2},o:{a:0,k:0,ix:3},s:{a:0,k:0,ix:1},m:1}],ind:2}],e="5.5.7",r=60,m=90,o=0,p=[],l={nm:a,ddd:0,h:246,w:246,meta:x,layers:s,v:e,fr:60,op:90,ip:0,assets:p};export{p as assets,i as ddd,l as default,r as fr,k as h,o as ip,s as layers,x as meta,a as nm,m as op,e as v,t as w};

package/dist/esm/components/spinner/lotties/red.json.js

@@ -0,0 +1 @@
+var a="loader for public",i=0,k=246,t=246,x={g:"LottieFiles AE 0.1.21"},s=[{ty:4,nm:"Shape Layer 1",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,hasMask:!1,td:1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[100,100,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[3.002,-217.775,0],ix:2},r:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[360],t:90}],ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"st",bm:0,hd:!1,mn:"ADBE Vector Graphic - Stroke",nm:"Stroke 1",lc:2,lj:1,ml:4,o:{a:0,k:100,ix:4},w:{a:0,k:28,ix:5},c:{a:0,k:[1,1,1],ix:3}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[10],t:0},{s:[70],t:44.25}],ix:2},o:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[144],t:90}],ix:3},s:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[0],t:44.25},{s:[60],t:90}],ix:1},m:1}],ind:1,parent:2},{ty:4,nm:"color",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,tt:1,hasMask:!1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[89.983,89.983,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[123,123,0],ix:2},r:{a:0,k:360,ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"gs",bm:0,hd:!1,mn:"ADBE Vector Graphic - G-Stroke",nm:"Gradient Stroke 1",e:{a:0,k:[122.126,120.78],ix:5},g:{p:3,k:{a:0,k:[0,.7254901960784313,.13725490196078433,.12941176470588237,.5,.7254901960784313,.13725490196078433,.12941176470588237,1,.7254901960784313,.13725490196078433,.12941176470588237],ix:8}},t:1,a:{a:0,k:0},h:{a:0,k:0},s:{a:0,k:[-118.969,-118.703],ix:4},lc:2,lj:1,ml:4,o:{a:0,k:100,ix:9},w:{a:0,k:32,ix:10}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:0,k:100,ix:2},o:{a:0,k:0,ix:3},s:{a:0,k:0,ix:1},m:1}],ind:2}],e="5.5.7",r=60,m=90,o=0,p=[],l={nm:a,ddd:0,h:246,w:246,meta:x,layers:s,v:e,fr:60,op:90,ip:0,assets:p};export{p as assets,i as ddd,l as default,r as fr,k as h,o as ip,s as layers,x as meta,a as nm,m as op,e as v,t as w};

package/dist/esm/components/spinner/lotties/white.json.js

@@ -0,0 +1 @@
+var a="loader for public",i=0,k=246,t=246,x={g:"LottieFiles AE 0.1.21"},s=[{ty:4,nm:"Shape Layer 1",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,hasMask:!1,td:1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[100,100,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[3.002,-217.775,0],ix:2},r:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[360],t:90}],ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"st",bm:0,hd:!1,mn:"ADBE Vector Graphic - Stroke",nm:"Stroke 1",lc:2,lj:1,ml:4,o:{a:0,k:100,ix:4},w:{a:0,k:28,ix:5},c:{a:0,k:[1,1,1],ix:3}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[10],t:0},{s:[70],t:44.25}],ix:2},o:{a:1,k:[{o:{x:.167,y:.167},i:{x:.833,y:.833},s:[0],t:0},{s:[144],t:90}],ix:3},s:{a:1,k:[{o:{x:.333,y:0},i:{x:.667,y:1},s:[0],t:44.25},{s:[60],t:90}],ix:1},m:1}],ind:1,parent:2},{ty:4,nm:"color",sr:1,st:0,op:300,ip:0,hd:!1,ddd:0,bm:0,tt:1,hasMask:!1,ao:0,ks:{a:{a:0,k:[3.002,-217.775,0],ix:1},s:{a:0,k:[89.983,89.983,100],ix:6},sk:{a:0,k:0},p:{a:0,k:[123,123,0],ix:2},r:{a:0,k:360,ix:10},sa:{a:0,k:0},o:{a:0,k:100,ix:11}},ef:[],shapes:[{ty:"gr",bm:0,hd:!1,mn:"ADBE Vector Group",nm:"Ellipse 1",ix:1,cix:2,np:3,it:[{ty:"el",bm:0,hd:!1,mn:"ADBE Vector Shape - Ellipse",nm:"Ellipse Path 1",d:1,p:{a:0,k:[0,0],ix:3},s:{a:0,k:[239.598,239.598],ix:2}},{ty:"gs",bm:0,hd:!1,mn:"ADBE Vector Graphic - G-Stroke",nm:"Gradient Stroke 1",e:{a:0,k:[122.126,120.78],ix:5},g:{p:3,k:{a:0,k:[0,1,1,1,.5,1,1,1,1,1,1,1],ix:8}},t:1,a:{a:0,k:0},h:{a:0,k:0},s:{a:0,k:[-118.969,-118.703],ix:4},lc:2,lj:1,ml:4,o:{a:0,k:100,ix:9},w:{a:0,k:32,ix:10}},{ty:"tr",a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},sk:{a:0,k:0,ix:4},p:{a:0,k:[3.002,-217.775],ix:2},r:{a:0,k:0,ix:6},sa:{a:0,k:0,ix:5},o:{a:0,k:100,ix:7}}]},{ty:"tm",bm:0,hd:!1,mn:"ADBE Vector Filter - Trim",nm:"Trim Paths 1",ix:2,e:{a:0,k:100,ix:2},o:{a:0,k:0,ix:3},s:{a:0,k:0,ix:1},m:1}],ind:2}],e="5.5.7",r=60,m=90,o=0,p=[],l={nm:a,ddd:0,h:246,w:246,meta:x,layers:s,v:e,fr:60,op:90,ip:0,assets:p};export{p as assets,i as ddd,l as default,r as fr,k as h,o as ip,s as layers,x as meta,a as nm,m as op,e as v,t as w};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spinner
+     *
+     */
+    size: 'small' | 'large';
+    /**
+     * Color of the spinner.
+     * Defaults to COLORS.content.brand
+     */
+    color?: string;
+}

package/dist/esm/components/spinner/themes.d.ts

@@ -0,0 +1,3 @@
+export declare const SizeMap: {
+    [key in 'small' | 'large']: number;
+};

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

@@ -0,0 +1 @@
+const l={small:16,large:40};export{l as SizeMap};

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type StepperStates = 'default' | 'completed' | 'error' | 'active' | 'inactive';
+export interface StepperProps {
+    steps: EachStep[];
+    activeStep: EachStep;
+    onClickingEachStep: (step: EachStep) => void;
+}
+export interface EachStep {
+    stepKey: string;
+    stepName: string;
+    isCompleted: boolean;
+    isError: boolean;
+    isInActive: boolean;
+}
+export interface SingleStepperProps {
+    index: number;
+    isLastElement: boolean;
+    eachStep: EachStep;
+    isActive: boolean;
+    onClickingStep: (step: EachStep) => void;
+}
+export declare const Stepper: (stepperDetails: StepperProps) => JSX.Element;

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

@@ -0,0 +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};

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

@@ -0,0 +1,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;
+}, never>;
+export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,83 @@
+import e from"styled-components";import{getTheme as t}from"./themes.js";const o=e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+`,i=e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+
+	.pointer {
+		cursor: pointer;
+	}
+	.blocked {
+		cursor: not-allowed;
+	}
+
+	.hover-container {
+		padding: 6px 8px 6px 6px;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		&:hover {
+			padding: 6px 8px 6px 6px;
+			background: #f0f0f0;
+			border-radius: 30px;
+		}
+	}
+	.badge {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 4px;
+		gap: 10px;
+		width: 32px;
+		height: 24px;
+		background: ${e=>t(e.selectedState).badgeBackground};
+		border: 1px solid ${e=>t(e.selectedState).badgeBorder};
+		border-radius: 30px;
+		.badge-text {
+			font-weight: ${e=>t(e.selectedState).fontWeight};
+			color: ${e=>t(e.selectedState).badgeColor};
+		}
+	}
+	.step-text {
+		font-weight: ${e=>t(e.selectedState).fontWeight};
+		font-feature-settings: 'tnum' on, 'lnum' on, 'case' on, 'ss04' on;
+		color: ${e=>t(e.selectedState).textColor};
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 200px;
+	}
+	.horizontal-divider {
+		width: 48px;
+		height: 1px;
+		background: ${e=>t(e.selectedState).dividerBackground};
+		margin-left: 8px;
+	}
+`;e.div`
+	.top-bar {
+		position: sticky;
+		top: 0px;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background: white;
+	}
+	.main-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		overflow-y: auto;
+	}
+`;export{i as SingleStepperChildContainer,o as StepperContainer};

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

@@ -0,0 +1,4 @@
+import { EachStep } from './Stepper';
+export default class StepperService {
+    updateSteps: (steps: EachStep[], stepToUpdate: EachStep, propertiesToUpdate: Partial<EachStep>) => EachStep[];
+}

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

@@ -0,0 +1,14 @@
+export declare const WorkingStepper: () => JSX.Element;
+export declare enum STEPENUM {
+    STEP1 = "STEP1",
+    STEP2 = "STEP2",
+    STEP3 = "STEP3",
+    STEP4 = "STEP4"
+}
+export declare const Steps: {
+    stepKey: STEPENUM;
+    stepName: string;
+    isCompleted: boolean;
+    isError: boolean;
+    isInActive: boolean;
+}[];

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

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

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

@@ -0,0 +1,18 @@
+import type { StepperStates } from './Stepper';
+export declare function getTheme(step: StepperStates): {
+    textColor: string;
+    badgeColor: string;
+    badgeBackground: string;
+    badgeBorder: string;
+    dividerBackground: string;
+    fontWeight: string;
+    background?: undefined;
+} | {
+    textColor: string;
+    background: string;
+    badgeColor: string;
+    badgeBorder: string;
+    dividerBackground: string;
+    fontWeight: string;
+    badgeBackground?: undefined;
+};

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

@@ -0,0 +1 @@
+import{COLORS as e}from"../../constants/Theme.js";function t(t){switch(t){case"active":return{textColor:`${e.content.positive}`,badgeColor:`${e.content.primaryInverse}`,badgeBackground:`${e.background.positive.vibrant}`,badgeBorder:"transparent",dividerBackground:`${e.content.positive}`,fontWeight:"600"};case"completed":return{textColor:`${e.content.positive}`,badgeColor:`${e.content.positive}`,badgeBackground:`${e.background.positive.light}`,badgeBorder:`${e.content.positive}`,dividerBackground:`${e.content.positive}`,fontWeight:"400"};case"error":return{textColor:`${e.content.negative}`,badgeBackground:`${e.background.negative.light}`,badgeColor:`${e.content.negative}`,badgeBorder:`${e.content.negative}`,dividerBackground:`${e.content.negative}`,fontWeight:"400"};case"inactive":return{textColor:`${e.content.inactive}`,badgeBackground:"transparent",badgeColor:`${e.content.inactive}`,badgeBorder:`${e.content.inactive}`,dividerBackground:`${e.content.inactive}`,fontWeight:"400"};default:return{textColor:`${e.content.secondary}`,background:"trasparent",badgeColor:`${e.content.secondary}`,badgeBorder:`${e.content.secondary}`,dividerBackground:`${e.content.secondary}`,fontWeight:"400"}}}export{t as getTheme};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TagProps } from './model';
+export declare const Tag: {
+    ({ tagText, LeadingIcon, TrailingIcon, theme, type, variant, }: TagProps): JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"react";import{BodyCaption as i}from"../TypographyStyle.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as n}from"./themes.js";const s=s=>{let{tagText:c,LeadingIcon:l,TrailingIcon:o,theme:m="light",type:g="neutral",variant:d="regular"}=s;const h={height:16,width:16,color:n(m,g),style:{display:"block"}};let p=c;return"circle"===d&&"number"==typeof p&&p>99&&(p="99+"),e(r,Object.assign({theme:m,type:g,variant:d},{children:t("div",Object.assign({className:"container"},{children:[o&&e("div",Object.assign({className:"icon-trailing"},{children:a.createElement(o,h)})),e(i,Object.assign({className:"text"},{children:p})),l&&e("div",Object.assign({className:"icon-leading"},{children:a.createElement(l,h)}))]}))}))};s.displayName="Tag";export{s as Tag};

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

@@ -0,0 +1,6 @@
+import { TagTheme, TagType, TagVariant } from './model';
+export declare const Tag: import("styled-components").StyledComponent<"div", any, {
+    theme: TagTheme;
+    type: TagType;
+    variant: TagVariant;
+}, never>;

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

@@ -0,0 +1,26 @@
+import e from"styled-components";import{getPadding as r,getBackgroundColor as t,generateBorder as o,getTextColor as i}from"./themes.js";const a=e.div`
+	cursor: default;
+	.container {
+		display: flex;
+		gap: 6px;
+		padding: ${e=>r(e.variant)};
+	}
+
+	${e=>"circle"===e.variant&&"height: 20px;"}
+
+	background-color: ${e=>t(e.theme,e.type)};
+
+	border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
+
+	${e=>"light"===e.theme&&`border: 1px solid ${o(e.type)};`}
+
+	.text {
+		color: ${e=>i(e.theme,e.type)};
+	}
+
+	.icon-trailing {
+	}
+
+	.icon-leading {
+	}
+`;export{a as Tag};

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

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

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export type TagTheme = 'light' | 'dark';
+export type TagVariant = 'regular' | 'circle';
+export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue';
+export interface TagProps {
+    /**
+     * Set the theme of the Tag
+     * @default default light
+     */
+    theme?: TagTheme;
+    /**
+     * Set the color of the Tag
+     * @default default neutral
+     */
+    type?: TagType;
+    /**
+     * Set the color of the Tag
+     * @default default regular
+     */
+    variant?: TagVariant;
+    /**
+     * The icon component that is the left of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The icon component that is to the right of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    tagText: string | number;
+}

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

@@ -0,0 +1,6 @@
+import { TagTheme, TagType, TagVariant } from './model';
+export declare const getTagIconColor: (theme: TagTheme, type: TagType) => string;
+export declare const getTextColor: (theme: TagTheme, type: TagType) => string;
+export declare const generateBorder: (type: TagType) => string;
+export declare const getBackgroundColor: (theme: TagTheme, type: TagType) => string;
+export declare const getPadding: (variant: TagVariant) => "4px 8px" | "2px 6px";

package/dist/esm/components/tag/themes.js

@@ -0,0 +1 @@
+import{COLORS as r}from"../../constants/Theme.js";const t={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse}}},o=(r,o)=>t[o].iconColor[r],n=(r,o)=>t[o].textColor[r],e=r=>t[r].border,i=(r,o)=>t[o].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{e as generateBorder,i as getBackgroundColor,a as getPadding,o as getTagIconColor,n as getTextColor};

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

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import { ToastPosition } from 'react-toastify';
+import { IconProps } from 'react-toastify/dist/components';
+import 'react-toastify/dist/ReactToastify.css';
+export type ToasterButtonProps = {
+    showButton?: boolean;
+    onButtonClick?: any;
+    buttonText?: string;
+};
+export type ToasterProps = {
+    text: string;
+    position?: ToastPosition;
+    type?: 'info' | 'success' | 'error' | 'default';
+    closeOnClick?: boolean;
+    hideProgressBar?: boolean;
+    autoClose?: number | false | undefined;
+    leftIcon?: React.ReactElement<IconProps>;
+    hideLeftIcon?: boolean;
+    buttonProps?: ToasterButtonProps;
+    onCloseToast?: <T = {}>(props: T) => void;
+    width?: string;
+    height?: string;
+    hideCloseButton?: boolean;
+};
+type Props = ToasterProps;
+export declare const Toaster: FunctionComponent<Props>;
+export {};

package/dist/esm/components/toaster/Toaster.js

@@ -0,0 +1 @@
+import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/cross.svg.js";import{useEffect as s}from"react";import{ToastContainer as i,toast as r}from"react-toastify";import{ToasterStyled as l}from"./Toaster.styled.js";import{BodyPrimary as c,ButtonRegular as u}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const a=o=>{const e="default"===o.type?d.content.secondary:("success"===o.type||o.type,d.content.secondaryInverse);return t("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:o.closeToast,onKeyDown:t=>{"Enter"===t.key&&o.closeToast()}},{children:t(n,{height:20,width:20,color:e})}))},p=n=>{const s="default"===n.type?d.stroke.primary:"success"===n.type?d.background.positive.vibrant:"error"===n.type?d.background.negative.vibrant:d.background.inverseLight;return t(o,{children:e("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:n.hideCloseButton?"unset":`1px solid ${s}`}},{children:[t("div",Object.assign({style:{flexGrow:1,marginRight:n.showButton?16:n.hideCloseButton?0:12}},{children:t(c,Object.assign({color:"inherit"},{children:n.toastText}))})),n.showButton&&t(u,Object.assign({style:{marginRight:n.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:n.onButtonClick,color:"default"===n.type?d.content.brand:"inherit"},{children:n.buttonText}))]}))})},h=o=>(s((()=>{var e,n,s,i,l,c;void 0!==o.hideLeftIcon||o.leftIcon?r(t(p,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(n=o.buttonProps)||void 0===n?void 0:n.showButton,onButtonClick:null===(s=o.buttonProps)||void 0===s?void 0:s.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>{},icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t(a,{type:o.type||"default"})}):r(t(p,{toastText:o.text,type:o.type||"info",buttonText:null===(i=o.buttonProps)||void 0===i?void 0:i.buttonText,showButton:null===(l=o.buttonProps)||void 0===l?void 0:l.showButton,onButtonClick:null===(c=o.buttonProps)||void 0===c?void 0:c.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>{},type:o.type,closeButton:!o.hideCloseButton&&t(a,{type:o.type||"info"})})}),[]),t(l,Object.assign({width:o.width,height:o.height},{children:t(i,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));export{h as Toaster};

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

@@ -0,0 +1,4 @@
+export declare const ToasterStyled: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    height?: string | undefined;
+}, never>;

package/dist/esm/components/toaster/Toaster.styled.js

@@ -0,0 +1,35 @@
+import t from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const i=t.div`
+	--toastify-color-light: #fff;
+	--toastify-color-dark: #121212;
+	--toastify-color-info: ${o.background.inverse};
+	--toastify-color-success: ${o.content.positive};
+	--toastify-color-error: ${o.content.negative};
+	--toastify-text-color-light: ${o.content.primary};
+	--toastify-toast-width: ${t=>t.width||"fit-content"};
+	--toastify-toast-min-height: ${t=>t.height||"44px"};
+	--toastify-toast-max-height: ${t=>t.height||"44px"};
+	font-family: inherit;
+
+	.custom-position {
+		position: relative;
+	}
+	.Toastify__toast {
+		padding: 6px;
+
+	.Toastify__close-button {
+		display: block;
+		margin: auto;
+	}
+
+	.Toastify__toast-body{
+		padding: 0 6px;
+	}
+
+	.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
+		background: ${o.content.brand};
+	}
+
+	.Toastify__toast-body > div:last-child {
+		display: flex;
+	}
+`;export{i as ToasterStyled};

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

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