@bikdotai/bik-component-library 0.0.505-beta.1 → 0.0.505-beta.3

package/dist/cjs/assets/icons/sub_category.svg.js

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var l=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16"},e),t||(t=r.createElement("path",{fill:"#616161",fillRule:"evenodd",d:"M2.667 4a.667.667 0 0 0-1.333 0 6 6 0 0 0 6 6h4.836l-1.999 2.221a.667.667 0 1 0 .991.892l2.999-3.331c0-.002.002-.003.003-.004l.4-.444-.4-.444-.003-.004-2.999-3.331a.667.667 0 0 0-.99.892l1.998 2.22H7.333a4.667 4.667 0 0 1-4.666-4.666Z",clipRule:"evenodd"})));exports.default=l;

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/variable-picker-v3/Content.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePickerContent: React.FC<Props>;
+export {};

package/dist/cjs/components/variable-picker-v3/Content.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_back.svg.js"),a=require("../../assets/icons/plus.svg.js"),i=require("react"),n=require("../../constants/Theme.js"),r=require("../accordion/Accordion.js"),l=require("../icon-button/IconButton.js"),o=require("../input/Input.js"),c=require("../list-item/ListItem.js"),d=require("../switch/Switch.js"),h=require("../TypographyStyle.js"),u=require("./context.js"),j=require("./recommendVaribles.js"),b=require("./searchVariables.js"),g=require("./styles.js"),m=require("./SubHeaderItems.js");exports.VariablePickerContent=p=>{const{data:y,onSelect:x}=p,[v,O]=i.useState(y),[S,f]=i.useState(""),[q,w]=i.useState([]),[C,R]=i.useState(""),[V,k]=i.useState(!1),[I,N]=i.useState([]);i.useEffect((()=>{q.length>0?N([q[q.length-1]]):N(y)}),[q]);return s.jsx(u.VariablePickerContext.Provider,Object.assign({value:{variables:v,searchText:S,subHeaderStack:q,showRecommended:V,setSubHeaderStack:w,setSearchText:f,setVariables:O,setShowRecommended:k}},{children:s.jsxs(s.Fragment,{children:[s.jsx("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:n.COLORS.surface.subdued}},{children:s.jsx(o.Input,{value:S,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||R("");const s=b.searchVariables(e,I,q);if(V){const e=j.showOnlyRecommendedVariables(s,q);O(e)}else O(s);f(e);const t=q.length>0?q[q.length-1].displayName:"home";R(t)}})})),s.jsxs(g.RecommendWrapper,{children:[s.jsx(h.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"Only Recommended"})),s.jsx(d.Switch,{value:V,onValueChange:s=>e.__awaiter(void 0,void 0,void 0,(function*(){yield(s=>e.__awaiter(void 0,void 0,void 0,(function*(){if(k(s),s){const e=j.showOnlyRecommendedVariables(v,q);O(e)}else if(q.length>0){const e=C==q[q.length-1].displayName;if(S.length>0&&e){const e=b.searchVariables(S,I,q);O(e)}else O([q[q.length-1].variables])}else if(S.length>0){const e=b.searchVariables(S,I,q);O(e)}else O(y)})))(s)}))})]}),q.length>0&&s.jsxs(g.BackHeader,{children:[s.jsx("div",Object.assign({style:{position:"absolute",left:16}},{children:s.jsx(l.IconButton,{style:{display:"flex"},Icon:()=>s.jsx(t.default,{width:12,height:12,style:{color:n.COLORS.content.secondary}}),onClick:()=>{let e=S;const s=[...q],t=s.pop();if(w(s),t.displayName===C&&(f(""),e=""),e.length>0){const t=s.length>0?[s[s.length-1]]:y,a=b.searchVariables(e,t,s);if(V){const e=j.showOnlyRecommendedVariables(a,s);O(e)}else O(a)}else if(s.length>0)if(V){const e=j.showOnlyRecommendedVariables([s[s.length-1].variables],s);O(e)}else O([s[s.length-1].variables]);else if(V){const e=j.showOnlyRecommendedVariables(y,q);O(e)}else O(y)}})})),s.jsx(h.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:q[q.length-1].displayName}))]}),s.jsx(s.Fragment,{children:v.length>0?s.jsx(g.Container,Object.assign({height:(e=>{let s=104;return q.length>0&&(s+=54),`calc(${e}px - ${s}px)`})(500)},{children:v.map(((e,t)=>e.displayName&&void 0!==e.variables?s.jsx("div",Object.assign({style:{borderBottom:`1px solid ${n.COLORS.stroke.primary}`}},{children:s.jsx(r.BikAccordion,Object.assign({headerPadding:"12px 16px",header:s.jsx(h.TitleSmall,Object.assign({style:{color:n.COLORS.content.secondary}},{children:e.displayName}))},{children:s.jsx(m.default,{variable:e.variables,onSelect:x})}))}),t):e.displayName?s.jsx(c.ListItem,{version:"2.0",leadingIcon:s.jsx(a.default,{width:14,height:14}),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{x(e)}},t):s.jsx(m.default,{variable:e,onSelect:x},t)))})):s.jsx("p",{children:"No Result found"})})]})}))};

