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

package/dist/esm/components/QueryBuilder/types/QueryBuilderPropertyProps.d.ts

@@ -0,0 +1,20 @@
+import { DropdownOption } from "../../dropdown/type";
+import { QueryBuilderJoinOperators, QueryBuilderProperty } from './QueryBuilder.type';
+import { BaseQueryBuilderResponse, QueryBuilderAPIData } from './QueryBuilderAPI.type';
+import { CONNECTOR_VALUE_TYPE } from './QueryBuilderConnector.type';
+import { CONNECTOR_OPERATORS } from './QueryBuilderOperator.type';
+import { QueryBuilderProps } from './QueryBuilderProps.type';
+export type QueryBuilderPropertyProps = {
+    mode: QueryBuilderProps['mode'];
+    property?: QueryBuilderProperty;
+    selectPropertyJoinOperator?: (option: QueryBuilderJoinOperators, nodeID: string) => void;
+    propertySelectorText?: string;
+    fetchPropertyData?: () => Promise<BaseQueryBuilderResponse | null>;
+    onPropertyNameSelect?: (propertyName: QueryBuilderAPIData, property: QueryBuilderProperty) => Promise<BaseQueryBuilderResponse | DropdownOption | DropdownOption[] | {
+        normalized: QueryBuilderAPIData[];
+        originalData: any;
+    }>;
+    onPropertyOperatorChange?: (option: CONNECTOR_OPERATORS, property: QueryBuilderProperty) => void;
+    onPropertyValueChange?: (value: CONNECTOR_VALUE_TYPE | /** for multiselect */ QueryBuilderAPIData[], property: QueryBuilderProperty) => void;
+    onPropertyValueSearch?: (searchKey: string, property: QueryBuilderProperty) => Promise<DropdownOption[]>;
+};

package/dist/esm/components/QueryBuilder/types/QueryBuilderProps.type.d.ts

@@ -0,0 +1,52 @@
+import { Response } from '../../../types/apiExecutor';
+import { QueryBuilderRoot, QueryBuilderType } from './QueryBuilder.type';
+import { BaseQueryBuilderPayload, BaseQueryBuilderResponse } from './QueryBuilderAPI.type';
+export type QueryBuilderRef = {
+    getState: () => QueryBuilderRoot;
+    fillState: (state: QueryBuilderRoot) => void;
+    clearAll: (type: QueryBuilderType) => void;
+};
+export type QueryBuilderProps = {
+    /**
+     * The selector key that will be used to make query builder independent when there are multiple
+     * query builders in single page
+     */
+    selectorKey: string;
+    errorState?: QueryBuilderRoot;
+    /**
+     * and will be passed as a prop here. Single function to branch out based on the query being passed.
+     * list of allowed query builder types are keys of this object.
+     * List of allowed query builder types to show, usually in the first dropdown, single values for triggers
+     */
+    typesAPIHandlers: {
+        [key in QueryBuilderType]?: <T>(payload: BaseQueryBuilderPayload<T>) => Promise<Response<BaseQueryBuilderResponse>>;
+    };
+    /** the header text for the builder UI */
+    queryPreText: string;
+    /** the button text for increasing the node (eg trigger/filter ) list */
+    addNodeBtnText: string;
+    /** use when prefilling */
+    state?: QueryBuilderRoot;
+    /** querybuilder mode */
+    mode?: 'create' | 'edit' | 'view';
+    /**
+     * the on change handler, this callback will be called whenever there is any change in the state
+     * @note
+     * try using on-demand flow instead of reactive flow using ref.getState to avoid extra re-renders
+     */
+    onStateChange?: (state: QueryBuilderRoot) => void;
+    /**
+     * in property,
+     * if this is `true`,  it will allow user to re-select the selected property name again,
+     * if `false` , it will disabled the selected property name from the dropdown option
+     *
+     * @default true
+     */
+    reuseProperty?: boolean;
+    /**
+     * user can add any number of root level filter/trigger.
+     * This should be set to false when we only want single filter/trigger. eg IG/CTWA trigger
+     * @default true
+     */
+    infinite?: boolean;
+};

package/dist/esm/components/QueryBuilder/types/index.d.ts

