@bikdotai/bik-component-library 0.0.13-beta.4 → 0.0.13-beta.40

package/dist/cjs/components/curtain/Curtain.styled.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("./CurtainHelper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=t(e).default.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 8px 16px;
+	background-color: ${e=>o.COLOR_CONFIG_MAP[e.mode][e.type].backgroundColor};
+	border-top: ${e=>e.strokeAtTop?"1px solid "+o.COLOR_CONFIG_MAP[e.mode][e.type].strokeColor:0};
+	border-bottom: ${e=>e.strokeAtBottom?"1px solid "+o.COLOR_CONFIG_MAP[e.mode][e.type].strokeColor:0};
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	width: 100%;
+	position: absolute;
+	top: 0;
+	z-index: 1;
+`;exports.CurtainStyle=r;

package/dist/cjs/components/curtain/CurtainHelper.d.ts

@@ -0,0 +1,72 @@
+export declare enum CURTAIN_TYPES {
+    NEGATIVE = "Negative",
+    WARNING = "Warning",
+    POSITIVE = "Positive",
+    NEUTRAL = "Neutral",
+    SPECIAL = "Special"
+}
+export declare enum CURTAIN_MODE {
+    LIGHT = "LIGHT",
+    DARK = "DARK"
+}
+export declare const COLOR_CONFIG_MAP: {
+    DARK: {
+        Negative: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+        };
+        Warning: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+        };
+        Positive: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+        };
+        Neutral: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+        };
+        Special: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+        };
+    };
+    LIGHT: {
+        Negative: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+            strokeColor: string;
+        };
+        Warning: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+            strokeColor: string;
+        };
+        Positive: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+            strokeColor: string;
+        };
+        Neutral: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+            strokeColor: string;
+        };
+        Special: {
+            backgroundColor: string;
+            textColor: string;
+            crossIconColor: string;
+            strokeColor: string;
+        };
+    };
+};

package/dist/cjs/components/curtain/CurtainHelper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,r,t=require("../../constants/Theme.js");exports.CURTAIN_TYPES=void 0,(o=exports.CURTAIN_TYPES||(exports.CURTAIN_TYPES={})).NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.SPECIAL="Special",exports.CURTAIN_MODE=void 0,(r=exports.CURTAIN_MODE||(exports.CURTAIN_MODE={})).LIGHT="LIGHT",r.DARK="DARK";const e={[exports.CURTAIN_MODE.DARK]:{[exports.CURTAIN_TYPES.NEGATIVE]:{backgroundColor:t.COLORS.background.negative.vibrant,textColor:t.COLORS.surface.standard,crossIconColor:t.COLORS.surface.standard},[exports.CURTAIN_TYPES.WARNING]:{backgroundColor:t.COLORS.background.warning.vibrant,textColor:t.COLORS.content.primary,crossIconColor:t.COLORS.content.secondary},[exports.CURTAIN_TYPES.POSITIVE]:{backgroundColor:t.COLORS.background.positive.vibrant,textColor:t.COLORS.surface.standard,crossIconColor:t.COLORS.surface.standard},[exports.CURTAIN_TYPES.NEUTRAL]:{backgroundColor:t.COLORS.background.inverse,textColor:t.COLORS.surface.standard,crossIconColor:t.COLORS.surface.standard},[exports.CURTAIN_TYPES.SPECIAL]:{backgroundColor:t.COLORS.background.inverse,textColor:t.COLORS.surface.standard,crossIconColor:t.COLORS.surface.standard}},[exports.CURTAIN_MODE.LIGHT]:{[exports.CURTAIN_TYPES.NEGATIVE]:{backgroundColor:t.COLORS.background.negative.light,textColor:t.COLORS.content.negative,crossIconColor:t.COLORS.content.secondary,strokeColor:t.COLORS.stroke.negative.lightAlt},[exports.CURTAIN_TYPES.WARNING]:{backgroundColor:t.COLORS.background.warning.light,textColor:t.COLORS.content.warning,crossIconColor:t.COLORS.content.secondary,strokeColor:t.COLORS.stroke.warning.lightAlt},[exports.CURTAIN_TYPES.POSITIVE]:{backgroundColor:t.COLORS.background.positive.light,textColor:t.COLORS.content.positive,crossIconColor:t.COLORS.content.secondary,strokeColor:t.COLORS.stroke.positive.lightAlt},[exports.CURTAIN_TYPES.NEUTRAL]:{backgroundColor:t.COLORS.surface.subdued,textColor:t.COLORS.content.secondary,crossIconColor:t.COLORS.content.secondary,strokeColor:t.COLORS.stroke.primary},[exports.CURTAIN_TYPES.SPECIAL]:{backgroundColor:t.COLORS.background.brandLight,textColor:t.COLORS.content.primary,crossIconColor:t.COLORS.content.secondary,strokeColor:t.COLORS.stroke.brandLightAlt}}};exports.COLOR_CONFIG_MAP=e;

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

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

package/dist/cjs/components/datePicker/DatePicker.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-import { CalendarProps } from 'react-calendar';
-import { CSSProperties } from 'styled-components';
-declare const DatePicker: React.FC<{
-    val?: Date | Date[];
-    onChange: (val: Date | Date[]) => void;
-    calendarProps?: CalendarProps;
-    pickerStyles?: CSSProperties;
-    nativeID?: string;
-    disabled?: boolean;
-}>;
-export default DatePicker;
+export type DatePickerProps = {
+    selectRange: boolean;
+    selectedDates?: Date[];
+    selectedDate?: Date;
+    onSelectRange: (startDate: Date, endDate: Date) => void;
+    onSelectDate: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+};
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/cjs/components/datePicker/DatePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../node_modules/react-calendar/dist/esm/index.js"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),s=require("../../assets/icons/calendar.svg.js"),i=require("../TypographyStyle.js"),l=require("./DatePicker.styled.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t);exports.default=d=>{let{val:u,onChange:O,calendarProps:g,disabled:S,pickerStyles:v,nativeID:C}=d;var j,y,D,b;const[L,f]=t.useState(!1),h=c.default.createRef();return a.useOutside(h,(()=>{f(!1)})),e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:C,bgColor:S?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>f(!L)},{children:[e.jsx(i.BodySecondary,Object.assign({style:{color:S?o.COLORS.content.inactive:o.COLORS.content.secondary,flex:1}},{children:u?Array.isArray(u)?(null===(j=null==u?void 0:u[0])||void 0===j?void 0:j.toString())&&(null===(y=null==u?void 0:u[1])||void 0===y?void 0:y.toString())?`${new Date(null===(D=null==u?void 0:u[0])||void 0===D?void 0:D.toString()).toLocaleDateString()}-${new Date(null===(b=null==u?void 0:u[1])||void 0===b?void 0:b.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(u.toString()).toLocaleDateString():(new Date).toLocaleDateString()})),e.jsx(s.default,{width:20,height:20,color:S?o.COLORS.content.inactive:o.COLORS.content.secondary})]})),L&&!S&&e.jsx(l.PickerContainer,Object.assign({ref:h,style:Object.assign({},v),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(r.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{O(e),f(!1)},value:u?Array.isArray(u)?2===u.length?[new Date(u[0]),new Date(u[1])]:null:new Date(u):null},g))}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("react-calendar"),r=require("./DatePicker.styled.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(a);exports.DatePicker=a=>{const[n,s]=t.useState(a.selectedDates),[l,i]=t.useState(a.selectedDate);return e.jsx(r.PickerContainer,Object.assign({selectRange:a.selectRange},{children:e.jsx(c.default,{onChange:e=>{a.selectRange?(a.onSelectRange(e[0],e[1]),s([e[0],e[1]])):(a.onSelectDate(e),i(e))},value:a.selectRange?n:l,selectRange:a.selectRange,minDate:a.minDate,maxDate:a.maxDate})}))};

package/dist/cjs/components/datePicker/DatePicker.styled.d.ts

@@ -1,11 +1,7 @@
-export declare const DateBtn: import("styled-components").StyledComponent<"div", any, {
-    bgColor: string;
-    borderColor: string;
-}, never>;
-export declare const PickerContainer: import("styled-components").StyledComponent<"div", any, {
-    bgColor: string;
-    borderColor: string;
-    brandColor: string;
-    subDued: string;
-    contentPrimary: string;
-}, never>;
+/// <reference types="react" />
+export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    selectRange: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/datePicker/DatePicker.styled.js

@@ -1,68 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("styled-components"));const o=r.default.div`
-	display: flex;
-	padding: 5px 8px;
-	background: ${e=>e.bgColor};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${e=>e.borderColor};
-	border-radius: 4px;
-	flex-direction: row;
-	align-items: center;
-	z-index: 99999;
-	position: relative;
-`,t=r.default.div`
-	position: absolute;
-	top: calc(100% + 8px);
-	zindex: 9;
-	.custom__calendar {
-		background: ${e=>e.bgColor};
-		border-width: 1px;
-		border-style: solid;
-		border-color: ${e=>e.borderColor};
-		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-		border-radius: 4px;
-	}
-
-	.custom__tile:hover,
-	.custom__tile:focus,
-	.react-calendar__tile--active {
-		background: ${e=>e.brandColor};
-	}
-
-	.react-calendar__month-view__weekdays__weekday {
-		font-family: 'Inter';
-		font-style: normal;
-		overflow: hidden;
-		font-weight: 600;
-		font-size: 14px;
-		line-height: 20px;
-		color: ${e=>e.contentPrimary};
-
-		abbr[title] {
-			text-decoration: none !important;
-		}
-	}
-
-	.react-calendar__month-view__weekdays {
-		background: ${e=>e.subDued};
-	}
-
-	.react-calendar__navigation {
-		display: flex;
-		padding: 12px 20px;
-
-		button {
-			border: 0;
-			background: transparent;
-		}
-
-		.react-calendar__navigation__arrow
-			react-calendar__navigation__prev2-button {
-			font-size: 20px;
-		}
-
-		.react-calendar__navigation__arrow react-calendar__navigation__prev-button {
-			font-size: 20px;
-		}
-	}
-`;exports.DateBtn=o,exports.PickerContainer=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),d=require("../../constants/Theme.js");function X(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const b=X(c).default("div","production"===process.env.NODE_ENV?{target:"e1wgjc5p0"}:{target:"e1wgjc5p0",label:"PickerContainer"})("position:relative;z-index:99999;.react-calendar{background:",d.COLORS.text.white,";border-width:1px;border-style:solid;border-color:",d.COLORS.text.white,";box-shadow:0px 2px 8px rgba(0, 0, 0, 0.12);border-radius:4px;color:",d.COLORS.text.primary,";&--selectRange{.react-calendar{&__year-view{.react-calendar__tile--hover{background-color:unset;}}&__month-view{.react-calendar__tile--hover{background-color:",d.COLORS.background.brandLight,";}}}}.react-calendar{&__tile{transition:all 0.25s;&:enabled:hover{background-color:",d.COLORS.surface.hovered,";border-radius:4px;}&--hasActive:enabled:hover,&--hasActive:enabled:focus{background:",d.COLORS.background.brand,";color:",d.COLORS.text.white,";}&.react-calendar__tile{&--range{&:enabled:hover{border-radius:0;}}&--rangeStart{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:4px!important;border-bottom-left-radius:4px!important;background:",d.COLORS.background.brand,";color:",d.COLORS.text.white,";&:enabled:hover{border-top-right-radius:0;background:",d.COLORS.background.brand,";border-color:",d.COLORS.background.brand,";border-bottom-right-radius:0;}&.react-calendar__tile--rangeEnd{",(c=>(c=>c.selectRange?"\n      border-top-right-radius: 0 !important;\n      border-bottom-right-radius: 0 !important;\n    ":"\n      border-top-right-radius: 4px;\n      border-bottom-right-radius: 4px;\n    ")(c))," border-top-left-radius:4px;border-bottom-left-radius:4px;&:enabled:hover{background:",d.COLORS.background.brand,";border-color:",d.COLORS.background.brand,";border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:4px!important;border-bottom-left-radius:4px!important;}}}&--rangeEnd{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px!important;border-bottom-right-radius:4px!important;background:",d.COLORS.background.brand,";color:",d.COLORS.text.white,";&:enabled:hover{border-top-left-radius:0;background:",d.COLORS.background.brand,";border-color:",d.COLORS.background.brand,";border-bottom-left-radius:0;}}}}}.react-calendar__tile--active{background:",d.COLORS.background.brandLight,";color:",d.COLORS.text.primary,";}.react-calendar__tile--now{background:",d.COLORS.text.white,";border-radius:4px;border-color:",d.COLORS.background.brand,";border-style:solid;border-width:1px;}.react-calendar__month-view__weekdays__weekday{font-style:normal;overflow:hidden;font-weight:600;font-size:14px;line-height:20px;color:",d.COLORS.text.primary,";abbr[title]{text-decoration:none!important;}}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:",d.COLORS.background.brandLight,";border-radius:4px;}.react-calendar__month-view__weekends{color:",d.COLORS.text.primary,";}.react-calendar__month-view__days__day--weekend{color:",d.COLORS.text.primary,";}.react-calendar__month-view__weekdays{background:",d.COLORS.surface.subdued,";}.react-calendar__navigation{display:flex;padding:12px 20px;button{border:0!important;background:transparent!important;}.react-calendar__navigation__arrow react-calendar__navigation__prev2-button{font-size:20px;}.react-calendar__navigation__arrow react-calendar__navigation__prev-button{font-size:20px;}}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGVQaWNrZXIuc3R5bGVkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCMEMiLCJmaWxlIjoiRGF0ZVBpY2tlci5zdHlsZWQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuY29uc3QgZ2VuZXJhdGVCb3JkZXJSYWRpdXMgPSAocHJvcHMpID0+IHtcclxuICAgIGlmIChwcm9wcy5zZWxlY3RSYW5nZSkge1xyXG4gICAgICAgIHJldHVybiBgXG4gICAgICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogMCAhaW1wb3J0YW50O1xuICAgICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDAgIWltcG9ydGFudDtcbiAgICBgO1xyXG4gICAgfVxyXG4gICAgZWxzZSB7XHJcbiAgICAgICAgcmV0dXJuIGBcbiAgICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiA0cHg7XG4gICAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogNHB4O1xuICAgIGA7XHJcbiAgICB9XHJcbn07XHJcbmV4cG9ydCBjb25zdCBQaWNrZXJDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR6LWluZGV4OiA5OTk5OTtcblxuXHQucmVhY3QtY2FsZW5kYXIge1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLnRleHQud2hpdGV9O1xuXHRcdGJvcmRlci13aWR0aDogMXB4O1xuXHRcdGJvcmRlci1zdHlsZTogc29saWQ7XG5cdFx0Ym9yZGVyLWNvbG9yOiAke0NPTE9SUy50ZXh0LndoaXRlfTtcblx0XHRib3gtc2hhZG93OiAwcHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuXHRcdGJvcmRlci1yYWRpdXM6IDRweDtcblx0XHRjb2xvcjogJHtDT0xPUlMudGV4dC5wcmltYXJ5fTtcblx0XHQmLS1zZWxlY3RSYW5nZSB7XG5cdFx0XHQucmVhY3QtY2FsZW5kYXIge1xuXHRcdFx0XHQmX195ZWFyLXZpZXcge1xuXHRcdFx0XHRcdC5yZWFjdC1jYWxlbmRhcl9fdGlsZS0taG92ZXIge1xuXHRcdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogdW5zZXQ7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHR9XG5cdFx0XHRcdCZfX21vbnRoLXZpZXcge1xuXHRcdFx0XHRcdC5yZWFjdC1jYWxlbmRhcl9fdGlsZS0taG92ZXIge1xuXHRcdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuYmFja2dyb3VuZC5icmFuZExpZ2h0fTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdH1cblx0XHRcdH1cblx0XHR9XG5cdFx0LnJlYWN0LWNhbGVuZGFyIHtcblx0XHRcdCZfX3RpbGUge1xuXHRcdFx0XHR0cmFuc2l0aW9uOiBhbGwgMC4yNXM7XG5cdFx0XHRcdCY6ZW5hYmxlZDpob3ZlciB7XG5cdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3VyZmFjZS5ob3ZlcmVkfTtcblx0XHRcdFx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0XHRcdH1cblx0XHRcdFx0Ji0taGFzQWN0aXZlOmVuYWJsZWQ6aG92ZXIsXG5cdFx0XHRcdCYtLWhhc0FjdGl2ZTplbmFibGVkOmZvY3VzIHtcblx0XHRcdFx0XHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kfTtcblx0XHRcdFx0XHRjb2xvcjogJHtDT0xPUlMudGV4dC53aGl0ZX07XG5cdFx0XHRcdH1cblx0XHRcdFx0Ji5yZWFjdC1jYWxlbmRhcl9fdGlsZSB7XG5cdFx0XHRcdFx0Ji0tcmFuZ2Uge1xuXHRcdFx0XHRcdFx0JjplbmFibGVkOmhvdmVyIHtcblx0XHRcdFx0XHRcdFx0Ym9yZGVyLXJhZGl1czogMDtcblx0XHRcdFx0XHRcdH1cblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0Ji0tcmFuZ2VTdGFydCB7XG5cdFx0XHRcdFx0XHRib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogMDtcblx0XHRcdFx0XHRcdGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0Ym9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNHB4ICFpbXBvcnRhbnQ7XG5cdFx0XHRcdFx0XHRib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiA0cHggIWltcG9ydGFudDtcblx0XHRcdFx0XHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmR9O1xuXHRcdFx0XHRcdFx0Y29sb3I6ICR7Q09MT1JTLnRleHQud2hpdGV9O1xuXG5cdFx0XHRcdFx0XHQmOmVuYWJsZWQ6aG92ZXIge1xuXHRcdFx0XHRcdFx0XHRib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogMDtcblx0XHRcdFx0XHRcdFx0YmFja2dyb3VuZDogJHtDT0xPUlMuYmFja2dyb3VuZC5icmFuZH07XG5cdFx0XHRcdFx0XHRcdGJvcmRlci1jb2xvcjogJHtDT0xPUlMuYmFja2dyb3VuZC5icmFuZH07XG5cdFx0XHRcdFx0XHRcdGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0fVxuXHRcdFx0XHRcdFx0Ji5yZWFjdC1jYWxlbmRhcl9fdGlsZS0tcmFuZ2VFbmQge1xuXHRcdFx0XHRcdFx0XHQkeyhwcm9wcykgPT4gZ2VuZXJhdGVCb3JkZXJSYWRpdXMocHJvcHMpfVxuXHRcdFx0XHRcdFx0XHRib3JkZXItdG9wLWxlZnQtcmFkaXVzOiA0cHg7XG5cdFx0XHRcdFx0XHRcdGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDRweDtcblx0XHRcdFx0XHRcdFx0JjplbmFibGVkOmhvdmVyIHtcblx0XHRcdFx0XHRcdFx0XHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kfTtcblx0XHRcdFx0XHRcdFx0XHRib3JkZXItY29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmR9O1xuXHRcdFx0XHRcdFx0XHRcdGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0XHRcdGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0XHRcdGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDRweCAhaW1wb3J0YW50O1xuXHRcdFx0XHRcdFx0XHRcdGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDRweCAhaW1wb3J0YW50O1xuXHRcdFx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHRcdCYtLXJhbmdlRW5kIHtcblx0XHRcdFx0XHRcdGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDA7XG5cdFx0XHRcdFx0XHRib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0Ym9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDRweCAhaW1wb3J0YW50O1xuXHRcdFx0XHRcdFx0Ym9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDRweCAhaW1wb3J0YW50O1xuXHRcdFx0XHRcdFx0YmFja2dyb3VuZDogJHtDT0xPUlMuYmFja2dyb3VuZC5icmFuZH07XG5cdFx0XHRcdFx0XHRjb2xvcjogJHtDT0xPUlMudGV4dC53aGl0ZX07XG5cblx0XHRcdFx0XHRcdCY6ZW5hYmxlZDpob3ZlciB7XG5cdFx0XHRcdFx0XHRcdGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDA7XG5cdFx0XHRcdFx0XHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmR9O1xuXHRcdFx0XHRcdFx0XHRib3JkZXItY29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmR9O1xuXHRcdFx0XHRcdFx0XHRib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwO1xuXHRcdFx0XHRcdFx0fVxuXHRcdFx0XHRcdH1cblx0XHRcdFx0fVxuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC5yZWFjdC1jYWxlbmRhcl9fdGlsZS0tYWN0aXZlIHtcblx0XHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmRMaWdodH07XG5cdFx0XHRjb2xvcjogJHtDT0xPUlMudGV4dC5wcmltYXJ5fTtcblx0XHR9XG5cblx0XHQucmVhY3QtY2FsZW5kYXJfX3RpbGUtLW5vdyB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAke0NPTE9SUy50ZXh0LndoaXRlfTtcblx0XHRcdGJvcmRlci1yYWRpdXM6IDRweDtcblx0XHRcdGJvcmRlci1jb2xvcjogJHtDT0xPUlMuYmFja2dyb3VuZC5icmFuZH07XG5cdFx0XHRib3JkZXItc3R5bGU6IHNvbGlkO1xuXHRcdFx0Ym9yZGVyLXdpZHRoOiAxcHg7XG5cdFx0fVxuXG5cdFx0LnJlYWN0LWNhbGVuZGFyX19tb250aC12aWV3X193ZWVrZGF5c19fd2Vla2RheSB7XG5cdFx0XHRmb250LXN0eWxlOiBub3JtYWw7XG5cdFx0XHRvdmVyZmxvdzogaGlkZGVuO1xuXHRcdFx0Zm9udC13ZWlnaHQ6IDYwMDtcblx0XHRcdGZvbnQtc2l6ZTogMTRweDtcblx0XHRcdGxpbmUtaGVpZ2h0OiAyMHB4O1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLnRleHQucHJpbWFyeX07XG5cblx0XHRcdGFiYnJbdGl0bGVdIHtcblx0XHRcdFx0dGV4dC1kZWNvcmF0aW9uOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHR9XG5cdFx0fVxuXG5cdFx0LnJlYWN0LWNhbGVuZGFyX19uYXZpZ2F0aW9uIGJ1dHRvbjplbmFibGVkOmhvdmVyLFxuXHRcdC5yZWFjdC1jYWxlbmRhcl9fbmF2aWdhdGlvbiBidXR0b246ZW5hYmxlZDpmb2N1cyB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kTGlnaHR9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogNHB4O1xuXHRcdH1cblxuXHRcdC5yZWFjdC1jYWxlbmRhcl9fbW9udGgtdmlld19fd2Vla2VuZHMge1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLnRleHQucHJpbWFyeX07XG5cdFx0fVxuXG5cdFx0LnJlYWN0LWNhbGVuZGFyX19tb250aC12aWV3X19kYXlzX19kYXktLXdlZWtlbmQge1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLnRleHQucHJpbWFyeX07XG5cdFx0fVxuXG5cdFx0LnJlYWN0LWNhbGVuZGFyX19tb250aC12aWV3X193ZWVrZGF5cyB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5zdXJmYWNlLnN1YmR1ZWR9O1xuXHRcdH1cblxuXHRcdC5yZWFjdC1jYWxlbmRhcl9fbmF2aWdhdGlvbiB7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0cGFkZGluZzogMTJweCAyMHB4O1xuXG5cdFx0XHRidXR0b24ge1xuXHRcdFx0XHRib3JkZXI6IDAgIWltcG9ydGFudDtcblx0XHRcdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcblx0XHRcdH1cblxuXHRcdFx0LnJlYWN0LWNhbGVuZGFyX19uYXZpZ2F0aW9uX19hcnJvd1xuXHRcdFx0XHRyZWFjdC1jYWxlbmRhcl9fbmF2aWdhdGlvbl9fcHJldjItYnV0dG9uIHtcblx0XHRcdFx0Zm9udC1zaXplOiAyMHB4O1xuXHRcdFx0fVxuXG5cdFx0XHQucmVhY3QtY2FsZW5kYXJfX25hdmlnYXRpb25fX2Fycm93XG5cdFx0XHRcdHJlYWN0LWNhbGVuZGFyX19uYXZpZ2F0aW9uX19wcmV2LWJ1dHRvbiB7XG5cdFx0XHRcdGZvbnQtc2l6ZTogMjBweDtcblx0XHRcdH1cblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPURhdGVQaWNrZXIuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.PickerContainer=b;

package/dist/cjs/components/datePicker/DatePickerWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CalendarProps } from 'react-calendar';
+import { CSSProperties } from 'styled-components';
+declare const DatePickerWrapper: React.FC<{
+    val?: Date | Date[];
+    onChange: (val: Date | Date[]) => void;
+    calendarProps?: CalendarProps;
+    pickerStyles?: CSSProperties;
+    nativeID?: string;
+    disabled?: boolean;
+}>;
+export default DatePickerWrapper;

package/dist/cjs/components/datePicker/DatePickerWrapper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-calendar"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/calendar.svg.js"),s=require("../TypographyStyle.js"),l=require("./DatePickerWrapper.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(t),u=c(r);exports.default=r=>{let{val:c,onChange:O,calendarProps:g,disabled:S,pickerStyles:v,nativeID:C}=r;var y,D,j,b;const[L,f]=t.useState(!1),h=d.default.createRef();return a.useOutside(h,(()=>{f(!1)})),e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:C,bgColor:S?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>f(!L)},{children:[e.jsx(s.BodySecondary,Object.assign({style:{color:S?o.COLORS.content.inactive:o.COLORS.content.secondary,flex:1}},{children:c?Array.isArray(c)?(null===(y=null==c?void 0:c[0])||void 0===y?void 0:y.toString())&&(null===(D=null==c?void 0:c[1])||void 0===D?void 0:D.toString())?`${new Date(null===(j=null==c?void 0:c[0])||void 0===j?void 0:j.toString()).toLocaleDateString()}-${new Date(null===(b=null==c?void 0:c[1])||void 0===b?void 0:b.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(c.toString()).toLocaleDateString():(new Date).toLocaleDateString()})),e.jsx(i.default,{width:20,height:20,color:S?o.COLORS.content.inactive:o.COLORS.content.secondary})]})),L&&!S&&e.jsx(l.PickerContainer,Object.assign({ref:h,style:Object.assign({},v),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(u.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{O(e),f(!1)},value:c?Array.isArray(c)?2===c.length?[new Date(c[0]),new Date(c[1])]:null:new Date(c):null},g))}))]})};

package/dist/cjs/components/datePicker/DatePickerWrapper.styled.d.ts

@@ -0,0 +1,11 @@
+export declare const DateBtn: import("styled-components").StyledComponent<"div", any, {
+    bgColor: string;
+    borderColor: string;
+}, never>;
+export declare const PickerContainer: import("styled-components").StyledComponent<"div", any, {
+    bgColor: string;
+    borderColor: string;
+    brandColor: string;
+    subDued: string;
+    contentPrimary: string;
+}, never>;

package/dist/cjs/components/datePicker/DatePickerWrapper.styled.js

@@ -0,0 +1,68 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("styled-components"));const o=r.default.div`
+	display: flex;
+	padding: 5px 8px;
+	background: ${e=>e.bgColor};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${e=>e.borderColor};
+	border-radius: 4px;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	position: relative;
+`,t=r.default.div`
+	position: absolute;
+	top: calc(100% + 8px);
+	zindex: 9;
+	.custom__calendar {
+		background: ${e=>e.bgColor};
+		border-width: 1px;
+		border-style: solid;
+		border-color: ${e=>e.borderColor};
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+		border-radius: 4px;
+	}
+
+	.custom__tile:hover,
+	.custom__tile:focus,
+	.react-calendar__tile--active {
+		background: ${e=>e.brandColor};
+	}
+
+	.react-calendar__month-view__weekdays__weekday {
+		font-family: 'Inter';
+		font-style: normal;
+		overflow: hidden;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 20px;
+		color: ${e=>e.contentPrimary};
+
+		abbr[title] {
+			text-decoration: none !important;
+		}
+	}
+
+	.react-calendar__month-view__weekdays {
+		background: ${e=>e.subDued};
+	}
+
+	.react-calendar__navigation {
+		display: flex;
+		padding: 12px 20px;
+
+		button {
+			border: 0;
+			background: transparent;
+		}
+
+		.react-calendar__navigation__arrow
+			react-calendar__navigation__prev2-button {
+			font-size: 20px;
+		}
+
+		.react-calendar__navigation__arrow react-calendar__navigation__prev-button {
+			font-size: 20px;
+		}
+	}
+`;exports.DateBtn=o,exports.PickerContainer=t;

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

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

