@bikdotai/bik-component-library 0.0.709 → 0.0.710-beta.1

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

@@ -1,77 +0,0 @@
-/// <reference types="react" />
-export type Size = 'chip' | 'small' | 'medium' | 'large';
-export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text' | 'ai';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    'data-test'?: string;
-    /**
-     * Font fize of the text
-     * @default default 'small'
-     */
-    size?: Size;
-    /**
-     * Text to render inside the button
-     * @default ''
-     */
-    buttonText?: string;
-    /**
-     * Whether the button is pressable or not
-     * @default true
-     */
-    disabled?: boolean;
-    /**
-     * Type of the button
-     * @default 'primary'
-     */
-    buttonType?: Type;
-    /**
-     * The icon component that needs to be render, if text also exists, this would be Trailing component
-     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
-     * @default undefined
-     */
-    IconComponent?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * The icon component that is to the right of the buttonText
-     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
-     * @default undefined
-     */
-    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * Custom styles to be applied to the LeadingIcon
-     * @default undefined
-     */
-    LeadingIconStyles?: React.CSSProperties;
-    /**
-     * The icon component that is the left of the buttonText
-     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
-     * @default undefined
-     */
-    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * the button container styling that needs to be override the default one
-     * @default null
-     */
-    style?: React.CSSProperties;
-    /**
-     * Indicates if button is loading and a loading indicator should be shown.
-     * When the button is loading the width of the button should not change.
-     */
-    isLoading?: boolean;
-    /**
-     * Indicates if the styling of the button should be inverse
-     */
-    inverse?: boolean;
-    /**
-     * Will take the width of the parent.
-     * @default false
-     */
-    matchParentWidth?: boolean;
-    subtitle?: string;
-    version?: '1.0' | '2.0';
-    darkMode?: boolean;
-    activated?: boolean;
-    error?: boolean;
-    buttonTextColor?: string;
-    customIconColor?: string;
-    buttonColor?: string;
-    buttonFontSize?: number;
-}

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

@@ -1,52 +0,0 @@
-import { Size, Type } from './model';
-export declare const getBackgroundColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean, buttonColor?: string) => string;
-export declare const getColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean) => string;
-export declare const getDisabledTextColor: (inverse?: boolean) => string;
-export declare const getPadding: (type: Type, size: Size) => "0px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
-export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?: boolean) => import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
-export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
-export declare const getLinearGradientValue: (size: Size) => string;
-/**
- * Adjusts the brightness of a given hex color by a specified percentage.
- * Below function is used to generate a hover effect for button backgrounds.
- *
- * @param {string} color - The hex color code to be adjusted (e.g., "#ff0000").
- * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.
- * @returns {string} - The adjusted hex color code.
- *
- * @example
- * // Darken the color #ff0000 (red) by 10%
- * const darkerRed = getHoverButtonBackgroundCustom("#ff0000", 10);
- * console.log(darkerRed); // Output might be "#e60000"
- */
-export declare const getHoverButtonBackgroundCustom: (color: string, percent: number) => string;
-/**
- * Generates a new color by adjusting the brightness of the given color by a specified percentage.
- *
- * @param color - The original color in hexadecimal format (e.g., "#RRGGBB").
- * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.
- * @returns The new color in hexadecimal format after adjusting the brightness.
- *
- * @example
- * // Lighten the color by 20%
- * const newColor = getLoadingButtonBackgroundCustom("#ff0000", 20); // "#ff3333"
- *
- * @example
- * // Darken the color by 10%
- * const newColor = getLoadingButtonBackgroundCustom("#00ff00", -10); // "#00e600"
- */
-export declare const getLoadingButtonBackgroundCustom: (color: string, percent: number) => string;
-export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => string;
-export declare const getHoverButtonTextDecorationStyle: (type: Type, disabled?: boolean) => string;
-export declare const generateInverseHoverBackground: (type: Type, disabled?: boolean) => string;
-export declare const generateDisabledStyling: (type: Type, size: Size, inverse?: boolean) => string;
-export declare const getDashedBorderStyling: (type: Type, size: Size, borderColor?: string) => string;
-export declare const getClickEffect: (type: Type, size: Size, inverse?: boolean) => string | undefined;
-export declare const getLoadingBackground: (type: Type, size: Size, inverse?: boolean, buttonColor?: string) => string;
-export declare const getLoadingBorder: (type: Type, size: Size, inverse?: boolean) => string;
-export declare const SpinnerColorMap: (type: Type, inverse?: boolean) => string;
-export declare const getButtonIconColor: (size: Size, type: Type, inverse?: boolean, disabled?: boolean, isLoading?: boolean, darkMode?: boolean) => string | undefined;

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