@@ -0,0 +1,7 @@
+export type { QueryBuilderType, QueryBuilderJoinOperators, QueryBuilderConnectorType, QueryBuilderConnector, QueryBuilderProperty as QueryBuilderPropertyType, QueryBuilderMeta, BaseQueryBuilderNode as BaseQueryBuilderNodeType, QueryBuilderRoot, ConnectorError, } from './QueryBuilder.type';
+export * from './QueryBuilderAPI.type';
+export * from './QueryBuilderConnector.type';
+export * from './QueryBuilderNodeProps.type';
+export * from './QueryBuilderOperator.type';
+export * from './QueryBuilderPropertyProps';
+export * from './QueryBuilderProps.type';

package/dist/esm/components/SearchFilter/components/DatePickerButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputVariant } from "../../input";
+import { FilterSchema } from '../types/SearchFilter.type';
+export declare const DatePickerButton: React.FC<FilterSchema & {
+    onSelect: (value: Date) => void;
+    variant: InputVariant;
+}>;

package/dist/esm/components/SearchFilter/components/DatePickerButton.js

@@ -0,0 +1 @@
+import{__rest as t}from"../../../_virtual/_tslib.js";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as o}from"react";import{DatePicker as r}from"../../datePicker/DatePicker.js";import{Input as n}from"../../input/Input.js";import{InputStyleContext as a}from"../../input/context/InputStyleProvider.js";import{Tag as l}from"../../tag/Tag.js";import{DEFAULT_THEME as s}from"../../../constants/Theme.js";import c from"../../../assets/icons/chevronDown.svg.js";import p from"../../../assets/icons/chevronDownOutline.svg.js";const d=d=>{var g,m,{text:h,onSelect:u,variant:v}=d,f=t(d,["text","onSelect","variant"]);const[j,x]=o(!1),[S,y]=o(null),b=(null===(g=f.width)||void 0===g?void 0:g.toString())?null===(m=f.width)||void 0===m?void 0:m.toString():S?12*(null==S?void 0:S.toDateString().length)+"px":12*h.length+"px";return e("div",Object.assign({style:{position:"relative"}},{children:[i("div",Object.assign({onClick:()=>x((t=>!t)),style:{cursor:"pointer",width:"100%",height:"100%"}},{children:"small"===v?i(l,{tagText:S?S.toDateString():null!=h?h:"",theme:"light",type:"neutral",variant:"regular",TrailingIcon:p}):i(a.Provider,Object.assign({value:{InputWrapper:{height:32,width:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px",backgroundColor:"#fff"},RootContainer:{opacity:1},input:{minHeight:"100%"}}},{children:i(n,{state:"disabled",value:S?S.toDateString():void 0,variant:"small",placeholder:null!=h?h:"Select a date",width:b,onChangeText:()=>{},rightIcon:{icon:()=>i(c,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},onClick:()=>{},width:20,height:20,color:s.colorsV2.content.primary})}})}))})),j&&i("div",Object.assign({style:{position:"absolute",top:"calc(100% + 8px)"}},{children:i(r,{selectRange:!1,onSelectDate:t=>{y(t),x(!1),u(t)}})}))]}))};d.displayName="DatePickerButton";export{d as DatePickerButton};

package/dist/esm/components/SearchFilter/components/FilterChipListRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FilterValueType, SearchFilterOutputState } from '../types/SearchFilter.type';
+export declare const FilterChipListRenderer: React.FC<{
+    selectedState: SearchFilterOutputState[];
+    onDeSelect: (id: string, value: FilterValueType) => void;
+}>;

package/dist/esm/components/SearchFilter/components/FilterChipListRenderer.js

@@ -0,0 +1 @@
+import{jsx as t,Fragment as a}from"react/jsx-runtime";import"@tippyjs/react";import"react";import"../../tooltips/TooltipInternal.js";import"../../../constants/Theme.js";import"../../TypographyStyle.js";import"../../analytics-chips-and-dropdowns/CommonStyles.js";import{formatDate as i}from"../../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../../analytics-chips-and-dropdowns/AnalyticsMetric.js";import{Tag as r}from"../../tag/Tag.js";import"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import o from"../../../assets/icons/cross.svg.js";import{FilterType as e}from"../types/SearchFilter.type.js";const n=n=>{let{selectedState:l,onDeSelect:p}=n;return t(a,{children:l.map((n=>{var l,s,d,c,h,m,y;return n.type===e.Multiple?t(a,{children:null===(l=n.value)||void 0===l?void 0:l.map((a=>{var i,e;return t(r,{onTrailingIconClicked:()=>p(n.id,a),style:{cursor:"pointer"},tagText:null!==(e=null===(i=a.label)||void 0===i?void 0:i.slice(0,10))&&void 0!==e?e:"",type:"neutral",theme:"light",TrailingIcon:o},`${n.id}-${a.value}`)}))}):n.type===e.Date?t(r,{onTrailingIconClicked:()=>p(n.id,n.value),style:{cursor:"pointer"},tagText:i(n.value),type:"neutral",theme:"light",TrailingIcon:o},n.id):n.type===e.DateRange?t(r,{onTrailingIconClicked:()=>p(n.id,n.value),style:{cursor:"pointer"},tagText:`${i(null===(s=n.value)||void 0===s?void 0:s[0])} to ${i(null===(d=n.value)||void 0===d?void 0:d[1])}`,type:"neutral",theme:"light",TrailingIcon:o},n.id):t(r,{onTrailingIconClicked:()=>p(n.id,n.value),style:{cursor:"pointer"},tagText:n.type===e.Single?null!==(h=null===(c=n.value)||void 0===c?void 0:c.label)&&void 0!==h?h:"":null!==(y=null===(m=n.value)||void 0===m?void 0:m.toString())&&void 0!==y?y:"",type:"neutral",theme:"light",TrailingIcon:o},n.id)}))})};export{n as FilterChipListRenderer};

package/dist/esm/components/SearchFilter/components/SearchFilterItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputVariant } from '../../input';
+import { FilterSchema, FilterValueType } from '../types/SearchFilter.type';
+export declare const SearchFilterItem: React.FC<FilterSchema & {
+    variant: InputVariant;
+    onChange: (val: FilterValueType) => void;
+}>;

package/dist/esm/components/SearchFilter/components/SearchFilterItem.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"@tippyjs/react";import"react";import"../../tooltips/TooltipInternal.js";import"../../../constants/Theme.js";import"../../TypographyStyle.js";import"../../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as o}from"../../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../../tag/Tag.js";import"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import"../../dropdown/DropdownPopover/index.js";import{Dropdown as e}from"../../dropdown/Dropdown.js";import{ChipDropdown as n}from"../../dropdown/ChipDropdown.js";import"../../zeroState/ZeroState.js";import"../../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../../checkBox/CheckBox.styled.js";import"../../list-item/ListItem.js";import"../../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../../button/Button.js";import"../../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../../input/Input.js";import"../../dropdown/MenuItem/MenuItem.js";import{FilterType as r}from"../types/SearchFilter.type.js";import{DatePickerButton as a}from"./DatePickerButton.js";const p=[{label:"Last 7 days",value:"7 days",key:7,noOfDays:7},{label:"Last 30 days",value:"30 days",key:30,noOfDays:30},{label:"Custom range",value:"calender",key:"custom",isCustom:!0,dateRangeSelectionOptions:{selectRange:!0}}],i=i=>{var s,d,l;return i.type===r.Date?t(a,Object.assign({},i,{variant:i.variant,onSelect:t=>i.onChange(t)})):i.type===r.DateRange?t(o,{variant:i.variant,placeholder:i.text,options:i.preset?p:null!==(s=i.options)&&void 0!==s?s:[],onOptionSelected:function(t){var o,e;t.selectedRange&&i.onChange([null===(o=t.selectedRange)||void 0===o?void 0:o[0],null===(e=t.selectedRange)||void 0===e?void 0:e[1]])}},i.id):"small"===i.variant?t(n,{isMultiSelect:i.type===r.Multiple,options:null!==(d=i.options)&&void 0!==d?d:[],defaultOptions:i.defaultValue,onSelect:i.onChange,placeHolder:i.text}):t(e,{isMultiSelect:i.type===r.Multiple,size:"small",options:null!==(l=i.options)&&void 0!==l?l:[],defaultOptions:i.defaultValue,onSelect:i.onChange,placeHolder:i.text,width:10*i.text.length+"px"})};export{i as SearchFilterItem};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchFilterProps } from './types/SearchFilter.type';
+export declare const SearchFilter: React.FC<SearchFilterProps>;

package/dist/esm/components/SearchFilter/index.js

@@ -0,0 +1 @@
+import{useRef as e,useState as t,createElement as i}from"react";import{jsxs as r,jsx as l}from"react/jsx-runtime";import{SearchBar as n}from"../searchBar/searchBar.js";import{FilterChipListRenderer as a}from"./components/FilterChipListRenderer.js";import{SearchFilterItem as s}from"./components/SearchFilterItem.js";import{FilterType as d}from"./types/SearchFilter.type.js";const c=c=>{let{direction:o="row",schema:u,variant:p,onChange:f,showSelectedChips:v}=c;var m,h,g;const x=e(null!==(m=null==u?void 0:u.filter((e=>e.defaultValue)).map((e=>({id:e.id,value:e.defaultValue,type:e.type,text:e.text}))))&&void 0!==m?m:[]),[y,j]=t([]),b=u.find((e=>e.type===d.Search)),w=e=>{b&&e&&O(b.id,e)},O=(e,t)=>{const i=u.find((t=>t.id===e)),r=[...y];if(i){const l=r.findIndex((t=>t.id===e));-1!==l?r[l]={id:i.id,value:t}:r.push({id:i.id,value:t});const n=x.current.find((t=>t.id===e));x.current=n?x.current.map((i=>i.id===e?{id:i.id,value:t,type:i.type,text:i.text}:i)):[...x.current,{id:e,value:t,type:i.type,text:i.text}],f(i.id,x.current,t),j([...r])}};return r("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8}},{children:[r("div",Object.assign({style:{display:"flex",flexDirection:o,gap:8,flexWrap:"wrap",alignItems:"row"===o?"center":"self-start"}},{children:[b&&l(n,{width:null!==(g=null===(h=b.width)||void 0===h?void 0:h.toString())&&void 0!==g?g:"100%",isEnabled:!0,onChange:w,onEnter:w,placeholder:b.text,variant:"small"}),l("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8,flexWrap:"wrap",alignItems:"row"===o?"center":"self-start"}},{children:u.filter((e=>e.type!==d.Search)).map(((e,t)=>i(s,Object.assign({},e,{key:t,variant:p,onChange:t=>{O(e.id,t)}}))))}))]})),v&&l("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:l(a,{selectedState:x.current,onDeSelect:(e,t)=>{const i=u.find((t=>t.id===e));let r=[...y];i&&(i.type===d.Multiple?(r=r.map((i=>{if(i.id===e){const e=i.value.filter((e=>e.value!==t.value));return e.length?Object.assign(Object.assign({},i),{value:e}):null}return i})).filter((e=>!!e)),x.current=x.current.map((i=>{var r;if(i.id===e){const e=null===(r=i.value)||void 0===r?void 0:r.filter((e=>e.value!==t.value));return e.length?Object.assign(Object.assign({},i),{value:e}):null}return i})).filter((e=>!!e))):(r=r.filter((t=>t.id!==e)),x.current=x.current.filter((t=>t.id!==e))),f(i.id,x.current,t),j([...r]))}})}))]}))};export{c as SearchFilter};

package/dist/esm/components/SearchFilter/types/SearchFilter.type.d.ts

@@ -0,0 +1,33 @@
+import { DropdownOptions } from "../../analytics-chips-and-dropdowns";
+import { DropdownOption } from "../../dropdown/type";
+import { InputVariant } from "../../input";
+export declare enum FilterType {
+    Date = "Date",
+    DateRange = "DateRange",
+    Multiple = "Multiple",
+    Single = "Single",
+    Search = "Search"
+}
+export type FilterValueType = DropdownOption | DropdownOption[] | Date | Date[] | string;
+export type SearchFilterOutputState = {
+    id: string;
+    type: FilterType;
+    value?: FilterValueType;
+    text: string;
+};
+export type FilterSchema = {
+    id: string;
+    type: FilterType;
+    text: string;
+    options?: DropdownOption[] | DropdownOptions[];
+    preset?: boolean;
+    defaultValue?: FilterValueType;
+    width?: number | string;
+};
+export type SearchFilterProps = {
+    variant: InputVariant;
+    showSelectedChips: boolean;
+    direction: 'row' | 'column';
+    schema: FilterSchema[];
+    onChange: (id: string, selectedStates: SearchFilterOutputState[], value?: FilterValueType) => void;
+};

package/dist/esm/components/SearchFilter/types/SearchFilter.type.js

@@ -0,0 +1 @@
+var e;!function(e){e.Date="Date",e.DateRange="DateRange",e.Multiple="Multiple",e.Single="Single",e.Search="Search"}(e||(e={}));export{e as FilterType};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DropdownOption } from "../dropdown/type";
+export type TablePaginationProps = {
+    pageSize: 5 | 10 | 20;
+    pageNumber: number;
+    totalRows: number;
+    hidePageSizeOptions?: boolean;
+    updatePageNumber: (pageNumber: number) => void;
+    updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
+};
+export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/esm/components/TablePagination/TablePagination.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight.svg.js";import{StyledTablePaginationContainer as i,StyledPagingContainer as n}from"./TablePagination.styled.js";import{DEFAULT_THEME as a}from"../../constants/Theme.js";import{BodySecondary as r}from"../TypographyStyle.js";import{Dropdown as c}from"../dropdown/Dropdown.js";const l=l=>{let{pageNumber:d,pageSize:p,totalRows:g,updatePageNumber:h,updatePageSize:m,hidePageSizeOptions:b}=l;const j=a.colorsV2,v=(d-1)*p+1,y=(d-1)*p+p,f=Math.ceil(g/p),u=1==f;let w=[];w=f>=5?d===f?[d-4,d-3,d-2,d-1,d]:1===d?[d,d+1,d+2,d+3,d+4]:2===d?[d-1,d,d+1,d+2,d+3]:d===f-1?[d-3,d-2,d-1,d,d+1]:[d-2,d-1,d,d+1,d+2]:Array.from({length:f},((e,t)=>t+1));return e(i,{children:[!b&&t("div",{children:t(c,{size:"small",options:[{label:"5 rows per page",value:"5",selected:5===p},{label:"10 rows per page",value:"10",selected:10===p},{label:"20 rows per page",value:"20",selected:20===p}],onSelect:m,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[!b&&g&&e(r,Object.assign({style:{color:j.content.placeholder,marginRight:8}},{children:["Showing ",v,"-",y>g?g:y," of"," ",g," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!u&&t(n,Object.assign({active:!1,onClick:()=>{1!==d&&h(Math.max(d-1,1))},disabled:1===d},{children:t(s,{color:j.content.secondary,height:14,width:14})})),w.map((e=>t(n,Object.assign({active:e==d,onClick:()=>h(e),style:{display:1==e&&g<=p?"none":"flex"}},{children:t(r,Object.assign({style:{color:e==d?j.content.primaryInverse:j.content.secondary}},{children:e}))}),e))),!u&&t(n,Object.assign({isLast:!0,active:!1,onClick:()=>{d!==f&&h(Math.min(d+1,f))},disabled:d===f},{children:t(o,{color:j.content.secondary,height:14,width:14})}))]}))]}))]})};export{l as TablePagination};