package/dist/cjs/components/variable-picker-v3/SubHeaderItems.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chevronRight.svg.js"),i=require("../../assets/icons/plus.svg.js"),t=require("../list-item/ListItem.js"),a=require("./context.js"),r=require("./recommendVaribles.js");exports.default=l=>{const{onSelect:o,variable:n}=l,{subHeaderStack:c,setSubHeaderStack:d,setVariables:u,showRecommended:m}=a.useVariablePickerContext();return e.jsx(e.Fragment,{children:Object.keys(n).map(((a,l)=>void 0===n[a].variables?e.jsx(t.ListItem,{version:"2.0",leadingIcon:e.jsx(i.default,{width:14,height:14}),listItem:{label:n[a].displayName,value:n[a].displayName},onClick:()=>{o(n[a])}},l):e.jsx(t.ListItem,{version:"2.0",listItem:{label:n[a].displayName,value:n[a].displayName},trailingIcon:e.jsx(s.default,{width:16,height:16,color:"black"}),onClick:()=>{const e=[...c,n[a]];if(d(e),m){const s=r.showOnlyRecommendedVariables([n[a].variables],e);u(s)}else u([n[a].variables])}},l)))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chevronRight.svg.js"),i=require("../../assets/icons/plus.svg.js"),t=require("../../assets/icons/sub_category.svg.js"),a=require("../list-item/ListItem.js"),r=require("./context.js"),l=require("./recommendVaribles.js");exports.default=o=>{const{onSelect:n,variable:c}=o,{subHeaderStack:d,setSubHeaderStack:u,setVariables:m,showRecommended:b}=r.useVariablePickerContext();return e.jsx(e.Fragment,{children:Object.keys(c).map(((r,o)=>void 0===c[r].variables?e.jsx(a.ListItem,{version:"2.0",leadingIcon:e.jsx(i.default,{width:14,height:14}),listItem:{label:c[r].displayName,value:c[r].displayName},subText:c[r].description||"",onClick:()=>{n(c[r])}},o):e.jsx(a.ListItem,{version:"2.0",listItem:{label:c[r].displayName,value:c[r].displayName},leadingIcon:e.jsx(t.default,{width:14,height:14}),subText:c[r].description||"",trailingIcon:e.jsx(s.default,{width:10,height:10,color:"#212121"}),onClick:()=>{const e=[...d,c[r]];if(u(e),b){const s=l.showOnlyRecommendedVariables([c[r].variables],e);m(s)}else m([c[r].variables])}},o)))})};