@@ -1 +0,0 @@
-import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},u=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,b=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},x=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},y=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",m=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,k=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,w=(r,n,e,a)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${x(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",I=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,M=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{u as GetButtonTextComponent,I as SpinnerColorMap,$ as generateDisabledStyling,k as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,b as getBorderColor,M as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,y as getHoverButtonBackground,h as getHoverButtonBackgroundCustom,m as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,w as getLoadingBackground,L as getLoadingBorder,x as getLoadingButtonBackgroundCustom,p as getPadding};

package/dist/esm/components/buttonGroup/ButtonGroup.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-export interface ButtonGroupInterface {
-    id: string;
-    title: string;
-    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-export interface ButtonGroupProps {
-    id?: string;
-    width?: string;
-    gap?: string;
-    iconWidth?: string;
-    iconHeight?: string;
-    iconPosition?: 'left' | 'right' | 'top';
-    onButtonClick: (buttonId: string) => void;
-    activeButtonId?: string;
-    buttonGroup: Array<ButtonGroupInterface>;
-    size: 'small' | 'medium' | 'large';
-    matchParentWidth?: boolean;
-    borderRadius?: string;
-    backgroundColor?: string;
-}
-export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/esm/components/buttonGroup/ButtonGroup.js

@@ -1 +0,0 @@
-import{j as i}from"../../node_modules/react/jsx-runtime.js";import{useState as o,useEffect as t}from"react";import{BodySecondary as n}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import{ButtonGroupStyle as e,Button as r}from"./ButtonGroupStyle.js";const c=c=>{const[d,a]=o(void 0);t((()=>{a(c.activeButtonId||void 0)}),[null==c?void 0:c.activeButtonId]);return i.jsx(e,Object.assign({className:"button-group",width:c.width||"100%",gap:c.gap,size:c.size,iconPosition:c.iconPosition},{children:c.buttonGroup.map((o=>{var t,e;const l=null==o?void 0:o.icon;return i.jsxs(r,Object.assign({borderRadius:null!==(t=c.borderRadius)&&void 0!==t?t:"4px",matchParentWidth:null===(e=c.matchParentWidth)||void 0===e||e,className:"button",isActive:d===o.id,onClick:()=>(i=>{a(i.id),c.onButtonClick(i.id)})(o),iconPosition:c.iconPosition,size:c.size,backgroundColor:c.backgroundColor||s.surface.subdued},{children:[(null==c?void 0:c.iconPosition)&&l&&i.jsx("div",Object.assign({className:"button__image"},{children:i.jsx(l,{color:d===o.id?s.background.inverseLight:s.content.secondary,width:(null==c?void 0:c.iconWidth)||"18px",height:(null==c?void 0:c.iconHeight)||"18px"})})),i.jsx("div",Object.assign({className:"button__name"},{children:i.jsx(n,Object.assign({style:{color:d===o.id?s.background.inverseLight:s.content.secondary}},{children:o.title}))}))]}),o.id)}))}))};export{c as ButtonGroup};

package/dist/esm/components/buttonGroup/ButtonGroupStyle.d.ts

@@ -1,14 +0,0 @@
-export declare const ButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
-    width: string | undefined;
-    size: 'small' | 'medium' | 'large';
-    gap: string | undefined;
-    iconPosition?: "left" | "right" | "top" | undefined;
-}, never>;
-export declare const Button: import("styled-components").StyledComponent<"div", any, {
-    isActive: boolean;
-    matchParentWidth: boolean;
-    borderRadius: string;
-    iconPosition?: "left" | "right" | "top" | undefined;
-    size: 'small' | 'medium' | 'large';
-    backgroundColor?: string | undefined;
-}, never>;

package/dist/esm/components/buttonGroup/ButtonGroupStyle.js

