@bikdotai/bik-component-library 0.1.1-analytics-chips-beta → 0.2.0-bik-layout-beta

package/dist/cjs/components/QueryBuilder/types/QueryBuilderConnector.type.d.ts

@@ -0,0 +1,49 @@
+import { DropdownOption } from "../../dropdown/type";
+import { QueryBuilderConnectorType } from './QueryBuilder.type';
+import { QueryBuilderAPIData } from './QueryBuilderAPI.type';
+import { CONNECTOR_OPERATORS } from './QueryBuilderOperator.type';
+export type CONNECTOR_OPERATOR_TYPE = keyof CONNECTOR_OPERATORS;
+export type ExtraOption = QueryBuilderAPIData[] | DropdownOption | DropdownOption[];
+export type ConnectorComponentProps = {
+    val?: CONNECTOR_VALUE_TYPE;
+    onChange?: (val: CONNECTOR_VALUE_TYPE) => void;
+    extra?: {
+        options?: ExtraOption;
+        originalData?: any;
+        freeForm?: boolean;
+    };
+    errors?: {
+        operator?: string;
+        val?: string | string[];
+    };
+    nativeID?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+};
+export type ConnectorProps = {
+    isLoading?: boolean;
+    noDefault?: boolean;
+    connectorType: QueryBuilderConnectorType;
+    defaultConnector?: CONNECTOR_OPERATORS;
+    connectorVal?: CONNECTOR_VALUE_TYPE;
+    onOperatorChange: (operator: CONNECTOR_OPERATORS) => void;
+    onValueChange: (value: CONNECTOR_VALUE_TYPE) => void;
+    extra?: {
+        options?: ExtraOption;
+        originalData?: any;
+    };
+    errors?: {
+        operator?: string;
+        val?: string | string[];
+    };
+    testID?: string;
+    disabled?: boolean;
+};
+export type CONNECTOR_VALUE_TYPE = string[] | number | Date[] | Date | number[] | number | undefined | /** for multiselect */ QueryBuilderAPIData[] | IG_VALUE[];
+type IG_VALUE = {
+    imageUrl: string;
+    redirectionUrl: string;
+    overlayCaption: string;
+    id: string;
+};
+export {};

package/dist/cjs/components/QueryBuilder/types/QueryBuilderNodeProps.type.d.ts

@@ -0,0 +1,11 @@
+import { Response } from '../../../types/apiExecutor';
+import { BaseQueryBuilderNode, QueryBuilderType } from './QueryBuilder.type';
+import { BaseQueryBuilderPayload, BaseQueryBuilderResponse } from './QueryBuilderAPI.type';
+import { QueryBuilderProps } from './QueryBuilderProps.type';
+export type QueryBuilderNodeProps = {
+    allowedNodes: QueryBuilderType[];
+    node: BaseQueryBuilderNode;
+    mode: QueryBuilderProps['mode'];
+    selectorKey: string;
+    apiHandler: <T>(payload: BaseQueryBuilderPayload<T>) => Promise<Response<BaseQueryBuilderResponse>>;
+};