package/dist/cjs/components/variable-picker-v3/VariablePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),a=require("../../assets/icons/arrow_back.svg.js"),t=require("../../assets/icons/plus.svg.js"),l=require("react"),i=require("../../constants/Theme.js"),r=require("../accordion/Accordion.js"),n=require("../icon-button/IconButton.js"),o=require("../input/Input.js"),c=require("../list-item/ListItem.js"),d=require("../modals/styledModal.js"),u=require("../switch/Switch.js"),h=require("../TypographyStyle.js"),j=require("./context.js"),g=require("./model.js"),m=require("./recommendVaribles.js"),b=require("./searchVariables.js"),p=require("./styles.js"),x=require("./SubHeaderItems.js");const y=y=>{const{data:v,type:f,onSelect:S}=y,[q,w]=l.useState(v),[O,V]=l.useState([]),[C,R]=l.useState(""),[k,I]=l.useState([]),[N,T]=l.useState(""),[_,B]=l.useState(!1);l.useEffect((()=>{k.length>0?V([k[k.length-1]]):V(v)}),[k]),l.useEffect((()=>{console.log("variables",q)}),[q]);const L=()=>{let e=C;const s=[...k],a=s.pop();if(I(s),a.displayName===N&&(R(""),e=""),e.length>0){const a=s.length>0?[s[s.length-1]]:v,t=b.searchVariables(e,a,s);if(_){const e=m.showOnlyRecommendedVariables(t,s);w(e)}else w(t)}else if(s.length>0)if(_){const e=m.showOnlyRecommendedVariables([s[s.length-1].variables],s);w(e)}else w([s[s.length-1].variables]);else if(_){const e=m.showOnlyRecommendedVariables(v,k);w(e)}else w(v)},P=e=>{let s=96;return k.length>0&&(s+=54),`calc(${e}px - ${s}px)`},M=()=>s.jsxs(j.VariablePickerContext.Provider,Object.assign({value:{variables:q,searchText:C,subHeaderStack:k,showRecommended:_,setSubHeaderStack:I,setSearchText:R,setVariables:w,setShowRecommended:B}},{children:[s.jsx("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:i.COLORS.surface.subdued}},{children:s.jsx(o.Input,{value:C,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||T("");const s=b.searchVariables(e,O,k);if(_){const e=m.showOnlyRecommendedVariables(s,k);w(e)}else w(s);R(e);const a=k.length>0?k[k.length-1].displayName:"home";T(a)}})})),s.jsxs(p.RecommendWrapper,{children:[s.jsx(h.BodySecondary,{children:"Only Recommended"}),s.jsx(u.Switch,{value:_,onValueChange:s=>e.__awaiter(void 0,void 0,void 0,(function*(){yield(s=>e.__awaiter(void 0,void 0,void 0,(function*(){if(B(s),s){const e=m.showOnlyRecommendedVariables(q,k);w(e)}else if(k.length>0){const e=N==k[k.length-1].displayName;if(C.length>0&&e){const e=b.searchVariables(C,O,k);w(e)}else w([k[k.length-1].variables])}else if(C.length>0){const e=b.searchVariables(C,O,k);w(e)}else w(v)})))(s)}))})]}),k.length>0&&s.jsxs("div",{children:[s.jsx(n.IconButton,{Icon:a.default,onClick:L}),s.jsx(h.BodyCaption,{children:k[k.length-1].displayName})]}),s.jsx(s.Fragment,{children:q.length>0?s.jsx("div",Object.assign({style:{overflow:"scroll",height:P(500),backgroundColor:"white"}},{children:q.map(((e,a)=>e.displayName&&void 0!==e.variables?s.jsx(r.BikAccordion,Object.assign({header:s.jsx(h.TitleSmall,{children:e.displayName})},{children:s.jsx(x.default,{variable:e.variables,onSelect:S})}),a):e.displayName?s.jsx(c.ListItem,{version:"2.0",leadingIcon:s.jsx(t.default,{width:14,height:14}),listItem:{label:e.displayName,value:e.displayName},onClick:()=>{S(e)}},a):s.jsx(x.default,{variable:e,onSelect:S},a)))})):s.jsx("p",{children:"No Result found"})})]}));return f==g.PickerType.MODAL?s.jsxs(d.StyledModal,Object.assign({open:!0,centralContainerStyles:{width:500,height:500,backgroundColor:i.COLORS.surface.subdued}},{children:[s.jsx(h.TitleRegular,Object.assign({style:{margin:"0 16px",marginTop:12}},{children:"Select Variable"})),s.jsx(M,{})]})):s.jsx(M,{})};exports.VariablePicker=y,exports.default=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/cross.svg.js"),t=require("../../constants/Theme.js"),r=require("../modals/modal.styled.js"),i=require("./Content.js"),o=require("./model.js");const n=n=>{const{type:a}=n;return a==o.PickerType.FLOATER?e.jsxs("div",Object.assign({style:{boxShadow:"0px 2px 8px 0px #0000001F",width:n.width?n.width:344,borderRadius:4}},{children:[e.jsx(i.VariablePickerContent,Object.assign({},n)),e.jsx(r.CloseButtonContainer,Object.assign({onClick:()=>{n.onClose&&n.onClose()}},{children:e.jsx(s.default,{height:20,width:20,color:t.COLORS.content.secondary})}))]})):e.jsx(i.VariablePickerContent,Object.assign({},n))};exports.VariablePicker=n,exports.default=n;

package/dist/cjs/components/variable-picker-v3/model.d.ts

@@ -1,11 +1,13 @@
 export declare enum PickerType {
-    MODAL = "modal",
+    FLOATER = "floater",
     EMBEDDED = "embedded"
 }
 export interface VariablePickerV3Props {
     type: PickerType;
     data: VariableListInterfaceV3[];
     onSelect: (variable: VariableV3) => void;
+    width?: string;
+    onClose?: () => void;
 }
 export interface VariableListInterfaceV3 {
     isSubHeader?: boolean;

package/dist/cjs/components/variable-picker-v3/model.js

@@ -1 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.PickerType=void 0,(e=exports.PickerType||(exports.PickerType={})).MODAL="modal",e.EMBEDDED="embedded";
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.PickerType=void 0,(e=exports.PickerType||(exports.PickerType={})).FLOATER="floater",e.EMBEDDED="embedded";

package/dist/cjs/components/variable-picker-v3/styles.d.ts

@@ -1 +1,5 @@
 export declare const RecommendWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;

package/dist/cjs/components/variable-picker-v3/styles.js

@@ -1,7 +1,31 @@
-"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}}const o=r(e).default.div`
+"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 i=o.default.div`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 12px 16px;
+	background-color: ${t.COLORS.surface.subdued};
 	border-bottom: 1px solid ${t.COLORS.stroke.primary};
-`;exports.RecommendWrapper=o;
+`,a=o.default.div`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 32px;
+	background-color: ${t.COLORS.background.base};
+`,n=o.default.div`
+	margin: 8px;
+	height: ${e=>e.height};
+	overflow: scroll;
+	&::-webkit-scrollbar-thumb {
+		background-color: #e0e0e0 !important;
+		border-radius: 8px;
+	}
+	&::-webkit-scrollbar {
+		height: 5px;
+		display: block;
+		width: 8px;
+	}
+	&::-webkit-scrollbar-thumb:horizontal {
+		width: 8px;
+	}
+`;exports.BackHeader=a,exports.Container=n,exports.RecommendWrapper=i;

package/dist/esm/assets/icons/sub_category.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var t;function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},a.apply(this,arguments)}var l=l=>e.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16"},l),t||(t=e.createElement("path",{fill:"#616161",fillRule:"evenodd",d:"M2.667 4a.667.667 0 0 0-1.333 0 6 6 0 0 0 6 6h4.836l-1.999 2.221a.667.667 0 1 0 .991.892l2.999-3.331c0-.002.002-.003.003-.004l.4-.444-.4-.444-.003-.004-2.999-3.331a.667.667 0 0 0-.99.892l1.998 2.22H7.333a4.667 4.667 0 0 1-4.666-4.666Z",clipRule:"evenodd"})));export{l as default};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/variable-picker-v3/Content.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePickerContent: React.FC<Props>;
+export {};

package/dist/esm/components/variable-picker-v3/Content.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as s,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_back.svg.js";import n from"../../assets/icons/plus.svg.js";import{useState as l,useEffect as r}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BikAccordion as c}from"../accordion/Accordion.js";import{IconButton as d}from"../icon-button/IconButton.js";import{Input as m}from"../input/Input.js";import{ListItem as h}from"../list-item/ListItem.js";import{Switch as p}from"../switch/Switch.js";import{BodySecondary as g,BodyCaption as f,TitleSmall as b}from"../TypographyStyle.js";import{VariablePickerContext as y}from"./context.js";import{showOnlyRecommendedVariables as u}from"./recommendVaribles.js";import{searchVariables as v}from"./searchVariables.js";import{RecommendWrapper as j,BackHeader as x,Container as S}from"./styles.js";import N from"./SubHeaderItems.js";const O=O=>{const{data:w,onSelect:k}=O,[I,T]=l(w),[C,R]=l(""),[V,H]=l([]),[$,_]=l(""),[B,P]=l(!1),[A,D]=l([]);r((()=>{V.length>0?D([V[V.length-1]]):D(w)}),[V]);return t(y.Provider,Object.assign({value:{variables:I,searchText:C,subHeaderStack:V,showRecommended:B,setSubHeaderStack:H,setSearchText:R,setVariables:T,setShowRecommended:P}},{children:s(o,{children:[t("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:a.surface.subdued}},{children:t(m,{value:C,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||_("");const t=v(e,A,V);if(B){const e=u(t,V);T(e)}else T(t);R(e);const s=V.length>0?V[V.length-1].displayName:"home";_(s)}})})),s(j,{children:[t(g,Object.assign({style:{color:a.content.secondary}},{children:"Only Recommended"})),t(p,{value:B,onValueChange:t=>e(void 0,void 0,void 0,(function*(){yield(t=>e(void 0,void 0,void 0,(function*(){if(P(t),t){const e=u(I,V);T(e)}else if(V.length>0){const e=$==V[V.length-1].displayName;if(C.length>0&&e){const e=v(C,A,V);T(e)}else T([V[V.length-1].variables])}else if(C.length>0){const e=v(C,A,V);T(e)}else T(w)})))(t)}))})]}),V.length>0&&s(x,{children:[t("div",Object.assign({style:{position:"absolute",left:16}},{children:t(d,{style:{display:"flex"},Icon:()=>t(i,{width:12,height:12,style:{color:a.content.secondary}}),onClick:()=>{let e=C;const t=[...V],s=t.pop();if(H(t),s.displayName===$&&(R(""),e=""),e.length>0){const s=t.length>0?[t[t.length-1]]:w,o=v(e,s,t);if(B){const e=u(o,t);T(e)}else T(o)}else if(t.length>0)if(B){const e=u([t[t.length-1].variables],t);T(e)}else T([t[t.length-1].variables]);else if(B){const e=u(w,V);T(e)}else T(w)}})})),t(f,Object.assign({style:{color:a.content.secondary}},{children:V[V.length-1].displayName}))]}),t(o,{children:I.length>0?t(S,Object.assign({height:(e=>{let t=104;return V.length>0&&(t+=54),`calc(${e}px - ${t}px)`})(500)},{children:I.map(((e,s)=>e.displayName&&void 0!==e.variables?t("div",Object.assign({style:{borderBottom:`1px solid ${a.stroke.primary}`}},{children:t(c,Object.assign({headerPadding:"12px 16px",header:t(b,Object.assign({style:{color:a.content.secondary}},{children:e.displayName}))},{children:t(N,{variable:e.variables,onSelect:k})}))}),s):e.displayName?t(h,{version:"2.0",leadingIcon:t(n,{width:14,height:14}),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{k(e)}},s):t(N,{variable:e,onSelect:k},s)))})):t("p",{children:"No Result found"})})]})}))};export{O as VariablePickerContent};