@@ -1,34 +0,0 @@
-import i from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t={small:"8px 12px",medium:"10px 12px",large:"14px 12px"},e={small:"36px",medium:"40px",large:"48px"},n=i.div`
-	display: flex;
-	flex-direction: row;
-	width: ${i=>i.width||"100%"};
-	height: ${i=>"top"===i.iconPosition?"auto":i.size?e[i.size]:"36px"};
-	min-height: ${i=>"top"===i.iconPosition?i.size?e[i.size]:"36px":"auto"};
-	gap: ${i=>i.gap||"12px"};
-`,r=i.div`
-	display: flex;
-	flex-direction: ${i=>"top"!==i.iconPosition?"left"===i.iconPosition?"row":"row-reverse":"column"};
-	flex: ${i=>i.matchParentWidth?1:"unset"};
-	height: ${i=>"top"===i.iconPosition?"auto":"100%"};
-	min-height: ${i=>"top"===i.iconPosition?"100%":"auto"};
-	background: ${i=>i.isActive?o.background.brandLight:i.backgroundColor};
-	border: 1px solid
-		${i=>i.isActive?o.background.inverseLight:o.stroke.primary};
-	border-radius: ${i=>i.borderRadius};
-	align-items: center;
-	justify-content: center;
-	padding: ${i=>i.size?t[i.size]:"8px 10px"};
-	gap: ${i=>i.iconPosition&&"top"!==i.iconPosition?"10px":"2px"};
-	.button {
-		align-items: center;
-		justify-content: center;
-		&__image {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-	:hover {
-		cursor: pointer;
-	}
-`;export{r as Button,n as ButtonGroupStyle};

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

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

package/dist/esm/components/card-selection-modal/CardSelectionModal.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export type CardSelectionModalProps = {
-    isOpen: boolean;
-    title?: string;
-    subTitle?: string;
-    infoText?: string;
-    cards: SelectionCardData[];
-    onCardSelected: (value: string) => void;
-    onClose: () => void;
-};
-export type SelectionCardData = {
-    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    value: string;
-    title: string;
-    description: string;
-};
-export declare const CardSelectionModal: React.FC<CardSelectionModalProps>;

package/dist/esm/components/card-selection-modal/CardSelectionModal.js

@@ -1 +0,0 @@
-import{j as s}from"../../node_modules/react/jsx-runtime.js";import e from"../../assets/icons/info.svg.js";import{StyledCardContainer as o,StyledCard as i}from"./CardSelectionModal.styled.js";import{StyledModal as n}from"../modals/styledModal.js";import{DEFAULT_THEME as t}from"../../constants/Theme.js";import{BodySecondary as r,TitleRegular as c,BodyCaption as l}from"../TypographyStyle.js";const a=a=>s.jsx(n,Object.assign({open:a.isOpen,onClose:a.onClose,headingTitle:a.title,headingSubtitle:a.subTitle,centralContainerStyles:{width:716}},{children:s.jsxs(o,{children:[s.jsx("div",Object.assign({className:"cards__wrapper"},{children:a.cards.map((e=>s.jsxs(i,Object.assign({onClick:()=>{a.onCardSelected(e.value)}},{children:[e.icon&&s.jsx("div",Object.assign({className:"icon__container"},{children:s.jsx(e.icon,{width:22,color:t.colorsV2.content.brand})})),s.jsx(c,{children:e.title}),s.jsx(l,{children:e.description})]}),e.value)))})),a.infoText&&s.jsxs("div",Object.assign({className:"info__wrapper"},{children:[s.jsx(e,{width:15,color:t.colorsV2.content.placeholder}),s.jsx(r,{children:a.infoText})]}))]})}));export{a as CardSelectionModal};

package/dist/esm/components/card-selection-modal/CardSelectionModal.styled.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCard: 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/card-selection-modal/CardSelectionModal.styled.js

