@innovaccer/design-system 2.13.3 → 2.13.4-2

package/css/src/components/dropdown.css

@@ -9,7 +9,7 @@
 }
 
 .Dropdown-inputWrapper {
-  border-bottom: var(--border);
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
 }
 
 .Dropdown-input {
@@ -19,6 +19,7 @@
 .Dropdown-input,
 .Dropdown-input:focus-within {
   border: unset !important;
+  box-shadow: none !important;
 }
 
 .Dropdown-section {
@@ -59,11 +60,6 @@
   box-sizing: border-box;
 }
 
-.Dropdown-items {
-  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  animation-fill-mode: forwards;
-}
-
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
@@ -90,6 +86,10 @@
   cursor: pointer;
 }
 
+.Option--active {
+  transition: var(--standard-productive-curve);
+}
+
 .Option-loading {
   pointer-events: none;
 }

package/css/src/components/metricInput.css

@@ -34,6 +34,7 @@
 .MetricInput:focus-within {
   background: var(--white);
   border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .MetricInput:focus-within .MetricInput-icon {

package/css/src/components/verticalNav.css

@@ -20,6 +20,7 @@
 }
 
 .MenuItem {
+  text-decoration: none;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -67,6 +68,7 @@
 .MenuItem:hover {
   background-color: var(--secondary-light);
   box-shadow: var(--shadow-s);
+  text-decoration: none;
 }
 
 .MenuItem--active,

package/dist/core/components/atoms/dropdown/Dropdown.d.ts

@@ -37,6 +37,7 @@ interface SharedDropdownProps extends DropdownListProps, BaseProps {
     getLabel?: (label: string) => void;
     onChange?: (selected: any[] | any, name?: string | number) => void;
     onClose?: (selected: any[], name?: string | number) => void;
+    tabIndex?: number;
 }
 declare type SyncDropdownProps = SyncProps & SharedDropdownProps;
 declare type AsyncDropdownProps = AsyncProps & SharedDropdownProps;
@@ -58,6 +59,7 @@ interface DropdownState {
     selected: OptionSchema[];
     tempSelected: OptionSchema[];
     previousSelected: OptionSchema[];
+    scrollIndex?: number;
 }
 export declare class Dropdown extends React.Component<DropdownProps, DropdownState> {
     staticLimit: number;

package/dist/core/components/atoms/dropdown/DropdownList.d.ts

@@ -41,6 +41,7 @@ export interface DropdownListProps extends TriggerAndOptionProps {
     loadersCount?: number;
     popoverOptions?: PopoverOptions;
     searchPlaceholder?: string;
+    scrollIndex?: number;
 }
 interface OptionsProps extends DropdownListProps, BaseProps {
     listOptions: OptionSchema[];

package/dist/core/components/atoms/dropdown/utility.d.ts

@@ -11,3 +11,4 @@ export declare const getSelectAll: (selected: Option[], optionsLength: number, d
     indeterminate: boolean;
     checked: boolean;
 };
+export declare const scrollToOptionIndex: (scrollIndex: number, listOptions: any) => void;

package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts

@@ -67,10 +67,10 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
     getZIndexForLayer(node: Element | null): number | undefined;
     getUpdatedStyle: (oldStyle: React.CSSProperties, placement: PositionType, offset: Offset) => {
         accentColor?: "white" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
-        alignContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
-        alignItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        alignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        alignTracks?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
+        alignContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
+        alignItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        alignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        alignTracks?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
         animationDelay?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         animationDirection?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "alternate" | "alternate-reverse" | "reverse" | undefined;
         animationDuration?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
@@ -225,10 +225,10 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         insetInlineEnd?: string | number | (string & {}) | undefined;
         insetInlineStart?: string | number | (string & {}) | undefined;
         isolation?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "isolate" | undefined;
-        justifyContent?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "normal" | undefined;
-        justifyItems?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "legacy" | undefined;
-        justifySelf?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        justifyTracks?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "normal" | undefined;
+        justifyContent?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
+        justifyItems?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "legacy" | undefined;
+        justifySelf?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        justifyTracks?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
         left?: string | number | (string & {}) | undefined;
         letterSpacing?: string | number | undefined;
         lineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
@@ -318,7 +318,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         paintOrder?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "fill" | "markers" | "stroke" | undefined;
         perspective?: string | number | undefined;
         perspectiveOrigin?: string | number | (string & {}) | undefined;
-        placeContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
+        placeContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
         pointerEvents?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | "all" | "visible" | "fill" | "stroke" | "painted" | "visibleFill" | "visiblePainted" | "visibleStroke" | undefined;
         position?: "fixed" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "relative" | "static" | "sticky" | undefined;
         quotes?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | undefined;
@@ -459,8 +459,8 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         overflow?: "hidden" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "-moz-hidden-unscrollable" | "clip" | "scroll" | "visible" | undefined;
         overscrollBehavior?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | "contain" | undefined;
         padding?: string | number | (string & {}) | undefined;
-        placeItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        placeSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        placeItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        placeSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
         textDecoration?: string | number | (string & {}) | undefined;
         textEmphasis?: "open" | "circle" | "white" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "filled" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dot" | "double-circle" | "sesame" | "triangle" | undefined;
         transition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "all" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear" | undefined;
@@ -520,7 +520,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         MozWindowDragging?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "drag" | "no-drag" | undefined;
         MozWindowShadow?: "default" | "menu" | "tooltip" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "sheet" | undefined;
         msAccelerator?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "true" | "false" | undefined;
-        msAlignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        msAlignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
         msBlockProgression?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "bt" | "lr" | "rl" | "tb" | undefined;
         msContentZoomChaining?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "chained" | undefined;
         msContentZoomLimitMax?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
@@ -541,7 +541,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         msHyphenateLimitZone?: string | number | (string & {}) | undefined;
         msHyphens?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | "manual" | undefined;
         msImeAlign?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "after" | undefined;
-        msJustifySelf?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        msJustifySelf?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
         msLineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
         msOrder?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         msOverflowStyle?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | "scrollbar" | "-ms-autohiding-scrollbar" | undefined;
@@ -577,13 +577,13 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         msTransitionTimingFunction?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear" | undefined;
         msUserSelect?: "text" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "element" | undefined;
         msWordBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "break-word" | "break-all" | "keep-all" | undefined;
-        msWrapFlow?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "both" | "clear" | "end" | "maximum" | undefined;
+        msWrapFlow?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "both" | "end" | "clear" | "maximum" | undefined;
         msWrapMargin?: string | number | undefined;
         msWrapThrough?: "wrap" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | undefined;
         msWritingMode?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl" | undefined;
-        WebkitAlignContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
-        WebkitAlignItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        WebkitAlignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "stretch" | "end" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        WebkitAlignContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | undefined;
+        WebkitAlignItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        WebkitAlignSelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
         WebkitAnimationDelay?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         WebkitAnimationDirection?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "alternate" | "alternate-reverse" | "reverse" | undefined;
         WebkitAnimationDuration?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
@@ -631,7 +631,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         WebkitFontVariantLigatures?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "normal" | "common-ligatures" | "contextual" | "discretionary-ligatures" | "historical-ligatures" | "no-common-ligatures" | "no-contextual" | "no-discretionary-ligatures" | "no-historical-ligatures" | undefined;
         WebkitHyphens?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "auto" | "manual" | undefined;
         WebkitInitialLetter?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | "normal" | undefined;
-        WebkitJustifyContent?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "flex-end" | "flex-start" | "normal" | undefined;
+        WebkitJustifyContent?: "start" | "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
         WebkitLineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
         WebkitLineClamp?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | (number & {}) | undefined;
         WebkitMarginEnd?: string | number | (string & {}) | undefined;
@@ -716,7 +716,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         WebkitTextStroke?: string | number | (string & {}) | undefined;
         WebkitTransition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "all" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear" | undefined;
         azimuth?: "left" | "right" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "behind" | "center-left" | "center-right" | "far-left" | "far-right" | "left-side" | "leftwards" | "right-side" | "rightwards" | undefined;
-        boxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "baseline" | undefined;
+        boxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "baseline" | undefined;
         boxDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "reverse" | undefined;
         boxFlex?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         boxFlexGroup?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
@@ -743,7 +743,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         scrollSnapTypeX?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "mandatory" | "proximity" | undefined;
         scrollSnapTypeY?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "mandatory" | "proximity" | undefined;
         scrollbarTrackColor?: "white" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
-        KhtmlBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "baseline" | undefined;
+        KhtmlBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "baseline" | undefined;
         KhtmlBoxDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "reverse" | undefined;
         KhtmlBoxFlex?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         KhtmlBoxFlexGroup?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
@@ -764,7 +764,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         MozBorderRadiusBottomright?: string | number | (string & {}) | undefined;
         MozBorderRadiusTopleft?: string | number | (string & {}) | undefined;
         MozBorderRadiusTopright?: string | number | (string & {}) | undefined;
-        MozBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "baseline" | undefined;
+        MozBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "baseline" | undefined;
         MozBoxDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "reverse" | undefined;
         MozBoxFlex?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         MozBoxOrdinalGroup?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
@@ -812,7 +812,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         OTransitionDuration?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         OTransitionProperty?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "all" | undefined;
         OTransitionTimingFunction?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear" | undefined;
-        WebkitBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "stretch" | "end" | "baseline" | undefined;
+        WebkitBoxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "baseline" | undefined;
         WebkitBoxDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "reverse" | undefined;
         WebkitBoxFlex?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         WebkitBoxFlexGroup?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;

package/dist/core/components/organisms/datePicker/DatePicker.d.ts

@@ -15,7 +15,7 @@ export declare type DatePickerProps = SharedProps & {
     validators: Validators;
     closeOnSelect: boolean;
     showTodayDate?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 };
 export interface DatePickerState {
     init: boolean;

package/dist/core/components/organisms/timePicker/TimePicker.d.ts

@@ -1,19 +1,11 @@
-import { InputMaskProps } from "../../../index.type";
-import { Validators } from "../../../utils/types";
-export declare type AMPMType = 'AM' | 'PM';
-export declare type TimeFormat = 'hh:mm AM' | 'hh:mm';
-export declare type TimeType = number | string;
-export interface TimePickerProps {
-    time?: TimeType;
-    inputOptions: Omit<InputMaskProps, 'mask' | 'value' | 'validators'>;
-    inputFormat: TimeFormat;
-    outputFormat: TimeFormat;
-    validators: Validators;
-    onTimeChange?: (timeVal?: string) => void;
-}
+import { TimePickerDropdownProps } from "./TimePickerWithSearch";
+import { TimePickerInputProps } from "./TimePickerWithInput";
+export declare type TimePickerProps = TimePickerInputProps & TimePickerDropdownProps;
 export declare const TimePicker: {
     (props: TimePickerProps): JSX.Element;
     defaultProps: {
+        timeFormat: string;
+        interval: number;
         inputFormat: string;
         outputFormat: string;
         inputOptions: {};

package/dist/core/components/organisms/timePicker/TimePickerWithInput.d.ts

@@ -0,0 +1,24 @@
+import { InputMaskProps } from "../../../index.type";
+import { Validators } from "../../../utils/types";
+export declare type AMPMType = 'AM' | 'PM';
+export declare type InputFormat = 'hh:mm AM' | 'hh:mm';
+export declare type TimeType = number | string;
+export interface TimePickerInputProps {
+    time?: TimeType;
+    inputOptions: Omit<InputMaskProps, 'mask' | 'value' | 'validators'>;
+    inputFormat: InputFormat;
+    outputFormat: InputFormat;
+    validators: Validators;
+    onTimeChange?: (timeVal?: string) => void;
+}
+export declare const TimePickerWithInput: {
+    (props: TimePickerInputProps): JSX.Element;
+    defaultProps: {
+        inputFormat: string;
+        outputFormat: string;
+        inputOptions: {};
+        validators: ((val: string, format: string) => boolean)[];
+    };
+    displayName: string;
+};
+export default TimePickerWithInput;

package/dist/core/components/organisms/timePicker/TimePickerWithSearch.d.ts

@@ -0,0 +1,32 @@
+import { BaseProps } from "../../../utils/types";
+import { OptionSchema } from "../../atoms/dropdown/option";
+declare type fetchOptionsFunction = (searchTerm: string) => Promise<{
+    count: number;
+    searchTerm?: string;
+    scrollToIndex?: number;
+    options: OptionSchema[];
+}>;
+export declare type TimeFormat = '12-Hour' | '24-Hour';
+export interface TimePickerDropdownProps extends BaseProps {
+    withSearch?: boolean;
+    startTime?: string;
+    endTime?: string;
+    interval: number;
+    timeFormat: TimeFormat;
+    open?: boolean;
+    noResultMessage?: string;
+    showDuration?: boolean;
+    disabledSlotList?: string[];
+    onChange?: (selected: any[] | any, name?: string | number) => void;
+    fetchTimeOptions?: fetchOptionsFunction;
+    id?: string;
+}
+export declare const TimePickerWithSearch: {
+    (props: TimePickerDropdownProps): JSX.Element;
+    defaultProps: {
+        timeFormat: string;
+        interval: number;
+    };
+    displayName: string;
+};
+export default TimePickerWithSearch;

package/dist/core/components/organisms/timePicker/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from "./TimePicker";
 export * from "./TimePicker";
+export * from "./TimePickerWithInput";
+export * from "./TimePickerWithSearch";

package/dist/core/components/organisms/timePicker/utility/searchUtils.d.ts

@@ -0,0 +1,7 @@
+import { OptionSchema } from "../../../atoms/dropdown/option";
+export declare const formatSearchTerm: (optionList: string[], searchTerm: string) => {
+    hour: string;
+    min: string;
+};
+export declare const getSearchIndex: (optionList: string[], searchTerm: string) => number;
+export declare const getScrollIndex: (dropdownOptionList: OptionSchema[], searchTerm: string) => number;

package/dist/core/components/organisms/timePicker/utility/timePickerUtility.d.ts

@@ -0,0 +1,19 @@
+import { TimePickerDropdownProps } from "../TimePickerWithSearch";
+export declare const isFormat12Hour: (format: string) => boolean;
+export declare const _isTimeInAM: (time: string) => boolean;
+export declare const _isTimeInPM: (time: string) => boolean;
+export declare const convert12To24HourFormat: (timeStr: string) => string;
+export declare const convertToTwoDigit: (val: string | number) => string;
+export declare const convert24To12HourFormat: (timeStr: string) => string;
+export declare const checkTimeDifference: (startTime: string, endTime: string) => boolean;
+export declare const getTimeDifference: (startTime: string, endTime: string) => {
+    hour: number;
+    minute: number;
+};
+export declare const getDropdownOptionList: (props: TimePickerDropdownProps) => {
+    label: string;
+    value: string;
+    disabled: boolean | undefined;
+    selected: boolean;
+    optionID: string;
+}[];

package/dist/core/index.d.ts

@@ -64,6 +64,7 @@ export { Placeholder } from "./components/molecules/placeholder";
 export { EditableInput } from "./components/molecules/editableInput";
 export { EditableChipInput } from "./components/molecules/editableChipInput";
 export { PlaceholderParagraph } from "./components/atoms/placeholderParagraph";
+export { PlaceholderImage } from "./components/atoms/placeholderImage";
 export { ProgressRing } from "./components/atoms/progressRing";
 export { Stepper } from "./components/molecules/stepper";
 export { DateRangePicker } from "./components/organisms/dateRangePicker";