package/dist/cjs/components/QueryBuilder/types/QueryBuilderOperator.type.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @fileOverview Ideally this file should not be used directly in components or in main logic layer.
+ * Create helper for this and then use them.
+ */
+export declare enum INTEGER_OPERATORS {
+    is = "is",
+    isNot = "isNot",
+    exists = "exists",
+    doesntExist = "doesntExist",
+    lessThan = "lessThan",
+    lessThanOrEqualTo = "lessThanOrEqualTo",
+    greaterThan = "greaterThan",
+    greaterThanOrEqualTo = "greaterThanOrEqualTo"
+}
+export declare enum STRING_OPERATORS {
+    is = "is",
+    isNot = "isNot",
+    contains = "contains",
+    doesntContain = "doesntContain",
+    startsWith = "startsWith",
+    endsWith = "endsWith",
+    exists = "exists",
+    doesntExist = "doesntExist"
+}
+export declare enum IG_STRING_OPERATORS {
+    any = "any",
+    is = "is",
+    contains = "contains",
+    startsWith = "startsWith",
+    endsWith = "endsWith"
+}
+export declare enum AD_STRING_OPERATORS {
+    is = "is"
+}
+export declare enum SPECIFIC_IG_OPERATORS {
+    in = "in"
+}
+export declare enum ICE_BREAKER_OPERATORS {
+    is = "is"
+}
+export declare enum ANY_IG_OPERATORS {
+    in = "in"
+}
+export declare enum ANY_AD_OPERATORS {
+    in = "in"
+}
+export declare enum REACTION_OPERATORS {
+    contains = "contains"
+}
+export declare enum DATE_OPERATORS {
+    on = "on",
+    notOn = "notOn",
+    inBetween = "inBetween",
+    notInBetween = "notInBetween",
+    before = "before",
+    after = "after",
+    today = "today",
+    yesterday = "yesterday",
+    'last week' = "last week",
+    'last month' = "last month",
+    'last quarter' = "last quarter",
+    'in the last' = "in the last"
+}
+export declare enum BOOLEAN_OPERATORS {
+    isTrue = "isTrue",
+    isFalse = "isFalse",
+    exists = "exists",
+    doesntExist = "doesntExist"
+}
+export declare enum FREQUENCY_OPERATORS {
+    exactly = "exactly",
+    atleast = "atleast",
+    atMost = "atMost"
+}
+export type CONNECTOR_OPERATORS = FREQUENCY_OPERATORS | BOOLEAN_OPERATORS | DATE_OPERATORS | STRING_OPERATORS | INTEGER_OPERATORS;
+export declare enum EVENT_VALUES {
+    FreeText = "FreeText",
+    NoInput = "NoInput",
+    IntegerSingleValue = "IntegerSingleValue",
+    StringSingleValue = "StringSingleValue",
+    TwoNumberInputsSeperatedByAnd = "TwoNumberInputsSeperatedByAnd",
+    MultiselectDropdownFreeText = "MultiselectDropdownFreeText",
+    SingleselectDropdownFreeText = "SingleselectDropdownFreeText",
+    SingleDate = "SingleDate",
+    TwoDate = "TwoDate",
+    IntegerPositiveSingle = "IntegerPositiveSingle",
+    NumberTime = "NumberTime"
+}
+export type EVENT_RESPONSE_VALUE = {
+    FreeText: string[];
+    IntegerSingleValue: number;
+    StringSingleValue: string;
+    TwoNumberInputsSeperatedByAnd: number[];
+    MultiselectDropdownFreeText: string[];
+    SingleselectDropdownFreeText: string;
+    SingleDate: Date;
+    IntegerPositiveSingle: number;
+    TwoDate: Date[];
+};

package/dist/cjs/components/QueryBuilder/types/QueryBuilderOperator.type.js

