@bikdotai/bik-component-library 0.0.5-beta → 0.0.5-beta.1

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

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

package/dist/cjs/components/TypographyStyle.js

@@ -0,0 +1,88 @@
+"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";o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.titleLarge.fontWeight};
+	font-size: ${t=>n(e.FONTS.titleLarge.fontSize)};
+	line-height: ${t=>n(e.FONTS.titleLarge.lineHeight)};
+`,o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.titleMedium.fontWeight};
+	font-size: ${t=>n(e.FONTS.titleMedium.fontSize)};
+	line-height: ${t=>n(e.FONTS.titleMedium.lineHeight)};
+`;const r=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.titleRegular.fontWeight};
+	font-size: ${t=>n(e.FONTS.titleRegular.fontSize)};
+	line-height: ${t=>n(e.FONTS.titleRegular.lineHeight)};
+`,l=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.titleSmall.fontWeight};
+	font-size: ${t=>n(e.FONTS.titleSmall.fontSize)};
+	line-height: ${t=>n(e.FONTS.titleSmall.lineHeight)};
+`;o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.display.fontWeight};
+	font-size: ${t=>n(e.FONTS.display.fontSize)};
+	line-height: ${t=>n(e.FONTS.display.lineHeight)};
+`,o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.bodyPrimary.fontWeight};
+	font-size: ${t=>n(e.FONTS.bodyLarge.fontSize)};
+	line-height: ${t=>n(e.FONTS.bodyLarge.lineHeight)};
+`;const f=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.bodyPrimary.fontWeight};
+	font-size: ${t=>n(e.FONTS.bodyPrimary.fontSize)};
+	line-height: ${t=>n(e.FONTS.bodyPrimary.lineHeight)};
+`,a=o.default.div`
+	font-family: Inter;
+	color: ${t=>e.COLORS.content.primary};
+	font-weight: ${t=>e.FONTS.bodySecondary.fontWeight};
+	font-size: ${t=>n(e.FONTS.bodySecondary.fontSize)};
+	line-height: ${t=>n(e.FONTS.bodySecondary.lineHeight)};
+`;o.default(f)`
+	text-decoration: underline;
+	color: ${t=>e.COLORS.content.brand};
+	text-decoration-color: ${t=>e.COLORS.content.brand};
+	cursor: pointer;
+`,o.default(a)`
+	text-decoration: underline;
+	color: ${t=>e.COLORS.content.brand};
+	text-decoration-color: ${t=>e.COLORS.content.brand};
+	cursor: pointer;
+`;const S=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.caption.fontWeight};
+	font-size: ${t=>n(e.FONTS.caption.fontSize)};
+	line-height: ${t=>n(e.FONTS.caption.lineHeight)};
+`;o.default.div`
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.tiny.fontWeight};
+	font-size: ${t=>n(e.FONTS.tiny.fontSize)};
+	line-height: ${t=>n(e.FONTS.tiny.lineHeight)};
+`;const O=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.buttonLarge.fontWeight};
+	font-size: ${t=>n(e.FONTS.buttonLarge.fontSize)};
+	line-height: ${t=>n(e.FONTS.buttonLarge.lineHeight)};
+`,g=o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.buttonRegular.fontWeight};
+	font-size: ${t=>n(e.FONTS.buttonRegular.fontSize)};
+	line-height: ${t=>n(e.FONTS.buttonRegular.lineHeight)};
+`;o.default.div`
+	font-family: Inter;
+	color: ${t=>t.color||e.COLORS.text.primary};
+	font-weight: ${t=>e.FONTS.subHeading.fontWeight};
+	font-size: ${t=>n(e.FONTS.subHeading.fontSize)};
+	line-height: ${t=>n(e.FONTS.subHeading.lineHeight)};
+`,exports.BodyCaption=S,exports.BodyPrimary=f,exports.BodySecondary=a,exports.ButtonLarge=O,exports.ButtonRegular=g,exports.TitleRegular=r,exports.TitleSmall=l;