@@ -1 +0,0 @@
-import c from"../../node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js";import{DEFAULT_THEME as b}from"../../constants/Theme.js";const d=c("div","production"===process.env.NODE_ENV?{target:"epoh28g1"}:{target:"epoh28g1",label:"StyledCardContainer"})("production"===process.env.NODE_ENV?{name:"1psm388",styles:"display:flex;flex-direction:column;gap:12px;.cards__wrapper{padding:0 24px;display:flex;flex-wrap:wrap;gap:16px;}.info__wrapper{padding:0 24px 24px 24px;display:flex;align-items:center;gap:4px;}"}:{name:"1psm388",styles:"display:flex;flex-direction:column;gap:12px;.cards__wrapper{padding:0 24px;display:flex;flex-wrap:wrap;gap:16px;}.info__wrapper{padding:0 24px 24px 24px;display:flex;align-items:center;gap:4px;}",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhcmRTZWxlY3Rpb25Nb2RhbC5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QyIsImZpbGUiOiJDYXJkU2VsZWN0aW9uTW9kYWwuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgREVGQVVMVF9USEVNRSB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IFN0eWxlZENhcmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0Z2FwOiAxMnB4O1xuXHQuY2FyZHNfX3dyYXBwZXIge1xuXHRcdHBhZGRpbmc6IDAgMjRweDtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGZsZXgtd3JhcDogd3JhcDtcblx0XHRnYXA6IDE2cHg7XG5cdH1cblx0LmluZm9fX3dyYXBwZXIge1xuXHRcdHBhZGRpbmc6IDAgMjRweCAyNHB4IDI0cHg7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdGdhcDogNHB4O1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZC5kaXYgYFxuXHR3aWR0aDogMjEycHg7XG5cdHBhZGRpbmc6IDE2cHg7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5cdGdhcDogOHB4O1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAke0RFRkFVTFRfVEhFTUUuY29sb3JzVjIuc3VyZmFjZS5zdGFuZGFyZH07XG5cdGJvcmRlcjogMXB4IHNvbGlkICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5zdXJmYWNlLmhvdmVyZWR9O1xuXHR9XG5cblx0Lmljb25fX2NvbnRhaW5lciB7XG5cdFx0d2lkdGg6IDQ4cHg7XG5cdFx0aGVpZ2h0OiA0OHB4O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0XHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuYnJhbmRMaWdodH07XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUNhcmRTZWxlY3Rpb25Nb2RhbC5zdHlsZWQuanMubWFwIl19 */",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)."}}),l=c("div","production"===process.env.NODE_ENV?{target:"epoh28g0"}:{target:"epoh28g0",label:"StyledCard"})("width:212px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:",b.colorsV2.surface.standard,";border:1px solid ",b.colorsV2.stroke.primary,";border-radius:4px;cursor:pointer;&:hover{background-color:",b.colorsV2.surface.hovered,";}.icon__container{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:",b.colorsV2.background.brandLight,";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhcmRTZWxlY3Rpb25Nb2RhbC5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CcUMiLCJmaWxlIjoiQ2FyZFNlbGVjdGlvbk1vZGFsLnN0eWxlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IERFRkFVTFRfVEhFTUUgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBTdHlsZWRDYXJkQ29udGFpbmVyID0gc3R5bGVkLmRpdiBgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5cdGdhcDogMTJweDtcblx0LmNhcmRzX193cmFwcGVyIHtcblx0XHRwYWRkaW5nOiAwIDI0cHg7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRmbGV4LXdyYXA6IHdyYXA7XG5cdFx0Z2FwOiAxNnB4O1xuXHR9XG5cdC5pbmZvX193cmFwcGVyIHtcblx0XHRwYWRkaW5nOiAwIDI0cHggMjRweCAyNHB4O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRnYXA6IDRweDtcblx0fVxuYDtcclxuZXhwb3J0IGNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQuZGl2IGBcblx0d2lkdGg6IDIxMnB4O1xuXHRwYWRkaW5nOiAxNnB4O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRnYXA6IDhweDtcblx0YmFja2dyb3VuZC1jb2xvcjogJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLnN1cmZhY2Uuc3RhbmRhcmR9O1xuXHRib3JkZXI6IDFweCBzb2xpZCAke0RFRkFVTFRfVEhFTUUuY29sb3JzVjIuc3Ryb2tlLnByaW1hcnl9O1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdGN1cnNvcjogcG9pbnRlcjtcblxuXHQmOmhvdmVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAke0RFRkFVTFRfVEhFTUUuY29sb3JzVjIuc3VyZmFjZS5ob3ZlcmVkfTtcblx0fVxuXG5cdC5pY29uX19jb250YWluZXIge1xuXHRcdHdpZHRoOiA0OHB4O1xuXHRcdGhlaWdodDogNDhweDtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdFx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRcdGJhY2tncm91bmQtY29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5iYWNrZ3JvdW5kLmJyYW5kTGlnaHR9O1xuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1DYXJkU2VsZWN0aW9uTW9kYWwuc3R5bGVkLmpzLm1hcCJdfQ== */"));export{l as StyledCard,d as StyledCardContainer};

package/dist/esm/components/card-selection-modal/index.d.ts

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

package/dist/esm/components/card-selector/CardSelector.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export type CardSelectorProps = {
-    id: number;
-    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    title?: string;
-    subtitle?: string;
-    selected: boolean;
-    loading?: boolean;
-    disabled?: boolean;
-    dataTestId?: string;
-    tooltip?: string;
-};
-type CardSelectorInternalProps = CardSelectorProps & {
-    onCardClick: (id: number) => void;
-};
-export declare const CardSelector: React.FC<CardSelectorInternalProps>;
-export {};