package/dist/cjs/components/dropShadow/DropShadow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const p={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}};exports.default=r=>{let{level:x="z1",position:t="down",children:o}=r;const s=p[x][t];return e.jsx("div",Object.assign({style:{boxShadow:s}},{children:o}))};

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

@@ -4,6 +4,6 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small';
     disabled?: boolean;
+    noErrorHint?: boolean;
 };
-declare const Dropdown: React.FC<DropdownProps>;
-export default Dropdown;
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("../../constants/Theme.js"),l=require("../../assets/icons/chevronDown.svg.js"),o=require("../input/Input.js"),i=require("../input/context/InputStyleProvider.js"),s=require("./UnChildDropdown/UnChildDropdown.js");function a(){}exports.default=d=>{var u,c,{placeHolder:p,size:h,onSelect:v,defaultOptions:j,disabled:f}=d,g=e.__rest(d,["placeHolder","size","onSelect","defaultOptions","disabled"]);const b=null!=h?h:"default",x=n.useRef(),[w,m]=n.useState(null!=j?j:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==g?void 0:g.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),m([...t])}),[g.options]);const O=w.length?w.map((e=>e.label)).join(", "):void 0;return t.jsx(i.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===b?32:48,width:null!==(u=g.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t.jsx(s.UnChildDropdown,Object.assign({ref:x,onSelect:function(e){Array.isArray(e)?m([...e]):m([e]),null==v||v(e)},disabled:f},g,{children:t.jsx(o.Input,{state:f?"disabled":"none",value:O,errorMessage:g.error,variant:b,placeholder:null!=p?p:"Select an option",width:null!==(c=g.width)&&void 0!==c?c:"100%",onChangeText:a,rightIcon:{icon:()=>{var e;return t.jsx(l.default,{style:{transform:(null===(e=null==x?void 0:x.current)||void 0===e?void 0:e.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===b?20:24,height:"small"===b?20:24,color:r.COLORS.content.primary})}}})}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),s=require("../input/context/InputStyleProvider.js"),l=require("./DropdownPopover/index.js");function a(){}const u=u=>{var d,c,{placeHolder:p,size:v,onSelect:h,defaultOptions:j,disabled:f,noErrorHint:g}=u,x=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const b=null!=v?v:"default",w=t.useRef(),[m,O]=t.useState(null!=j?j:[]);t.useEffect((()=>{var e;const r=[];null===(e=null==x?void 0:x.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&r.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&r.push(e)})),O([...r])}),[x.options]),t.useEffect((()=>{j&&O([...j])}),[j]);const q=m.length?m.map((e=>e.label)).join(", "):void 0;return r.jsx(s.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===b?32:48,width:null!==(d=x.width)&&void 0!==d?d:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:r.jsx(l.DropdownPopover,Object.assign({ref:w,onSelect:function(e){Array.isArray(e)?O([...e]):O([e]),null==h||h(e)},disabled:f},x,{children:r.jsx(i.Input,{noErrorHint:g,state:f?"disabled":"none",value:q,errorMessage:x.error,variant:b,placeholder:null!=p?p:"Select an option",width:null!==(c=x.width)&&void 0!==c?c:"100%",onChangeText:a,rightIcon:{icon:()=>{var e;return r.jsx(o.default,{style:{transform:(null===(e=null==w?void 0:w.current)||void 0===e?void 0:e.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===b?20:24,height:"small"===b?20:24,color:n.COLORS.content.primary})}}})}))}))};u.displayName="Dropdown",exports.Dropdown=u;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { OpenDropdownProps } from '../type';
+export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
+    isLoading?: boolean | undefined;
+    children?: React.ReactNode;
+    disabled?: boolean | undefined;
+} & React.RefAttributes<{
+    openDropdown: boolean;
+}>>;

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("react"),o=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),s=require("../Common.styled.js"),l=require("../OpenedDropdown/components/OpennedDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=i(n).default.forwardRef(((i,p)=>{var{children:d}=i,a=e.__rest(i,["children"]);const u=p,[c,j]=n.useState(!1),[v,f]=n.useState(null),[b,w]=n.useState(null),{styles:O,attributes:x}=o.usePopper(v,b,{});return n.useImperativeHandle(u,(()=>({openDropdown:c})),[]),n.useEffect((()=>{(null==u?void 0:u.current)&&(u.current.openDropdown=c)}),[c]),r.jsxs(r.Fragment,{children:[r.jsxs("div",Object.assign({style:{position:"relative"},ref:f},{children:[r.jsx(s.OverLapAbs,{onClick:e=>{c?e.preventDefault():a.disabled||j(!0)}}),d]})),c&&r.jsx(s.OpenDropdownContainer,Object.assign({ref:w,style:Object.assign(Object.assign({},O.popper),{zIndex:3})},x.popper,{children:r.jsx(t.default,Object.assign({level:"z2",position:"down"},{children:r.jsx(l.OpenedDropdown,Object.assign({},a,{onSelect:e=>{var r;null===(r=a.onSelect)||void 0===r||r.call(a,e),j(!1)},onClose:function(){var e;j(!1),null===(e=null==a?void 0:a.onClose)||void 0===e||e.call(a)}}))}))}))]})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

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

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

package/dist/cjs/components/dropdown/OpenedDropdown/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/SearchZeroState.js");const p=304,f=290;exports.OpenedDropdown=j=>{let{options:h,isSearchable:S,isMultiSelect:O,width:b,allowFreeForm:x,height:m,onClose:g,onSelect:v}=j;const[q,M]=t.useState(null!=h?h:[]),[F,w]=t.useState(null!=b?b:f),[y,D]=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?S&&O?L-96:S&&!O||!S&&O?L-48:L:L;function W(e){if(O){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:f;if(null===A)w(e);else if("number"==typeof e)w(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));w(t)}}),[A]);const Z=q.map((e=>{var t;if(y){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(y))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(y))?e:null}return e})).filter((e=>null!==e)),_=!!S&&y&&0===Z.length;return e.jsxs(c.OpennedDropdownContainer,Object.assign({ref:C,style:{maxWidth:A?800:400,width:F}},{children:[e.jsxs("div",Object.assign({style:{width:A?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!S&&e.jsx(a.SearchBox,{onSearch:function(e){D(e)}}),e.jsxs(c.MenuListContainer,Object.assign({maxHeight:E},{children:[!!O&&!_&&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&&_&&e.jsx(d.SearchZeroState,{searchedString:y}),x&&_&&e.jsx(l.FreeFormMenu,{isMultiSelect:O,onSelect:function(e){if(!O)return void W({label:y,value:y,isFreeForm:!0,selected:!0});const t=q.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===y&&t.value===y&&e})));e&&(t.some((e=>e.label===y&&e.value===y))||t.unshift({label:y,value:y,isFreeForm:!0,selected:!0})),M([...t])},searchedString:y}),e.jsx(o.MenuList,{onSelect:W,showDescription:function(e,t){B(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:Z})]})),!!O&&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/OpenedDropdown/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%;
+	height: 100%;
+`;const d=r.default.div`
+	max-height: ${e=>"number"==typeof e.maxHeight?`${e.maxHeight}px`:e.maxHeight};
+	overflow-y: auto;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+`;exports.MenuListContainer=d,exports.OpennedDropdownContainer=i;

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

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

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

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

package/dist/cjs/components/dropdown/OpenedDropdown/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"),c=require("../../../../checkBox/CheckBox.js"),o=require("../../../../list-item/ListItem.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=r(l).default(o.ListItem)``;exports.SelectAllMenu=l=>{let{options:o,onSelect:r}=l;const[i,n]=t.useState("notSelected");function a(){"partiallySelected"===i&&r("notSelected"),"selectAll"===i&&r("notSelected"),"notSelected"===i&&r("selectAll")}return t.useEffect((()=>{const e=[];o.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?n("selectAll"):e.filter(Boolean).length>0?n("partiallySelected"):n("notSelected")}),[o]),e.jsx(s,{onClick:e=>{e.preventDefault(),a()},listItem:{label:"Select All",value:"All"},leadingIcon:e.jsx(c.CheckBox,{isChecked:"selectAll"===i||"partiallySelected"===i,isPartiallyChecked:"partiallySelected"===i,onValueChange:a}),variant:"default"})};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { DropdownOption, SingleOption } from '../../type';
+export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    label: string;
+    value: string;
+    descriptions?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+} | {
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+    options: SingleOption[];
+})[];

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

@@ -1 +1,3 @@
 export * from './Dropdown';
+export * from './DropdownPopover';
+export * from './OpenedDropdown';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -17,10 +18,13 @@ export type GroupedOption = {
 export type SingleOption = {
     label: string;
     value: string;
-    descriptions?: string | null;
+    description?: string | null;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/cjs/components/fab-menu/FABMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DropdownOption } from '../dropdown/type';
-import { FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
 import { TooltipPlacement } from '../tooltips';
 export declare const FABMenu: React.FC<{
     onSelect: (selected: DropdownOption | DropdownOption[]) => void;
@@ -18,4 +18,6 @@ export declare const FABMenu: React.FC<{
     tooltipText?: string;
     zIndex?: number;
     isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:`${c}px`,onSelect:i})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w},{children:t.jsx(o.OpenedDropdown,{options:r,height:a||90,width:`${c}px`,onSelect:i})}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
-import { FAB_POSITION } from './FloatingActionButton.styles';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
     children?: React.ReactNode;
@@ -16,4 +16,6 @@ export declare const FloatingActionButton: React.FC<{
     tooltipPlacement?: TooltipPlacement;
     zIndex?: number;
     isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const s=o=>{const{width:i,height:s,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u}=o;return h?t.jsx(n.CustomisedTooltip,{tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:l,onClick:c,children:d,tooltipText:a,isRound:h=!0,width:u=48,height:g=48,color:p=i.COLORS.background.inverse,position:j=r.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:m=20,zIndex:C=1,tooltipPlacement:w=n.TooltipPlacement.Auto}=e;return t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonOuterContainer,Object.assign({width:u,height:g,color:p,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:m,zIndex:C},{children:t.jsx(r.StyledDropdown,{children:d?t.jsxs(t.Fragment,{children:[t.jsx(r.DropdownToggleContainer,{children:t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})}),t.jsx(o.Dropdown.Menu,{children:d})]}):t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/CustomisedTooltip.js"),r=require("../../assets/icons/question-mark.svg.js"),s=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:n,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u,isDropdownOpen:g}=o;return h?t.jsx(e.CustomisedTooltip,{isTooltipVisible:!g,tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})}))})};exports.FloatingActionButton=r=>{const{icon:c,onClick:d,children:a,tooltipText:h,isRound:u=!0,width:g=48,height:p=48,color:j=n.COLORS.background.inverse,position:x=s.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:O=20,buttonPaddingVertical:m=20,zIndex:T=1,tooltipPlacement:w=e.TooltipPlacement.Auto,dropPosition:P=s.DROP_POSITION.DOWN,menuAligment:C=s.MENU_ALIGNMENT.END}=r,[b,F]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonOuterContainer,Object.assign({width:g,height:p,color:j,position:x,buttonPaddingHorizontal:O,buttonPaddingVertical:m,zIndex:T},{children:t.jsx(s.StyledDropdown,Object.assign({onToggle:(t,o)=>{F(t)},drop:P,align:C},{children:a?t.jsxs(t.Fragment,{children:[t.jsx(s.DropdownToggleContainer,Object.assign({drop:P},{children:t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})})),t.jsx(i.Dropdown.Menu,{children:a})]}):t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})}))}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts

@@ -5,6 +5,18 @@ export declare enum FAB_POSITION {
     BOTTOM_LEFT = "bottom left",
     BOTTOM_RIGHT = "botton right"
 }
+export declare enum DROP_POSITION {
+    UP = "up",
+    UP_CENTERED = "up-centered",
+    START = "start",
+    END = "end",
+    DOWN = "down",
+    DOWN_CENTERED = "down-centered"
+}
+export declare enum MENU_ALIGNMENT {
+    START = "start",
+    END = "end"
+}
 export declare const FloatingActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;