package/dist/esm/components/variable-picker-v3/SubHeaderItems.js

@@ -1 +1 @@
-import{jsx as e,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import t from"../../assets/icons/plus.svg.js";import{ListItem as a}from"../list-item/ListItem.js";import{useVariablePickerContext as o}from"./context.js";import{showOnlyRecommendedVariables as r}from"./recommendVaribles.js";const l=l=>{const{onSelect:m,variable:c}=l,{subHeaderStack:n,setSubHeaderStack:d,setVariables:p,showRecommended:b}=o();return e(s,{children:Object.keys(c).map(((s,o)=>void 0===c[s].variables?e(a,{version:"2.0",leadingIcon:e(t,{width:14,height:14}),listItem:{label:c[s].displayName,value:c[s].displayName},onClick:()=>{m(c[s])}},o):e(a,{version:"2.0",listItem:{label:c[s].displayName,value:c[s].displayName},trailingIcon:e(i,{width:16,height:16,color:"black"}),onClick:()=>{const e=[...n,c[s]];if(d(e),b){const i=r([c[s].variables],e);p(i)}else p([c[s].variables])}},o)))})};export{l as default};
+import{jsx as e,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import t from"../../assets/icons/plus.svg.js";import o from"../../assets/icons/sub_category.svg.js";import{ListItem as a}from"../list-item/ListItem.js";import{useVariablePickerContext as r}from"./context.js";import{showOnlyRecommendedVariables as l}from"./recommendVaribles.js";const m=m=>{const{onSelect:n,variable:c}=m,{subHeaderStack:d,setSubHeaderStack:p,setVariables:b,showRecommended:h}=r();return e(s,{children:Object.keys(c).map(((s,r)=>void 0===c[s].variables?e(a,{version:"2.0",leadingIcon:e(t,{width:14,height:14}),listItem:{label:c[s].displayName,value:c[s].displayName},subText:c[s].description||"",onClick:()=>{n(c[s])}},r):e(a,{version:"2.0",listItem:{label:c[s].displayName,value:c[s].displayName},leadingIcon:e(o,{width:14,height:14}),subText:c[s].description||"",trailingIcon:e(i,{width:10,height:10,color:"#212121"}),onClick:()=>{const e=[...d,c[s]];if(p(e),h){const i=l([c[s].variables],e);b(i)}else b([c[s].variables])}},r)))})};export{m as default};

package/dist/esm/components/variable-picker-v3/VariablePicker.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as o,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/arrow_back.svg.js";import l from"../../assets/icons/plus.svg.js";import{useState as n,useEffect as r}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BikAccordion as c}from"../accordion/Accordion.js";import{IconButton as d}from"../icon-button/IconButton.js";import{Input as m}from"../input/Input.js";import{ListItem as h}from"../list-item/ListItem.js";import{StyledModal as p}from"../modals/styledModal.js";import{Switch as g}from"../switch/Switch.js";import{TitleRegular as f,BodySecondary as b,BodyCaption as u,TitleSmall as v}from"../TypographyStyle.js";import{VariablePickerContext as j}from"./context.js";import{PickerType as y}from"./model.js";import{showOnlyRecommendedVariables as S}from"./recommendVaribles.js";import{searchVariables as w}from"./searchVariables.js";import{RecommendWrapper as x}from"./styles.js";import N from"./SubHeaderItems.js";const C=C=>{const{data:k,type:O,onSelect:I}=C,[T,V]=n(k),[R,H]=n([]),[_,A]=n(""),[D,L]=n([]),[M,$]=n(""),[B,K]=n(!1);r((()=>{D.length>0?H([D[D.length-1]]):H(k)}),[D]),r((()=>{console.log("variables",T)}),[T]);const P=()=>{let e=_;const t=[...D],o=t.pop();if(L(t),o.displayName===M&&(A(""),e=""),e.length>0){const o=t.length>0?[t[t.length-1]]:k,s=w(e,o,t);if(B){const e=S(s,t);V(e)}else V(s)}else if(t.length>0)if(B){const e=S([t[t.length-1].variables],t);V(e)}else V([t[t.length-1].variables]);else if(B){const e=S(k,D);V(e)}else V(k)},q=e=>{let t=96;return D.length>0&&(t+=54),`calc(${e}px - ${t}px)`},z=()=>t(j.Provider,Object.assign({value:{variables:T,searchText:_,subHeaderStack:D,showRecommended:B,setSubHeaderStack:L,setSearchText:A,setVariables:V,setShowRecommended:K}},{children:[o("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:a.surface.subdued}},{children:o(m,{value:_,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||$("");const t=w(e,R,D);if(B){const e=S(t,D);V(e)}else V(t);A(e);const o=D.length>0?D[D.length-1].displayName:"home";$(o)}})})),t(x,{children:[o(b,{children:"Only Recommended"}),o(g,{value:B,onValueChange:t=>e(void 0,void 0,void 0,(function*(){yield(t=>e(void 0,void 0,void 0,(function*(){if(K(t),t){const e=S(T,D);V(e)}else if(D.length>0){const e=M==D[D.length-1].displayName;if(_.length>0&&e){const e=w(_,R,D);V(e)}else V([D[D.length-1].variables])}else if(_.length>0){const e=w(_,R,D);V(e)}else V(k)})))(t)}))})]}),D.length>0&&t("div",{children:[o(d,{Icon:i,onClick:P}),o(u,{children:D[D.length-1].displayName})]}),o(s,{children:T.length>0?o("div",Object.assign({style:{overflow:"scroll",height:q(500),backgroundColor:"white"}},{children:T.map(((e,t)=>e.displayName&&void 0!==e.variables?o(c,Object.assign({header:o(v,{children:e.displayName})},{children:o(N,{variable:e.variables,onSelect:I})}),t):e.displayName?o(h,{version:"2.0",leadingIcon:o(l,{width:14,height:14}),listItem:{label:e.displayName,value:e.displayName},onClick:()=>{I(e)}},t):o(N,{variable:e,onSelect:I},t)))})):o("p",{children:"No Result found"})})]}));return O==y.MODAL?t(p,Object.assign({open:!0,centralContainerStyles:{width:500,height:500,backgroundColor:a.surface.subdued}},{children:[o(f,Object.assign({style:{margin:"0 16px",marginTop:12}},{children:"Select Variable"})),o(z,{})]})):o(z,{})};export{C as VariablePicker,C as default};
+import{jsxs as o,jsx as s}from"react/jsx-runtime";import t from"../../assets/icons/cross.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{CloseButtonContainer as r}from"../modals/modal.styled.js";import{VariablePickerContent as i}from"./Content.js";import{PickerType as n}from"./model.js";const m=m=>{const{type:c}=m;return c==n.FLOATER?o("div",Object.assign({style:{boxShadow:"0px 2px 8px 0px #0000001F",width:m.width?m.width:344,borderRadius:4}},{children:[s(i,Object.assign({},m)),s(r,Object.assign({onClick:()=>{m.onClose&&m.onClose()}},{children:s(t,{height:20,width:20,color:e.content.secondary})}))]})):s(i,Object.assign({},m))};export{m as VariablePicker,m as default};