package/dist/esm/components/card-selector/CardSelector.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import{Spinner as i}from"../spinner/Spinner.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{TitleSmall as l,BodyCaption as n}from"../TypographyStyle.js";import{Container as o,Loader as d}from"./CardSelector.styled.js";const c=t=>{var i,l,n,d;return e.jsx(e.Fragment,{children:t.tooltip?e.jsx(s,Object.assign({title:t.tooltip},{children:e.jsx(o,Object.assign({style:{alignItems:t.title&&t.subtitle?"flex-start":"center"},selected:t.selected,disabled:null!==(i=t.disabled)&&void 0!==i&&i,loading:null!==(l=t.loading)&&void 0!==l&&l,onClick:()=>{t.disabled||t.loading||t.onCardClick(t.id)},isTooltipPresent:!!t.tooltip},{children:e.jsx(r,Object.assign({},t))}))})):e.jsx(o,Object.assign({style:{alignItems:t.title&&t.subtitle?"flex-start":"center"},selected:t.selected,disabled:null!==(n=t.disabled)&&void 0!==n&&n,loading:null!==(d=t.loading)&&void 0!==d&&d,onClick:()=>{t.disabled||t.loading||t.onCardClick(t.id)},isTooltipPresent:!!t.tooltip},{children:e.jsx(r,Object.assign({},t))}))})},r=s=>e.jsx(e.Fragment,{children:s.loading?e.jsx(d,{children:e.jsx(i,{size:"large"})}):e.jsxs(e.Fragment,{children:[(null==s?void 0:s.icon)&&e.jsx("div",Object.assign({style:{width:24,height:24}},{children:e.jsx(s.icon,{width:24,color:s.selected?t.content.brand:s.disabled?t.content.inactive:t.content.placeholder})})),e.jsxs("div",Object.assign({"data-test":null==s?void 0:s.dataTestId},{children:[s.title&&e.jsx(l,Object.assign({style:{color:s.selected?t.content.brand:s.disabled?t.content.inactive:t.content.secondary}},{children:s.title})),s.subtitle&&e.jsx(n,Object.assign({style:{marginTop:s.title?4:0,color:s.selected?t.content.brand:s.disabled?t.content.inactive:t.content.secondary}},{children:s.subtitle}))]}))]})});export{c as CardSelector};

package/dist/esm/components/card-selector/CardSelector.styled.d.ts

@@ -1,7 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    selected: boolean;
-    disabled: boolean;
-    loading: boolean;
-    isTooltipPresent?: boolean | undefined;
-}, never>;
-export declare const Loader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/card-selector/CardSelector.styled.js