package/dist/esm/components/TablePagination/TablePagination.styled.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledTablePaginationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPagingContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    isLast?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/dist/esm/components/TablePagination/TablePagination.styled.js

@@ -0,0 +1,38 @@
+import r from"styled-components";import{DEFAULT_THEME as t}from"../../constants/Theme.js";const o=r.div`
+	background-color: unset !important;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	margin: 0 16px;
+
+	.paging__container {
+		display: flex;
+		margin-top: 8px;
+		margin-bottom: 8px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.pages__buttons-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: ${t.colorsV2.surface.standard};
+		border: 1px solid ${t.colorsV2.stroke.primary};
+		border-radius: 4px;
+		cursor: pointer;
+	}
+`,e=r.div`
+	background: ${r=>r.active?t.colorsV2.background.brand:"none"};
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-right: ${r=>r.isLast?"none":`1px solid ${t.colorsV2.stroke.primary}`};
+	&:hover {
+		cursor: ${r=>r.disabled?"not-allowed":"pointer"};
+	}
+`;export{e as StyledPagingContainer,o as StyledTablePaginationContainer};

package/dist/esm/components/TablePagination/TablePaginationCard.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TablePaginationProps } from "./TablePagination";
+export declare const TablePaginationCardStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TablePaginationCard: React.FC<TablePaginationProps>;