package/dist/cjs/components/button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonProps } from './model';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/button/Button.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),t=require("react"),s=require("../spinner/Spinner.js"),i=require("./Button.styled.js"),r=require("./themes.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t);const c=t.forwardRef(((t,a)=>{var{id:c,buttonType:l="primary",size:d="small",buttonText:u,disabled:j,IconComponent:m,LeadingIcon:p,TrailingIcon:b,style:g,isLoading:x,inverse:h,onClick:v}=t,y=e.__rest(t,["id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","style","isLoading","inverse","onClick"]);const f=r.GetButtonTextComponent(d),C="chip"===d?16:20,N={height:C,width:C,color:r.getButtonIconColor(d,l,h,j,x),style:{display:"block"},className:"icon"};return n.jsx(i.Button,Object.assign({onClick:v,ref:a,id:c,disabled:j,style:g,size:d,buttonType:l,isLoading:x,inverse:h},y,{children:n.jsxs("div",Object.assign({className:"container"},{children:["dash"===l&&n.jsx(i.ButtonCustomDashedBorder,{}),n.jsx("div",Object.assign({className:"overlay-container"},{children:x&&n.jsx(s.Spinner,{className:"spinner",size:"small",color:r.SpinnerColorMap(l,h)})})),m&&n.jsx("div",Object.assign({className:"icon-component"},{children:o.default.createElement(m,N)})),b&&n.jsx("div",Object.assign({className:"icon-trailing"},{children:o.default.createElement(b,N)})),n.jsx(f,Object.assign({className:"text"},{children:u})),p&&n.jsx("div",Object.assign({className:"icon-leading"},{children:o.default.createElement(p,N)}))]}))}))}));c.displayName="Button",exports.Button=c;

package/dist/cjs/components/button/Button.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Size, Type } from './model';
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size: Size;
+    buttonType: Type;
+    isLoading?: boolean | undefined;
+    inverse?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ButtonCustomDashedBorder: () => JSX.Element;