@@ -1,19 +0,0 @@
-import e from"styled-components";import{COLORS as d}from"../../constants/Theme.js";const o=e.div`
-	width: 100%;
-	display: flex;
-	padding: 16px;
-	border-radius: 4px;
-	gap: 12px;
-	justify-content: ${e=>e.loading?"center":"flex-start"};
-	cursor: ${e=>e.disabled||e.loading?"not-allowed":"pointer"};
-	background-color: ${e=>e.selected?d.background.brandLight:d.surface.subdued};
-	border: 1px solid
-		${e=>e.selected?d.content.brand:e.disabled?d.stroke.primary:d.content.inactive};
-	:hover {
-		background-color: ${e=>e.isTooltipPresent?d.surface.subdued:e.selected?d.background.brandLight:e.disabled||e.loading?d.surface.subdued:d.surface.hovered};
-	}
-`,r=e.div`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;export{o as Container,r as Loader};

package/dist/esm/components/card-selector/CardSelectorGroup.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { CardSelectorProps } from './CardSelector';
-export type CardSelectorGroupProps = {
-    gap?: number;
-    align?: 'horizontal' | 'vertical';
-    cards: CardSelectorProps[];
-    onClick: (id: number) => void;
-    'data-test': string;
-};
-export declare const CardSelectorGroup: React.FC<CardSelectorGroupProps>;

package/dist/esm/components/card-selector/CardSelectorGroup.js

@@ -1 +0,0 @@
-import{j as t}from"../../node_modules/react/jsx-runtime.js";import{CardSelector as e}from"./CardSelector.js";const i=i=>t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"vertical"===i.align?"column":"row",gap:i.gap||16}},{children:i.cards.map((l=>t.jsx("div",Object.assign({style:{display:"flex",flex:1}},{children:t.jsx(e,{"data-test":i["data-test"],id:l.id,icon:l.icon,title:l.title,subtitle:l.subtitle,selected:l.selected,onCardClick:i.onClick,loading:l.loading,disabled:l.disabled,dataTestId:l.dataTestId,tooltip:l.tooltip})}),l.id)))}));export{i as CardSelectorGroup};

package/dist/esm/components/card-selector/index.d.ts

@@ -1,3 +0,0 @@
-import { CardSelector } from './CardSelector';
-import { CardSelectorGroup } from './CardSelectorGroup';
-export { CardSelector, CardSelectorGroup };

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

@@ -1,2 +0,0 @@
-import { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';
-export declare const Carousel: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/carousel/carousel.js

@@ -1,22 +0,0 @@
-import{j as r}from"../../node_modules/react/jsx-runtime.js";import s from"../../assets/icons/chevronLeft.svg.js";import t from"../../assets/icons/chevronRight.svg.js";import{Carousel as e}from"@trendyol-js/react-carousel";import o from"styled-components";const i=()=>r.jsx(c,Object.assign({className:"left"},{children:r.jsx(s,{width:16,height:16,color:"#fff"})})),n=()=>r.jsx(c,Object.assign({className:"right"},{children:r.jsx(t,{width:16,height:16,color:"#fff"})})),a=s=>r.jsx(r.Fragment,{children:r.jsx(e,Object.assign({leftArrow:r.jsx(i,{}),rightArrow:r.jsx(n,{})},s,{children:s.children}))}),c=o.div`
-	cursor: pointer;
-	margin: 0 8px;
-	width: 50px;
-	height: 50px;
-	border-radius: 25px;
-	display: flex;
-	align-items: center;
-	background-color: rgba(0, 0, 0, 0.4);
-	justify-content: center;
-	position: absolute;
-	z-index: 2;
-	top: 50%;
-	&.left {
-		transform: translate(0%, -50%);
-		left: 0;
-	}
-	&.right {
-		transform: translate(0%, -50%);
-		right: 0;
-	}
-`;export{a as Carousel};

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

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

package/dist/esm/components/carousel-preview/CarouselPreview.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-import { CHANNEL_TYPE } from "../template-preview/models/Channels";
-import { AllTemplateTypes } from '../template-preview/models/types';
-export declare const CarouselPreview: React.ForwardRefExoticComponent<{
-    channel: CHANNEL_TYPE;
-    template: AllTemplateTypes;
-    showSampleValues?: boolean | undefined;
-    isPreview?: boolean | undefined;
-    removeBottomBorder?: boolean | undefined;
-    borderRadius?: string | undefined;
-    showArrows?: boolean | undefined;
-    hideBorder?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import r from"react";import o from"react-slick";import{Container as s,CarouselSlickContainer as l}from"./CarouselPreview.style.js";import t from"./CarouselPreviewCard.js";import{useTemplateModalContext as n}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as i,isRCSChannel as a}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as d}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as u,CustomCarouselLeftArrow as c}from"./CustomCarouselArrows.js";const m=r.forwardRef((r=>{let{channel:o,template:l,isPreview:u,removeBottomBorder:c,borderRadius:m,showArrows:v,hideBorder:w,showSampleValues:h}=r;var j,x;const{sliderRef:C,selectedCarouselIndex:f,cardCount:g,setIsCarouselHovered:I,cardIndex:P}=n(),R=-1==P?i(o):P,b=null===(x=null===(j=null==l?void 0:l.components)||void 0===j?void 0:j[R])||void 0===x?void 0:x.cards,S=(null==b?void 0:b.length)?e.jsx(p,{cards:b,cardCount:null!=g?g:0,selectedCarouselIndex:null!=f?f:-1,sliderRef:C,isPreview:u,showArrows:v,channel:o,template:l,setIsCarouselHovered:I,showSampleValues:!!h}):null;return a(o)?e.jsx(d,Object.assign({borderRadius:m},{children:S})):e.jsxs(s,Object.assign({removeBottomBorder:c,borderRadius:m,hideBorder:w},{children:[e.jsx(t,{channel:o,currentTemplate:l,carouselCardIndex:-1,isPreview:u,width:"77%"}),S]}))})),p=r=>{let{cards:s,cardCount:n,selectedCarouselIndex:i,sliderRef:a,isPreview:d,showArrows:m,channel:p,template:v,setIsCarouselHovered:w,showSampleValues:h}=r;return e.jsx(l,Object.assign({cardCount:n,selectedCarouselIndex:i,onMouseEnter:()=>null==w?void 0:w(!0),onMouseLeave:()=>null==w?void 0:w(!1)},{children:e.jsx(o,Object.assign({ref:a,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:m,adaptiveHeight:!0,nextArrow:e.jsx(u,{isPreview:null!=d&&d}),prevArrow:e.jsx(c,{isPreview:null!=d&&d})},{children:null==s?void 0:s.map(((r,o)=>{var s,l;const n={components:r.components,mapping:null===(l=null===(s=null==v?void 0:v.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[o],content:null==v?void 0:v.content,templateType:null==v?void 0:v.templateType};return e.jsx(t,{channel:p,currentTemplate:n,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{m as CarouselPreview};

package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts

@@ -1,10 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    showHeader?: boolean | undefined;
-    removeBottomBorder?: boolean | undefined;
-    borderRadius?: string | undefined;
-    hideBorder?: boolean | undefined;
-}, never>;
-export declare const CarouselSlickContainer: import("styled-components").StyledComponent<"div", any, {
-    cardCount: number;
-    selectedCarouselIndex: number;
-}, never>;

package/dist/esm/components/carousel-preview/CarouselPreview.style.js

@@ -1,86 +0,0 @@
-import e from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const r=e.div`
-	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
-	border-color: ${o.stroke.primary};
-	border-top-style: solid;
-	border-bottom-style: ${e=>e.removeBottomBorder?"unset":"solid"};
-	border-top-width: 1px;
-	border-bottom-width: ${e=>e.hideBorder?"0px":"1px"};
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
-	position: relative;
-	height: 100%;
-	overflow-y: auto;
-	border-radius: ${e=>{var o;return null!==(o=e.borderRadius)&&void 0!==o?o:"0px"}};
-`,t=e.div`
-	width: 100%;
-
-	// Hides the pre-built right arrow
-	.slick-next:before {
-		content: none;
-	}
-
-	// Hides the pre-built left arrow
-	.slick-prev:before {
-		content: none;
-	}
-
-	// Right arrow styles
-	.slick-next {
-		z-index: 10;
-		border-radius: 50%;
-		align-items: center;
-		justify-content: center;
-		right: 10px;
-		border-radius: 50%;
-		width: 24px;
-		height: 24px;
-		display: flex;
-		background-color: white;
-		box-shadow: 0px 1.5px 6px 0px #0000001f;
-		/* height: 100%; */
-
-		:hover {
-			background: white;
-		}
-	}
-
-	// Left arrow styles
-	.slick-prev {
-		left: 5px;
-		z-index: 10;
-		border-radius: 50%;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		width: 24px;
-		height: 24px;
-		display: flex;
-		background-color: white;
-		box-shadow: 0px 1.5px 6px 0px #0000001f;
-
-		:hover {
-			background: white;
-		}
-	}
-
-	.slick-slide {
-		display: flex;
-	}
-
-	.slick-slide > div {
-		width: 100%;
-		height: 100%;
-		padding-bottom: 16px;
-	}
-
-	.slick-track {
-		flex: 1;
-	}
-
-	.slick-list {
-		display: flex;
-		flex-direction: column;
-		margin-left: -49px;
-	}
-`;export{t as CarouselSlickContainer,r as Container};

package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { CHANNEL_TYPE } from "../template-preview/models/Channels";
-declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
-    channel: CHANNEL_TYPE;
-    currentTemplate: any;
-    showSampleValues?: boolean | undefined;
-    carouselCardIndex?: number | undefined;
-    isPreview?: boolean | undefined;
-    width?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default CarouselPreviewCard;

package/dist/esm/components/carousel-preview/CarouselPreviewCard.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../variable-picker-v3/model.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";import"../template-preview/models/Channels.js";import{determineCardIndex as r}from"../template-preview/helpers/templateMiscHelper.js";const i=t.forwardRef((t=>{let{channel:i,currentTemplate:l,showSampleValues:s,carouselCardIndex:m,isPreview:o,width:n}=t;var d,h,c;const{cardWidth:v,template:u,cardIndex:w}=a(),j=-1==w?r(i):w,x=(null!==(c=null===(h=null===(d=null==u?void 0:u.components)||void 0===d?void 0:d[j].cards)||void 0===h?void 0:h.length)&&void 0!==c?c:0)-1===m?12:0;return e.jsx("div",Object.assign({style:{width:n||v,height:(null!=m?m:-1)>-1?"100%":"auto"}},{children:e.jsx(p,{showSampleValues:s,template:l,channel:i,size:"small",hideHeader:!0,carouselCardIndex:m,isWhatsappCarousel:!0,isPreview:o,whatsAppSpecificMeta:{templateContainerStyles:{marginRight:x,height:"100%"}}})}))}));export{i as default};

package/dist/esm/components/carousel-preview/CustomCarouselArrows.d.ts

@@ -1,7 +0,0 @@
-import { CustomArrowProps } from 'react-slick';
-export declare const CustomCarouselLeftArrow: (props: CustomArrowProps & {
-    isPreview: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const CustomCarouselRightArrow: (props: CustomArrowProps & {
-    isPreview: boolean;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/carousel-preview/CustomCarouselArrows.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import s from"../../assets/icons/chevronLeft.svg.js";import n from"../../assets/icons/chevronRight.svg.js";import{COLORS as t}from"../../constants/Theme.js";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";const o=n=>{const{className:o,style:c,onClick:i,isPreview:r}=n,{selectedCarouselIndex:a,setSelectedCarouselIndex:m}=l();return e.jsx("div",Object.assign({className:o,style:Object.assign(Object.assign({},c),{display:i&&(null!=a?a:-1)>-1||r?"flex":"none",content:"none"}),onClick:e=>{null==i||i(e),(null!=a?a:-1)<1||r||null==m||m((null!=a?a:-1)-1)}},{children:e.jsx(s,{height:10,width:10,color:t.content.primary})}))},c=s=>{const{className:o,style:c,onClick:i,isPreview:r}=s,{selectedCarouselIndex:a,setSelectedCarouselIndex:m,cardCount:d}=l();return e.jsx("div",Object.assign({className:o,style:Object.assign(Object.assign({},c),{display:i&&(null!=a?a:-1)>-1||r?"flex":"none",content:"none"}),onClick:e=>{null==i||i(e),(null!=a?a:-1)>=(null!=d?d:-1)-1||r||null==m||m((null!=a?a:-1)+1)}},{children:e.jsx(n,{height:10,width:10,color:t.content.primary})}))};export{o as CustomCarouselLeftArrow,c as CustomCarouselRightArrow};

package/dist/esm/components/carousel-preview/index.d.ts

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

package/dist/esm/components/carousel-secondary/CarouselSecondary.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { CarouselVersion } from './model';
-export interface CarouselProps {
-    pages: Array<React.FunctionComponent<React.SVGAttributes<SVGElement>> | any>;
-    onComplete: () => void;
-    textAlign?: string;
-    version?: CarouselVersion;
-    onCompleteText?: string;
-}
-export declare const CarouselSecondary: React.FC<CarouselProps>;
-export { CarouselVersion };

package/dist/esm/components/carousel-secondary/CarouselSecondary.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import t from"../../assets/icons/chevronLeft2.svg.js";import s from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight2.svg.js";import r from"../../assets/icons/chevronRight.svg.js";import{useState as i,useRef as n,useEffect as l}from"react";import{Button as c}from"../button/Button.js";import{CarouselContainer as a,CarouselBody as m,CarouselPage as j,CarouselFooter as d,PageIndicator as g,Indicator as h}from"./CarouselSecondary.style.js";import{CarouselVersion as p}from"./model.js";export{CarouselVersion}from"./model.js";const v=v=>{let{pages:u,onComplete:x,textAlign:f,version:b,onCompleteText:y}=v;const[V,C]=i(0),T=n(null);return l((()=>{T.current&&T.current.scrollTo({left:T.current.offsetWidth*V,behavior:"smooth"})}),[V]),e.jsxs(a,Object.assign({version:b||p.V1},{children:[e.jsx(m,Object.assign({ref:T,textAlign:f},{children:u.map(((t,s)=>e.jsx(j,Object.assign({isActive:s===V},{children:t}),s)))})),e.jsxs(d,Object.assign({version:b||p.V1},{children:[e.jsx("div",Object.assign({style:{visibility:b===p.V2&&0===V?"hidden":"visible"}},{children:e.jsx(c,{buttonText:"Back",buttonType:"tertiaryGray",onClick:()=>{C((e=>0===e?e:e-1))},size:b===p.V2?"small":"medium",LeadingIcon:b===p.V2?t:s,disabled:!V})})),e.jsx(g,{children:u.map(((t,s)=>e.jsx(h,{isActive:s===V,version:b||p.V1,onClick:()=>{C(s)}},s)))}),e.jsx(c,{buttonText:V===u.length-1?y||"Get started":"Next",buttonType:V===u.length-1||b===p.V2?"tertiary":"tertiaryGray",onClick:()=>{C((e=>e===u.length-1?e:e+1)),V===u.length-1&&x()},size:b===p.V2?"small":"medium",TrailingIcon:V<u.length-1?b===p.V2?o:r:void 0,style:b===p.V2?{}:{background:"transparent"}})]}))]}))};export{v as CarouselSecondary};

package/dist/esm/components/carousel-secondary/CarouselSecondary.style.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import { CarouselVersion } from './model';
-export declare const CarouselContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    version?: CarouselVersion | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    textAlign: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselPage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isActive: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CarouselFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    version?: CarouselVersion | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PageIndicator: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Indicator: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isActive: boolean;
-    version?: CarouselVersion | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;