package/dist/esm/components/TablePagination/TablePaginationCard.js

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{jsx as b}from"react/jsx-runtime";import{TablePagination as e}from"./TablePagination.js";import{COLORS as t}from"../../constants/Theme.js";const a=c("div","production"===process.env.NODE_ENV?{target:"exfv5q90"}:{target:"exfv5q90",label:"TablePaginationCardStyled"})("background:",t.surface.standard,";border:1px solid ",t.stroke.primary,";border-radius:4px;display:flex;justify-content:center;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlUGFnaW5hdGlvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvRCIsImZpbGUiOiJUYWJsZVBhZ2luYXRpb25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgVGFibGVQYWdpbmF0aW9uLCB9IGZyb20gXCIuL1RhYmxlUGFnaW5hdGlvblwiO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUYWJsZVBhZ2luYXRpb25DYXJkU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdGJhY2tncm91bmQ6ICR7Q09MT1JTLnN1cmZhY2Uuc3RhbmRhcmR9O1xuXHRib3JkZXI6IDFweCBzb2xpZCAke0NPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcblx0ZGlzcGxheTogZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xyXG5leHBvcnQgY29uc3QgVGFibGVQYWdpbmF0aW9uQ2FyZCA9IChwcm9wcykgPT4ge1xyXG4gICAgcmV0dXJuIChfanN4KFRhYmxlUGFnaW5hdGlvbkNhcmRTdHlsZWQsIHsgY2hpbGRyZW46IF9qc3goVGFibGVQYWdpbmF0aW9uLCBPYmplY3QuYXNzaWduKHt9LCBwcm9wcykpIH0pKTtcclxufTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VGFibGVQYWdpbmF0aW9uQ2FyZC5qcy5tYXAiXX0= */")),l=c=>b(a,{children:b(e,Object.assign({},c))});export{l as TablePaginationCard,a as TablePaginationCardStyled};

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