package/dist/cjs/components/button/Button.styled.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@emotion/styled/base"),c=require("react/jsx-runtime"),d=require("../../constants/Theme.js"),n=require("./themes.js");function X(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const l=X(t).default("button","production"===process.env.NODE_ENV?{target:"exlualr0"}:{target:"exlualr0",label:"Button"})("all:unset;cursor:pointer;display:flex;gap:8.83px;border-radius:4px;overflow:hidden;background-color:",(t=>n.getBackgroundColor(t.buttonType,t.size,t.inverse)),";",(t=>"dash"===t.buttonType?`.container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding: ${n.getPadding(t.buttonType,t.size)};\n\t\t\t\t}`:`padding: ${n.getPadding(t.buttonType,t.size)};\n\t${n.getBorder(t.buttonType,t.size,t.inverse)}`)," .icon-component{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.icon-trailing{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.text{color:",(t=>n.getColor(t.buttonType,t.size,t.inverse)),";}.icon-leading{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}",(t=>n.getDashedBorderStyling(t.buttonType,t.size,t.isLoading?d.COLORS.content.brand:void 0))," .overlay-container{display:none;}:disabled{cursor:not-allowed;",(t=>n.getDashedBorderStyling(t.buttonType,t.size,d.COLORS.stroke.primary)),";.overlay-container{display:none!important;}",(t=>n.generateDisabledStyling(t.buttonType,t.size,t.inverse))," .text{color:",(t=>n.getDisabledTextColor(t.inverse)),"!important;}}",(t=>!t.disabled&&!t.isLoading&&`:active {\n\t\t\t\t.container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${"chip"===t.size&&`.text {\n\t\t\t\t\t\tcolor: ${d.COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${d.COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t}\n\n\n\t\t\t${n.getClickEffect(t.buttonType,t.size,t.inverse)}\n\t\t\t${n.getDashedBorderStyling(t.buttonType,t.size,d.COLORS.content.brand)}\n\t\t}`)," ",(t=>t.isLoading?`cursor: not-allowed;\n\t\tpadding: 0;\n\t\t${n.getLoadingBorder(t.buttonType,t.size,t.inverse)}\n\n\t\t.container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tpadding: ${n.getPadding(t.buttonType,t.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${n.getLoadingBackground(t.buttonType,t.size,t.inverse)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 9px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`:`:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: ${n.getPadding(t.buttonType,t.size)};\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${n.getHoverButtonBackground(t.buttonType,t.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===t.size?`background-color: ${d.COLORS.surface.hovered};`:""}\n\t\t\t\t${"primary"!==t.buttonType||"chip"===t.size||t.inverse?"":`background-color: ${d.COLORS.background.inverseLight};`}\n\t\t\t}\n\t\t\t${t.inverse?n.generateInverseHoverBackground(t.buttonType,t.disabled):""}\n\t\t}`)," .container{display:flex;gap:8.33px;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQyIsImZpbGUiOiJCdXR0b24uc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBGcmFnbWVudCBhcyBfRnJhZ21lbnQsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmltcG9ydCB7IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nLCBnZW5lcmF0ZUludmVyc2VIb3ZlckJhY2tncm91bmQsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0Qm9yZGVyLCBnZXRDbGlja0VmZmVjdCwgZ2V0Q29sb3IsIGdldERhc2hlZEJvcmRlclN0eWxpbmcsIGdldERpc2FibGVkVGV4dENvbG9yLCBnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmQsIGdldExvYWRpbmdCYWNrZ3JvdW5kLCBnZXRMb2FkaW5nQm9yZGVyLCBnZXRQYWRkaW5nLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IHN0eWxlZC5idXR0b24gYFxuXHRhbGw6IHVuc2V0O1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGdhcDogOC44M3B4O1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBnZXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9O1xuXG5cdCR7KHByb3BzKSA9PiBwcm9wcy5idXR0b25UeXBlID09PSAnZGFzaCdcclxuICAgID8gYC5jb250YWluZXIge1xuXHRcdFx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdGJvcmRlci1yYWRpdXM6IDRweDtcblx0XHRcdFx0XHRvdmVyZmxvdzogaGlkZGVuO1xuXHRcdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdH1gXHJcbiAgICA6IGBwYWRkaW5nOiAke2dldFBhZGRpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSl9O1xuXHQke2dldEJvcmRlcihwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pbnZlcnNlKX1gfVxuXG5cdC5pY29uLWNvbXBvbmVudCB7XG5cdFx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHRcdHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHR9XG5cblx0Lmljb24tdHJhaWxpbmcge1xuXHRcdGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0XHR3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0fVxuXG5cdC50ZXh0IHtcblx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldENvbG9yKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfTtcblx0fVxuXG5cdC5pY29uLWxlYWRpbmcge1xuXHRcdGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0XHR3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0fVxuXG5cdCR7KHByb3BzKSA9PiBnZXREYXNoZWRCb3JkZXJTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmlzTG9hZGluZyA/IENPTE9SUy5jb250ZW50LmJyYW5kIDogdW5kZWZpbmVkKX1cblxuXHQub3ZlcmxheS1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cdH1cblxuXHQ6ZGlzYWJsZWQge1xuXHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cdFx0JHsocHJvcHMpID0+IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0RGlzYWJsZWRUZXh0Q29sb3IocHJvcHMuaW52ZXJzZSl9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdCR7KHByb3BzKSA9PiBnZXREYXNoZWRCb3JkZXJTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIENPTE9SUy5zdHJva2UucHJpbWFyeSl9XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gIXByb3BzLmRpc2FibGVkICYmXHJcbiAgICAhcHJvcHMuaXNMb2FkaW5nICYmXHJcbiAgICBgOmFjdGl2ZSB7XG5cdFx0XHRcdC5jb250YWluZXIge1xuXHRcdFx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmXHJcbiAgICAgICAgYC50ZXh0IHtcblx0XHRcdFx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2VMaWdodH0gIWltcG9ydGFudDtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0Lmljb24ge1xuXHRcdFx0XHRcdFx0Y29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZUxpZ2h0fTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0YH1cblx0XHRcdFx0fVxuXG5cblx0XHRcdCR7Z2V0Q2xpY2tFZmZlY3QocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9XG5cdFx0XHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRcdH1gfVxuXG5cdCR7KHByb3BzKSA9PiBcclxuLy8gZG8gbm90IGxvYWQgaG92ZXIgc3R5bGVzIGZvciBsb2FkaW5nIHN0YXRlIGFuZCBhbHNvIGFjdGl2ZSBzdGF0ZVxyXG4hcHJvcHMuaXNMb2FkaW5nXHJcbiAgICA/IGA6bm90KDphY3RpdmUpOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHQuY29udGFpbmVyIHtcblx0XHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHR3aWR0aDogMTAwJTtcblx0XHRcdFx0cGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0XHRcdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRcdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdFx0cGFkZGluZzogMDtcblx0XHRcdFx0XHR0b3A6IDA7XG5cdFx0XHRcdFx0bGVmdDogMDtcblx0XHRcdFx0XHR3aWR0aDogMTAwJTtcblx0XHRcdFx0XHRoZWlnaHQ6IDEwMCU7XG5cdFx0XHRcdFx0JHtnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmQocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuaW52ZXJzZSl9XG5cdFx0XHRcdH1cblx0XHRcdFx0JHtwcm9wcy5zaXplID09PSAnY2hpcCcgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3VyZmFjZS5ob3ZlcmVkfTtgIDogJyd9XG5cdFx0XHRcdCR7cHJvcHMuYnV0dG9uVHlwZSA9PT0gJ3ByaW1hcnknICYmXHJcbiAgICAgICAgcHJvcHMuc2l6ZSAhPT0gJ2NoaXAnICYmXHJcbiAgICAgICAgIXByb3BzLmludmVyc2VcclxuICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2VMaWdodH07YFxyXG4gICAgICAgIDogJyd9XG5cdFx0XHR9XG5cdFx0XHQke3Byb3BzLmludmVyc2VcclxuICAgICAgICA/IGdlbmVyYXRlSW52ZXJzZUhvdmVyQmFja2dyb3VuZChwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5kaXNhYmxlZClcclxuICAgICAgICA6ICcnfVxuXHRcdH1gXHJcbiAgICA6IGBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuXHRcdHBhZGRpbmc6IDA7XG5cdFx0JHtnZXRMb2FkaW5nQm9yZGVyKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXG5cdFx0LmNvbnRhaW5lciB7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHQudGV4dCB7XG5cdFx0XHRcdG9wYWNpdHk6IDA7XG5cdFx0XHR9XG5cdFx0XHRwYWRkaW5nOiAke2dldFBhZGRpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSl9O1xuXHRcdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdFx0cGFkZGluZzogMDtcblx0XHRcdFx0cGFkZGluZy10b3A6IDFweDtcblx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRsZWZ0OiAwO1xuXHRcdFx0XHR3aWR0aDogMTAwJTtcblx0XHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0XHQke2dldExvYWRpbmdCYWNrZ3JvdW5kKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHRcdFx0XHQuc3Bpbm5lciB7XG5cdFx0XHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0XHRcdHRvcDogY2FsYyg1MCUgLSA5cHgpO1xuXHRcdFx0XHRcdGxlZnQ6IGNhbGMoNTAlIC0gN3B4KTtcblx0XHRcdFx0fVxuXG5cdFx0XHR9XG5cdFx0fWB9XG5cblx0XHQuY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGdhcDogOC4zM3B4O1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgQnV0dG9uQ3VzdG9tRGFzaGVkQm9yZGVyID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIChfanN4cyhfRnJhZ21lbnQsIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBcImxpbmUtdG9wXCIgfSksIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwibGluZS1sZWZ0XCIgfSksIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwibGluZS1ib3R0b21cIiB9KSwgX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLXJpZ2h0XCIgfSldIH0pKTtcclxufTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9QnV0dG9uLnN0eWxlZC5qcy5tYXAiXX0= */"));exports.Button=l,exports.ButtonCustomDashedBorder=()=>c.jsxs(c.Fragment,{children:[c.jsx("div",{className:"line-top"}),c.jsx("div",{className:"line-left"}),c.jsx("div",{className:"line-bottom"}),c.jsx("div",{className:"line-right"})]});

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { Size, Type } from './model';
+export declare const getBackgroundColor: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getColor: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getDisabledTextColor: (inverse?: boolean) => string;
+export declare const getPadding: (type: Type, size: Size) => "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
+export declare const GetButtonTextComponent: (size: Size) => import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const getBorderColor: (type: Type, inverse?: boolean) => string;
+export declare const getBorder: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getLinearGradientValue: (size: Size) => string;
+export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => "background-color: #000000;\n\t\t\t\topacity: 0.03;" | "";
+export declare const generateInverseHoverBackground: (type: Type, disabled?: boolean) => string;
+export declare const generateDisabledStyling: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getDashedBorderStyling: (type: Type, size: Size, borderColor?: string) => string;
+export declare const getClickEffect: (type: Type, size: Size, inverse?: boolean) => string | undefined;
+export declare const getLoadingBackground: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getLoadingBorder: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const SpinnerColorMap: (type: Type, inverse?: boolean) => string;
+export declare const getButtonIconColor: (size: Size, type: Type, inverse?: boolean, disabled?: boolean, isLoading?: boolean) => string | undefined;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");const n=(r,n)=>n?t.COLORS.surface.standard:"secondary"==r?t.COLORS.stroke.brand:t.COLORS.content.placeholder,e=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px";exports.GetButtonTextComponent=t=>"chip"===t?r.BodyCaption:"small"===t?r.ButtonRegular:r.ButtonLarge,exports.SpinnerColorMap=(r,n)=>n?"primary"===r?t.COLORS.content.primary:t.COLORS.content.primaryInverse:"destructive"===r?t.COLORS.content.negative:t.COLORS.content.brand,exports.generateDisabledStyling=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.COLORS.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.COLORS.stroke.primary};`:"",exports.generateInverseHoverBackground=(r,n)=>n?"":"primary"===r?`background-color: ${t.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",exports.getBackgroundColor=(r,n,e)=>{if("chip"===n)return t.COLORS.surface.subdued;switch(r){case"primary":return e?t.COLORS.background.warning.vibrant:t.COLORS.background.brand;case"destructive":return t.COLORS.background.negative.vibrant;default:return"transparent"}},exports.getBorder=(r,e,o)=>"chip"===e?`border: 1px solid ${t.COLORS.stroke.primary};`:o?"secondary"===r?`border: 1px solid ${n(r,o)};`:"border: none;":"secondary"===r?`border: 1px solid ${n(r)};`:"border: none;",exports.getBorderColor=n,exports.getButtonIconColor=(r,n,e,o,a)=>"chip"===r?o?t.COLORS.content.inactive:t.COLORS.content.secondary:a?"transparent":"primary"===n||"destructive"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primary:o?t.COLORS.content.inactive:t.COLORS.content.primaryInverse:"secondary"===n||"tertiary"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primaryInverse:o?t.COLORS.content.inactive:t.COLORS.content.brand:"tertiaryGray"===n||"dash"===n?o?t.COLORS.content.inactive:t.COLORS.content.secondary:void 0,exports.getClickEffect=(r,n,e)=>"chip"===n?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${t.COLORS.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||"dash"===r?e?`background-color: ${t.COLORS.background.inverseLight}  !important;`:`background-color: ${t.COLORS.background.brandLight};`:void 0,exports.getColor=(r,n,e)=>{if("chip"===n)return t.COLORS.content.secondary;switch(r){case"primary":return e?t.COLORS.content.primary:t.COLORS.content.primaryInverse;case"tertiaryGray":case"dash":return t.COLORS.content.secondary;case"destructive":return t.COLORS.content.primaryInverse;default:return e?t.COLORS.content.primaryInverse:t.COLORS.stroke.brand}},exports.getDashedBorderStyling=function(t,r){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n(t);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t`},exports.getDisabledTextColor=r=>r?"rgba(255, 255, 255, 0.5)":t.COLORS.content.inactive,exports.getHoverButtonBackground=(t,r)=>r||"primary"===t?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",exports.getLinearGradientValue=e,exports.getLoadingBackground=(r,n,e)=>"chip"===n?`background-color: ${t.COLORS.background.base};`:"primary"===r?`background-color: ${e?t.COLORS.background.warning.vibrant:t.COLORS.background.brandLight};`:"destructive"===r?`background-color: ${t.COLORS.background.negative.light};`:"background-color: transparent;",exports.getLoadingBorder=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.COLORS.content.secondary};`:`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"",exports.getPadding=(t,r)=>{if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}};

package/dist/cjs/components/checkBox/CheckBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CheckBoxProps = {
+    isChecked: boolean;
+    isPartiallyChecked?: boolean;
+    isDisabled?: boolean;
+    value?: string;
+    onValueChange: (checked: boolean, value?: string) => void;
+};
+export declare const CheckBox: React.FC<CheckBoxProps>;

package/dist/cjs/components/checkBox/CheckBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./CheckBox.styled.js"),t=require("../../constants/Theme.js");const l=i=>e.jsxs("svg",Object.assign({width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0",y:"0",width:"18",height:"18",rx:"4",fill:i.isDisabled?t.COLORS.content.inactive:t.COLORS.background.positive.vibrant}),!i.isPartial&&e.jsx("svg",Object.assign({width:"10",height:"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),i.isPartial&&e.jsx("rect",{x:"5",y:"8",width:"8",height:"2",rx:"1",fill:t.COLORS.surface.standard})]}));exports.CheckBox=t=>{var n;const[r,a]=i.useState(t.isChecked||!1),[c,o]=i.useState(!1),[d,h]=i.useState(!1);return i.useEffect((()=>{a(t.isChecked)}),[t.isChecked]),e.jsx(s.CheckboxContainer,Object.assign({onClick:()=>{var e;if(!t.isDisabled){const i=!r;a(i),null===(e=t.onValueChange)||void 0===e||e.call(t,i,t.value)}},onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),onMouseDown:()=>h(!0),onMouseUp:()=>h(!1)},{children:e.jsx(s.CheckboxIcon,Object.assign({checked:r,hovered:c,clicked:d,isDisabled:t.isDisabled||!1},{children:r&&e.jsx(l,{isPartial:null!==(n=t.isPartiallyChecked)&&void 0!==n&&n,isDisabled:t.isDisabled||!1})}))}))};

package/dist/cjs/components/checkBox/CheckBox.styled.d.ts

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

package/dist/cjs/components/checkBox/CheckBox.styled.js

@@ -0,0 +1,26 @@
+"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 s=i(e);const o=s.default.div`
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+`,r=s.default.div`
+	width: 14px;
+	height: 14px;
+	border-radius: 4px;
+	border: 2px solid black;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	${t=>t.checked&&e.css`
+			border: 0px;
+			width: 18px;
+			height: 18px;
+		`}
+	${i=>i.hovered&&e.css`
+			outline: 3px solid ${t.COLORS.surface.hovered};
+		`}
+	${i=>i.clicked&&!i.isDisabled&&e.css`
+			outline: 3px solid
+				${i.checked?t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
+			outline-offset: 2px;
+		`}
+`;exports.CheckboxContainer=o,exports.CheckboxIcon=r;

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

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

package/dist/cjs/components/dropdown/Common.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const OverLapAbs: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OpenDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { OpenDropdownProps } from './type';
+export type DropdownProps = OpenDropdownProps & {
+    placeHolder?: string;
+    size?: 'default' | 'small';
+};
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/cjs/components/dropdown/UnChildDropdown/UnChildDropdown.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OpenDropdownProps } from '../type';
+export type DropdownProps = OpenDropdownProps & {
+    isLoading?: boolean;
+    size?: 'default' | 'small';
+};
+export declare const UnChildDropdown: React.ForwardRefExoticComponent<OpenDropdownProps & {
+    isLoading?: boolean | undefined;
+    size?: "small" | "default" | undefined;
+} & React.RefAttributes<{}>>;

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

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

package/dist/cjs/components/dropdown/opennedDropdown/components/OpennedDropdown.d.ts

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

package/dist/cjs/components/dropdown/opennedDropdown/components/OpennedDropdown.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../../../hooks/useOutside.js"),n=require("../utils/iterationOnOptions.js"),i=require("./description/Description.js"),l=require("./menu/FreeFormMenu.js"),o=require("./menu/MenuList.js"),r=require("./menu/SelectAllMenu.js"),u=require("./multiSelect/MultiSelectDropdownBottomBar.js"),c=require("./OpennedDropdown.styled.js"),a=require("./searchbox/SearchBox.js"),d=require("./searchbox/ZeroState.js");const p=304,j=290;exports.OpennedDropdown=h=>{let{options:f,isSearchable:O,isMultiSelect:S,width:b,allowFreeForm:x,height:m,onClose:g,onSelect:v}=h;const[q,M]=t.useState(null!=f?f:[]),[F,w]=t.useState(null!=b?b:j),[D,y]=t.useState(""),[A,B]=t.useState(null),C=t.useRef(null);s.useOutside(C,(()=>{B(null),null==g||g()}));const L=null!=m?m:p,E="number"==typeof L&&O&&S?L-96:O&&!S||!O&&S?L-48:L;function Z(e){if(S){const t=n.iterateOnOptions(q,{selected:e.selected},(t=>t.value===e.value));M([...t])}else null==v||v(e)}t.useEffect((()=>{const e=null!=b?b:j;w(null===A?e:2*e)}),[A]);const _=q.map((e=>{var t;if(D){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(D))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(D))?e:null}return e})).filter((e=>null!==e)),k=!!O&&D&&0===_.length;return e.jsxs(c.OpennedDropdownContainer,Object.assign({ref:C,style:{maxWidth:A?800:400,width:F,height:L}},{children:[e.jsxs("div",Object.assign({style:{width:A?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!O&&e.jsx(a.SearchBox,{options:f,onSearch:function(e){y(e)}}),e.jsxs(c.MenuListContainer,Object.assign({maxHeight:E},{children:[!!S&&!k&&e.jsx(r.SelectAllMenu,{options:q,onSelect:function(e){if("selectAll"===e){const e=n.iterateOnOptions(q,{selected:!0},(e=>!e.disabled));M([...e])}else if("notSelected"===e){const e=n.iterateOnOptions(q,{selected:!1},(e=>!e.disabled));M([...e])}}}),!x&&k&&e.jsx(d.SearchZeroState,{searchedString:D}),x&&k&&e.jsx(l.FreeFormMenu,{isMultiSelect:S,onSelect:function(e){if(!S)return void Z({label:D,value:D,isFreeForm:!0,selected:!0});const t=q.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===D&&t.value===D&&e})));e&&(t.some((e=>e.label===D&&e.value===D))||t.unshift({label:D,value:D,isFreeForm:!0,selected:!0})),M([...t])},searchedString:D}),e.jsx(o.MenuList,{onSelect:Z,showDescription:function(e,t){B(e&&t?{title:e,description:t}:null)},isMultiSelect:S,options:_})]})),!!S&&e.jsx(u.default,{onClear:function(){const e=n.iterateOnOptions(q,{selected:!1});M([...e])},onApply:function(){const e=[];q.forEach((t=>{if(t.options){const s=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...s]}))}else t.selected&&e.push(Object.assign({},t))})),null==v||v([...e])},list:q})]})),!!A&&e.jsx(i.Description,{title:A.title,description:A.description})]}))};

package/dist/cjs/components/dropdown/opennedDropdown/components/OpennedDropdown.styled.d.ts

@@ -0,0 +1,5 @@
+export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {
+    maxHeight: number;
+}, never>;

package/dist/cjs/components/dropdown/opennedDropdown/components/OpennedDropdown.styled.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e);const i=r.default.div`
+	border-radius: 4px;
+	border: 1px solid ${t.COLORS.stroke.primary};
+	max-height: 640px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
+	position: relative;
+`;r.default.div`
+	padding: 14px 16px 14px 18px;
+	flex-direction: row;
+	align-items: center;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-color: ${t.COLORS.stroke.primary};
+	width: 100%;
+	heigth: 100%;
+`;const d=r.default.div`
+	max-height: ${e=>e.maxHeight}px;
+	overflow-y: auto;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+`;exports.MenuListContainer=d,exports.OpennedDropdownContainer=i;

package/dist/cjs/components/dropdown/opennedDropdown/components/description/Description.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Description: React.FC<{
+    title: string;
+    visible: boolean;
+    description: string;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/description/Description.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../TypographyStyle.js"),t=require("../../../../../constants/Theme.js"),s=require("./Description.styled.js");exports.Description=i=>{let{title:n,description:o,visible:c}=i;return e.jsx(s.DescriptionContainer,{children:e.jsxs("div",Object.assign({style:{padding:24}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:t.COLORS.content.primary,marginBottom:4}},{children:n})),e.jsx(r.BodySecondary,Object.assign({style:{color:t.COLORS.content.secondary}},{children:o}))]}))})};

package/dist/cjs/components/dropdown/opennedDropdown/components/description/Description.styled.d.ts

@@ -0,0 +1 @@
+export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/dropdown/opennedDropdown/components/description/Description.styled.js

@@ -0,0 +1,5 @@
+"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`
+	background: ${t.COLORS.surface.standard};
+	border-left: 1px solid ${t.COLORS.stroke.primary};
+	width: 50%;
+`;exports.DescriptionContainer=o;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/FreeFormMenu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const FreeFormMenu: React.FC<{
+    isMultiSelect: boolean;
+    searchedString: string;
+    onSelect: (isChecked: boolean) => void;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/FreeFormMenu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),n=require("../../../../checkBox/CheckBox.js"),s=require("../../../../list-item/ListItem.js"),o=require("../../../../TypographyStyle.js"),i=require("../../../../../constants/Theme.js"),c=require("./FreeFormMenu.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=l(r).default(s.ListItem)``;exports.FreeFormMenu=r=>{let{searchedString:s,onSelect:l,isMultiSelect:a}=r;const[d,j]=t.useState(!1);function m(){j(!d),l(!d)}return e.jsx(u,{onClick:e=>{e.preventDefault(),m()},listItem:{label:s,value:s},trailingIcon:a?e.jsx(n.CheckBox,{isChecked:d,onValueChange:m}):e.jsx(e.Fragment,{}),leadingIcon:e.jsx(c.FreeFormContainer,{children:e.jsx(o.BodyCaption,Object.assign({style:{color:i.COLORS.content.secondary}},{children:"Freeform"}))})})};

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/FreeFormMenu.styled.d.ts

@@ -0,0 +1 @@
+export declare const FreeFormContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/FreeFormMenu.styled.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=t(e).default.div`
+	padding: 4px 8px;
+	background: ${r.COLORS.surface.subdued};
+	border: 1px solid ${r.COLORS.stroke.primary};
+	border-radius: 4px;
+`;exports.FreeFormContainer=o;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MultiSelectOption, SingleOption } from '../../../type';
+export declare const MenuItem: React.FC<{
+    option: SingleOption | MultiSelectOption;
+    isMultiSelect?: boolean;
+    showDescription: (title?: string, description?: string) => void;
+    onSelect: (option: SingleOption) => void;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),s=require("../../../../checkBox/CheckBox.js"),i=require("../../../../list-item/ListItem.js"),r=require("../../../../TypographyStyle.js"),n=require("../../../../../constants/Theme.js"),o=require("./FreeFormMenu.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=c(t).default(i.ListItem)``;exports.MenuItem=t=>{let{option:i,isMultiSelect:c,showDescription:a,onSelect:d}=t;var u;function j(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(l,{onClick:e=>{e.preventDefault(),j(!i.selected)},onMouseOver:function(){i.descriptions?a(i.label,i.descriptions):a()},listItem:i,trailingIcon:c?e.jsx(s.CheckBox,{isDisabled:null!==(u=i.disabled)&&void 0!==u&&u,isChecked:i.selected,onValueChange:j}):e.jsx(e.Fragment,{}),leadingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(r.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"Freeform"}))}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":"default"})};

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DropdownOption, SingleOption } from '../../../type';
+export declare const MenuList: React.FC<{
+    options: DropdownOption[];
+    isMultiSelect?: boolean;
+    showDescription: (title?: string, description?: string) => void;
+    onSelect: (optionSelect: SingleOption) => void;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./MenuItem.js"),i=require("./MenuList.styled.js");exports.MenuList=s=>{let{options:r,isMultiSelect:n,showDescription:o,onSelect:l}=s;return e.jsx(e.Fragment,{children:r.map(((s,r)=>{if(s.options){const u=s;return e.jsxs("div",{children:[e.jsx(i.StyledGroupedLabel,{children:u.label}),u.options.map(((i,s)=>e.jsx(t.MenuItem,{onSelect:l,showDescription:o,isMultiSelect:n,option:i},s)))]},r)}return e.jsx(t.MenuItem,{onSelect:l,showDescription:o,isMultiSelect:n,option:s},r)}))})};

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuList.styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/MenuList.styled.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../../TypographyStyle.js"),o=require("../../../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=r(e).default(t.BodyCaption)`
+	padding: 8px 16px;
+	height: 16px;
+	color: ${o.COLORS.content.secondary};
+	background-color: ${o.COLORS.background.base};
+`;exports.StyledGroupedLabel=n;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/SelectAllMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DropdownOption } from '../../../type';
+export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySelected';
+export declare const SelectAllMenu: React.FC<{
+    options: DropdownOption[];
+    onSelect: (newState: SelectAllCheckboxState) => void;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/menu/SelectAllMenu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../../../checkBox/CheckBox.js"),r=require("../../../../list-item/ListItem.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=i(l).default(r.ListItem)``;exports.SelectAllMenu=l=>{let{options:r,onSelect:i}=l;const[o,c]=t.useState("notSelected");function s(){"partiallySelected"===o&&i("notSelected"),"selectAll"===o&&i("notSelected"),"notSelected"===o&&i("selectAll")}return t.useEffect((()=>{var e;if("all"===(r[0].options?!0===(null===(e=r[0].options)||void 0===e?void 0:e[0].selected)?"all":"none":!0===r[0].selected?"all":"none")){const e=r.filter((e=>!e.disabled)).reduce(((e,t)=>{if("all"===e){if(!t.options)return t.selected?"all":"partial";{const e=t.options.filter((e=>!e.disabled)),l=e.filter((e=>!0===e.selected));if(l.length===e.length)return"all";if(l.length<e.length)return"partial"}}return e}),"all");"all"===e&&c("selectAll"),"partial"===e&&c("partiallySelected")}else{const e=r.filter((e=>!e.disabled)).reduce(((e,t)=>{if("none"===e){if(!t.options)return t.selected?"partial":"none";{const e=t.options.filter((e=>!e.disabled)),l=e.filter((e=>!e.selected));if(l.length===e.length)return"none";if(l.length<e.length)return"partial"}}return e}),"none");"none"===e&&c("notSelected"),"partial"===e&&c("partiallySelected")}}),[r]),e.jsx(a,{onClick:e=>{e.preventDefault(),s()},listItem:{label:"Select All",value:"All"},trailingIcon:e.jsx(n.CheckBox,{isChecked:"selectAll"===o||"partiallySelected"===o,isPartiallyChecked:"partiallySelected"===o,onValueChange:s}),variant:"default"})};

package/dist/cjs/components/dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DropdownOption } from '../../../type';
+declare const MultiSelectDropdownBottomBar: React.FC<{
+    onClear?: () => void;
+    onApply: () => void;
+    list: DropdownOption[];
+}>;
+export default MultiSelectDropdownBottomBar;

package/dist/cjs/components/dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:a}=o;const c=a.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:"Apply",onClick:l})]}))]}))};

package/dist/cjs/components/dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.d.ts

@@ -0,0 +1 @@
+export declare const BottomBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js

@@ -0,0 +1,8 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.div`
+	display: flex;
+	padding: 8px 16px;
+	flex-direction: row;
+	align-items: center;
+	justify-content: end;
+	box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);
+`;exports.BottomBarContainer=t;

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/SearchBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SearchBox: React.FC<{
+    onSearch: (searchString: string | null) => void;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/SearchBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../input/Input.js"),n=require("../../../../input/context/InputStyleProvider.js"),o=require("../../../../../constants/Theme.js"),i=require("../../../../../assets/icons/cross.svg.js"),s=require("../../../../../assets/icons/search.svg.js");exports.SearchBox=a=>{let{onSearch:u}=a;const c=r.useRef();return e.jsx(n.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+o.COLORS.stroke.primary,padding:"12px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:e.jsx(t.Input,{ref:c,variant:"small",placeholder:"Search",leftIcon:{icon:()=>e.jsx(s.default,{width:24,height:24,color:o.COLORS.content.placeholder})},rightIcon:{icon:()=>{var r;return(null===(r=null==c?void 0:c.current)||void 0===r?void 0:r.value)?e.jsx(i.default,{onClick:()=>{c.current.value="",u("")},width:24,height:24,color:o.COLORS.content.placeholder}):e.jsx(e.Fragment,{})}},onChangeText:u})}))};

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/ZeroState.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SearchZeroState: React.FC<{
+    searchedString: string;
+}>;

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/ZeroState.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:o}=t;return e.jsx(r.ZeroState,{title:"No results found",subTitle:`\tSorry we could not find any results for "${null!=o?o:""}"`})};

package/dist/cjs/components/dropdown/opennedDropdown/index.d.ts

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

package/dist/cjs/components/dropdown/opennedDropdown/utils/iterationOnOptions.d.ts

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

package/dist/cjs/components/dropdown/opennedDropdown/utils/iterationOnOptions.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.iterateOnOptions=function(s,t,e){return s.map((s=>{if(s.options){const n=s.options.map((s=>!e||e(s)?Object.assign(Object.assign({},s),t):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...n]})}return!e||e(s)?Object.assign(Object.assign({},s),t):Object.assign({},s)}))};