package/dist/esm/components/variable-picker-v3/model.d.ts

@@ -1,11 +1,13 @@
 export declare enum PickerType {
-    MODAL = "modal",
+    FLOATER = "floater",
     EMBEDDED = "embedded"
 }
 export interface VariablePickerV3Props {
     type: PickerType;
     data: VariableListInterfaceV3[];
     onSelect: (variable: VariableV3) => void;
+    width?: string;
+    onClose?: () => void;
 }
 export interface VariableListInterfaceV3 {
     isSubHeader?: boolean;

package/dist/esm/components/variable-picker-v3/model.js

@@ -1 +1 @@
-var d;!function(d){d.MODAL="modal",d.EMBEDDED="embedded"}(d||(d={}));export{d as PickerType};
+var e;!function(e){e.FLOATER="floater",e.EMBEDDED="embedded"}(e||(e={}));export{e as PickerType};

package/dist/esm/components/variable-picker-v3/styles.d.ts

@@ -1 +1,5 @@
 export declare const RecommendWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;

package/dist/esm/components/variable-picker-v3/styles.js

@@ -1,7 +1,31 @@
-import t from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const o=t.div`
+import e from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t=e.div`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 12px 16px;
-	border-bottom: 1px solid ${e.stroke.primary};
-`;export{o as RecommendWrapper};
+	background-color: ${o.surface.subdued};
+	border-bottom: 1px solid ${o.stroke.primary};
+`,r=e.div`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 32px;
+	background-color: ${o.background.base};
+`,i=e.div`
+	margin: 8px;
+	height: ${e=>e.height};
+	overflow: scroll;
+	&::-webkit-scrollbar-thumb {
+		background-color: #e0e0e0 !important;
+		border-radius: 8px;
+	}
+	&::-webkit-scrollbar {
+		height: 5px;
+		display: block;
+		width: 8px;
+	}
+	&::-webkit-scrollbar-thumb:horizontal {
+		width: 8px;
+	}
+`;export{r as BackHeader,i as Container,t as RecommendWrapper};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.505-beta.1",
+	"version": "0.0.505-beta.3",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",