@@ -0,0 +1,2 @@
+export * from './TablePagination';
+export * from './TablePaginationCard';

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

@@ -1,17 +1,72 @@
-export declare const TitleLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleMedium: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleSmall: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Display: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyPrimary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodySecondary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyPrimaryLink: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodySecondaryLink: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyTiny: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Caption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleLarge: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const TitleMedium: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const SmallRegular: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const TitleRegular: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const TitleSmall: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const Display: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyLarge: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyPrimary: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodySecondary: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyPrimaryLink: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodySecondaryLink: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyCaption: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyTiny: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const ButtonLarge: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const ButtonRegular: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const SubHeading: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const BodyRegular: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const Caption: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

package/dist/esm/components/TypographyStyle.js

@@ -1,100 +1,170 @@
-import t from"styled-components";import{COLORS as e,FONTS as i}from"../constants/Theme.js";const o=t=>t+"px",n=t.div`
+import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleLarge.fontWeight};
-	font-size: ${o(i.titleLarge.fontSize)};
-	line-height: ${o(i.titleLarge.lineHeight)};
-`,r=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleLarge.fontWeight};
+	font-size: ${o(t.titleLarge.fontSize)};
+	line-height: ${o(t.titleLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,l=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleMedium.fontWeight};
-	font-size: ${o(i.titleMedium.fontSize)};
-	line-height: ${o(i.titleMedium.lineHeight)};
-`,l=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleMedium.fontWeight};
+	font-size: ${o(t.titleMedium.fontSize)};
+	line-height: ${o(t.titleMedium.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,r=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleRegular.fontWeight};
-	font-size: ${o(i.titleRegular.fontSize)};
-	line-height: ${o(i.titleRegular.lineHeight)};
-`,f=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.title4.fontWeight};
+	font-size: ${o(t.title4.fontSize)};
+	line-height: ${o(t.title4.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,f=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleSmall.fontWeight};
-	font-size: ${o(i.titleSmall.fontSize)};
-	line-height: ${o(i.titleSmall.lineHeight)};
-`,g=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleRegular.fontWeight};
+	font-size: ${o(t.titleRegular.fontSize)};
+	line-height: ${o(t.titleRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,a=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.display.fontWeight};
-	font-size: ${o(i.display.fontSize)};
-	line-height: ${o(i.display.lineHeight)};
-`,a=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleSmall.fontWeight};
+	font-size: ${o(t.titleSmall.fontSize)};
+	line-height: ${o(t.titleSmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,b=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyLarge.fontSize)};
-	line-height: ${o(i.bodyLarge.lineHeight)};
-`,h=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.display.fontWeight};
+	font-size: ${o(t.display.fontSize)};
+	line-height: ${o(t.display.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,d=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyPrimary.fontSize)};
-	line-height: ${o(i.bodyPrimary.lineHeight)};
-`,$=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyLarge.fontSize)};
+	line-height: ${o(t.bodyLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,h=e.div`
 	font-family: Inter;
-	color: ${e.content.primary};
-	font-weight: ${i.bodySecondary.fontWeight};
-	font-size: ${o(i.bodySecondary.fontSize)};
-	line-height: ${o(i.bodySecondary.lineHeight)};
-`,c=t(h)`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyPrimary.fontSize)};
+	line-height: ${o(t.bodyPrimary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,c=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodySecondary.fontWeight};
+	font-size: ${o(t.bodySecondary.fontSize)};
+	line-height: ${o(t.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,g=e(h)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,y=t($)`
+`,$=e(c)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,d=t.div`
+`,w=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
-`,m=t.div`
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.tiny.fontWeight};
-	font-size: ${o(i.tiny.fontSize)};
-	line-height: ${o(i.tiny.lineHeight)};
-`,p=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,m=e.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.tiny.fontWeight};
+	font-size: ${o(t.tiny.fontSize)};
+	line-height: ${o(t.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,y=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.buttonLarge.fontWeight};
-	font-size: ${o(i.buttonLarge.fontSize)};
-	line-height: ${o(i.buttonLarge.lineHeight)};
-`,z=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonLarge.fontWeight};
+	font-size: ${o(t.buttonLarge.fontSize)};
+	line-height: ${o(t.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,p=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.buttonRegular.fontWeight};
-	font-size: ${o(i.buttonRegular.fontSize)};
-	line-height: ${o(i.buttonRegular.lineHeight)};
-`,s=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonRegular.fontWeight};
+	font-size: ${o(t.buttonRegular.fontSize)};
+	line-height: ${o(t.buttonRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,s=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.subHeading.fontWeight};
-	font-size: ${o(i.subHeading.fontSize)};
-	line-height: ${o(i.subHeading.lineHeight)};
-`,b=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.subHeading.fontWeight};
+	font-size: ${o(t.subHeading.fontSize)};
+	line-height: ${o(t.subHeading.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,x=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyRegular.fontWeight};
-	font-size: ${o(i.bodyRegular.fontSize)};
-	line-height: ${o(i.bodyRegular.lineHeight)};
-`,u=t.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyRegular.fontWeight};
+	font-size: ${o(t.bodyRegular.fontSize)};
+	line-height: ${o(t.bodyRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,k=e.div`
 	font-family: Inter;
-	color: ${e.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
-`;export{d as BodyCaption,a as BodyLarge,h as BodyPrimary,c as BodyPrimaryLink,b as BodyRegular,$ as BodySecondary,y as BodySecondaryLink,m as BodyTiny,p as ButtonLarge,z as ButtonRegular,u as Caption,g as Display,s as SubHeading,n as TitleLarge,r as TitleMedium,l as TitleRegular,f as TitleSmall};
+	color: ${i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`;export{w as BodyCaption,d as BodyLarge,h as BodyPrimary,g as BodyPrimaryLink,x as BodyRegular,c as BodySecondary,$ as BodySecondaryLink,m as BodyTiny,y as ButtonLarge,p as ButtonRegular,k as Caption,b as Display,r as SmallRegular,s as SubHeading,n as TitleLarge,l as TitleMedium,f as TitleRegular,a as TitleSmall};

package/dist/esm/components/WhatsAppTextEditor/CustomEditor.styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isError: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextSpace: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+export declare const OuterContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;