@@ -0,0 +1 @@
+"use strict";var e,t,s,o,R,r,i;Object.defineProperty(exports,"__esModule",{value:!0}),exports.INTEGER_OPERATORS=void 0,(e=exports.INTEGER_OPERATORS||(exports.INTEGER_OPERATORS={})).is="is",e.isNot="isNot",e.exists="exists",e.doesntExist="doesntExist",e.lessThan="lessThan",e.lessThanOrEqualTo="lessThanOrEqualTo",e.greaterThan="greaterThan",e.greaterThanOrEqualTo="greaterThanOrEqualTo",exports.STRING_OPERATORS=void 0,(t=exports.STRING_OPERATORS||(exports.STRING_OPERATORS={})).is="is",t.isNot="isNot",t.contains="contains",t.doesntContain="doesntContain",t.startsWith="startsWith",t.endsWith="endsWith",t.exists="exists",t.doesntExist="doesntExist",exports.IG_STRING_OPERATORS=void 0,(s=exports.IG_STRING_OPERATORS||(exports.IG_STRING_OPERATORS={})).any="any",s.is="is",s.contains="contains",s.startsWith="startsWith",s.endsWith="endsWith",exports.AD_STRING_OPERATORS=void 0,(exports.AD_STRING_OPERATORS||(exports.AD_STRING_OPERATORS={})).is="is",exports.SPECIFIC_IG_OPERATORS=void 0,(exports.SPECIFIC_IG_OPERATORS||(exports.SPECIFIC_IG_OPERATORS={})).in="in",exports.ICE_BREAKER_OPERATORS=void 0,(exports.ICE_BREAKER_OPERATORS||(exports.ICE_BREAKER_OPERATORS={})).is="is",exports.ANY_IG_OPERATORS=void 0,(exports.ANY_IG_OPERATORS||(exports.ANY_IG_OPERATORS={})).in="in",exports.ANY_AD_OPERATORS=void 0,(exports.ANY_AD_OPERATORS||(exports.ANY_AD_OPERATORS={})).in="in",exports.REACTION_OPERATORS=void 0,(exports.REACTION_OPERATORS||(exports.REACTION_OPERATORS={})).contains="contains",exports.DATE_OPERATORS=void 0,(o=exports.DATE_OPERATORS||(exports.DATE_OPERATORS={})).on="on",o.notOn="notOn",o.inBetween="inBetween",o.notInBetween="notInBetween",o.before="before",o.after="after",o.today="today",o.yesterday="yesterday",o["last week"]="last week",o["last month"]="last month",o["last quarter"]="last quarter",o["in the last"]="in the last",exports.BOOLEAN_OPERATORS=void 0,(R=exports.BOOLEAN_OPERATORS||(exports.BOOLEAN_OPERATORS={})).isTrue="isTrue",R.isFalse="isFalse",R.exists="exists",R.doesntExist="doesntExist",exports.FREQUENCY_OPERATORS=void 0,(r=exports.FREQUENCY_OPERATORS||(exports.FREQUENCY_OPERATORS={})).exactly="exactly",r.atleast="atleast",r.atMost="atMost",exports.EVENT_VALUES=void 0,(i=exports.EVENT_VALUES||(exports.EVENT_VALUES={})).FreeText="FreeText",i.NoInput="NoInput",i.IntegerSingleValue="IntegerSingleValue",i.StringSingleValue="StringSingleValue",i.TwoNumberInputsSeperatedByAnd="TwoNumberInputsSeperatedByAnd",i.MultiselectDropdownFreeText="MultiselectDropdownFreeText",i.SingleselectDropdownFreeText="SingleselectDropdownFreeText",i.SingleDate="SingleDate",i.TwoDate="TwoDate",i.IntegerPositiveSingle="IntegerPositiveSingle",i.NumberTime="NumberTime";

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

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

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

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

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

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const n=o.default.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.DEFAULT_THEME.colorsV2.surface.standard};
+		border: 1px solid ${t.DEFAULT_THEME.colorsV2.stroke.primary};
+		border-radius: 4px;
+		cursor: pointer;
+	}
+`,i=o.default.div`
+	background: ${e=>e.active?t.DEFAULT_THEME.colorsV2.background.brand:"none"};
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-right: ${e=>e.isLast?"none":`1px solid ${t.DEFAULT_THEME.colorsV2.stroke.primary}`};
+	&:hover {
+		cursor: ${e=>e.disabled?"not-allowed":"pointer"};
+	}
+`;exports.StyledPagingContainer=i,exports.StyledTablePaginationContainer=n;

package/dist/cjs/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/cjs/components/TablePagination/TablePaginationCard.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled/base"),c=require("react/jsx-runtime"),a=require("./TablePagination.js"),b=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=t(e).default("div","production"===process.env.NODE_ENV?{target:"exfv5q90"}:{target:"exfv5q90",label:"TablePaginationCardStyled"})("background:",b.COLORS.surface.standard,";border:1px solid ",b.COLORS.stroke.primary,";border-radius:4px;display:flex;justify-content:center;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlUGFnaW5hdGlvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvRCIsImZpbGUiOiJUYWJsZVBhZ2luYXRpb25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgVGFibGVQYWdpbmF0aW9uLCB9IGZyb20gXCIuL1RhYmxlUGFnaW5hdGlvblwiO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUYWJsZVBhZ2luYXRpb25DYXJkU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdGJhY2tncm91bmQ6ICR7Q09MT1JTLnN1cmZhY2Uuc3RhbmRhcmR9O1xuXHRib3JkZXI6IDFweCBzb2xpZCAke0NPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcblx0ZGlzcGxheTogZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xyXG5leHBvcnQgY29uc3QgVGFibGVQYWdpbmF0aW9uQ2FyZCA9IChwcm9wcykgPT4ge1xyXG4gICAgcmV0dXJuIChfanN4KFRhYmxlUGFnaW5hdGlvbkNhcmRTdHlsZWQsIHsgY2hpbGRyZW46IF9qc3goVGFibGVQYWdpbmF0aW9uLCBPYmplY3QuYXNzaWduKHt9LCBwcm9wcykpIH0pKTtcclxufTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VGFibGVQYWdpbmF0aW9uQ2FyZC5qcy5tYXAiXX0= */"));exports.TablePaginationCard=e=>c.jsx(l,{children:c.jsx(a.TablePagination,Object.assign({},e))}),exports.TablePaginationCardStyled=l;

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

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

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

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

package/dist/cjs/components/TypographyStyle.js

@@ -1,100 +1,160 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../constants/Theme.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=i(t);const n=t=>t+"px",r=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const n=e=>e+"px",r=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.titleLarge.fontWeight};
-	font-size: ${n(e.FONTS.titleLarge.fontSize)};
-	line-height: ${n(e.FONTS.titleLarge.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleLarge.fontWeight};
+	font-size: ${n(t.FONTS.titleLarge.fontSize)};
+	line-height: ${n(t.FONTS.titleLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,l=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.titleMedium.fontWeight};
-	font-size: ${n(e.FONTS.titleMedium.fontSize)};
-	line-height: ${n(e.FONTS.titleMedium.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleMedium.fontWeight};
+	font-size: ${n(t.FONTS.titleMedium.fontSize)};
+	line-height: ${n(t.FONTS.titleMedium.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,a=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.titleRegular.fontWeight};
-	font-size: ${n(e.FONTS.titleRegular.fontSize)};
-	line-height: ${n(e.FONTS.titleRegular.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleRegular.fontWeight};
+	font-size: ${n(t.FONTS.titleRegular.fontSize)};
+	line-height: ${n(t.FONTS.titleRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,f=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.titleSmall.fontWeight};
-	font-size: ${n(e.FONTS.titleSmall.fontSize)};
-	line-height: ${n(e.FONTS.titleSmall.lineHeight)};
-`,S=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleSmall.fontWeight};
+	font-size: ${n(t.FONTS.titleSmall.fontSize)};
+	line-height: ${n(t.FONTS.titleSmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,d=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.display.fontWeight};
-	font-size: ${n(e.FONTS.display.fontSize)};
-	line-height: ${n(e.FONTS.display.lineHeight)};
-`,g=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.display.fontWeight};
+	font-size: ${n(t.FONTS.display.fontSize)};
+	line-height: ${n(t.FONTS.display.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,b=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.bodyPrimary.fontWeight};
-	font-size: ${n(e.FONTS.bodyLarge.fontSize)};
-	line-height: ${n(e.FONTS.bodyLarge.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyPrimary.fontWeight};
+	font-size: ${n(t.FONTS.bodyLarge.fontSize)};
+	line-height: ${n(t.FONTS.bodyLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,O=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.bodyPrimary.fontWeight};
-	font-size: ${n(e.FONTS.bodyPrimary.fontSize)};
-	line-height: ${n(e.FONTS.bodyPrimary.lineHeight)};
-`,d=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyPrimary.fontWeight};
+	font-size: ${n(t.FONTS.bodyPrimary.fontSize)};
+	line-height: ${n(t.FONTS.bodyPrimary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,c=o.default.div`
 	font-family: Inter;
-	color: ${e.COLORS.content.primary};
-	font-weight: ${e.FONTS.bodySecondary.fontWeight};
-	font-size: ${n(e.FONTS.bodySecondary.fontSize)};
-	line-height: ${n(e.FONTS.bodySecondary.lineHeight)};
+	color: ${t.COLORS.content.primary};
+	font-weight: ${t.FONTS.bodySecondary.fontWeight};
+	font-size: ${n(t.FONTS.bodySecondary.fontSize)};
+	line-height: ${n(t.FONTS.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,h=o.default(O)`
 	text-decoration: underline;
-	color: ${e.COLORS.content.brand};
-	text-decoration-color: ${e.COLORS.content.brand};
+	color: ${t.COLORS.content.brand};
+	text-decoration-color: ${t.COLORS.content.brand};
 	cursor: pointer;
-`,y=o.default(d)`
+`,S=o.default(c)`
 	text-decoration: underline;
-	color: ${e.COLORS.content.brand};
-	text-decoration-color: ${e.COLORS.content.brand};
+	color: ${t.COLORS.content.brand};
+	text-decoration-color: ${t.COLORS.content.brand};
 	cursor: pointer;
-`,$=o.default.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.caption.fontWeight};
-	font-size: ${n(e.FONTS.caption.fontSize)};
-	line-height: ${n(e.FONTS.caption.lineHeight)};
-`,c=o.default.div`
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.tiny.fontWeight};
-	font-size: ${n(e.FONTS.tiny.fontSize)};
-	line-height: ${n(e.FONTS.tiny.lineHeight)};
-`,u=o.default.div`
+`,g=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.buttonLarge.fontWeight};
-	font-size: ${n(e.FONTS.buttonLarge.fontSize)};
-	line-height: ${n(e.FONTS.buttonLarge.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.caption.fontWeight};
+	font-size: ${n(t.FONTS.caption.fontSize)};
+	line-height: ${n(t.FONTS.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,y=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.tiny.fontWeight};
+	font-size: ${n(t.FONTS.tiny.fontSize)};
+	line-height: ${n(t.FONTS.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,p=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.buttonRegular.fontWeight};
-	font-size: ${n(e.FONTS.buttonRegular.fontSize)};
-	line-height: ${n(e.FONTS.buttonRegular.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.buttonLarge.fontWeight};
+	font-size: ${n(t.FONTS.buttonLarge.fontSize)};
+	line-height: ${n(t.FONTS.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,s=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.subHeading.fontWeight};
-	font-size: ${n(e.FONTS.subHeading.fontSize)};
-	line-height: ${n(e.FONTS.subHeading.lineHeight)};
-`,T=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.buttonRegular.fontWeight};
+	font-size: ${n(t.FONTS.buttonRegular.fontSize)};
+	line-height: ${n(t.FONTS.buttonRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,$=o.default.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.COLORS.text.primary};
-	font-weight: ${e.FONTS.bodyRegular.fontWeight};
-	font-size: ${n(e.FONTS.bodyRegular.fontSize)};
-	line-height: ${n(e.FONTS.bodyRegular.lineHeight)};
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.subHeading.fontWeight};
+	font-size: ${n(t.FONTS.subHeading.fontSize)};
+	line-height: ${n(t.FONTS.subHeading.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,m=o.default.div`
 	font-family: Inter;
-	color: ${e.COLORS.text.primary};
-	font-weight: ${e.FONTS.caption.fontWeight};
-	font-size: ${n(e.FONTS.caption.fontSize)};
-	line-height: ${n(e.FONTS.caption.lineHeight)};
-`;exports.BodyCaption=$,exports.BodyLarge=g,exports.BodyPrimary=O,exports.BodyPrimaryLink=h,exports.BodyRegular=T,exports.BodySecondary=d,exports.BodySecondaryLink=y,exports.BodyTiny=c,exports.ButtonLarge=u,exports.ButtonRegular=p,exports.Caption=m,exports.Display=S,exports.SubHeading=s,exports.TitleLarge=r,exports.TitleMedium=l,exports.TitleRegular=a,exports.TitleSmall=f;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyRegular.fontWeight};
+	font-size: ${n(t.FONTS.bodyRegular.fontSize)};
+	line-height: ${n(t.FONTS.bodyRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,w=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.caption.fontWeight};
+	font-size: ${n(t.FONTS.caption.fontSize)};
+	line-height: ${n(t.FONTS.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`;exports.BodyCaption=g,exports.BodyLarge=b,exports.BodyPrimary=O,exports.BodyPrimaryLink=h,exports.BodyRegular=m,exports.BodySecondary=c,exports.BodySecondaryLink=S,exports.BodyTiny=y,exports.ButtonLarge=p,exports.ButtonRegular=s,exports.Caption=w,exports.Display=d,exports.SubHeading=$,exports.TitleLarge=r,exports.TitleMedium=l,exports.TitleRegular=a,exports.TitleSmall=f;